diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 6b3ffa0a..72fcd87c 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -335,6 +335,21 @@ const itemCard = [
   },
 ];
 
+async function toggleStatusProduct(id: string, status: Status) {
+  await editProduct(id, {
+    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
+  });
+
+  await fetchListOfProduct(currentIdType.value);
+}
+
+async function toggleStatusService(id: string, status: Status) {
+  await editService(id, {
+    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
+  });
+
+  await fetchListOfService();
+}
 async function toggleStatusType(id: string, status: Status) {
   await editProductServiceType(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
@@ -1202,6 +1217,11 @@ watch(currentStatus, async () => {
               typeProduct="product"
               :title="i.name"
               :isDisabled="i.status === 'INACTIVE' ? true : false"
+              @toggleStatus="
+                () => {
+                  toggleStatusProduct(i.id, i.status);
+                }
+              "
               @menuViewDetail="
                 () => {
                   currentIdProduct = i.id;
@@ -1255,6 +1275,11 @@ watch(currentStatus, async () => {
               :title="i.name"
               :isDisabled="i.status === 'INACTIVE' ? true : false"
               :created-at="i.createdAt"
+              @toggleStatus="
+                () => {
+                  toggleStatusService(i.id, i.status);
+                }
+              "
               @menuViewDetail="
                 () => {
                   currentIdService = i.id;
diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index 406150e0..3e0bbd8e 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -303,7 +303,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
   }
 
   async function createProduct(data: ProductCreate) {
-    const { image, ...payload } = data;
+    const { image, status, ...payload } = data;
 
     const res = await api.post<ProductCreate & { imageUploadUrl: string }>(
       '/product',
@@ -340,7 +340,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
 
   async function editProduct(
     productId: string,
-    data: ProductCreate & { status: string },
+    data: Partial<ProductCreate & { status: string }>,
   ) {
     const { image, code, ...payload } = data;
 
@@ -502,7 +502,10 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     }
   }
 
-  async function editService(serviceId: string, data: ServiceCreate) {
+  async function editService(
+    serviceId: string,
+    data: Partial<ServiceCreate & { status: string }>,
+  ) {
     const { image, code, ...payload } = data;
 
     const res = await api.put<ServiceCreate & { imageUploadUrl: string }>(