diff --git a/src/components/03_customer-management/BranchCardCustomer.vue b/src/components/03_customer-management/BranchCardCustomer.vue
index 85cd55d0..de7dce26 100644
--- a/src/components/03_customer-management/BranchCardCustomer.vue
+++ b/src/components/03_customer-management/BranchCardCustomer.vue
@@ -10,6 +10,7 @@ defineProps<{
     telephone: string;
     businessTypePure: string;
     totalEmployee: number;
+    code: string;
   };
   metadata?: unknown;
   badgeField?: string[];
@@ -48,7 +49,7 @@ defineProps<{
       </div>
       <div class="branch-card__name">
         <b>{{ data.branchName }}</b>
-        <small class="branch-card__code">{{ data.branchName }}</small>
+        <small class="branch-card__code">{{ data.code }}</small>
       </div>
 
       <div class="branch-card__action">
@@ -75,18 +76,25 @@ defineProps<{
       "
     />
     <div
-      v-for="key in fieldSelected?.sort() || [
-        'customerBranchFormTab',
-        'branchName',
+      v-for="key in fieldSelected || [
         'address',
         'telephone',
         'businessTypePure',
         'totalEmployee',
       ]"
+      :key="key"
       class="branch-card__data"
     >
-      <div>{{ $t(key) }}</div>
-      <div>{{ data[key as keyof typeof data] }}</div>
+      <div>
+        {{
+          fieldSelected
+            ? $t(key)
+            : key !== 'address' && key !== 'telephone'
+              ? $t(`customer.table.${key}`)
+              : $t(`general.${key}`)
+        }}
+      </div>
+      <div>{{ data[key as keyof typeof data] || '-' }}</div>
     </div>
   </div>
 </template>
@@ -174,7 +182,7 @@ defineProps<{
   }
 
   &.branch-card__pers {
-    --_branch-card-bg: var(--pink-6-hsl);
+    --_branch-card-bg: var(--teal-10-hsl);
   }
 
   &.branch-card__corp {
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index 5451fdbc..156dd372 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -167,6 +167,28 @@ const branchFieldSelected = ref<
   )[]
 >(fieldDisplay.value);
 
+function getCustomerName(
+  record: CustomerBranch,
+  opts?: {
+    locale?: string;
+  },
+) {
+  const customer = record;
+
+  return (
+    {
+      ['CORP']: {
+        ['eng']: customer.registerNameEN,
+        ['tha']: customer.registerName,
+      }[opts?.locale || 'eng'],
+      ['PERS']: {
+        ['eng']: `${useOptionStore().mapOption(customer?.namePrefix)} ${customer?.firstNameEN} ${customer?.lastNameEN}`,
+        ['tha']: `${useOptionStore().mapOption(customer?.namePrefix)} ${customer?.firstName} ${customer?.lastName}`,
+      }[opts?.locale || 'eng'],
+    }[customer.customer.customerType] || '-'
+  );
+}
+
 async function deleteBranchById(id: string) {
   return await new Promise((resolve) => {
     dialog({
@@ -229,8 +251,6 @@ async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
     visa: true,
   });
 
-  console.log(res);
-
   if (res) {
     listEmployee.value = res.data.result;
   }
@@ -407,7 +427,6 @@ watch(
     <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
     <div style="width: 100%" v-else>
-      {{ console.log(branch) }}
       <q-table
         v-if="branch"
         flat
@@ -454,7 +473,13 @@ watch(
                 >
                   <div
                     class="branch-card__icon"
-                    :class="{ 'branch-card__dark': $q.dark.isActive }"
+                    :class="{
+                      dark: $q.dark.isActive,
+                      'branch-card__pers':
+                        props.row.customer.customerType === 'PERS',
+                      'branch-card__corp':
+                        props.row.customer.customerType === 'CORP',
+                    }"
                   >
                     <q-icon
                       size="md"
@@ -617,7 +642,10 @@ watch(
               :badgeField="['status']"
               :data="{
                 customerBranchFormTab: props.row.branchNo,
-                branchName: props.row.name,
+                code: props.row.code,
+                branchName: getCustomerName(props.row, {
+                  locale: $i18n.locale,
+                }),
                 address:
                   $i18n.locale === 'eng'
                     ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
@@ -950,8 +978,14 @@ watch(
   position: relative;
   transform: rotate(45deg);
 
-  &.branch-card__dark {
-    --_branch-card-bg: var(--pink-5-hsl);
+  &.branch-card__pers {
+    --_branch-card-bg: var(--teal-10-hsl);
+  }
+  &.branch-card__corp {
+    --_branch-card-bg: var(--violet-11-hsl);
+    &.dark {
+      --_branch-card-bg: var(--violet-10-hsl);
+    }
   }
 
   &::after {