diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 067ef49e..baf69159 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -58,7 +58,7 @@ import FormEmployeeOther from 'src/components/03_customer-management/FormEmploye
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
 import useUtilsStore, { dialog } from 'src/stores/utils';
-import { calculateAge } from 'src/utils/datetime';
+import { calculateAge, dateFormat } from 'src/utils/datetime';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 
@@ -1336,6 +1336,28 @@ async function checkEmployeeForm() {
     if (key === 'workerStatus') continue;
     if (key === 'image') continue;
 
+    const validPersonalInfoKeys = [
+      'customerBranchId',
+      'firstName',
+      'firstNameEN',
+      'lastName',
+      'lastNameEN',
+      'dateOfBirth',
+      'gender',
+      'nationality',
+      'passportType',
+      'passportNumber',
+      'passportIssueDate',
+      'passportExpiryDate',
+      'passportIssuingCountry',
+      'passportIssuingPlace',
+    ];
+
+    if (validPersonalInfoKeys.includes(key) && (val === '' || val === null)) {
+      formDataEmployeeTab.value = 'personalInfo';
+      return;
+    }
+
     if (val === '' || val === null) {
       forget = true;
     }
@@ -1835,7 +1857,7 @@ watch(
         <q-splitter
           v-model="splitterModel"
           :limits="[0, 100]"
-          class="col"
+          class="col full-width"
           before-class="overflow-hidden"
           after-class="overflow-hidden"
         >
@@ -1906,6 +1928,7 @@ watch(
                     :grid="modeView"
                     :rows="listCustomer"
                     :columns="columnsCustomer"
+                    class="full-width"
                     card-container-class="q-col-gutter-md"
                     row-key="name"
                     :rows-per-page-options="[0]"
@@ -2327,15 +2350,15 @@ watch(
               >
                 <div
                   v-if="listEmployee.length === 0"
-                  class="row full-width items-center justify-center col"
-                  style="min-height: 250px; flex-wrap: nowrap"
+                  class="row col full-width items-center justify-center"
+                  style="min-height: 250px"
                 >
                   <NoData :not-found="!!inputSearch" />
                 </div>
 
                 <div
-                  class="col full-width q-pa-md scroll"
                   v-if="listEmployee.length !== 0"
+                  class="surface-2 q-pa-md scroll col full-width"
                 >
                   <q-table
                     flat
@@ -2343,7 +2366,8 @@ watch(
                     :grid="modeView"
                     :rows="listEmployee"
                     :columns="columnsEmployee"
-                    card-container-class=" q-col-gutter-md"
+                    class="full-width"
+                    card-container-class="q-col-gutter-md"
                     row-key="name"
                     :rows-per-page-options="[0]"
                     hide-pagination
@@ -2465,7 +2489,7 @@ watch(
                         <q-td
                           v-if="fieldSelected.includes('passportExpiryDate')"
                         >
-                          {{ calculateAge(props.row.passportExpiryDate) }}
+                          {{ dateFormat(props.row.passportExpiryDate) }}
                         </q-td>
 
                         <q-td