diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 144a085e..881c87a3 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -7,11 +7,21 @@ 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';
+import FormDialog from 'src/components/FormDialog.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 openBranchDrawer = ref<boolean>(true);
 
 const inputSelectBranch = ref<string>('ทั้งหมด');
 const inputFilter = ref<string>('คอลัมน์');
@@ -26,6 +36,39 @@ const optionsFilter: string[] = [
   'สถานะ',
 ];
 
+const formData = ref({
+  hqId: '',
+  branchId: '',
+  tel: '',
+  gender: '',
+  email: '',
+  addressL: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+  addressEng: {
+    address: '',
+    province: '',
+    district: '',
+    subDistrict: '',
+    zip: '',
+  },
+});
+
+const selected = ref<string>('');
+
+const headOfficeCode = ref<string>('');
+const headOfficeName = ref<string>('');
+const taxIDNumber = ref<string>('');
+const nameHeadOfficeEN = ref<string>('');
+const inputPhone = ref<string>('');
+const inputIdLine = ref<string>('');
+const inputPhonHeadOffice = ref<string>('');
+const inputEmailHeadOffice = ref<string>('');
+
 const expanded = ref<string[]>([]);
 
 const rows: {
@@ -67,47 +110,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 +139,41 @@ const branchStat = ref<
   },
 ]);
 
-onMounted(() => {
-  BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
-  console.log(BranchStore.data);
+const treeData = ref<BranchWithChildren[]>([]);
+
+function openDialog() {
+  console.log('openDialog');
+
+  modal.value = true;
+}
+
+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 +190,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 +208,7 @@ onMounted(() => {
         >
           <BtnAddComponent
             :label="'สร้างสำนักงานใหญ่'"
-            @trigger="() => console.log('test')"
+            @trigger="() => openDialog()"
           />
         </div>
       </div>
@@ -225,24 +259,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 +293,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 +365,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,15 +402,182 @@ 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>
   </div>
+
+  <DeatailsBranchDrawerComponent
+    @open="openBranchDrawer = !openBranchDrawer"
+    :open="openBranchDrawer"
+    :data="showCurrentBaranch as Branch"
+  />
+
+  <FormDialog
+    v-model:modal="modal"
+    v-model:addressL="formData.addressL"
+    v-model:addressEng="formData.addressEng"
+    title="เพิ่มสำนักงานใหญ่"
+    addressLocaleTitle="ที่อยู่พนักงาน"
+    addressEngTitle="ที่อยู่พนักงาน ENG"
+  >
+    <template #top>
+      <div class="row full-width">
+        <div class="col">
+          <q-input
+            v-model="headOfficeCode"
+            dense
+            outlined
+            label="รหัสสำนักงานใหญ่"
+          />
+        </div>
+
+        <div class="col q-pl-md">
+          <q-input
+            v-model="taxIDNumber"
+            dense
+            outlined
+            label="เลขประจำตัวผู้เสียภาษี"
+          />
+        </div>
+      </div>
+
+      <div class="row full-width">
+        <div class="col">
+          <q-input
+            v-model="headOfficeName"
+            dense
+            outlined
+            label="ชื่อสำนักงานใหญ่"
+          />
+        </div>
+
+        <div class="col q-pl-md">
+          <q-input
+            v-model="nameHeadOfficeEN"
+            dense
+            outlined
+            label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #append>
+      <AppBox class="q-mt-md" style="background: var(--gray-1)">
+        <div class="row q-mb-md">
+          <div class="col">
+            <q-input
+              v-model="inputPhone"
+              dense
+              outlined
+              label="เบอร์โทรศัพท์"
+            />
+          </div>
+          <div class="col q-pl-md">
+            <q-input v-model="inputIdLine" dense outlined label="id line" />
+          </div>
+        </div>
+
+        <div
+          style="
+            border: 2px dashed var(--gray-4);
+            border-radius: 10px;
+            background-image: linear-gradient(
+              180deg,
+              var(--indigo-0),
+              var(--sand-0)
+            );
+          "
+          class="q-pa-md column items-center justify-center full-width"
+        >
+          <div class="col q-pb-md" style="opacity: 0.3">
+            <q-btn
+              unelevated
+              class="bg-white"
+              style="border: 3px solid grey; border-radius: 6px"
+            >
+              <Icon icon="teenyicons:add-outline" width="20px" height="50px" />
+            </q-btn>
+          </div>
+          <div class="col">
+            <q-btn
+              style="
+                background: var(--blue-5);
+                color: var(--blue-0);
+                font-size: 12px;
+              "
+              unelevated
+              rounded
+              label="อัปโหลด QR Code"
+            ></q-btn>
+          </div>
+        </div>
+      </AppBox>
+    </template>
+
+    <template #midBottom>
+      <div>
+        <div class="row full-width q-pb-md">
+          <div class="col q-pr-md">
+            <q-input
+              v-model="inputPhonHeadOffice"
+              dense
+              outlined
+              label="เบอร์โทรศัพท์สำนักงานใหฐ่"
+            />
+          </div>
+          <div class="col">
+            <q-input
+              v-model="inputEmailHeadOffice"
+              dense
+              outlined
+              label="อีเมลติดต่อสำนักงานใหญ่ "
+            />
+          </div>
+        </div>
+
+        <div
+          class="column q-pa-sm full-width bordered"
+          style="border-radius: 6px"
+        >
+          <div class="col">location</div>
+          <div class="col self-center bg-image q-pa-md">
+            <q-btn
+              rounded
+              style="
+                background: var(--blue-5);
+                color: var(--blue-0);
+                font-size: 12px;
+              "
+              class="flex flrx-center"
+              label="location"
+            ></q-btn>
+          </div>
+        </div>
+      </div>
+    </template>
+  </FormDialog>
+
+  <q-btn label="test" @click="openBranchDrawer = !openBranchDrawer" />
 </template>
 
 <style scoped>
+.bg-image {
+  background-image: url(/map.png);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+
 .branch-main-variable-color {
   --_color-branch-tree-text: var(--blue-6-hsl);
   --_color-branch-title: var(--blue-10-hsl);