diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e01a43a6..2767ceb5 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -101,18 +101,36 @@ const stat = ref<
     icon: string;
     count: number;
     label: string;
+    mode: 'group' | 'type' | 'service' | 'product';
     color: 'pink' | 'purple' | 'green' | 'orange';
   }[]
 >([
-  { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
+  { 
+    icon: 'mdi-folder',
+    count: 0, label: 'productAndService',
+    mode: 'group',
+    color: 'pink' 
+  },
   {
     icon: 'mdi-folder-table',
     count: 0,
     label: 'productAndServiceType',
+    mode: 'type',
     color: 'purple',
   },
-  { icon: 'mdi-server-network', count: 0, label: 'service', color: 'orange' },
-  { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
+  { 
+  icon: 'mdi-server-network',
+  count: 0, label: 'service',
+  mode: 'service',
+  color: 'orange'
+  
+  },
+  { 
+  icon: 'mdi-folder',
+  count: 0, label: 'product',
+  mode: 'product', 
+  color: 'green' 
+  },
 ]);
 
 const { t } = useI18n();
@@ -330,6 +348,8 @@ const totalProduct = ref<number>(0);
 const totalService = ref<number>(0);
 const totalProductAndService = ref<number>(0);
 
+const filterStat = ref<('group' | 'type' | 'service' | 'product')[]>([]);
+
 // แบ่งหน้า
 const currentPageGroup = ref<number>(1);
 const maxPageGroup = ref<number>(1);
@@ -1134,6 +1154,9 @@ onMounted(async () => {
       text: 'manage',
       handler: () => {
         productMode.value = 'group';
+        
+        
+        
       },
     },
   ];
@@ -1152,6 +1175,7 @@ watch(productMode, () => {
       text: 'manage',
       handler: () => {
         productMode.value = 'group';
+        filterStat.value = []
       },
     },
   ];
@@ -1162,6 +1186,9 @@ watch(productMode, () => {
       argsi18n: { name: pathGroupName.value },
       handler: () => {
         productMode.value = 'type';
+        filterStat.value = filterStat.value.filter((item) => {
+          return item !== 'type';
+        })
       },
     });
   }
@@ -1311,7 +1338,7 @@ watch(inputSearchProductAndService, async () => {
           <div style="display: inline-block">
             <StatCard
               label-i18n
-              :branch="stat"
+              :branch="stat.filter((v) => !filterStat.includes(v.mode) )"
               :dark="$q.dark.isActive"
               nowrap
             />
@@ -1514,6 +1541,7 @@ watch(inputSearchProductAndService, async () => {
                     :props="props"
                     @click="
                       async () => {
+                        filterStat.push(productMode);
                         if (productMode === 'type') {
                           pathTypeName = props.row.name;
                           currentIdType = props.row.id;
@@ -1532,6 +1560,8 @@ watch(inputSearchProductAndService, async () => {
                           await fetchListType();
                           flowStore.rotate();
                         }
+                
+                        
                       }
                     "
                   >
@@ -1882,6 +1912,7 @@ watch(inputSearchProductAndService, async () => {
                       "
                       @on-click="
                         async () => {
+                           filterStat.push(productMode);
                           if (productMode === 'type') {
                             pathTypeName = props.row.name;
                             currentIdType = props.row.id;