diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d56376aa..5dd3695d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1601,7 +1601,9 @@ watch([inputSearch, currentStatus], async () => {
           >
             <div class="col-4">
               <div class="row items-center">
-                <div style="width: 80px">{{ $t('showing') }}</div>
+                <div class="app-text-muted" style="width: 80px">
+                  {{ $t('showing') }}
+                </div>
                 <div>
                   <q-btn-dropdown dense unelevated :label="pageSize">
                     <q-list>
@@ -1696,8 +1698,37 @@ watch([inputSearch, currentStatus], async () => {
               @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
             />
 
-            <div class="row justify-between q-pt-md">
-              <div class="app-text-muted">
+            <div class="col-4 row justify-center">
+              <div class="col-4">
+                <div class="row items-center">
+                  <div class="app-text-muted" style="width: 80px">
+                    {{ $t('showing') }}
+                  </div>
+                  <div>
+                    <q-btn-dropdown dense unelevated :label="pageSize">
+                      <q-list>
+                        <q-item
+                          v-for="v in [10, 30, 50, 100, 500, 1000]"
+                          clickable
+                          v-close-popup
+                          @click="
+                            async () => {
+                              pageSize = v;
+                              await fetchListEmployee();
+                            }
+                          "
+                        >
+                          <q-item-section>
+                            <q-item-label>{{ v }}</q-item-label>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-btn-dropdown>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-4 row justify-center app-text-muted">
                 {{
                   $t('recordsPage', {
                     resultcurrentPage: listEmployee.length,
@@ -1705,16 +1736,18 @@ watch([inputSearch, currentStatus], async () => {
                   })
                 }}
               </div>
-              <PaginationComponent
-                v-model:current-page="currentPageEmployee"
-                v-model:max-page="maxPageEmployee"
-                :fetch-data="
-                  async () => {
-                    await fetchListEmployee();
-                    flowStore.rotate();
-                  }
-                "
-              />
+              <div class="col-4 row justify-end">
+                <PaginationComponent
+                  v-model:current-page="currentPageEmployee"
+                  v-model:max-page="maxPageEmployee"
+                  :fetch-data="
+                    async () => {
+                      await fetchListEmployee();
+                      flowStore.rotate();
+                    }
+                  "
+                />
+              </div>
             </div>
           </div>
         </template>