diff --git a/app/layout.tsx b/app/layout.tsx
index bdeedff..d62a37a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -27,7 +27,13 @@ export default function RootLayout({
   return (
     <html lang="zh-CN" suppressHydrationWarning>
       <body className={`font-sans antialiased`}>
-        <ThemeProvider defaultTheme="system" storageKey="2fa-theme">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+          storageKey="2fa-theme"
+        >
           <LanguageProvider>{children}</LanguageProvider>
         </ThemeProvider>
         <Analytics />
diff --git a/app/page.tsx b/app/page.tsx
index ddd4077..5548c3d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -485,6 +485,17 @@ export default function TwoFactorAuth() {
       }
     })
 
+  // Cycle through themes
+  const cycleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark")
+    } else if (theme === "dark") {
+      setTheme("system")
+    } else {
+      setTheme("light")
+    }
+  }
+
   return (
     <div className="min-h-screen bg-background flex flex-col">
       {/* Header */}
@@ -501,29 +512,17 @@ export default function TwoFactorAuth() {
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon">
-                    <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                    <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                    <span className="sr-only">Toggle theme</span>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem onClick={() => setTheme("light")}>
-                    <Sun className="h-4 w-4 mr-2" />
-                    {t.themeLight}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => setTheme("dark")}>
-                    <Moon className="h-4 w-4 mr-2" />
-                    {t.themeDark}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => setTheme("system")}>
-                    <Monitor className="h-4 w-4 mr-2" />
-                    {t.themeSystem}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={cycleTheme}
+                title={theme === "light" ? t.themeLight : theme === "dark" ? t.themeDark : t.themeSystem}
+              >
+                {theme === "light" && <Sun className="h-5 w-5" />}
+                {theme === "dark" && <Moon className="h-5 w-5" />}
+                {theme === "system" && <Monitor className="h-5 w-5" />}
+                <span className="sr-only">Toggle theme</span>
+              </Button>
 
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
