diff --git a/src/components/01_branch-management/DetailBranchDrawerComponent.vue b/src/components/01_branch-management/DetailBranchDrawerComponent.vue
index 857ee23f..c190e5e4 100644
--- a/src/components/01_branch-management/DetailBranchDrawerComponent.vue
+++ b/src/components/01_branch-management/DetailBranchDrawerComponent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Branch } from '../../stores/branch/types';
+import AppBox from '../app/AppBox.vue';
 
 defineProps<{
   data?: Branch;
@@ -22,8 +23,26 @@ const open = defineModel('open', { type: Boolean, default: false });
   >
     <q-toolbar class="q-mb-md q-pa-none">
       <q-toolbar-title>
-        <q-icon name="mdi-home" size="md" />
-        <span class="text-weight-bold q-pl-sm">รายละเอียดสำนักงานใหญ่</span>
+        <span class="text-weight-bold q-mr-sm">รายละเอียดสำนักงานใหญ่</span>
+
+        <q-btn
+          icon="mdi-pencil-outline"
+          class="app-text-info"
+          fab-mini
+          flat
+          @click.stop="$emit('triggerEdit', data)"
+        />
+        <q-btn
+          icon="mdi-trash-can-outline"
+          :class="{
+            'app-text-negative': data?.status === 'CREATED',
+            'app-text-muted': data?.status !== 'CREATED',
+          }"
+          :disable="data?.status !== 'CREATED'"
+          fab-mini
+          flat
+          @click.stop="$emit('triggerDelete', data)"
+        />
       </q-toolbar-title>
       <q-btn
         v-close-popup
@@ -38,7 +57,7 @@ const open = defineModel('open', { type: Boolean, default: false });
     </q-toolbar>
 
     <section class="q-mb-md">
-      <q-card class="bordered column q-pa-sm">
+      <AppBox class="column q-pa-sm" bordered>
         <div class="row card-details-row-height">
           <div class="col-3 color-text-static">รหัสสาขา</div>
           <div class="col-2">{{ data?.code }}</div>
@@ -109,11 +128,11 @@ const open = defineModel('open', { type: Boolean, default: false });
           <div class="col-3 color-text-static">Zip code</div>
           <div class="col-2">{{ data?.zipCode }}</div>
         </div>
-      </q-card>
+      </AppBox>
     </section>
 
     <section class="q-mb-md">
-      <q-card class="bordered q-pa-sm">
+      <AppBox class="q-pa-sm" bordered>
         <div class="row">
           <div class="col-8">
             <div class="row card-details-row-height">
@@ -148,7 +167,7 @@ const open = defineModel('open', { type: Boolean, default: false });
           <div class="col color-text-static">location</div>
           <div class="col"></div>
         </div>
-      </q-card>
+      </AppBox>
     </section>
   </q-drawer>
 </template>
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index a3cbd2b3..efaee56f 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -270,6 +270,7 @@ function triggerDeleteHeadOffice(id: string) {
 
 async function fetchFormEditBranch(id: string) {
   const result = await branchStore.fetchById<Branch>(id);
+
   if (result) {
     formData.value = {
       taxNo: result.taxNo,
@@ -303,12 +304,15 @@ 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;
-    urlQrCode.value = resultFilter[0].qrCodeImageUrl;
+    const first = result.result.pop();
+
+    if (!first) return;
+
+    currentBranchContactIdEdit.value = first.id;
+    urlQrCode.value = first.qrCodeImageUrl;
     formDataContact.value = {
-      lineId: resultFilter[0].lineId,
-      telephoneNo: resultFilter[0].telephoneNo,
+      lineId: first.lineId,
+      telephoneNo: first.telephoneNo,
     };
   }
 }
@@ -335,12 +339,21 @@ async function submitForm(
     }
     if (typeSubmit === 'edit') {
       await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
-      await branchContactStore.editById(
-        currentBranchIdEdit.value,
-        currentBranchContactIdEdit.value,
-        inputBranchContactCreate,
-        profileFile.value ? profileFile.value : undefined,
-      );
+
+      if (currentBranchIdEdit.value && currentBranchContactIdEdit.value) {
+        await branchContactStore.editById(
+          currentBranchIdEdit.value,
+          currentBranchContactIdEdit.value,
+          inputBranchContactCreate,
+          profileFile.value ? profileFile.value : undefined,
+        );
+      } else {
+        await branchContactStore.create(
+          currentBranchIdEdit.value,
+          inputBranchContactCreate,
+          profileFile.value ? profileFile.value : undefined,
+        );
+      }
 
       getTree();
       modal.value = false;
@@ -771,7 +784,8 @@ onMounted(async () => {
           style="overflow-y: auto"
         >
           <CardDetailsComponent
-            :data="showCurrentBranch as Branch"
+            v-if="showCurrentBranch"
+            :data="showCurrentBranch"
             class="q-pa-sm"
           />
         </div>
@@ -780,6 +794,21 @@ onMounted(async () => {
   </div>
 
   <DetailBranchDrawerComponent
+    @trigger-edit="
+      (v) => {
+        subBranch
+          ? triggerEditSubBranch(v.code, v.id)
+          : triggerEditHeadOffice(v.id);
+        openBranchDrawer = false;
+      }
+    "
+    @trigger-delete="
+      (v) => {
+        subBranch
+          ? triggerDeleteSubBranch(v.id)
+          : triggerDeleteHeadOffice(v.id);
+      }
+    "
     v-if="showCurrentBranch"
     v-model:open="openBranchDrawer"
     :data="showCurrentBranch"