diff --git a/src/RouteLinks.js b/src/RouteLinks.js
index b99e3e9..7e70dd0 100644
--- a/src/RouteLinks.js
+++ b/src/RouteLinks.js
@@ -3,6 +3,8 @@ const RouteLinks = {
     errorPage: '*',
     homePage: '/',
     usersPage: '/users',
+    approvedLoans: '/loans/approved',
+    pendingLoans: '/loans/pending',
 }
 
 export default RouteLinks
\ No newline at end of file
diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx
index a0a20eb..c87e473 100644
--- a/src/SiteRoutes.jsx
+++ b/src/SiteRoutes.jsx
@@ -8,6 +8,8 @@ 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 PendingLoansPage from './pages/PendingLoansPage' // PENDING LOANS PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -20,6 +22,8 @@ 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.approvedLoans} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
+        <Route path={RouteLinks.pendingLoans} element={<PendingLoansPage />} /> {`*/PENDING LOANS PAGE*/`}
       </Route>
 
       {/* ERROR PAGE */}
diff --git a/src/components/DummyLogo.jsx b/src/components/DummyLogo.jsx
index 8d3f36d..518aa4d 100644
--- a/src/components/DummyLogo.jsx
+++ b/src/components/DummyLogo.jsx
@@ -2,7 +2,7 @@ export default function DummyLogo() {
   return (
     <div className="w-20 rounded cursor-pointer bg-primary text-white-light p-2 flex flex-col justify-center items-center gap-0">
         <h1 className="text-sm font-bold">digiFI</h1>
-        <p className="text-12">Admin</p>
+        <p className="text-12">Logo</p>
     </div>
   )
 }
diff --git a/src/components/breadcrumb/BreadcrumbCom.jsx b/src/components/breadcrumb/BreadcrumbCom.jsx
index 16191c0..a95aecc 100644
--- a/src/components/breadcrumb/BreadcrumbCom.jsx
+++ b/src/components/breadcrumb/BreadcrumbCom.jsx
@@ -4,13 +4,13 @@ import { TiHomeOutline } from 'react-icons/ti'
 export default function BreadcrumbCom({title, paths}) {
   return (
     <div className='w-full py-2 flex justify-between items-center'>
-        <h1 className='text-12 sm:text-lg md:text-2xl text-black-gray font-semibold'>{title}</h1>
-        <div className='flex gap-2 items-center text-black-gray text-base'>
+        <h1 className='text-12 sm:text-lg md:text-2xl text-black dark:text-black-gray font-semibold'>{title}</h1>
+        <div className='flex gap-2 items-center text-black-gray dark:text-black-gray text-base'>
             <TiHomeOutline />
             {paths.map((item, index) => (
-              <div className='flex gap-2 items-center text-black-gray text-10 sm:text-sm' key={index}>
+              <div className='flex gap-2 items-center text-black dark:text-black-gray text-10 sm:text-sm' key={index}>
                 <MdKeyboardDoubleArrowRight />
-                <p className={`${index + 1 == paths.length ? 'text-sky-600' : ''}`}>{item}</p>
+                <p className={`${index + 1 == paths.length ? 'text-sky-600 dark:text-black-gray' : ''}`}>{item}</p>
               </div>
             ))}
         </div>
diff --git a/src/components/layouts/DashboardLayout.jsx b/src/components/layouts/DashboardLayout.jsx
index 09481ca..7534508 100644
--- a/src/components/layouts/DashboardLayout.jsx
+++ b/src/components/layouts/DashboardLayout.jsx
@@ -55,7 +55,7 @@ export default function DashboardLayout() {
             </div>
 
             {/* FOOTER SECTION */}
-            <footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-black dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
+            <footer className="sticky bottom-0 text-center lg:text-end w-full bg-white dark:bg-slate-800 dark:text-white-light p-3 md:px-10 shadow-[0px_0px_2px_black]">
                 <p className="text-10">Copyright @ {new Date().getFullYear()} - Developed by digiFi. All Rights Reserved</p>
             </footer>
         </div>
diff --git a/src/components/layouts/LogoutModal.jsx b/src/components/layouts/LogoutModal.jsx
index 06c5f7b..e20d219 100644
--- a/src/components/layouts/LogoutModal.jsx
+++ b/src/components/layouts/LogoutModal.jsx
@@ -21,7 +21,7 @@ export default function LogoutModal({close}) {
   return (
     <ModalWrapper
     >
-        <div className="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white">
+        <div className="relative bg-white rounded-lg shadow-round_black dark:shadow-round_white dark:bg-gray-700 dark:text-white">
             {/* <!-- Modal header --> */}
             <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                 <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
diff --git a/src/components/layouts/aside/AsideLinkWithSubLinks.jsx b/src/components/layouts/aside/AsideLinkWithSubLinks.jsx
index aa965c1..2c72070 100644
--- a/src/components/layouts/aside/AsideLinkWithSubLinks.jsx
+++ b/src/components/layouts/aside/AsideLinkWithSubLinks.jsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react"
-// import { useLocation } from "react-router-dom"
+import { FaCaretDown } from "react-icons/fa";
+import { FaRegMoneyBill1 } from "react-icons/fa6";
 
 
 export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu,  setHideSubMenu, children}) {
@@ -11,19 +11,12 @@ export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubM
 //   const [hideSubMenu, setHideSubMenu] = useState(true)
 
   return (
-    // <Link 
-    //     className={`w-full flex items-center gap-2 px-4 py-2 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
-    //     to={to}
-    // > 
-    //     {icon && <i className={`${icon}`}></i>}
-    //     {shrinkAside ? '' : name}
-    // </Link>
     <div 
-        className={`w-full px-4 text-[13px] font-semibold rounded-md`} 
+        className={`w-full px-4 text-[13px] font-semibold rounded`} 
     >   
         <button onClick={setHideSubMenu} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
-            <span className="flex gap-2 items-center">{icon && <i className={`${icon}`}></i>}{shrinkAside ? '' : name}</span>
-            <i className={`fa-solid fa-caret-up  ${(hideSubMenu && hideSubMenu==name) ? 'rotate-0' : 'rotate-180'}`}></i>
+            <span className="flex gap-2 items-center">{icon && <FaRegMoneyBill1 className="text-base" />}{shrinkAside ? '' : name}</span>
+            <FaCaretDown className={`text-base ${(hideSubMenu && hideSubMenu==name) ? 'rotate-180' : 'rotate-0'}`} />
         </button>
         <div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
             {children}
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx
index c30ecaa..4db2dc7 100644
--- a/src/components/layouts/aside/DashboardAside.jsx
+++ b/src/components/layouts/aside/DashboardAside.jsx
@@ -10,6 +10,7 @@ import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
 
 import { AiOutlineDashboard } from "react-icons/ai";
 import { IoPeople } from "react-icons/io5";
+import { GoDotFill } from "react-icons/go";
 
 
 export default function DashboardAside({shrinkAside=false}) {
@@ -44,7 +45,7 @@ export default function DashboardAside({shrinkAside=false}) {
 
         <div className="p-4 w-full h-full overflow-y-auto">
             <Link 
-                className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
                 to={RouteLinks.homePage}
             >   
                 <AiOutlineDashboard className="text-base" />
@@ -52,7 +53,7 @@ export default function DashboardAside({shrinkAside=false}) {
             </Link>
 
             <div className="w-full">
-                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">Admin</h1>
+                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">ADMIN</h1>
                 <Link 
                     className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.usersPage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
                     to={RouteLinks.usersPage}
@@ -62,26 +63,28 @@ export default function DashboardAside({shrinkAside=false}) {
                 </Link>            
             </div>
 
-            {/* <div className="w-full">
-                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">Admin</h1>
-                <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='us' icon='fa-solid fa-list'>
-                <AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-circle text-[5px]' />
-                <AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-circle text-[5px]' />
-                <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='me' icon='fa-solid fa-list'>
-                    <AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-circle text-[5px]' />
-                    <AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-circle text-[5px]' />
+            <div className="w-full">
+                {/* <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">LOANS</h1> */}
+                <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='Loans' icon='fa-solid fa-list'>
+                    <Link 
+                        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.approvedLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                        to={RouteLinks.approvedLoans}
+                    >   
+                        <GoDotFill className="text-base" />
+                        <span>{shrinkAside ? '' : 'Approved'}</span>
+                    </Link> 
+                    <Link 
+                        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.pendingLoans ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                        to={RouteLinks.pendingLoans}
+                    >   
+                        <GoDotFill className="text-base" />
+                        <span>{shrinkAside ? '' : 'Pending'}</span>
+                    </Link> 
                 </AsideLinkWithSubLinks>
-                </AsideLinkWithSubLinks>
-            </div> */}
-
-            {/* <div className="w-full">
-                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">Admin</h1>
-                <AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-list' />
-                <AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-list' />
-            </div> */}
+            </div>
         </div>
         <div className='px-4 py-2'>
-            <div className="bg-primary rounded-md w-full flex justify-center items-center gap-2">
+            <div className="bg-primary rounded w-full flex justify-center items-center gap-2">
                 <MainBtn 
                     shrinkAside={shrinkAside} 
                     icon='fa-solid fa-right-from-bracket' 
diff --git a/src/pages/ApprovedLoansPage.jsx b/src/pages/ApprovedLoansPage.jsx
new file mode 100644
index 0000000..1c8c697
--- /dev/null
+++ b/src/pages/ApprovedLoansPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+
+export default function ApprovedLoansPage() {
+  return (
+    <div className='w-full'>
+      <BreadcrumbCom title='Approved Loans' paths={['Dashboard', 'Approved Loans']} />
+      <p className=''>
+        coming soon ...
+      </p>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 2ab360c..c97deae 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -3,11 +3,19 @@ import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
 
 export default function HomePage() {
   return (
-    <div className='w-full'>
+    <div className='w-full flex flex-col gap-8'>
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
-      <p className=''>
-        coming soon ...
-      </p>
+      <div className='grid grid-cols-1 2xl:grid-cols-2 gap-8'>
+        <div className='w-full grid grid-cols-1 sm:grid-cols-2 gap-8'>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-[300px] shadow-round_black dark:shadow-round_white'></div>
+        </div>
+        <div className='w-full'>
+          <div className='w-full bg-white dark:bg-slate-800 hover:scale-[1.03] cursor-pointer rounded h-full shadow-round_black dark:shadow-round_white'></div>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/pages/PendingLoansPage.jsx b/src/pages/PendingLoansPage.jsx
new file mode 100644
index 0000000..855c3d2
--- /dev/null
+++ b/src/pages/PendingLoansPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+
+export default function PendingLoansPage() {
+  return (
+    <div className='w-full'>
+      <BreadcrumbCom title='Pending Loans' paths={['Dashboard', 'Pending Loans']} />
+      <p className=''>
+        coming soon ...
+      </p>
+    </div>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e496ae3..59a1f14 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
           DEFAULT: '#393536',
         },
         black:{
-          DEFAULT: '#2c2e3e',
+          DEFAULT: '#222',
           gray: '#a6a9b7'
         },
         primary: {