diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e2e14d83..0a7ee1ac 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -206,7 +206,7 @@ onMounted(async () => {
       <div class="row q-col-gutter-lg">
         <div
           :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-          v-for="i in isType ? 4 : 6"
+          v-for="(v, i) in isType ? productGroup : productGroup"
           :key="i"
         >
           <ProductCardComponent
@@ -214,20 +214,28 @@ onMounted(async () => {
             :title="cardTypeData.title"
             :subtitle="cardTypeData.subtitle"
             :date="cardTypeData.date"
-            :status="cardTypeData.status"
+            :status="v.status"
             :color="cardTypeData.color"
             @view-detail="drawerInfo = true"
-            @on-click="drawerInfo = true"
+            @on-click="
+              () => {
+                if (isType === true) drawerInfo = true;
+              }
+            "
           />
           <ProductCardComponent
             v-else
-            :title="cardData.title"
-            :subtitle="cardData.subtitle"
-            :date="cardData.date"
-            :status="cardData.status"
-            :color="cardData.color"
+            :title="v.name"
+            :subtitle="v.code"
+            :date="new Date(v.updatedAt)"
+            :status="v.status"
+            color="var(--pink-6)"
             @view-detail="drawerInfo = true"
-            @on-click="isType = true"
+            @on-click="
+              () => {
+                if (isType === false) isType = true;
+              }
+            "
           />
         </div>
         <div