diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 4ef1d80b..788a155e 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -507,36 +507,38 @@ watch(locale, () => {
             <template v-slot:before>
               <div class="rounded surface-1 full-height">
                 <div
-                  class="row bordered-b q-pl-sm text-weight-bold surface-2"
-                  style="height: 50px; display: flex; align-items: center"
+                  class="row bordered-b q-pl-sm text-weight-bold surface-2 items-center"
+                  style="height: 50px"
                 >
                   <div class="col">จัดการสาขาทั้งหมด</div>
 
-                  <div>
-                    <button
-                      id="hq-add-btn"
-                      style="border: none; background: transparent"
-                    >
-                      <Icon
-                        icon="pixelarticons:plus"
-                        height="26"
-                        class="cursor-pointer"
-                        @click="
-                          () => {
-                            if (!currentHq.id) {
-                              triggerCreate('headOffice');
-                            } else {
-                              triggerCreate(
-                                'subBranch',
-                                currentHq.id,
-                                currentHq.code,
-                              );
-                            }
+                  <q-btn
+                    round
+                    flat
+                    size="md"
+                    dense
+                    id="hq-add-btn"
+                    class="q-mr-sm"
+                  >
+                    <Icon
+                      icon="pixelarticons:plus"
+                      class="cursor-pointer"
+                      style="color: var(--foreground); scale: 1.5"
+                      @click="
+                        () => {
+                          if (!currentHq.id) {
+                            triggerCreate('headOffice');
+                          } else {
+                            triggerCreate(
+                              'subBranch',
+                              currentHq.id,
+                              currentHq.code,
+                            );
                           }
-                        "
-                      />
-                    </button>
-                  </div>
+                        }
+                      "
+                    />
+                  </q-btn>
                 </div>
 
                 <q-tree
@@ -544,6 +546,7 @@ watch(locale, () => {
                   node-key="id"
                   label-key="name"
                   children-key="branch"
+                  style="color: var(--foreground)"
                 >
                   <template #default-header="{ node }">
                     <div