diff --git a/src/RouteLinks.js b/src/RouteLinks.js
index ae3ba44..e8ff6b3 100644
--- a/src/RouteLinks.js
+++ b/src/RouteLinks.js
@@ -8,6 +8,8 @@ const RouteLinks = {
     disbursementsLoanPage: '/loans/disbursements',
     selectedLoanPage: '/loans/select',
     loanOffersPage: '/loans/offers',
+    loansPage: '/loans',
+    requestPage: '/request',
 }
 
 export default RouteLinks
\ No newline at end of file
diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx
index 479c7e8..f88ad7f 100644
--- a/src/SiteRoutes.jsx
+++ b/src/SiteRoutes.jsx
@@ -13,6 +13,8 @@ import DisbursementsLoanPage from './pages/DisbursementsLoanPage' // DISBURSEMEN
 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
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -30,6 +32,9 @@ export default function SiteRoutes() {
         <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>
 
       {/* ERROR PAGE */}
diff --git a/src/components/auth/LoginCom.jsx b/src/components/auth/LoginCom.jsx
index dbbe13e..28b0d5e 100644
--- a/src/components/auth/LoginCom.jsx
+++ b/src/components/auth/LoginCom.jsx
@@ -103,6 +103,14 @@ export default function LoginCom() {
                   {/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
                   <button onClick={handleLogin} className='w-full h-full bg-primary text-white font-bold rounded-md'>{loading ? 'Loading...' : 'Sign In'}</button>
                 </div>
+             
+                {/* {login.error &&
+                <>
+                  <div className="w-full text-center">
+                    <p className='text-red-500 text-sm'>{login.error.message}</p>
+                </div>
+                </>
+                } */}
               </div>
 
               {/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
@@ -114,13 +122,6 @@ export default function LoginCom() {
               </div>
 
 
-              {/* {login.error &&
-              <>
-                <div className="w-full text-center p-2">
-                  <p className='text-red-500 text-sm'>{login.error.message}</p>
-              </div>
-              </>
-              } */}
             </div>
           </div>
           <div className='col-span-1 md:col-span-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
diff --git a/src/components/home/HomeCom.jsx b/src/components/home/HomeCom.jsx
new file mode 100644
index 0000000..b830a33
--- /dev/null
+++ b/src/components/home/HomeCom.jsx
@@ -0,0 +1,157 @@
+import React from 'react'
+import BreadcrumbCom from '../../components/breadcrumb/BreadcrumbCom'
+import CustomCounter from '../../components/CustomCounter'
+import Icons from '../../components/Icons'
+import TableWrapper from '../../components/tableWrapper/TableWrapper'
+import Avatar from '../../assets/user_avatar.jpg'
+import { Widget1 } from './Widget1'
+import { Widget2 } from './Widget2'
+
+export default function HomeCom() {
+  return (
+    <div className='w-full flex flex-col gap-8'>
+      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
+      <div className='grid grid-cols-1 gap-8'>
+        <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
+          <div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Loans</p>
+            <Widget1 />
+            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
+              <p className='sm:text-[13.9px]'>This week</p>
+            </div>
+          </div>
+          <div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='text-base sm:text-lg font-bold hover:text-primary'>Payments</p>
+            {/* <Widget2 /> */}
+            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
+              <p className='sm:text-[13.9px]'>This week</p>
+            </div>
+          </div>
+          <div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Request Summary</p>
+            <div className='grid grid-cols-2 gap-4 font-bold'>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Sales</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Revenue</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Tickets</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
+                  <p className='text-12 text-slate-500'>Tasks</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className='w-full'>
+          <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
+              <div className='flex flex-col gap-1 order-2 xs:order-1'>
+                <p className='font-bold text-base'>Recent Request</p>
+                {/* <p className='text-12'>Over 500 members</p> */}
+              </div>
+              {/* <div className='order-1 xs:order-2 text-left xs:text-right'>
+                <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
+              </div> */}
+            </div>
+
+            <TableWrapper data={[1,2,3,4,5]} itemsPerPage={15}>
+                {({ data }) => (
+                    <>
+                        <table className="py-2 w-full text-sm">
+                            <thead className="py-2 text-sm text-slate-500 text-left font-semibold">
+                                <tr>
+                                    <th scope="col" className="px-2 py-2">
+                                        Request
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Account
+                                    </th>
+                                    <th scope="col" className="px-2">
+                                        Activity
+                                    </th>
+                                    <th scope="col" className="px-2 text-right">
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                              {data.map(item => (
+                                <tr 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">John Dummy</div>
+                                            <div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
+                                        </div>  
+                                      </div>
+                                    </td>
+                                    <td className="px-2">
+                                      <div className="text-left">
+                                          <div className="text-base font-semibold">chiefSoft</div>
+                                          <div className="font-normal text-gray-500">Web, UI/UX Design</div>
+                                      </div> 
+                                    </td>
+                                    <td className="px-2">
+                                      <div className="text-left">
+                                          <div className="font-normal text-gray-500">50%</div>
+                                          <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
+                                            <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
+                                          </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='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>
+                                    </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                        </table>
+                    </>
+                )}
+            </TableWrapper>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/home/Widget1.jsx b/src/components/home/Widget1.jsx
index eba57a9..6bf0882 100644
--- a/src/components/home/Widget1.jsx
+++ b/src/components/home/Widget1.jsx
@@ -52,7 +52,7 @@ const chartOptions = (chartHeight) => {
   return {
     series: [
       {
-        name: 'Net Profit',
+        name: 'Loans',
         data: [15, 25, 15, 40, 20, 50],
       },
     ],
@@ -171,7 +171,7 @@ const chartOptions = (chartHeight) => {
       },
       y: {
         formatter: function (val) {
-          return '$' + val + ' thousands'
+          return '$' + val + ' thousand'
         },
       },
     },
diff --git a/src/components/home/Widget2.jsx b/src/components/home/Widget2.jsx
index 2afe810..fb17931 100644
--- a/src/components/home/Widget2.jsx
+++ b/src/components/home/Widget2.jsx
@@ -48,7 +48,7 @@ const chartOptions = (chartHeight) => {
     return {
       series: [
         {
-          name: 'Inflation',
+          name: 'Payments',
           data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
         },
       ],
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx
index c348e74..6c4c93c 100644
--- a/src/components/layouts/aside/DashboardAside.jsx
+++ b/src/components/layouts/aside/DashboardAside.jsx
@@ -51,7 +51,7 @@ export default function DashboardAside() {
                     return (
                     <div key={index} className="w-full">
                         {link.title &&
-                            <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
+                            <h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-500 dark:border-white">{link.title}</h1>
                         }
                         <AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
                             <>
@@ -137,7 +137,9 @@ export default function DashboardAside() {
 
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
-    {name:'Salary Loan', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
+    {name:'First Advance', title:'Loan', status:1, icon: 'arrow-right', subLinks: [
+        {name: 'Request', status:1, icon: 'dot', to: RouteLinks.requestPage},
+        {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},
diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx
new file mode 100644
index 0000000..365a4da
--- /dev/null
+++ b/src/components/loanscom/LoansCom.jsx
@@ -0,0 +1,112 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { selectLoan } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+
+export default function LoansCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.select_loan,
+        queryFn: () => selectLoan()
+    })
+
+    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Loans' paths={['Dashboard', 'Loans']} />
+
+            <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>
+                :
+                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    {({ 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 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?.name || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.bvn}</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?.added)} {getTimeFromDateString(item?.added)}</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='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>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/request/RequestCom.jsx b/src/components/request/RequestCom.jsx
new file mode 100644
index 0000000..8cca011
--- /dev/null
+++ b/src/components/request/RequestCom.jsx
@@ -0,0 +1,112 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import {Link} from 'react-router-dom'
+
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+import TableWrapper from '../tableWrapper/TableWrapper'
+import Icons from '../Icons'
+
+import Avatar from '../../assets/user_avatar.jpg'
+import queryKeys from '../../services/queryKeys'
+import { selectLoan } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+
+export default function RequestCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.select_loan,
+        queryFn: () => selectLoan()
+    })
+
+    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
+
+    return (
+        <div className='w-full flex flex-col gap-8'>
+            <BreadcrumbCom title='Request' paths={['Dashboard', 'Request']} />
+
+            <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>
+                :
+                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    {({ 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 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?.name || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.bvn}</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?.added)} {getTimeFromDateString(item?.added)}</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='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>
+                                            </td>
+                                        </tr>
+                                    ))
+                                    :
+                                    <tr className="py-2 border-t border-dashed border-slate-300">
+                                        <td className="px-3 py-2" colSpan={4}>
+                                            <div className="flex justify-center items-center">
+                                                No Record Found
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </>
+                    )}
+                    </TableWrapper>
+                }
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index c82a82b..cfc18e8 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,157 +1,8 @@
 import React from 'react'
-import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
-import CustomCounter from '../components/CustomCounter'
-import Icons from '../components/Icons'
-import TableWrapper from '../components/tableWrapper/TableWrapper'
-import Avatar from '../assets/user_avatar.jpg'
-import { Widget1 } from '../components/home/Widget1'
-import { Widget2 } from '../components/home/Widget2'
+import HomeCom from '../components/home/HomeCom'
 
 export default function HomePage() {
   return (
-    <div className='w-full flex flex-col gap-8'>
-      <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
-      <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
-          <div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='text-base sm:text-lg font-bold hover:text-primary'>Earnings</p>
-            {/* <Widget1 /> */}
-            <div className='flex gap-2 items-end font-bold'>
-              <p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
-              <p className='sm:text-[13.9px]'>- 12% this week</p>
-            </div>
-          </div>
-          <div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='text-base sm:text-lg font-bold hover:text-primary'>Contributions</p>
-            {/* <Widget2 /> */}
-            <div className='flex gap-2 items-end font-bold'>
-              <p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
-              <p className='sm:text-[13.9px]'>+ 56% this week</p>
-            </div>
-          </div>
-          <div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
-            <p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>Summary</p>
-            <div className='grid grid-cols-2 gap-4 font-bold'>
-              <div className='flex items-center gap-2'>
-                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
-                  <Icons name='sales' />
-                </div>
-                <div>
-                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
-                  <p className='text-12 text-slate-500'>Sales</p>
-                </div>
-              </div>
-              <div className='flex items-center gap-2'>
-                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
-                  <Icons name='sales' />
-                </div>
-                <div>
-                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
-                  <p className='text-12 text-slate-500'>Revenue</p>
-                </div>
-              </div>
-              <div className='flex items-center gap-2'>
-                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
-                  <Icons name='sales' />
-                </div>
-                <div>
-                  <p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
-                  <p className='text-12 text-slate-500'>Tickets</p>
-                </div>
-              </div>
-              <div className='flex items-center gap-2'>
-                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
-                  <Icons name='sales' />
-                </div>
-                <div>
-                  <p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
-                  <p className='text-12 text-slate-500'>Tasks</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className='w-full'>
-          <div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-            <div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
-              <div className='flex flex-col gap-1 order-2 xs:order-1'>
-                <p className='font-bold text-base'>Members Statistics</p>
-                <p className='text-12'>Over 500 members</p>
-              </div>
-              <div className='order-1 xs:order-2 text-left xs:text-right'>
-                <button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
-              </div>
-            </div>
-
-            <TableWrapper data={[1,2,3,4,5]} itemsPerPage={15}>
-                {({ 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">
-                                        Authors
-                                    </th>
-                                    <th scope="col" className="px-2">
-                                        Company
-                                    </th>
-                                    <th scope="col" className="px-2">
-                                        Progress
-                                    </th>
-                                    <th scope="col" className="px-2 text-right">
-                                        Action
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                              {data.map(item => (
-                                <tr 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">John Dummy</div>
-                                            <div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
-                                        </div>  
-                                      </div>
-                                    </td>
-                                    <td className="px-2">
-                                      <div className="text-left">
-                                          <div className="text-base font-semibold">chiefSoft</div>
-                                          <div className="font-normal text-gray-500">Web, UI/UX Design</div>
-                                      </div> 
-                                    </td>
-                                    <td className="px-2">
-                                      <div className="text-left">
-                                          <div className="font-normal text-gray-500">50%</div>
-                                          <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
-                                            <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
-                                          </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='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>
-                                    </td>
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                    </>
-                )}
-            </TableWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
+    <HomeCom />
   )
 }
diff --git a/src/pages/LoansPage.jsx b/src/pages/LoansPage.jsx
new file mode 100644
index 0000000..92ae639
--- /dev/null
+++ b/src/pages/LoansPage.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import LoansCom from '../components/loanscom/LoansCom'
+
+export default function LoansPage() {
+  return (
+    <LoansCom />
+  )
+}
diff --git a/src/pages/RequestPage.jsx b/src/pages/RequestPage.jsx
new file mode 100644
index 0000000..d0ff569
--- /dev/null
+++ b/src/pages/RequestPage.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import RequestCom from '../components/request/RequestCom'
+
+export default function RequestPage() {
+  return (
+    <RequestCom/>
+  )
+}