diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 62026126..2eac1455 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -17,6 +17,7 @@ withDefaults(
     submit?: (...args: unknown[]) => void;
     close?: (...args: unknown[]) => void;
     undo?: (...args: unknown[]) => void;
+    beforeClose?: (...args: unknown[]) => boolean;
   }>(),
   {
     showEdit: true,
@@ -42,6 +43,7 @@ function reset() {
     no-swipe-open
     @before-hide="reset"
     @hide="close"
+    @update:model-value="(v) => (drawerOpen = beforeClose ? beforeClose() : v)"
     :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
     v-model="drawerOpen"
     behavior="mobile"
@@ -139,7 +141,12 @@ function reset() {
             class="close-btn"
             :class="{ dark: $q.dark.isActive }"
             type="reset"
-            @click="close"
+            @click="
+              () => {
+                drawerOpen = beforeClose ? beforeClose() : !drawerOpen;
+                close?.();
+              }
+            "
             resetValidation
           />
         </div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b75ae851..ae5069ff 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -465,10 +465,50 @@ function createCustomerForm(customerType: 'CORP' | 'PERS') {
 }
 
 function createEmployeeForm() {
+  employeeFormStore.resetFormDataEmployee();
   employeeFormState.value.dialogModal = true;
 }
 
 // TODO: When in employee form, if select address same as customer then auto fill
+
+watch(
+  () => employeeFormState.value.formDataEmployeeOwner,
+  (e) => {
+    if (!e) return;
+    if (employeeFormState.value.formDataEmployeeSameAddr) {
+      currentFromDataEmployee.value.address = e.address;
+      currentFromDataEmployee.value.addressEN = e.addressEN;
+      currentFromDataEmployee.value.provinceId = e.provinceId;
+      currentFromDataEmployee.value.districtId = e.districtId;
+      currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
+      currentFromDataEmployee.value.zipCode = e.zipCode;
+    }
+    currentFromDataEmployee.value.customerBranchId = e.id;
+  },
+);
+
+watch(
+  () => employeeFormState.value.formDataEmployeeSameAddr,
+  (isSame) => {
+    if (!employeeFormState.value.formDataEmployeeOwner) return;
+    if (isSame) {
+      currentFromDataEmployee.value.address =
+        employeeFormState.value.formDataEmployeeOwner.address;
+      currentFromDataEmployee.value.addressEN =
+        employeeFormState.value.formDataEmployeeOwner.addressEN;
+      currentFromDataEmployee.value.provinceId =
+        employeeFormState.value.formDataEmployeeOwner.provinceId;
+      currentFromDataEmployee.value.districtId =
+        employeeFormState.value.formDataEmployeeOwner.districtId;
+      currentFromDataEmployee.value.subDistrictId =
+        employeeFormState.value.formDataEmployeeOwner.subDistrictId;
+      currentFromDataEmployee.value.zipCode =
+        employeeFormState.value.formDataEmployeeOwner.zipCode;
+    }
+    currentFromDataEmployee.value.customerBranchId =
+      employeeFormState.value.formDataEmployeeOwner.id;
+  },
+);
 </script>
 
 <template>
@@ -502,7 +542,7 @@ function createEmployeeForm() {
         external-label
         id="add-employee"
         label-position="left"
-        @click="createEmployeeForm"
+        @click="createEmployeeForm()"
         color="primary"
         padding="xs"
         icon="mdi-account-plus"
@@ -575,8 +615,8 @@ function createEmployeeForm() {
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? (statsCustomerType?.CORP ?? 0)
-                            : (statsCustomerType?.PERS ?? 0),
+                            ? statsCustomerType?.CORP ?? 0
+                            : statsCustomerType?.PERS ?? 0,
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
@@ -1564,7 +1604,7 @@ function createEmployeeForm() {
                               {
                                 icon: 'mdi-clock-outline',
                                 value: props.row.dateOfBirth
-                                  ? (calculateAge(props.row.dateOfBirth) ?? '')
+                                  ? calculateAge(props.row.dateOfBirth) ?? ''
                                   : '',
                               },
                             ],
@@ -1995,6 +2035,7 @@ function createEmployeeForm() {
           v-model:nrc-no="currentFromDataEmployee.nrcNo"
           v-model:code="currentFromDataEmployee.code"
           @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+          @save="() => employeeFormStore.submitPersonal()"
         />
         <FormPerson
           id="form-personal"
@@ -2028,6 +2069,50 @@ function createEmployeeForm() {
           employee
           dense
         />
+
+        <FormEmployeePassport
+          prefix-id="drawer-info-employee"
+          id="form-passport"
+          dense
+          outlined
+          separator
+          :title="$t('formDialogTitlePassport')"
+          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`)"
+          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>
@@ -2226,6 +2311,7 @@ function createEmployeeForm() {
             v-model:nrc-no="currentFromDataEmployee.nrcNo"
             v-model:code="currentFromDataEmployee.code"
             @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+            @save="() => employeeFormStore.submitPersonal()"
           />
           <FormPerson
             id="form-personal"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index e16787e0..d326cb44 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -377,10 +377,26 @@ export const useEmployeeForm = defineStore('form-employee', () => {
   }
 
   function resetFormDataEmployee(cb?: (...args: any[]) => unknown) {
+    state.value.dialogType = 'create';
     currentFromDataEmployee.value = structuredClone(resetEmployeeData);
     cb?.();
   }
 
+  async function submitPersonal() {
+    if (state.value.dialogType === 'create') {
+      const res = await employeeStore.create({
+        ...currentFromDataEmployee.value,
+        customerBranchId: state.value.formDataEmployeeOwner?.id || '',
+
+        employeeWork: [],
+        employeeCheckup: [],
+        employeeOtherInfo: undefined,
+      });
+    }
+    if (state.value.dialogType === 'edit') {
+    }
+  }
+
   async function assignFormDataEmployee(id: string) {
     const res = await employeeStore.fetchById(id);
 
@@ -457,6 +473,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     currentFromDataEmployee,
     resetEmployeeData,
 
+    submitPersonal,
+
     resetFormDataEmployee,
     assignFormDataEmployee,