diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e1093396..98de9e48 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2300,6 +2300,11 @@ const emptyCreateDialog = ref(false);
           employeeFormState.isEmployeeEdit = false;
           employeeFormState.dialogType = 'info';
         }
+
+        if (employeeFormState.currentTab === 'passport') {
+          await employeeFormStore.submitPassport();
+        }
+
         if (employeeFormState.currentTab === 'healthCheck') {
           await employeeFormStore.submitHealthCheck();
         }
@@ -2366,6 +2371,10 @@ const emptyCreateDialog = ref(false);
               name: 'personalInfo',
               label: 'customerEmployee.form.group.personalInfo',
             },
+            {
+              name: 'passport',
+              label: 'customerEmployee.fileType.passport',
+            },
             {
               name: 'healthCheck',
               label: 'customerEmployee.form.group.healthCheck',
@@ -2446,6 +2455,36 @@ const emptyCreateDialog = ref(false);
                     anchor: 'drawer-info-file-upload',
                     tab: 'personalInfo',
                   },
+                  {
+                    name: $t('customerEmployee.form.group.personalInfo'),
+                    anchor: 'drawer-form-personal',
+                    tab: 'personalInfo',
+                  },
+
+                  {
+                    name: $t('customerEmployee.form.group.passport'),
+                    anchor: 'form-passport',
+                    tab: 'passport',
+                    useBtn:
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? true
+                        : false,
+                  },
+                  ...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
+                    name: dateFormat(v.expireDate),
+                    anchor: `drawer-employee-employeePassport-${i}`,
+                    tab: 'passport',
+                    sub: true,
+                  })) || []),
+
                   ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
                     name: $t('general.times', { number: i + 1 }),
                     anchor: `form-employee-checkup-${i}`,
@@ -2471,7 +2510,20 @@ const emptyCreateDialog = ref(false);
                 foreground: 'var(--blue-6)',
               }"
               scroll-element="#employee-form-content"
-            />
+            >
+              <template v-slot:btn-form-passport>
+                <q-btn
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  padding="0px 0px"
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addPassport()"
+                />
+              </template>
+            </SideMenu>
           </div>
         </div>
 
@@ -2806,6 +2858,128 @@ const emptyCreateDialog = ref(false);
             </div>
           </template>
 
+          <template v-if="employeeFormState.currentTab === 'passport'">
+            <div class="q-gutter-sm">
+              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-passport"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t('customerEmployee.form.group.passport') }}
+              </div>
+
+              <FormEmployeePassport
+                v-for="(
+                  value, index
+                ) in currentFromDataEmployee.employeePassport"
+                prefix-id="drawer-info-employee"
+                :key="index"
+                id="form-passport"
+                hide-title
+                dense
+                outlined
+                separator
+                :title="$t('customerEmployee.form.group.passport')"
+                :readonly="employeeFormState.currentIndexPassport !== index"
+                v-model:passport-type="value.type"
+                v-model:passport-number="value.number"
+                v-model:passport-issue-date="value.issueDate"
+                v-model:passport-expiry-date="value.expireDate"
+                v-model:passport-issuing-place="value.issuePlace"
+                v-model:passport-issuing-country="value.issueCountry"
+              >
+                <template v-slot:expiryDate>
+                  {{ $t('general.expirationDate') }} :
+                  {{ dateFormat(value.expireDate) }}
+                </template>
+
+                <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"
+                    />
+
+                    <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="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                          deleteEmployeeById({ type: 'passport' });
+                        }
+                      "
+                      type="button"
+                      :disabled="
+                        !(employeeFormState.currentIndex === -1) &&
+                        !(employeeFormState.currentIndex === index)
+                      "
+                    />
+                  </div>
+                </template>
+              </FormEmployeePassport>
+            </div>
+          </template>
+
           <template v-if="employeeFormState.currentTab === 'healthCheck'">
             <FormEmployeeHealthCheck
               v-if="employeeFormState.currentTab === 'healthCheck'"