diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index af9c64ee..fbea77cd 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -10,16 +10,24 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				"peer border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				"peer relative size-4 shrink-0 rounded-[4px] border shadow-xs outline-none transition-colors",
+				"border-input bg-background text-transparent",
+				"hover:border-primary/60",
+				"data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground",
+				"data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground",
+				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
+				"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+				"disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator
 				data-slot="checkbox-indicator"
-				className="grid place-content-center text-current transition-none"
+				className="flex size-full items-center justify-center text-current"
+				keepMounted={false}
 			>
-				<CheckIcon className="size-3.5" />
+				<CheckIcon className="size-3 stroke-[3]" aria-hidden />
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>
 	);
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index d9bffa5f..3d140508 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { CheckIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -16,7 +17,13 @@ function Switch({
 			data-slot="switch"
 			data-size={size}
 			className={cn(
-				"peer data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-unchecked:bg-input/80 group/switch inline-flex 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 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+				"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-colors",
+				"bg-input hover:bg-input/80",
+				"data-checked:bg-primary data-checked:hover:bg-primary/90",
+				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
+				"disabled:cursor-not-allowed disabled:opacity-50",
+				"data-[size=default]:h-5 data-[size=default]:w-9",
+				"data-[size=sm]:h-4 data-[size=sm]:w-7",
 				className,
 			)}
 			{...props}
@@ -24,9 +31,21 @@ function Switch({
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
 				className={cn(
-					"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0",
+					"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full bg-background text-primary shadow-sm ring-0 transition-[left,colors]",
+					"left-0.5 data-checked:left-[calc(100%-1.125rem)]",
+					"group-data-[size=default]/switch:size-4",
+					"group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:data-checked:left-[calc(100%-0.875rem)]",
 				)}
-			/>
+			>
+				<CheckIcon
+					aria-hidden
+					className={cn(
+						"size-2.5 stroke-[3] opacity-0 transition-opacity",
+						"group-data-checked/switch:opacity-100",
+						"group-data-[size=sm]/switch:size-2",
+					)}
+				/>
+			</SwitchPrimitive.Thumb>
 		</SwitchPrimitive.Root>
 	);
 }