diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index bc87fcb9..f10207ca 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -200,7 +200,7 @@ const maxPageGroup = ref<number>(1);
 const pageSizeGroup = ref<number>(30);
 const currentPageType = ref<number>(1);
 const maxPageType = ref<number>(1);
-const pageSizeType = ref<number>(1);
+const pageSizeType = ref<number>(30);
 const currentPageServiceAndProduct = ref<number>(1);
 const maxPageServiceAndProduct = ref<number>(1);
 const pageSizeServiceAndProduct = ref<number>(30);
@@ -239,17 +239,6 @@ const inputFile = (() => {
   return element;
 })();
 
-async function searchProductAndService() {
-  const res = await fetchListProductAndService({
-    query: inputSearchProductAndService.value,
-  });
-
-  if (res) {
-    productAndService.value = res.result;
-  }
-  flowStore.rotate();
-}
-
 async function searchProduct(isAdd: boolean = true) {
   const res = await fetchListProduct({
     query: inputSearchProductAndService.value,
@@ -272,22 +261,6 @@ async function searchProduct(isAdd: boolean = true) {
   flowStore.rotate();
 }
 
-async function searchService() {
-  const res = await fetchListService({
-    query: inputSearchProductAndService.value,
-  });
-
-  if (res) {
-    service.value = res.result.map((v) => {
-      return {
-        ...v,
-        type: 'service',
-      };
-    });
-  }
-  flowStore.rotate();
-}
-
 async function featchStatsService() {
   const resStatsService = await fetchStatsService();
 
@@ -366,7 +339,7 @@ async function fetchListOfProductIsAdd(productTypeId: string) {
   }
 }
 
-async function fetchListOfProduct(productTypeId: string) {
+async function fetchListOfProduct() {
   const res = await fetchListProduct({
     page: currentPageProduct.value,
     pageSize: pageSizeProduct.value,
@@ -379,10 +352,11 @@ async function fetchListOfProduct(productTypeId: string) {
         : currentStatus.value === 'ACTIVE'
           ? 'ACTIVE'
           : undefined,
-    productTypeId,
+    productTypeId: currentIdType.value,
   });
 
   if (res) {
+    totalProduct.value = res.total;
     currentPageProduct.value = res.page;
     maxPageProduct.value = Math.ceil(res.total / pageSizeProduct.value);
 
@@ -412,6 +386,7 @@ async function fetchListOfService() {
   });
 
   if (res) {
+    totalService.value = res.total;
     currentPageService.value = res.page;
     maxPageService.value = Math.ceil(res.total / pageSizeService.value);
     service.value = res.result.map((v) => {
@@ -463,7 +438,7 @@ async function toggleStatusProduct(id: string, status: Status) {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
   });
 
-  await fetchListOfProduct(currentIdType.value);
+  await fetchListOfProduct();
   flowStore.rotate();
 }
 
@@ -497,6 +472,9 @@ async function fetchListOfProductAndService() {
   const res = await fetchListProductAndService({
     page: currentPageServiceAndProduct.value,
     pageSize: pageSizeServiceAndProduct.value,
+    query: !!inputSearchProductAndService.value
+      ? inputSearchProductAndService.value
+      : undefined,
     status:
       currentStatus.value === 'INACTIVE'
         ? 'INACTIVE'
@@ -561,7 +539,7 @@ async function deleteTypeOfProduct(id?: string) {
       const res = await deleteProduct(id ?? currentIdProduct.value);
 
       if (productAndServiceTab.value === 'product') {
-        await fetchListOfProduct(currentIdType.value);
+        await fetchListOfProduct();
       }
       if (productAndServiceTab.value === 'all') {
         await fetchListOfProductAndService();
@@ -839,7 +817,7 @@ async function submitProduct() {
     await fetchListOfProductAndService();
   }
   if (productAndServiceTab.value === 'product') {
-    await fetchListOfProduct(currentIdType.value);
+    await fetchListOfProduct();
   }
 
   flowStore.rotate();
@@ -929,7 +907,7 @@ async function fetchStatus() {
     flowStore.rotate();
   }
   if (productAndServiceTab.value === 'product') {
-    await fetchListOfProduct(currentIdType.value);
+    await fetchListOfProduct();
     flowStore.rotate();
   }
 
@@ -939,21 +917,6 @@ async function fetchStatus() {
   }
 }
 
-async function fetchSearch() {
-  if (productAndServiceTab.value === 'all') {
-    await searchProductAndService();
-    flowStore.rotate();
-  }
-  if (productAndServiceTab.value === 'product') {
-    await searchProduct(false);
-    flowStore.rotate();
-  }
-  if (productAndServiceTab.value === 'service') {
-    await searchService();
-    flowStore.rotate();
-  }
-}
-
 function cloneData() {
   if (!currentService.value) return;
   formDataProductService.value = {
@@ -1012,7 +975,7 @@ watch(currentPageServiceAndProduct, async () => {
 });
 
 watch(currentPageProduct, async () => {
-  await fetchListOfProduct(currentIdType.value);
+  await fetchListOfProduct();
   flowStore.rotate();
 });
 
@@ -1024,10 +987,28 @@ watch(currentPageService, async () => {
 watch(inputSearch, async () => {
   if (productMode.value === 'group') {
     await fetchListGroups();
+    flowStore.rotate();
   }
 
   if (productMode.value === 'type') {
     await fetchListType();
+    flowStore.rotate();
+  }
+});
+
+watch(inputSearchProductAndService, async () => {
+  if (productAndServiceTab.value === 'all') {
+    await fetchListOfProductAndService();
+    flowStore.rotate();
+  }
+  if (productAndServiceTab.value === 'product') {
+    await fetchListOfProduct();
+
+    flowStore.rotate();
+  }
+  if (productAndServiceTab.value === 'service') {
+    await fetchListOfService();
+    flowStore.rotate();
   }
 });
 </script>
@@ -1448,7 +1429,7 @@ watch(inputSearch, async () => {
                 async () => {
                   inputSearchProductAndService = '';
                   currentStatus = 'All';
-                  await fetchListOfProduct(currentIdType);
+                  await fetchListOfProduct();
                   flowStore.rotate();
                 }
               "
@@ -1518,11 +1499,6 @@ watch(inputSearch, async () => {
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearchProductAndService"
               debounce="250"
-              @update:model-value="
-                async () => {
-                  await fetchSearch();
-                }
-              "
             >
               <template v-slot:prepend>
                 <q-icon name="mdi-magnify" />
@@ -1591,7 +1567,7 @@ watch(inputSearch, async () => {
           class="flex justify-center items-center"
           style="min-height: 70vh; background-color: var(--surface-2)"
         >
-          <NoData />
+          <NoData :not-found="!!inputSearchProductAndService" />
         </div>
 
         <div
@@ -1658,11 +1634,7 @@ watch(inputSearch, async () => {
           </div>
         </div>
         <div
-          v-if="
-            productAndServiceTab === 'all' &&
-            productAndService.length > 0 &&
-            !inputSearchProductAndService
-          "
+          v-if="productAndServiceTab === 'all' && productAndService.length > 0"
           class="row justify-center q-pb-md"
         >
           <q-pagination
@@ -2250,7 +2222,7 @@ watch(inputSearch, async () => {
         dense
         @addProduct="
           async (index) => {
-            await fetchListOfProduct(currentIdType);
+            await fetchListOfProduct();
             currentWorkIndex = index;
             dialogTotalProduct = true;
           }