diff --git a/packages/ui/src/components/Form/Input/Input.vue b/packages/ui/src/components/Form/Input/Input.vue
index a4583f69..33541a0c 100644
--- a/packages/ui/src/components/Form/Input/Input.vue
+++ b/packages/ui/src/components/Form/Input/Input.vue
@@ -10,12 +10,14 @@ const modelValue = defineModel<string>({ required: false })
   <input
     v-model="modelValue"
     :type="props.type || 'text'"
-    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
-    transition="all duration-200 ease-in-out"
-    text="disabled:neutral-400 dark:disabled:neutral-600"
-    cursor="disabled:not-allowed"
-    w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
-    shadow="sm"
-    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
+    :class="[
+      'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
+      'transition-all duration-200 ease-in-out',
+      'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+      'cursor-disabled:not-allowed',
+      'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+      'shadow-sm',
+      'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+    ]"
   >
 </template>