diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue
index 7b3835fd..8fc8cd98 100644
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@@ -289,6 +289,7 @@ watch(districtId, fetchSubDistrict);
           hide-bottom-space
           class="col-3"
           v-model="homeCode"
+          mask="###########"
           :dense="dense"
           :label="$t('customer.form.homeCode')"
           :readonly="readonly || sameWithEmployer"
@@ -365,7 +366,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           class="col-md-1 col-4"
-          v-model="moo"
+          :model-value="readonly ? moo || '-' : moo"
           :dense="dense"
           :label="$t('form.moo')"
           :readonly="readonly || sameWithEmployer"
@@ -375,7 +376,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           class="col-md-3 col-6"
-          v-model="soi"
+          :model-value="readonly ? soi || '-' : soi"
           :dense="dense"
           :label="$t('form.soi')"
           :readonly="readonly || sameWithEmployer"
@@ -385,7 +386,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           class="col-md-3 col-6"
-          v-model="street"
+          :model-value="readonly ? street || '-' : street"
           :dense="dense"
           :label="$t('form.street')"
           :readonly="readonly || sameWithEmployer"
@@ -593,7 +594,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           class="col-md-1 col-4"
-          v-model="mooEN"
+          :model-value="readonly ? mooEN || '-' : mooEN"
           :dense="dense"
           label="Moo"
           :readonly="readonly || sameWithEmployer"
@@ -603,7 +604,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           class="col-md-3 col-6"
-          v-model="soiEN"
+          :model-value="readonly ? soiEN || '-' : soiEN"
           :dense="dense"
           label="Soi"
           :readonly="readonly || sameWithEmployer"
@@ -613,7 +614,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           hide-bottom-space
           class="col-md-3 col-6"
-          v-model="streetEN"
+          :model-value="readonly ? streetEN || '-' : streetEN"
           :dense="dense"
           label="Street"
           :readonly="readonly || sameWithEmployer"
diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index c6749bd2..ab23a967 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -155,6 +155,7 @@ export default {
       invalidCustomeMessage: 'Invalid value. {msg}',
       letterOnly: 'Only letters are allowed',
       letterAndNumOnly: 'Only letters and number are allowed',
+      numOnly: 'Only number are allowed',
       requireLength: 'Please enter {msg} character',
     },
     warning: {
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index 31d40ac1..24031afd 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -155,6 +155,7 @@ export default {
       invalidCustomeMessage: 'ข้อมูลไม่ถูกต้อง {msg}',
       letterOnly: 'โปรดใช้เฉพาะตัวอักษรภาษาอังกฤษเท่านั้น',
       letterAndNumOnly: 'โปรดใช้เฉพาะตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น',
+      numOnly: 'โปรดใช้เฉพาะตัวเลขเท่านั้น',
       requireLength: 'กรุณากรอกให้ครบ {msg} หลัก',
     },
     warning: {
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index d4249112..4b88d9e4 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -718,25 +718,25 @@ watch([customerId, inputSearch, currentStatus], async () => {
             </div>
           </div>
           <EmployerFormAbout
-            :index="customerBranchFormData.code?.slice(-2) || '00'"
-            class="q-mb-xl"
+            :index="customerBranchFormData.code"
             :customer-type="customerType"
-            :customer-name="currentCustomerName"
-            :readonly="customerBranchFormState.dialogType === 'info'"
             v-model:citizen-id="customerBranchFormData.citizenId"
-            v-model:id="customerBranchFormData.id"
-            v-model:legal-person-no="customerBranchFormData.legalPersonNo"
-            v-model:branch-code="customerBranchFormData.code"
-            v-model:customer-code="customerBranchFormData.code"
-            v-model:register-company-name="
-              customerBranchFormData.registerCompanyName
-            "
-            v-model:register-name="customerBranchFormData.registerName"
-            v-model:register-name-en="customerBranchFormData.registerNameEN"
-            v-model:register-date="customerBranchFormData.registerDate"
-            v-model:authorized-capital="
-              customerBranchFormData.authorizedCapital
-            "
+            v-model:prefixName="customerBranchFormData.namePrefix"
+            v-model:firstName="customerBranchFormData.firstName"
+            v-model:lastName="customerBranchFormData.lastName"
+            v-model:firstNameEN="customerBranchFormData.firstNameEN"
+            v-model:lastNameEN="customerBranchFormData.lastNameEN"
+            v-model:gender="customerBranchFormData.gender"
+            v-model:birthDate="customerBranchFormData.birthDate"
+            v-model:customerName="customerBranchFormData.customerName"
+            v-model:legalPersonNo="customerBranchFormData.legalPersonNo"
+            v-model:branchCode="customerBranchFormData.code"
+            v-model:registerName="customerBranchFormData.registerName"
+            v-model:registerNameEN="customerBranchFormData.registerNameEN"
+            v-model:registerDate="customerBranchFormData.registerDate"
+            v-model:authorizedCapital="customerBranchFormData.authorizedCapital"
+            v-model:telephoneNo="customerBranchFormData.telephoneNo"
+            v-model:codeCustomer="customerBranchFormData.codeCustomer"
           />
           <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
             <div class="col-12 text-weight-bold text-body1 row items-center">
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 378db314..a5af371a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
@@ -121,7 +121,13 @@ async function init() {
     if (_data) {
       currentCustomer.value = _data;
       utilsStore.currentTitle.path.push({
-        text: `${currentCustomer.value.firstName || '-'} ${currentCustomer.value.lastName || ''}`,
+        text: `${
+          _data.customerType === 'CORP'
+            ? _data.branch[0].registerName
+            : locale.value === 'eng'
+              ? _data.branch[0].firstNameEN + ' ' + _data.branch[0].lastNameEN
+              : _data.branch[0].firstName + ' ' + _data.branch[0].lastName
+        }`,
         i18n: false,
       });
     } else {
@@ -154,6 +160,13 @@ const customerTypeSelected = ref<{
   value: 'all',
 });
 
+const customerNameInfo = computed(() => {
+  const name =
+    locale.value === 'eng'
+      ? `${customerFormData.value.customerBranch[0].firstNameEN} ${customerFormData.value.customerBranch[0].lastNameEN}`
+      : `${customerFormData.value.customerBranch[0].firstName} ${customerFormData.value.customerBranch[0].lastName}`;
+  return name || '-';
+});
 const currentBtnOpen = ref<boolean[]>([]);
 const employeeStats = ref(0);
 const gridView = ref(false);
@@ -482,7 +495,7 @@ async function openHistory(id: string) {
   employeeHistoryDialog.value = true;
 }
 
-async function editCustomerForm(id: string) {
+async function editCustomerForm(id: string, view?: boolean) {
   await customerFormStore.assignFormData(id);
   await fetchListOfOptionBranch();
   await fetchImageList(
@@ -490,6 +503,7 @@ async function editCustomerForm(id: string) {
     customerFormData.value.selectedImage || '',
     'customer',
   );
+  customerFormState.value.branchIndex = -1;
   customerFormState.value.dialogType = 'edit';
   customerFormState.value.drawerModal = true;
   customerFormState.value.editCustomerId = id;
@@ -1212,7 +1226,7 @@ const emptyCreateDialog = ref(false);
                                     >
                                       <template #error>
                                         <q-img
-                                          :src="`${props.row.customerType === 'CORP' ? `/images/customer-CORP-avartar-${props.row.gender}.png` : `/images/customer-PERS-avartar-${props.row.gender}.png`}`"
+                                          :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
                                         />
                                       </template>
                                     </q-img>
@@ -1222,12 +1236,22 @@ const emptyCreateDialog = ref(false);
                             </div>
                             <div class="col">
                               <div class="col">
-                                {{ props.row.firstName }}
-                                {{ props.row.lastName }}
+                                {{
+                                  props.row.customerType === 'CORP'
+                                    ? props.row.branch[0].registerName || '-'
+                                    : props.row.branch[0].firstName +
+                                        ' ' +
+                                        props.row.branch[0].lastName || '-'
+                                }}
                               </div>
                               <div class="col app-text-muted">
-                                {{ props.row.firstNameEN || '-' }}
-                                {{ props.row.lastNameEN || '-' }}
+                                {{
+                                  props.row.customerType === 'CORP'
+                                    ? props.row.branch[0].registerNameEN || '-'
+                                    : props.row.branch[0].firstNameEN +
+                                        ' ' +
+                                        props.row.branch[0].lastNameEN || '-'
+                                }}
                               </div>
                             </div>
                           </div>
@@ -1236,7 +1260,9 @@ const emptyCreateDialog = ref(false);
                           {{
                             props.row.branch.length !== 0
                               ? props.row.branch[0].businessType !== null
-                                ? props.row.branch[0].businessType
+                                ? optionStore.mapOption(
+                                    props.row.branch[0].businessType,
+                                  )
                                 : ''
                               : '-'
                           }}
@@ -1327,7 +1353,7 @@ const emptyCreateDialog = ref(false);
                             dense
                             round
                             flat
-                            @click.stop="editCustomerForm(props.row.id)"
+                            @click.stop="editCustomerForm(props.row.id, true)"
                           />
 
                           <KebabAction
@@ -1337,7 +1363,7 @@ const emptyCreateDialog = ref(false);
                               () => {
                                 const { branch, ...payload } = props.row;
                                 currentCustomer = payload;
-                                editCustomerForm(props.row.id);
+                                editCustomerForm(props.row.id, true);
                               }
                             "
                             @edit="
@@ -1420,10 +1446,18 @@ const emptyCreateDialog = ref(false);
                             code: props.row.code,
                             name:
                               $i18n.locale === 'eng'
-                                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
-                                : `${props.row.firstName} ${props.row.lastName} `.trim(),
+                                ? props.row.customerType === 'CORP'
+                                  ? props.row.branch[0].registerNameEN || '-'
+                                  : props.row.branch[0].firstNameEN +
+                                      ' ' +
+                                      props.row.branch[0].lastNameEN || '-'
+                                : props.row.customerType === 'CORP'
+                                  ? props.row.branch[0].registerName || '-'
+                                  : props.row.branch[0].firstName +
+                                      ' ' +
+                                      props.row.branch[0].lastName || '-',
                             img: `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`,
-                            fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.gender}.png`,
+                            fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`,
                             male: undefined,
                             female: undefined,
                             detail: [
@@ -1469,7 +1503,7 @@ const emptyCreateDialog = ref(false);
                             () => {
                               const { branch, ...payload } = props.row;
                               currentCustomer = payload;
-                              editCustomerForm(props.row.id);
+                              editCustomerForm(props.row.id, true);
                             }
                           "
                           @delete-card="deleteCustomerById(props.row.id)"
@@ -1766,6 +1800,7 @@ const emptyCreateDialog = ref(false);
       async () => {
         customerFormStore.resetForm(customerFormState.dialogType === 'create');
         onCreateImageList = { selectedImage: '', list: [] };
+        customerFormState.customerImageUrl = '';
         await fetchListOfOptionBranch();
         await customerFormStore.addCurrentCustomerBranch();
       }
@@ -1805,11 +1840,8 @@ const emptyCreateDialog = ref(false);
         active
         hide-fade
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
-        :img="
-          customerFormState.customerImageUrl ||
-          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
-        "
-        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
+        :img="customerFormState.customerImageUrl || null"
+        :fallbackImg="`/images/customer-PERS-avartar-male.png`"
         :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
         :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
         :icon="
@@ -1875,50 +1907,36 @@ const emptyCreateDialog = ref(false);
           id="customer-form-content"
           style="height: 100%; max-height: 100%; overflow-y: auto"
         >
-          <q-form
-            @submit.prevent="
-              async () => {
-                console.log(customerFormData);
-                // await customerFormStore.submitFormCustomer(onCreateImageList);
-                // customerFormState.readonly = true;
-                notify('create', $t('general.success'));
-                // await fetchListCustomer();
-              }
+          <EmployerFormBasicInfo
+            class="q-mb-xl"
+            :readonly="
+              (customerFormState.dialogType === 'edit' &&
+                customerFormState.readonly === true) ||
+              customerFormState.dialogType === 'info'
             "
-            greedy
-          >
-            <!-- :create="customerFormState.dialogType === 'create'" -->
-            <EmployerFormBasicInfo
-              class="q-mb-xl"
-              :readonly="
-                (customerFormState.dialogType === 'edit' &&
-                  customerFormState.readonly === true) ||
-                customerFormState.dialogType === 'info'
-              "
-              :action-disabled="customerFormState.branchIndex !== -1"
-              id="form-basic-info-customer"
-              :create="false"
-              @edit="
-                (customerFormState.dialogType = 'edit'),
-                  (customerFormState.readonly = false)
-              "
-              @cancel="() => customerFormUndo(false)"
-              @delete="
-                customerFormState.editCustomerId &&
-                  deleteCustomerById(customerFormState.editCustomerId)
-              "
-              :customer-type="customerFormData.customerType"
-              v-model:registered-branch-id="customerFormData.registeredBranchId"
-              v-mode:customerName="customerFormData.customerName"
-              v-mode:registerName="customerFormData.registerName"
-              v-mode:citizenId="customerFormData.citizenId"
-              v-mode:legalPersonNo="customerFormData.legalPersonNo"
-              v-mode:businessType="customerFormData.businessType"
-              v-mode:jobPosition="customerFormData.jobPosition"
-              v-mode:telephoneNo="customerFormData.telephoneNo"
-              v-model:branch-options="registerAbleBranchOption"
-            />
-          </q-form>
+            :action-disabled="customerFormState.branchIndex !== -1"
+            id="form-basic-info-customer"
+            :onCreate="customerFormState.dialogType === 'create'"
+            @edit="
+              (customerFormState.dialogType = 'edit'),
+                (customerFormState.readonly = false)
+            "
+            @cancel="() => customerFormUndo(false)"
+            @delete="
+              customerFormState.editCustomerId &&
+                deleteCustomerById(customerFormState.editCustomerId)
+            "
+            :customer-type="customerFormData.customerType"
+            v-model:registered-branch-id="customerFormData.registeredBranchId"
+            v-mode:customerName="customerFormData.customerName"
+            v-mode:registerName="customerFormData.registerName"
+            v-mode:citizenId="customerFormData.citizenId"
+            v-mode:legalPersonNo="customerFormData.legalPersonNo"
+            v-mode:businessType="customerFormData.businessType"
+            v-mode:jobPosition="customerFormData.jobPosition"
+            v-mode:telephoneNo="customerFormData.telephoneNo"
+            v-model:branch-options="registerAbleBranchOption"
+          />
           <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
             <div class="col-12 text-weight-bold text-body1 row items-center">
               <q-icon
@@ -2062,6 +2080,7 @@ const emptyCreateDialog = ref(false);
                   :index="idx"
                   v-model:customer="customerFormData"
                   v-model:customer-branch="customerFormData.customerBranch[idx]"
+                  :onCreate="customerFormState.dialogType === 'create'"
                   :customer-type="customerFormData.customerType"
                   :customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
                   :readonly="customerFormState.branchIndex !== idx"
@@ -2962,8 +2981,8 @@ const emptyCreateDialog = ref(false);
           return false;
         } else {
           fetchListCustomer();
-          customerFormStore.resetForm(true);
           customerFormState.branchIndex = -1;
+          customerFormStore.resetForm(true);
         }
         return false;
       }
@@ -2980,7 +2999,7 @@ const emptyCreateDialog = ref(false);
               refreshImageState ? `?ts=${Date.now()}` : '',
             ) || null
           "
-          :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
+          :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
           :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
           :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
           :icon="
@@ -3050,6 +3069,7 @@ const emptyCreateDialog = ref(false);
             style="height: 100%; max-height: 100%; overflow-y: auto"
           >
             <EmployerFormBasicInfo
+              v-if="customerFormData.customerBranch.length > 0"
               :readonly="
                 (customerFormState.dialogType === 'edit' &&
                   customerFormState.readonly === true) ||
@@ -3058,7 +3078,7 @@ const emptyCreateDialog = ref(false);
               :hide-action="customerFormData.status === 'INACTIVE'"
               :action-disabled="customerFormState.branchIndex !== -1"
               id="form-basic-info-customer"
-              :create="customerFormState.dialogType === 'create'"
+              :onCreate="customerFormState.dialogType === 'create'"
               @edit="
                 (customerFormState.dialogType = 'edit'),
                   (customerFormState.readonly = false)
@@ -3069,16 +3089,25 @@ const emptyCreateDialog = ref(false);
                   deleteCustomerById(customerFormState.editCustomerId)
               "
               :customer-type="customerFormData.customerType"
-              v-model:code="customerFormData.code"
               v-model:registered-branch-id="customerFormData.registeredBranchId"
+              v-model:customerName="customerNameInfo"
+              v-model:registerName="
+                customerFormData.customerBranch[0].registerName
+              "
+              v-model:citizenId="customerFormData.customerBranch[0].citizenId"
+              v-model:legalPersonNo="
+                customerFormData.customerBranch[0].legalPersonNo
+              "
+              v-model:businessType="
+                customerFormData.customerBranch[0].businessType
+              "
+              v-model:jobPosition="
+                customerFormData.customerBranch[0].jobPosition
+              "
+              v-model:telephoneNo="
+                customerFormData.customerBranch[0].telephoneNo
+              "
               v-model:branch-options="registerAbleBranchOption"
-              v-model:first-name="customerFormData.firstName"
-              v-model:last-name="customerFormData.lastName"
-              v-model:first-name-en="customerFormData.firstNameEN"
-              v-model:last-name-en="customerFormData.lastNameEN"
-              v-model:name-prefix="customerFormData.namePrefix"
-              v-model:gender="customerFormData.gender"
-              v-model:birth-date="customerFormData.birthDate"
             />
 
             <!-- <div class="row q-col-gutter-sm q-mb-xl">
@@ -3096,11 +3125,7 @@ const emptyCreateDialog = ref(false);
 
             <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
               <div
-                class="col-12 text-weight-bold text-body1 row items-center"
-                :style="{
-                  opacity:
-                    customerFormState.branchIndex !== -1 ? '0.5' : undefined,
-                }"
+                class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
               >
                 <q-icon
                   flat
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index 9aac666d..bc1d393d 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -50,7 +50,7 @@ const authorizedCapital = defineModel<string>('authorizedCapital', {
 
 // both
 const telephoneNo = defineModel<string>('telephoneNo');
-const customerCode = defineModel<string | undefined>('customerCode', {
+const codeCustomer = defineModel<string | undefined>('codeCustomer', {
   required: true,
 });
 
@@ -130,6 +130,15 @@ watch(
           :label="$t('customer.form.legalPersonCode')"
           for="input-legal-person-code"
           v-model="legalPersonNo"
+          mask="#############"
+          :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
+            (val) =>
+              (val && val.length === 13 && /[0-9]+/.test(val)) ||
+              $t('form.error.invalidCustomeMessage', {
+                msg: $t('form.error.requireLength', { msg: 13 }),
+              }),
+          ]"
         />
 
         <q-input
@@ -141,7 +150,7 @@ watch(
           :disable="!readonly"
           :readonly="readonly"
           :label="$t('customer.form.customerCode')"
-          :model-value="customerCode"
+          :model-value="legalPersonNo"
         />
 
         <q-input
@@ -153,7 +162,7 @@ watch(
           :label="$t('customer.form.branchCode')"
           :disable="!readonly"
           :readonly="readonly"
-          :model-value="`${branchCode?.slice(0, -2) || '-'}${index.toString().padStart(2, '0')}`"
+          :model-value="branchCode"
         />
       </div>
 
@@ -182,7 +191,7 @@ watch(
           :rules="[
             (val: string) => !!val || $t('form.error.required'),
             (val: string) =>
-              /^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
+              /^[A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
           ]"
         />
       </div>
@@ -249,7 +258,7 @@ watch(
           :disable="!readonly"
           :readonly="readonly"
           :label="$t('customer.form.customerCode')"
-          :model-value="customerCode"
+          :model-value="codeCustomer"
         />
 
         <q-input
@@ -262,6 +271,15 @@ watch(
           :label="$t('customer.form.cardNumber')"
           for="input-legal-person-no"
           v-model="citizenId"
+          mask="#############"
+          :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
+            (val) =>
+              (val && val.length === 13 && /[0-9]+/.test(val)) ||
+              $t('form.error.invalidCustomeMessage', {
+                msg: $t('form.error.requireLength', { msg: 13 }),
+              }),
+          ]"
         />
       </div>
 
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index 37dbaa33..959302b3 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -18,7 +18,7 @@ withDefaults(
     prefixId?: string;
     outlined?: boolean;
     readonly?: boolean;
-    create?: boolean;
+    onCreate?: boolean;
     actionDisabled?: boolean;
     customerType?: 'CORP' | 'PERS';
     hideAction?: boolean;
@@ -78,60 +78,6 @@ watch(
     );
   },
 );
-
-// const prefixNameOptions = ref<Record<string, unknown>[]>([]);
-// let prefixNameFilter: (
-//   value: string,
-//   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-// ) => void;
-
-// const genderOptions = ref<Record<string, unknown>[]>([]);
-// let genderFilter: (
-//   value: string,
-//   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-// ) => void;
-
-// onMounted(() => {
-//   prefixNameFilter = selectFilterOptionRefMod(
-//     ref(optionStore.globalOption?.prefix),
-//     prefixNameOptions,
-//     'label',
-//   );
-//   genderFilter = selectFilterOptionRefMod(
-//     ref(optionStore.globalOption?.gender),
-//     genderOptions,
-//     'label',
-//   );
-// });
-
-// watch(
-//   () => optionStore.globalOption,
-//   () => {
-//     prefixNameFilter = selectFilterOptionRefMod(
-//       ref(optionStore.globalOption.prefix),
-//       prefixNameOptions,
-//       'label',
-//     );
-//     genderFilter = selectFilterOptionRefMod(
-//       ref(optionStore.globalOption.gender),
-//       genderOptions,
-//       'label',
-//     );
-//   },
-// );
-
-// watch(
-//   () => namePrefix.value,
-//   (v) => {
-//     if (v === 'mr') gender.value = 'male';
-//     else gender.value = 'female';
-//   },
-// );
-
-// function formatCode(input: string | undefined, type: 'code' | 'number') {
-//   if (!input) return;
-//   return input.slice(...(type === 'code' ? [0, -6] : [-6]));
-// }
 </script>
 
 <template>
@@ -239,7 +185,7 @@ watch(
       </div>
 
       <div
-        v-if="customerType === 'CORP' && !create"
+        v-if="customerType === 'CORP' && !onCreate"
         class="row col-12 q-col-gutter-sm"
       >
         <q-input
@@ -270,12 +216,12 @@ watch(
           class="col-6 col-md-3"
           :label="$t('customer.table.businessTypePure')"
           for="input-first-name-en"
-          v-model="businessType"
+          :model-value="optionStore.mapOption(businessType)"
         />
       </div>
 
       <div
-        v-if="customerType === 'PERS' && !create"
+        v-if="customerType === 'PERS' && !onCreate"
         class="row col-12 q-col-gutter-sm"
       >
         <q-input
@@ -307,11 +253,11 @@ watch(
           class="col-6 col-md-3"
           :label="$t('customer.table.businessTypePure')"
           for="input-first-name-en"
-          v-model="businessType"
+          :model-value="optionStore.mapOption(businessType)"
         />
       </div>
 
-      <div v-if="!create" class="row col-12 q-col-gutter-sm">
+      <div v-if="!onCreate" class="row col-12 q-col-gutter-sm">
         <q-input
           dense
           outlined
@@ -320,7 +266,7 @@ watch(
           class="col-6 col-md-5"
           :label="$t('customer.form.jobPosition')"
           for="input-first-name-en"
-          v-model="jobPosition"
+          :model-value="optionStore.mapOption(jobPosition)"
         />
         <q-input
           dense
@@ -343,671 +289,5 @@ watch(
         </q-input>
       </div>
     </div>
-    <!-- <div v-if="customerType === 'CORP'" class="col-12 row q-col-gutter-sm">
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-6"
-        :label="$t('customer.form.customerName')"
-        for="input-first-name"
-        v-model="customerName"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-6"
-        :label="$t('customer.form.customerNameEN')"
-        for="input-first-name-en"
-        v-model="customerNameEN"
-        :rules="[
-          (val: string) => !!val || $t('form.error.required'),
-          (val: string) =>
-            /^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
-        ]"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-6 col-md-3"
-        :label="$t('general.taxNo')"
-        for="input-first-name-en"
-        v-model="taxNo"
-        mask="#############"
-        :rules="[
-          (val) => (val && val.length > 0) || $t('form.error.required'),
-          (val) =>
-            (val && val.length === 13 && /[0-9]+/.test(val)) ||
-            $t('form.error.invalidCustomeMessage', {
-              msg: $t('form.error.requireLength', { msg: 13 }),
-            }),
-        ]"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-6 col-md-3"
-        :label="$t('customer.table.businessTypePure')"
-        for="input-first-name-en"
-        v-model="businessType"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-6 col-md-3"
-        :label="$t('customer.form.jobPosition')"
-        for="input-first-name-en"
-        v-model="jobPosition"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-6 col-md-3"
-        :label="$t('customer.form.headQuarters.telephoneNo')"
-        for="input-first-name-en"
-        v-model="telephoneNo"
-      >
-        <template #prepend>
-          <q-icon
-            size="xs"
-            name="mdi-phone-outline"
-            class="cursor-pointer"
-            color="primary"
-          />
-        </template>
-      </q-input>
-    </div>
-
-    <div v-if="customerType === 'PERS'" class="col-12 row q-col-gutter-sm">
-      <div class="col-9 row q-col-gutter-sm">
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          dense
-          class="col-12"
-          option-value="id"
-          input-debounce="0"
-          option-label="name"
-          v-model="registeredBranchId"
-          :readonly="readonly"
-          :options="filteredBranchOptions"
-          :hide-dropdown-icon="readonly"
-          :label="$t('customer.form.registeredBranch')"
-          :for="`${prefixId}-input-source-nationality`"
-          :rules="[
-            (val) => {
-              const roles = getRole() || [];
-              return (
-                ['admin', 'system', 'head_of_admin'].some((v) =>
-                  roles.includes(v),
-                ) ||
-                !!val ||
-                $t('form.error.required')
-              );
-            },
-          ]"
-          @filter="branchFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <q-select
-          outlined
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="value"
-          hide-dropdown-icon
-          class="col-12 col-md-2"
-          dense
-          :readonly="readonly"
-          :options="prefixNameOptions"
-          :for="`${prefixId}-select-prefix-name`"
-          :label="$t('form.prefixName')"
-          @filter="prefixNameFilter"
-          :model-value="readonly ? namePrefix || '-' : namePrefix"
-          @update:model-value="
-            (v) => {
-              typeof v === 'string' ? (namePrefix = v) : '';
-            }
-          "
-          @clear="namePrefix = ''"
-          :rules="[
-            (val) => {
-              const roles = getRole() || [];
-              return !!val || $t('form.error.required');
-            },
-          ]"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-5"
-          :label="$t('customer.form.firstName')"
-          for="input-first-name"
-          v-model="firstName"
-          :rules="[
-            (val) => {
-              const roles = getRole() || [];
-              return !!val || $t('form.error.required');
-            },
-          ]"
-        />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-5"
-          :label="$t('customer.form.lastName')"
-          for="input-last-name"
-          v-model="lastName"
-          :rules="[
-            (val) => {
-              const roles = getRole() || [];
-              return !!val || $t('form.error.required');
-            },
-          ]"
-        />
-
-        <q-input
-          dense
-          outlined
-          :disable="!readonly"
-          readonly
-          hide-bottom-space
-          class="col-12 col-md-2"
-          label="Title"
-          for="input-prefix-name-en"
-          :model-value="
-            readonly
-              ? capitalize(namePrefix || '') || '-'
-              : capitalize(namePrefix || '')
-          "
-        />
-
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-5"
-          label="Name"
-          for="input-first-name-en"
-          v-model="firstNameEN"
-          :rules="[
-            (val: string) => !!val || $t('form.error.required'),
-            (val: string) =>
-              /^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
-          ]"
-        />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-5"
-          label="Surname"
-          for="input-last-name-en"
-          v-model="lastNameEN"
-          :rules="[
-            (val: string) => !!val || $t('form.error.required'),
-            (val: string) =>
-              /^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
-          ]"
-        />
-
-        <q-input
-          outlined
-          class="col-md-5 col-12"
-          hide-bottom-space
-          v-model="lastNameEN"
-          mask="#############"
-          :readonly="readonly"
-          dense
-          :label="$t('personnel.form.citizenId')"
-          :rules="[
-            (val) => (val && val.length > 0) || $t('form.error.required'),
-            (val) =>
-              (val && val.length === 13 && /[0-9]+/.test(val)) ||
-              $t('form.error.invalidCustomeMessage', {
-                msg: $t('form.error.requireLength', { msg: 13 }),
-              }),
-          ]"
-          for="input-citizen-id"
-        />
-        <q-select
-          outlined
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="value"
-          class="col-md-2 col-6"
-          dense
-          :readonly="readonly"
-          :options="genderOptions"
-          :hide-dropdown-icon="readonly"
-          :for="`${prefixId}-select-gender`"
-          :label="$t('form.gender')"
-          @filter="genderFilter"
-          :model-value="readonly ? gender || '-' : gender"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (gender = v) : '')
-          "
-          @clear="gender = ''"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-
-        <DatePicker
-          v-model="birthDate"
-          class="col-md col-6"
-          :id="`${prefixId}-input-birth-date`"
-          :readonly="readonly"
-          :label="$t('form.birthDate')"
-          :disabled-dates="disabledAfterToday"
-          :rules="[
-            (val: string) =>
-              !!val ||
-              $t('form.error.selectField', { field: $t('form.birthDate') }),
-          ]"
-        />
-
-        <q-input
-          :for="`${prefixId}-input-age`"
-          :id="`${prefixId}-input-age`"
-          dense
-          outlined
-          :label="$t('personnel.age')"
-          class="col-md col-12"
-          :model-value="
-            birthDate?.toString() === 'Invalid Date' ||
-            birthDate?.toString() === undefined
-              ? ''
-              : calculateAge(birthDate)
-          "
-        />
-      </div>
-
-      <div class="row col-12 q-col-gutter-sm">
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-6 col-md"
-          :label="$t('customer.table.businessTypePure')"
-          for="input-first-name-en"
-          v-model="firstNameEN"
-        />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-6 col-md"
-          :label="$t('customer.form.jobPosition')"
-          for="input-first-name-en"
-          v-model="firstNameEN"
-        />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-6 col-md-3"
-          :label="$t('customer.form.headQuarters.telephoneNo')"
-          for="input-first-name-en"
-          v-model="firstNameEN"
-        >
-          <template #prepend>
-            <q-icon
-              size="xs"
-              name="mdi-phone-outline"
-              class="cursor-pointer"
-              color="primary"
-            />
-          </template>
-        </q-input>
-      </div>
-    </div> -->
-
-    <!-- <div class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        dense
-        class="col-12 col-md-7"
-        option-value="id"
-        input-debounce="0"
-        option-label="name"
-        v-model="registeredBranchId"
-        :readonly="readonly"
-        :options="filteredBranchOptions"
-        :hide-dropdown-icon="readonly"
-        :label="$t('customer.form.registeredBranch')"
-        :for="`${prefixId}-input-source-nationality`"
-        :rules="[
-          (val) => {
-            const roles = getRole() || [];
-            return (
-              ['admin', 'system', 'head_of_admin'].some((v) =>
-                roles.includes(v),
-              ) ||
-              !!val ||
-              $t('form.error.required')
-            );
-          },
-        ]"
-        @filter="branchFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-    </div>
-
-    <div class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
-        hide-dropdown-icon
-        class="col-12 col-md-2"
-        dense
-        :readonly="readonly"
-        :options="prefixNameOptions"
-        :for="`${prefixId}-select-prefix-name`"
-        :label="$t('form.prefixName')"
-        @filter="prefixNameFilter"
-        :model-value="readonly ? namePrefix || '-' : namePrefix"
-        @update:model-value="
-          (v) => {
-            typeof v === 'string' ? (namePrefix = v) : '';
-          }
-        "
-        @clear="namePrefix = ''"
-        :rules="[
-          (val) => {
-            const roles = getRole() || [];
-            return !!val || $t('form.error.required');
-          },
-        ]"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-5"
-        :label="$t('customer.form.firstName')"
-        for="input-first-name"
-        v-model="firstName"
-        :rules="[
-          (val) => {
-            const roles = getRole() || [];
-            return !!val || $t('form.error.required');
-          },
-        ]"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-5"
-        :label="$t('customer.form.lastName')"
-        for="input-last-name"
-        v-model="lastName"
-        :rules="[
-          (val) => {
-            const roles = getRole() || [];
-            return !!val || $t('form.error.required');
-          },
-        ]"
-      />
-    </div>
-
-    <div class="col-12 row q-col-gutter-sm">
-      <q-input
-        dense
-        outlined
-        :disable="!readonly"
-        readonly
-        hide-bottom-space
-        class="col-12 col-md-2"
-        :label="$t('customer.form.prefixName')"
-        for="input-prefix-name"
-        :model-value="
-          readonly
-            ? capitalize(namePrefix || '') || '-'
-            : capitalize(namePrefix || '')
-        "
-      />
-
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-5"
-        :label="$t('customer.form.firstNameEN')"
-        for="input-first-name-en"
-        v-model="firstNameEN"
-        :rules="[
-          (val: string) => !!val || $t('form.error.required'),
-          (val: string) =>
-            /^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
-        ]"
-      />
-      <q-input
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-5"
-        :label="$t('customer.form.lastNameEN')"
-        for="input-last-name-en"
-        v-model="lastNameEN"
-        :rules="[
-          (val: string) => !!val || $t('form.error.required'),
-          (val: string) =>
-            /^[A-Za-z]+$/.test(val) || $t('form.error.letterOnly'),
-        ]"
-      />
-    </div>
-
-    <div class="col-12 row q-col-gutter-sm">
-      <q-select
-        outlined
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
-        class="col-12 col-md-2"
-        dense
-        :readonly="readonly"
-        :options="genderOptions"
-        :hide-dropdown-icon="readonly"
-        :for="`${prefixId}-select-gender`"
-        :label="$t('form.gender')"
-        @filter="genderFilter"
-        :model-value="readonly ? gender || '-' : gender"
-        @update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
-        @clear="gender = ''"
-        :rules="[
-          (val) => {
-            const roles = getRole() || [];
-            return !!val || $t('form.error.required');
-          },
-        ]"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-
-      <VueDatePicker
-        :id="`${prefixId}-input-birth-date`"
-        :for="`${prefixId}-input-birth-date`"
-        utc
-        autoApply
-        v-model="birthDate"
-        :disabled-dates="disabledAfterToday"
-        :teleport="true"
-        :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
-        :enableTimePicker="false"
-        :disabled="readonly"
-        class="col-12 col-md-3"
-      >
-        <template #year="{ value }">
-          {{ $i18n.locale === 'tha' ? value + 543 : value }}
-        </template>
-        <template #year-overlay-value="{ value }">
-          {{ $i18n.locale === 'tha' ? value + 543 : value }}
-        </template>
-        <template #trigger>
-          <q-input
-            :for="`${prefixId}-input-birth-date`"
-            hide-bottom-space
-            placeholder="DD/MM/YYYY"
-            :label="$t('form.birthDate')"
-            dense
-            outlined
-            :readonly="readonly"
-            :rules="[
-              (val: string) =>
-                !!val || $t('selectValidate') + $t('form.birthDate'),
-            ]"
-            :mask="readonly ? '' : '##/##/####'"
-            :model-value="
-              birthDate && readonly
-                ? dateFormat(birthDate)
-                : dateFormat(birthDate, false, false, true)
-            "
-            @update:model-value="
-              (v) => {
-                if (v && v.toString().length === 10) {
-                  const today = new Date();
-                  const date = parseAndFormatDate(v, locale);
-                  birthDate = date && date > today ? today : date;
-                }
-              }
-            "
-          >
-            <template v-slot:prepend>
-              <q-icon
-                size="xs"
-                name="mdi-calendar-blank-outline"
-                class="cursor-pointer"
-                color="primary"
-              />
-            </template>
-          </q-input>
-        </template>
-      </VueDatePicker>
-
-      <q-input
-        :for="`${prefixId}-input-age`"
-        :id="`${prefixId}-input-age`"
-        dense
-        outlined
-        readonly
-        :label="$t('general.age')"
-        class="col-12 col-md-2"
-        :model-value="
-          birthDate?.toString() === 'Invalid Date' ||
-          birthDate?.toString() === undefined
-            ? ''
-            : calculateAge(birthDate)
-        "
-      />
-    </div> -->
   </div>
 </template>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index 65ee5414..947ea1b3 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -47,6 +47,7 @@ withDefaults(
     customerName: string;
     readonly?: boolean;
     prefixId?: string;
+    onCreate?: boolean;
     actionDisabled?: boolean;
     customerType?: 'CORP' | 'PERS';
     hideAction?: boolean;
@@ -69,37 +70,37 @@ withDefaults(
         ? $t('customer.form.headQuarters.title')
         : $t('customer.form.branch.title', { name: index || 0 })
     }}
-    <!-- <EditButton
-      icon-only
-      v-if="readonly"
-      @click="$emit('edit')"
-      class="q-ml-auto"
-      type="button"
-      :disabled="actionDisabled"
-    />
-    <DeleteButton
-      icon-only
-      v-if="readonly"
-      @click="$emit('delete')"
-      type="button"
-      :disabled="actionDisabled"
-    />
-    <UndoButton
-      icon-only
-      v-if="!readonly"
-      @click="$emit('cancel')"
-      type="button"
-      class="q-ml-auto"
-      :disabled="actionDisabled"
-    /> -->
-    <!-- v-if="!readonly" -->
-    <SaveButton
-      icon-only
-      @click="$emit('save')"
-      class="q-ml-auto"
-      type="submit"
-      :disabled="actionDisabled"
-    />
+    <div class="q-ml-auto row no-warp">
+      <EditButton
+        icon-only
+        v-if="readonly"
+        @click="$emit('edit')"
+        class="q-ml-auto"
+        type="button"
+        :disabled="actionDisabled"
+      />
+      <DeleteButton
+        icon-only
+        v-if="readonly"
+        @click="$emit('delete')"
+        type="button"
+        :disabled="actionDisabled"
+      />
+      <UndoButton
+        icon-only
+        v-if="!readonly && !onCreate"
+        @click="$emit('cancel')"
+        type="button"
+        :disabled="actionDisabled"
+      />
+      <SaveButton
+        v-if="!readonly"
+        icon-only
+        @click="$emit('save')"
+        type="submit"
+        :disabled="actionDisabled"
+      />
+    </div>
   </span>
 
   <div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
@@ -140,13 +141,13 @@ withDefaults(
             v-model:birthDate="item.birthDate"
             v-model:customerName="item.customerName"
             v-model:legalPersonNo="item.legalPersonNo"
-            v-model:branchCode="item.branchCode"
+            v-model:branchCode="item.code"
             v-model:registerName="item.registerName"
             v-model:registerNameEN="item.registerNameEN"
             v-model:registerDate="item.registerDate"
             v-model:authorizedCapital="item.authorizedCapital"
             v-model:telephoneNo="item.telephoneNo"
-            v-model:customerCode="item.customerCode"
+            v-model:codeCustomer="item.codeCustomer"
           />
         </q-tab-panel>
         <q-tab-panel name="business">
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index 35a4b7c5..c5846c73 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -110,6 +110,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       map-options
       hide-selected
       hide-bottom-space
+      hide-dropdown-icon
       input-debounce="0"
       option-value="value"
       option-label="label"
@@ -142,6 +143,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       map-options
       hide-selected
       hide-bottom-space
+      hide-dropdown-icon
       input-debounce="0"
       option-value="value"
       option-label="label"
@@ -170,6 +172,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       map-options
       hide-selected
       hide-bottom-space
+      hide-dropdown-icon
       input-debounce="0"
       option-value="value"
       option-label="label"
@@ -200,6 +203,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       map-options
       hide-selected
       hide-bottom-space
+      hide-dropdown-icon
       input-debounce="0"
       option-value="value"
       option-label="label"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index ffe095fe..21199cc4 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -140,28 +140,21 @@ export const useCustomerForm = defineStore('form-customer', () => {
     resetFormData.registeredBranchId = data.registeredBranchId;
     resetFormData.status = data.status;
     resetFormData.customerType = data.customerType;
-    resetFormData.code = data.code || '';
-    resetFormData.namePrefix = data.namePrefix;
-    resetFormData.firstName = data.firstName;
-    resetFormData.lastName = data.lastName;
-    resetFormData.firstNameEN = data.firstNameEN;
-    resetFormData.lastNameEN = data.lastNameEN;
-    resetFormData.gender = data.gender;
-    resetFormData.birthDate = new Date(data.birthDate);
     resetFormData.image = null;
     resetFormData.selectedImage = data.selectedImage;
 
     resetFormData.customerBranch = await Promise.all(
       data.branch.map(async (v) => ({
-        id: v.id,
-        code: v.code || '',
-        customerCode: '',
-        provinceId: v.provinceId,
-        districtId: v.districtId,
-        subDistrictId: v.subDistrictId,
+        firstName: v.firstName,
+        firstNameEN: v.firstNameEN,
+        lastName: v.lastName,
+        lastNameEN: v.lastNameEN,
+        gender: v.gender,
+        birthDate: v.birthDate,
+        namePrefix: v.namePrefix,
         wageRate: v.wageRate,
-        payDate: v.payDate, // Convert the string to a Date object
-        payDateEN: v.payDateEN,
+        wageRateText: v.wageRateText,
+        payDate: v.payDate,
         saleEmployee: v.saleEmployee,
         jobDescription: v.jobDescription,
         jobPositionEN: v.jobPositionEN,
@@ -169,23 +162,49 @@ export const useCustomerForm = defineStore('form-customer', () => {
         businessTypeEN: v.businessTypeEN,
         businessType: v.businessType,
         employmentOffice: v.employmentOffice,
+        employmentOfficeEN: v.employmentOfficeEN,
         telephoneNo: v.telephoneNo,
+        contactName: v.contactName,
         email: v.email,
+        subDistrictId: v.subDistrictId,
+        districtId: v.districtId,
+        provinceId: v.provinceId,
+        streetEN: v.streetEN,
+        street: v.street,
+        mooEN: v.mooEN,
+        moo: v.moo,
+        soiEN: v.soiEN,
+        soi: v.soi,
         addressEN: v.addressEN,
         address: v.address,
         workplaceEN: v.workplaceEN,
         workplace: v.workplace,
+        authorizedCapital: v.authorizedCapital,
+        registerDate: v.registerDate,
+        registerNameEN: v.registerNameEN,
+        registerName: v.registerName,
+        legalPersonNo: v.legalPersonNo,
+        citizenId: v.citizenId,
+        codeCustomer: v.codeCustomer,
+        updatedByUserId: v.updatedByUserId,
+        updatedAt: v.updatedAt,
+        createdByUserId: v.createdByUserId,
+        createdAt: v.createdAt,
+        code: v.code,
+        statusOrder: v.statusOrder,
         status: v.status,
         customerId: v.customerId,
-        citizenId: v.citizenId || '',
-        authorizedCapital: v.authorizedCapital || '',
-        registerDate: new Date(v.registerDate), // Convert the string to a Date object
-        registerNameEN: v.registerNameEN || '',
-        registerName: v.registerName || '',
-        legalPersonNo: v.legalPersonNo || '',
-        registerCompanyName: '',
+        id: v.id,
+        homeCode: v.homeCode,
+        contactTel: v.contactTel,
+        officeTel: v.officeTel,
+        agent: v.agent,
+        customerName: v.customerName,
+        authorizedName: v.authorizedName,
+        authorizedNameEN: v.authorizedNameEN,
+
+        payDateEN: v.payDateEN,
         statusSave: true,
-        contactName: v.contactName || '',
         file: await customerStore.listAttachment(v.id).then(async (r) => {
           if (r) {
             return await Promise.all(
@@ -220,7 +239,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
             ? ''
             : currentFormData.value.customerBranch?.[0].branchCode
           : '',
-      customerCode: '',
+      codeCustomer: '',
 
       legalPersonNo:
         currentFormData.value.customerBranch.length !== 0
@@ -373,7 +392,6 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
     registerNameEN: '',
     registerName: '',
     legalPersonNo: '',
-    registerCompanyName: '',
     statusSave: false,
     contactName: '',
     file: [],
@@ -441,7 +459,6 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
       registerName: _data.registerName,
       legalPersonNo: _data.legalPersonNo,
       contactName: _data.contactName,
-      registerCompanyName: '',
       statusSave: false,
       file: [],
     };
diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index 6820db62..6ec939f4 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -335,7 +335,6 @@ const useCustomerStore = defineStore('api-customer', () => {
   ) {
     if (data.customerBranch) {
       if (data.customerBranch[0].citizenId) {
-        console.log('1');
         delete data.customerBranch[0]['authorizedNameEN'];
         delete data.customerBranch[0]['authorizedName'];
         delete data.customerBranch[0]['authorizedCapital'];
@@ -368,7 +367,7 @@ const useCustomerStore = defineStore('api-customer', () => {
           branchCode: undefined,
           id: undefined,
           customerId: undefined,
-          customerCode: undefined,
+          codeCustomer: undefined,
         })),
         selectedImage: imgList.selectedImage,
       },
@@ -404,18 +403,6 @@ const useCustomerStore = defineStore('api-customer', () => {
     },
   ) {
     const { customerBranch, image, ...payload } = data;
-    // const attachment = payload.customerBranch?.map((v) => v.file);
-
-    // payload.customerBranch = payload.customerBranch?.map((v) => {
-    //   const { code: _code, ...rest } = v;
-    //   return { ...rest };
-    // });
-
-    // if (payload.customerBranch?.length) {
-    //   for (let i = 0; i < payload.customerBranch?.length; i++) {
-    //     delete payload.customerBranch[i].file;
-    //   }
-    // }
 
     const res = await api.put<
       Customer & {
@@ -423,28 +410,32 @@ const useCustomerStore = defineStore('api-customer', () => {
         imageUrl: string;
         imageUploadUrl: string;
       }
-    >(`/customer/${id}`, payload, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
-        'X-Tid': flow?.transactionId,
+    >(
+      `/customer/${id}`,
+      {
+        ...payload,
+        branch: data.customerBranch?.map((v) => ({
+          ...v,
+          file: undefined,
+          branchCode: undefined,
+          id: undefined,
+          customerId: undefined,
+          codeCustomer: undefined,
+          createAt: undefined,
+          createdByUserId: undefined,
+          statusOrder: undefined,
+          updatedAt: undefined,
+          updatedByUserId: undefined,
+        })),
       },
-    });
-
-    // await Promise.allSettled([
-    //   ...res.data.branch.map(async (v, i) => {
-    //     const fileList = attachment?.[i];
-    //     if (fileList)
-    //       return await addBranchAttachment(v.id, { file: fileList });
-    //   }),
-    // image &&
-    //   (await axios
-    //     .put(res.data.imageUploadUrl, image, {
-    //       headers: { 'Content-Type': image.type },
-    //       onUploadProgress: (e) => console.log(e),
-    //     })
-    //     .catch((e) => console.error(e)));
-    // ]);
+      {
+        headers: {
+          'X-Session-Id': flow?.sessionId,
+          'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+          'X-Tid': flow?.transactionId,
+        },
+      },
+    );
 
     if (!res) return false;
 
@@ -494,30 +485,35 @@ const useCustomerStore = defineStore('api-customer', () => {
   }
 
   async function createBranch(
-    data: CustomerBranchCreate & { id?: string; customerId: string },
+    data: CustomerBranchCreate & {
+      id?: string;
+      customerId: string;
+      codeCustomer: string;
+    },
     flow?: {
       sessionId?: string;
       refTransactionId?: string;
       transactionId?: string;
     },
   ) {
-    const {
-      customerCode,
-      registerCompanyName,
-      statusSave,
-      code,
-      file,
-      ...payload
-    } = data;
+    const { codeCustomer, statusSave, code, file, birthDate, ...payload } =
+      data;
 
-    if (!!payload.citizenId) {
-      delete payload['registerDate'];
-      delete payload['registerName'];
-      delete payload['registerNameEN'];
-      delete payload['authorizedCapital'];
-      delete payload['legalPersonNo'];
+    if (data.citizenId) {
+      delete data['authorizedNameEN'];
+      delete data['authorizedName'];
+      delete data['registerDate'];
+      delete data['authorizedCapital'];
+      delete data['registerNameEN'];
+      delete data['registerName'];
+      delete data['legalPersonNo'];
     } else {
-      delete payload['citizenId'];
+      delete data['citizenId'];
+    }
+    console.log(data.birthDate);
+    console.log(!data.birthDate);
+    if (!data.birthDate) {
+      delete data['birthDate'];
     }
 
     const res = await api.post<CustomerBranch>('/customer-branch', payload, {
@@ -536,20 +532,44 @@ const useCustomerStore = defineStore('api-customer', () => {
 
   async function editBranchById(
     id: string,
-    data: Partial<CustomerBranchCreate & { id?: string; customerId: string }>,
+    data: Partial<
+      CustomerBranch & {
+        id?: string;
+        customerId: string;
+        codeCustomer: string;
+      }
+    >,
     flow?: {
       sessionId?: string;
       refTransactionId?: string;
       transactionId?: string;
     },
   ) {
+    if (data.citizenId) {
+      delete data['authorizedNameEN'];
+      delete data['authorizedName'];
+      delete data['registerDate'];
+      delete data['authorizedCapital'];
+      delete data['registerNameEN'];
+      delete data['registerName'];
+      delete data['legalPersonNo'];
+    } else {
+      delete data['citizenId'];
+    }
+    if (!data.birthDate) delete data['birthDate'];
+
     const {
-      customerCode,
-      registerCompanyName,
-      statusSave,
       code,
       status,
+      codeCustomer,
+      createdAt,
+      createdByUserId,
+      statusOrder,
+      updatedAt,
+      updatedByUserId,
       file,
+      registerCompanyName,
+      statusSave,
       ...payload
     } = data;
 
diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 9d331655..40e3744c 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -30,33 +30,57 @@ export type Customer = {
 };
 
 export type CustomerBranch = {
-  customerId: string;
-  contactName: string;
-  wageRate: number;
-  payDate: string;
-  payDateEN: string;
-  jobDescription: string;
-  jobPosition: string;
-  businessType: string;
-  employmentOffice: string;
-  authorizedCapital: string;
-  registerDate: Date | null;
-  registerNameEN: string;
-  registerName: string;
-  legalPersonNo?: string;
-  citizenId: string;
-  updatedByUserId: string;
-  createdByUserId: string;
-  statusOrder: number;
-  telephoneNo: string;
-  email: string;
-  subDistrictId: string;
-  districtId: string;
-  provinceId: string;
-  addressEN: string;
-  address: string;
-  code: string;
-  id: string;
+  customerCode?: string;
+  wageRateText: 'string';
+  wageRate: 0;
+  payDateEN: 'string';
+  payDate: 'string';
+  jobDescription: 'string';
+  jobPosition: 'string';
+  businessType: 'string';
+  agent: 'string';
+  contactName: 'string';
+  officeTel: 'string';
+  contactTel: 'string';
+  email: 'string';
+  subDistrictId: 'string';
+  districtId: 'string';
+  provinceId: 'string';
+  streetEN: 'string';
+  street: 'string';
+  mooEN: 'string';
+  moo: 'string';
+  soiEN: 'string';
+  soi: 'string';
+  addressEN: 'string';
+  address: 'string';
+  employmentOfficeEN: 'string';
+  employmentOffice: 'string';
+  homeCode: 'string';
+  authorizedNameEN: 'string';
+  authorizedName: 'string';
+  authorizedCapital: 'string';
+  registerDate: '2024-09-16T07:52:42.627Z';
+  registerNameEN: 'string';
+  registerName: 'string';
+  legalPersonNo: 'string';
+  citizenId: 'string';
+  birthDate: '2024-09-16T07:52:42.627Z';
+  gender: 'string';
+  lastNameEN: 'string';
+  lastName: 'string';
+  firstNameEN: 'string';
+  firstName: 'string';
+  namePrefix: 'string';
+  telephoneNo: 'string';
+  codeCustomer: 'string';
+  customerName: 'string';
+  updatedByUserId: 'string';
+  createdByUserId: 'string';
+  code: 'string';
+  statusOrder: 0;
+  customerId: 'string';
+  id: 'string';
 
   status: Status;
   createdBy: string | null;
@@ -72,6 +96,7 @@ export type CustomerBranch = {
 };
 
 export type CustomerBranchCreate = {
+  customerCode?: string;
   customerId: string;
   legalPersonNo?: string;
   citizenId?: string;
@@ -117,6 +142,7 @@ export type CustomerBranchCreate = {
   authorizedCapital?: string;
   authorizedName?: string;
   authorizedNameEN?: string;
+  code?: 'string';
   file?: {
     name?: string;
     group?: string;
@@ -129,7 +155,7 @@ export type CustomerCreate = {
   customerBranch?: (CustomerBranchCreate & {
     id?: string;
     branchCode?: string;
-    customerCode?: string;
+    codeCustomer?: string;
   })[];
   selectedImage?: string;
   status?: Status;
@@ -145,7 +171,7 @@ export type CustomerUpdate = {
   customerBranch?: (CustomerBranchCreate & {
     id?: string;
     branchCode?: string;
-    customerCode?: string;
+    codeCustomer?: string;
   })[];
   image?: File;
   registeredBranchId: string;