diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index dffb907..25e68a9 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,16 +1,17 @@
-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";
-import { MoneyCollectOutlined } from "@ant-design/icons";
-import { ModalLoaderContext } from "../../utils/modal";
+import React, {useContext, useEffect, useState} from "react";
+import {useStore} from "../../utils/useStore";
+import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
+import {observer} from "mobx-react-lite";
+import {ModalLoaderContext} from "../../utils/modal";
 
-const { Search } = Input;
-const { Option } = Select;
+const {Search} = Input;
+const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [form] = Form.useForm();
+  const [visibleModalBuy, setVisibleModalBuy] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -41,11 +42,12 @@ export const Product = observer(() => {
     modalLoader.setLoading(false);
   };
 
-  const handleBuyProduct = async (data) => {
+  const handleBuyProduct = async (data, productCode) => {
     modalLoader.setLoading(true);
     try {
       const response = await store.transaction.buyProduct({
-        productCode: data,
+        ...data,
+        productCode: productCode,
       });
       if (response.status === 201) {
         message.success("Berhasil Beli Produk");
@@ -60,38 +62,44 @@ export const Product = observer(() => {
       console.log(e, "apa errornya");
       message.error("Gagal Beli Product");
     }
+    setVisibleModalBuy(false);
     modalLoader.setLoading(false);
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    setVisibleModalBuy(false);
+  };
+
   return (
-    <div>
-      <Row>
-        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+      <div>
+        <Row>
+        <span style={{fontWeight: "bold", marginBottom: "10px"}}>
           Sub Category
         </span>
-      </Row>
-      <Row>
-        <Col span={24}>
-          <Select
-            placeholder={"Select Sub Category"}
-            allowClear={true}
-            onChange={(val) => handleChangeSubcategory(val)}
-            style={{ marginBottom: "10px", width: "100%" }}
-            value={store.transaction.filterSubCategory}
+        </Row>
+        <Row>
+          <Col span={24}>
+            <Select
+                placeholder={"Select Sub Category"}
+                allowClear={true}
+                onChange={(val) => handleChangeSubcategory(val)}
+                style={{marginBottom: "10px", width: "100%"}}
+                value={store.transaction.filterSubCategory}
+            >
+              {store.transaction.dataSubCategories.map((item, index) => (
+                  <Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Option>
+              ))}
+            </Select>
+          </Col>
+        </Row>
+        <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
+          <Col
+              span={12}
+              style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
           >
-            {store.transaction.dataSubCategories.map((item, index) => (
-              <Option key={item.id} value={item.id}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </Col>
-      </Row>
-      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
-        <Col
-          span={12}
-          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
-        >
           Produk & Nominal
         </Col>
         <Col span={12} style={{ textAlign: "right" }}>
@@ -107,19 +115,7 @@ export const Product = observer(() => {
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
                 onClick={() => {
-                  Modal.confirm({
-                    title: `Are you sure buy ${item.product_name}?`,
-                    icon: <MoneyCollectOutlined />,
-                    okText: "Confirm",
-                    cancelText: "Cancel",
-                    okType: "primary",
-                    onOk() {
-                      handleBuyProduct(item.product_code);
-                    },
-                    onCancel() {
-                      console.log("Cancel");
-                    },
-                  });
+                  setVisibleModalBuy(true)
                 }}
                 hoverable
                 style={{
@@ -130,26 +126,52 @@ export const Product = observer(() => {
                   marginBottom: 10,
                 }}
               >
-                <span style={{ color: "black" }}>{item.product_name}</span>
-                <br />
-                <span style={{ color: "grey", fontSize: 10 }}>
+                <span style={{color: "black"}}>{item.product_name}</span>
+                <br/>
+                <span style={{color: "grey", fontSize: 10}}>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
                     currency: "IDR",
                   }).format(item?.price)}
                 </span>
               </Card>
+
+              <Modal
+                  visible={visibleModalBuy}
+                  title={`Are you sure buy ${item.product_name}?`}
+                  okText={"Confirm"}
+                  cancelText="Cancel"
+                  onCancel={() => {
+                    form.resetFields();
+                    handleCancel();
+                  }}
+                  onOk={() => {
+                    form
+                        .validateFields()
+                        .then((values) => {
+                          console.log(values, "isi form");
+                          handleBuyProduct(values, item.product_code);
+                          form.resetFields();
+                        })
+                        .catch((info) => {
+                          console.error("Validate Failed:", info);
+                        });
+                  }}
+              >
+                <Form form={form} layout="vertical">
+                  <Form.Item
+                      name="phoneNumber"
+                      label="Phone Number"
+                      rules={[{required: true, message: "Please input Phone Number!"}]}
+                  >
+                    <Input/>
+                  </Form.Item>
+                </Form>
+              </Modal>
             </Col>
           ))}
         </Row>
       )}
-      {/* {store.transaction.data.length !== 0 && (
-          <Col style={{textAlign: "right", marginTop: "1em"}}>
-            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
-              Beli Sekarang
-            </Button>
-          </Col>
-      )} */}
     </div>
   );
 });