diff --git a/web/bun.lock b/web/bun.lock
index 2859893..602bf75 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -10,6 +10,7 @@
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.2.8",
         "bun-plugin-tailwind": "^0.1.2",
         "class-variance-authority": "^0.7.1",
@@ -102,6 +103,8 @@
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
+
     "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
 
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
diff --git a/web/package.json b/web/package.json
index 2dbb1e5..2cada7a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.8",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",
diff --git a/web/src/components/AppSidebar.tsx b/web/src/components/AppSidebar.tsx
index 98357bc..60b7d2c 100644
--- a/web/src/components/AppSidebar.tsx
+++ b/web/src/components/AppSidebar.tsx
@@ -90,21 +90,7 @@ export function AppSidebar() {
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>
-            <SidebarFooter className="p-4 border-t border-white/5">
-                <SidebarMenu>
-                    <SidebarMenuItem>
-                        <SidebarMenuButton size="lg" className="hover:bg-white/5 rounded-xl transition-colors">
-                            <div className="bg-primary/20 border border-primary/20 flex aspect-square size-10 items-center justify-center rounded-full overflow-hidden">
-                                <span className="text-sm font-bold text-primary italic">A</span>
-                            </div>
-                            <div className="flex flex-col gap-0.5 leading-none ml-2">
-                                <span className="font-bold text-sm text-white/90">Administrator</span>
-                                <span className="text-[10px] text-white/40 font-medium">Session Active</span>
-                            </div>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-                </SidebarMenu>
-            </SidebarFooter>
+
             <SidebarRail />
         </Sidebar>
     );
diff --git a/web/src/components/ui/switch.tsx b/web/src/components/ui/switch.tsx
new file mode 100644
index 0000000..b0363e3
--- /dev/null
+++ b/web/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index cacbf5d..66fc1eb 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -4,6 +4,7 @@ import { Loader2, Save, RefreshCw, Smartphone, Coins, Trophy, Shield, Users, Ter
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
 
 // Types matching the backend response
 interface RoleOption { id: string; name: string; color: string; }
@@ -231,11 +232,9 @@ export function Settings() {
                                 />
                                 <div className="flex items-center justify-between p-4 rounded-lg bg-white/5 border border-white/5">
                                     <span className="text-sm font-medium">Allow Self Transfer</span>
-                                    <input
-                                        type="checkbox"
+                                    <Switch
                                         checked={config?.economy?.transfers?.allowSelfTransfer ?? false}
-                                        onChange={(e) => updateConfig("economy.transfers.allowSelfTransfer", e.target.checked)}
-                                        className="h-5 w-5 rounded border-white/10 bg-white/5"
+                                        onCheckedChange={(checked) => updateConfig("economy.transfers.allowSelfTransfer", checked)}
                                     />
                                 </div>
                             </div>
@@ -425,11 +424,9 @@ export function Settings() {
                                                             {config?.commands?.[cmd.name] === false ? "Disabled" : "Enabled"}
                                                         </span>
                                                     </div>
-                                                    <input
-                                                        type="checkbox"
+                                                    <Switch
                                                         checked={config?.commands?.[cmd.name] !== false}
-                                                        onChange={(e) => updateConfig(`commands.${cmd.name}`, e.target.checked)}
-                                                        className="h-4 w-4 rounded border-white/10 bg-white/5 accent-primary cursor-pointer"
+                                                        onCheckedChange={(checked) => updateConfig(`commands.${cmd.name}`, checked)}
                                                     />
                                                 </div>
                                             ))}