diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 84ccfdb6..9243d3fb 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -78,9 +78,20 @@ const formData = ref<ProductCreate>({
 
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
-const resultSearchGroup = ref<Product>();
+const resultSearchGroup = ref<Product[]>();
 const resultSearchType = ref<Product>();
 
+async function searchGroup() {
+  const resultList = await fetchListProductService({
+    query: inputSearch.value,
+  });
+
+  if (resultList) {
+    resultSearchGroup.value = resultList;
+  }
+  console.log(resultSearchGroup.value);
+}
+
 async function fetchListType() {
   const res = await fetchListProductServiceType({
     productGroupId: currentId.value,
@@ -322,6 +333,13 @@ onMounted(async () => {
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="500"
+              @update:model-value="
+                productMode === 'group'
+                  ? searchGroup()
+                  : productMode === 'type'
+                    ? console.log('type')
+                    : ''
+              "
             >
               <template v-slot:prepend>
                 <q-icon name="mdi-magnify" />
@@ -368,7 +386,9 @@ onMounted(async () => {
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="(v, i) in productMode === 'type'
               ? productType
-              : productGroup"
+              : !!inputSearch
+                ? resultSearchGroup
+                : productGroup"
             :key="i"
           >
             <ProductCardComponent