diff --git a/public/option/option.json b/public/option/option.json
index e7231a66..b74ca61c 100644
--- a/public/option/option.json
+++ b/public/option/option.json
@@ -1747,7 +1747,7 @@
         "value": "fee"
       },
       {
-        "label": "ค่าดำเนินการ",
+        "label": "ค่าดำเนินงาน",
         "value": "processingFee"
       }
     ]
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 82eeff62..f00585af 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -9,6 +9,9 @@ import {
   SaveButton,
   UndoButton,
 } from 'components/button';
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
 
 const optionsBranch = defineModel<{ id: string; name: string }[]>(
   'optionsBranch',
@@ -29,7 +32,7 @@ const customerBranch = defineModel<{
 const nrcNo = defineModel<string>('nrcNo');
 const code = defineModel<string>('code');
 
-defineProps<{
+const props = defineProps<{
   noAction?: boolean;
   title?: string;
   dense?: boolean;
@@ -56,6 +59,31 @@ let branchFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+function listBranch(customerCode: string) {
+  if (!props.employeeOwnerOption) return '';
+  const groupedLists: { [key: string]: CustomerBranch } =
+    props.employeeOwnerOption.reduce((acc, item) => {
+      const code = item.codeCustomer;
+      if (!acc[code]) {
+        acc[code] = [];
+      }
+      acc[code].push(item);
+      return acc;
+    }, {});
+  const list: CustomerBranch[] = groupedLists[customerCode];
+  const names = list.map((v) => {
+    return v.customer.customerType === 'CORP'
+      ? locale.value === 'eng'
+        ? v.registerNameEN
+        : v.registerName
+      : locale.value === 'eng'
+        ? `${v.firstNameEN} ${v.lastNameEN}`
+        : `${v.firstName} ${v.lastName}`;
+  });
+
+  return names.join(' / ');
+}
+
 watch(
   () => optionsBranch.value,
   () => {
@@ -160,8 +188,6 @@ onMounted(() => {
         ]"
       >
         <template v-slot:option="scope">
-          <!-- {{ console.log(scope.opt) }} -->
-
           <q-item
             v-if="scope.opt"
             v-bind="scope.itemProps"
@@ -173,7 +199,12 @@ onMounted(() => {
             <div class="q-mt-sm">
               <div>
                 <span v-if="scope.opt.customer.customerType">
-                  {{ `${scope.opt.code} ${$t('general.name')}` }}:
+                  {{ scope.opt.code }}
+                  {{
+                    scope.opt.customer.customerType === 'CORP'
+                      ? $t('customer.form.registerName')
+                      : $t('customer.form.ownerName')
+                  }}:
                   {{
                     scope.opt.customer.customerType === 'CORP'
                       ? scope.opt.customerName
@@ -187,24 +218,15 @@ onMounted(() => {
 
               <div class="text-caption app-text-muted-2 q-mb-xs">
                 <span v-if="scope.opt.customer" class="col column">
-                  {{ $t('customerEmployee.form.employerSelect.branchName') }}:
-                  {{
-                    scope.opt.customer.customerType === 'CORP'
-                      ? $i18n.locale === 'eng'
-                        ? scope.opt.registerNameEN
-                        : scope.opt.registerName
-                      : $i18n.locale === 'eng'
-                        ? `${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                          '-'
-                        : `${scope.opt.firstName} ${scope.opt.lastName}` || '-'
-                  }}
+                  {{ $t('customerBranch.form.title') }}:
+                  {{ listBranch(scope.opt.codeCustomer) }}
                 </span>
                 <span v-if="scope.opt.province" class="col">
                   {{ $t('general.address') }}
                   {{
                     $i18n.locale === 'eng'
                       ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.street')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
+                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
                   }}
                   {{ scope.opt.subDistrict?.zipCode || '' }}
                 </span>
@@ -222,50 +244,44 @@ onMounted(() => {
           >
             <div class="q-mr-sm">
               {{ scope.opt.code }}
-              {{ $t('customerEmployee.form.employerSelect.branchName') }}:
               {{
-                $i18n.locale === 'eng'
-                  ? scope.opt.registerNameEN
-                  : scope.opt.registerName
+                scope.opt.customer.customerType === 'CORP'
+                  ? $t('customer.form.registerName')
+                  : $t('customer.form.ownerName')
+              }}:
+              {{
+                scope.opt.customer.customerType === 'CORP'
+                  ? scope.opt.customerName
+                  : $i18n.locale === 'eng'
+                    ? `${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` || '-'
+                    : `${scope.opt.firstName} ${scope.opt.lastName}` || '-'
               }}
             </div>
             <div
               class="text-caption app-text-muted-2"
               v-if="scope.opt.customer && scope.opt.province"
             >
-              {{ $t('customerEmployee.form.employerSelect.branchName') }}:
-              {{
-                $i18n.locale === 'eng'
-                  ? scope.opt.customer.firstNameEN ||
-                    '-' + ' ' + scope.opt.customer.lastNameEN
-                  : scope.opt.customer.firstName ||
-                    '-' + ' ' + scope.opt.customer.lastName
-              }}
+              {{ $t('customerBranch.form.title') }}:
+              {{ listBranch(scope.opt.codeCustomer) }}
 
               {{ $t('general.address') }}
               {{
                 $i18n.locale === 'eng'
-                  ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
-                  : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
+                  ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
+                  : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
               }}
               {{ scope.opt.subDistrict?.zipCode || '' }}
               <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-                {{ $t('customerEmployee.form.employerSelect.branchName') }}:
-                {{
-                  $i18n.locale === 'eng'
-                    ? scope.opt.customer.firstNameEN ||
-                      '-' + ' ' + scope.opt.customer.lastNameEN
-                    : scope.opt.customer.firstName ||
-                      '-' + ' ' + scope.opt.customer.lastName
-                }}
+                {{ $t('customerBranch.form.title') }}:
+                {{ listBranch(scope.opt.codeCustomer) }}
 
                 {{ $t('general.address') }}
                 {{
                   $i18n.locale === 'eng'
-                    ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
-                    : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
+                    ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
+                    : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
                 }}
-                {{ scope.opt.zipCode || '' }}
+                {{ scope.opt.subDistrict?.zipCode || '' }}
               </q-tooltip>
             </div>
           </div>
diff --git a/src/components/ButtonAddCompoent.vue b/src/components/ButtonAddCompoent.vue
index cc13f408..bfc7d2db 100644
--- a/src/components/ButtonAddCompoent.vue
+++ b/src/components/ButtonAddCompoent.vue
@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{
+  hideIcon?: boolean;
+}>();
+</script>
 
 <template>
   <q-page-sticky position="bottom-right" :offset="[8, 8]">
@@ -10,7 +14,12 @@
       class="color-btn"
     >
       <slot>
-        <q-fab-action padding="xs" color="primary" icon="mdi-account-plus" />
+        <q-fab-action
+          padding="xs"
+          color="primary"
+          icon="mdi-account-plus"
+          v-if="!hideIcon"
+        />
       </slot>
     </q-fab>
   </q-page-sticky>
diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index 7bfd283a..f8de40c7 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -32,8 +32,8 @@ export default {
     order: 'Order',
     name: 'Name',
     fullName: 'Full Name',
-    detail: 'Detail',
-    remark: 'Remark',
+    detail: '{msg} Detail',
+    remark: '{msg} Remark',
     createdAt: 'Created at',
     noData: 'No Data',
     noField: 'No Field',
@@ -80,6 +80,14 @@ export default {
     totalVatIncluded: 'Taxable amount',
     vat: 'VAT {msg}',
     totalAmount: 'Total amount',
+    specify: 'Secify {msg}',
+    noSpecify: 'No Specify{msg}',
+    noDataTable: 'There is no data displayed in this table yet.',
+    birthDate: 'Birth Date',
+    amount: 'amount {msg}',
+    numberOf: 'number of {msg}',
+    list: 'List of {msg}',
+    for: 'for {msg}',
   },
 
   menu: {
@@ -346,6 +354,7 @@ export default {
       issueDate: 'Issue Date',
       passportExpiryDate: 'Passport Expiry Date',
 
+      ownerName: 'Owner Name',
       firstName: 'First Name ',
       lastName: 'Last Name ',
       firstNameEN: 'First Name in English',
@@ -545,6 +554,7 @@ export default {
     },
     service: {
       title: 'Type',
+      title2: 'Service',
       totalWork: 'Total Work',
       code: 'Type Code',
       name: 'Type Name',
@@ -614,6 +624,19 @@ export default {
     amount: 'Amount',
     payDueDate: 'Pay Due Date',
     callDueDate: 'Call Due Date',
+
+    processOn: 'Process on {msg}',
+    productList: 'List of Product',
+
+    foreignRefNo: 'Alien Reference Number',
+    documentExpireDate: 'Document Expiration Date',
+
+    pricePerUnit: 'Unit price',
+    sumPrice: 'Total price',
+    tax: 'Tax',
+    calTax: 'Calculate taxes',
+    allProduct: 'List of all products',
+
     type: {
       all: 'All',
       fullAmountCash: 'Full Amount Cash',
@@ -705,6 +728,8 @@ export default {
       relationCustomerNotFound: 'Customer cannot be found.',
       relationCustomerBranchNotFound: 'Customer Branch cannot be found.',
       sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
+      productNameExists:
+        'Product with the same name already exists. If you want to create with this name please select another code.',
       validateError: 'Validate Error',
       codeMisMatch: 'Code Mismatch',
       userExists: 'User already exits.',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index ce34f5a6..4de8efb1 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -32,8 +32,8 @@ export default {
     order: 'ลำดับ',
     name: 'ชื่อ',
     fullName: 'ชื่อ-สกุล',
-    detail: 'รายละเอียด',
-    remark: 'หมายเหตุ',
+    detail: 'รายละเอียด{msg}',
+    remark: 'หมายเหตุ{msg}',
     createdAt: 'สร้างเมื่อ',
     noData: 'ไม่มีข้อมูล',
     noField: 'ไม่มีฟิลด์',
@@ -85,6 +85,9 @@ export default {
     noDataTable: 'ยังไม่มีข้อมูลแสดงในตารางนี้',
     birthDate: 'วันเกิด',
     amount: 'จำนวน {msg}',
+    numberOf: 'จำนวน{msg}',
+    list: 'รายการ{msg}',
+    for: 'เพื่อ{msg}',
   },
 
   menu: {
@@ -350,6 +353,7 @@ export default {
       issueDate: 'วันที่ออกหนังสือ',
       passportExpiryDate: 'วันหiมดอายุหนังสือเดินทาง',
 
+      ownerName: 'ชื่อเจ้าของ',
       firstName: 'ชื่อ ',
       lastName: 'นามสกุล ',
       firstNameEN: 'ชื่อ ภาษาอังกฤษ',
@@ -535,18 +539,19 @@ export default {
       title: 'กลุ่มสินค้าและบริการ',
       withName: 'กลุ่ม {name}',
       addTitle: 'เพิ่มกลุ่มสินค้าและบริการ',
-      code: 'รหัสสินค้าและบริการ',
-      name: 'ชื่อสินค้าและบริการ',
+      code: 'รหัสกลุ่มสินค้าและบริการ',
+      name: 'ชื่อกลุ่มสินค้าและบริการ',
     },
     type: {
-      title: 'ปรเภทสินค้าและบริการ',
+      title: 'ประเภทสินค้าและบริการ',
       withName: 'ประเภท {name}',
       addTitle: 'เพิ่มประเภทสินค้าและบริการ',
-      code: 'รหัสสินค้าและบริการ',
-      name: 'ชื่อสินค้าและบริการ',
+      code: 'รหัสกลุ่มสินค้าและบริการ',
+      name: 'ชื่อกลุ่มสินค้าและบริการ',
     },
     service: {
       title: 'ประเภท',
+      title2: 'บริการ',
       totalWork: 'งานทั้งหมด',
       code: 'รหัสประเภท',
       name: 'ชื่อประเภท',
@@ -571,7 +576,7 @@ export default {
     product: {
       title: 'สินค้าและบริการ',
       code: 'รหัสสินค้าและบริการ',
-      name: 'ชื่อสินค้าและบริการ',
+      name: 'ชื่อกลุ่มสินค้าและบริการ',
       registeredBranch: 'สาขาที่ลงทะเบียน',
       noProduct: 'ยังไม่มีสินค้าและบริการ',
       allProduct: 'สินค้าและบริการทั้งหมด',
@@ -627,8 +632,9 @@ export default {
     pricePerUnit: 'ราคาต่อหน่วย',
     sumPrice: 'ราคารวม',
     tax: 'ภาษี',
-    calVat: 'คิดภาษี',
+    calTax: 'คิดภาษี',
     allProduct: 'รายการสินค้าทั้งหมด',
+
     type: {
       all: 'ทั้งหมด',
       fullAmountCash: 'เงินสดเต็มจำนวน',
@@ -717,6 +723,8 @@ export default {
       relationCustomerNotFound: 'ไม่พบลูกค้า',
       relationCustomerBranchNotFound: 'ไม่พบสาขาลูกค้า',
       sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
+      productNameExists:
+        'สินค้าที่มีชื่อเดียวกันมีในระบบแล้ว หากคุณต้องการสร้างด้วยชื่อนี้โปรดเลือกรหัสอื่น',
       validateError: 'เกิดข้อผิดพลาดจากการตรวจสอบ',
       codeMisMatch: 'รหัสไม่ตรงกัน',
       userExists: 'ชื่อผู้ใช้นี้มีอยู่ในระบบอยู่แล้ว',
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 60ba60bf..08e1dda7 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1446,7 +1446,7 @@ watch(currentHq, () => {
                         <q-td v-if="fieldSelected.includes('branchLabelTel')">
                           {{
                             props.row.contact !== undefined
-                              ? props.row.contact[0]?.telephoneNo || '-'
+                              ? props.row.telephoneNo || '-'
                               : '-'
                           }}
                         </q-td>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e78c2e87..d523d33a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1188,7 +1188,6 @@ const emptyCreateDialog = ref(false);
 
                         <q-td
                           v-if="fieldSelected.includes('titleName')"
-                          style="max-width: 200px"
                           class="ellipsis"
                         >
                           <div class="row items-center no-wrap">
@@ -2337,7 +2336,12 @@ const emptyCreateDialog = ref(false);
         v-model:current-tab="employeeFormState.currentTab"
         v-model:toggle-status="currentFromDataEmployee.status"
         fallbackCover="/images/employee-banner.png"
-        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
+        :img="
+          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+            refreshImageState ? `?ts=${Date.now()}` : '',
+          ) || null
+        "
+        :fallbackImg="'/images/employee-avatar.png'"
         :tabs-list="
           [
             {
@@ -3433,6 +3437,7 @@ const emptyCreateDialog = ref(false);
                   "
                 >
                   <EmployerFormBranch
+                    prefixId="info"
                     v-if="!!customerFormState.editCustomerId"
                     :index="idx"
                     :hide-action="customerFormData.status === 'INACTIVE'"
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index 1556b48b..83c785b6 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -136,7 +136,6 @@ watch(
           :label="$t('customer.form.employerName')"
           for="input-legal-person-no"
           v-model="customerName"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
 
         <q-input
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4194d722..98bcaa40 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1311,8 +1311,9 @@ async function enterGroup(
   currentIdGrop.value = id;
   currentNoAction.value = status === 'INACTIVE';
   pathTypeName.value = name;
-  await fetchListOfService();
-  await fetchListOfProduct();
+
+  if (productMode.value === 'service') await fetchListOfService();
+  if (productMode.value === 'product') await fetchListOfProduct();
   if (toService) await enterNext('service');
   else productMode.value = 'group';
 
@@ -1349,6 +1350,8 @@ async function enterNext(type: 'service' | 'product') {
     filterStat.value.push('group');
     filterStat.value.push('service');
   }
+  if (productMode.value === 'service') await fetchListOfService();
+  if (productMode.value === 'product') await fetchListOfProduct();
   flowStore.rotate();
 }
 
@@ -1507,55 +1510,23 @@ watch(
 
 <template>
   <ButtonAddComponent
+    hide-icon
     v-if="actionDisplay && !currentNoAction"
     style="z-index: 999"
-  >
-    <q-fab-action
-      v-if="productMode === 'group'"
-      id="btn-add-product-group"
-      style="color: white; background-color: hsla(var(--pink-6-hsl))"
-      padding="xs"
-      icon="mdi-folder-multiple-plus-outline"
-      :label="$t('productService.group.addTitle')"
-      external-label
-      label-position="left"
-      @click="
-        async () => {
+    @click="
+      async () => {
+        if (productMode === 'group') {
           clearFormGroup();
           await fetchListOfOptionBranch();
           dialogInputForm = true;
         }
-      "
-    />
-    <q-fab-action
-      v-if="productMode === 'product'"
-      :label="$t('productService.product.addTitle')"
-      id="btn-add-product"
-      external-label
-      label-position="left"
-      style="color: white; background-color: hsla(var(--green-11-hsl))"
-      padding="xs"
-      icon="mdi-folder-multiple-plus-outline"
-      @click="
-        async () => {
+        if (productMode === 'product') {
           productTab = 1;
           clearFormProduct();
           await fetchListOfOptionBranch();
           dialogProduct = true;
         }
-      "
-    ></q-fab-action>
-    <q-fab-action
-      v-if="productMode === 'service'"
-      :label="$t('productService.service.addTitle')"
-      id="btn-add-service"
-      external-label
-      label-position="left"
-      style="color: white; background-color: hsla(var(--orange-6-hsl))"
-      padding="xs"
-      icon="mdi-server-plus-outline"
-      @click="
-        async () => {
+        if (productMode === 'service') {
           serviceTab = 1;
           clearFormGroup();
           clearFormService();
@@ -1563,9 +1534,9 @@ watch(
           serviceTab = 1;
           dialogService = true;
         }
-      "
-    ></q-fab-action>
-  </ButtonAddComponent>
+      }
+    "
+  />
 
   <div class="full-height column no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 301a8c2d..6b7898bc 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -76,6 +76,8 @@ export type CustomerBranch = {
   customerId: string;
   id: string;
 
+  customer: Customer;
+
   status: Status;
   createdBy: string | null;
   createdAt: string;