diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 7309a511..c90d7ce3 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -603,51 +603,54 @@ watch(locale, () => {
                       children-key="branch"
                       v-model:expanded="expandedTree"
                       color="info"
+                      selected-color="primary"
                       style="color: var(--foreground)"
                     >
                       <template #default-header="{ node }">
-                        <div class="column full-width">
+                        <div
+                          class="column full-width"
+                          @click.stop="
+                            () => {
+                              if (
+                                node.isHeadOffice &&
+                                node._count.branch !== 0 &&
+                                currentHq.id === node.id
+                              ) {
+                                expandedTree = expandedTree.filter(
+                                  (i) => node.id !== i,
+                                );
+                                fieldSelectedBranch.value = 'branchHQLabel';
+
+                                currentHq = {
+                                  id: '',
+                                  code: '',
+                                };
+                                return;
+                              }
+
+                              if (
+                                node.isHeadOffice &&
+                                node._count.branch !== 0 &&
+                                currentHq.id !== node.id
+                              ) {
+                                expandedTree = [];
+                                expandedTree.push(node.id);
+                                fieldSelectedBranch.value = '';
+                                inputSearch = '';
+                                currentHq = {
+                                  id: node.id,
+                                  code: node.code,
+                                };
+                                beforeBranch = {
+                                  id: '',
+                                  code: '',
+                                };
+                              }
+                            }
+                          "
+                        >
                           <div
                             class="row col items-center justify-between full-width no-wrap"
-                            @click.stop="
-                              () => {
-                                if (
-                                  node.isHeadOffice &&
-                                  node._count.branch !== 0 &&
-                                  currentHq.id === node.id
-                                ) {
-                                  expandedTree = expandedTree.filter(
-                                    (i) => node.id !== i,
-                                  );
-                                  fieldSelectedBranch.value = 'branchHQLabel';
-
-                                  currentHq = {
-                                    id: '',
-                                    code: '',
-                                  };
-                                  return;
-                                }
-
-                                if (
-                                  node.isHeadOffice &&
-                                  node._count.branch !== 0 &&
-                                  currentHq.id !== node.id
-                                ) {
-                                  expandedTree = [];
-                                  expandedTree.push(node.id);
-                                  fieldSelectedBranch.value = '';
-                                  inputSearch = '';
-                                  currentHq = {
-                                    id: node.id,
-                                    code: node.code,
-                                  };
-                                  beforeBranch = {
-                                    id: '',
-                                    code: '',
-                                  };
-                                }
-                              }
-                            "
                           >
                             <span>{{ node.name }}</span>
                             <div