diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 22dee8c3..c9ab8333 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -545,7 +545,7 @@ watch(inputSearch, async () => {
     </div>
 
     <!-- main -->
-    <AppBox bordered style="width: 100%; height: 70vh; overflow-y: auto">
+    <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
       <div class="row q-mb-md justify-between">
         <q-btn
           icon="mdi-tune-vertical-variant"
@@ -637,11 +637,7 @@ watch(inputSearch, async () => {
         @enter-card="openDialog"
         @toggle-status="toggleStatus"
       />
-      <div
-        class="column"
-        style="height: 100%"
-        v-if="userData && userData.total === 0"
-      >
+      <template v-if="userData && userData.total === 0">
         <div class="col-1 self-end">
           <div class="row">
             <TooltipComponent
@@ -651,14 +647,17 @@ watch(inputSearch, async () => {
             />
           </div>
         </div>
-        <div class="col self-center" style="display: flex; align-items: center">
+        <div
+          class="col self-center"
+          style="display: flex; flex-grow: 1; align-items: center"
+        >
           <AddButton
             :label="'personnelAdd'"
             :cyanOn="true"
             @trigger="openDialog('FORM')"
           />
         </div>
-      </div>
+      </template>
     </AppBox>
   </div>