diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index e5eb3fb9..b44f77dc 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -337,6 +337,7 @@ export default {
       workPlace: 'Workplace',
       contactName: 'Contact Name',
       contactPhone: 'Contact Phone',
+      totalEmployee: 'Total Employee',
     },
   },
 
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index 77818c74..c2e6ba65 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -337,6 +337,7 @@ export default {
       workPlace: 'สถานที่ทํางาน',
       contactName: 'ชื่อผู้ติดต่อ',
       contactPhone: 'โทรศัพท์ผู้ติดต่อ',
+      totalEmployee: 'ลูกจ้างทั้งหมด',
     },
   },
 
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index b4adb920..0513008f 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -10,7 +10,7 @@ import useOptionStore from 'stores/options';
 import { dialog } from 'stores/utils';
 
 import { Status } from 'stores/types';
-import { Employee, EmployeeHistory } from 'stores/employee/types';
+import { Employee } from 'stores/employee/types';
 import { CustomerBranch, CustomerType } from 'stores/customer/types';
 
 import { columnsEmployee } from './constant';
@@ -70,6 +70,7 @@ const pageSizeBranch = ref<number>(30);
 
 const prop = withDefaults(
   defineProps<{
+    index?: string | number;
     color?: 'purple' | 'green';
     currentCustomerName?: string;
     customerType: CustomerType;
@@ -103,47 +104,48 @@ onMounted(async () => {
 
 const columns = [
   {
-    name: 'branchLabelName',
+    name: 'branchName',
     align: 'left',
-    label: 'office',
+    label: 'general.name',
     field: 'name',
-    sortable: true,
   },
   {
-    name: 'branchLabelAddress',
+    name: 'address',
     align: 'left',
-    label: 'address',
-    field: 'address',
-    sortable: true,
+    label: 'general.address',
+    field: 'name',
   },
   {
-    name: 'branchLabelTel',
+    name: 'telephone',
     align: 'left',
-    label: 'formDialogInputTelephone',
-    field: 'telephoneNo',
+    label: 'general.telephone',
+    field: 'name',
+  },
+  {
+    name: 'businessType',
+    align: 'left',
+    label: 'customer.form.businessType',
+    field: 'name',
+  },
+  {
+    name: 'totalEmployee',
+    align: 'left',
+    label: 'customer.table.totalEmployee',
+    field: 'name',
   },
 ] satisfies QTableProps['columns'];
 
 const fieldDisplay = ref<
   (
     | 'branchName'
-    | 'customerBranchFormTab'
     | 'address'
     | 'telephone'
     | 'businessTypePure'
     | 'totalEmployee'
   )[]
->([
-  'branchName',
-  'customerBranchFormTab',
-  'address',
-  'telephone',
-  'businessTypePure',
-  'totalEmployee',
-]);
+>(['branchName', 'address', 'telephone', 'businessTypePure', 'totalEmployee']);
 const branchFieldSelected = ref<
   (
-    | 'customerBranchFormTab'
     | 'branchName'
     | 'address'
     | 'telephone'
@@ -376,16 +378,15 @@ watch([customerId, inputSearch, currentStatus], async () => {
         card-container-class="row q-col-gutter-md"
         row-key="name"
         hide-pagination
-        :visible-columns="branchFieldSelected"
       >
-        <template #header>
+        <template #header="{ cols }">
           <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
             <q-th
-              v-for="(v, i) in fieldDisplay"
+              v-for="(v, i) in cols"
               :key="v"
               :class="{ 'text-left': i === 0 }"
             >
-              {{ $t(v) }}
+              {{ $t(v.label) }}
             </q-th>
             <q-th auto-width />
           </q-tr>
@@ -433,12 +434,9 @@ watch([customerId, inputSearch, currentStatus], async () => {
               </div>
             </q-td>
             <q-td
-              v-if="branchFieldSelected.includes('customerBranchFormTab')"
+              v-if="branchFieldSelected.includes('address')"
               class="text-center"
             >
-              {{ props.row.branchNo || '-' }}
-            </q-td>
-            <q-td v-if="branchFieldSelected.includes('address')">
               {{
                 $i18n.locale === 'eng'
                   ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
@@ -709,16 +707,22 @@ watch([customerId, inputSearch, currentStatus], async () => {
             </div>
           </div>
           <EmployerFormAbout
+            :index="customerBranchFormData.code?.slice(-2) || '00'"
             class="q-mb-xl"
+            :customer-type="customerType"
+            :customer-name="currentCustomerName"
             :readonly="customerBranchFormState.dialogType === 'info'"
+            v-model:citizen-id="customerBranchFormData.citizenId"
             v-model:id="customerBranchFormData.id"
-            v-model:branch-no="customerBranchFormData.branchNo"
-            v-model:tax-no="customerBranchFormData.taxNo"
-            v-model:code="customerBranchFormData.code"
-            v-model:name="customerBranchFormData.name"
-            v-model:name-en="customerBranchFormData.nameEN"
-            v-model:registered-name="customerBranchFormData.registerName"
-            v-model:registered-date="customerBranchFormData.registerDate"
+            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
             "
@@ -775,8 +779,8 @@ watch([customerId, inputSearch, currentStatus], async () => {
             prefix-id="employer-branch"
             :readonly="customerBranchFormState.dialogType === 'info'"
             v-model:employment-office="customerBranchFormData.employmentOffice"
-            v-model:bussiness-type="customerBranchFormData.bussinessType"
-            v-model:bussiness-type-en="customerBranchFormData.bussinessTypeEN"
+            v-model:bussiness-type="customerBranchFormData.businessType"
+            v-model:bussiness-type-en="customerBranchFormData.businessTypeEN"
             v-model:job-position="customerBranchFormData.jobPosition"
             v-model:job-position-en="customerBranchFormData.jobPositionEN"
             v-model:job-description="customerBranchFormData.jobDescription"