diff --git a/src/components/MyCoupons/CouponPopup.jsx b/src/components/MyCoupons/CouponPopup.jsx
index e247a68..f76c407 100644
--- a/src/components/MyCoupons/CouponPopup.jsx
+++ b/src/components/MyCoupons/CouponPopup.jsx
@@ -1,6 +1,41 @@
-
+import { useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import usersService from "../../services/UsersService";
 
 const CouponPopup = ({ popUpHandler, data }) => {
+  const [loader, setLoader] = useState(false);
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const redeemCouponHandler = async () => {
+    setLoader(true);
+    
+    try {
+      const { code, coupon_id } = data;
+      const reqData = { code_id: Number(coupon_id), code };
+
+      const res = await apiCall.getCouponRedeem(reqData);
+      if(res.statusText === "OK") {
+        toast.success("Great news! Your coupon has been redeemed.", {
+          autoClose: 3000,
+          hideProgressBar: true,
+        });
+      }
+      
+      popUpHandler();
+      setLoader(false);
+      throw new Response(res);
+    } catch (error) {
+      error &&
+        toast.warn("An error occurred while processing your coupon.", {
+          autoClose: 3000,
+          hideProgressBar: true,
+        });
+      setLoader(false);
+      console.log(error)
+      // throw new Error(error);
+    }
+  };
+
   return (
     <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
       <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
@@ -45,14 +80,17 @@ const CouponPopup = ({ popUpHandler, data }) => {
         <div className="signin-area w-full">
           <div className="flex justify-end">
             <button
-              //   type="button"
+              type="button"
+              onClick={redeemCouponHandler}
               className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
             >
-              {/* {loader ? (
+              {loader ? (
                 <div className="signup btn-loader"></div>
-                ) : (
-                    )} */}
-              <span className="font-semibold tracking-wider">Redeem Now!</span>
+              ) : (
+                <span className="font-semibold tracking-wider">
+                  Redeem Now!
+                </span>
+              )}
             </button>
           </div>
         </div>
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index c7a5d74..948a2ae 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -455,13 +455,13 @@ class usersService {
     return this.postAuxEnd("/stepresetpass", reqData);
   }
 
-  getCouponRedeem() {
+  getCouponRedeem(reqData) {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
-      page: 0,
-      limit: 100,
+      action: 85020,
+      ...reqData
     };
     return this.postAuxEnd("/couponredeem", postData);
   }