diff --git a/frontend/pages/profile/index.vue b/frontend/pages/profile/index.vue
index 9c2a28b..f5d127c 100644
--- a/frontend/pages/profile/index.vue
+++ b/frontend/pages/profile/index.vue
@@ -156,7 +156,7 @@ const handleSubmit = (withValidation: boolean) => {
 </script>
 
 <template>
-    <div class="w-full flex flex-col gap-10">
+    <div class="w-full flex flex-col gap-5">
         <ProfilePageTitle title="پروفایل" icon="bi:person-vcard" />
 
         <div class="flex flex-col gap-6">
@@ -243,7 +243,7 @@ const handleSubmit = (withValidation: boolean) => {
                 <div
                     class="w-full grid grid-cols-1 lg:grid-cols-2 gap-x-3 gap-y-5"
                 >
-                    <PersonalDataField
+                    <DataField
                         id="personal-data-name"
                         label="نام"
                         :error="formValidator$.first_name"
@@ -253,8 +253,8 @@ const handleSubmit = (withValidation: boolean) => {
                             variant="outlined"
                             :error="formValidator$.first_name.$error"
                         />
-                    </PersonalDataField>
-                    <PersonalDataField
+                    </DataField>
+                    <DataField
                         id="personal-data-last-name"
                         label="نام خانوادگی"
                         :error="formValidator$.last_name"
@@ -264,8 +264,8 @@ const handleSubmit = (withValidation: boolean) => {
                             variant="outlined"
                             :error="formValidator$.last_name.$error"
                         />
-                    </PersonalDataField>
-                    <PersonalDataField
+                    </DataField>
+                    <DataField
                         id="personal-data-gender"
                         label="جنسیت"
                         :error="formValidator$.gender"
@@ -276,8 +276,8 @@ const handleSubmit = (withValidation: boolean) => {
                             variant="outlined"
                             :error="formValidator$.gender.$error"
                         />
-                    </PersonalDataField>
-                    <PersonalDataField
+                    </DataField>
+                    <DataField
                         id="personal-data-birth-date"
                         label="تاریخ تولد"
                         :error="formValidator$.birth_date"
@@ -286,8 +286,8 @@ const handleSubmit = (withValidation: boolean) => {
                             v-model="personalData.birth_date!"
                             :error="formValidator$.birth_date.$error"
                         />
-                    </PersonalDataField>
-                    <PersonalDataField
+                    </DataField>
+                    <DataField
                         id="personal-data-phone"
                         label="تلفن همراه"
                         :error="formValidator$.phone"
@@ -297,8 +297,8 @@ const handleSubmit = (withValidation: boolean) => {
                             variant="outlined"
                             :error="formValidator$.phone.$error"
                         />
-                    </PersonalDataField>
-                    <PersonalDataField
+                    </DataField>
+                    <DataField
                         id="personal-email"
                         label="حساب الکترونیکی"
                         :error="formValidator$.email"
@@ -308,7 +308,7 @@ const handleSubmit = (withValidation: boolean) => {
                             variant="outlined"
                             :error="formValidator$.email.$error"
                         />
-                    </PersonalDataField>
+                    </DataField>
                 </div>
             </ProfileSection>
         </div>