diff --git a/.env b/.env
index 245811c..3dac4a9 100644
--- a/.env
+++ b/.env
@@ -9,11 +9,11 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 
 # REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
 # REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
-REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
-REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
-#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
diff --git a/.env.development b/.env.development
index 95c0a38..e7d957e 100644
--- a/.env.development
+++ b/.env.development
@@ -9,11 +9,11 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 
 # REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
 # REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
-REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
-REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+# REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+# REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
-#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
diff --git a/src/components/Cards/AvailableJobsCard.jsx b/src/components/Cards/AvailableJobsCard.jsx
index a76ae0b..25f0a66 100644
--- a/src/components/Cards/AvailableJobsCard.jsx
+++ b/src/components/Cards/AvailableJobsCard.jsx
@@ -125,7 +125,7 @@ export default function AvailableJobsCard({
                   <p className="text-sm text-lighter-gray">
                     ( {datas.offer_code}) |
                     <span className="italic ml-1">
-                      {datas.timeline_days} day(s) ago
+                      {datas.timeline_days} day(s)
                     </span>
                   </p>
                 </div>
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index c924a19..f05dd0d 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -51,11 +51,16 @@ export default function InputCom({
             htmlFor={name}
           >
             {label}
-            {spanTag && (
+            {spanTag && 
+              spanTag == '*' ?
+              <span className="text-red-700 text-sm tracking-wide">
+                {' '}{spanTag}
+              </span>
+              :
               <span className="text-green-700 text-sm tracking-wide">
                 {spanTag}
               </span>
-            )}
+            }
           </label>
         )}
         {forgotPassword && (
diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx
index faf4003..92e4e31 100644
--- a/src/components/MyWallet/AddFund.jsx
+++ b/src/components/MyWallet/AddFund.jsx
@@ -1,15 +1,18 @@
 import React, {useState} from 'react'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import InputCom from '../Helpers/Inputs/InputCom'
 
+import AddFundDollars from './AddFundDollars'
+
 function AddFund({payment}) {
    
     const navigate = useNavigate()
+    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
 
     //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('0')
+    let [input, setInput] = useState('')
 
     let [inputError, setInputError] = useState('')
 
@@ -23,15 +26,15 @@ function AddFund({payment}) {
         setInputError('')
         if(!input || input == '0'){
             setInputError('Please Enter Amount')
-            return
+            return setTimeout(()=>{setInputError('')}, 5000)
         }
 
         if(isNaN(input)){
             setInputError('Amount must be a Number')
-            return
+            return setTimeout(()=>{setInputError('')}, 5000)
         }
 
-        const stateData = {amount: Number(input)}
+        const stateData = {amount: Number(input), currency: 'naira'}
         navigate('confirm-add-fund', {state: stateData})
      
         setInput('')
@@ -79,18 +82,27 @@ function AddFund({payment}) {
                             <div className="field w-full mb-6">
                                 <InputCom
                                     fieldClass="px-6"
-                                    label="Amount(Naira)"
+                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
                                     type="text"
                                     name="amount"
-                                    placeholder="Amount"
+                                    placeholder="0"
                                     value={input}
                                     inputHandler={handleChange}
-                                    // blurHandler={props.handleBlur}
                                 />
                                 {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                             </div>
                         </form>
                         <hr />
+
+                        {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
+                        {currency == 'US Dollars' &&
+                        <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
+                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
+                        </div>
+                        }
+
+                        {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
+                        {currency != 'US Dollars' &&
                         <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                             <button
                                 onClick={handleSubmit}
@@ -100,10 +112,13 @@ function AddFund({payment}) {
                                 <span className="text-white">Continue</span>
                             </button>
                         </div>
+                        }
                     </div>
                 </div>
             </div>
 
+            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
+            {currency != 'US Dollars' &&
             <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
                 <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">
@@ -117,6 +132,7 @@ function AddFund({payment}) {
                     </div>
                 </div>
             </div>
+            }          
         </div>
       )
 }
diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx
new file mode 100644
index 0000000..c79980a
--- /dev/null
+++ b/src/components/MyWallet/AddFundDollars.jsx
@@ -0,0 +1,462 @@
+import React,{useState} from 'react'
+import { useNavigate } from 'react-router-dom'
+import InputCom from '../Helpers/Inputs/InputCom';
+import PaginatedList from '../Pagination/PaginatedList';
+import { handlePagingFunc } from '../Pagination/HandlePagination';
+
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
+const validationSchema = Yup.object().shape({
+    name: Yup.string()
+        .min(3, "Minimum 3 characters")
+        .max(50, "Maximum 50 characters")
+        .required("Name is required"),
+    cardNum: Yup.string()
+        .min(3, "Minimum 3 characters")
+        .max(25, "Maximum 25 characters")
+        .required("Card Number is required"),
+    code: Yup.string()
+        .min(3, "Minimum 3 characters")
+        .max(25, "Maximum 25 characters")
+        .required("Postal Code is required"),
+    state: Yup.string()
+        .min(3, "Minimum 3 characters")
+        .max(25, "Maximum 25 characters")
+        .required("State is required"),
+    address: Yup.string()
+        .min(3, "Minimum 3 characters")
+        .max(50, "Maximum 50 characters")
+        .required("Address is required"),
+    expirationYear: Yup.string()
+        .min(4, "Minimum 4 characters")
+        .max(4, "Maximum 4 characters")
+        .required("Expiration Year is required"),
+    expirationMonth: Yup.string()
+        .min(1, "Minimum 1 characters")
+        .max(2, "Maximum 2 characters")
+        .required("Expiration Month is required"),
+    cvv: Yup.string()
+        .min(3, "Minimum 3 characters")
+        .max(4, "Maximum 4 characters")
+        .required("CVV Year is required"),
+});
+
+const initialValues = {
+    name: '',
+    cardNum: '',
+    code: '',
+    state: '',
+    address: '',
+    expirationYear: '',
+    expirationMonth: '',
+    cvv: ''
+  };
+
+
+function AddFundDollars(props) {
+    const navigate = useNavigate()
+
+    let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+
+    let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED
+
+    let previousCards = {data:[1,2]} //USER PREVIOUS CARDS // TO BE REPLACED LATER FROM DATA FROM API
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentPreviousCards = previousCards?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+    // FUNCTION TO SUBMIT
+    const handleSubmit = (values, helpers) => {
+        props.setInputError('')
+        if(!props.input || props.input == '0'){
+            props.setInputError('Please Enter Amount')
+            return setTimeout(()=>{props.setInputError('')}, 5000)
+        }
+
+        if(isNaN(props.input)){
+            props.setInputError('Amount must be a Number')
+            return setTimeout(()=>{props.setInputError('')}, 5000)
+        }
+        if(tab == 'previous'){
+            const stateData = {amount: Number(props.input), currency: 'dollars'}
+            navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
+        }
+        if(tab == 'new'){
+            const stateData = {amount: Number(props.input), currency: 'dollars', ...values}
+            navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
+        }
+        props.setInput('')
+    }
+
+  return (
+    <>
+        <h1 className='mb-2 text-xl font-bold text-dark-gray dark:text-white'>Payment Method</h1>
+        <div className="w-full">
+            {/* switch button */}
+            <div className="my-1 flex items-center border-b border-slate-300">
+                <button
+                name="previous"
+                onClick={(e) => setTab(e.target.name)}
+                className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
+                    tab == "previous" ? "border-sky-blue" : "border-slate-300"
+                } tracking-wide transition duration-200`}
+                >
+                Previous Cards
+                </button>
+                <button
+                name="new"
+                onClick={(e) => setTab(e.target.name)}
+                className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
+                    tab == "new" ? "border-sky-blue" : "border-slate-300"
+                }  tracking-wide transition duration-200`}
+                >
+                Add New Card
+                </button>
+            </div>
+            {/* END OF switch button */}
+
+            {/* previous tab */}
+            {tab == 'previous' ?
+            <div className="p-4 previous-details w-full border min-h-[300px] flex flex-col justify-between items-center">
+            {previousCards?.data?.length ?
+                <table className="my-3 w-full">
+                    <tbody>
+                    {currentPreviousCards.map((item, index)=>(
+                        <tr key={index}>
+                            <td>
+                                <div className='flex items-center gap-5'>
+                                    <input type="radio" className='w-8 h-8' name='card' value='value' />
+                                    <div className='card-details'>
+                                        <h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>Master Card</h1>
+                                        <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************3535</p>
+                                        <p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
+                                    </div>
+                                </div>
+                            </td>
+                            <td>
+                                <button
+                                    // onClick={handleSubmit}
+                                    type="button"
+                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                >
+                                    <span className="text-white">Manage</span>
+                                </button>
+                            </td>
+                        </tr>
+                    )) 
+                    }
+                    </tbody>
+                </table>
+                :
+                <div className='w-full flex flex-col items-center'>
+                    <p className='my-5 text-base font-bold text-dark-gray dark:text-white tracking-wide'>No Previous Card Found!</p>
+                    <button
+                        onClick={()=> setTab('new')}
+                        type="button"
+                        className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                    >
+                        <span className="text-white">Add Card</span>
+                    </button>
+                </div>
+                }
+                {/* PAGINATION BUTTON */}
+                <div className='w-full'>
+                    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= previousCards?.data?.length ? true : false} data={previousCards?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+                </div>
+                {/* END OF PAGINATION BUTTON */}
+            </div>
+            :
+            <div className="new-details w-full min-h-[300px] border-t">
+                <div className="w-full flex flex-col justify-between">
+                    <Formik
+                        initialValues={initialValues}
+                        validationSchema={validationSchema}
+                        onSubmit={handleSubmit}
+                    >
+                        {(props) => {
+                        return (
+                            <Form>
+                            <div className="flex flex-col-reverse sm:flex-row">
+                                <div className="flex-1 sm:mr-10">
+                                    <div className="fields w-full">
+                                        {/* inputs starts here */}
+                                        {/* Name */}
+                                        <div className="field w-full my-6">
+                                        <InputCom
+                                            fieldClass="px-6"
+                                            spanTag='*'
+                                            label="Name on Card"
+                                            type="text"
+                                            name="name"
+                                            placeholder="DUMMY NAME"
+                                            value={props.values.name}
+                                            inputHandler={props.handleChange}
+                                            blurHandler={props.handleBlur}
+                                        />
+                                        {props.errors.name && props.touched.name && (
+                                            <p className="text-sm text-red-500">
+                                            {props.errors.name}
+                                            </p>
+                                        )}
+                                        </div>
+
+                                        {/* CARD NUMBER */}
+                                        <div className="field w-full mb-6">
+                                        <InputCom
+                                            fieldClass="px-6"
+                                            spanTag='*'
+                                            iconName='wallet-two'
+                                            label="Card Number"
+                                            type="text"
+                                            name="cardNum"
+                                            placeholder="Enter Card Number"
+                                            value={props.values.cardNum}
+                                            inputHandler={props.handleChange}
+                                            blurHandler={props.handleBlur}
+                                        />
+                                        {props.errors.cardNum && props.touched.cardNum && (
+                                            <p className="text-sm text-red-500">
+                                            {props.errors.cardNum}
+                                            </p>
+                                        )}
+                                        </div>
+                                        {/* EXPIRE YEAR, YEAR AND CVV */}
+                                        <div className="sm:grid gap-5 grid-cols-3 mb-6">
+                                            <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                                <div className="select-option">
+                                                    <div className={`flex items-center justify-between mb-2.5`}>
+                                                        <label
+                                                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                                                            htmlFor='expiration'
+                                                        >Expiration Month <span className="text-red-700 text-sm tracking-wide">*</span></label>
+                                                    </div>
+                                                    <div
+                                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                                    >
+                                                        <select 
+                                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
+                                                        value={props.values.expirationMonth}
+                                                        onChange={props.handleChange}
+                                                        onBlur={props.handleBlur}
+                                                        name='expirationMonth'
+                                                        >
+                                                        <option value=''>Select...</option>
+                                                        {expireMonth?.length &&
+                                                            expireMonth.map((item, index) => (
+                                                            <option key={index} value={item.value}>{item.name}</option>
+                                                            ))
+                                                        }
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                                {props.errors.expirationMonth && props.touched.expirationMonth && (
+                                                <p className="text-sm text-red-500">
+                                                    {props.errors.expirationMonth}
+                                                </p>
+                                                )}
+                                            </div>
+                                            <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                                <div className="select-option">
+                                                    <div className={`flex items-center justify-between mb-2.5`}>
+                                                        <label
+                                                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                                                            htmlFor='expiration'
+                                                        >Expiration Year <span className="text-red-700 text-sm tracking-wide">*</span>
+                                                        </label>
+                                                    </div>
+                                                    <div
+                                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
+                                                    >
+                                                        <select 
+                                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
+                                                        value={props.values.expirationYear}
+                                                        onChange={props.handleChange}
+                                                        onBlur={props.handleBlur}
+                                                        name='expirationYear'
+                                                        >
+                                                        <option value=''>Select...</option>
+                                                        {expireYear?.length &&
+                                                            expireYear.map((item, index) => (
+                                                            <option key={index} value={item}>{item}</option>
+                                                            ))
+                                                        }
+                                                        </select>
+                                                    </div>
+                                                </div>
+                                                {props.errors.expirationYear && props.touched.expirationYear && (
+                                                <p className="text-sm text-red-500">
+                                                    {props.errors.expirationYear}
+                                                </p>
+                                                )}
+                                            </div>
+                                            <div className="field w-full col-span-1">
+                                                <InputCom
+                                                fieldClass="px-6"
+                                                spanTag='*'
+                                                iconName='wallet-two'
+                                                label="CVV"
+                                                type="text"
+                                                name="cvv"
+                                                placeholder="CVV"
+                                                value={props.values.cvv}
+                                                inputHandler={props.handleChange}
+                                                blurHandler={props.handleBlur}
+                                                />
+                                                {props.errors.cvv && props.touched.cvv && (
+                                                <p className="text-sm text-red-500">
+                                                    {props.errors.cvv}
+                                                </p>
+                                                )}
+                                            </div>
+                                        </div>
+                                        {/* Address */}
+                                        <div className="field w-full my-6">
+                                        <InputCom
+                                            fieldClass="px-6"
+                                            spanTag='*'
+                                            label="Billing Address"
+                                            type="text"
+                                            name="address"
+                                            placeholder="Billing Address"
+                                            value={props.values.Address}
+                                            inputHandler={props.handleChange}
+                                            blurHandler={props.handleBlur}
+                                        />
+                                        {props.errors.address && props.touched.address && (
+                                            <p className="text-sm text-red-500">
+                                            {props.errors.address}
+                                            </p>
+                                        )}
+                                        </div>
+                                        {/* postal code and state */}
+                                        <div className="sm:grid gap-5 grid-cols-3 mb-6">
+                                        <div className="field w-full mb-6 xl:mb-0 col-span-1">
+                                            <InputCom
+                                            fieldClass="px-6"
+                                            spanTag='*'
+                                            label="Postal Code"
+                                            type="text"
+                                            name="code"
+                                            placeholder="Postal Code"
+                                            value={props.values.code}
+                                            inputHandler={props.handleChange}
+                                            blurHandler={props.handleBlur}
+                                            />
+                                            {props.errors.code && props.touched.code && (
+                                            <p className="text-sm text-red-500">
+                                                {props.errors.code}
+                                            </p>
+                                            )}
+                                        </div>
+                                        <div className="field w-full col-span-1">
+                                            <InputCom
+                                            fieldClass="px-6"
+                                            spanTag='*'
+                                            label="State"
+                                            type="text"
+                                            name="state"
+                                            placeholder="State"
+                                            value={props.values.state}
+                                            inputHandler={props.handleChange}
+                                            blurHandler={props.handleBlur}
+                                            />
+                                            {props.errors.state && props.touched.state && (
+                                            <p className="text-sm text-red-500">
+                                                {props.errors.state}
+                                            </p>
+                                            )}
+                                        </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* <div className="w-full">
+                                {requestStatus.message != "" && (
+                                <p
+                                    className={`text-center text-base ${
+                                    requestStatus.status ? "text-green-800" : "text-red-600"
+                                    }`}
+                                >
+                                    {requestStatus.message}
+                                </p>
+                                )}
+                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                                <div className="flex items-center space-x-4 mr-9">
+                                    <Link
+                                    to="/"
+                                    className="text-18 text-light-red tracking-wide "
+                                    >
+                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
+                                        {" "}
+                                        Cancel
+                                    </span>
+                                    </Link>
+
+                                    {requestStatus.loading ? (
+                                    <LoadingSpinner size="8" color="sky-blue" />
+                                    ) : (
+                                    <button
+                                        type="submit"
+                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                    >
+                                        Update Profile
+                                    </button>
+                                    )}
+                                </div>
+                                </div>
+                            </div> */}
+                             <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
+                                <button
+                                    type="submit"
+                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                >
+                                    <span className="text-white">Continue</span>
+                                </button>
+                            </div>
+                            </Form>
+                        );
+                        }}
+                    </Formik>
+                </div>
+            </div>
+            }
+        </div>
+        { tab == 'previous' &&
+        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
+            <button
+                onClick={handleSubmit}
+                type="button"
+                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            >
+                <span className="text-white">Continue</span>
+            </button>
+        </div>
+        }
+    </>
+  )
+}
+
+export default AddFundDollars
+
+
+// FORMS ARRAY OF EXPIRATION YEAR FOR CARD
+const expireYear = []
+let currentYear = new Date().getFullYear()
+for(let i=0; i<=6; i++){
+    expireYear.push(currentYear + i)
+}
+
+// FORMS ARRAY OF EXPIRATION MONTH FOR CARD
+let month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+const expireMonth = []
+for(let i=0; i<month.length; i++){
+    expireMonth.push({name:month[i], value:i+1})
+}
\ No newline at end of file
diff --git a/src/components/MyWallet/Balance.jsx b/src/components/MyWallet/Balance.jsx
index 26ed007..19dd9d6 100644
--- a/src/components/MyWallet/Balance.jsx
+++ b/src/components/MyWallet/Balance.jsx
@@ -55,7 +55,7 @@ function Balance({wallet, coupon}) {
                                         item.action_type != 'AC_AD_FD_ONLY' ?
                                             <Link to='transfer-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
                                     }
-                                    <Link to='add-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-green lg:text-xl text-lg font-bold text-white'>
+                                    <Link to='add-fund' state={{currency:item.description}} className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-green lg:text-xl text-lg font-bold text-white'>
                                         <span className="">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="38"
                                                 height="38" viewBox="0 0 42 42" fill="none"><path
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx
index 333ee62..3dfec68 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/ConfirmAddFund.jsx
@@ -50,7 +50,6 @@ function ConfirmAddFund({ payment }) {
         toast.success("Account Topup was sucessful");
         setTimeout(() => {
           navigate("/my-wallet", { replace: true });
-          window.location.reload(true);
         }, 1000);
       })
       .catch((err) => {
@@ -102,11 +101,11 @@ function ConfirmAddFund({ payment }) {
   }, []);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+    <div className="content-wrapper w-full">
       {pageLoading ? (
         <LoadingSpinner size="8" color="sky-blue" />
       ) : (
-        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+        <div className="w-full mb-10">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
             <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
               Confirm Add Fund To Account
@@ -116,7 +115,7 @@ function ConfirmAddFund({ payment }) {
               <div className="field w-full mb-3">
                 <InputCom
                   fieldClass="px-6"
-                  label="Amount (Naira):"
+                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
                   type="text"
                   name="amount"
                   value={state.amount || ""}
@@ -127,16 +126,26 @@ function ConfirmAddFund({ payment }) {
 
             <hr />
             <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              <FlutterWaveButton
-                {...fwConfig}
+              {
+                state.currency == 'naira' ?
+                <FlutterWaveButton
+                  {...fwConfig}
+                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                />
+              :
+              <button 
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-              />
+                onClick={()=>console.log('WORKING')}
+              >
+                Continue
+              </button>
+              }
             </div>
           </div>
         </div>
       )}
 
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+      <div className="w-full mb-10">
         <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] 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
diff --git a/src/components/Referral/Index.jsx b/src/components/Referral/Index.jsx
index c162b16..08af400 100644
--- a/src/components/Referral/Index.jsx
+++ b/src/components/Referral/Index.jsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import Layout from '../Partials/Layout'
-import ReferralDisplay from './ReferralDisplay'
+import React from "react";
+import Layout from "../Partials/Layout";
+import ReferralDisplay from "./ReferralDisplay";
 
 function Referral() {
   return (
     <Layout>
-        <ReferralDisplay />
+      <ReferralDisplay />
     </Layout>
-  )
+  );
 }
 
-export default Referral
\ No newline at end of file
+export default Referral;
diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx
index 8b962b2..dff6591 100644
--- a/src/components/Referral/ReferralDisplay.jsx
+++ b/src/components/Referral/ReferralDisplay.jsx
@@ -10,25 +10,25 @@ import * as Yup from "yup";
 import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
 
 const validationSchema = Yup.object().shape({
-  email: Yup.string()
+  ref_email: Yup.string()
     .email("Wrong email format")
     .min(3, "Minimum 3 characters")
     .max(50, "Maximum 50 characters")
     .required("Email is required"),
-  firstname: Yup.string()
+  ref_firstname: Yup.string()
     .min(3, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Firstname is required"),
-  lastname: Yup.string()
+  ref_lastname: Yup.string()
     .min(3, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
     .required("Lastname is required"),
 });
 
 const initialValues = {
-  firstname: "",
-  lastname: "",
-  email: "",
+  ref_firstname: "",
+  ref_lastname: "",
+  ref_email: "",
 };
 
 function ReferralDisplay() {
@@ -120,12 +120,9 @@ function ReferralDisplay() {
         <div className="sm:flex justify-between items-center mb-6">
           <div className="mb-5 sm:mb-0">
             <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span>
-                 Refer a Friend
-                </span>
+              <span>Refer a Friend</span>
             </h1>
           </div>
-
         </div>
 
         <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
@@ -146,17 +143,18 @@ function ReferralDisplay() {
                       fieldClass="px-6"
                       label="Firstname"
                       type="text"
-                      name="firstname"
+                      name="ref_firstname"
                       placeholder="Firstname"
-                      value={props.values.firstname}
+                      value={props.values.ref_firstname}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    {props.errors.firstname && props.touched.firstname && (
-                      <p className="text-sm text-red-500">
-                        {props.errors.firstname}
-                      </p>
-                    )}
+                    {props.errors.ref_firstname &&
+                      props.touched.ref_firstname && (
+                        <p className="text-sm text-red-500">
+                          {props.errors.ref_firstname}
+                        </p>
+                      )}
                   </div>
 
                   {/* Lastname */}
@@ -165,17 +163,18 @@ function ReferralDisplay() {
                       fieldClass="px-6"
                       label="Lastname"
                       type="text"
-                      name="lastname"
+                      name="ref_lastname"
                       placeholder="Lastname"
-                      value={props.values.lastname}
+                      value={props.values.ref_lastname}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    {props.errors.lastname && props.touched.lastname && (
-                      <p className="text-sm text-red-500">
-                        {props.errors.lastname}
-                      </p>
-                    )}
+                    {props.errors.ref_lastname &&
+                      props.touched.ref_lastname && (
+                        <p className="text-sm text-red-500">
+                          {props.errors.ref_lastname}
+                        </p>
+                      )}
                   </div>
                 </div>
 
@@ -184,14 +183,16 @@ function ReferralDisplay() {
                     fieldClass="px-6"
                     label="Email"
                     type="text"
-                    name="email"
+                    name="ref_email"
                     placeholder="Email"
-                    value={props.values.email}
+                    value={props.values.ref_email}
                     inputHandler={props.handleChange}
                     blurHandler={props.handleBlur}
                   />
-                  {props.errors.email && props.touched.email && (
-                    <p className="text-sm text-red-500">{props.errors.email}</p>
+                  {props.errors.ref_email && props.touched.ref_email && (
+                    <p className="text-sm text-red-500">
+                      {props.errors.ref_email}
+                    </p>
                   )}
                 </div>
 
@@ -205,7 +206,8 @@ function ReferralDisplay() {
                   ) : (
                     <button
                       type="submit"
-                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"                    >
+                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                    >
                       Send Message
                     </button>
                   )}
@@ -220,14 +222,12 @@ function ReferralDisplay() {
             Referral List
           </h2>
           {referralList.loading ? (
-              <LoadingSpinner size="32" color="sky-blue" />
+            <LoadingSpinner size="32" color="sky-blue" />
           ) : (
-              <ReferralTable history={referralList} />
+            <ReferralTable history={referralList} />
           )}
         </div>
       </div>
-
-
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 5c79024..fce17af 100644
--- a/src/index.css
+++ b/src/index.css
@@ -51,8 +51,11 @@
   font-weight: bolder;
 }
 .siderCardDescription{
-  margin: 20px 45px 10px 45px;
-  font-size: 20px;
+  margin: 10px 45px 10px 45px;
+  font-size: 18px;
+  background-color: aliceblue;
+  padding: 5px;
+  border-radius: 5px;
 }
 .siderCardButton{
   margin-top: 10px;
diff --git a/src/views/ReferralPage.jsx b/src/views/ReferralPage.jsx
index 8247e86..1430548 100644
--- a/src/views/ReferralPage.jsx
+++ b/src/views/ReferralPage.jsx
@@ -1,12 +1,12 @@
-import React from 'react'
-import Referral from '../components/Referral/Index'
+import React from "react";
+import Referral from "../components/Referral/Index";
 
 function ReferralPage() {
   return (
     <>
-    <Referral />
+      <Referral />
     </>
-  )
+  );
 }
 
-export default ReferralPage
\ No newline at end of file
+export default ReferralPage;