diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index e2f91bae..3a924501 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -4,6 +4,7 @@ import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue';
 
 import useBranchStore from 'stores/branch';
+import useBranchContactStore from 'stores/branch-contact';
 import AppBox from 'components/app/AppBox.vue';
 import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
@@ -13,13 +14,23 @@ import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/D
 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';
+import { BranchContactCreate } from 'src/stores/branch-contact/types';
+
+import {
+  BranchWithChildren,
+  Branch,
+  BranchCreate,
+} from 'src/stores/branch/types';
 
 const branchStore = useBranchStore();
+const branchContactStore = useBranchContactStore();
+
 const { data: branchData } = storeToRefs(branchStore);
 
 const modal = ref<boolean>(false);
 
+const currentBranchIdEdit = ref<string>('');
+const currentBranchContactIdEdit = ref<string>('');
 const showCurrentBranch = ref<Branch>();
 
 const shape = ref<boolean>(false);
@@ -40,39 +51,35 @@ const optionsFilter: string[] = [
   'สถานะ',
 ];
 
-const formData = ref({
-  hqId: '',
-  branchId: '',
-  tel: '',
-  gender: '',
+const formDataContact = ref<BranchContactCreate>({
+  lineId: '',
+  telephoneNo: '',
+  qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
+});
+
+const formType = ref<'edit' | 'create' | 'delete'>('create');
+const typeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
+const branchContact = ref<BranchContactCreate[]>();
+const inputCode = ref<string>('');
+const formData = ref<BranchCreate>({
+  taxNo: '',
+  nameEN: '',
+  name: '',
+  addressEN: '',
+  address: '',
+  zipCode: '',
   email: '',
-  addressTitle: {
-    address: '',
-    province: '',
-    district: '',
-    subDistrict: '',
-    zip: '',
-  },
-  addressENTitle: {
-    address: '',
-    province: '',
-    district: '',
-    subDistrict: '',
-    zip: '',
-  },
+  telephoneNo: '',
+  longitude: '',
+  latitude: '',
+  subDistrictId: '',
+  districtId: '',
+  provinceId: '',
+  headOfficeId: null,
 });
 
 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 inputPhoneHeadOffice = ref<string>('');
-const inputEmailHeadOffice = ref<string>('');
-
 const expanded = ref<string[]>([]);
 
 const branchStat = ref<
@@ -119,6 +126,30 @@ const rowsBranch = ref<
   }[]
 >([]);
 
+function clearData() {
+  formData.value = {
+    taxNo: '',
+    nameEN: '',
+    name: '',
+    addressEN: '',
+    address: '',
+    zipCode: '',
+    email: '',
+    telephoneNo: '',
+    longitude: '',
+    latitude: '',
+    subDistrictId: '',
+    districtId: '',
+    provinceId: '',
+    headOfficeId: null,
+  };
+
+  formDataContact.value = {
+    lineId: '',
+    telephoneNo: '',
+    qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
+  };
+}
 function openDialog() {
   modal.value = true;
 }
@@ -127,6 +158,7 @@ async function getTree() {
   const result = await branchStore.fetchList<BranchWithChildren>({
     tree: true,
   });
+
   if (result) {
     treeData.value = result.result;
     rowsBranch.value = treeData.value
@@ -145,6 +177,175 @@ async function getTree() {
   }
 }
 
+function changeSubject(
+  formType: 'edit' | 'create' | 'delete',
+  typeBranch: 'headOffice' | 'subBranch',
+) {
+  if (typeBranch === 'headOffice') {
+    if (formType === 'create') {
+      return 'เพิ่มสำนักงานใหญ่';
+    }
+    return 'แก้ไขสำนักงานใหญ่';
+  }
+  if (typeBranch === 'subBranch') {
+    if (formType === 'create') {
+      return 'เพิ่มสาขา';
+    }
+    return 'แก้ไขสาขา';
+  }
+}
+
+function triggerCreateSubBranch(code: string, id: string) {
+  clearData();
+  formType.value = 'create';
+  typeBranch.value = 'subBranch';
+  inputCode.value = code;
+  formData.value.headOfficeId = id;
+  openDialog();
+}
+
+function triggerEditSubBranch(code: string, id: string) {
+  clearData();
+  formType.value = 'edit';
+  typeBranch.value = 'subBranch';
+  inputCode.value = code;
+  formData.value.headOfficeId = id;
+  currentBranchIdEdit.value = id;
+  fetchFormEditBranch(id);
+  fetchFormEditBranchContact(id);
+  openDialog();
+}
+
+function triggerDeleteSubBranch(id: string) {
+  clearData();
+  formType.value = 'delete';
+  typeBranch.value = 'subBranch';
+  formData.value.headOfficeId = id;
+  openDialog();
+}
+
+function triggerCreateHeadOffice() {
+  clearData();
+  formType.value = 'create';
+  typeBranch.value = 'headOffice';
+  openDialog();
+}
+
+function triggerEditHeadOffice(id: string) {
+  clearData();
+  formType.value = 'edit';
+  typeBranch.value = 'headOffice';
+  currentBranchIdEdit.value = id;
+  fetchFormEditBranch(id);
+  fetchFormEditBranchContact(id);
+  openDialog();
+}
+
+function triggerDeleteHeadOffice() {
+  clearData();
+  formType.value = 'delete';
+  typeBranch.value = 'headOffice';
+  openDialog();
+}
+
+async function fetchFormEditBranch(id: string) {
+  const result = await branchStore.fetchById<Branch>(id);
+  if (result) {
+    formData.value = {
+      taxNo: result.taxNo,
+      nameEN: result.nameEN,
+      name: result.name,
+      addressEN: result.addressEN,
+      address: result.address,
+      zipCode: result.zipCode,
+      email: result.email,
+      telephoneNo: result.telephoneNo,
+      longitude: result.longitude,
+      latitude: result.latitude,
+      subDistrictId: result.subDistrictId,
+      districtId: result.districtId,
+      provinceId: result.provinceId,
+      headOfficeId: result.headOfficeId,
+    };
+  }
+}
+
+async function fetchFormEditBranchContact(id: string) {
+  const result = await branchContactStore.fetchList(id);
+
+  if (result) {
+    const resultFilter = result.result.filter((v) => v.branchId === id);
+    currentBranchContactIdEdit.value = resultFilter[0].id;
+    formDataContact.value = {
+      lineId: resultFilter[0].lineId,
+      telephoneNo: resultFilter[0].telephoneNo,
+      qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
+    };
+  }
+}
+
+async function submitForm(
+  typeSubmit: 'create' | 'edit' | 'delete',
+  formTypeSubmit: 'headOffice' | 'subBranch',
+  inputBranchCreate: BranchCreate,
+  inputBranchContactCreate: BranchContactCreate,
+) {
+  if (formTypeSubmit === 'headOffice') {
+    if (typeSubmit === 'create') {
+      const result = await branchStore.create(inputBranchCreate);
+      if (result) {
+        await branchContactStore.create(result.id, inputBranchContactCreate);
+        getTree();
+        modal.value = false;
+        return;
+      }
+    }
+    if (typeSubmit === 'edit') {
+      await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
+      await branchContactStore.editById(
+        currentBranchIdEdit.value,
+        currentBranchContactIdEdit.value,
+        inputBranchContactCreate,
+      );
+
+      getTree();
+      modal.value = false;
+      return;
+    }
+    if (typeSubmit === 'delete') {
+      return;
+    }
+  }
+
+  if (formTypeSubmit === 'subBranch') {
+    if (typeSubmit === 'create') {
+      const result = await branchStore.create(inputBranchCreate);
+      if (result) {
+        await branchContactStore.create(result.id, inputBranchContactCreate);
+        getTree();
+        modal.value = false;
+        return;
+      }
+    }
+
+    if (typeSubmit === 'edit') {
+      await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
+      await branchContactStore.editById(
+        currentBranchIdEdit.value,
+        currentBranchContactIdEdit.value,
+        inputBranchContactCreate,
+      );
+      getTree();
+      modal.value = false;
+      return;
+    }
+
+    if (typeSubmit === 'delete') {
+      return;
+    }
+  }
+}
+
 async function fetchCard(id: string) {
   const result = await branchStore.fetchById<Branch>(id);
 
@@ -241,7 +442,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="openDialog()"
+            @click="triggerCreateHeadOffice()"
             class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
           >
             <div class="text-h4 q-mr-md">+</div>
@@ -281,7 +482,9 @@ onMounted(async () => {
 
                   <q-btn
                     class="color-brach-tree-btn"
-                    @click.stop
+                    @click.stop="
+                      triggerCreateSubBranch(prop.node.code, prop.node.id)
+                    "
                     v-if="prop.node.isHeadOffice"
                     size="lg"
                     flat
@@ -295,8 +498,9 @@ onMounted(async () => {
 
                     <Icon v-else icon="eva:file-add-outline" />
                   </q-btn>
-
+                  <!-- subBranch -->
                   <q-btn
+                    v-else
                     class="color-brach-tree-btn"
                     @click.stop
                     size="lg"
@@ -307,7 +511,14 @@ onMounted(async () => {
                     <Icon icon="ri:more-2-fill" width="16px" />
                     <q-menu class="bordered" style="width: 150px">
                       <q-list>
-                        <q-item clickable v-close-popup dense>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          dense
+                          @click="
+                            triggerEditSubBranch(prop.node.code, prop.node.id)
+                          "
+                        >
                           <q-item-section avatar class="q-py-sm">
                             <q-icon
                               style="color: hsl(var(--cyan-6-hsl))"
@@ -317,7 +528,75 @@ onMounted(async () => {
                           <q-item-section>{{ $t('edit') }}</q-item-section>
                         </q-item>
 
-                        <q-item clickable v-close-popup dense>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          dense
+                          @click="triggerDeleteSubBranch(prop.node.id)"
+                        >
+                          <q-item-section avatar class="q-py-sm">
+                            <q-icon
+                              style="color: hsl(var(--red-6-hsl))"
+                              name="mdi-trash-can-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section>{{ $t('delete') }}</q-item-section>
+                        </q-item>
+
+                        <q-item v-close-popup dense>
+                          <q-item-section class="q-py-sm">
+                            <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>
+
+                  <q-btn
+                    v-if="prop.node.isHeadOffice"
+                    class="color-brach-tree-btn"
+                    @click.stop
+                    size="lg"
+                    dense
+                    flat
+                    name="menu"
+                  >
+                    <Icon icon="ri:more-2-fill" width="16px" />
+                    <q-menu class="bordered" style="width: 150px">
+                      <q-list>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          dense
+                          @click="triggerEditHeadOffice(prop.node.id)"
+                        >
+                          <q-item-section avatar class="q-py-sm">
+                            <q-icon
+                              style="color: hsl(var(--cyan-6-hsl))"
+                              name="mdi-pencil-outline"
+                            />
+                          </q-item-section>
+                          <q-item-section>{{ $t('edit') }}</q-item-section>
+                        </q-item>
+
+                        <q-item
+                          clickable
+                          v-close-popup
+                          dense
+                          @click="triggerDeleteHeadOffice()"
+                        >
                           <q-item-section avatar class="q-py-sm">
                             <q-icon
                               style="color: hsl(var(--red-6-hsl))"
@@ -416,26 +695,32 @@ onMounted(async () => {
 
   <FormDialog
     v-model:modal="modal"
-    address-title="test"
-    addressENTitle=""
-    title="เพิ่มสำนักงานใหญ่"
-    addressLocaleTitle="ที่อยู่พนักงาน"
-    addressEngTitle="ที่อยู่พนักงาน ENG"
+    addressTitle="ที่อยู่"
+    addressENTitle="address"
+    v-model:address="formData.address"
+    v-modeladdressEN="formData.addressEN"
+    v-model:provinceId="formData.provinceId as string"
+    v-model:districtId="formData.districtId as string"
+    v-model:subDistrictId="formData.subDistrictId as string"
+    v-model:zipCode="formData.zipCode"
+    :title="changeSubject(formType, typeBranch) as string"
+    :submit="() => submitForm(formType, typeBranch, formData, formDataContact)"
   >
     <template #top>
       <div class="row full-width">
         <div class="col">
           <q-input
-            v-model="headOfficeCode"
+            v-model="inputCode"
             dense
             outlined
             label="รหัสสำนักงานใหญ่"
+            readonly
           />
         </div>
 
         <div class="col q-pl-md">
           <q-input
-            v-model="taxIDNumber"
+            v-model="formData.taxNo"
             dense
             outlined
             label="เลขประจำตัวผู้เสียภาษี"
@@ -446,7 +731,7 @@ onMounted(async () => {
       <div class="row full-width">
         <div class="col">
           <q-input
-            v-model="headOfficeName"
+            v-model="formData.name"
             dense
             outlined
             label="ชื่อสำนักงานใหญ่"
@@ -455,7 +740,7 @@ onMounted(async () => {
 
         <div class="col q-pl-md">
           <q-input
-            v-model="nameHeadOfficeEN"
+            v-model="formData.nameEN"
             dense
             outlined
             label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
@@ -469,14 +754,19 @@ onMounted(async () => {
         <div class="row q-mb-md">
           <div class="col">
             <q-input
-              v-model="inputPhone"
+              v-model="formDataContact.telephoneNo"
               dense
               outlined
               label="เบอร์โทรศัพท์"
             />
           </div>
           <div class="col q-pl-md">
-            <q-input v-model="inputIdLine" dense outlined label="id line" />
+            <q-input
+              v-model="formDataContact.lineId"
+              dense
+              outlined
+              label="id line"
+            />
           </div>
         </div>
 
@@ -522,7 +812,7 @@ onMounted(async () => {
         <div class="row full-width q-pb-md">
           <div class="col q-pr-md">
             <q-input
-              v-model="inputPhoneHeadOffice"
+              v-model="formData.telephoneNo"
               dense
               outlined
               label="เบอร์โทรศัพท์สำนักงานใหฐ่"
@@ -530,7 +820,7 @@ onMounted(async () => {
           </div>
           <div class="col">
             <q-input
-              v-model="inputEmailHeadOffice"
+              v-model="formData.email"
               dense
               outlined
               label="อีเมลติดต่อสำนักงานใหญ่ "