diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 09aca03..5ec507a 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {Button, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Typography} from "antd";
+import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
@@ -81,23 +81,7 @@ export const ProductComponent = observer((props) => {
                     {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
                 </Tag>
             ),
-        },
-        {
-            title: "Action",
-            key: "action",
-            render: (text, record) => (
-                <Space size="middle">
-                    <Button
-                        onClick={() => handleEditButton(record)}
-                    >Edit</Button>
-                    <Button
-                        onClick={() => handleDelete(record.id)}
-                    >
-                        Delete
-                    </Button>
-                </Space>
-            ),
-        },
+        }
     ];
 
     const deleteData = async (id) => {
@@ -331,8 +315,10 @@ export const ProductComponent = observer((props) => {
                         <Select
                             mode={"multiple"}
                             placeholder="Choose Category"
-                            onChange={(val) => {
+                            onChange={async (val) => {
                                 setFilterCategories(val);
+                                store.product.filterByCategory = val;
+                                await store.product.getDataSubCategories();
                             }}
                             style={{marginBottom: "20px", width: "100%"}}
                         >
@@ -353,7 +339,7 @@ export const ProductComponent = observer((props) => {
                             }}
                             style={{marginBottom: "20px", width: "100%"}}
                         >
-                            {store.category.dataSubCategories.map((item) => (
+                            {store.product.dataSubCategories.map((item) => (
                                 <Option value={item.id} key={item.id}>
                                     {item.name}
                                 </Option>
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index d5e4c40..cd2660e 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -22,9 +22,7 @@ export const Product = observer(() => {
         await Promise.allSettled([
           store.supplier.getData(),
           store.product.getDataCategories(),
-          store.product.getDataSubCategories(),
           store.category.getData(),
-          store.category.getDataSubCategories(),
         ]);
         await store.product.getData();
         setIsLoading(false);
diff --git a/src/store/product.js b/src/store/product.js
index a06dc02..f1d0747 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -22,6 +22,7 @@ export class Product {
     pageSizeSubCategories = 10
     dataSubCategories = [];
     total_dataSubCategories = 0;
+    filterByCategory = null;
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -44,7 +45,7 @@ export class Product {
 
     async getDataSubCategories() {
         try {
-            const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+            const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
             this.dataSubCategories = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item