diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index efaee56f..30d95df3 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -467,26 +467,29 @@ onMounted(async () => {
     </AppBox>
 
     <AppBox bordered style="width: 100%" v-if="!branchData?.total">
-      <div class="column">
-        <div class="col-1 self-end">
-          <TooltipComponent
-            title="branchNoMainOfficeYet"
-            caption="branchClickToCreateMainOffice"
-            imgSrc="img-table-"
-          />
-        </div>
-        <div class="col self-center" style="display: flex; align-items: center">
-          <AddButton
-            :label="'สร้างสำนักงานใหญ่'"
-            @trigger="() => openDialog()"
-          />
-        </div>
+      <div class="row justify-end">
+        <TooltipComponent
+          title="branchNoMainOfficeYet"
+          caption="branchClickToCreateMainOffice"
+          imgSrc="img-table-"
+        />
+      </div>
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 40vh;
+        "
+      >
+        <AddButton :label="'สร้างสำนักงานใหญ่'" @trigger="() => openDialog()" />
       </div>
     </AppBox>
 
     <AppBox
       class="bordered branch-container no-padding"
       :class="{ dark: $q.dark.isActive }"
+      v-if="branchData && branchData.total > 0"
     >
       <AppBox class="bg-card-branch-title" style="border-radius: 0">
         <div class="row items-center">