diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
index 991198ed..94feabf8 100644
--- a/src/i18n/eng/index.ts
+++ b/src/i18n/eng/index.ts
@@ -366,6 +366,7 @@ export default {
     table: {
       orderNumber: 'No.',
       fullname: 'Full Name',
+      titleName: 'Name',
       businessTypePure: 'Business Type',
       jobPosition: 'Job Position',
       address: 'Address',
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
index c02f94c9..1da30055 100644
--- a/src/i18n/tha/index.ts
+++ b/src/i18n/tha/index.ts
@@ -366,6 +366,7 @@ export default {
     table: {
       orderNumber: 'ลําดับ',
       fullname: 'ชื่อ-นามสกุล',
+      titleName: 'ชื่อ บริษัท/นิติบุคคล',
       businessTypePure: 'ประเภทกิจการ',
       jobPosition: 'ตำแหน่งงาน',
       address: 'ที่อยู่',
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 367125a8..ad02b9d8 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -914,7 +914,16 @@ const emptyCreateDialog = ref(false);
                 class="q-ml-sm col"
                 :options="
                   currentTab === 'employer'
-                    ? fieldDisplayCustomer
+                    ? gridView
+                      ? fieldDisplayCustomer.filter((v) => {
+                          return (
+                            v.value !== 'orderNumber' &&
+                            v.value !== 'titleName' &&
+                            v.value !== 'address' &&
+                            v.value !== 'contactName'
+                          );
+                        })
+                      : fieldDisplayCustomer
                     : fieldDisplayEmployee
                 "
                 :display-value="$t('general.displayField')"
@@ -1176,7 +1185,10 @@ const emptyCreateDialog = ref(false);
                           }}
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('fullname')">
+                        <q-td
+                          v-if="fieldSelected.includes('titleName')"
+                          style="padding-block: 7px; padding-inline: 0px"
+                        >
                           <div class="row items-center">
                             <div
                               class="q-mr-sm"
@@ -1238,7 +1250,7 @@ const emptyCreateDialog = ref(false);
                                 ? optionStore.mapOption(
                                     props.row.branch[0].businessType,
                                   )
-                                : ''
+                                : '-'
                               : '-'
                           }}
                         </q-td>
@@ -1250,21 +1262,29 @@ const emptyCreateDialog = ref(false);
                                 ? optionStore.mapOption(
                                     props.row.branch[0].jobPosition,
                                   )
-                                : ''
+                                : '-'
                               : '-'
                           }}
                         </q-td>
 
-                        <q-td v-if="fieldSelected.includes('officeTel')">
+                        <q-td v-if="fieldSelected.includes('address')">
                           {{
                             props.row.branch.length !== 0
-                              ? props.row.branch[0].officeTel !== null
-                                ? props.row.branch[0].officeTel
-                                : ''
+                              ? props.row.branch[0].address !== null
+                                ? `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} จ.${props.row.branch[0].province.name} อ.${props.row.branch[0].district.name} ต.${props.row.branch[0].subDistrict.name} ${props.row.branch[0].subDistrict.zipCode}`
+                                : '-'
                               : '-'
                           }}
                         </q-td>
 
+                        <q-td v-if="fieldSelected.includes('contactName')">
+                          {{ props.row.branch[0]?.contactName || '-' }}
+                        </q-td>
+
+                        <q-td v-if="fieldSelected.includes('officeTel')">
+                          {{ props.row.branch[0]?.officeTel || '-' }}
+                        </q-td>
+
                         <q-td>
                           <q-btn
                             dense
@@ -1423,12 +1443,7 @@ const emptyCreateDialog = ref(false);
                                   : props.row.branch[0]?.firstName +
                                       ' ' +
                                       props.row.branch[0]?.lastName || '-',
-                            taxNo: 'asdasd',
-                            branchLabelTel: 'asdas',
-                            contactName: 'zxczxcz',
-                            branchImgUrl: `/customer/${props.row.id}/image/${props.row.selectedImage}`,
                           }"
-                          :badge-field="['branchLabelStatus']"
                           :inactive="props.row.status === 'INACTIVE'"
                           :field-selected="
                             fieldSelected.filter((v) => {
@@ -1452,8 +1467,8 @@ const emptyCreateDialog = ref(false);
                                 class="absolute-bottom-right no-padding"
                                 style="
                                   border-radius: 50%;
-                                  min-width: 11.31px;
-                                  min-height: 11.31px;
+                                  min-width: 10px;
+                                  min-height: 10px;
                                 "
                                 :style="{
                                   background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
@@ -1469,6 +1484,22 @@ const emptyCreateDialog = ref(false);
                                 padding-block: var(--size-2);
                               "
                             >
+                              <div class="col-12 q-py-sm row">
+                                <span class="col-4 app-text-muted">
+                                  {{
+                                    props.row.customerType === 'CORP'
+                                      ? $t('customer.form.legalPersonCode')
+                                      : $t('customer.form.cardNumber')
+                                  }}
+                                </span>
+                                <span class="col">
+                                  {{
+                                    props.row.customerType === 'CORP'
+                                      ? props.row.branch[0]?.legalPersonNo
+                                      : props.row.branch[0]?.citizenId
+                                  }}
+                                </span>
+                              </div>
                               <div
                                 class="col-12 q-py-sm row"
                                 v-for="key in fieldSelected
@@ -1479,7 +1510,10 @@ const emptyCreateDialog = ref(false);
                                   })
                                   .filter((v) => {
                                     return (
-                                      v !== 'orderNumber' && v !== 'fullname'
+                                      v !== 'orderNumber' &&
+                                      v !== 'titleName' &&
+                                      v !== 'address' &&
+                                      v !== 'contactName'
                                     );
                                   })"
                                 :key="key"
@@ -1927,6 +1961,7 @@ const emptyCreateDialog = ref(false);
                 {
                   name: $t('customer.form.group.branch'),
                   anchor: 'form-branch-customer-branch',
+                  useBtn: true,
                 },
                 ...(customerFormData.customerBranch?.map((v, i) => ({
                   name:
@@ -1945,7 +1980,21 @@ const emptyCreateDialog = ref(false);
                 foreground: 'var(--blue-6)',
               }"
               scroll-element="#customer-form-content"
-            />
+            >
+              <template v-slot:btn-form-branch-customer-branch>
+                <AddButton
+                  iconOnly
+                  type="button"
+                  @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                  v-if="
+                    customerFormState.branchIndex === -1 &&
+                    !!customerFormState.editCustomerId &&
+                    customerFormState.dialogType !== 'create'
+                  "
+                  :disabled="!customerFormState.readonly"
+                />
+              </template>
+            </SideMenu>
           </div>
         </div>
         <div
@@ -2004,18 +2053,6 @@ const emptyCreateDialog = ref(false);
                 style="background-color: var(--surface-3)"
               />
               <span>{{ $t('customer.form.group.branch') }}</span>
-              <AddButton
-                icon-only
-                type="button"
-                class="q-ml-sm"
-                @click="customerFormStore.addCurrentCustomerBranch()"
-                v-if="
-                  customerFormState.branchIndex === -1 &&
-                  !!customerFormState.editCustomerId &&
-                  customerFormState.dialogType !== 'create'
-                "
-                :disabled="!customerFormState.readonly"
-              />
             </div>
 
             <template
@@ -2471,7 +2508,6 @@ const emptyCreateDialog = ref(false);
               v-model:provinceId="currentFromDataEmployee.provinceId"
               v-model:districtId="currentFromDataEmployee.districtId"
               v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
-              v-model:zipCode="currentFromDataEmployee.zipCode"
               employee
               dense
               class="q-mb-xl"
@@ -2935,13 +2971,13 @@ const emptyCreateDialog = ref(false);
       () => {
         if (customerFormStore.isFormDataDifferent()) {
           customerConfirmUnsave();
-          return false;
+          return true;
         } else {
           fetchListCustomer();
           customerFormState.branchIndex = -1;
           customerFormStore.resetForm(true);
         }
-        return false;
+        return true;
       }
     "
   >
@@ -3011,13 +3047,10 @@ const emptyCreateDialog = ref(false);
                     name: $t('form.field.basicInformation'),
                     anchor: 'form-basic-info-customer',
                   },
-                  {
-                    name: $t('customerBranch.tab.attachment'),
-                    anchor: 'form-upload-file-customer',
-                  },
                   {
                     name: $t('customer.form.group.branch'),
                     anchor: 'form-branch-customer-branch',
+                    useBtn: true,
                   },
 
                   ...(customerFormData.customerBranch?.map((v, i) => ({
@@ -3037,7 +3070,21 @@ const emptyCreateDialog = ref(false);
                   foreground: 'var(--blue-6)',
                 }"
                 scroll-element="#customer-form-content"
-              />
+              >
+                <template v-slot:btn-form-branch-customer-branch>
+                  <AddButton
+                    iconOnly
+                    type="button"
+                    @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                    v-if="
+                      customerFormState.branchIndex === -1 &&
+                      !!customerFormState.editCustomerId &&
+                      customerFormState.dialogType !== 'create'
+                    "
+                    :disabled="!customerFormState.readonly"
+                  />
+                </template>
+              </SideMenu>
             </div>
           </div>
 
@@ -3117,18 +3164,6 @@ const emptyCreateDialog = ref(false);
                   style="background-color: var(--surface-3)"
                 />
                 <span>{{ $t('customer.form.group.branch') }}</span>
-                <AddButton
-                  icon-only
-                  type="button"
-                  class="q-ml-sm"
-                  @click="customerFormStore.addCurrentCustomerBranch()"
-                  v-if="
-                    customerFormState.branchIndex === -1 &&
-                    !!customerFormState.editCustomerId &&
-                    customerFormData.status !== 'INACTIVE'
-                  "
-                  :disabled="!customerFormState.readonly"
-                />
               </div>
 
               <template
@@ -3578,7 +3613,6 @@ const emptyCreateDialog = ref(false);
                 v-model:provinceId="currentFromDataEmployee.provinceId"
                 v-model:districtId="currentFromDataEmployee.districtId"
                 v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
-                v-model:zipCode="currentFromDataEmployee.zipCode"
                 v-model:sameWithEmployer="
                   employeeFormState.formDataEmployeeSameAddr
                 "
diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
index a34a9e23..5a1b70f0 100644
--- a/src/pages/03_customer-management/constant.ts
+++ b/src/pages/03_customer-management/constant.ts
@@ -255,10 +255,10 @@ export const columnsCustomer = [
   },
 
   {
-    name: 'fullname',
+    name: 'titleName',
     align: 'left',
-    label: 'customer.table.fullname',
-    field: 'fullname',
+    label: 'customer.table.titleName',
+    field: 'titleName',
     sortable: true,
   },
 
@@ -278,6 +278,22 @@ export const columnsCustomer = [
     sortable: true,
   },
 
+  {
+    name: 'address',
+    align: 'center',
+    label: 'customer.table.address',
+    field: 'address',
+    sortable: true,
+  },
+
+  {
+    name: 'contactName',
+    align: 'center',
+    label: 'customer.table.contactName',
+    field: 'contactName',
+    sortable: true,
+  },
+
   {
     name: 'officeTel',
     align: 'left',