diff --git a/src/RouteLinks.js b/src/RouteLinks.js
index e8ff6b3..2b0811e 100644
--- a/src/RouteLinks.js
+++ b/src/RouteLinks.js
@@ -1,15 +1,11 @@
 const RouteLinks = {
     loginPage: '/auth/login',
-    errorPage: '*',
     homePage: '/',
-    usersPage: '/users',
-    approvedLoansPage: '/loans/approved',
-    applicationsLoanPage: '/loans/apply',
-    disbursementsLoanPage: '/loans/disbursements',
-    selectedLoanPage: '/loans/select',
-    loanOffersPage: '/loans/offers',
     loansPage: '/loans',
-    requestPage: '/request',
+    transactionsPage: '/transactions',
+    repaymentsPage: '/repayments',
+    loanChargesPage: '/loan-charges',
+    errorPage: '*',
 }
 
 export default RouteLinks
\ No newline at end of file
diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx
index f88ad7f..dc89a2d 100644
--- a/src/SiteRoutes.jsx
+++ b/src/SiteRoutes.jsx
@@ -7,14 +7,10 @@ import PageLoader from './components/PageLoader'
 
 import LoginPage from './pages/LoginPage' // LOGIN PAGE
 import HomePage from './pages/HomePage' // Home PAGE
-import UsersPage from './pages/UsersPage' // Users PAGE
-import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
-import DisbursementsLoanPage from './pages/DisbursementsLoanPage' // DISBURSEMENTS LOANS PAGE
-import ApplicationsLoanPage from './pages/ApplicationsLoanPage' // APPLICATIONS LOANS PAGE
-import SelectedLoanPage from './pages/SelectedLoanPage' // SELECTED LOANS PAGE
-import LoanOffersPage from './pages/LoanOffersPage' // SELECTED LOANS PAGE
 import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
-import RequestPage from './pages/RequestPage' // SELECTED LOANS PAGE
+import TransactionsPage from './pages/TransactionsPage' // TRANSACTIONS PAGE
+import RepaymentsPage from './pages/RepaymentsPage' // REPAYMENTS PAGE
+import LoanChargesPage from './pages/LoanChargesPage'
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -26,15 +22,10 @@ export default function SiteRoutes() {
 
       <Route element={<UserExist />}>
         <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
-        <Route path={RouteLinks.usersPage} element={<UsersPage />} /> {`*/USERS PAGE*/`}
-        <Route path={RouteLinks.approvedLoansPage} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
-        <Route path={RouteLinks.disbursementsLoanPage} element={<DisbursementsLoanPage />} /> {`*/DISBURSEMENTS LOANS PAGE*/`}
-        <Route path={RouteLinks.applicationsLoanPage} element={<ApplicationsLoanPage />} /> {`*/APPLICATIONS LOANS PAGE*/`}
-        <Route path={RouteLinks.selectedLoanPage} element={<SelectedLoanPage />} /> {`*/SELECTED LOANS PAGE*/`}
-        <Route path={RouteLinks.loanOffersPage} element={<LoanOffersPage />} /> {`*/LOANS OFFERS PAGE*/`}
-
         <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
-        <Route path={RouteLinks.requestPage} element={<RequestPage />} /> {`*/Request PAGE*/`}
+        <Route path={RouteLinks.transactionsPage} element={<TransactionsPage />} /> {`*/Transactions PAGE*/`}
+        <Route path={RouteLinks.repaymentsPage} element={<RepaymentsPage />} /> {`*/REPAYMENTS PAGE*/`}
+        <Route path={RouteLinks.loanChargesPage} element={<LoanChargesPage />} /> {`*/LOAN CHARGES PAGE*/`}
       </Route>
 
       {/* ERROR PAGE */}
diff --git a/src/components/applicationsloancom/ApplicationsLoanCom.jsx b/src/components/_applicationsloancom/ApplicationsLoanCom.jsx
similarity index 100%
rename from src/components/applicationsloancom/ApplicationsLoanCom.jsx
rename to src/components/_applicationsloancom/ApplicationsLoanCom.jsx
diff --git a/src/components/approvedloancom/ApprovedLoanCom.jsx b/src/components/_approvedloancom/ApprovedLoanCom.jsx
similarity index 100%
rename from src/components/approvedloancom/ApprovedLoanCom.jsx
rename to src/components/_approvedloancom/ApprovedLoanCom.jsx
diff --git a/src/components/disbursementsloancom/DisbursementsLoanCom.jsx b/src/components/_disbursementsloancom/DisbursementsLoanCom.jsx
similarity index 100%
rename from src/components/disbursementsloancom/DisbursementsLoanCom.jsx
rename to src/components/_disbursementsloancom/DisbursementsLoanCom.jsx
diff --git a/src/components/loanofferscom/LoanOffersCom.jsx b/src/components/_loanofferscom/LoanOffersCom.jsx
similarity index 100%
rename from src/components/loanofferscom/LoanOffersCom.jsx
rename to src/components/_loanofferscom/LoanOffersCom.jsx
diff --git a/src/components/selectedloancom/SelectedLoanCom.jsx b/src/components/_selectedloancom/SelectedLoanCom.jsx
similarity index 100%
rename from src/components/selectedloancom/SelectedLoanCom.jsx
rename to src/components/_selectedloancom/SelectedLoanCom.jsx
diff --git a/src/components/layouts/DashboardHeader.jsx b/src/components/layouts/DashboardHeader.jsx
index 60e091f..67c0190 100644
--- a/src/components/layouts/DashboardHeader.jsx
+++ b/src/components/layouts/DashboardHeader.jsx
@@ -5,16 +5,15 @@ import { generalLayoutContext } from "../../context/GeneralLayoutContext"
 
 import UserAvatar from '../../assets/user_avatar.jpg'
 import HandBurger from "./HandBurger"
-import { Link, useLocation } from "react-router-dom"
+import { Link } from "react-router-dom"
 import RouteLinks from "../../RouteLinks"
-import { useState } from "react";
 import MainBtn from "../MainBtn";
 import { TbLogout2 } from "react-icons/tb";
 import Icons from "../Icons";
 
 export default function DashboardHeader() {
 
-    let {pathname} = useLocation()
+    // let {pathname} = useLocation()
 
     const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
 
@@ -36,11 +35,9 @@ export default function DashboardHeader() {
                     </Link>
 
                     {/* RIGHT DRAWER BUTTON */}
-                    {pathname == '/' &&
                      <div onClick={()=>setShowAsideDrawer('right-aside')} className='large:hidden  w-10 h-10 border border-slate-300 text-slate-500 dark:text-white-body rounded-md px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
                         <Icons name='right-panel' className="text-sm md:text-xl font-bold" />
                     </div>
-                    }
 
                      {/* MESSAGE */}
                      {/* <button onClick={()=>handleDrawer(drawerName.chat)} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
diff --git a/src/components/layouts/DashboardLayout.jsx b/src/components/layouts/DashboardLayout.jsx
index 308879c..52fe5b7 100644
--- a/src/components/layouts/DashboardLayout.jsx
+++ b/src/components/layouts/DashboardLayout.jsx
@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react'
-import { Outlet, useLocation } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 
 import DashboardHeader from './DashboardHeader'
 import { generalLayoutContext } from '../../context/GeneralLayoutContext'
@@ -8,7 +7,7 @@ import RightAsideBar from './rightaside/RightAsideBar'
 
 export default function DashboardLayout() {
 
-    let {pathname} = useLocation()
+    // let {pathname} = useLocation()
 
   const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
   
@@ -18,9 +17,6 @@ export default function DashboardLayout() {
             <DashboardAside />
         </div>
 
-        {/* <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} w-4/5 sm:w-72 px-8 py-4 lg:hidden fixed inset-0 z-[999] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
-            <DashboardAside />
-        </div> */}
         <div className={`${showAsideDrawer =='aside' ? 'left-0' : '-left-full'} lg:hidden w-full fixed inset-0 z-[999]`}>
             <div className={`${showAsideDrawer =='aside' ? 'fixed left-0 top-0 inset-0' : '-left-full'} w-full bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div>
             <div className={`fixed px-8 py-4 h-full w-4/5 sm:w-[400px] bg-white-aside dark:bg-black-aside dark:text-white-light`}>
@@ -28,7 +24,7 @@ export default function DashboardLayout() {
             </div>
         </div>
 
-        <div className={`main w-full bg-inherit ${pathname == '/' && 'large:mr-[400px]'}`}>
+        <div className={`main w-full bg-inherit large:mr-[400px]`}>
             <div className='fixed top-0 left-0 z-[980] w-full px-8 bg-inherit lg:hidden'>
                 <DashboardHeader />
             </div> 
@@ -45,7 +41,6 @@ export default function DashboardLayout() {
         </div>
 
         {/* Right Aisde */}
-        {pathname == '/' &&
         <>
             <div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
                 <RightAsideBar />
@@ -57,7 +52,6 @@ export default function DashboardLayout() {
                 </div>
             </div>
         </>
-        }
     </div>
   )
 }
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx
index 5b1f9cd..598fb55 100644
--- a/src/components/layouts/aside/DashboardAside.jsx
+++ b/src/components/layouts/aside/DashboardAside.jsx
@@ -138,13 +138,10 @@ export default function DashboardAside() {
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
     {name:'First Advance', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
-        {name: 'Request', status:1, icon: 'dot', to: RouteLinks.requestPage},
+        {name: 'Transactions', status:1, icon: 'dot', to: RouteLinks.transactionsPage},
         {name: 'Loans', status:1, icon: 'dot', to: RouteLinks.loansPage},
-        {name: 'Selected Loans', status:1, icon: 'dot', to: RouteLinks.selectedLoanPage},
-        {name: 'Applications', status:1, icon: 'dot', to: RouteLinks.applicationsLoanPage},
-        {name: 'Approved Loans', status:1, icon: 'dot', to: RouteLinks.approvedLoansPage},
-        {name: 'Disbursements', status:1, icon: 'dot', to: RouteLinks.disbursementsLoanPage},
-        {name: 'Payments', status:1, icon: 'dot', to: ''},
+        {name: 'Repayments', status:1, icon: 'dot', to: RouteLinks.repaymentsPage},
+        {name: 'Loan Charges', status:1, icon: 'dot', to: RouteLinks.loanChargesPage},
         {name: 'Configurations', status:1, icon: 'arrow-right', subLinks: [
             {name: 'Loan Offers', status:1, icon: 'dot', to: RouteLinks.loanOffersPage },
             ]
diff --git a/src/components/loan_charges/LoanChargesCom.jsx b/src/components/loan_charges/LoanChargesCom.jsx
new file mode 100644
index 0000000..0ac5042
--- /dev/null
+++ b/src/components/loan_charges/LoanChargesCom.jsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getLoanCharges } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+
+export default function LoanChargesCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getLoanCharges({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const loanCharges = data?.data?.transactions // LOAN CHARGES LIST
+    const pagination = data?.data?.pagination
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Loan Charges' paths={['Dashboard', 'Loan Charges']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                    <TablePaginatedWrapper data={loanCharges} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        {/* <th scope="col" className="px-2">
+                                            Loan
+                                        </th> */}
+                                        <th scope="col" className="px-2">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.transaction_id}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            {/* <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.loan}</div>
+                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                </div> 
+                                            </td> */}
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Icons name='eye' />
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={3}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx
index 7c71b41..6c10784 100644
--- a/src/components/loanscom/LoansCom.jsx
+++ b/src/components/loanscom/LoansCom.jsx
@@ -10,7 +10,6 @@ import queryKeys from '../../services/queryKeys'
 import { getLoans } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
 import formatNumber from '../../helpers/formatNumber'
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 
 export default function LoansCom() {
 
@@ -80,15 +79,9 @@ export default function LoansCom() {
                                             </td>
                                             <td className="px-2 text-right">
                                                 <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Icons name='edit' />
-                                                </div>
-                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Icons name='eye' />
-                                                </div>
-                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Icons name='trash' />
-                                                </div>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Icons name='eye' />
+                                                    </div>
                                                 </div>
                                             </td>
                                         </tr>
diff --git a/src/components/repayments/RepaymentsCom.jsx b/src/components/repayments/RepaymentsCom.jsx
new file mode 100644
index 0000000..3ad6c63
--- /dev/null
+++ b/src/components/repayments/RepaymentsCom.jsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { getRepayments } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+
+export default function RepaymentsCom() {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getRepayments({page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const repayments = data?.data?.repayments // REPAYMENTS LIST
+    const pagination = data?.data?.pagination
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Repayments' paths={['Dashboard', 'Repayments']} />
+
+            <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+                {isFetching ? 
+                <>
+                    <p className='text-slate-800'>Loading...</p>
+                </>
+                : isError ?
+                    <p className='text-red-500'>{error.message}</p>
+                :
+                    <TablePaginatedWrapper data={repayments} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    {({ data }) => (
+                        <>
+                            <table className="py-2 w-full text-sm">
+                                <thead className="py-2 text-sm text-slate-500 text-left">
+                                    <tr>
+                                        <th scope="col" className="px-2 py-2">
+                                            Name
+                                        </th>
+                                        {/* <th scope="col" className="px-2">
+                                            Loan
+                                        </th> */}
+                                        <th scope="col" className="px-2">
+                                            Added
+                                        </th>
+                                        <th scope="col" className="px-2 text-right">
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {(data && data.length > 0) ? data?.map((item, index) => (
+                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                            <td className="px-2 py-2">
+                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                <img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.customer_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.transaction_id}</div>
+                                                </div>  
+                                                </div>
+                                            </td>
+                                            {/* <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="text-base font-semibold">{item?.loan}</div>
+                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                </div> 
+                                            </td> */}
+                                            <td className="px-2">
+                                                <div className="text-left">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
+                                                </div> 
+                                            </td>
+                                            <td className="px-2 text-right">
+                                                <div className='flex items-center justify-end gap-3 md:gap-4'>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Icons name='eye' />
+                                                    </div>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={3}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TablePaginatedWrapper>
+                }
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/request/RequestCom.jsx b/src/components/transactions/TransactionsCom.jsx
similarity index 77%
rename from src/components/request/RequestCom.jsx
rename to src/components/transactions/TransactionsCom.jsx
index a8c4f3c..97f19df 100644
--- a/src/components/request/RequestCom.jsx
+++ b/src/components/transactions/TransactionsCom.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import {Link} from 'react-router-dom'
+import { useQuery } from "@tanstack/react-query";
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
@@ -10,34 +9,34 @@ import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
 import { getTransactions } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
-import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 
-export default function RequestCom() {
+export default function TransactionsCom() {
 
     const [page, setPage] = useState(1)
 
     const {data, isFetching, isError, error, isPlaceholderData, isPending} = useQuery({
         queryKey: [...queryKeys.transactions, page],
         queryFn: () => getTransactions({page}),
+        staleTime: 0,
         // placeholderData: keepPreviousData,
     })
 
-    const selectUsers = data?.data?.transactions // TRANSACTIONS LIST
+    const transactions = data?.data?.transactions // TRANSACTIONS LIST
     const pagination = data?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Request' paths={['Dashboard', 'Request']} />
+            <BreadcrumbCom title='Transactions' paths={['Dashboard', 'Transactions']} />
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                {isPending ? 
+                {isFetching ? 
                 <>
                     <p className='text-slate-800'>Loading...</p>
                 </>
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TablePaginatedWrapper data={selectUsers} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
+                    <TablePaginatedWrapper data={transactions} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
                     {({ data }) => (
                         <>
                             <table className="py-2 w-full text-sm">
@@ -82,15 +81,9 @@ export default function RequestCom() {
                                             </td>
                                             <td className="px-2 text-right">
                                                 <div className='flex items-center justify-end gap-3 md:gap-4'>
-                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Icons name='edit' />
-                                                </div>
-                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Icons name='eye' />
-                                                </div>
-                                                <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                    <Icons name='trash' />
-                                                </div>
+                                                    <div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
+                                                        <Icons name='eye' />
+                                                    </div>
                                                 </div>
                                             </td>
                                         </tr>
diff --git a/src/pages/ApplicationsLoanPage.jsx b/src/pages/ApplicationsLoanPage.jsx
deleted file mode 100644
index 93da2b7..0000000
--- a/src/pages/ApplicationsLoanPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import ApplicationsLoanCom from '../components/applicationsloancom/ApplicationsLoanCom'
-
-export default function ApplicationsLoanPage() {
-  return (
-    <ApplicationsLoanCom />
-  )
-}
diff --git a/src/pages/ApprovedLoansPage.jsx b/src/pages/ApprovedLoansPage.jsx
deleted file mode 100644
index bd601f5..0000000
--- a/src/pages/ApprovedLoansPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import ApprovedLoanCom from '../components/approvedloancom/ApprovedLoanCom'
-
-export default function ApprovedLoansPage() {
-  return (
-    <ApprovedLoanCom />
-  )
-}
\ No newline at end of file
diff --git a/src/pages/DisbursementsLoanPage.jsx b/src/pages/DisbursementsLoanPage.jsx
deleted file mode 100644
index ccef316..0000000
--- a/src/pages/DisbursementsLoanPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import DisbursementsLoanCom from '../components/disbursementsloancom/DisbursementsLoanCom'
-
-export default function DisbursementsLoanPage() {
-    return (
-      <DisbursementsLoanCom />
-    )
-}
diff --git a/src/pages/LoanChargesPage.jsx b/src/pages/LoanChargesPage.jsx
new file mode 100644
index 0000000..9e232ce
--- /dev/null
+++ b/src/pages/LoanChargesPage.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import LoanChargesCom from '../components/loan_charges/LoanChargesCom'
+
+export default function LoanChargesPage() {
+  return (
+    <LoanChargesCom />
+  )
+}
diff --git a/src/pages/LoanOffersPage.jsx b/src/pages/LoanOffersPage.jsx
deleted file mode 100644
index 3aacaf4..0000000
--- a/src/pages/LoanOffersPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import LoanOffersCom from '../components/loanofferscom/LoanOffersCom'
-
-export default function LoanOffersPage() {
-  return (
-    <LoanOffersCom />
-  )
-}
diff --git a/src/pages/RepaymentsPage.jsx b/src/pages/RepaymentsPage.jsx
new file mode 100644
index 0000000..0106997
--- /dev/null
+++ b/src/pages/RepaymentsPage.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import RepaymentsCom from '../components/repayments/RepaymentsCom'
+
+export default function RepaymentsPage() {
+  return (
+    <RepaymentsCom />
+  )
+}
diff --git a/src/pages/RequestPage.jsx b/src/pages/RequestPage.jsx
deleted file mode 100644
index d0ff569..0000000
--- a/src/pages/RequestPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import RequestCom from '../components/request/RequestCom'
-
-export default function RequestPage() {
-  return (
-    <RequestCom/>
-  )
-}
diff --git a/src/pages/SelectedLoanPage.jsx b/src/pages/SelectedLoanPage.jsx
deleted file mode 100644
index 6894c3a..0000000
--- a/src/pages/SelectedLoanPage.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import SelectedLoanCom from '../components/selectedloancom/SelectedLoanCom'
-
-export default function SelectedLoanPage() {
-  return (
-    <SelectedLoanCom />
-  )
-}
\ No newline at end of file
diff --git a/src/pages/TransactionsPage.jsx b/src/pages/TransactionsPage.jsx
new file mode 100644
index 0000000..a87efe0
--- /dev/null
+++ b/src/pages/TransactionsPage.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import TransactionsCom from '../components/transactions/TransactionsCom'
+
+export default function TransactionsPage() {
+  return (
+    <TransactionsCom />
+  )
+}
diff --git a/src/pages/UsersPage.jsx b/src/pages/UsersPage.jsx
deleted file mode 100644
index aaef9fb..0000000
--- a/src/pages/UsersPage.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
-
-export default function UsersPage() {
-  return (
-    <div className='w-full'>
-      <BreadcrumbCom title='Users' paths={['Dashboard', 'Users']} />
-      <p className=''>
-        coming soon ...
-      </p>
-    </div>
-  )
-}
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 5483879..01e85ab 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -68,29 +68,14 @@ export const getTransactions = (reqData) => {
     return getAuxEnd(`/transactions`, postData)
 }
 
-
-
-
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const applyLoan = (reqData) => {
+// FUNCTION TO GET REPAYMENTS TABLE
+export const getRepayments = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/apply`, postData)
+    return getAuxEnd(`/repayments`, postData)
 }
 
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const loanOffers = (reqData) => {
+// FUNCTION TO GET LOAN CHARGES TABLE
+export const getLoanCharges = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/office/offers`, postData)
-}
-
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const selectLoan = (reqData) => {
-    const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/select`, postData)
-}
-
-// FUNCTION TO GET APPLIED LOANS TABLE
-export const approvedLoan = (reqData) => {
-    const postData = { ...reqData }
-    return getAuxEnd(`/office/loan/approved`, postData)
+    return getAuxEnd(`/transactions`, postData)
 }
\ No newline at end of file