diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 6b85996b..1485532e 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -573,10 +573,11 @@ watch(inputSearch, async () => await fetchUserList());
 
     <!-- main -->
     <div
-      class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
+      class="col surface-1 rounded justify-between column no-wrap"
+      style="overflow: hidden"
     >
-      <div>
-        <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
+      <div class="surface-2 bordered-b q-px-md q-py-sm">
+        <div class="row justify-end" style="gap: var(--size-2)">
           <q-input
             for="input-search"
             style="width: 250px"
@@ -631,6 +632,8 @@ watch(inputSearch, async () => await fetchUserList());
             </q-menu>
           </q-btn>
         </div>
+      </div>
+      <div class="col column scroll q-pa-md">
         <PersonCard
           :list="
             userData?.result
@@ -707,7 +710,7 @@ watch(inputSearch, async () => await fetchUserList());
       </div>
 
       <div
-        class="row justify-between items-center q-pt-md"
+        class="row justify-between items-center q-px-md q-py-sm"
         v-if="currentMaxPage > 0"
       >
         <div class="col-4">
@@ -716,7 +719,12 @@ watch(inputSearch, async () => await fetchUserList());
               {{ $t('showing') }}
             </div>
             <div>
-              <q-btn-dropdown dense unelevated :label="pageSize">
+              <q-btn-dropdown
+                dense
+                unelevated
+                :label="pageSize"
+                class="bordered q-pl-md"
+              >
                 <q-list>
                   <q-item
                     v-for="v in [10, 30, 50, 100, 500, 1000]"