diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 80300205..d374f5be 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -43,7 +43,7 @@ withDefaults(
     no-padding
     bordered
     :class="{ 'is-add-product': isAddProduct }"
-    style="box-shadow: var(--shadow-3); width: 240px; height: 286px"
+    style="box-shadow: var(--shadow-3); min-height: 300px"
     @click="$emit('select', data)"
   >
     <div class="q-pa-sm">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e06e263e..8ccb34fe 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -132,6 +132,7 @@ const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 const productGroup = ref<ProductGroup[]>();
 const productType = ref<ProductGroup[]>();
 const product = ref<ProductList[]>();
+const resultSearchProduct = ref<ProductList[]>();
 const service = ref<Service[]>();
 
 const productAndServiceTab = ref<string>('all');
@@ -231,6 +232,16 @@ async function searchGroup() {
   }
 }
 
+async function searchProductAndService() {}
+
+async function searchProduct() {
+  const result = await fetchListProduct({ query: searchTotalProduct.value });
+
+  if (result) {
+    resultSearchProduct.value = result.result;
+  }
+}
+
 async function fetchListType() {
   const res = await fetchListProductServiceType({
     productGroupId: currentId.value,
@@ -669,7 +680,10 @@ onMounted(async () => {
   await fetchListGroups();
 });
 
-watch(productMode, () => (inputSearch.value = ''));
+watch(productMode, () => {
+  inputSearch.value = '';
+  currentStatus.value = 'All';
+});
 
 watch(currentStatus, async () => {
   if (productMode.value === 'group') {
@@ -1122,21 +1136,21 @@ watch(currentStatus, async () => {
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="console.log('test')"
+                    @click="currentStatus = 'All'"
                   >
                     {{ $t('all') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="console.log('test')"
+                    @click="currentStatus = 'ACTIVE'"
                   >
                     {{ $t('statusACTIVE') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="console.log('test')"
+                    @click="currentStatus = 'INACTIVE'"
                   >
                     {{ $t('statusINACTIVE') }}
                   </q-item>
@@ -1156,20 +1170,26 @@ watch(currentStatus, async () => {
 
         <div
           v-if="product && product.length > 0"
-          class="flex q-pa-md"
-          style="
-            min-height: 70vh;
-            background-color: var(--surface-2);
-            grid-template-columns: repeat(4, 1fr);
-            gap: var(--size-3);
-          "
+          class="row q-col-gutter-md flex q-pa-md"
         >
           <div
-            v-if="
-              productAndServiceTab === 'all' ||
-              productAndServiceTab === 'product'
-            "
-            v-for="i in product"
+            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+            v-for="i in productAndServiceTab === 'all' ||
+            productAndServiceTab === 'product'
+              ? product?.filter((i) => {
+                  if (currentStatus === 'All') {
+                    return true;
+                  }
+
+                  if (currentStatus === 'ACTIVE') {
+                    return i.status === 'ACTIVE' || i.status === 'CREATED';
+                  }
+
+                  if (currentStatus === 'INACTIVE') {
+                    return i.status === 'INACTIVE';
+                  }
+                })
+              : []"
             :key="i.id"
           >
             <TotalProductCardComponent
@@ -1181,7 +1201,7 @@ watch(currentStatus, async () => {
               :id="i.id"
               typeProduct="product"
               :title="i.name"
-              :status="i.status === 'INACTIVE' ? true : false"
+              :isDisabled="i.status === 'INACTIVE' ? true : false"
               @menuViewDetail="
                 () => {
                   currentIdProduct = i.id;
@@ -1209,11 +1229,23 @@ watch(currentStatus, async () => {
           </div>
 
           <div
-            v-if="
-              productAndServiceTab === 'all' ||
-              productAndServiceTab === 'service'
-            "
-            v-for="i in service"
+            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
+            v-for="i in productAndServiceTab === 'all' ||
+            productAndServiceTab === 'service'
+              ? service?.filter((i) => {
+                  if (currentStatus === 'All') {
+                    return true;
+                  }
+
+                  if (currentStatus === 'ACTIVE') {
+                    return i.status === 'ACTIVE' || i.status === 'CREATED';
+                  }
+
+                  if (currentStatus === 'INACTIVE') {
+                    return i.status === 'INACTIVE';
+                  }
+                })
+              : []"
             :key="i.id"
           >
             <TotalProductCardComponent
@@ -1221,7 +1253,7 @@ watch(currentStatus, async () => {
               :code="i.code"
               :id="i.id"
               :title="i.name"
-              :status="i.status === 'INACTIVE' ? true : false"
+              :isDisabled="i.status === 'INACTIVE' ? true : false"
               :created-at="i.createdAt"
               @menuViewDetail="
                 () => {
@@ -1337,7 +1369,11 @@ watch(currentStatus, async () => {
         selectProduct = [];
       }
     "
-    :close="() => {}"
+    :close="
+      () => {
+        searchTotalProduct = '';
+      }
+    "
   >
     <div
       style="
@@ -1348,7 +1384,7 @@ watch(currentStatus, async () => {
         gap: var(--size-3);
       "
     >
-      <div class="row items-center">
+      <div class="row items-center" style="max-height: 20%">
         <q-space />
         <q-input
           outlined
@@ -1357,7 +1393,7 @@ watch(currentStatus, async () => {
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="searchTotalProduct"
           debounce="500"
-          @update:model-value=""
+          @update:model-value="searchProduct()"
         >
           <template v-slot:prepend>
             <q-icon name="mdi-magnify" />
@@ -1365,19 +1401,13 @@ watch(currentStatus, async () => {
         </q-input>
       </div>
 
-      <AppBox
-        class="row full-width"
-        no-padding
-        style="
-          width: 75vw;
-          display: grid;
-          background: none;
-          grid-template-columns: repeat(4, 1fr);
-          gap: var(--size-3);
-        "
-      >
+      <AppBox class="row q-gutter-md" no-padding>
         <div
-          v-for="i in product?.filter((i) => {
+          class="co-2"
+          v-for="i in (!!searchTotalProduct
+            ? resultSearchProduct
+            : product
+          )?.filter((i) => {
             if (i.status === 'INACTIVE') {
               return false;
             }
@@ -1486,7 +1516,7 @@ watch(currentStatus, async () => {
 
   <!-- edit product -->
   <FormDialog
-    edit
+    :edit="!(formDataProduct.status === 'INACTIVE')"
     :isEdit="infoProductEdit"
     v-model:modal="dialogProductEdit"
     noAddress