diff --git a/src/ui/components/FaSwitch/index.vue b/src/ui/components/FaSwitch/index.vue
index 36973112..96e4b57a 100644
--- a/src/ui/components/FaSwitch/index.vue
+++ b/src/ui/components/FaSwitch/index.vue
@@ -17,7 +17,7 @@ const enabled = defineModel<boolean>()
 <template>
   <Switch v-model="enabled" :disabled>
     <template #thumb>
-      <FaIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-foreground" />
+      <FaIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="size-3 text-foreground" />
     </template>
   </Switch>
 </template>
diff --git a/src/ui/components/FaSwitch/switch/Switch.vue b/src/ui/components/FaSwitch/switch/Switch.vue
index ea634234..9c3cc522 100644
--- a/src/ui/components/FaSwitch/switch/Switch.vue
+++ b/src/ui/components/FaSwitch/switch/Switch.vue
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     )"
   >
     <SwitchThumb
-      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5')"
+      :class="cn('pointer-events-none flex-center h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5')"
     >
       <slot name="thumb" />
     </SwitchThumb>