diff --git a/src/index.css b/src/index.css
index 8911c18..3c1a8ed 100644
--- a/src/index.css
+++ b/src/index.css
@@ -63,6 +63,11 @@ code {
 .ant-menu-submenu-arrow{
     padding-right: 40px !important; 
 }
-.ant-breadcrumb{
+.ant-breadcrumb {
     margin-bottom: 10px !important;
+}
+
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: #ed1f24 !important;
+    border-color: #ed1f24 !important;
 }
\ No newline at end of file
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index a87baff..729ccb7 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -158,21 +158,21 @@ export const Payback = observer(() => {
                   columns={columns}
                   dataSource={store.payback.data}
                   bordered
-                  pagination={{
-                    pageSize: store.payback.page,
-                    total: store.payback.total_data,
-                    current: store.payback.pageSize + 1,
-                    showSizeChanger: true,
-                    simple: false
-                  }}
-                  onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.payback.pageSize = page.pageSize;
-                    store.payback.page = pageNumber - 1;
-                    modalLoader.setLoading(true);
-                    await store.payback.getData();
-                    modalLoader.setLoading(false);
-                  }}
+                  // pagination={{
+                  //   pageSize: store.payback.page,
+                  //   total: store.payback.total_data,
+                  //   current: store.payback.pageSize + 1,
+                  //   showSizeChanger: true,
+                  //   simple: false
+                  // }}
+                  // onChange={async (page) => {
+                  //   let pageNumber = page.current;
+                  //   store.payback.pageSize = page.pageSize;
+                  //   store.payback.page = pageNumber - 1;
+                  //   modalLoader.setLoading(true);
+                  //   await store.payback.getData();
+                  //   modalLoader.setLoading(false);
+                  // }}
               />
           )}
 
@@ -180,19 +180,19 @@ export const Payback = observer(() => {
               <List
                   itemLayout="horizontal"
                   position={"top"}
-                  pagination={{
-                    onChange: async (page) => {
-                      store.payback.pageSize = page.pageSize;
-                      store.payback.page = page.current;
-                      modalLoader.setLoading(true);
-                      await store.payback.getData();
-                      modalLoader.setLoading(false);
-                    },
-                    pageSize: store.payback.pageSize,
-                    total: store.payback.total_data,
-                    current: store.payback.page,
-                    style: {marginBottom: "1rem", marginRight: "1rem"},
-                  }}
+                  // pagination={{
+                  //   onChange: async (page) => {
+                  //     store.payback.pageSize = page.pageSize;
+                  //     store.payback.page = page.current;
+                  //     modalLoader.setLoading(true);
+                  //     await store.payback.getData();
+                  //     modalLoader.setLoading(false);
+                  //   },
+                  //   pageSize: store.payback.pageSize,
+                  //   total: store.payback.total_data,
+                  //   current: store.payback.page,
+                  //   style: {marginBottom: "1rem", marginRight: "1rem"},
+                  // }}
                   dataSource={store.payback.data}
                   style={{padding: 0}}
                   renderItem={(item) => {
diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js
index cc258f2..e2a5e1a 100644
--- a/src/pages/Payback/PaybackFromUser.js
+++ b/src/pages/Payback/PaybackFromUser.js
@@ -12,7 +12,6 @@ const {Search} = Input;
 
 export const PaybackFromUser = observer(() => {
   const store = useStore();
-  const [visibleModal, setVisibleModal] = useState(false);
   const [initialData, setInitialData] = useState({});
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -71,23 +70,6 @@ export const PaybackFromUser = observer(() => {
     },
   ];
 
-  const onSubmit = async (data) => {
-    modalLoader.setLoading(true);
-    try {
-      // await store.membership.create(data);
-      // message.success("Success Add New Member");
-      // await store.membership.getData();
-    } catch (e) {
-      console.error(e, "apa errornya");
-      message.error("Failed Add Member");
-    }
-    modalLoader.setLoading(false);
-    setVisibleModal(false);
-  };
-
-  const handleAction = async (record, type) => {
-  };
-
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData}/>
@@ -113,7 +95,7 @@ export const PaybackFromUser = observer(() => {
                 <Button
                   onClick={() => {
                     setInitialData({});
-                    setVisibleModal(true);
+                    store.payback.visibleModalPayback = true;
                   }}
                 >
                   <PlusSquareOutlined/> New
@@ -210,15 +192,7 @@ export const PaybackFromUser = observer(() => {
       </Card>
 
       <PaybackModal
-        visible={visibleModal}
         initialData={initialData}
-        onCreate={async (data) => {
-          await onSubmit(data);
-        }}
-        onCancel={() => {
-          setInitialData({});
-          setVisibleModal(false);
-        }}
       />
     </div>
   );
diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js
index 9079ad9..f5229ef 100644
--- a/src/pages/Payback/PaybackModal.js
+++ b/src/pages/Payback/PaybackModal.js
@@ -1,12 +1,12 @@
 import React, {useContext, useState} from "react";
-import {Form, Input, message, Modal, Upload,} from "antd";
+import {Form, InputNumber, message, Modal, Upload,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
 import {http} from "../../utils/http";
 import {appConfig} from "../../config/app";
 
-export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
+export const PaybackModal = ({initialData}) => {
   const [form] = Form.useForm();
   const store = useStore();
   const [image, setImage] = useState("");
@@ -58,40 +58,51 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
   );
 
   const handleSubmit = async (data) => {
-    console.log(data, "isi data2");
+    modalLoader.setLoading(true);
     try {
-      modalLoader.setLoading(true);
-      await store.payback.create(data);
-      modalLoader.setLoading(false);
+      const request = {
+        ...data,
+        destination: store.authentication.profileData.superior?.id
+      }
+      await store.payback.create(request);
       message.success("Success Add Payback");
-      await store.payback.getData();
     } catch (e) {
-      modalLoader.setLoading(false);
       if (e.response?.body?.message) {
         message.error(e.response.body.message);
         return;
       }
       message.error(e.message);
     }
+    modalLoader.setLoading(false);
     form.resetFields();
+    store.payback.visibleModalPayback = false;
+    setImage("");
+    setFileList([]);
+    setPreviewImage("");
+    setPreviewVisible(false);
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    store.payback.visibleModalPayback = false;
+    setImage("");
+    setFileList([]);
+    setPreviewImage("");
+    setPreviewVisible(false);
+  }
+
   return (
       <Modal
-          visible={visible}
+          visible={store.payback.visibleModalPayback}
           title={"Create a new Payback"}
           okText={"Create"}
           cancelText="Cancel"
-          onCancel={() => {
-            form.resetFields();
-            onCancel();
-          }}
+          onCancel={handleCancel}
           onOk={() => {
             form
                 .validateFields()
                 .then((values) => {
                   handleSubmit(values);
-                  console.log(values);
                   form.resetFields();
                 })
                 .catch((info) => {
@@ -105,14 +116,6 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
             name="form_in_modal"
             initialValues={initialData}
         >
-          <Form.Item
-              name="destination"
-              label="destination"
-              rules={[{required: true, message: "Please input Name!"}]}
-              initialValue={store.authentication.profileData.superior?.id}
-          >
-            <Input/>
-          </Form.Item>
           <Form.Item
               label="Upload Picture"
               name="image_prove"
@@ -138,13 +141,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
 
                 {image === "" ? uploadButton : null}
               </Upload>
-              <h5
-                  style={{
-                    marginTop: 12,
-                    color: "rgba(0, 0, 0, 0.45)",
-                  }}
-              >
-                Max size of file 2 mb
+              <h5 style={{
+                marginTop: 12,
+                color: "rgba(0, 0, 0, 0.45)",
+              }}>
+                Max size of file 2 MB
               </h5>
             </div>
           </Form.Item>
@@ -153,7 +154,11 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
               label="amount"
               rules={[{required: true, message: "Please input Amount!"}]}
           >
-            <Input/>
+            <InputNumber
+                style={{width: "100%"}}
+                formatter={value => `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                parser={value => value.replace(/\Rp.\s?|(,*)/g, '')}
+            />
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 5e23868..1bc7a67 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
@@ -10,8 +10,6 @@ const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
-
-  const [productData, setProductData] = useState([]);
   const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
@@ -36,20 +34,6 @@ export const Product = observer(() => {
     init();
   }, []);
 
-  // data
-  useEffect(() => {
-    console.log("⚡ transaction data store", store.transaction.data);
-    setProductData(store.transaction.data);
-  }, [store.transaction.data]);
-
-  // Subcategory
-  useEffect(() => {
-    console.log(
-      "⚡ transaction subcategory store",
-      store.transaction.dataSubCategories
-    );
-  }, [store.transaction.dataSubCategories]);
-
   const handleChangeSubcategory = async (item) => {
     store.transaction.filterSubCategory = item;
     modalLoader.setLoading(true);
@@ -61,12 +45,16 @@ export const Product = observer(() => {
     modalLoader.setLoading(true);
     try {
       const response = await store.transaction.buyProduct({productCode: data});
-      // if (response.status === 200) {
-      message.success("Success Buy Product");
-      // } else {
-      //message.error("Failed Buy Product");
-      //}
+      if (response.status === 201) {
+        message.success("Success Buy Product");
+      } else {
+        message.error("Failed Buy Product", 3);
+      }
     } catch (e) {
+      if (e.response?.body?.message) {
+        message.error(e.response.body.message);
+        return;
+      }
       console.log(e, "apa errornya");
       message.error("Failed Buy Product");
     }
@@ -107,52 +95,52 @@ export const Product = observer(() => {
         </Col>
         <Col span={12} style={{textAlign: "right"}}>
           <Search
-            placeholder="input search text"
-            style={{width: 200, marginRight: 10}}
+              placeholder="input search text"
+              style={{width: 200, marginRight: 10}}
           />
         </Col>
       </Row>
-      {productData.length != 0 && (
-        <Row>
-          {productData.map((item, index) => (
-            <Col key={index} xs={24} md={16} lg={8}>
-              <Card
-                onClick={() => {
-                  Modal.confirm({
-                    title: `Are you sure buy ${item.name}?`,
-                    icon: <MoneyCollectOutlined/>,
-                    okText: "Confirm",
-                    cancelText: "Cancel",
-                    okType: "primary",
-                    onOk() {
-                      handleBuyProduct(item.code)
-                    },
-                    onCancel() {
-                      console.log("Cancel");
-                    },
-                  });
-                }}
-                style={{cursor: "pointer"}}
-              >
-                <span style={{color: "black"}}>{item.name}</span>
-                <br/>
-                <span style={{color: "grey", fontSize: 10}}>
+      {store.transaction.data.length != 0 && (
+          <Row>
+            {store.transaction.data.map((item, index) => (
+                <Col key={index} xs={24} md={16} lg={8}>
+                  <Card
+                      onClick={() => {
+                        Modal.confirm({
+                          title: `Are you sure buy ${item.name}?`,
+                          icon: <MoneyCollectOutlined/>,
+                          okText: "Confirm",
+                          cancelText: "Cancel",
+                          okType: "primary",
+                          onOk() {
+                            handleBuyProduct(item.code)
+                          },
+                          onCancel() {
+                            console.log("Cancel");
+                          },
+                        });
+                      }}
+                      style={{cursor: "pointer"}}
+                  >
+                    <span style={{color: "black"}}>{item.name}</span>
+                    <br/>
+                    <span style={{color: "grey", fontSize: 10}}>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
                     currency: "IDR",
                   }).format(item?.currentPrice?.mark_up_price)}
                 </span>
-              </Card>
-            </Col>
-          ))}
-        </Row>
+                  </Card>
+                </Col>
+            ))}
+          </Row>
       )}
-      {productData.length !== 0 && (
-        <Col style={{textAlign: "right"}}>
-          <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
-            Beli Sekarang
-          </Button>
-        </Col>
+      {store.transaction.data.length !== 0 && (
+          <Col style={{textAlign: "right", marginTop: "1em"}}>
+            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
+              Beli Sekarang
+            </Button>
+          </Col>
       )}
     </div>
   );
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 441a30a..03fa712 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState,message} from "react";
+import React, {message, useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Card, Tabs} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@@ -14,7 +14,6 @@ export const Transaction = observer(() => {
 
   const modalLoader = useContext(ModalLoaderContext);
 
-  // Init
   useEffect(() => {
     const init = async () => {
       try {
@@ -34,14 +33,11 @@ export const Transaction = observer(() => {
     init();
   }, []);
 
-  // Category
-  useEffect(() => {
-    console.log('⚡ transaction category store', store.transaction.dataCategories)
-  }, [store.transaction.dataCategories])
-
   const handleChangeTabs = async (key) => {
-    store.transaction.filterCategory = key;
+    store.transaction.dataSubCategories = [];
+    store.transaction.data = [];
     modalLoader.setLoading(true);
+    store.transaction.filterCategory = key;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);
   };
diff --git a/src/store/payback.js b/src/store/payback.js
index e11861d..366f530 100644
--- a/src/store/payback.js
+++ b/src/store/payback.js
@@ -73,9 +73,9 @@ export class Payback {
 
   async create(data) {
     try {
-    console.log(data)
-      return await http.post("/transaction/deposit-return").send(data);
-      
+      const response = await http.post("/transaction/deposit-return").send(data);
+      await this.getData();
+      return response;
     } catch (e) {
       console.error(e);
     }