diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
index d640ba3..317d9cf 100644
--- a/src/components/ui/mode-toggle.tsx
+++ b/src/components/ui/mode-toggle.tsx
@@ -12,21 +12,18 @@ export function ModeToggle() {
     <Tooltip>
       <TooltipTrigger asChild>
         <div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant='ghost' size='icon' className='h-8 w-8 p-0'>
-                {theme === 'light' ? (
-                  <Sun className='hover:text-text-primary h-6 w-6 text-white transition-all dark:-rotate-90' />
-                ) : (
-                  <Moon className='hover:text-text-primary h-6 w-6 rotate-90 scale-0 text-white transition-all dark:rotate-0 dark:scale-100' />
-                )}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align='end'>
-              <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <Button 
+            variant='ghost' 
+            size='icon' 
+            className='h-8 w-8 p-0'
+            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          >
+            {theme === 'light' ? (
+              <Sun className='hover:text-text-primary h-6 w-6 text-white transition-all dark:-rotate-90' />
+            ) : (
+              <Moon className='hover:text-text-primary h-6 w-6 rotate-90 scale-0 text-white transition-all dark:rotate-0 dark:scale-100' />
+            )}
+          </Button>
         </div>
       </TooltipTrigger>
       <TooltipContent>Toggle theme</TooltipContent>
diff --git a/src/providers/theme.tsx b/src/providers/theme.tsx
index e38d3ab..360f40c 100644
--- a/src/providers/theme.tsx
+++ b/src/providers/theme.tsx
@@ -20,8 +20,26 @@ const initialState: ThemeProviderState = {
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 
 export function ThemeProvider({ children, storageKey = 'app-theme', ...props }: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || 'light')
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem(storageKey) as Theme
+    if (stored) return stored
+    
+    // Check system preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  })
 
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      setTheme(e.matches ? 'dark' : 'light')
+    }
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
   useEffect(() => {
     const root = window.document.documentElement
     root.classList.remove('light', 'dark')