diff --git a/src/app/globals.css b/src/app/globals.css
index 13d40b8..b5c61c9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 87893ee..156eadf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import Header from "./components/section/Header";
 import Footer from "./components/section/Footer";
+import { NextUIProvider } from "@nextui-org/react";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -30,9 +31,15 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <Header/>
-        {children}
-        <Footer/>
+        <NextUIProvider>
+        <main className="text-foreground bg-background">
+          <Header/>
+          <article>
+            {children}
+          </article>
+          <Footer />
+          </main>
+        </NextUIProvider>
       </body>
     </html>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 021c393..8d70ac5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,9 @@
 import type { Config } from "tailwindcss";
+import {nextui} from "@nextui-org/react"
 
 const config: Config = {
   content: [
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
@@ -14,6 +16,24 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  darkMode: "media",
+  plugins: [nextui({
+    prefix: 'nextui',
+    defaultTheme: 'dark',
+    themes: {
+      dark: {
+        colors: {
+          foreground: '#FBFBFB',
+          background: '#101010'
+        }
+      },
+      light: {
+        colors: {
+          foreground: '#101010',
+          background: '#FBFBFB'
+        }
+      }
+    }
+  })],
 };
 export default config;
