diff --git a/src/components/ui/mode-toggle.tsx b/src/components/ui/mode-toggle.tsx
index 32b70af..0e171d9 100644
--- a/src/components/ui/mode-toggle.tsx
+++ b/src/components/ui/mode-toggle.tsx
@@ -1,31 +1,21 @@
 import { Button } from "@/components/ui/button";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Laptop, Moon, Sun } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import * as React from "react";
 
 export function ModeToggle() {
-	const [theme, setThemeState] = React.useState<
-		"theme-light" | "dark" | "system"
-	>("theme-light");
+	const [theme, setTheme] = React.useState<"theme-light" | "dark" | "system">(
+		"theme-light",
+	);
 
 	React.useEffect(() => {
 		const isDarkMode = document.documentElement.classList.contains("dark");
-		setThemeState(isDarkMode ? "dark" : "theme-light");
+		setTheme(isDarkMode ? "dark" : "theme-light");
 	}, []);
 
 	React.useEffect(() => {
-		const isDark =
-			theme === "dark" ||
-			(theme === "system" &&
-				window.matchMedia("(prefers-color-scheme: dark)").matches);
+		const isDark = theme === "dark";
 
 		document.documentElement.classList.add("disable-transitions");
-
 		document.documentElement.classList[isDark ? "add" : "remove"]("dark");
 
 		window
@@ -37,34 +27,21 @@ export function ModeToggle() {
 		});
 	}, [theme]);
 
+	const toggleTheme = () => {
+		setTheme(theme === "dark" ? "theme-light" : "dark");
+	};
+
 	return (
-		<DropdownMenu modal={false}>
-			<DropdownMenuTrigger asChild>
-				<Button
-					variant="outline"
-					size="icon"
-					className="group"
-					title="Toggle theme"
-				>
-					<Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-					<Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-					<span className="sr-only">Toggle theme</span>
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end" className="bg-background">
-				<DropdownMenuItem onClick={() => setThemeState("theme-light")}>
-					<Sun className="mr-2 size-4" />
-					<span>Light</span>
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setThemeState("dark")}>
-					<Moon className="mr-2 size-4" />
-					<span>Dark</span>
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setThemeState("system")}>
-					<Laptop className="mr-2 size-4" />
-					<span>System</span>
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
+		<Button
+			variant="outline"
+			size="icon"
+			className="relative overflow-hidden"
+			onClick={toggleTheme}
+			title="Toggle theme"
+		>
+			<Sun className="size-4 absolute inset-0 m-auto scale-100 rotate-0 transition-all duration-500 dark:scale-0 dark:-rotate-90" />
+			<Moon className="size-4 absolute inset-0 m-auto scale-0 rotate-90 transition-all duration-500 dark:scale-100 dark:rotate-0" />
+			<span className="sr-only">Toggle theme</span>
+		</Button>
 	);
 }