diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx
index 172d98d..6aa4cf9 100644
--- a/src/components/MyWallet/AddFund.jsx
+++ b/src/components/MyWallet/AddFund.jsx
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";
 
 import AddFundDollars from "./AddFundDollars";
 
-function AddFund({ payment }) {
+function AddFund({ paymentHistory, currency }) {
   const navigate = useNavigate();
-  const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
+  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
 
   //STATE FOR CONTROLLED INPUT
   let [input, setInput] = useState("");
@@ -42,6 +42,8 @@ function AddFund({ payment }) {
 
     setInput("");
   };
+  console.log("walletItem >>", paymentHistory);
+
   return (
     <div>
       {/* heading */}
@@ -134,13 +136,15 @@ function AddFund({ payment }) {
           <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
             <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
               <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-                Recent Activity
+                {/* Recent Activity */}Working in Progress
               </h2>
+              <p>This popup has taking time because of the prop drilling. I have got it right now</p>
               {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-              {payment.loading ? (
+              {paymentHistory?.loading ? (
                 <LoadingSpinner size="16" color="sky-blue" />
               ) : (
-                <RecentActivityTable payment={payment} />
+                // <RecentActivityTable payment={paymentHistory} />
+                ""
               )}
             </div>
           </div>
@@ -150,4 +154,4 @@ function AddFund({ payment }) {
   );
 }
 
-export default AddFund;
\ No newline at end of file
+export default AddFund;
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index 42658a4..fdd2e46 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/src/components/MyWallet/Popup/CreditPopup.jsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-import ModalCom from "../Helpers/ModalCom";
+// import ModalCom from "../Helpers/ModalCom";
 import { Form, Formik } from "formik";
-import InputCom from "../Helpers/Inputs/InputCom";
-import usersService from "../../services/UsersService";
-import Icons from "../Helpers/Icons";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import usersService from "../../../services/UsersService";
+import Icons from "../../Helpers/Icons";
 import AddFund from "../AddFund";
+import ModalCom from "../../Helpers/ModalCom";
 
-const CreditPopup = ({ details, onClose, situation, paymentHistory }) => {
+const CreditPopup = ({ details, onClose, situation}) => {
   const { pathname, state } = useLocation();
   const [submitTask, setSubmitTask] = useState({
     loading: false,
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx
index 31ec6d3..12446f8 100644
--- a/src/components/MyWallet/Wallet.jsx
+++ b/src/components/MyWallet/Wallet.jsx
@@ -32,6 +32,7 @@ const initialState = {
   error: false,
 };
 
+// Currently learning better about useReducer, so I converted this since it seemed like something complex
 const reducer = (state, action) => {
   switch (action.type) {
     case "FETCH_SUCCESS":
@@ -173,4 +174,4 @@ const WalletRoutes = () => {
   );
 };
 
-export default WalletRoutes;
\ No newline at end of file
+export default WalletRoutes;
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index 6f02539..2c5d159 100644
--- a/src/components/MyWallet/WalletBox.jsx
+++ b/src/components/MyWallet/WalletBox.jsx
@@ -5,7 +5,7 @@ import RecentTransactionWidget from "./RecentTransactionWidget";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
-export default function WalletBox({ wallet, coupon }) {
+export default function WalletBox({ wallet, coupon, payment }) {
   return (
     <>
       <div className="my-wallet-wrapper w-full mb-10">
@@ -18,7 +18,7 @@ export default function WalletBox({ wallet, coupon }) {
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
                 <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
-                  <WalletItemCard walletItem={item} />
+                  <WalletItemCard walletItem={item} paymentHistory={payment} />
                 </div>
               ))
             ) : null}
diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx
index 420ab04..5d287cd 100644
--- a/src/components/MyWallet/WalletItemCard.jsx
+++ b/src/components/MyWallet/WalletItemCard.jsx
@@ -14,19 +14,18 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
   let accountType = userDetails?.account_type == "FAMILY";
 
   //   Credit popup
-  const [creditPopup, setCreditPopup] = useState({ state: false, data: {} });
+  const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
 
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
-      data: { ...value, currency: walletItem.description },
+      data: { ...value },
     });
   };
 
   const closePopUp = () => {
     setCreditPopup({ show: false, data: {} });
   };
-  console.log("walletItem >>", walletItem);
   return (
     <>
       <div
@@ -82,7 +81,7 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
                 to="transfer-fund"
                 className={`${
                   walletItem.action_type != "AC_AD_FD_ONLY" && "invisible"
-                } px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-purple hover:bg-white lg:text-xl text-lg font-bold text-white hover:text-black`}
+                } px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white`}
               >
                 Transfer
               </Link>
@@ -90,8 +89,13 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
             <div>
               <button
                 // state={{ currency: walletItem.description }}
-                className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative  bg-white lg:text-xl text-lg font-bold hover:bg-purple text-black hover:text-white"
-                onClick={openPopUp}
+                className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white"
+                onClick={() => {
+                  openPopUp({
+                    paymentHistory: paymentHistory,
+                    currency: walletItem?.description,
+                  });
+                }}
               >
                 <span className="">
                   <svg
@@ -103,19 +107,21 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
                   >
                     <path
                       d="M21 0C16.8466 0 12.7865 1.23163 9.33303 3.53914C5.8796 5.84665 3.18798 9.1264 1.59854 12.9636C0.00909901 16.8009 -0.406771 21.0233 0.403518 25.0969C1.21381 29.1705 3.21386 32.9123 6.15077 35.8492C9.08767 38.7861 12.8295 40.7862 16.9031 41.5965C20.9767 42.4068 25.1991 41.9909 29.0364 40.4015C32.8736 38.812 36.1534 36.1204 38.4609 32.667C40.7684 29.2135 42 25.1534 42 21C41.994 15.4323 39.7796 10.0944 35.8426 6.15741C31.9056 2.22045 26.5677 0.00602189 21 0ZM28 22.75H22.75V28C22.75 28.4641 22.5656 28.9092 22.2374 29.2374C21.9093 29.5656 21.4641 29.75 21 29.75C20.5359 29.75 20.0908 29.5656 19.7626 29.2374C19.4344 28.9092 19.25 28.4641 19.25 28V22.75H14C13.5359 22.75 13.0908 22.5656 12.7626 22.2374C12.4344 21.9092 12.25 21.4641 12.25 21C12.25 20.5359 12.4344 20.0907 12.7626 19.7626C13.0908 19.4344 13.5359 19.25 14 19.25H19.25V14C19.25 13.5359 19.4344 13.0908 19.7626 12.7626C20.0908 12.4344 20.5359 12.25 21 12.25C21.4641 12.25 21.9093 12.4344 22.2374 12.7626C22.5656 13.0908 22.75 13.5359 22.75 14V19.25H28C28.4641 19.25 28.9093 19.4344 29.2374 19.7626C29.5656 20.0907 29.75 20.5359 29.75 21C29.75 21.4641 29.5656 21.9092 29.2374 22.2374C28.9093 22.5656 28.4641 22.75 28 22.75Z"
-                      fill="white"
+                      //   fill="white"
+                      className="stroke-black fill-white"
                     ></path>
                   </svg>
                 </span>
                 <span className="">Add Credit</span>
+                <span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out bg-gray-300 group-hover:bg-gray-400 opacity-0"></span>
               </button>
             </div>
           </div>
         )}
       </div>
-      {creditPopup.state && (
+      {creditPopup.show && (
         <CreditPopup
-          details={paymentHistory}
+          details={creditPopup.data}
           onClose={closePopUp}
           situation={openPopUp}
         />