diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index a24b296c..a3cbd2b3 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -39,6 +39,11 @@ const { data: branchData } = storeToRefs(branchStore);
 
 const modal = ref<boolean>(false);
 
+const currentHeadOfficeId = ref<string>();
+const currentHeadOfficeName = ref<{
+  nameTh: string;
+  nameEn: string;
+}>({ nameTh: '', nameEn: '' });
 const currentBranchIdEdit = ref<string>('');
 const currentBranchContactIdEdit = ref<string>('');
 const showCurrentBranch = ref<Branch>();
@@ -161,6 +166,8 @@ async function getTree() {
       }));
 
     subBranch.value = false;
+    showCurrentBranch.value = undefined;
+    currentHeadOfficeId.value = undefined;
   }
 }
 
@@ -391,6 +398,13 @@ async function fetchSubBranch(id: string) {
   });
 
   if (result) {
+    if (result.isHeadOffice) {
+      currentHeadOfficeId.value = result.id;
+      currentHeadOfficeName.value = {
+        nameTh: result.name,
+        nameEn: result.nameEN,
+      };
+    }
     rowsBranch.value = result.branch.map((v) => ({
       id: v.id,
       name: v.code,
@@ -401,6 +415,8 @@ async function fetchSubBranch(id: string) {
       type: v.isHeadOffice,
       status: v.status,
     }));
+
+    showCurrentBranch.value = undefined;
     subBranch.value = true;
     openCardDetails.value = false;
     openTableCard.value = true;
@@ -462,10 +478,39 @@ onMounted(async () => {
       <AppBox class="bg-card-branch-title" style="border-radius: 0">
         <div class="row items-center">
           <span
+            v-if="false"
             class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
           >
             {{ $t('headQuarters') }}
           </span>
+
+          <span class="col text-h7 text-weight-bold color-card-branch-title">
+            <div class="row" style="width: 300px">
+              <div class="column q-px-sm" @click="getTree()">ทั้งหมด</div>
+              <div class="column q-px-sm" v-if="currentHeadOfficeId">></div>
+              <div
+                class="column q-px-sm"
+                v-if="currentHeadOfficeId"
+                @click="fetchSubBranch(currentHeadOfficeId)"
+              >
+                {{ currentHeadOfficeName.nameTh }}
+              </div>
+
+              <div
+                class="column q-px-sm"
+                v-if="showCurrentBranch && !showCurrentBranch.isHeadOffice"
+              >
+                >
+              </div>
+              <div
+                class="column q-px-sm"
+                v-if="showCurrentBranch && !showCurrentBranch.isHeadOffice"
+              >
+                {{ showCurrentBranch.code }}
+              </div>
+            </div>
+          </span>
+
           <div class="col-3">
             <q-input
               class="bordered rounded q-px-md"
@@ -507,7 +552,18 @@ onMounted(async () => {
               >
                 <template #default-header="prop">
                   <div
-                    @click="fetchSubBranch(prop.node.id)"
+                    @click="
+                      () => {
+                        fetchSubBranch(prop.node.id);
+
+                        if (
+                          !expanded.includes(prop.node.name) &&
+                          expanded.length <= 1
+                        ) {
+                          expanded.push(prop.node.name);
+                        } else expanded[1] = prop.node.name;
+                      }
+                    "
                     class="q-px-sm color-brach-tree-text"
                     :class="{
                       'color-tree-active': expanded.includes(prop.node.name),