diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 50a1819c..57da5cd8 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -177,22 +177,28 @@ const { locale } = useI18n();
 
 const { data: branchData } = storeToRefs(branchStore);
 
+const currentSubBranch = ref<Branch[] | undefined>(undefined);
 const treeData = computed(() => {
   const map: Record<string, BranchWithChildren> = {};
-  const children: Branch[] = [];
 
   branchData.value?.result.forEach((v) => {
     const name = locale.value === 'eng' ? v.nameEN : v.name;
-    if (v.isHeadOffice) map[v.id] = { ...v, name, branch: [] };
-    else children.push({ ...v, name });
+
+    map[v.id] = { ...v, name, branch: v.branch || [] };
   });
 
-  children.forEach((v) => {
-    const name = locale.value === 'eng' ? v.nameEN : v.name;
-    if (v.headOfficeId && map[v.headOfficeId]) {
-      map[v.headOfficeId].branch.push({ ...v, name });
-    }
-  });
+  // branchData.value?.result.forEach((v) => {
+  //   const name = locale.value === 'eng' ? v.nameEN : v.name;
+  //   if (v.isHeadOffice) map[v.id] = { ...v, name, branch: [] };
+  //   else children.push({ ...v, name });
+  // });
+
+  // children.forEach((v) => {
+  //   const name = locale.value === 'eng' ? v.nameEN : v.name;
+  //   if (v.headOfficeId && map[v.headOfficeId]) {
+  //     map[v.headOfficeId].branch.push({ ...v, name });
+  //   }
+  // });
 
   return Object.values(map);
 });
@@ -254,7 +260,7 @@ onMounted(async () => {
     // object, we are effectively unselecting any HQ branch.
   ];
 
-  await branchStore.fetchList({ pageSize: 99999 });
+  await fetchList({ pageSize: 99999, tree: true });
   await calculateStats();
 
   modeView.value = $q.screen.lt.md ? true : false;
@@ -361,6 +367,19 @@ function openDialog() {
   modal.value = true;
 }
 
+async function selectedSubBranche(id: string) {
+  const res = await branchStore.fetchById(id, {
+    includeSubBranch: true,
+    includeContact: true,
+  });
+
+  if (res) {
+    currentSubBranch.value = res.branch;
+  } else {
+    currentSubBranch.value = undefined;
+  }
+}
+
 async function fetchBranchById(id: string) {
   const res = await branchStore.fetchById(id, { includeContact: true });
   if (res) {
@@ -556,7 +575,7 @@ function triggerDelete(id: string) {
       message: t('dialog.message.confirmDelete'),
       action: async () => {
         await branchStore.deleteById(id);
-        await branchStore.fetchList({ pageSize: 99999 });
+        await fetchList({ pageSize: 99999 });
         modalDrawer.value = false;
         await calculateStats();
 
@@ -612,6 +631,22 @@ function triggerEditQrCodeBank(opts?: { save?: boolean }) {
   }
 }
 
+async function fetchList(opts: {
+  page?: number;
+  pageSize?: number;
+  zipCode?: string;
+  query?: string;
+  tree?: boolean;
+  filter?: 'head' | 'sub';
+}) {
+  await branchStore.fetchList(opts);
+}
+
+watch(inputSearch, () => {
+  fetchList({ tree: true, query: inputSearch.value });
+  currentSubBranch.value = undefined;
+});
+
 async function triggerChangeStatus(
   id: string,
   status: string,
@@ -659,7 +694,7 @@ async function onSubmit() {
       },
     );
 
-    await branchStore.fetchList({ pageSize: 99999 });
+    await fetchList({ pageSize: 99999 });
     if (!imageDialog.value) modalDrawer.value = false;
     modal.value = false;
   }
@@ -675,7 +710,7 @@ async function onSubmit() {
         formBankBook.value,
       );
 
-      await branchStore.fetchList({ pageSize: 99999 });
+      await fetchList({ pageSize: 99999 });
       modal.value = false;
     };
 
@@ -818,6 +853,8 @@ watch(currentHq, () => {
     });
   }
 
+  selectedSubBranche(currentHq.value.id);
+
   utilsStore.currentTitle.path = tmp;
 });
 </script>
@@ -1130,43 +1167,7 @@ watch(currentHq, () => {
                     bordered
                     class="full-width"
                     :rows-per-page-options="[0]"
-                    :rows="
-                      treeData
-                        .flatMap((v) => [v, ...v.branch])
-                        .filter((v) => {
-                          if (
-                            statusFilter === 'statusACTIVE' &&
-                            v.status === 'INACTIVE'
-                          ) {
-                            return false;
-                          }
-                          if (
-                            statusFilter === 'statusINACTIVE' &&
-                            v.status !== 'INACTIVE'
-                          ) {
-                            return false;
-                          }
-
-                          const terms = `${v.code} ${$i18n.locale === 'eng' ? v.nameEN : v.name} ${v.telephoneNo}`;
-                          if (inputSearch && !terms.includes(inputSearch)) {
-                            return false;
-                          }
-
-                          if (
-                            !!currentHq.id &&
-                            currentHq.id === v.headOfficeId
-                          ) {
-                            return true;
-                          }
-                          if (fieldSelectedBranch.value === 'all') return true;
-                          if (fieldSelectedBranch.value === 'branchHQLabel')
-                            return v.isHeadOffice;
-                          if (fieldSelectedBranch.value === 'branchLabel')
-                            return !v.isHeadOffice;
-
-                          return false;
-                        })
-                    "
+                    :rows="currentSubBranch || treeData"
                     :columns="columns"
                     :grid="modeView"
                     card-container-class="row q-col-gutter-md"
@@ -1197,7 +1198,7 @@ watch(currentHq, () => {
                       <q-tr
                         :class="{
                           'app-text-muted': props.row.status === 'INACTIVE',
-                          'cursor-pointer': props.row._count.branch !== 0,
+                          'cursor-pointer': props.row._count?.branch !== 0,
                         }"
                         :style="
                           props.rowIndex % 2 !== 0
@@ -1317,7 +1318,11 @@ watch(currentHq, () => {
                         </q-td>
 
                         <q-td v-if="fieldSelected.includes('branchLabelTel')">
-                          {{ props.row.contact[0]?.telephoneNo || '-' }}
+                          {{
+                            props.row.contact !== undefined
+                              ? props.row.contact[0]?.telephoneNo
+                              : '-'
+                          }}
                         </q-td>
 
                         <q-td v-if="fieldSelected.includes('contactName')">
@@ -1806,7 +1811,7 @@ watch(currentHq, () => {
                 formType = 'view';
               }
 
-              await branchStore.fetchList({ pageSize: 99999 });
+              await fetchList({ pageSize: 99999 });
             }
           "
           :readonly="formType === 'view'"
diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index 0e3753d7..e39d87a1 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -12,7 +12,7 @@ type BranchId = string;
 
 const useBranchStore = defineStore('api-branch', () => {
   const flowStore = useFlowStore();
-  const data = ref<Pagination<Branch[]>>({
+  const data = ref<Pagination<(Branch & { branch?: Branch[] })[]>>({
     result: [],
     page: 0,
     pageSize: 0,