diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 3d8b3706..9c66d472 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1,38 +1,152 @@
 <script setup lang="ts">
+import useBranchStore from 'stores/branch';
+
 import AppBox from 'components/app/AppBox.vue';
-import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
-import StatCardComponet from 'components/StatCardComponet.vue';
-import TooltipComponet from 'src/components/TooltipComponet.vue';
+import BtnAddComponet from 'components/01_branch-management/BtnAddComponent.vue';
+import TableCardComponet from 'components/01_branch-management/TableCardComponent.vue';
+import CardDetailsComponent from 'components/01_branch-management/CardDetailsComponent.vue';
+import StatCardComponet from 'components/StatCardComponent.vue';
+import TooltipComponet from 'components/TooltipComponent.vue';
 import { ref } from 'vue';
 
+import { onMounted } from 'vue';
+
+const BranchStore = useBranchStore();
+const test = ref<string>('');
+const testDate = ref<string>();
+
+const shape = ref<boolean>(false);
+
+const inputSelectBranch = ref<string>('ทั้งหมด');
+const inputFilter = ref<string>('คอลัมน์');
+const inputSearch = ref<string>('');
+const optionsBranch: string[] = ['ทั้งหมด', 'สำนักงานใหญ่', 'สาขา'];
+const optionsFilter: 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 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: string;
+    amount: number;
     label: string;
   }[]
 >([
   {
-    amount: '1',
+    amount: 1,
     label: 'สำนักงานใหญ่ 1',
   },
 
   {
-    amount: '2',
+    amount: 2,
     label: 'สำนักงานใหญ่ 2',
   },
   {
-    amount: '3',
+    amount: 3,
     label: 'สำนักงานใหญ่ 3',
   },
   {
-    amount: '4',
+    amount: 4,
     label: 'สำนักงานใหญ่ 4',
   },
   {
-    amount: '5',
+    amount: 5,
     label: 'สำนักงานใหญ่ 5',
   },
 ]);
+
+onMounted(() => {
+  BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
+  console.log(BranchStore.data);
+});
 </script>
 <template>
   <div class="column">
@@ -40,15 +154,23 @@ const branchStat = ref<
       {{ $t('branchManagement') }}
     </div>
 
-    <app-box bordered class="q-mb-md">
+    <app-box
+      bordered
+      class="q-mb-md"
+      :class="{ 'bg-card-branch-title': $q.dark.isActive }"
+    >
       <stat-card-componet :branch="branchStat" />
     </app-box>
 
-    <app-box bordered style="width: 100%; height: 500px">
+    <app-box v-if="false" bordered style="width: 100%; height: 500px">
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
           <div class="row">
-            <tooltip-componet imgSrc="img-table-" />
+            <tooltip-componet
+              title="branchNoMainOfficeYet"
+              caption="branchClickToCreateMainOffice"
+              imgSrc="img-table-"
+            />
           </div>
         </div>
 
@@ -67,7 +189,277 @@ const branchStat = ref<
         </div>
       </div>
     </app-box>
+
+    <q-card
+      class="bordered branch-main-variable-color"
+      :class="{ dark: $q.dark.isActive }"
+      style="width: 100%; height: 500px"
+    >
+      <q-card-section class="bordered bg-card-branch-title">
+        <div class="row items-center">
+          <div
+            class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
+          >
+            {{ $t('headQuarters') }}
+          </div>
+          <div class="col-3">
+            <q-input
+              style="border-radius: 6px"
+              class="bordered"
+              outlined
+              dense
+              v-model="test"
+              label="ค้นหา"
+            >
+              <template #prepend>
+                <iconify-icon icon="ic:baseline-search" />
+              </template>
+            </q-input>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-section class="no-padding row" style="height: 423px">
+        <div class="bordered q-pa-md bg-branch-tree-box" style="width: 21%">
+          <div
+            @click="
+              () => {
+                console.log('test');
+              }
+            "
+            class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
+          >
+            <div class="text-h4 q-mr-md">+</div>
+            {{ $t('btnCreate') }}
+          </div>
+
+          <q-scroll-area
+            class="bordered q-pa-sm bg-branch-tree-scroll"
+            style="height: 350px; width: 100%; border-radius: 6px"
+          >
+            <div class="col">
+              <q-tree
+                :nodes="simple"
+                dense
+                node-key="label"
+                v-model:expanded="expanded"
+              >
+                <template #default-header="prop">
+                  <div
+                    class="q-pa-sm color-brach-tree-text"
+                    :class="{
+                      'color-tree-active': expanded.includes(prop.node.label),
+                      'bg-branch-tree':
+                        prop.node.isHeadOffice &&
+                        expanded.includes(prop.node.label),
+                      'dark-tree': $q.dark.isActive,
+                    }"
+                    style="border-radius: 6px"
+                  >
+                    {{ prop.node.label }}
+                  </div>
+
+                  <q-space />
+
+                  <q-btn
+                    class="color-brach-tree-btn"
+                    @click.stop=""
+                    size="xl"
+                    flat
+                    v-if="prop.node.isHeadOffice"
+                    dense
+                  >
+                    <iconify-icon
+                      v-if="expanded.includes(prop.node.label)"
+                      icon="eva:file-add-fill"
+                    />
+
+                    <iconify-icon v-else icon="eva:file-add-outline" />
+                  </q-btn>
+
+                  <q-btn
+                    class="color-brach-tree-btn"
+                    @click.stop=""
+                    size="xl"
+                    dense
+                    flat
+                    name="menu"
+                  >
+                    <iconify-icon icon="ri:more-2-fill" />
+                    <q-menu class="bordered" style="width: 150px">
+                      <q-list class="q-pa-sm">
+                        <q-item clickable v-close-popup class="no-padding">
+                          <q-item-section avatar>
+                            <q-icon
+                              style="color: hsla(var(--cyan-6-hsl) / 1)"
+                              ize="22px"
+                              name="mdi-pencil-outline"
+                            />
+                          </q-item-section>
+
+                          <q-item-section>
+                            {{ $t('edit') }}
+                          </q-item-section>
+                        </q-item>
+
+                        <q-item clickable v-close-popup class="no-padding">
+                          <q-item-section avatar>
+                            <q-icon
+                              style="color: hsla(var(--red-6-hsl) / 1)"
+                              size="22px"
+                              name="mdi-trash-can-outline"
+                            />
+                          </q-item-section>
+
+                          <q-item-section>{{ $t('delete') }}</q-item-section>
+                        </q-item>
+
+                        <q-item clickable v-close-popup class="q-px-sm">
+                          <q-item-section>
+                            <div
+                              class="bg-branch-tree-toggle q-pa-sm"
+                              style="border-radius: 6px"
+                              :class="{
+                                'dark-toggle': $q.dark.isActive,
+                              }"
+                            >
+                              <q-toggle
+                                dense
+                                :label="$t('closedStatus')"
+                                size="sm"
+                                v-model="shape"
+                                val="md"
+                              />
+                            </div>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </template>
+              </q-tree>
+            </div>
+          </q-scroll-area>
+        </div>
+
+        <div
+          v-if="false"
+          class="col bordered full-height"
+          style="overflow-y: auto"
+        >
+          <q-card-section class="q-pb-none">
+            <div class="row">
+              <div class="col">
+                <q-select
+                  style="width: 150px"
+                  dense
+                  outlined
+                  v-model="inputSelectBranch"
+                  :options="optionsBranch"
+                  label="เลือก"
+                />
+              </div>
+              <div class="col-2 q-pr-md">
+                <q-input dense outlined v-model="inputSearch">
+                  <template v-slot:append>
+                    <iconify-icon icon="ic:baseline-search" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-2">
+                <q-select
+                  style="width: 150px"
+                  dense
+                  outlined
+                  v-model="inputFilter"
+                  :options="optionsFilter"
+                />
+              </div>
+            </div>
+          </q-card-section>
+
+          <q-card-section>
+            <table-card-componet :subBranch="true" :rows="rows" />
+          </q-card-section>
+        </div>
+
+        <div class="col bordered full-height" style="overflow-y: auto">
+          <card-details-component class="q-pa-sm" />
+        </div>
+      </q-card-section>
+    </q-card>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.branch-main-variable-color {
+  --_color-branch-tree-text: var(--blue-6-hsl);
+  --_color-branch-title: var(--blue-10-hsl);
+  --_bg-branch-title: var(--_color-branch-title) / 0.08;
+  --_color-branch-btn: var(--cyan-6-hsl);
+  --_color-branch-tree-active: var(--blue-6-hsl);
+  --_bg-branch-tree-box: var(--gray-0-hsl);
+  --_bg-branch-tree-scroll: var(--gray-0-hsl);
+  --_color-branch-tree-scroll: var(--gray-0-hsl);
+
+  &.dark {
+    --_color-branch-title: var(--blue-0-hsl);
+    --_bg-branch-title: var(--gray-9-hsl) / 1;
+    --_color-branch-btn: var(--cyan-6-hsl);
+    --_color-branch-tree-active: var(--blue-6-hsl);
+    --_bg-branch-tree-box: var(--gray-10-hsl);
+    --_bg-branch-tree-scroll: var(--gray-11-hsl);
+    --_color-branch-tree-scroll: var(--gray-8-hsl);
+  }
+}
+
+.bg-branch-tree-toggle {
+  --_bg-branch-tree-toggle: var(--gray-3-hsl);
+  background: hsl(var(--_bg-branch-tree-toggle));
+
+  &.dark-toggle {
+    --_bg-branch-tree-toggle: var(--gray-9-hsl);
+  }
+}
+
+.bg-branch-tree-scroll {
+  background: hsl(var(--_bg-branch-tree-scroll));
+  color: hsl(var(--_color-branch-tree-scroll));
+}
+
+.bg-branch-tree-box {
+  background: hsl(var(--_bg-branch-tree-box));
+}
+
+.bg-card-branch-title {
+  background: hsla(var(--_bg-branch-title));
+}
+
+.color-card-branch-title {
+  color: hsl(var(--_color-branch-title));
+}
+
+.color-card-branch-btn {
+  color: hsl(var(--_color-branch-btn));
+  display: flex;
+  align-items: center;
+}
+
+.color-brach-tree-text,
+.color-brach-tree-btn {
+  color: var(--stone-6);
+}
+
+.color-tree-active {
+  color: hsl(var(--_color-branch-tree-active));
+}
+
+.bg-branch-tree {
+  background: hsla(var(--_color-branch-tree-active) / 0.08);
+
+  &.dark-tree {
+    background: hsla(var(--_color-branch-tree-active) / 0.01);
+    border: 1px solid hsla(var(--_color-branch-tree-active));
+  }
+}
+</style>