diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 66a8aebc..5636ff9f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -525,6 +525,7 @@ function createEmployeeForm() {
   employeeFormStore.resetFormDataEmployee(true);
   employeeFormState.value.dialogType = 'create';
   employeeFormState.value.dialogModal = true;
+  employeeFormState.value.isEmployeeEdit = true;
 }
 
 // TODO: When in employee form, if select address same as customer then auto fill
@@ -2148,6 +2149,8 @@ const emptyCreateDialog = ref(false);
           await employeeFormStore.submitOther();
         }
 
+        employeeFormState.isEmployeeEdit = false;
+
         await fetchListEmployee();
       }
     "
@@ -2283,25 +2286,34 @@ const emptyCreateDialog = ref(false);
         <BasicInformation
           id="form-information"
           prefix-id="form-employee"
-          showBtnSave
+          :show-btn-save="employeeFormState.dialogType === 'create'"
           employee
           dense
           outlined
           separator
           :title="$t('formDialogTitleInformation')"
+          :readonly="!employeeFormState.isEmployeeEdit"
           :employee-owner-option="employeeStore.ownerOption"
           v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
           v-model:employee-id="employeeFormState.currentEmployeeCode"
           v-model:nrc-no="currentFromDataEmployee.nrcNo"
           v-model:code="currentFromDataEmployee.code"
-          @save="
-            async () => {
-              await employeeFormStore.submitPersonal();
-              await fetchListEmployee();
-              notify('create', $t('success'));
+          @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+          @undo="
+            () => {
+              employeeFormStore.resetFormDataEmployee();
+              employeeFormState.isEmployeeEdit = false;
+              employeeFormState.dialogType = 'info';
             }
           "
-          @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+          @edit="
+            () => {
+              employeeFormState.isEmployeeEdit = true;
+              employeeFormState.dialogType = 'edit';
+            }
+          "
+          @save="() => {}"
+          @delete="() => deleteEmployeeById({ id: currentFromDataEmployee.id })"
         />
         <FormPerson
           id="form-personal"
@@ -2561,9 +2573,6 @@ const emptyCreateDialog = ref(false);
   <DrawerInfo
     hide-action
     v-model:drawer-open="employeeFormState.drawerModal"
-    :is-edit="employeeFormState.isEmployeeEdit"
-    :edit-data="() => (employeeFormState.isEmployeeEdit = true)"
-    :undo="() => (employeeFormState.isEmployeeEdit = false)"
     :title="
       employeeFormState.currentEmployee
         ? $i18n.locale === 'en-US'
@@ -2582,6 +2591,8 @@ const emptyCreateDialog = ref(false);
       async () => {
         if (employeeFormState.currentTab === 'personalInfo') {
           await employeeFormStore.submitPersonal();
+          employeeFormState.dialogType = 'info';
+          employeeFormState.isEmployeeEdit = false;
         }
         if (employeeFormState.currentTab === 'healthCheck') {
           await employeeFormStore.submitHealthCheck();
@@ -2713,22 +2724,16 @@ const emptyCreateDialog = ref(false);
               () => {
                 employeeFormStore.resetFormDataEmployee();
                 employeeFormState.isEmployeeEdit = false;
+                employeeFormState.dialogType = 'info';
               }
             "
             @edit="
               () => {
                 employeeFormState.isEmployeeEdit = true;
-              }
-            "
-            @save="
-              async () => {
                 employeeFormState.dialogType = 'edit';
-                await employeeFormStore.submitPersonal();
-                employeeFormState.dialogType = 'info';
-                employeeFormState.isEmployeeEdit = false;
-                notify('create', $t('success'));
               }
             "
+            @save="async () => {}"
             @delete="
               () => deleteEmployeeById({ id: currentFromDataEmployee.id })
             "