diff --git a/app/skeleton/page.tsx b/app/skeleton/page.tsx
index f4da00c..d911996 100644
--- a/app/skeleton/page.tsx
+++ b/app/skeleton/page.tsx
@@ -1,40 +1,7 @@
 "use client";
 
 import { PageSkeleton } from "@/components/ui/page-skeleton";
-import { Button } from "@/components/ui/button";
-import { useTheme } from "@/contexts/theme-context";
 
 export default function SkeletonDebugPage() {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <div className="min-h-screen">
-      <div className="container mx-auto p-4">
-        <div className="flex justify-end mb-4 gap-2">
-          <Button
-            variant="outline"
-            onClick={() => setTheme("light")}
-            className={theme === "light" ? "border-primary" : ""}
-          >
-            Light
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => setTheme("dark")}
-            className={theme === "dark" ? "border-primary" : ""}
-          >
-            Dark
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => setTheme("system")}
-            className={theme === "system" ? "border-primary" : ""}
-          >
-            System
-          </Button>
-        </div>
-      </div>
-      <PageSkeleton />
-    </div>
-  );
+  return <PageSkeleton />;
 }
diff --git a/components/theme-toggler-frame.tsx b/components/theme-toggler-frame.tsx
new file mode 100644
index 0000000..4b6a332
--- /dev/null
+++ b/components/theme-toggler-frame.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { Switch } from "@/components/ui/switch";
+import { Sun, Moon } from "lucide-react";
+import { useTheme } from "@/contexts/theme-context";
+import { ReactNode, useEffect, useState } from "react";
+
+interface ThemeTogglerFrameProps {
+  children: ReactNode;
+}
+
+export default function ThemeTogglerFrame({ children }: ThemeTogglerFrameProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return <div className="min-h-screen">{children}</div>;
+  }
+
+  return (
+    <div className="min-h-screen">
+      <div className="container mx-auto p-4">
+        <div className="flex justify-end mb-4 items-center gap-2">
+          {theme === "dark" && (
+            <Sun className="h-4 w-4 text-muted-foreground hover:text-foreground transition-colors" />
+          )}
+          <Switch
+            checked={theme === "dark"}
+            onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
+          />
+          {theme === "light" && (
+            <Moon className="h-4 w-4 text-muted-foreground hover:text-foreground transition-colors" />
+          )}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/components/ui/page-skeleton.tsx b/components/ui/page-skeleton.tsx
index 5e5068d..8d203e9 100644
--- a/components/ui/page-skeleton.tsx
+++ b/components/ui/page-skeleton.tsx
@@ -2,41 +2,46 @@
 
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card } from "@/components/ui/card";
+import ThemeTogglerFrame from "@/components/theme-toggler-frame";
 
 export function PageSkeleton() {
   return (
-    <div className="container mx-auto p-6 space-y-8">
-      {/* Header Section */}
-      <div className="space-y-4">
-        <Skeleton className="h-8 w-[250px]" />
-        <Skeleton className="h-4 w-[350px]" />
-      </div>
-
-      {/* Content Grid */}
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {[1, 2, 3].map((i) => (
-          <Card key={i} className="p-6 space-y-4">
-            <Skeleton className="h-4 w-[100px]" />
-            <Skeleton className="h-20 w-full" />
-            <div className="space-y-2">
-              <Skeleton className="h-3 w-[140px]" />
-              <Skeleton className="h-3 w-[100px]" />
-            </div>
-          </Card>
-        ))}
-      </div>
+    <>
+      <ThemeTogglerFrame>
+        <div className="container mx-auto p-6 space-y-8">
+          {/* Header Section */}
+          <div className="space-y-4">
+            <Skeleton className="h-8 w-[250px]" />
+            <Skeleton className="h-4 w-[350px]" />
+          </div>
 
-      {/* Table/List Section */}
-      <Card className="p-6">
-        <div className="space-y-4">
-          <Skeleton className="h-6 w-[200px]" />
-          <div className="space-y-2">
-            {[1, 2, 3, 4].map((i) => (
-              <Skeleton key={i} className="h-12 w-full" />
+          {/* Content Grid */}
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {[1, 2, 3].map((i) => (
+              <Card key={i} className="p-6 space-y-4 border-border/50">
+                <Skeleton className="h-4 w-[100px]" />
+                <Skeleton className="h-20 w-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-3 w-[140px]" />
+                  <Skeleton className="h-3 w-[100px]" />
+                </div>
+              </Card>
             ))}
           </div>
+
+          {/* Table/List Section */}
+          <Card className="p-6 border-border/50">
+            <div className="space-y-4">
+              <Skeleton className="h-6 w-[200px]" />
+              <div className="space-y-2">
+                {[1, 2, 3, 4].map((i) => (
+                  <Skeleton key={i} className="h-12 w-full" />
+                ))}
+              </div>
+            </div>
+          </Card>
         </div>
-      </Card>
-    </div>
+      </ThemeTogglerFrame>
+    </>
   );
 }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..5f4117f
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/package-lock.json b/package-lock.json
index b9bfb73..37004af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.2",
         "@radix-ui/react-tooltip": "^1.1.4",
@@ -2714,6 +2715,92 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.2.tgz",
+      "integrity": "sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.1.tgz",
diff --git a/package.json b/package.json
index 07c9335..e8f261e 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",