diff --git a/src/components/WalletManagement/Modal.tsx b/src/components/WalletManagement/Modal.tsx
index 9b22bdf57ab93b17fb2e2cda5257dd534a587d31..a02e59063a498e2ecf751c6d9d9a34adc24ba354 100644
--- a/src/components/WalletManagement/Modal.tsx
+++ b/src/components/WalletManagement/Modal.tsx
@@ -1,9 +1,12 @@
+import { topup } from '@/utils/topup';
 import React from 'react'
 import { FaWallet } from 'react-icons/fa6';
 
 function Modal({ setPopUp, handleValid, modalTitle, modalText, amount, modalTextIng, prePositionWord }) {
     const handleYesClick = () => {
         handleValid();
+        const userId = '1';
+        topup(userId, amount);
         setPopUp(false);
     };
     return (
diff --git a/src/components/WalletManagement/TopUp/TopUp.tsx b/src/components/WalletManagement/TopUp/TopUp.tsx
index 023a8694fcf88bfd3ff8a5f1f0b00b2b64924b63..215729b406dee87b182dd4a632eb3e4a49695e7d 100644
--- a/src/components/WalletManagement/TopUp/TopUp.tsx
+++ b/src/components/WalletManagement/TopUp/TopUp.tsx
@@ -11,8 +11,10 @@ import BRI from '../../../assets/briva.png';
 import BNI from '../../../assets/bni.png';
 import BSI from '../../../assets/bsi.png';
 import Modal from "../Modal";
+import { topup } from "@/utils/topup";
 
 const TopUp = () => {
+    const userId = 1;
     const [balance, setBalance] = useState(1000);
     const [topUpAmount, setTopUpAmount] = useState(0);
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('');
@@ -157,7 +159,7 @@ const TopUp = () => {
                 </div>
                 {isTopUpValid && (
                     <div>
-                        <button onClick={() => setPopUp(true)} className="flex items-center mt-5 cursor-pointer hover:bg-lightgreen text-lg mx-auto my-auto font-bold border-2 border-white text-white text-center items-center bg-darkgreen rounded-lg p-5 max-w-screen-sm">TOP-UP</button>
+                        <button onClick={() => {setPopUp(true);}} className="flex items-center mt-5 cursor-pointer hover:bg-lightgreen text-lg mx-auto my-auto font-bold border-2 border-white text-white text-center items-center bg-darkgreen rounded-lg p-5 max-w-screen-sm">TOP-UP</button>
                         {popUp && <Modal setPopUp={setPopUp} handleValid={handleTopUpValid} modalTitle={"TOP-UP"} modalText={"top-up"} amount={`${topUpAmount}`} modalTextIng={"top-up"} prePositionWord={"to"}/>} 
                     </div>
                 )}
diff --git a/src/utils/topup.ts b/src/utils/topup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9193e3adf6fc32e019e8140ebec5a8e3b6329c93
--- /dev/null
+++ b/src/utils/topup.ts
@@ -0,0 +1,16 @@
+import { REST_BASE_URL } from "@/constant/constants"
+import axios from "axios";
+
+export const topup = async (userId: string, amount: number) => {
+    const res = await axios.post(
+        REST_BASE_URL + '/topup/' + userId,
+        {
+            amount: amount
+        }
+    );
+
+
+    return {
+        ok: res.data.success
+    };
+}
\ No newline at end of file