diff --git a/src/components/01_branch-management/CardDetailsComponent.vue b/src/components/01_branch-management/CardDetailsComponent.vue
index b72a5d3d..70a78172 100644
--- a/src/components/01_branch-management/CardDetailsComponent.vue
+++ b/src/components/01_branch-management/CardDetailsComponent.vue
@@ -18,7 +18,7 @@ defineProps<{
             class="text-h6 color-card-text-code"
             :class="{ dark: $q.dark.isActive }"
           >
-            Httw
+            {{ data?.code }}
           </div>
           <div
             class="q-pa-sm"
@@ -106,7 +106,7 @@ defineProps<{
 
         <div class="row card-details-row-height">
           <div class="col-3 color-text-static">Zip code</div>
-          <div class="col-2">{{ data?.code }}</div>
+          <div class="col-2">{{ data?.zipCode }}</div>
         </div>
       </q-card>
     </div>
diff --git a/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue b/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue
index 19f70772..1864f2f5 100644
--- a/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue
+++ b/src/components/01_branch-management/DeatailsBranchDrawerComponent.vue
@@ -17,7 +17,6 @@ const open = defineModel('open', { type: Boolean, default: false });
     tabindex="0"
     :width="500"
     :breakpoint="500"
-    :model-value="true"
     v-model="open"
   >
     <q-toolbar class="q-mb-md q-pa-none">
@@ -32,7 +31,7 @@ const open = defineModel('open', { type: Boolean, default: false });
         dense
         icon="mdi-close"
         color="red"
-        @click="() => $emit('open')"
+        @click="open = false"
         id="fileFormIconClose"
       />
     </q-toolbar>
diff --git a/src/components/01_branch-management/TableCardComponent.vue b/src/components/01_branch-management/TableCardComponent.vue
index c2ba92b6..a6e06a8b 100644
--- a/src/components/01_branch-management/TableCardComponent.vue
+++ b/src/components/01_branch-management/TableCardComponent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { QTableProps } from 'quasar';
 import { ref } from 'vue';
 
@@ -10,9 +11,9 @@ const props = defineProps<{
     name: string;
     branchName: string;
     address: string;
-    phonNumber: string;
-    Headquarters: string;
-    type: string;
+    telephoneNo: string;
+    code: string;
+    type: boolean;
     status: string;
   }[];
 }>();
@@ -35,8 +36,8 @@ const columns = [
     sortable: true,
   },
   { name: 'address', label: 'ที่อยู่', field: 'address', sortable: true },
-  { name: 'phonNumber', label: 'เบอร์โทร', field: 'phonNumber' },
-  { name: 'Headquarters', label: 'สำนักงานใหญ่', field: 'Headquarters' },
+  { name: 'telephoneNo', label: 'เบอร์โทร', field: 'telephoneNo' },
+  { name: 'code', label: 'สำนักงานใหญ่', field: 'code' },
   { name: 'type', label: 'ประเภท', field: 'type' },
   { name: 'status', label: 'สถานะ', field: 'status' },
 ] satisfies QTableProps['columns'];
@@ -58,7 +59,7 @@ const filter = ref('');
       hide-header
     >
       <template v-slot:item="prop">
-        <div class="q-pr-sm">
+        <div class="q-pr-sm q-pb-md">
           <q-card class="bordered" style="width: 340px">
             <q-item
               class="bordered"
@@ -77,14 +78,31 @@ const filter = ref('');
 
               <q-item-section>
                 <div class="row">
-                  {{ v }}
+                  <div v-if="k !== 'type'">
+                    {{ v }}
+                  </div>
+                  <div v-else>
+                    <div v-if="v">สำนักงานใหญ่</div>
+                    <div v-else>สาขา</div>
+                  </div>
+
                   <q-space />
 
-                  <iconify-icon
-                    class="cursor-pointer"
-                    v-if="i === 0"
-                    width="20px"
+                  <q-space />
+
+                  <Icon
                     icon="mdi:navigate-next"
+                    class="cursor-pointer"
+                    v-if="i === 0 && !subBranch"
+                    width="20px"
+                    @click="$emit('navigate', prop.row)"
+                  />
+                  <Icon
+                    icon="mdi:navigate-next"
+                    class="cursor-pointer"
+                    v-if="i === 0 && subBranch"
+                    width="20px"
+                    @click="$emit('showCard', prop.row)"
                   />
                 </div>
               </q-item-section>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 0d1fe8df..e2f91bae 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -11,6 +11,7 @@ import StatCardComponent from 'components/StatCardComponent.vue';
 import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
 import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
+import TableCardComponent from 'src/components/01_branch-management/TableCardComponent.vue';
 
 import { BranchWithChildren, Branch } from 'src/stores/branch/types';
 
@@ -19,10 +20,12 @@ const { data: branchData } = storeToRefs(branchStore);
 
 const modal = ref<boolean>(false);
 
-const showCurrentBranch = ref<Branch | boolean | null>();
+const showCurrentBranch = ref<Branch>();
 
 const shape = ref<boolean>(false);
 const openBranchDrawer = ref<boolean>(true);
+const openCardDetails = ref<boolean>(false);
+const openTableCard = ref<boolean>(true);
 
 const inputSelectBranch = ref<string>('ทั้งหมด');
 const inputFilter = ref<string>('คอลัมน์');
@@ -43,14 +46,14 @@ const formData = ref({
   tel: '',
   gender: '',
   email: '',
-  addressL: {
+  addressTitle: {
     address: '',
     province: '',
     district: '',
     subDistrict: '',
     zip: '',
   },
-  addressEng: {
+  addressENTitle: {
     address: '',
     province: '',
     district: '',
@@ -72,45 +75,6 @@ const inputEmailHeadOffice = ref<string>('');
 
 const expanded = ref<string[]>([]);
 
-const rows: {
-  name: string;
-  branchName: string;
-  address: string;
-  phonNumber: string;
-  Headquarters: string;
-  type: string;
-  status: string;
-}[] = [
-  {
-    name: 'HQ0001',
-    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส',
-    address: '192',
-    phonNumber: '0639195701',
-    Headquarters: 'HQ0001',
-    type: 'สำนักงานใหญ่',
-    status: 'เปิดใช้งาน',
-  },
-  {
-    name: 'HQ0002',
-    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
-    address: '192',
-    phonNumber: '0639195701',
-    Headquarters: 'HQ0001',
-    type: 'สำนักงานใหญ่',
-    status: 'เปิดใช้งาน',
-  },
-
-  {
-    name: 'HQ0002',
-    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
-    address: '192',
-    phonNumber: '0639195701',
-    Headquarters: 'HQ0001',
-    type: 'สำนักงานใหญ่',
-    status: 'เปิดใช้งาน',
-  },
-];
-
 const branchStat = ref<
   {
     amount: number;
@@ -142,6 +106,19 @@ const branchStat = ref<
 
 const treeData = ref<BranchWithChildren[]>([]);
 
+const subBranch = ref<boolean>(false);
+const rowsBranch = ref<
+  {
+    name: string;
+    branchName: string;
+    address: string;
+    telephoneNo: string;
+    code: string;
+    type: boolean;
+    status: string;
+  }[]
+>([]);
+
 function openDialog() {
   modal.value = true;
 }
@@ -150,26 +127,56 @@ async function getTree() {
   const result = await branchStore.fetchList<BranchWithChildren>({
     tree: true,
   });
-  if (result) treeData.value = result.result;
+  if (result) {
+    treeData.value = result.result;
+    rowsBranch.value = treeData.value
+      .filter((v) => v.isHeadOffice)
+      .map((v) => ({
+        name: v.id,
+        branchName: v.name,
+        address: v.address,
+        telephoneNo: v.telephoneNo,
+        code: v.code,
+        type: v.isHeadOffice,
+        status: v.status.toString(),
+      }));
+
+    subBranch.value = false;
+  }
 }
 
-async function fetchBranch(id: string) {
-  if (typeof branchStore.fetchById(id) === 'object') {
-    showCurrentBranch.value = await branchStore.fetchById(id);
+async function fetchCard(id: string) {
+  const result = await branchStore.fetchById<Branch>(id);
+
+  if (result) {
+    showCurrentBranch.value = result;
+    openCardDetails.value = true;
+    openTableCard.value = false;
+  }
+}
+async function fetchSubBranch(id: string) {
+  const result = await branchStore.fetchById<BranchWithChildren>(id, {
+    includeSubBranch: true,
+  });
+
+  if (result) {
+    rowsBranch.value = result.branch.map((v) => ({
+      name: v.id,
+      branchName: v.name,
+      address: v.address,
+      telephoneNo: v.telephoneNo,
+      code: v.code,
+      type: v.isHeadOffice,
+      status: v.status,
+    }));
+    subBranch.value = true;
+    openCardDetails.value = false;
+    openTableCard.value = true;
   }
 }
 
 onMounted(async () => {
-  await getTree();
-
-  if (
-    typeof branchStore.fetchById('bfff119e-079d-4b56-9699-0466ade4b517') ===
-    'object'
-  ) {
-    showCurrentBranch.value = await branchStore.fetchById(
-      'bfff119e-079d-4b56-9699-0466ade4b517',
-    );
-  }
+  getTree();
 });
 </script>
 <template>
@@ -234,7 +241,7 @@ onMounted(async () => {
       <AppBox class="no-padding row bordered-t" style="border-radius: 0">
         <div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
           <div
-            @click="() => console.log('test')"
+            @click="openDialog()"
             class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
           >
             <div class="text-h4 q-mr-md">+</div>
@@ -256,7 +263,7 @@ onMounted(async () => {
               >
                 <template #default-header="prop">
                   <div
-                    @click="fetchBranch(prop.node.id)"
+                    @click="fetchSubBranch(prop.node.id)"
                     class="q-px-sm color-brach-tree-text"
                     :class="{
                       'color-tree-active': expanded.includes(prop.node.name),
@@ -346,7 +353,7 @@ onMounted(async () => {
           </q-scroll-area>
         </div>
 
-        <div class="col" style="overflow-y: auto">
+        <div v-if="openTableCard" class="col" style="overflow-y: auto">
           <AppBox class="q-pb-none">
             <div class="row">
               <div class="col">
@@ -379,11 +386,20 @@ onMounted(async () => {
           </AppBox>
 
           <AppBox>
-            <TableCardComponent :sub-branch="true" :rows="rows" />
+            <TableCardComponent
+              @navigate="(v) => fetchSubBranch(v.name)"
+              @showCard="(v) => fetchCard(v.name)"
+              :sub-branch="subBranch"
+              :rows="rowsBranch"
+            />
           </AppBox>
         </div>
 
-        <div v-if="false" class="col bordered" style="overflow-y: auto">
+        <div
+          v-if="openCardDetails"
+          class="col bordered"
+          style="overflow-y: auto"
+        >
           <CardDetailsComponent
             :data="showCurrentBranch as Branch"
             class="q-pa-sm"
@@ -394,15 +410,14 @@ onMounted(async () => {
   </div>
 
   <DeatailsBranchDrawerComponent
-    @open="openBranchDrawer = !openBranchDrawer"
-    :open="openBranchDrawer"
+    v-model:open="openBranchDrawer"
     :data="showCurrentBranch as Branch"
   />
 
   <FormDialog
     v-model:modal="modal"
-    v-model:addressL="formData.addressL"
-    v-model:addressEng="formData.addressEng"
+    address-title="test"
+    addressENTitle=""
     title="เพิ่มสำนักงานใหญ่"
     addressLocaleTitle="ที่อยู่พนักงาน"
     addressEngTitle="ที่อยู่พนักงาน ENG"
@@ -502,7 +517,7 @@ onMounted(async () => {
       </AppBox>
     </template>
 
-    <template #mid-bottom>
+    <template #midBottom>
       <div>
         <div class="row full-width q-pb-md">
           <div class="col q-pr-md">
diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index c2b91b4f..6c13dd48 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -52,21 +52,31 @@ const useBranchStore = defineStore('api-branch', () => {
     return false;
   }
 
-  async function fetchById(
+  async function fetchById<T extends Branch>(
     id: string,
+    opts?: { includeSubBranch?: boolean },
     flow?: {
       sessionId: string;
       refTransactionId: string;
       transactionId: string;
     },
   ) {
-    const res = await api.get<Branch>(`/branch/${id}`, {
-      headers: {
-        'X-Session-Id': flow?.sessionId,
-        'X-Rtid': flow?.refTransactionId,
-        'X-Tid': flow?.transactionId,
+    const params = new URLSearchParams();
+
+    if (opts?.includeSubBranch) params.append('includeSubBranch', 'true');
+
+    const query = params.toString();
+
+    const res = await api.get<T>(
+      `/branch/${id}${(params && '?'.concat(query)) || ''}`,
+      {
+        headers: {
+          'X-Session-Id': flow?.sessionId,
+          'X-Rtid': flow?.refTransactionId,
+          'X-Tid': flow?.transactionId,
+        },
       },
-    });
+    );
 
     if (!res) return false;
     if (res.status === 200) return res.data;