diff --git a/src/components/History/RewardsTable.jsx b/src/components/History/RewardsTable.jsx
index 7a65412..edc1b8b 100644
--- a/src/components/History/RewardsTable.jsx
+++ b/src/components/History/RewardsTable.jsx
@@ -1,34 +1,66 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'
 
+import usersService from '../../services/UsersService';
 import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
 import PaginatedList from '../../components/Pagination/PaginatedList';
 
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
 import { AmountTo2DP } from '../Helpers/PriceFormatter';
 
-function RewardsTable({reward}) {
+function RewardsTable() {
+
+    const apiCall = new usersService()
+
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
 
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentReward = reward?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
     const handlePagination = (e) => {
       handlePagingFunc(e,setCurrentPage)
     }
 
+
+    //FUNCTION TO GET FAMILY REWARD HISTORY
+    const getFamilyRewardHistory = ()=>{
+        apiCall.getFamilyRewardHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setFamilyRewardHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
+        })
+    }
+
+    useEffect(()=>{
+        getFamilyRewardHistory()
+      }, [])
+
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
+    {familyRewardHistory.loading ? 
+    <LoadingSpinner size='16' color='sky-blue' height='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">Title</th>
+            <th className="p-2">Description</th>
             <th className="p-2">Amount</th>
             <th className="p-2">Date</th>
             <th className="p-2">Confirmation</th>
             </tr>
         </thead>
-        {reward.data.length ?
+        {familyRewardHistory.data.length ?
         (
         <tbody>
             {currentReward.map((item, index) => {
@@ -37,10 +69,10 @@ function RewardsTable({reward}) {
                     <tr key={index} className='text-slate-500'>
                         <td className="p-2">
                             <div className='flex items-center gap-2'>
-                                <img src={Image} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full' alt='Reward Logo' />
+                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
-                                    <h1 className='text-lg font-bold'>Title Goes Here</h1>
-                                    <p className='text-sm'>Title Goes Here</p>
+                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname_}</h1>
+                                    <p className='text-sm'>{item.description}</p>
                                 </div>
                             </div>
                         </td>
@@ -54,7 +86,7 @@ function RewardsTable({reward}) {
         </tbody>
         )
         :
-        reward.error ? 
+        familyRewardHistory.error ? 
         (
         <tbody>
             <tr className='text-slate-500'>
@@ -70,9 +102,10 @@ function RewardsTable({reward}) {
         </tbody>
         }
     </table>
+    }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= reward?.data?.length ? true : false} data={reward?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )
diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index cb7aaf6..9d8726f 100644
--- a/src/components/History/index.jsx
+++ b/src/components/History/index.jsx
@@ -30,12 +30,6 @@ export default function History() {
         error: false
     })
 
-    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
-        loading: true,
-        data: [],
-        error: false
-    })
-
     //FUNCTION TO GET PAYMENT HISTORY
     const getPaymentHistory = ()=>{
       apiCall.getPaymentHx().then((res)=>{
@@ -63,19 +57,6 @@ export default function History() {
       })
   }
 
-    //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getFamilyRewardHistory = ()=>{
-        apiCall.getFamilyRewardHx().then((res)=>{
-            if(res.data.internal_return < 0){ // success but no data
-                setFamilyRewardHistory(prev => ({...prev, loading: false}))
-                return
-            }
-            setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
-        }).catch((error)=>{
-            setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
-        })
-    }
-
   useEffect(()=>{
     getPaymentHistory()
   }, [])
@@ -84,10 +65,6 @@ export default function History() {
     getPurchaseHistory()
   }, [])
 
-  useEffect(()=>{
-    getFamilyRewardHistory()
-  }, [])
-
   return (
     <>
       <Layout>
@@ -307,11 +284,11 @@ export default function History() {
                         <div className="wallet w-full border-t">
                             <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Rewards</h1>
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
-                            {paymentHistory.loading ? 
+                            {/* {paymentHistory.loading ? 
                             <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <RewardsTable reward={familyRewardHistory} />
-                        }
+                            : */}
+                        {/* } */}
+                            <RewardsTable />
                         </div>
                     }
                     {/* END OF REWARD SECTION */}