diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index b5ffcace..f3d60952 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -132,7 +132,7 @@ const defaultFormData = {
 const formDialogRef = ref();
 const formType = ref<'create' | 'edit' | 'delete'>('create');
 const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
-const codeHq = ref<string>('');
+const codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
 const formData = ref<Omit<BranchCreate, 'qrCodeImage'>>(
   structuredClone(defaultFormData),
 );
@@ -141,15 +141,18 @@ function openDialog() {
   modal.value = true;
 }
 
-function triggerCreate(type: string, code?: string) {
+function triggerCreate(type: string, id?: string, code?: string) {
   clearData();
-  if (code) {
-    codeHq.value = code;
-  }
-  if (type === 'subBranch') {
+
+  if (type === 'subBranch' && id && code) {
     formTypeBranch.value = 'subBranch';
+    codeHq.value = {
+      id: id,
+      code: code,
+    };
   } else {
     formTypeBranch.value = 'headOffice';
+    codeHq.value = { id: '', code: '' };
   }
 
   formType.value = 'create';
@@ -168,6 +171,14 @@ async function onSubmit() {
     }
   } else if (formTypeBranch.value === 'subBranch') {
     if (formType.value === 'create' && profileFile.value) {
+      formData.value.headOfficeId = codeHq.value.id;
+
+      await branchStore.create({
+        ...formData.value,
+        qrCodeImage: profileFile.value,
+      });
+      await branchStore.fetchList({ pageSize: 99999 });
+      modal.value = false;
     }
   }
 }
@@ -293,7 +304,14 @@ function changeTitle(
                   >
                     <span>{{ node.name }}</span>
                     <div class="q-gutter-xs flex no-wrap" @click.stop>
-                      <q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
+                      <q-btn
+                        @click.stop="
+                          triggerCreate('subBranch', node.id, node.code)
+                        "
+                        icon="mdi-file-plus-outline"
+                        fab-mini
+                        unelevated
+                      />
                       <q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
                         <q-menu class="bordered">
                           <q-list v-close-popup>
@@ -519,7 +537,7 @@ function changeTitle(
   >
     <template #information>
       <FormBranchInformation
-        v-model:code="codeHq"
+        v-model:code="codeHq.code"
         v-model:taxNo="formData.taxNo"
         v-model:name="formData.name"
         v-model:nameEN="formData.nameEN"