diff --git a/src/Routers.jsx b/src/Routers.jsx
index af7da6e..a19959c 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -63,7 +63,7 @@ export default function Routers() {
           <Route exact path="/tracking" element={<TrackingPage />} />
           <Route exact path="/calendar" element={<CalendarPage />} />
           <Route exact path="/resources" element={<ResourcePage />} />
-          <Route exact path="/my-wallet" element={<MyWalletPage />} />
+          <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx
new file mode 100644
index 0000000..c50dda1
--- /dev/null
+++ b/src/components/MyWallet/AddFund.jsx
@@ -0,0 +1,83 @@
+import React, {useState} from 'react'
+
+function AddFund() {
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState('0')
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(value)
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+     
+        setInputs('')
+    }
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <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'>Add Credit with Account Deposit</h2>
+                    <hr />
+                   <form className='md:p-8 p-4 add-fund-info'>
+                        <div className='md:flex items-center'>
+                            <label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-2/4 p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs} 
+                                name='amount' 
+                                type="text" 
+                                placeholder='Amount' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+                   </form>
+                        <hr />
+                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
+                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                        </div>
+                </div>
+                <div className="add-fund py-4 my-2 w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                    <h2 className='md:px-8 px-4 py-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
+                    <hr />
+                    <p className='md:px-8 px-4 py-2 text-slate-600 dark:text-white text-base lg:text-xl font-medium'>Transfer fund to WrenchBoard GTB Account 0250869867</p>
+                    <p className='md:px-8 px-4 py-2 text-slate-500 dark:text-white text-sm lg:text-base font-medium'>
+                    Make sure you add your account username in the notes part of the transfer for prompt processing. When the transfer is complete notify here <a className='text-sky-blue' href='#'>Contact us</a>
+                    </p>
+                </div>
+            </div>
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full  md:p-8 p-4 h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    <table className="wallet-activity w-full table-auto border-collapse text-left">
+                        <thead className='border-b-2'>
+                            <tr className='text-slate-600'>
+                            <th className="py-3">Date</th>
+                            <th className="py-3">Recipient</th>
+                            <th className="py-3">Amount/Fee</th>
+                            <th className="py-3">Conf/Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default AddFund
\ No newline at end of file
diff --git a/src/components/MyWallet/Balance.jsx b/src/components/MyWallet/Balance.jsx
new file mode 100644
index 0000000..46e6965
--- /dev/null
+++ b/src/components/MyWallet/Balance.jsx
@@ -0,0 +1,120 @@
+import React, {useState} from 'react'
+import { Link } from 'react-router-dom'
+
+function Balance() {
+    return (
+        <div className="content-wrapper">
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                        <div className='flex items-baseline justify-between'>
+                            <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>
+                            <p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>
+                        </div>
+                        {/* wallet balance */}
+                        <div className="md:flex items-center flex-wrap mt-3">
+                            <div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
+                                <div className='balance-info'>
+                                    <p className='py-2'>Currency</p>
+                                    <span className='text-base'>Naira</span>
+                                    <p className='text-base text-slate-500'>Naira</p>
+                                </div>
+                                <div className='balance-info'>
+                                    <p className='py-2'>balance</p>
+                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>&#8358;0.00</span>
+                                </div>
+                                <div className='balance-info'>
+                                    <p className='py-2'>Escrow</p>
+                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>&#8358;0.00</span>
+                                </div>
+                            </div>
+
+                            <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
+                                <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>
+                                <Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
+                            </div>
+                        </div>
+                        {/* end of wallet balance */}
+                    </div>
+                </div>
+        
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-[200px] 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'>Recent Activity</h2>
+                        <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                        <table className="wallet-activity w-full table-auto border-collapse text-left">
+                            <thead className='border-b-2'>
+                                <tr className='text-slate-600'>
+                                <th className="py-3">Date</th>
+                                <th className="py-3">Recipient</th>
+                                <th className="py-3">Amount/Fee</th>
+                                <th className="py-3">Conf/Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr className='text-slate-500'>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-[200px] 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'>Purchases</h2>
+                        <table className="wallet-activity w-full table-auto border-collapse text-left">
+                            <thead className='border-b-2'>
+                                <tr className='text-slate-600'>
+                                <th className="py-3">Date</th>
+                                <th className="py-3">Description</th>
+                                <th className="py-3">Amount</th>
+                                <th className="py-3">Fee</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr className='text-slate-500'>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+        
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-[200px] 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>
+                        <table className="wallet-activity w-full table-auto border-collapse text-left">
+                            <thead className='border-b-2'>
+                                <tr className='text-slate-600'>
+                                <th className="py-3">Date</th>
+                                <th className="py-3">Description</th>
+                                <th className="py-3">Amount</th>
+                                <th className="py-3">Active</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr className='text-slate-500'>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default Balance
\ No newline at end of file
diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx
new file mode 100644
index 0000000..a754224
--- /dev/null
+++ b/src/components/MyWallet/TransferFund.jsx
@@ -0,0 +1,141 @@
+import React, {useState} from 'react'
+import { Link } from 'react-router-dom'
+
+function TransferFund() {
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        amount: '0',
+        fee: '0',
+        recipient: '',
+        total: '0',
+        comment: ''
+    })
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(prev => ({...prev, [name]:value}))
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+    
+        setInputs({
+            amount: '0',
+            fee: '0',
+            recipient: '',
+            total: '0',
+            comment: ''
+        })
+    }
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                   <form className='transfer-fund-info'>
+                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : &#8358;0.00</h2>
+                        <div className='my-3 md:flex items-center justify-between space-x-2'>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.amount} 
+                                    name='amount' 
+                                    type="text" 
+                                    placeholder='Amount' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.fee} 
+                                    name='fee' 
+                                    type="text" 
+                                    placeholder='Fee' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='my-3 md:flex items-center justify-end space-x-2'>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.total} 
+                                    name='total' 
+                                    type="text" 
+                                    placeholder='Total' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='relative my-3 md:flex items-center'>
+                            <div className='transfer-input w-full'>
+                                <div className='flex items-center justify-start'>
+                                    <label className='text-slate-600 text-lg'>Recipient 
+                                        <span className='text-red-500 mx-2'>*</span> 
+                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
+                                    </label>
+                                    <Link to='#' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                </div>
+                                <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
+                                    <option className='text-slate-500 text-lg' value="">Select...</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className='my-3 md:flex items-center'>
+                            <div className='transfer-input w-full'>
+                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.comment} 
+                                    name='comment' 
+                                    type="text" 
+                                    placeholder='Comment' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                        </div>
+                   </form>
+                </div>
+            </div>
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full  md:p-8 p-4 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'>Recent Activity</h2>
+                    <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                    <table className="wallet-activity w-full table-auto border-collapse text-left">
+                        <thead className='border-b-2'>
+                            <tr className='text-slate-600'>
+                            <th className="py-3">Date</th>
+                            <th className="py-3">Recipient</th>
+                            <th className="py-3">Amount/FeeConf/Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default TransferFund
\ No newline at end of file
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx
new file mode 100644
index 0000000..71c0680
--- /dev/null
+++ b/src/components/MyWallet/Wallet.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import {Routes, Route, Outlet, Navigate} from 'react-router-dom'
+
+import Layout from '../Partials/Layout'
+
+import Balance from './Balance'
+import TransferFund from './TransferFund'
+import AddFund from './AddFund'
+
+function Wallet() {
+  return (
+    <Layout>
+        <Outlet />
+    </Layout>
+  )
+}
+
+
+
+
+
+const WalletRoutes = () => {
+    return (
+        <Routes>
+            <Route element={<Wallet />}>
+                <Route path='add-fund' element={<AddFund />} />
+                <Route path='transfer-fund' element={<TransferFund />} />
+                <Route index element={<Balance />} />
+                <Route path='*' element={<Navigate to='/' />} />
+            </Route>
+        </Routes>
+    )
+}
+
+export default WalletRoutes
\ No newline at end of file
diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx
index 2166391..033b4f7 100644
--- a/src/components/Referral/ReferralDisplay.jsx
+++ b/src/components/Referral/ReferralDisplay.jsx
@@ -34,7 +34,7 @@ function ReferralDisplay() {
     <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
             <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
-                <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Send Referral</h2>
+                <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Send Referral</h2>
                <form className='referral-info' onSubmit={handleSubmit}>
                     <div className='md:flex items-center my-4'>
                         <label className='w-full md:w-1/4 text-slate-900 text-lg'>Firstname <span className='text-red-500'>*</span></label>
@@ -81,7 +81,7 @@ function ReferralDisplay() {
 
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
             <div className="referral w-full  md:p-8 p-4 h-[400px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
+                <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
                 <table className="referral-list w-full table-auto border-collapse text-left">
                     <thead className='border-b-2'>
                         <tr className='text-slate-600'>
diff --git a/src/views/MyWalletPage.jsx b/src/views/MyWalletPage.jsx
index d48ef74..284e93d 100644
--- a/src/views/MyWalletPage.jsx
+++ b/src/views/MyWalletPage.jsx
@@ -1,10 +1,11 @@
 import React from "react";
-import MyWallet from "../components/MyWallet";
+// import MyWallet from "../components/MyWallet";
+import WalletRoutes from "../components/MyWallet/Wallet";
 
 export default function MyWalletPage() {
   return (
     <>
-      <MyWallet />
+      <WalletRoutes />
     </>
   );
 }