diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 9c98998..18e9152 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -10,6 +10,7 @@ import {
   Space,
   Table,
   Tag,
+  InputNumber,
 } from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
@@ -37,13 +38,13 @@ export const SupplierComponent = observer((props) => {
     setIdData(data.id);
   };
 
-  const handleTopup = (data) => {
-    console.log(data, "isi data");
+  const handleTopup = async (data) => {
+    store.supplier.code = data.code;
+    console.log(data.code, "isi data");
     form.setFieldsValue({
       code: data.code,
     });
     store.supplier.visibleModalTransaction = true;
-    store.supplier.code = data.code;
   };
 
   const changeStatus = async (id, isActive) => {
@@ -163,7 +164,27 @@ export const SupplierComponent = observer((props) => {
     });
   };
 
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+
+  const handleSubmitTransaction = async (data) => {
+    try {
+      modalLoader.setLoading(true);
+      const response = await store.supplier.createTransaction(data);
+      message.success(response?.body?.message || "Success Top Up");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error(e.response?.body?.message || "Failed Top Up");
+    }
+
+    modalLoader.setLoading(false);
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
+
   const handleCancel = () => {
+    form.resetFields();
     setIdData("");
     store.supplier.visibleModalSupplier = false;
   };
@@ -350,7 +371,6 @@ export const SupplierComponent = observer((props) => {
         okText={idData ? "Edit" : "Buat"}
         cancelText="Batal"
         onCancel={() => {
-          form.resetFields();
           handleCancel();
         }}
         onOk={() => {
@@ -420,7 +440,54 @@ export const SupplierComponent = observer((props) => {
           )}
         </Form>
       </Modal>
-      <TopupsaldoModal code={store.supplier.code} />
+      <Modal
+        visible={store.supplier.visibleModalTransaction}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Batal"
+        onCancel={() => {
+          form.resetFields();
+          handleCancelTransaction();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmitTransaction(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+        >
+          <Form.Item
+            name="code"
+            label="Supplier"
+            rules={[{ required: true, message: "Please input supplier!" }]}
+          >
+            <Input disabled={true} />
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Nominal"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <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>
     </div>
   );
 });
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 036e9cd..f93038c 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -84,8 +84,8 @@ export const Home = observer(() => {
               }}
             >
               <Row>
-                <Row style={{ marginTop: 20 }}>
-                  <Col style={{ marginRight: 40 }}>
+                <Row>
+                  <Col span={8}>
                     <p>
                       <h4>
                         Total Penjualan :{" "}
@@ -108,7 +108,7 @@ export const Home = observer(() => {
                       </h4>
                     </p>
                   </Col>
-                  <Col>
+                  <Col span={8} offset={8}>
                     <p>
                       <h4>
                         Total Profit :{" "}
@@ -158,8 +158,8 @@ export const Home = observer(() => {
               }}
             >
               <Row>
-                <Row style={{ marginTop: 20 }}>
-                  <Col style={{ marginRight: 40 }}>
+                <Row>
+                  <Col span={8}>
                     <p>
                       <h4>
                         Total Penjualan :{" "}
@@ -182,7 +182,7 @@ export const Home = observer(() => {
                       </h4>
                     </p>
                   </Col>
-                  <Col>
+                  <Col span={8} offset={8}>
                     <p>
                       <h4>
                         Total Profit :{" "}