diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 11fc79365..256060ee1 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -21,13 +21,12 @@ const checked = defineModel<boolean>({
       {{ label }}
     </span>
     <span
-      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 transition-colors duration-200 ease-in-out motion-reduce:transition-none cursor-pointer"
-      :class="checked ? 'bg-accent border-transparent shadow-sm' : 'bg-bg border border-border/50'"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer"
+      :class="checked ? 'bg-accent border-accent' : 'bg-fg/50 border-fg/50'"
       aria-hidden="true"
     >
       <span
-        class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-        :class="checked ? 'bg-bg' : 'bg-fg-muted'"
+        class="block h-5 w-5 rounded-full bg-bg shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none"
       />
     </span>
   </button>