diff --git a/docs/components/theme-toggler.tsx b/docs/components/theme-toggler.tsx
index 50d157db..bed0ced5 100644
--- a/docs/components/theme-toggler.tsx
+++ b/docs/components/theme-toggler.tsx
@@ -4,55 +4,64 @@ import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
 export function ThemeToggle() {
-	const { setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="border-l ring-0 rounded-none h-14 w-[3.56rem] hidden md:flex shrink-0"
-				>
-					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-					<Moon className="absolute h-[1.2rem] w-[1.2rem] 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")}>
-					Light
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
-					Dark
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
-					System
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="border-l ring-0 rounded-none h-14 w-[3.56rem] hidden md:flex shrink-0"
+        >
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="rounded-none" align="end">
+        <DropdownMenuItem
+          className="rounded-none"
+          onClick={() => setTheme("light")}
+        >
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="rounded-none"
+          onClick={() => setTheme("dark")}
+        >
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="rounded-none"
+          onClick={() => setTheme("system")}
+        >
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 }
 export function MobileThemeToggle() {
-	const { theme, setTheme } = useTheme();
-	return (
-		<div className="block md:hidden">
-			<Button
-				variant="ghost"
-				size="icon"
-				onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-			>
-				<Sun className="h-4 w-4 dark:hidden" color="#000" />
-				<Moon className="hidden h-4 w-4 dark:block" />
-				<span className="sr-only">Toggle theme</span>
-			</Button>
-		</div>
-	);
+  const { theme, setTheme } = useTheme();
+  return (
+    <div className="block md:hidden">
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      >
+        <Sun className="h-4 w-4 dark:hidden" color="#000" />
+        <Moon className="hidden h-4 w-4 dark:block" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    </div>
+  );
 }