diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index d5acd23..a4ded5b 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -14,7 +14,6 @@ export const ProductComponent = observer((props) => {
     const [idData, setIdData] = useState('');
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    const [visibleModal, setVisibleModal] = useState(false);
 
     useEffect(() => {
         const init = async () => {
@@ -35,11 +34,12 @@ export const ProductComponent = observer((props) => {
         form.setFieldsValue({
             name: data.name,
             price: data.price,
-            base_price: data.base_price,
+            markUpPrice: data.basePrice,
             code: data.code,
             status: data.status,
+            subCategoriesId: data.sub_categories.id,
         });
-        setVisibleModal(true);
+        store.product.visibleModalProduct = true;
         setIdData(data.id);
     }
 
@@ -59,11 +59,10 @@ export const ProductComponent = observer((props) => {
             dataIndex: "basePrice",
             key: "basePrice",
         },
-        ,
         {
             title: "Harga Jual",
-            dataIndex: "price",
-            key: "price",
+            dataIndex: "basePrice",
+            key: "basePrice",
         },
         {
             title: "Gangguan",
@@ -71,7 +70,7 @@ export const ProductComponent = observer((props) => {
             key: "status",
             render: (text, record) => (
                 <Tag
-                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
+                    color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
                     {capitalize(record?.status)}
@@ -84,10 +83,10 @@ export const ProductComponent = observer((props) => {
             key: "tersedia",
             render: (text, record) => (
                 <Tag
-                    color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
+                    color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
-                    {record?.status === "AKTIF" ? " Ya" : "Tidak"}
+                    {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
                 </Tag>
             ),
         },
@@ -139,11 +138,12 @@ export const ProductComponent = observer((props) => {
 
     const handleCancel = () => {
         setIdData('')
-        setVisibleModal(false);
+        store.product.visibleModalProduct = false;
     }
 
     const handleSubmit = async (data) => {
-        if (idData != '') {
+        console.log(data, "isi data2")
+        if (idData !== '') {
             setConfirmLoading(true);
             try {
                 await store.product.update(idData, data)
@@ -152,7 +152,9 @@ export const ProductComponent = observer((props) => {
                 message.error("Failed Update Data Member")
             }
             setConfirmLoading(false);
-            setVisibleModal(false);
+            store.product.visibleModalProduct = false;
+            setIdData('');
+            form.resetFields();
         } else {
             setConfirmLoading(true);
             try {
@@ -163,7 +165,9 @@ export const ProductComponent = observer((props) => {
                 message.error("Failed Add Member")
             }
             setConfirmLoading(false);
-            setVisibleModal(false);
+            store.product.visibleModalProduct = false;
+            setIdData('');
+            form.resetFields();
         }
     }
 
@@ -176,7 +180,7 @@ export const ProductComponent = observer((props) => {
                 bordered
             />
             <Modal
-                visible={visibleModal}
+                visible={store.product.visibleModalProduct}
                 title={idData ? "Edit Product" : "Create a new Product"}
                 okText={idData ? "Edit" : "Create"}
                 cancelText="Cancel"
@@ -188,6 +192,7 @@ export const ProductComponent = observer((props) => {
                     form
                         .validateFields()
                         .then((values) => {
+                            console.log(values, "isi form")
                             handleSubmit(values);
                             form.resetFields();
                         })
@@ -215,7 +220,7 @@ export const ProductComponent = observer((props) => {
                         <Input/>
                     </Form.Item>
                     <Form.Item
-                        name="base_price"
+                        name="markUpPrice"
                         label="Mark Up Price"
                         rules={[{required: true, message: "Please input mark up price!"}]}
                     >
@@ -239,7 +244,7 @@ export const ProductComponent = observer((props) => {
                         </Select>
                     </Form.Item>
                     <Form.Item
-                        name="sub_category"
+                        name="subCategoriesId"
                         label="Sub categories"
                         rules={[{required: true, message: "Please select sub categories!"}]}
                     >
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 4ba587d..594374b 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -60,7 +60,7 @@ export const Product = observer(() => {
                             placeholder="input search text"
                             style={{width: 200, marginRight: 10}}
                         />
-                        <Button onClick={() => store.product.visibleModal = true}>
+                        <Button onClick={() => store.product.visibleModalProduct = true}>
                             <PlusSquareOutlined/> New
                         </Button>
                     </Col>
diff --git a/src/store/product.js b/src/store/product.js
index aebf01e..c8f6e38 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -1,4 +1,4 @@
-import {action, makeAutoObservable} from "mobx";
+import {makeAutoObservable} from "mobx";
 import {http} from "../utils/http";
 
 export class Product {
@@ -7,6 +7,7 @@ export class Product {
     data = [];
     total_data = 0;
     filterCategory = null;
+    visibleModalProduct = false;
 
     pageCategories = 0;
     pageSizeCategories = 10
@@ -46,15 +47,14 @@ export class Product {
         }
     }
 
-    @action
     async create(data) {
-        const response = await http.post('/product', data);
+        const response = await http.post('/product').send(data);
         await this.getData();
         return response;
     }
 
     async update(id, data) {
-        const response = await http.put(`/product/${id}`, data);
+        const response = await http.put(`/product/${id}`).send(data);
         await this.getData();
         return response;
     }