diff --git a/src/components/MyCoupons/MyCoupons.jsx b/src/components/MyCoupons/MyCoupons.jsx
new file mode 100644
index 0000000..10903b0
--- /dev/null
+++ b/src/components/MyCoupons/MyCoupons.jsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react'
+import Layout from "../Partials/Layout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import CouponTable from "../MyWallet/WalletComponent/CouponTable";
+import usersService from '../../services/UsersService'
+
+export default function MyCoupons() {
+    const apiCall = new usersService()
+    let [couponHistory, setCouponHistory] = useState({ // FOR COUPON HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    //FUNCTION TO GET COUPON HISTORY
+    const getCouponHistory = ()=>{
+        apiCall.getCouponHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setCouponHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setCouponHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setCouponHistory(prev => ({...prev, loading: false, error: true}))
+        })
+    }
+
+    useEffect(()=>{
+        getCouponHistory()
+    }, [])
+
+    return (
+        <>
+            <Layout>
+                <div className="my-wallet-wrapper w-full mb-10">
+                              <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+
+                    {/* COUPON SECTION */}
+                    <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
+                        <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                            <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
+                            {couponHistory.loading ?
+                                <LoadingSpinner size='16' color='sky-blue' />
+                                :
+                                <CouponTable coupon={couponHistory} />
+                            }
+                        </div>
+                    </div>
+                    {/* END OF COUPON SECTION */}
+
+                </div>
+                </div>
+            </Layout>
+        </>
+    );
+}
diff --git a/src/views/MyCouponPage.jsx b/src/views/MyCouponPage.jsx
index 49f2574..2e29492 100644
--- a/src/views/MyCouponPage.jsx
+++ b/src/views/MyCouponPage.jsx
@@ -1,10 +1,11 @@
 import React from "react";
-import WalletRoutes from "../components/MyWallet/Wallet";
+//import WalletRoutes from "../components/MyWallet/Wallet";
+import MyCoupons from "../components/MyCoupons/MyCoupons";
 
 export default function MyCouponPage() {
     return (
         <>
-            <WalletRoutes />
+            <MyCoupons />
         </>
     );
 }