diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 6c9c542b..303bb2c7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -5063,158 +5063,169 @@ const emptyCreateDialog = ref(false);
                   {{ $t('customerEmployee.form.group.passport') }}
                 </div>
 
-                <template
-                  v-for="(
-                    value, index
-                  ) in currentFromDataEmployee.employeePassport"
-                  :key="index"
-                >
-                  <div class="col" v-if="value !== undefined">
-                    <FormEmployeePassport
-                      prefix-id="drawer-info-employee"
-                      id="form-passport"
-                      hide-title
-                      dense
-                      outlined
-                      separator
-                      :title="$t('customerEmployee.form.group.passport')"
-                      :readonly="
-                        employeeFormState.currentIndexPassport !== index
-                      "
-                      :full-name="
-                        employeeFormState.currentIndexPassport !== index
-                      "
-                      v-model:birth-country="value.birthCountry"
-                      v-model:previous-passportRef="value.previousPassportRef"
-                      v-model:issue-place="value.issuePlace"
-                      v-model:issue-country="value.issueCountry"
-                      v-model:issue-date="value.issueDate"
-                      v-model:type="value.type"
-                      v-model:expire-date="value.expireDate"
-                      v-model:birth-date="value.birthDate"
-                      v-model:worker-status="value.workerStatus"
-                      v-model:nationality="value.nationality"
-                      v-model:gender="value.gender"
-                      v-model:last-name-en="value.lastNameEN"
-                      v-model:last-name="value.lastName"
-                      v-model:middle-name-en="value.middleNameEN"
-                      v-model:middle-name="value.middleName"
-                      v-model:first-name-en="value.firstNameEN"
-                      v-model:first-name="value.firstName"
-                      v-model:name-prefix="value.namePrefix"
-                      v-model:passport-number="value.number"
-                    >
-                      <template v-slot:expiryDate>
-                        {{ $t('general.expirationDate') }} :
-                        {{ dateFormat(value.expireDate) }}
-                        <ExpirationDate
-                          v-if="value.id !== undefined"
-                          :expiration-date="value.expireDate"
-                        />
-                      </template>
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height flex flex-center col"
+                    v-if="
+                      currentFromDataEmployee.employeePassport?.length === 0
+                    "
+                  >
+                    <NoData />
+                  </div>
 
-                      <template v-slot:button>
-                        <div
-                          class="surface-1 row rounded"
-                          style="min-height: 35px"
-                        >
-                          <UndoButton
-                            v-if="
-                              employeeFormState.isEmployeeEdit &&
-                              !(
-                                employeeFormState.currentIndexPassport === -1
-                              ) &&
-                              employeeFormState.currentIndexPassport === index
-                            "
-                            id="btn-info-basic-undo"
-                            icon-only
-                            @click="
-                              () => {
-                                employeeFormStore.resetFormDataEmployee();
-                                employeeFormState.isEmployeeEdit = false;
-                                employeeFormState.dialogType = 'info';
-                                employeeFormState.currentIndexPassport = -1;
-                              }
-                            "
-                            type="button"
-                          />
-                          <SaveButton
-                            v-if="
-                              (employeeFormState.isEmployeeEdit ||
-                                value.id === undefined) &&
-                              !(
-                                employeeFormState.currentIndexPassport === -1
-                              ) &&
-                              employeeFormState.currentIndexPassport === index
-                            "
-                            id="btn-info-basic-save"
-                            icon-only
-                            @click="
-                              () => {
-                                employeeFormState.currentIndexPassport = index;
-                              }
-                            "
-                            type="submit"
+                  <template
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeePassport"
+                    :key="index"
+                  >
+                    <div class="col" v-if="value !== undefined">
+                      <FormEmployeePassport
+                        prefix-id="drawer-info-employee"
+                        id="form-passport"
+                        hide-title
+                        dense
+                        outlined
+                        separator
+                        :title="$t('customerEmployee.form.group.passport')"
+                        :readonly="
+                          employeeFormState.currentIndexPassport !== index
+                        "
+                        :full-name="
+                          employeeFormState.currentIndexPassport !== index
+                        "
+                        v-model:birth-country="value.birthCountry"
+                        v-model:previous-passportRef="value.previousPassportRef"
+                        v-model:issue-place="value.issuePlace"
+                        v-model:issue-country="value.issueCountry"
+                        v-model:issue-date="value.issueDate"
+                        v-model:type="value.type"
+                        v-model:expire-date="value.expireDate"
+                        v-model:birth-date="value.birthDate"
+                        v-model:worker-status="value.workerStatus"
+                        v-model:nationality="value.nationality"
+                        v-model:gender="value.gender"
+                        v-model:last-name-en="value.lastNameEN"
+                        v-model:last-name="value.lastName"
+                        v-model:middle-name-en="value.middleNameEN"
+                        v-model:middle-name="value.middleName"
+                        v-model:first-name-en="value.firstNameEN"
+                        v-model:first-name="value.firstName"
+                        v-model:name-prefix="value.namePrefix"
+                        v-model:passport-number="value.number"
+                      >
+                        <template v-slot:expiryDate>
+                          {{ $t('general.expirationDate') }} :
+                          {{ dateFormat(value.expireDate) }}
+                          <ExpirationDate
+                            v-if="value.id !== undefined"
+                            :expiration-date="value.expireDate"
                           />
+                        </template>
 
-                          <EditButton
-                            v-if="
-                              employeeFormState.currentIndexPassport === -1 ||
-                              (!employeeFormState.isEmployeeEdit &&
-                                value.id !== undefined &&
-                                employeeFormState.currentIndexPassport ===
-                                  index)
-                            "
-                            id="btn-info-basic-edit"
-                            icon-only
-                            @click="
-                              () => {
-                                employeeFormState.currentIndexPassport = index;
-                                employeeFormState.isEmployeeEdit = true;
-                                employeeFormState.dialogType = 'edit';
-                              }
-                            "
-                            type="button"
-                          />
-                          <DeleteButton
-                            v-if="
-                              employeeFormState.currentIndexPassport === -1 ||
-                              (!employeeFormState.isEmployeeEdit &&
-                                value.id !== undefined &&
+                        <template v-slot:button>
+                          <div
+                            class="surface-1 row rounded"
+                            style="min-height: 35px"
+                          >
+                            <UndoButton
+                              v-if="
+                                employeeFormState.isEmployeeEdit &&
                                 !(
                                   employeeFormState.currentIndexPassport === -1
                                 ) &&
-                                employeeFormState.currentIndexPassport ===
-                                  index)
-                            "
-                            id="btn-info-basic-delete"
-                            icon-only
-                            @click.stop="
-                              () => {
-                                deleteEmployeeById({ type: 'passport', index });
-                              }
-                            "
-                            type="button"
-                            :disabled="
-                              !(
-                                employeeFormState.currentIndexPassport === -1
-                              ) &&
-                              !(
                                 employeeFormState.currentIndexPassport === index
-                              )
-                            "
-                          />
-                        </div>
-                      </template>
-                    </FormEmployeePassport>
-                  </div>
-                </template>
+                              "
+                              id="btn-info-basic-undo"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormStore.resetFormDataEmployee();
+                                  employeeFormState.isEmployeeEdit = false;
+                                  employeeFormState.dialogType = 'info';
+                                  employeeFormState.currentIndexPassport = -1;
+                                }
+                              "
+                              type="button"
+                            />
+                            <SaveButton
+                              v-if="
+                                (employeeFormState.isEmployeeEdit ||
+                                  value.id === undefined) &&
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                employeeFormState.currentIndexPassport === index
+                              "
+                              id="btn-info-basic-save"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormState.currentIndexPassport =
+                                    index;
+                                }
+                              "
+                              type="submit"
+                            />
 
-                <div
-                  class="full-width flex flex-center col"
-                  v-if="currentFromDataEmployee.employeePassport?.length === 0"
-                >
-                  <NoData />
+                            <EditButton
+                              v-if="
+                                employeeFormState.currentIndexPassport === -1 ||
+                                (!employeeFormState.isEmployeeEdit &&
+                                  value.id !== undefined &&
+                                  employeeFormState.currentIndexPassport ===
+                                    index)
+                              "
+                              id="btn-info-basic-edit"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormState.currentIndexPassport =
+                                    index;
+                                  employeeFormState.isEmployeeEdit = true;
+                                  employeeFormState.dialogType = 'edit';
+                                }
+                              "
+                              type="button"
+                            />
+                            <DeleteButton
+                              v-if="
+                                employeeFormState.currentIndexPassport === -1 ||
+                                (!employeeFormState.isEmployeeEdit &&
+                                  value.id !== undefined &&
+                                  !(
+                                    employeeFormState.currentIndexPassport ===
+                                    -1
+                                  ) &&
+                                  employeeFormState.currentIndexPassport ===
+                                    index)
+                              "
+                              id="btn-info-basic-delete"
+                              icon-only
+                              @click.stop="
+                                () => {
+                                  deleteEmployeeById({
+                                    type: 'passport',
+                                    index,
+                                  });
+                                }
+                              "
+                              type="button"
+                              :disabled="
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                !(
+                                  employeeFormState.currentIndexPassport ===
+                                  index
+                                )
+                              "
+                            />
+                          </div>
+                        </template>
+                      </FormEmployeePassport>
+                    </div>
+                  </template>
                 </div>
               </div>
             </template>
@@ -5232,7 +5243,14 @@ const emptyCreateDialog = ref(false);
                   />
                   {{ $t('customerEmployee.form.group.visa') }}
                 </div>
-                <div class="col">
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+
                   <FormEmployeeVisa
                     v-for="(
                       value, index
@@ -5353,12 +5371,6 @@ const emptyCreateDialog = ref(false);
                     </template>
                   </FormEmployeeVisa>
                 </div>
-                <div
-                  v-if="currentFromDataEmployee.employeeVisa?.length === 0"
-                  class="full-width col flex flex-center"
-                >
-                  <NoData />
-                </div>
               </div>
             </template>
 
@@ -5379,7 +5391,13 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`customerEmployee.formHealthCheck.title`) }}
                 </div>
 
-                <div class="col">
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
                   <FormEmployeeHealthCheck
                     v-if="employeeFormState.currentTab === 'healthCheck'"
                     id="drawer-form-checkup"
@@ -5446,12 +5464,6 @@ const emptyCreateDialog = ref(false);
                     "
                   />
                 </div>
-                <div
-                  class="full-width col flex flex-center"
-                  v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
-                >
-                  <NoData />
-                </div>
               </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'workHistory'">
@@ -5470,7 +5482,14 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`customerEmployee.form.group.workHistory`) }}
                 </div>
 
-                <div class="col">
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height col flex flex-center"
+                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
+                  >
+                    <NoData />
+                  </div>
+
                   <FormEmployeeWorkHistory
                     v-if="employeeFormState.currentTab === 'workHistory'"
                     id="drawer-work-history"
@@ -5529,13 +5548,6 @@ const emptyCreateDialog = ref(false);
                   />
                 </div>
               </div>
-
-              <div
-                class="full-width col flex flex-center"
-                v-if="currentFromDataEmployee.employeeWork?.length === 0"
-              >
-                <NoData />
-              </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">
               <FormEmployeeOther