diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index b123b1e5..7758706b 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -105,7 +105,7 @@ import { storeToRefs } from 'pinia';
 const { t } = useI18n();
 
 const inputSearch = ref<string>('');
-const searchTotalProduct = ref<string>('');
+const inputSearchProductAndService = ref<string>('');
 
 const currentStatusProduct = ref<boolean>(false);
 const drawerInfo = ref<boolean>(false);
@@ -241,13 +241,49 @@ async function searchGroup() {
   }
 }
 
-async function searchProductAndService() {}
+async function searchProductAndService() {
+  const res = await fetchListProductAndService({
+    query: inputSearchProductAndService.value,
+  });
 
-async function searchProduct() {
-  const result = await fetchListProduct({ query: searchTotalProduct.value });
+  if (res) {
+    productAndService.value = res.result;
+  }
+}
 
-  if (result) {
-    resultSearchProduct.value = result.result;
+async function searchProduct(isAdd: boolean = true) {
+  const res = await fetchListProduct({
+    query: inputSearchProductAndService.value,
+  });
+
+  if (res) {
+    if (isAdd) {
+      resultSearchProduct.value = res.result;
+    }
+
+    if (!isAdd) {
+      product.value = res.result.map((v) => {
+        return {
+          ...v,
+          type: 'product',
+        };
+      });
+    }
+  }
+}
+
+async function searchService() {
+  const res = await fetchListService({
+    query: inputSearchProductAndService.value,
+  });
+
+  if (res) {
+    service.value = res.result.map((v) => {
+      return {
+        ...v,
+        type: 'service',
+      };
+    });
   }
 }
 
@@ -806,6 +842,18 @@ async function fetchStatus() {
   }
 }
 
+async function fetchSearch() {
+  if (productAndServiceTab.value === 'all') {
+    await searchProductAndService();
+  }
+  if (productAndServiceTab.value === 'product') {
+    await searchProduct(false);
+  }
+  if (productAndServiceTab.value === 'service') {
+    await searchService();
+  }
+}
+
 onMounted(async () => {
   calculateStats();
   await fetchListGroups();
@@ -1286,8 +1334,13 @@ watch(currentStatus, async () => {
               :label="$t('search')"
               class="q-mr-md"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-              v-model="inputSearch"
+              v-model="inputSearchProductAndService"
               debounce="500"
+              @update:model-value="
+                async () => {
+                  await fetchSearch();
+                }
+              "
             >
               <template v-slot:prepend>
                 <q-icon name="mdi-magnify" />
@@ -1515,7 +1568,7 @@ watch(currentStatus, async () => {
     :close="
       () => {
         dialogTotalProduct = false;
-        searchTotalProduct = '';
+        inputSearchProductAndService = '';
       }
     "
   >
@@ -1527,7 +1580,7 @@ watch(currentStatus, async () => {
           dense
           :label="$t('search')"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
-          v-model="searchTotalProduct"
+          v-model="inputSearchProductAndService"
           debounce="500"
           @update:model-value="searchProduct()"
         >
@@ -1548,7 +1601,7 @@ watch(currentStatus, async () => {
           <div
             class="q-pa-xs"
             :class="`${$q.screen.gt.sm ? 'col-3 ' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-            v-for="i in (!!searchTotalProduct
+            v-for="i in (!!inputSearchProductAndService
               ? resultSearchProduct
               : product
             )?.filter((i) => {