diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 144a085e..2810eec2 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -7,10 +7,18 @@ import AppBox from 'components/app/AppBox.vue';
 import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 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';
 
-const BranchStore = useBranchStore();
+import { BranchWithChildren, Branch } from 'src/stores/branch/types';
+
+const branchStore = useBranchStore();
 const test = ref<string>('');
 
+const modal = ref<boolean>(false);
+
+const showCurrentBaranch = ref<Branch | boolean | null>();
+
 const shape = ref<boolean>(false);
 
 const inputSelectBranch = ref<string>('ทั้งหมด');
@@ -67,47 +75,6 @@ const rows: {
   },
 ];
 
-const simple = ref<
-  {
-    label: string;
-    isHeadOffice?: boolean;
-    children: {
-      label: string;
-      children?: { label: string }[];
-    }[];
-  }[]
->([
-  {
-    label: 'สำนักงานใหม่ 1',
-    isHeadOffice: true,
-
-    children: [
-      {
-        label: 'BR1001',
-        children: [
-          {
-            label: 'BU2001',
-          },
-        ],
-      },
-      { label: 'Bui1001' },
-    ],
-  },
-
-  {
-    label: 'สำนักงานใหม่ 2',
-    isHeadOffice: true,
-    children: [
-      {
-        label: 'Bc1001',
-      },
-      {
-        label: 'Ba1001',
-      },
-    ],
-  },
-]);
-
 const branchStat = ref<
   {
     amount: number;
@@ -137,9 +104,39 @@ const branchStat = ref<
   },
 ]);
 
+const treeData = ref<BranchWithChildren[]>([]);
+
 onMounted(() => {
   BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
   console.log(BranchStore.data);
+
+async function getTree() {
+  const result = await branchStore.fetchList<BranchWithChildren>({
+    tree: true,
+  });
+
+  if (result) {
+    treeData.value = result.result;
+  }
+}
+
+async function fetchBranch(id: string) {
+  if (typeof branchStore.fetchById(id) === 'object') {
+    showCurrentBaranch.value = await branchStore.fetchById(id);
+  }
+}
+
+onMounted(async () => {
+  getTree();
+
+  if (
+    typeof branchStore.fetchById('bfff119e-079d-4b56-9699-0466ade4b517') ===
+    'object'
+  ) {
+    showCurrentBaranch.value = await branchStore.fetchById(
+      'bfff119e-079d-4b56-9699-0466ade4b517',
+    );
+  }
 });
 </script>
 <template>
@@ -156,7 +153,7 @@ onMounted(() => {
       <StatCardComponent :branch="branchStat" />
     </app-box>
 
-    <app-box v-if="false" bordered style="width: 100%; height: 500px">
+    <app-box bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
           <div class="row">
@@ -174,7 +171,7 @@ onMounted(() => {
         >
           <BtnAddComponent
             :label="'สร้างสำนักงานใหญ่'"
-            @trigger="() => console.log('test')"
+            @trigger="() => openDialog()"
           />
         </div>
       </div>
@@ -225,24 +222,27 @@ onMounted(() => {
           >
             <div class="col">
               <q-tree
-                :nodes="simple"
+                :nodes="treeData"
                 dense
-                node-key="label"
+                node-key="name"
                 v-model:expanded="expanded"
+                v-model:selected="selected"
+                children-key="branch"
               >
                 <template #default-header="prop">
                   <div
+                    @click="fetchBranch(prop.node.id)"
                     class="q-pa-sm color-brach-tree-text"
                     :class="{
-                      'color-tree-active': expanded.includes(prop.node.label),
+                      'color-tree-active': expanded.includes(prop.node.name),
                       'bg-branch-tree':
                         prop.node.isHeadOffice &&
-                        expanded.includes(prop.node.label),
+                        expanded.includes(prop.node.name),
                       'dark-tree': $q.dark.isActive,
                     }"
                     style="border-radius: 6px"
                   >
-                    {{ prop.node.label }}
+                    {{ prop.node.name }}
                   </div>
 
                   <q-space />
@@ -256,7 +256,7 @@ onMounted(() => {
                     dense
                   >
                     <Icon
-                      v-if="expanded.includes(prop.node.label)"
+                      v-if="expanded.includes(prop.node.name)"
                       icon="eva:file-add-fill"
                     />
 
@@ -328,11 +328,7 @@ onMounted(() => {
           </q-scroll-area>
         </div>
 
-        <div
-          v-if="false"
-          class="col bordered full-height"
-          style="overflow-y: auto"
-        >
+        <div class="col bordered full-height" style="overflow-y: auto">
           <q-card-section class="q-pb-none">
             <div class="row">
               <div class="col">
@@ -369,8 +365,15 @@ onMounted(() => {
           </q-card-section>
         </div>
 
-        <div class="col bordered full-height" style="overflow-y: auto">
-          <CardDetailsComponent class="q-pa-sm" />
+        <div
+          v-if="false"
+          class="col bordered full-height"
+          style="overflow-y: auto"
+        >
+          <CardDetailsComponent
+            :data="showCurrentBaranch as Branch"
+            class="q-pa-sm"
+          />
         </div>
       </q-card-section>
     </q-card>