diff --git a/frontend/components/ui/switch.tsx b/frontend/components/ui/switch.tsx
index 90d25ae..022dff7 100644
--- a/frontend/components/ui/switch.tsx
+++ b/frontend/components/ui/switch.tsx
@@ -3,23 +3,38 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
-const Switch = React.forwardRef<
-    HTMLInputElement,
-    React.InputHTMLAttributes<HTMLInputElement>
->(({ className, ...props }, ref) => (
-    <label className="relative inline-flex items-center cursor-pointer">
-        <input
-            type="checkbox"
-            className="sr-only peer"
-            ref={ref}
-            {...props}
-        />
-        <div className={cn(
-            "w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600",
-            className
-        )}></div>
-    </label>
-))
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    onCheckedChange?: (checked: boolean) => void
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+    ({ className, checked, onCheckedChange, disabled, ...props }, ref) => (
+        <label className={cn(
+            "relative inline-flex items-center cursor-pointer",
+            disabled && "cursor-not-allowed opacity-50"
+        )}>
+            <input
+                type="checkbox"
+                className="sr-only peer"
+                ref={ref}
+                checked={checked}
+                disabled={disabled}
+                onChange={(e) => onCheckedChange?.(e.target.checked)}
+                {...props}
+            />
+            <div className={cn(
+                "w-11 h-6 rounded-full transition-colors",
+                "bg-muted peer-checked:bg-primary",
+                "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
+                "after:content-[''] after:absolute after:top-[2px] after:left-[2px]",
+                "after:bg-background after:border after:border-muted after:rounded-full",
+                "after:h-5 after:w-5 after:transition-transform",
+                "peer-checked:after:translate-x-5 peer-checked:after:border-primary",
+                className
+            )}></div>
+        </label>
+    )
+)
 Switch.displayName = "Switch"
 
 export { Switch }