diff --git a/app/layout.tsx b/app/layout.tsx
index 890767a..0a459d6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from 'next'
 import { Inter, JetBrains_Mono } from 'next/font/google'
 import { SessionProvider } from 'next-auth/react'
+import { ThemeProvider } from '@/components/theme-provider'
 import './globals.css'
 
 const inter = Inter({ subsets: ["latin"] });
@@ -41,9 +42,16 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
       <body className="font-sans antialiased">
-        <SessionProvider>{children}</SessionProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SessionProvider>{children}</SessionProvider>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/components/dashboard/header.tsx b/components/dashboard/header.tsx
index 859196e..7123d53 100644
--- a/components/dashboard/header.tsx
+++ b/components/dashboard/header.tsx
@@ -13,6 +13,7 @@ import {
 import { Menu, LogOut, Settings, User as UserIcon, Monitor } from 'lucide-react'
 import Link from 'next/link'
 import { MobileNav } from './mobile-nav'
+import { ThemeToggle } from '@/components/theme-toggle'
 import { useState } from 'react'
 
 interface Profile {
@@ -78,6 +79,9 @@ export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
           <h1 className="text-lg font-semibold hidden sm:block">{title}</h1>
         </div>
 
+        <div className="flex items-center gap-1">
+        <ThemeToggle />
+
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" className="flex items-center gap-2">
@@ -112,6 +116,7 @@ export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+        </div>
       </header>
 
       <MobileNav
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 0000000..7c3e4a0
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Sun, Moon, Monitor, Check } from 'lucide-react'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const icon =
+    theme === 'light' ? <Sun className="h-4 w-4" /> :
+    theme === 'dark'  ? <Moon className="h-4 w-4" /> :
+                        <Monitor className="h-4 w-4" />
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9">
+          {icon}
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')} className="gap-2 cursor-pointer">
+          <Sun className="h-4 w-4" />
+          Light
+          {theme === 'light' && <Check className="h-3.5 w-3.5 ml-auto" />}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')} className="gap-2 cursor-pointer">
+          <Moon className="h-4 w-4" />
+          Dark
+          {theme === 'dark' && <Check className="h-3.5 w-3.5 ml-auto" />}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')} className="gap-2 cursor-pointer">
+          <Monitor className="h-4 w-4" />
+          System
+          {theme === 'system' && <Check className="h-3.5 w-3.5 ml-auto" />}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
