diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 0eb893f9..e7334856 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -262,6 +262,7 @@ async function triggerEdit(
   openFormType: string,
   id: string,
   typeBranch: 'headOffice' | 'subBranch',
+  code?: string,
 ) {
   await fetchBranchById(id);
   if (openFormType === 'form') {
@@ -269,10 +270,16 @@ async function triggerEdit(
     openDialog();
   }
   if (openFormType === 'drawer') {
+    console.log(code);
+
     formType.value = 'view';
     openDrawer();
   }
 
+  if (typeBranch === 'headOffice') {
+    formData.value.codeHeadOffice = code;
+  }
+
   const currentRecord = branchData.value.result.find((x) => x.id === id);
 
   if (!currentRecord) return;
@@ -287,6 +294,8 @@ async function triggerEdit(
       (x) => x.id === currentRecord.headOfficeId,
     );
 
+    formData.value.codeHeadOffice = currentRecordHead?.code;
+
     if (currentRecordHead) {
       currentHq.value.id = currentRecordHead.id;
       currentHq.value.code = currentRecordHead.code;
@@ -294,6 +303,7 @@ async function triggerEdit(
       currentHq.value = currentEdit.value;
     }
   }
+
   formTypeBranch.value = typeBranch;
 }
 
@@ -320,6 +330,8 @@ function triggerDelete(id: string) {
 
 async function onSubmit() {
   if (formType.value === 'edit') {
+    delete formData.value['codeHeadOffice'];
+
     await branchStore.editById(
       currentEdit.value.id,
       {
@@ -556,7 +568,12 @@ watch(locale, () => {
                               :id="`view-detail-btn-${node.name}-view`"
                               @click.stop="
                                 if (node.isHeadOffice) {
-                                  triggerEdit('drawer', node.id, 'headOffice');
+                                  triggerEdit(
+                                    'drawer',
+                                    node.id,
+                                    'headOffice',
+                                    node.code,
+                                  );
                                 } else {
                                   triggerEdit('drawer', node.id, 'subBranch');
                                 }
@@ -576,6 +593,7 @@ watch(locale, () => {
                                 {{ $t('viewDetail') }}
                               </span>
                             </q-item>
+
                             <q-item
                               :id="`view-detail-btn-${node.name}-edit`"
                               clickable
@@ -585,7 +603,12 @@ watch(locale, () => {
                               @click="
                                 () => {
                                   if (node.isHeadOffice) {
-                                    triggerEdit('form', node.id, 'headOffice');
+                                    triggerEdit(
+                                      'form',
+                                      node.id,
+                                      'headOffice',
+                                      node.code,
+                                    );
                                   } else {
                                     triggerEdit('form', node.id, 'subBranch');
                                   }
@@ -851,12 +874,14 @@ watch(locale, () => {
                 :badge-field="['branchLabelStatus']"
                 :inactive="item.status === 'INACTIVE'"
                 @view-detail="
-                  (v) =>
+                  (v) => {
                     triggerEdit(
                       'drawer',
                       v.id,
                       v.isHeadOffice ? 'headOffice' : 'subBranch',
-                    )
+                      v.code,
+                    );
+                  }
                 "
               />
             </div>
@@ -986,7 +1011,7 @@ watch(locale, () => {
       >
         <template #information>
           <FormBranchInformation
-            v-model:code="currentHq.code"
+            v-model:code="formData.codeHeadOffice"
             v-model:code-sub-branch="currentEdit.code"
             v-model:taxNo="formData.taxNo"
             v-model:name="formData.name"