diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 2ebbde06..b0efa94d 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -21,6 +21,7 @@ const {
   fetchStatsProductGroup,
   fetchListProductService,
   createProductService,
+  deleteProductService,
 } = productServiceStore;
 
 import ItemCard from 'src/components/ItemCard.vue';
@@ -77,6 +78,8 @@ const formData = ref<ProductGroupCreate>({
   code: '',
 });
 
+const currentId = ref<string>('');
+
 async function submitType() {
   console.log(formData.value);
 }
@@ -103,6 +106,13 @@ async function deleteProductById() {
     persistent: true,
     message: t('deleteConfirmMessage'),
     action: async () => {
+      if (isType.value) {
+        // Product Type
+      } else {
+        // Product Group
+        await deleteProductService(currentId.value);
+        await fetchListGroups();
+      }
       console.log('deleted');
       drawerInfo.value = false;
     },
@@ -124,11 +134,11 @@ function clearForm() {
 async function submitGroup() {
   await createProductService(formData.value);
 
-  await fetchList();
+  await fetchListGroups();
   clearForm();
 }
 
-async function fetchList() {
+async function fetchListGroups() {
   const res = await fetchListProductService();
 
   if (res) {
@@ -137,7 +147,7 @@ async function fetchList() {
 }
 
 onMounted(async () => {
-  await fetchList();
+  await fetchListGroups();
 });
 </script>
 
@@ -253,9 +263,15 @@ onMounted(async () => {
             :date="cardTypeData.date"
             :status="v.status"
             :color="cardTypeData.color"
-            @view-detail="drawerInfo = true"
+            @view-detail="
+              () => {
+                currentId = v.id;
+                drawerInfo = true;
+              }
+            "
             @on-click="
               () => {
+                currentId = v.id;
                 if (isType === true) drawerInfo = true;
               }
             "
@@ -267,9 +283,15 @@ onMounted(async () => {
             :date="new Date(v.updatedAt)"
             :status="v.status"
             color="var(--pink-6)"
-            @view-detail="drawerInfo = true"
+            @view-detail="
+              () => {
+                currentId = v.id;
+                drawerInfo = true;
+              }
+            "
             @on-click="
               () => {
+                currentId = v.id;
                 if (isType === false) isType = true;
               }
             "