diff --git a/app/templates/shared/macros/inputs.html b/app/templates/shared/macros/inputs.html
index b0c4c79d..6101d8c1 100644
--- a/app/templates/shared/macros/inputs.html
+++ b/app/templates/shared/macros/inputs.html
@@ -311,9 +311,9 @@
     color='indigo'
 ) %}
 {% set sizes = {
-    'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'translate': 'translate-x-5', 'text': 'text-sm'},
-    'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'translate': 'translate-x-7', 'text': 'text-base'},
-    'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'translate': 'translate-x-8', 'text': 'text-lg'}
+    'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'offset': '1.25rem', 'text': 'text-sm'},
+    'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'offset': '1.75rem', 'text': 'text-base'},
+    'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'offset': '2rem', 'text': 'text-lg'}
 } %}
 {% set s = sizes[size] %}
 <div class="inline-flex items-center gap-3">
@@ -328,8 +328,8 @@
             :aria-checked="{{ model }}"
             class="{{ s.track }} relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-{{ color }}-500 focus:ring-offset-2"
             :class="{{ model }} ? 'bg-{{ color }}-600' : 'bg-gray-300 dark:bg-gray-600'">
-        <span class="{{ s.thumb }} absolute left-0.5 bg-white rounded-full shadow-md transition-transform"
-              :class="{{ model }} ? '{{ s.translate }}' : 'translate-x-0'"></span>
+        <span class="{{ s.thumb }} absolute bg-white rounded-full shadow-md transition-transform duration-200"
+              :style="{{ model }} ? 'transform: translateX({{ s.offset }})' : 'transform: translateX(0.125rem)'"></span>
     </button>
 
     {% if right_label %}