diff --git a/src/components/MyCoupons/CouponTable.jsx b/src/components/MyCoupons/CouponTable.jsx
new file mode 100644
index 0000000..2394eb3
--- /dev/null
+++ b/src/components/MyCoupons/CouponTable.jsx
@@ -0,0 +1,67 @@
+import React, {useState} from 'react'
+
+//import PaginatedList from '../../Pagination/PaginatedList'
+import PaginatedList from '../Pagination/PaginatedList';
+import { handlePagingFunc } from '../Pagination/HandlePagination';
+
+function CouponTable({coupon}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+    const handlePagination = (e) => {
+        handlePagingFunc(e,setCurrentPage)
+    }
+
+    return (
+        <div className='flex flex-col justify-between h-full'>
+            <table className="wallet-activity w-full table-auto border-collapse text-left">
+                <thead className='border-b-2'>
+                <tr className='text-slate-600'>
+                    <th className="p-2">Date</th>
+                    <th className="p-2">Description</th>
+                    <th className="p-2">Amount</th>
+                    <th className="p-2">Active</th>
+                </tr>
+                </thead>
+                {coupon.data.length ?
+                    (
+                        <tbody>
+                        {currentCoupon.map((item, index) => (
+                            <tr key={index} className='text-slate-500'>
+                                <td className="p-2">{item.added}</td>
+                                <td className="p-2">{item.code}</td>
+                                <td className="p-2">{item.amount}</td>
+                                <td className="p-2">{item.status}</td>
+                            </tr>
+                        ))}
+                        </tbody>
+                    )
+                    :
+                    coupon.error ?
+                        (
+                            <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+                            </tr>
+                            </tbody>
+                        )
+                        :
+                        <tbody>
+                        <tr className='text-slate-500'>
+                            <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+                        </tr>
+                        </tbody>
+                }
+            </table>
+
+            {/* PAGINATION BUTTON */}
+            <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+            {/* END OF PAGINATION BUTTON */}
+        </div>
+    )
+}
+
+export default CouponTable
\ No newline at end of file
diff --git a/src/components/MyCoupons/MyCoupons.jsx b/src/components/MyCoupons/MyCoupons.jsx
index 10903b0..ae836bb 100644
--- a/src/components/MyCoupons/MyCoupons.jsx
+++ b/src/components/MyCoupons/MyCoupons.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import CouponTable from "../MyWallet/WalletComponent/CouponTable";
+import CouponTable from "./CouponTable";
 import usersService from '../../services/UsersService'
 
 export default function MyCoupons() {
@@ -33,10 +33,24 @@ export default function MyCoupons() {
         <>
             <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'>
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+
+                                Coupons
+
+                            </h1>
+                        </div>
+
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                    <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="lg:w-4/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 ?