diff --git a/src/components/03_customer-management/CustomerInfoComponent.vue b/src/components/03_customer-management/CustomerInfoComponent.vue
index 646602d3..d9118c73 100644
--- a/src/components/03_customer-management/CustomerInfoComponent.vue
+++ b/src/components/03_customer-management/CustomerInfoComponent.vue
@@ -11,6 +11,7 @@ import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import NoData from 'components/NoData.vue';
+import { QTableProps } from 'quasar';
 
 const flowStore = useFlowStore();
 
@@ -29,6 +30,7 @@ const currentCustomerUrlImage = defineModel<string | null>(
 const currentStatus = ref<Status | 'All'>('All');
 const totalBranch = ref(0);
 
+const modeView = ref(false);
 const currentPageBranch = ref<number>(1);
 const maxPageBranch = ref<number>(1);
 const pageSizeBranch = ref<number>(30);
@@ -55,6 +57,57 @@ onMounted(async () => {
   await fetchList();
 });
 
+const columns = [
+  {
+    name: 'branchLabelName',
+    align: 'left',
+    label: 'office',
+    field: 'name',
+    sortable: true,
+  },
+  {
+    name: 'branchLabelAddress',
+    align: 'left',
+    label: 'address',
+    field: 'address',
+    sortable: true,
+  },
+  {
+    name: 'branchLabelTel',
+    align: 'left',
+    label: 'formDialogInputTelephone',
+    field: 'telephoneNo',
+  },
+] satisfies QTableProps['columns'];
+
+const fieldDisplay = ref<
+  (
+    | 'branchName'
+    | 'customerBranchFormTab'
+    | 'address'
+    | 'telephone'
+    | 'businessTypePure'
+    | 'totalEmployee'
+  )[]
+>([
+  'branchName',
+  'customerBranchFormTab',
+  'address',
+  'telephone',
+  'businessTypePure',
+  'totalEmployee',
+]);
+const branchFieldSelected = ref<
+  (
+    | 'customerBranchFormTab'
+    | 'branchName'
+    | 'address'
+    | 'telephone'
+    | 'businessTypePure'
+    | 'totalEmployee'
+  )[]
+>(fieldDisplay.value);
+
 async function fetchList() {
   const result = await fetchListCustomeBranch({
     customerId: prop.customerId,
@@ -76,180 +129,343 @@ async function fetchList() {
   }
 }
 
-watch(inputSearch, async () => {
-  await fetchList();
-});
-
-watch(currentStatus, async () => {
+watch([inputSearch, currentStatus], async () => {
   await fetchList();
 });
 </script>
 
 <template>
   <div
-    class="bordered surface-1 col column surface-2 rounded no-wrap"
-    style="overflow: hidden"
+    class="row justify-between bordered-b surface-3 full-width no-wrap"
+    style="z-index: 1"
   >
-    <div
-      class="row justify-between bordered-b surface-3 full-width no-wrap"
-      style="z-index: 1"
-    >
-      <div class="row items-center col-12 col-sm">
-        <q-btn
-          round
-          icon="mdi-arrow-left"
-          flat
-          dense
-          @click="$emit('back')"
-          class="q-mr-md"
-        />
+    <div class="row items-center col-12 col-sm">
+      <q-btn
+        round
+        icon="mdi-arrow-left"
+        flat
+        dense
+        @click="$emit('back')"
+        class="q-mr-md"
+      />
 
-        <q-card-section
-          class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
-          :class="{
-            color__purple: customerType === 'CORP',
-            color__green: customerType === 'PERS',
-          }"
-          style="border-radius: 0 0 40px 40px; position: relative"
-        >
-          <q-avatar no-padding size="50px">
-            <img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
-          </q-avatar>
-        </q-card-section>
-        <div>
-          <div>{{ currentCustomerName }}</div>
-          <div class="row items-center">
-            <i
-              class="isax isax-frame5"
-              style="font-size: 1rem; color: var(--stone-6)"
-            />
-            <div class="q-px-sm">
-              {{ '10' }}
-            </div>
-            <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
-            <div class="q-px-sm">
-              {{ '2' }}
-            </div>
+      <q-card-section
+        class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
+        :class="{
+          color__purple: customerType === 'CORP',
+          color__green: customerType === 'PERS',
+        }"
+        style="border-radius: 0 0 40px 40px; position: relative"
+      >
+        <q-avatar no-padding size="50px">
+          <img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
+        </q-avatar>
+      </q-card-section>
+      <div>
+        <div>{{ currentCustomerName }}</div>
+        <div class="row items-center">
+          <i
+            class="isax isax-frame5"
+            style="font-size: 1rem; color: var(--stone-6)"
+          />
+          <div class="q-px-sm">
+            {{ '10' }}
+          </div>
+          <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
+          <div class="q-px-sm">
+            {{ '2' }}
           </div>
         </div>
       </div>
-
-      <div
-        class="row items-center justify-end q-px-md col-12 col-sm q-py-sm no-wrap"
-      >
-        <q-input
-          lazy-rules="ondemand"
-          outlined
-          dense
-          class="col-6"
-          :label="$t('search')"
-          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-          v-model="inputSearch"
-          debounce="500"
-        >
-          <template v-slot:prepend>
-            <q-icon name="mdi-magnify" />
-          </template>
-        </q-input>
-        <q-btn
-          padding="10px 16px"
-          icon="mdi-tune-vertical-variant"
-          size="sm"
-          :color="$q.dark.isActive ? 'dark' : 'white'"
-          :text-color="$q.dark.isActive ? 'white' : 'dark'"
-          class="bordered rounded q-ml-sm col-1"
-          unelevated
-        >
-          <q-menu class="bordered">
-            <q-list v-close-popup dense>
-              <q-item
-                clickable
-                class="flex items-center"
-                @click="currentStatus = 'All'"
-              >
-                {{ $t('all') }}
-              </q-item>
-              <q-item
-                clickable
-                class="flex items-center"
-                @click="currentStatus = 'ACTIVE'"
-              >
-                {{ $t('statusACTIVE') }}
-              </q-item>
-              <q-item
-                clickable
-                class="flex items-center"
-                @click="currentStatus = 'INACTIVE'"
-              >
-                {{ $t('statusINACTIVE') }}
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-      </div>
     </div>
+
     <div
-      class="row q-pa-md q-col-gutter-md col scroll"
-      :class="{
-        'justify-center': totalBranch === 0,
-        'items-center': totalBranch === 0,
-      }"
+      class="row items-center justify-end q-px-md col-12 col-sm q-py-sm no-wrap"
     >
-      <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
+      <q-input
+        lazy-rules="ondemand"
+        outlined
+        dense
+        class="col-6"
+        :label="$t('search')"
+        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+        v-model="inputSearch"
+        debounce="500"
+      >
+        <template v-slot:prepend>
+          <q-icon name="mdi-magnify" />
+        </template>
+      </q-input>
 
-      <div v-for="(br, i) in branch" :key="i" class="col-md-6 col-12">
-        <BranchCardCustomer
-          class="surface-1"
-          :inactive="br.status === 'INACTIVE'"
-          :color="customerType === 'CORP' ? 'corp' : 'pers'"
-          :badgeField="['status']"
-          :data="{
-            customerBranchFormTab: br.branchNo,
-            branchName: br.name,
-            address:
-              $i18n.locale === 'en-US'
-                ? `${br.addressEN || ''} ${br.subDistrict?.nameEN || ''} ${br.district?.nameEN || ''} ${br.province?.nameEN || ''}`
-                : `${br.address || ''} ${br.subDistrict?.name || ''} ${br.district?.name || ''} ${br.province?.name || ''}`,
-            telephone: br.telephoneNo,
-            businessTypePure: useOptionStore().mapOption(br.bussinessType),
-            totalEmployee: br._count?.employee,
-          }"
-          @view-detail="$emit('viewDetail', br, i)"
-        />
-      </div>
+      <q-select
+        lazy-rules="ondemand"
+        id="select-status"
+        for="select-status"
+        v-model="currentStatus"
+        outlined
+        dense
+        option-value="value"
+        option-label="label"
+        class="col q-pl-sm"
+        :class="{ 'offset-md-5': modeView }"
+        map-options
+        emit-value
+        :hide-dropdown-icon="$q.screen.lt.sm"
+        :options="[
+          { label: $t('all'), value: 'All' },
+          { label: $t('statusACTIVE'), value: 'ACTIVE' },
+          { label: $t('statusINACTIVE'), value: 'INACTIVE' },
+        ]"
+      ></q-select>
+
+      <q-btn-toggle
+        id="btn-mode"
+        v-model="modeView"
+        dense
+        class="no-shadow bordered rounded surface-1 q-ml-sm"
+        :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+        size="xs"
+        :options="[
+          { value: true, slot: 'folder' },
+          { value: false, slot: 'list' },
+        ]"
+      >
+        <template v-slot:folder>
+          <q-icon
+            id="icon-mode-grid"
+            name="mdi-view-grid-outline"
+            size="16px"
+            class="q-px-sm q-py-sm rounded"
+            :style="{
+              color: $q.dark.isActive
+                ? modeView
+                  ? '#C9D3DB'
+                  : '#787B7C'
+                : modeView
+                  ? '#787B7C'
+                  : '#C9D3DB',
+            }"
+          />
+        </template>
+        <template v-slot:list>
+          <q-icon
+            id="icon-mode-list"
+            name="mdi-format-list-bulleted"
+            class="q-px-sm q-py-xs rounded"
+            size="16px"
+            :style="{
+              color: $q.dark.isActive
+                ? modeView === true
+                  ? '#C9D3DB'
+                  : '#787B7C'
+                : modeView === false
+                  ? '#787B7C'
+                  : '#C9D3DB',
+            }"
+          />
+        </template>
+      </q-btn-toggle>
     </div>
+  </div>
+  <div
+    class="row q-pa-md col scroll full-width"
+    :class="{
+      'justify-center': totalBranch === 0,
+      'items-center': totalBranch === 0,
+    }"
+  >
+    <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
 
-    <div class="row justify-between items-center q-px-md q-py-sm">
-      <div class="app-text-muted col offset-md-4">
-        {{
-          $t('recordsPage', {
-            resultcurrentPage: branch?.length,
-            total: totalBranch,
-          })
-        }}
-      </div>
-      <div class="col-4 flex justify-end">
-        <PaginationComponent
-          v-model:current-page="currentPageBranch"
-          v-model:max-page="maxPageBranch"
-          :fetch-data="
-            async () => {
-              await fetchList();
-              flowStore.rotate();
-            }
-          "
-        />
-      </div>
+    <div style="width: 100%">
+      <q-table
+        v-if="branch"
+        flat
+        class="full-width"
+        bordered
+        :rows-per-page-options="[0]"
+        :rows="branch"
+        :columns="columns"
+        :grid="modeView"
+        card-container-class="row q-col-gutter-md"
+        row-key="name"
+        hide-pagination
+        :visible-columns="branchFieldSelected"
+      >
+        <template #header>
+          <q-tr class="surface-3">
+            <q-th
+              v-for="(v, i) in fieldDisplay"
+              :key="v"
+              :class="{ 'text-left': i === 0 }"
+            >
+              {{ $t(v) }}
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template #body="props">
+          <q-tr
+            :class="{
+              'app-text-muted': props.row.status === 'INACTIVE',
+              'cursor-pointer': props.row._count.branch !== 0,
+            }"
+            :props="props"
+            @click="$emit('viewDetail', props.row, props.rowIndex)"
+          >
+            <q-td v-if="branchFieldSelected.includes('branchName')">
+              <div class="row items-center no-wrap">
+                <div
+                  :class="{
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  class="q-mr-md"
+                  style="display: flex; margin-bottom: var(--size-2)"
+                >
+                  <div
+                    class="branch-card__icon"
+                    :class="{ 'branch-card__dark': $q.dark.isActive }"
+                  >
+                    <q-icon
+                      size="md"
+                      style="scale: 0.8"
+                      name="mdi-office-building-outline"
+                    />
+                  </div>
+                </div>
+                <div class="col" style="min-width: fit-content">
+                  <div class="col">
+                    {{
+                      $i18n.locale === 'en-US'
+                        ? props.row.nameEN
+                        : props.row.name
+                    }}
+                  </div>
+                  <div class="col app-text-muted">
+                    {{ props.row.code }}
+                  </div>
+                </div>
+              </div>
+            </q-td>
+            <q-td
+              v-if="branchFieldSelected.includes('customerBranchFormTab')"
+              class="text-center"
+            >
+              {{ props.row.branchNo || '-' }}
+            </q-td>
+            <q-td
+              v-if="branchFieldSelected.includes('address')"
+              class="text-center"
+            >
+              {{
+                $i18n.locale === 'en-US'
+                  ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
+                  : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`
+              }}
+            </q-td>
+            <q-td
+              v-if="branchFieldSelected.includes('telephone')"
+              class="text-center"
+            >
+              {{ props.row.telephoneNo || '-' }}
+            </q-td>
+            <q-td
+              v-if="branchFieldSelected.includes('businessTypePure')"
+              class="text-center"
+            >
+              {{ useOptionStore().mapOption(props.row.bussinessType) || '-' }}
+            </q-td>
+            <q-td
+              v-if="branchFieldSelected.includes('totalEmployee')"
+              class="text-center"
+            >
+              {{ props.row._count?.employee }}
+            </q-td>
+          </q-tr>
+        </template>
+        <template #item="props">
+          <div class="col-12 col-md-6">
+            <BranchCardCustomer
+              class="surface-1"
+              :inactive="props.row.status === 'INACTIVE'"
+              :color="customerType === 'CORP' ? 'corp' : 'pers'"
+              :badgeField="['status']"
+              :data="{
+                customerBranchFormTab: props.row.branchNo,
+                branchName: props.row.name,
+                address:
+                  $i18n.locale === 'en-US'
+                    ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
+                    : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
+                telephone: props.row.telephoneNo,
+                businessTypePure: useOptionStore().mapOption(
+                  props.row.bussinessType,
+                ),
+                totalEmployee: props.row._count?.employee,
+              }"
+              :visible-columns="branchFieldSelected"
+              @view-detail="$emit('viewDetail', props.row, props.rowIndex)"
+            />
+          </div>
+        </template>
+      </q-table>
+    </div>
+  </div>
+
+  <div class="row justify-between items-center q-px-md q-py-sm surface-2">
+    <div class="app-text-muted col offset-md-4">
+      {{
+        $t('recordsPage', {
+          resultcurrentPage: branch?.length,
+          total: totalBranch,
+        })
+      }}
+    </div>
+    <div class="col-4 flex justify-end">
+      <PaginationComponent
+        v-model:current-page="currentPageBranch"
+        v-model:max-page="maxPageBranch"
+        :fetch-data="
+          async () => {
+            await fetchList();
+            flowStore.rotate();
+          }
+        "
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
-.color__purple {
-  background: hsl(var(--purple-11-hsl));
-}
+.branch-card__icon {
+  --_branch-card-bg: var(--pink-6-hsl);
 
-.color__green {
-  background: hsl(var(--teal-9-hsl));
+  background-color: hsla(var(--_branch-card-bg) / 0.15);
+  border-radius: 50%;
+  padding: var(--size-1);
+  position: relative;
+  transform: rotate(45deg);
+
+  &.branch-card__dark {
+    --_branch-card-bg: var(--pink-5-hsl);
+  }
+
+  &::after {
+    content: ' ';
+    display: block;
+    block-size: 0.5rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.25rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-icon) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
 }
 </style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 40bb731b..232c0e07 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2908,7 +2908,7 @@ watch(isMainPage, () => {
         </q-splitter>
       </div>
     </div>
-    <div class="col column" v-else>
+    <div class="col column surface-1" v-else>
       <CustomerInfoComponent
         :customer-type="customerType"
         :customer-id="currentCustomerId"