diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index 7800ae3e..8c7b4fd7 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -1,20 +1,30 @@
 <script setup lang="ts">
-import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
-import { ref } from 'vue';
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
+const citizenId = defineModel<string | undefined>('citizenId', {
+  required: true,
+});
+const legalPersonNo = defineModel<string | undefined>('legalPersonNo', {
+  required: true,
+});
+const branchCode = defineModel<string | undefined>('branchCode', {
+  required: true,
+});
+// const customerCode = defineModel<string | undefined>('customerCode', {
+//   required: true,
+// });
+
+const registerName = defineModel<string | undefined>('registerName', {
+  required: true,
+});
+const registerNameEN = defineModel<string>('registerNameEN');
 
-const id = defineModel<string>('id');
-const branchNo = defineModel<number>('branchNo');
-const code = defineModel<string>('code');
-const taxNo = defineModel<string | null>('taxNo');
-const name = defineModel<string>('name');
-const nameEN = defineModel<string>('nameEn');
-const registerName = defineModel<string>('registerName');
 const registerDate = defineModel<Date | null>('registerDate');
 const authorizedCapital = defineModel<string>('authorizedCapital');
 
-const test = ref<string>('-');
-
 defineProps<{
+  index: string;
+  customerName?: string;
   code?: string;
   readonly?: boolean;
   prefixId?: string;
@@ -34,46 +44,33 @@ defineProps<{
         class="col-12 col-md-3"
         :label="$t('customer.form.legalPersonNo')"
         for="input-legal-person-no"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        v-model="legalPersonNo"
       />
 
       <q-input
         lazy-rules="ondemand"
         dense
         outlined
-        :readonly="readonly"
+        disable
         hide-bottom-space
         class="col-12 col-md-3"
-        :label="$t('customer.form.branchCode')"
         for="input-branch-code"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        :label="$t('customer.form.branchCode')"
+        :readonly="readonly"
+        :model-value="`${branchCode}${index}`"
       />
 
       <q-input
         lazy-rules="ondemand"
         dense
         outlined
-        :readonly="readonly"
         hide-bottom-space
+        disable
         class="col-12 col-md-3"
-        :label="$t('customer.form.customerCode')"
         for="input-customer-code"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        :readonly="readonly"
+        :label="$t('customer.form.customerCode')"
+        :model-value="customerName"
       />
 
       <q-input
@@ -85,12 +82,7 @@ defineProps<{
         class="col-12 col-md-3"
         :label="$t('customer.form.legalPersonCode')"
         for="input-legal-person-code"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        :model-value="legalPersonNo"
       />
 
       <q-input
@@ -102,12 +94,7 @@ defineProps<{
         class="col-12 col-md-6"
         :label="$t('customer.form.registerName')"
         for="input-register-name"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        v-model="registerName"
       />
 
       <q-input
@@ -119,12 +106,7 @@ defineProps<{
         class="col-12 col-md-6"
         :label="$t('customer.form.registerNameEN')"
         for="input-register-name-en"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        v-model="registerNameEN"
       />
 
       <q-input
@@ -136,202 +118,57 @@ defineProps<{
         class="col-12 col-md-2"
         :label="$t('customer.form.authorizedCapital')"
         for="input-authorized-capital"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        v-model="authorizedCapital"
       />
 
-      <q-input
-        lazy-rules="ondemand"
-        dense
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-2"
+      <DatePicker
+        v-model="registerDate"
+        :id="`${prefixId}-input-register-date`"
         :label="$t('customer.form.registerDate')"
-        for="input-register-date"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
-      />
-
-      <q-input
-        lazy-rules="ondemand"
-        dense
-        outlined
         :readonly="readonly"
-        hide-bottom-space
-        class="col-12 col-md-2"
-        :label="$t('customer.form.registerCompanyName')"
-        for="input-register-company-name"
-        :model-value="test"
-        :rules="[
-          (val: string) =>
-            (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-            $t('formDialogInputHqAbbreviation'),
-        ]"
+        clearable
       />
     </template>
 
-    <template v-if="customerType === 'PERS'"></template>
-    <!-- <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="!!id || readonly"
-      hide-bottom-space
-      :label="$t('customerBranch.form.no')"
-      v-model="branchNo"
-      :for="`${prefixId}-input-branch-branch-no`"
-      type="number"
-      class="col-12 col-md-2"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      readonly
-      hide-bottom-space
-      :label="$t('customerBranch.form.code')"
-      :model-value="code || '-'"
-      :for="`${prefixId}-input-branch-branch-code`"
-      class="col-12 col-md-4"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      :label="$t('customerBranch.form.taxNo')"
-      v-model="taxNo"
-      :for="`${prefixId}-input-branch-tax-no`"
-      type="number"
-      class="col-12 col-md-4"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      :label="$t('customerBranch.form.name')"
-      v-model="name"
-      :for="`${prefixId}-input-branch-tax-no`"
-      class="col-12 col-md-6"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      :label="$t('customerBranch.form.nameEN')"
-      v-model="nameEN"
-      :for="`${prefixId}-input-branch-tax-no`"
-      class="col-12 col-md-6"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      v-if="customerType === 'CORP'"
-      :readonly="readonly"
-      hide-bottom-space
-      :label="$t('customerBranch.form.registerName')"
-      v-model="registerName"
-      :for="`${prefixId}-input-branch-register-name`"
-      class="col-12 col-md-4"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      v-if="customerType === 'CORP'"
-      :label="$t('customerBranch.form.authorizedCapital')"
-      v-model="authorizedCapital"
-      :for="`${prefixId}-input-branch-authorized-capital`"
-      class="col-12 col-md-4"
-    />
-    <VueDatePicker
-      :id="`${prefixId}-picker-date-register-date`"
-      :teleport="true"
-      utc
-      v-if="customerType === 'CORP'"
-      auto-apply
-      v-model="registerDate"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-4 col-12"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-start-date`"
-          :id="`${prefixId}-input-start-date`"
-          :label="$t('customerBranch.form.registerDate')"
-          dense
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            registerDate
-              ? readonly
-                ? dateFormat(registerDate)
-                : dateFormat(registerDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (readonly && v && v.toString().length === 10) {
-                const _date = parseAndFormatDate(v, $i18n.locale);
-                if (_date) {
-                  registerDate?.setDate(_date.getDate());
-                  registerDate?.setMonth(_date.getMonth());
-                  registerDate?.setFullYear(_date.getFullYear());
-                } else {
-                  registerDate = null;
-                }
-              }
-            }
-          "
-        >
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="primary"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="!registerDate && readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click="registerDate = null"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker> -->
+    <template v-if="customerType === 'PERS'">
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :disable="index !== '0'"
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.cardNumber')"
+        for="input-legal-person-no"
+        v-model="citizenId"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :disable="!readonly"
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.branchCode')"
+        for="input-branch-code"
+        :model-value="`${branchCode}${index}`"
+      />
+
+      <q-input
+        lazy-rules="ondemand"
+        dense
+        outlined
+        :disable="!readonly"
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-3"
+        :label="$t('customer.form.customerCode')"
+        for="input-customer-code"
+        :model-value="customerName"
+      />
+    </template>
   </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 a1f12686..703fc02c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -9,7 +9,6 @@ import EmployerFormAttachment from './EmployerFormAttachment.vue';
 import {
   SaveButton,
   EditButton,
-  CancelButton,
   DeleteButton,
   UndoButton,
 } from 'components/button';
@@ -28,6 +27,8 @@ defineEmits<{
 }>();
 
 defineProps<{
+  index: number;
+  customerName: string;
   readonly?: boolean;
   prefixId?: string;
   actionDisabled?: boolean;
@@ -39,9 +40,13 @@ defineProps<{
   <span
     class="col-12 text-weight-bold row items-center q-mb-sm"
     :style="{ opacity: actionDisabled ? '.5' : undefined }"
-    :id="`form-branch-customer-no-${item.branchNo}`"
+    :id="`form-branch-customer-no-${index}`"
   >
-    {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
+    {{
+      index === 0
+        ? $t('customer.form.headQuarters.title')
+        : $t('customer.form.branch.title', { name: index || 0 })
+    }}
     <EditButton
       icon-only
       v-if="readonly"
@@ -93,16 +98,19 @@ defineProps<{
       <q-tab-panels v-model="tab">
         <q-tab-panel name="main">
           <EmployerFormAbout
+            :index="index.toString()"
             :readonly="readonly"
             :customer-type="customerType"
+            :customer-name="customerName"
+            v-model:citizen-id="item.citizenId"
             v-model:id="item.id"
-            v-model:branch-no="item.branchNo"
-            v-model:tax-no="item.taxNo"
-            v-model:code="item.code"
-            v-model:name="item.name"
-            v-model:name-en="item.nameEN"
-            v-model:registered-name="item.registerName"
-            v-model:registered-date="item.registerDate"
+            v-model:legal-person-no="item.legalPersonNo"
+            v-model:branch-code="item.code"
+            v-model:customer-code="item.customerCode"
+            v-model:register-company-name="item.registerCompanyName"
+            v-model:register-name="item.registerName"
+            v-model:register-name-en="item.registerNameEN"
+            v-model:register-date="item.registerDate"
             v-model:authorized-capital="item.authorizedCapital"
           />
         </q-tab-panel>
@@ -114,6 +122,8 @@ defineProps<{
             :readonly="readonly"
             outlined
             :title="$t('form.address')"
+            v-model:workplace="item.workplace"
+            v-model:workplace-en="item.workplaceEN"
             v-model:address="item.address"
             v-model:addressEN="item.addressEN"
             v-model:province-id="item.provinceId"
@@ -130,8 +140,8 @@ defineProps<{
             :prefix-id="prefixId || 'employer'"
             :readonly="readonly"
             v-model:employment-office="item.employmentOffice"
-            v-model:bussiness-type="item.bussinessType"
-            v-model:bussiness-type-en="item.bussinessTypeEN"
+            v-model:bussiness-type="item.businessType"
+            v-model:bussiness-type-en="item.businessTypeEN"
             v-model:job-position="item.jobPosition"
             v-model:job-position-en="item.jobPositionEN"
             v-model:job-description="item.jobDescription"