diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 72fcd87c..37403231 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1187,20 +1187,111 @@ watch(currentStatus, async () => {
           class="row q-col-gutter-lg flex"
           style="padding: 20px"
         >
+          <!-- ACITVE or CREATED -->
           <div
             :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') {
+                  if (currentStatus === 'All' || currentStatus === 'ACTIVE') {
                     return i.status === 'ACTIVE' || i.status === 'CREATED';
                   }
+                })
+              : []"
+            :key="i.id"
+          >
+            <TotalProductCardComponent
+              :data="i"
+              :key="i.id"
+              :code="i.code"
+              :price="i.price"
+              :process="i.process"
+              :id="i.id"
+              typeProduct="product"
+              :title="i.name"
+              :isDisabled="i.status === 'INACTIVE' ? true : false"
+              @toggleStatus="
+                () => {
+                  toggleStatusProduct(i.id, i.status);
+                }
+              "
+              @menuViewDetail="
+                () => {
+                  currentIdProduct = i.id;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+              @menuEdit="
+                () => {
+                  currentIdProduct = i.id;
+                  infoProductEdit = true;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+              @viewDetail="
+                () => {
+                  currentIdProduct = i.id;
+                  infoProductEdit = false;
+                  assignFormDataProduct(i);
+                  dialogProductEdit = true;
+                }
+              "
+            />
+          </div>
 
-                  if (currentStatus === 'INACTIVE') {
+          <div
+            :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' || currentStatus === 'ACTIVE') {
+                    return i.status === 'ACTIVE' || i.status === 'CREATED';
+                  }
+                })
+              : []"
+            :key="i.id"
+          >
+            <TotalProductCardComponent
+              typeProduct="service"
+              :code="i.code"
+              :id="i.id"
+              :title="i.name"
+              :isDisabled="i.status === 'INACTIVE' ? true : false"
+              :created-at="i.createdAt"
+              @toggleStatus="
+                () => {
+                  toggleStatusService(i.id, i.status);
+                }
+              "
+              @menuViewDetail="
+                () => {
+                  currentIdService = i.id;
+                  infoServiceEdit = false;
+                  assignFormDataProductService(i.id);
+                  dialogServiceEdit = true;
+                }
+              "
+              @menuEdit="
+                () => {
+                  currentIdService = i.id;
+                  infoServiceEdit = true;
+                  assignFormDataProductService(i.id);
+                  dialogServiceEdit = true;
+                }
+              "
+            />
+          </div>
+
+          <!-- INACTIVE -->
+
+          <div
+            :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' || currentStatus === 'INACTIVE') {
                     return i.status === 'INACTIVE';
                   }
                 })
@@ -1253,15 +1344,7 @@ watch(currentStatus, async () => {
             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') {
+                  if (currentStatus === 'All' || currentStatus === 'INACTIVE') {
                     return i.status === 'INACTIVE';
                   }
                 })