diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 97cf311d..b5ffcace 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -10,36 +10,42 @@ import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
 import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
+import FormDialog from 'src/components/FormDialog.vue';
+import FormBranchInformation from 'src/components/01_branch-management/FormBranchInformation.vue';
+import FormLocation from 'src/components/01_branch-management/FormLocation.vue';
+import FormQr from 'src/components/01_branch-management/FormQr.vue';
+import FormBranchContact from 'src/components/01_branch-management/FormBranchContact.vue';
 
-// import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
-import { BranchWithChildren } from 'stores/branch/types';
+import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
 import { watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
-// const profileFile = ref<File | undefined>(undefined);
-// const imageUrl = ref<string | null>();
+const modal = ref<boolean>(false);
 
-// const inputFile = (() => {
-//   const element = document.createElement('input');
-//   element.type = 'file';
-//   element.accept = 'image/*';
-//
-//   const reader = new FileReader();
-//   reader.addEventListener('load', () => {
-//     if (typeof reader.result === 'string') imageUrl.value = reader.result;
-//   });
-//
-//   element.addEventListener('change', () => {
-//     profileFile.value = element.files?.[0];
-//     if (profileFile.value) {
-//       reader.readAsDataURL(profileFile.value);
-//     }
-//   });
-//
-//   return element;
-// })();
+const profileFile = ref<File | undefined>(undefined);
+const imageUrl = ref<string | null>('');
+
+const inputFile = (() => {
+  const element = document.createElement('input');
+  element.type = 'file';
+  element.accept = 'image/*';
+
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    if (typeof reader.result === 'string') imageUrl.value = reader.result;
+  });
+
+  element.addEventListener('change', () => {
+    profileFile.value = element.files?.[0];
+    if (profileFile.value) {
+      reader.readAsDataURL(profileFile.value);
+    }
+  });
+
+  return element;
+})();
 
 const branchStore = useBranchStore();
 const { locale } = useI18n();
@@ -103,33 +109,86 @@ const fieldSelectedBranch = ref<{
 
 const stats = ref<{ count: number; label: string }[]>([]);
 
-// const defaultFormData = {
-//   headOfficeId: null,
-//   taxNo: '',
-//   nameEN: '',
-//   name: '',
-//   addressEN: '',
-//   address: '',
-//   zipCode: '',
-//   email: '',
-//   telephoneNo: '',
-//   longitude: '',
-//   latitude: '',
-//   subDistrictId: '',
-//   districtId: '',
-//   provinceId: '',
-//   contactName: '',
-//   contact: [] as string[],
-// };
+const defaultFormData = {
+  headOfficeId: null,
+  taxNo: '',
+  nameEN: '',
+  name: '',
+  addressEN: '',
+  address: '',
+  zipCode: '',
+  email: '',
+  contactName: '',
+  contact: '',
+  telephoneNo: '',
+  longitude: '',
+  latitude: '',
+  subDistrictId: '',
+  districtId: '',
+  provinceId: '',
+  lineId: '',
+};
 
-// const formData = ref<BranchCreate & { contact: string[] }>(
-//   structuredClone(defaultFormData),
-// );
+const formDialogRef = ref();
+const formType = ref<'create' | 'edit' | 'delete'>('create');
+const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
+const codeHq = ref<string>('');
+const formData = ref<Omit<BranchCreate, 'qrCodeImage'>>(
+  structuredClone(defaultFormData),
+);
 
-// function clearData() {
-//   formData.value = structuredClone(defaultFormData);
-//   profileFile.value = undefined;
-// }
+function openDialog() {
+  modal.value = true;
+}
+
+function triggerCreate(type: string, code?: string) {
+  clearData();
+  if (code) {
+    codeHq.value = code;
+  }
+  if (type === 'subBranch') {
+    formTypeBranch.value = 'subBranch';
+  } else {
+    formTypeBranch.value = 'headOffice';
+  }
+
+  formType.value = 'create';
+  openDialog();
+}
+
+async function onSubmit() {
+  if (formTypeBranch.value === 'headOffice') {
+    if (formType.value === 'create' && profileFile.value) {
+      await branchStore.create({
+        ...formData.value,
+        qrCodeImage: profileFile.value,
+      });
+      await branchStore.fetchList({ pageSize: 99999 });
+      modal.value = false;
+    }
+  } else if (formTypeBranch.value === 'subBranch') {
+    if (formType.value === 'create' && profileFile.value) {
+    }
+  }
+}
+
+function clearData() {
+  formData.value = structuredClone(defaultFormData);
+  profileFile.value = undefined;
+}
+
+function changeTitle(
+  formType: 'edit' | 'create' | 'delete',
+  typeBranch: 'headOffice' | 'subBranch',
+) {
+  if (typeBranch === 'headOffice') {
+    return formType === 'create' ? 'เพิ่มสำนักงานใหญ่' : 'แก้ไขสำนักงานใหญ่';
+  }
+  if (typeBranch === 'subBranch') {
+    return formType === 'create' ? 'เพิ่มสาขา' : 'แก้ไขสาขา';
+  }
+  return '';
+}
 </script>
 
 <template>
@@ -209,6 +268,7 @@ const stats = ref<{ count: number; label: string }[]>([]);
                 icon="pixelarticons:plus"
                 height="26"
                 class="color-icon-plus cursor-pointer"
+                @click="triggerCreate('headOffice')"
               />
             </div>
 
@@ -439,6 +499,72 @@ const stats = ref<{ count: number; label: string }[]>([]);
       </template>
     </AppBox>
   </div>
+
+  <FormDialog
+    ref="formDialogRef"
+    v-model:modal="modal"
+    v-model:address="formData.address"
+    v-model:addressEN="formData.addressEN"
+    v-model:province-id="formData.provinceId"
+    v-model:district-id="formData.districtId"
+    v-model:sub-district-id="formData.subDistrictId"
+    title="เพิ่มสำนักงานใหญ่"
+    :titleFormAddress="`ข้อมูลที่อยู่สำนักงานใหญ่`"
+    :addressSeparator="true"
+    :submit="
+      () => {
+        onSubmit();
+      }
+    "
+  >
+    <template #information>
+      <FormBranchInformation
+        v-model:code="codeHq"
+        v-model:taxNo="formData.taxNo"
+        v-model:name="formData.name"
+        v-model:nameEN="formData.nameEN"
+        :separator="true"
+        :dense="true"
+        :outlined="true"
+        title="formDialogTitleInformation"
+      />
+    </template>
+
+    <template #person>
+      <FormBranchContact
+        v-model:telephone-no="formData.telephoneNo"
+        v-model:contact="formData.contact"
+        v-model:email="formData.email"
+        v-model:contact-name="formData.contactName"
+        v-model:line-id="formData.lineId"
+        :separator="true"
+        title="formDialogTitleContact"
+        :dense="true"
+        :outlined="true"
+      />
+    </template>
+
+    <template #qr-code>
+      <FormQr
+        title="Qr code"
+        :separator="true"
+        :qr="imageUrl"
+        @upload="
+          () => {
+            inputFile.click();
+          }
+        "
+      />
+    </template>
+
+    <template #location>
+      <FormLocation
+        v-model:latitude="formData.latitude"
+        v-model:longitude="formData.longitude"
+        title="formDialogTitleLocation"
+      />
+    </template>
+  </FormDialog>
 </template>
 
 <style scoped>