diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e55216d0..8b71a63d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -80,24 +80,19 @@ const columnsEmployee = [
     field: 'firstName',
     sortable: true,
   },
-  {
-    name: 'type',
-    align: 'left',
-    label: 'type',
-    field: 'type',
-    sortable: true,
-  },
+
   {
     name: 'formDialogInputNationality',
     align: 'left',
     label: 'formDialogInputNationality',
     field: 'nationality',
   },
+
   {
-    name: 'formDialogEmployeeNRCNo',
+    name: 'formDialogInputPassportNo',
     align: 'left',
-    label: 'formDialogEmployeeNRCNo',
-    field: 'nrcNo',
+    label: 'formDialogInputPassportNo',
+    field: 'passportNumber',
   },
   {
     name: 'formDialogInputAge',
@@ -106,12 +101,34 @@ const columnsEmployee = [
     field: 'dateOfBirth',
   },
 
+  {
+    name: 'passportExpiryDate',
+    align: 'left',
+    label: 'passportExpire',
+    field: 'passportExpiryDate',
+  },
+
+  {
+    name: 'formDialogEmployeeNRCNo',
+    align: 'left',
+    label: 'formDialogEmployeeNRCNo',
+    field: 'nrcNo',
+  },
+
   {
     name: 'branchLabel',
     align: 'left',
     label: 'branchLabel',
     field: 'customerBranch',
   },
+
+  {
+    name: 'type',
+    align: 'left',
+    label: 'type',
+    field: 'type',
+    sortable: true,
+  },
 ] satisfies QTableProps['columns'];
 
 const columnsCustomer = [
@@ -256,30 +273,36 @@ const fieldDisplayEmployee = ref<
     label: t('nameEmployee'),
     value: 'firstName',
   },
-  {
-    label: t('type'),
-    value: 'type',
-  },
-
   {
     label: t('formDialogInputNationality'),
     value: 'formDialogInputNationality',
   },
-
   {
-    label: t('formDialogEmployeeNRCNo'),
-    value: 'formDialogEmployeeNRCNo',
+    label: t('formDialogInputPassportNo'),
+    value: 'formDialogInputPassportNo',
   },
 
   {
     label: t('formDialogInputAge'),
     value: 'formDialogInputAge',
   },
+  {
+    label: t('passportExpire'),
+    value: 'passportExpiryDate',
+  },
+  {
+    label: t('formDialogEmployeeNRCNo'),
+    value: 'formDialogEmployeeNRCNo',
+  },
 
   {
     label: t('branchLabel'),
     value: 'branchLabel',
   },
+  {
+    label: t('type'),
+    value: 'type',
+  },
 ]);
 
 const fieldSelected = ref<
@@ -291,19 +314,22 @@ const fieldSelected = ref<
     | 'branchEmail'
     | 'firstName'
     | 'formDialogInputNationality'
+    | 'formDialogInputPassportNo'
+    | 'passportExpiryDate'
     | 'formDialogEmployeeNRCNo'
     | 'formDialogInputAge'
     | 'branchLabel'
   )[]
 >([
   'customerName',
-  'type',
   'personName',
   'telephoneNo',
   'branchEmail',
   'firstName',
   'formDialogInputNationality',
-  'formDialogInputNationality',
+  'formDialogInputPassportNo',
+  'passportExpiryDate',
+  'type',
   'formDialogEmployeeNRCNo',
   'formDialogInputAge',
   'branchLabel',
@@ -2287,7 +2313,7 @@ watch([inputSearch, currentStatus], async () => {
                 <div
                   v-if="listEmployee.length === 0"
                   class="row full-width items-center justify-center col"
-                  style="min-height: 250px"
+                  style="min-height: 250px; flex-wrap: nowrap"
                 >
                   <NoData :not-found="!!inputSearch" />
                 </div>
@@ -2314,10 +2340,10 @@ watch([inputSearch, currentStatus], async () => {
                           v-for="col in props.cols"
                           :key="col.name"
                           :props="props"
+                          st
                         >
                           {{ $t(col.label) }}
                         </q-th>
-                        <q-th auto-width />
                       </q-tr>
                     </template>
 
@@ -2343,7 +2369,10 @@ watch([inputSearch, currentStatus], async () => {
                         "
                       >
                         <q-td v-if="fieldSelected.includes('firstName')">
-                          <div class="row items-center">
+                          <div
+                            class="row items-center"
+                            style="flex-wrap: nowrap"
+                          >
                             <div
                               style="
                                 width: 50px;
@@ -2395,11 +2424,7 @@ watch([inputSearch, currentStatus], async () => {
                             </div>
                           </div>
                         </q-td>
-                        <q-td v-if="fieldSelected.includes('type')">
-                          <span class="tags tags__pink">
-                            {{ $t('EMPLOYEE') }}
-                          </span>
-                        </q-td>
+
                         <q-td
                           v-if="
                             fieldSelected.includes('formDialogInputNationality')
@@ -2407,6 +2432,27 @@ watch([inputSearch, currentStatus], async () => {
                         >
                           {{ props.row.nationality || '-' }}
                         </q-td>
+
+                        <q-td
+                          v-if="
+                            fieldSelected.includes('formDialogInputPassportNo')
+                          "
+                        >
+                          {{ props.row.passportNumber || '-' }}
+                        </q-td>
+
+                        <q-td
+                          v-if="fieldSelected.includes('formDialogInputAge')"
+                        >
+                          {{ calculateAge(props.row.dateOfBirth) }}
+                        </q-td>
+
+                        <q-td
+                          v-if="fieldSelected.includes('passportExpiryDate')"
+                        >
+                          {{ calculateAge(props.row.passportExpiryDate) }}
+                        </q-td>
+
                         <q-td
                           v-if="
                             fieldSelected.includes('formDialogEmployeeNRCNo')
@@ -2414,11 +2460,6 @@ watch([inputSearch, currentStatus], async () => {
                         >
                           {{ props.row.nrcNo || '-' }}
                         </q-td>
-                        <q-td
-                          v-if="fieldSelected.includes('formDialogInputAge')"
-                        >
-                          {{ calculateAge(props.row.dateOfBirth) }}
-                        </q-td>
 
                         <q-td
                           v-if="fieldSelected.includes('formDialogInputAge')"
@@ -2438,6 +2479,12 @@ watch([inputSearch, currentStatus], async () => {
                             </div>
                           </div>
                         </q-td>
+
+                        <q-td v-if="fieldSelected.includes('type')">
+                          <span class="tags tags__pink">
+                            {{ $t('EMPLOYEE') }}
+                          </span>
+                        </q-td>
                         <q-td>
                           <q-btn
                             icon="mdi-eye-outline"