diff --git a/app/(main)/(routes)/page.tsx b/app/(main)/(routes)/page.tsx
index c4a7bd6..a417c63 100644
--- a/app/(main)/(routes)/page.tsx
+++ b/app/(main)/(routes)/page.tsx
@@ -1,10 +1,10 @@
-import { UserButton } from "@clerk/nextjs/app-beta";
+import { UserButton } from "@clerk/nextjs";
 
 export default function Home() {
   return (
      <div>
      <UserButton
-     afterSignOutUrl="/"
+        afterSignOutUrl="/"
      />
     </div>
   )
diff --git a/app/layout.tsx b/app/layout.tsx
index 02f4b47..c640255 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { Open_Sans } from 'next/font/google'
 import { ClerkProvider } from '@clerk/nextjs'
+import { ThemeProvider } from '@/components/providers/theme-provider'
 
 const Font = Open_Sans({ subsets: ['latin'] })
 
@@ -17,8 +18,17 @@ export default function RootLayout({
 }) {
   return (
     <ClerkProvider>
-      <html lang="en">
-        <body className={Font.className}>{children}</body>
+      <html lang="en" suppressHydrationWarning>
+        <body className={Font.className}>
+          <ThemeProvider
+            attribute='class'
+            defaultTheme='dark'
+            enableSystem={false}
+            storageKey='discord-theme'
+            >
+           {children}
+          </ThemeProvider>
+        </body>
       </html>
     </ClerkProvider>
   )
diff --git a/components/providers/theme-provider.tsx b/components/providers/theme-provider.tsx
new file mode 100644
index 0000000..8c90fbc
--- /dev/null
+++ b/components/providers/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
