diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d069f544..a3d58b2d 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -30,6 +30,7 @@ import DrawerInfo from 'components/DrawerInfo.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 const { locale } = useI18n();
 
@@ -712,13 +713,19 @@ watch(inputSearch, async () => await fetchUserList());
       >
         <NoData :not-found="!!inputSearch" />
       </div>
-      <div class="row flex-center q-pt-md" v-if="currentMaxPage > 0">
-        <q-pagination
-          v-model="currentPage"
-          :max="currentMaxPage"
-          direction-links
-          active-color="primary"
-          gutter="sm"
+      <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
+        <div class="app-text-muted">
+          {{
+            $t('recordsPage', {
+              resultcurrentPage: userData?.result.length,
+              total: userData?.total,
+            })
+          }}
+        </div>
+        <PaginationComponent
+          v-model:current-page="currentPage"
+          v-model:max-page="currentMaxPage"
+          :fetch-data="async () => await fetchUserList()"
         />
       </div>
     </AppBox>