diff --git a/src/routes/Theme.svelte b/src/routes/Theme.svelte
index d6407ed..59c5f4f 100644
--- a/src/routes/Theme.svelte
+++ b/src/routes/Theme.svelte
@@ -2,14 +2,13 @@
     import Sun from "lucide-svelte/icons/sun";
     import Moon from "lucide-svelte/icons/moon";
 
-    import { resetMode, setMode } from "mode-watcher";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+    import { toggleMode } from "mode-watcher";
     import { Button } from "$lib/components/ui/button/index.js";
 </script>
 
-<DropdownMenu.Root>
-<DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="outline" size="icon">
+<!-- Direct light/dark toggle: one click flips the theme, the Sun/Moon icons
+     rotate + scale to cross-fade. No dropdown. -->
+<Button on:click={toggleMode} variant="outline" size="icon">
     <Sun
     class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
     />
@@ -17,11 +16,4 @@
     class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
     />
     <span class="sr-only">Toggle theme</span>
-    </Button>
-</DropdownMenu.Trigger>
-<DropdownMenu.Content align="end">
-    <DropdownMenu.Item on:click={() => setMode("light")}>Light</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => setMode("dark")}>Dark</DropdownMenu.Item>
-    <DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
-</DropdownMenu.Content>
-</DropdownMenu.Root>
+</Button>