diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue
index facf78d7d..412ee4b42 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue
@@ -1,38 +1,52 @@
 <template>
-  <form class="flex flex-col gap-6" @submit.prevent="updateUser('profile')">
-    <form-input
+  <form class="flex flex-col gap-2" @submit.prevent="updateUser('profile')">
+    <woot-input
       v-model="userName"
-      type="text"
-      name="name"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
       :class="{ error: $v.userName.$error }"
       :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
       :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
-      :has-error="$v.userName.$error"
-      :error-message="$t('PROFILE_SETTINGS.FORM.NAME.ERROR')"
-      @blur="$v.userName.$touch"
+      :error="`${
+        $v.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
+      }`"
+      @input="$v.userName.$touch"
     />
-    <form-input
+    <woot-input
       v-model="userDisplayName"
-      type="text"
-      name="displayName"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
       :class="{ error: $v.userDisplayName.$error }"
       :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
       :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
-      :has-error="$v.userDisplayName.$error"
-      :error-message="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')"
-      @blur="$v.userDisplayName.$touch"
+      :error="`${
+        $v.userDisplayName.$error
+          ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
+          : ''
+      }`"
+      @input="$v.userDisplayName.$touch"
     />
-    <form-input
+    <woot-input
       v-if="emailEnabled"
       v-model="userEmail"
-      type="email"
-      name="email"
+      :styles="{
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      }"
       :class="{ error: $v.userEmail.$error }"
       :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
       :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
-      :has-error="$v.userEmail.$error"
-      :error-message="$t('PROFILE_SETTINGS.FORM.EMAIL.ERROR')"
-      @blur="$v.userEmail.$touch"
+      :error="`${
+        $v.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
+      }`"
+      @input="$v.userEmail.$touch"
     />
     <form-button
       type="submit"
@@ -46,13 +60,11 @@
 </template>
 <script>
 import FormButton from 'v3/components/Form/Button.vue';
-import FormInput from 'v3/components/Form/Input.vue';
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {
     FormButton,
-    FormInput,
   },
   mixins: [alertMixin],
   props: {