diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index d19ce046..26a1d0d5 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -3,8 +3,12 @@ import { QSelect } from 'quasar';
 import { CustomerBranch } from 'src/stores/customer/types';
 import { selectFilterOptionRefMod } from 'src/stores/utils';
 import { onMounted, ref, watch } from 'vue';
-
-import SaveButton from 'src/components/button/SaveButton.vue';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'src/components/button';
 
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
@@ -25,26 +29,24 @@ const customerBranch = defineModel<{
 const nrcNo = defineModel<string>('nrcNo');
 const code = defineModel<string>('code');
 
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    dense?: boolean;
-    outlined?: boolean;
-    readonly?: boolean;
-    separator?: boolean;
-    typeCustomer?: string;
-    employee?: boolean;
-    employeeOwnerOption?: CustomerBranch[];
-    prefixId: string;
-    showBtnSave?: boolean;
-  }>(),
-  {
-    showBtnSave: false,
-  },
-);
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  typeCustomer?: string;
+  employee?: boolean;
+  employeeOwnerOption?: CustomerBranch[];
+  prefixId: string;
+  showBtnSave?: boolean;
+}>();
 
 defineEmits<{
   (e: 'filterOwnerBranch', val: string, update: void): void;
+  (e: 'save'): void;
+  (e: 'undo'): void;
+  (e: 'delete'): void;
+  (e: 'edit'): void;
 }>();
 
 const branchOptions = ref<Record<string, unknown>[]>([]);
@@ -74,16 +76,49 @@ onMounted(() => {
     <div
       class="col-12 items-center row justify-between 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-office-building-outline"
-        style="background-color: var(--surface-3)"
-      />
-      {{ $t(`${title}`) }}
-      <SaveButton class="q-ml-auto" v-if="!readonly" @click="$emit('save')" />
+      <div>
+        <q-icon
+          flat
+          size="xs"
+          class="q-pa-sm rounded q-mr-xs"
+          color="info"
+          name="mdi-office-building-outline"
+          style="background-color: var(--surface-3)"
+        />
+        {{ $t(`${title}`) }}
+      </div>
+
+      <!-- v-if="!readonly" -->
+      <div class="row">
+        <UndoButton
+          v-if="!readonly"
+          id="btn-info-basic-undo"
+          icon-only
+          @click="$emit('undo')"
+          type="button"
+        />
+        <SaveButton
+          v-if="!readonly"
+          id="btn-info-basic-save"
+          icon-only
+          @click="$emit('save')"
+          type="button"
+        />
+        <EditButton
+          v-if="readonly"
+          id="btn-info-basic-edit"
+          icon-only
+          @click="$emit('edit')"
+          type="button"
+        />
+        <DeleteButton
+          v-if="readonly"
+          id="btn-info-basic-delete"
+          icon-only
+          @click="$emit('delete')"
+          type="button"
+        />
+      </div>
     </div>
 
     <div class="col-12 row" style="gap: var(--size-2)">
@@ -96,7 +131,7 @@ onMounted(() => {
         :hide-dropdown-icon="readonly"
         :dense="dense"
         outlined
-        :readonly="readonly || customerBranch !== undefined"
+        :readonly="readonly"
         hide-bottom-space
         class="col-12"
         :label="$t('formDialogEmployerBranchCode')"
@@ -305,6 +340,7 @@ onMounted(() => {
         outlined
         hide-bottom-space
         :readonly="readonly"
+        :disable="!readonly"
         class="col-3"
         :label="$t('formDialogEmployeeID')"
         v-model="code"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index c26e9076..3096e02d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -434,6 +434,7 @@ async function editCustomerForm(id: string) {
 
 async function editEmployeeFormPersonal(id: string) {
   await employeeFormStore.assignFormDataEmployee(id);
+  employeeFormState.value.isEmployeeEdit = true;
   employeeFormState.value.dialogType = 'edit';
   employeeFormState.value.drawerModal = true;
 }
@@ -540,6 +541,13 @@ watch(
       employeeFormState.value.formDataEmployeeOwner.id;
   },
 );
+
+watch(
+  () => employeeFormState.value.currentTab,
+  () => {
+    employeeFormState.value.isEmployeeEdit = false;
+  },
+);
 </script>
 
 <template>
@@ -551,7 +559,7 @@ watch(
         style="color: white; background-color: hsla(var(--violet-11-hsl))"
         @click="createCustomerForm('CORP')"
         padding="xs"
-        icon="mdi-office-building"
+        icon="mdi-office-building-outline"
         :label="$t('add') + ' ' + $t('customerLegalEntity')"
         external-label
         label-position="left"
@@ -565,7 +573,7 @@ watch(
         @click="createCustomerForm('PERS')"
         style="color: white; background-color: hsla(var(--teal-10-hsl))"
         padding="xs"
-        icon="mdi-account-plus"
+        icon="mdi-account-plus-outline"
       />
       <q-fab-action
         v-if="currentTab === 'employee'"
@@ -576,7 +584,7 @@ watch(
         @click="createEmployeeForm()"
         color="primary"
         padding="xs"
-        icon="mdi-account-plus"
+        icon="mdi-account-plus-outline"
       />
     </div>
     <div v-else>
@@ -591,7 +599,7 @@ watch(
         }"
         @click="console.log('add-branch')"
         padding="xs"
-        icon="mdi-office-building"
+        icon="mdi-office-building-outline"
         :label="$t('formDialogTitleCreateSubBranch')"
         external-label
         label-position="left"
@@ -620,7 +628,7 @@ watch(
         </q-badge>
         <q-btn
           class="q-ml-sm"
-          icon="mdi-pin"
+          icon="mdi-pin-outline"
           color="primary"
           size="sm"
           flat
@@ -646,23 +654,23 @@ watch(
                     ? customerStats.map((v) => ({
                         count:
                           v.name === 'CORP'
-                            ? statsCustomerType?.CORP ?? 0
-                            : statsCustomerType?.PERS ?? 0,
+                            ? (statsCustomerType?.CORP ?? 0)
+                            : (statsCustomerType?.PERS ?? 0),
                         label:
                           v.name === 'CORP'
                             ? 'customerLegalEntity'
                             : 'customerNaturalPerson',
                         icon:
                           v.name === 'CORP'
-                            ? 'mdi-office-building'
-                            : 'mdi-account',
+                            ? 'mdi-office-building-outline'
+                            : 'mdi-account-outline',
                         color: v.name === 'CORP' ? 'purple' : 'green',
                       }))
                     : [
                         {
                           label: 'EMPLOYEE',
                           count: employeeStats,
-                          icon: 'mdi-account',
+                          icon: 'mdi-account-outline',
                           color: 'pink',
                         },
                       ])
@@ -1191,11 +1199,11 @@ watch(
                             female: undefined,
                             detail: [
                               {
-                                icon: 'mdi-cellphone',
+                                icon: 'mdi-cellphone-outline',
                                 value: props.row.branch[0]?.telephoneNo || '-',
                               },
                               {
-                                icon: 'mdi-account',
+                                icon: 'mdi-account-outline',
                                 value: props.row.personName || '-',
                               },
                             ],
@@ -1358,12 +1366,11 @@ watch(
                         :id="`row-table-${props.row.firstNameEN}`"
                         @click="
                           () => {
-                            employeeFormState.drawerModal = true;
-                            employeeFormStore.assignFormDataEmployee(
-                              props.row.id,
-                            );
+                            // employeeFormState.drawerModal = true;
+                            // employeeFormStore.assignFormDataEmployee(
+                            //   props.row.id,
+                            // );
                             // $router.push(`/customer-management/${props.row.id}/branch`);
-
                             // openDialogInputForm('INFO', props.row.id);
                           }
                         "
@@ -1466,7 +1473,10 @@ watch(
                         <q-td
                           v-if="fieldSelected.includes('formDialogInputAge')"
                         >
-                          <div class="row items-center">
+                          <div
+                            class="row items-center"
+                            v-if="props.row.customerBranch"
+                          >
                             <div class="col">
                               <div class="col">
                                 {{ props.row.customerBranch.code }}
@@ -1496,6 +1506,10 @@ watch(
                             flat
                             @click.stop="
                               () => {
+                                employeeFormState.drawerModal = true;
+                                employeeFormStore.assignFormDataEmployee(
+                                  props.row.id,
+                                );
                                 // openDialogInputForm('INFO', props.row.id);
                               }
                             "
@@ -1514,10 +1528,15 @@ watch(
                             <q-menu class="bordered">
                               <q-list v-close-popup>
                                 <q-item
+                                  v-close-popup
                                   :id="`view-detail-btn-${props.row.name}-view`"
                                   @click.stop="
                                     () => {
                                       // openDialogInputForm('INFO', props.row.id);
+                                      employeeFormState.drawerModal = true;
+                                      employeeFormStore.assignFormDataEmployee(
+                                        props.row.id,
+                                      );
                                     }
                                   "
                                   clickable
@@ -1648,7 +1667,7 @@ watch(
                               {
                                 icon: 'mdi-clock-outline',
                                 value: props.row.dateOfBirth
-                                  ? calculateAge(props.row.dateOfBirth) ?? ''
+                                  ? (calculateAge(props.row.dateOfBirth) ?? '')
                                   : '',
                               },
                             ],
@@ -1942,7 +1961,7 @@ watch(
                 size="xs"
                 class="q-pa-sm rounded q-mr-xs"
                 color="info"
-                name="mdi-briefcase"
+                name="mdi-briefcase-outline"
                 style="background-color: var(--surface-3)"
               />
               <span>{{ $t('customer.form.group.branch') }}</span>
@@ -1958,6 +1977,7 @@ watch(
               class="full-width"
               v-if="customerFormData.customerBranch"
               v-for="(_, idx) in customerFormData.customerBranch"
+              :key="idx"
               @submit.prevent="
                 async () => {
                   if (!customerFormData.customerBranch) return;
@@ -2023,7 +2043,8 @@ watch(
   </DialogContainer>
 
   <DialogForm
-    :title="$t('form.title.create', { name: 'Employee' })"
+    hideFooter
+    :title="$t('form.title.create', { name: $t('customer.employee') })"
     v-model:modal="employeeFormState.dialogModal"
     :undo="() => employeeFormUndo(false)"
     :submit="
@@ -2065,7 +2086,7 @@ watch(
         active
         useToggle
         color="white"
-        icon="mdi-account-plus"
+        icon="mdi-account-plus-outline"
         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"
@@ -2389,9 +2410,11 @@ watch(
 
   <!-- ลูกจ้าง -->
   <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'
@@ -2431,7 +2454,7 @@ watch(
           active
           useToggle
           color="white"
-          icon="mdi-account-plus"
+          icon="mdi-account-plus-outline"
           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"
@@ -2489,6 +2512,7 @@ watch(
             />
           </div>
         </div>
+
         <div
           v-if="employeeFormState.currentTab === 'personalInfo'"
           class="col-10 q-pa-md q-gutter-y-xl"
@@ -2496,11 +2520,9 @@ watch(
           <BasicInformation
             id="form-information"
             prefix-id="drawer-info-employee"
-            employee
             dense
             outlined
-            separator
-            :title="$t('formDialogTitleInformation')"
+            :title="'formDialogTitleInformation'"
             :readonly="!employeeFormState.isEmployeeEdit"
             :employee-owner-option="employeeStore.ownerOption"
             v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
@@ -2508,7 +2530,26 @@ watch(
             v-model:nrc-no="currentFromDataEmployee.nrcNo"
             v-model:code="currentFromDataEmployee.code"
             @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
-            @save="() => employeeFormStore.submitPersonal()"
+            @undo="
+              () => {
+                employeeFormStore.resetFormDataEmployee();
+                employeeFormState.isEmployeeEdit = false;
+              }
+            "
+            @edit="
+              () => {
+                employeeFormState.isEmployeeEdit = true;
+              }
+            "
+            @save="
+              async () => {
+                employeeFormState.dialogType = 'edit';
+                await employeeFormStore.submitPersonal();
+                employeeFormState.dialogType = 'info';
+                employeeFormState.isEmployeeEdit = false;
+              }
+            "
+            @delete="() => console.log('asd')"
           />
           <FormPerson
             id="form-personal"
@@ -2517,7 +2558,7 @@ watch(
             outlined
             employee
             separator
-            :title="$t('personalInfo')"
+            :title="'personalInfo'"
             :readonly="!employeeFormState.isEmployeeEdit"
             v-model:firstName="currentFromDataEmployee.firstName"
             v-model:lastName="currentFromDataEmployee.lastName"
@@ -2540,14 +2581,13 @@ watch(
             prefix-id="drawer-info-personnel"
             dense
           />
-
           <FormEmployeePassport
             prefix-id="drawer-info-employee"
             id="form-passport"
             dense
             outlined
             separator
-            :title="$t('formDialogTitlePassport')"
+            :title="'formDialogTitlePassport'"
             :readonly="!employeeFormState.isEmployeeEdit"
             v-model:passport-type="currentFromDataEmployee.passportType"
             v-model:passport-number="currentFromDataEmployee.passportNumber"
@@ -2567,13 +2607,12 @@ watch(
               currentFromDataEmployee.previousPassportReference
             "
           />
-
           <FormEmployeeVisa
             prefix-id="drawer-info-employee"
             id="form-visa"
             dense
             outlined
-            :title="$t(`formDialogTitleVisa`)"
+            :title="`formDialogTitleVisa`"
             :readonly="!employeeFormState.isEmployeeEdit"
             v-model:visa-type="currentFromDataEmployee.visaType"
             v-model:visa-number="currentFromDataEmployee.visaNumber"
@@ -2597,6 +2636,7 @@ watch(
             prefix-id="form-employee"
             dense
             outlined
+            :readonly="!employeeFormState.isEmployeeEdit"
             v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
             v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
             v-model:medicalBenefitOption="
@@ -2612,6 +2652,7 @@ watch(
             "
             @edit="
               (index) => {
+                employeeFormState.isEmployeeEdit = true;
                 if (
                   currentFromDataEmployee.employeeCheckup?.[index].statusSave
                 ) {
@@ -2620,6 +2661,7 @@ watch(
                 }
               }
             "
+            @undo="employeeFormState.isEmployeeEdit = false"
           />
           <FormEmployeeWorkHistory
             v-if="employeeFormState.currentTab === 'workHistory'"
@@ -2627,10 +2669,13 @@ watch(
             prefix-id="form-employee"
             dense
             outlined
+            :readonly="!employeeFormState.isEmployeeEdit"
             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"
+            @edit="employeeFormState.isEmployeeEdit = true"
+            @undo="employeeFormState.isEmployeeEdit = false"
           />
           <FormEmployeeOther
             v-if="employeeFormState.currentTab === 'other'"