diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index fa768248..310dffd3 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -24,6 +24,7 @@ import useOptionStore from 'src/stores/options';
 import FormServiceProperties from 'components/04_product-service/FormServiceProperties.vue';
 import InfoForm from 'components/02_personnel-management/InfoForm.vue';
 import NoData from 'components/NoData.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 import useFlowStore from 'src/stores/flow';
 import { Status } from 'src/stores/types';
@@ -210,6 +211,8 @@ const pageSizeProduct = ref<number>(30);
 const currentPageService = ref<number>(1);
 const maxPageService = ref<number>(1);
 const pageSizeService = ref<number>(30);
+const totalType = ref<number>(0);
+const totalGroup = ref<number>(0);
 
 // เก็บ id ที่เข้ามา
 const currentId = ref<string>('');
@@ -293,6 +296,7 @@ async function fetchListType() {
 
   if (res) {
     currentPageType.value = res.page;
+    totalType.value = res.total;
     maxPageType.value = Math.ceil(res.total / pageSizeType.value);
     productType.value = res.result;
   }
@@ -313,6 +317,7 @@ async function fetchListGroups() {
 
   if (res) {
     currentPageGroup.value = res.page;
+    totalGroup.value = res.total;
     maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value);
     productGroup.value = res.result;
   }
@@ -959,16 +964,6 @@ watch(currentStatus, async () => {
   flowStore.rotate();
 });
 
-watch(currentPageGroup, async () => {
-  await fetchListGroups();
-  flowStore.rotate();
-});
-
-watch(currentPageType, async () => {
-  await fetchListType();
-  flowStore.rotate();
-});
-
 watch(currentPageServiceAndProduct, async () => {
   await fetchListOfProductAndService();
   flowStore.rotate();
@@ -1292,6 +1287,7 @@ watch(inputSearchProductAndService, async () => {
               "
               @on-click="
                 async () => {
+                  inputSearch = undefined;
                   pathTypeName = v.name;
                   currentIdType = v.id;
                   productMode = 'service';
@@ -1367,29 +1363,49 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             v-if="productMode === 'group'"
-            class="flex justify-center q-pt-xl"
+            class="flex justify-between q-pt-xl"
           >
-            <q-pagination
-              claess="pagination"
-              v-model="currentPageGroup"
-              :max="maxPageGroup"
-              direction-links
-              active-color="primary"
-              gutter="sm"
+            <div class="app-text-muted">
+              {{
+                $t('recordsPage', {
+                  resultcurrentPage: productGroup?.length,
+                  total: totalGroup,
+                })
+              }}
+            </div>
+            <PaginationComponent
+              v-model:current-page="currentPageGroup"
+              v-model:max-page="maxPageGroup"
+              :fetch-data="
+                async () => {
+                  await fetchListGroups();
+                  flowStore.rotate();
+                }
+              "
             />
           </div>
 
           <div
             v-if="productMode === 'type'"
-            class="flex justify-center q-pt-xl"
+            class="flex justify-between q-pt-xl"
           >
-            <q-pagination
-              claess="pagination"
-              v-model="currentPageType"
-              :max="maxPageType"
-              direction-links
-              active-color="primary"
-              gutter="sm"
+            <div class="app-text-muted">
+              {{
+                $t('recordsPage', {
+                  resultcurrentPage: productType?.length,
+                  total: totalType,
+                })
+              }}
+            </div>
+            <PaginationComponent
+              v-model:current-page="currentPageType"
+              v-model:max-page="maxPageType"
+              :fetch-data="
+                async () => {
+                  await fetchListTypes();
+                  flowStore.rotate();
+                }
+              "
             />
           </div>
         </template>