diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 2f3c6f6e..7e99bee7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -6,7 +6,6 @@ import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
 
 import { calculateAge, dateFormat } from 'src/utils/datetime';
-
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
@@ -32,6 +31,8 @@ import FormBasicInfo from './components/FormBasicInfo.vue';
 import FormBranch from './components/FormBranch.vue';
 import CustomerInfoComponent from './components/CustomerBranch.vue';
 import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
+import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
+import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
 
 import {
   columnsCustomer,
@@ -1966,6 +1967,7 @@ function createEmployeeForm() {
           employee
           separator
           :title="$t('personalInfo')"
+          v-model:open="employeeFormState.dialogModal"
           v-model:firstName="currentFromDataEmployee.firstName"
           v-model:lastName="currentFromDataEmployee.lastName"
           v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
@@ -2094,9 +2096,26 @@ function createEmployeeForm() {
       <div class="q-mx-lg q-mt-lg">
         <ProfileBanner
           active
-          hideFade
-          :img="employeeFormState.profileUrl"
+          useToggle
+          color="white"
+          icon="mdi-account-plus"
+          bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
+          v-model:current-tab="employeeFormState.currentTab"
+          v-model:cover-url="employeeFormState.profileUrl"
+          fallbackCover="images/employee-banner.png"
+          :img="`images/employee-avatar.png`"
+          :tabs-list="[
+            { name: 'personalInfo', label: 'personalInfo' },
+            { name: 'healthCheck', label: 'healthCheck' },
+            { name: 'workHistory', label: 'workHistory' },
+            { name: 'other', label: 'other' },
+          ]"
           :menu="formMenuIconEmployee"
+          :toggleTitle="$t('formDialogTitleUserStatus')"
+          :hideFade="
+            employeeFormState.profileUrl === '' ||
+            employeeFormState.profileUrl === undefined
+          "
         />
       </div>
       <div
@@ -2137,7 +2156,10 @@ function createEmployeeForm() {
             />
           </div>
         </div>
-        <div class="col-10 q-pa-md q-gutter-y-xl">
+        <div
+          v-if="employeeFormState.currentTab === 'personalInfo'"
+          class="col-10 q-pa-md q-gutter-y-xl"
+        >
           <BasicInformation
             id="form-information"
             prefix-id="drawer-info-employee"
@@ -2173,6 +2195,7 @@ function createEmployeeForm() {
           />
           <FormAddress
             id="form-personal-address"
+            employee
             v-model:address="currentFromDataEmployee.address"
             v-model:addressEN="currentFromDataEmployee.addressEN"
             v-model:provinceId="currentFromDataEmployee.provinceId"
@@ -2183,6 +2206,91 @@ function createEmployeeForm() {
             prefix-id="drawer-info-personnel"
             dense
           />
+
+          <FormEmployeePassport
+            prefix-id="drawer-info-employee"
+            id="form-passport"
+            dense
+            outlined
+            separator
+            :title="$t('formDialogTitlePassport')"
+            :readonly="!employeeFormState.isEmployeeEdit"
+            v-model:passport-type="currentFromDataEmployee.passportType"
+            v-model:passport-number="currentFromDataEmployee.passportNumber"
+            v-model:passport-issue-date="
+              currentFromDataEmployee.passportIssueDate
+            "
+            v-model:passport-expiry-date="
+              currentFromDataEmployee.passportExpiryDate
+            "
+            v-model:passport-issuing-place="
+              currentFromDataEmployee.passportIssuingPlace
+            "
+            v-model:passport-issuing-country="
+              currentFromDataEmployee.passportIssuingCountry
+            "
+            v-model:previous-passport-reference="
+              currentFromDataEmployee.previousPassportReference
+            "
+          />
+
+          <FormEmployeeVisa
+            prefix-id="drawer-info-employee"
+            id="form-visa"
+            dense
+            outlined
+            :title="$t(`formDialogTitleVisa`)"
+            :readonly="!employeeFormState.isEmployeeEdit"
+            v-model:visa-type="currentFromDataEmployee.visaType"
+            v-model:visa-number="currentFromDataEmployee.visaNumber"
+            v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
+            v-model:visa-expiry-date="currentFromDataEmployee.visaExpiryDate"
+            v-model:visa-issuing-place="
+              currentFromDataEmployee.visaIssuingPlace
+            "
+            v-model:visa-stay-until-date="
+              currentFromDataEmployee.visaStayUntilDate
+            "
+            v-model:tm6-number="currentFromDataEmployee.tm6Number"
+            v-model:entry-date="currentFromDataEmployee.entryDate"
+          />
+        </div>
+
+        <div class="col-10 q-pa-md q-gutter-y-xl" v-else>
+          <FormEmployeeHealthCheck
+            v-if="employeeFormState.currentTab === 'healthCheck'"
+            id="form-checkup"
+            prefix-id="form-employee"
+            dense
+            outlined
+            v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
+            v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
+            v-model:medicalBenefitOption="
+              optionStore.globalOption.typeInsurance
+            "
+            v-model:insuranceCompanyOption="
+              optionStore.globalOption.insurancePlace
+            "
+          />
+          <FormEmployeeWorkHistory
+            v-if="employeeFormState.currentTab === 'workHistory'"
+            id="form-work-history"
+            prefix-id="form-employee"
+            dense
+            outlined
+            v-model:employee-work="currentFromDataEmployee.employeeWork"
+            v-model:position-name-option="optionStore.globalOption.position"
+            v-model:job-type-option="optionStore.globalOption.businessType"
+            v-model:workplace-option="optionStore.globalOption.area"
+          />
+          <FormEmployeeOther
+            v-if="employeeFormState.currentTab === 'other'"
+            id="form-other"
+            prefix-id="form-employee"
+            dense
+            outlined
+            v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
+          />
         </div>
       </div>
     </div>