diff --git a/app/globals.css b/app/globals.css
index e69de29..b5c61c9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/app/layout.tsx b/app/layout.tsx
index 861fd09..ed86a9c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,22 +1,28 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: [ 'latin' ] });
 
 export const metadata: Metadata = {
-  title: "Lumither's site",
-  description: "a small corner on internet",
+    title: 'Lumither\'s site',
+    description: 'a small corner on internet'
 };
 
 export default function RootLayout({
-  children,
+    children
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
+    return (
+        <html lang="en" suppressHydrationWarning>
+        <body className={ inter.className }>
+        <NextThemesProvider attribute="class" defaultTheme="dark">
+            { children }
+        </NextThemesProvider>
+        </body>
+        </html>
+    );
 }
diff --git a/app/page.tsx b/app/page.tsx
index f799f7e..b76ecfe 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
+import ThemeSwitcher from '@/components/ThemeSwitcher';
+
 export default function Home() {
     return (
         <main>
-
+            <ThemeSwitcher />
         </main>
     );
 }
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..2bcd707
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import { NextUIProvider } from '@nextui-org/react';
+import React from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return (
+        <NextUIProvider>
+            { children }
+        </NextUIProvider>
+    );
+}
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..347ba43
--- /dev/null
+++ b/components/ThemeSwitcher.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { Button } from '@nextui-org/react';
+
+function ThemeSwitcher() {
+    const [ mounted, setMounted ] = useState(false);
+    const { theme, setTheme, themes } = useTheme();
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <div>
+            <Button onClick={ () => {
+                setTheme('light');
+            } }>Light Mode</Button>
+            <Button onClick={ () => {
+                setTheme('dark');
+            } }>Dark Mode</Button>
+        </div>
+    );
+}
+
+export default ThemeSwitcher;
diff --git a/package.json b/package.json
index f6f0f09..8c6cdbb 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nextui-org/react": "^2.3.5",
+    "framer-motion": "^11.1.7",
+    "next": "14.2.2",
+    "next-themes": "^0.3.0",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.2"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "typescript": "^5",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..29026da 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,20 +1,33 @@
-import type { Config } from "tailwindcss";
+import { nextui } from '@nextui-org/react';
+
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
+    content: [
+        './pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './app/**/*.{js,ts,jsx,tsx,mdx}',
+        './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+    ],
+    // theme: {
+    //     extend: {}
+    // },
+    darkMode: 'class',
+    plugins: [ nextui(
+        {
+            // defaultTheme: 'dark',
+            defaultExtendTheme: 'light',
+            themes: {
+                'light': {
+                    layout: {},
+                    colors: {}
+                },
+                'dark': {
+                    layout: {},
+                    colors: {}
+                }
+            }
+        }
+    ) ]
 };
 export default config;