diff --git a/src/RouteLinks.js b/src/RouteLinks.js
index 2fda297..c51f845 100644
--- a/src/RouteLinks.js
+++ b/src/RouteLinks.js
@@ -4,7 +4,8 @@ const RouteLinks = {
     homePage: '/',
     usersPage: '/users',
     approvedLoans: '/loans/approved',
-    apply: '/loans/apply',
+    applyPage: '/loans/apply',
+    selectPage: '/loans/select',
 }
 
 export default RouteLinks
\ No newline at end of file
diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx
index a4cc89f..9142b3d 100644
--- a/src/SiteRoutes.jsx
+++ b/src/SiteRoutes.jsx
@@ -10,6 +10,7 @@ import HomePage from './pages/HomePage' // Home PAGE
 import UsersPage from './pages/UsersPage' // Users PAGE
 import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
 import ApplyPage from './pages/ApplyPage' // APPLY LOANS PAGE
+import SelectPage from './pages/SelectPage' // SELECT LOANS PAGE
 
 
 // const Home = lazy(() => import('./pages/Home'));
@@ -23,7 +24,8 @@ export default function SiteRoutes() {
         <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.apply} element={<ApplyPage />} /> {`*/APPLY LOANS PAGE*/`}
+        <Route path={RouteLinks.applyPage} element={<ApplyPage />} /> {`*/APPLY LOANS PAGE*/`}
+        <Route path={RouteLinks.selectPage} element={<SelectPage />} /> {`*/SELECT LOANS PAGE*/`}
       </Route>
 
       {/* ERROR PAGE */}
diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
index 0daac3b..4716ec3 100644
--- a/src/components/Icons.jsx
+++ b/src/components/Icons.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { AiFillProduct, AiOutlineDashboard } from 'react-icons/ai'
 import { FaRegMoneyBill1 } from 'react-icons/fa6'
 import { GoDotFill } from 'react-icons/go'
-import { IoPeople } from 'react-icons/io5'
+import { IoPeople, IoTrash } from 'react-icons/io5'
 
 export default function Icons({name, className}) {
   return (
@@ -17,6 +17,8 @@ export default function Icons({name, className}) {
     <IoPeople className={`text-base ${className}`} />
     :name.toLowerCase() == 'product' ?
     <AiFillProduct className={`text-base ${className}`} />
+    :name.toLowerCase() == 'trash' ?
+    <IoTrash lassName={`text-base ${className}`} />
     :
     null
     }
diff --git a/src/components/applyloancom/ApplyCom.jsx b/src/components/applyloancom/ApplyCom.jsx
new file mode 100644
index 0000000..61828f7
--- /dev/null
+++ b/src/components/applyloancom/ApplyCom.jsx
@@ -0,0 +1,133 @@
+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 { applyLoan } from '../../services/siteServices'
+
+export default function ApplyCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.apply_loan,
+        queryFn: () => applyLoan()
+    })
+
+    console.log('data', data?.data)
+    // const appliedUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
+
+    return (
+        <div className='w-full'>
+            <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
+            <p className='py-4'>
+            coming soon ...
+            </p>
+            {isFetching ? 
+              <>
+                  <div className="w-full py-4">
+                    <p className='text-slate-800'>Loading...</p>
+                  </div>
+              </>
+              : isError ?
+                <div className="w-full py-4">
+                    <p className='text-red-500'>{error.message}</p>
+                </div>
+              :
+                <TableWrapper data={dummy} itemsPerPage={7}>
+                {({ data }) => (
+                    <>
+                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="p-3">
+                                        <div className="flex items-center">
+                                            <input id="checkbox-all-search" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                                            <label htmlFor="checkbox-all-search" className="sr-only">checkbox</label>
+                                        </div>
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Name
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        To
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        From
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Ticket Number
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {(data && data.length > 0) ? data?.map((item, index) => (
+                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                        <td className="w-3 p-3">
+                                            <div className="flex items-center">
+                                                <input id="checkbox-table-search-1" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                                                <label htmlFor="checkbox-table-search-1" className="sr-only">checkbox</label>
+                                            </div>
+                                        </td>
+                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
+                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
+                                            <div className="px-3">
+                                                <div className="text-base font-semibold">{item?.name || ''}</div>
+                                                <div className="font-normal text-gray-500">{!item?.email || 'neil.sims@flowbite12345.com'}</div>
+                                            </div>  
+                                        </th>
+                                        <td className="px-3 py-2">
+                                            {item?.to || ''}
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            <div className="flex items-center">
+                                            {item?.from || ''}
+                                            </div>
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            <div className="flex items-center">
+                                            {item?.ticket || ''}
+                                            </div>
+                                        </td>
+                                        <td className="px-3 py-2 flex gap-2">
+                                            {/* <!-- Modal toggle --> */}
+                                            {/* <Link to={RouteLinks.manageAdminPage}>
+                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
+                                            </Link> */}
+                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
+                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
+                                            <span className='text-red-500 text-xl'>
+                                                <Icons name='trash' />
+                                            </span>
+                                        </td>
+                                    </tr>
+                                ))
+                                :
+                                <tr className="w-3 p-3">
+                                    <td className="px-3 py-2" colSpan={6}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </>
+                )}
+                </TableWrapper>
+            }
+        </div>
+    )
+}
+
+
+const dummy = [
+    {name:'ok'}
+]
\ No newline at end of file
diff --git a/src/components/approvedloancom/ApprovedLoanCom.jsx b/src/components/approvedloancom/ApprovedLoanCom.jsx
new file mode 100644
index 0000000..945d071
--- /dev/null
+++ b/src/components/approvedloancom/ApprovedLoanCom.jsx
@@ -0,0 +1,133 @@
+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 { applyLoan } from '../../services/siteServices'
+
+export default function ApprovedLoanCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.apply_loan,
+        queryFn: () => applyLoan()
+    })
+
+    console.log('data', data?.data)
+    // const approvedUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
+
+    return (
+        <div className='w-full'>
+            <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
+            <p className='py-4'>
+            coming soon ...
+            </p>
+            {isFetching ? 
+              <>
+                  <div className="w-full py-4">
+                    <p className='text-slate-800'>Loading...</p>
+                  </div>
+              </>
+              : isError ?
+                <div className="w-full py-4">
+                    <p className='text-red-500'>{error.message}</p>
+                </div>
+              :
+                <TableWrapper data={dummy} itemsPerPage={7}>
+                {({ data }) => (
+                    <>
+                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="p-3">
+                                        <div className="flex items-center">
+                                            <input id="checkbox-all-search" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                                            <label htmlFor="checkbox-all-search" className="sr-only">checkbox</label>
+                                        </div>
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Name
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        To
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        From
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Ticket Number
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {(data && data.length > 0) ? data?.map((item, index) => (
+                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                        <td className="w-3 p-3">
+                                            <div className="flex items-center">
+                                                <input id="checkbox-table-search-1" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                                                <label htmlFor="checkbox-table-search-1" className="sr-only">checkbox</label>
+                                            </div>
+                                        </td>
+                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
+                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
+                                            <div className="px-3">
+                                                <div className="text-base font-semibold">{item?.name || ''}</div>
+                                                <div className="font-normal text-gray-500">{!item?.email || 'neil.sims@flowbite12345.com'}</div>
+                                            </div>  
+                                        </th>
+                                        <td className="px-3 py-2">
+                                            {item?.to || ''}
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            <div className="flex items-center">
+                                            {item?.from || ''}
+                                            </div>
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            <div className="flex items-center">
+                                            {item?.ticket || ''}
+                                            </div>
+                                        </td>
+                                        <td className="px-3 py-2 flex gap-2">
+                                            {/* <!-- Modal toggle --> */}
+                                            {/* <Link to={RouteLinks.manageAdminPage}>
+                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
+                                            </Link> */}
+                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
+                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
+                                            <span className='text-red-500 text-xl'>
+                                                <Icons name='trash' />
+                                            </span>
+                                        </td>
+                                    </tr>
+                                ))
+                                :
+                                <tr className="w-3 p-3">
+                                    <td className="px-3 py-2" colSpan={6}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </>
+                )}
+                </TableWrapper>
+            }
+        </div>
+    )
+}
+
+
+const dummy = [
+    {name:'ok'}
+]
\ No newline at end of file
diff --git a/src/components/layouts/aside/DashboardAside.jsx b/src/components/layouts/aside/DashboardAside.jsx
index bb397de..0fc85c0 100644
--- a/src/components/layouts/aside/DashboardAside.jsx
+++ b/src/components/layouts/aside/DashboardAside.jsx
@@ -93,8 +93,8 @@ export default function DashboardAside({shrinkAside=false}) {
 const asideNavLinks = [
     {name:'Dashboard', status:1, icon: 'dashboard', to: RouteLinks.homePage},
     {name:'Salary Loan', title:'Loan', status:1, icon: 'money', subLinks: [
-        {name: 'Select', status:1, icon: 'dot', to: '#'},
-        {name: 'Apply', status:1, icon: 'dot', to: RouteLinks.apply},
+        {name: 'Select', status:1, icon: 'dot', to: RouteLinks.selectPage},
+        {name: 'Apply', status:1, icon: 'dot', to: RouteLinks.applyPage},
         {name: 'Approved', status:1, icon: 'dot', to: RouteLinks.approvedLoans},
         {name: 'Payments', status:1, icon: 'dot', to: '#'},
         {name: 'Configuration', status:1, icon: 'dot', to: '#'},
diff --git a/src/components/selectloancom/SelectLoanCom.jsx b/src/components/selectloancom/SelectLoanCom.jsx
new file mode 100644
index 0000000..95afe99
--- /dev/null
+++ b/src/components/selectloancom/SelectLoanCom.jsx
@@ -0,0 +1,133 @@
+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 { applyLoan } from '../../services/siteServices'
+
+export default function SelectLoanCom() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.apply_loan,
+        queryFn: () => applyLoan()
+    })
+
+    console.log('data', data?.data)
+    // const selectLoanUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
+
+    return (
+        <div className='w-full'>
+            <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
+            <p className='py-4'>
+            coming soon ...
+            </p>
+            {isFetching ? 
+              <>
+                  <div className="w-full py-4">
+                    <p className='text-slate-800'>Loading...</p>
+                  </div>
+              </>
+              : isError ?
+                <div className="w-full py-4">
+                    <p className='text-red-500'>{error.message}</p>
+                </div>
+              :
+                <TableWrapper data={dummy} itemsPerPage={7}>
+                {({ data }) => (
+                    <>
+                        <table className="py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                                <tr>
+                                    <th scope="col" className="p-3">
+                                        <div className="flex items-center">
+                                            <input id="checkbox-all-search" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                                            <label htmlFor="checkbox-all-search" className="sr-only">checkbox</label>
+                                        </div>
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Name
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        To
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        From
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Ticket Number
+                                    </th>
+                                    <th scope="col" className="px-4 py-2">
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {(data && data.length > 0) ? data?.map((item, index) => (
+                                    <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                        <td className="w-3 p-3">
+                                            <div className="flex items-center">
+                                                <input id="checkbox-table-search-1" type="checkbox" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
+                                                <label htmlFor="checkbox-table-search-1" className="sr-only">checkbox</label>
+                                            </div>
+                                        </td>
+                                        <th scope="row" className="mr-4 flex items-center px-3 py-2 text-gray-900 whitespace-nowrap dark:text-white">
+                                            <img className="w-10 h-10 rounded-full" src={Avatar} alt="Jese image" />
+                                            <div className="px-3">
+                                                <div className="text-base font-semibold">{item?.name || ''}</div>
+                                                <div className="font-normal text-gray-500">{!item?.email || 'neil.sims@flowbite12345.com'}</div>
+                                            </div>  
+                                        </th>
+                                        <td className="px-3 py-2">
+                                            {item?.to || ''}
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            <div className="flex items-center">
+                                            {item?.from || ''}
+                                            </div>
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            <div className="flex items-center">
+                                            {item?.ticket || ''}
+                                            </div>
+                                        </td>
+                                        <td className="px-3 py-2 flex gap-2">
+                                            {/* <!-- Modal toggle --> */}
+                                            {/* <Link to={RouteLinks.manageAdminPage}>
+                                                <i onClick={handleShowEditModal} className="fa-solid fa-eye text-base md:text-lg cursor-pointer p-2 text-sky-600"></i>
+                                            </Link> */}
+                                            {/* <i onClick={handleShowEditModal} className="fa-solid fa-pen-to-square text-base md:text-lg cursor-pointer p-2"></i> */}
+                                            {/* <i onClick={handleDeleteModal} className="fa-solid fa-trash text-base md:text-lg cursor-pointer p-2 text-red-500"></i> */}
+                                            <span className='text-red-500 text-xl'>
+                                                <Icons name='trash' />
+                                            </span>
+                                        </td>
+                                    </tr>
+                                ))
+                                :
+                                <tr className="w-3 p-3">
+                                    <td className="px-3 py-2" colSpan={6}>
+                                        <div className="flex justify-center items-center">
+                                            No Record Found
+                                        </div>
+                                    </td>
+                                </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </>
+                )}
+                </TableWrapper>
+            }
+        </div>
+    )
+}
+
+
+const dummy = [
+    {name:'ok'}
+]
\ No newline at end of file
diff --git a/src/components/tableWrapper/TableWrapper.jsx b/src/components/tableWrapper/TableWrapper.jsx
index f84b2ba..f51420f 100644
--- a/src/components/tableWrapper/TableWrapper.jsx
+++ b/src/components/tableWrapper/TableWrapper.jsx
@@ -90,13 +90,13 @@ export default function TableWrapper({
                 <MainBtn 
                     onClick={handlePrev}
                     text='Prev' 
-                    className={`${currentPage == 0 ? 'bg-sky-600/50 pointer-events-none' : 'bg-sky-600'} text-white-light`} 
+                    className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light`} 
                     disabled={isLoading}
                 />
                 <MainBtn 
                     onClick={handleNext}
                     text='Next' 
-                    className={`${currentPage + numberOfSelection >= data.length ? 'bg-sky-600/50 pointer-events-none' : 'bg-sky-600'} text-white-light`} 
+                    className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light`} 
                     disabled={isLoading}
                 />
             </div>
diff --git a/src/pages/ApplyPage.jsx b/src/pages/ApplyPage.jsx
index db5b57e..415ec1a 100644
--- a/src/pages/ApplyPage.jsx
+++ b/src/pages/ApplyPage.jsx
@@ -1,13 +1,8 @@
 import React from 'react'
-import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+import ApplyCom from '../components/applyloancom/ApplyCom'
 
 export default function ApplyPage() {
   return (
-    <div className='w-full'>
-      <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
-      <p className=''>
-        coming soon ...
-      </p>
-    </div>
+    <ApplyCom />
   )
 }
diff --git a/src/pages/SelectPage.jsx b/src/pages/SelectPage.jsx
new file mode 100644
index 0000000..e5b6fa0
--- /dev/null
+++ b/src/pages/SelectPage.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+
+export default function SelectPage() {
+  return (
+    <div className='w-full'>
+      <BreadcrumbCom title='Select' paths={['Dashboard', 'Select']} />
+      <p className=''>
+        coming soon ...
+      </p>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js
index 1c6d36d..00a0ab9 100644
--- a/src/services/queryKeys.js
+++ b/src/services/queryKeys.js
@@ -1,5 +1,7 @@
 const queryKeys = {
-    dummy: ['']
+    apply_loan: ['apply'],
+    select_loan: ['select-loan'],
+    approved_loan: ['approved-loan'],
 }
 
 export default queryKeys
\ No newline at end of file
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 6084d35..d064855 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -50,8 +50,20 @@ export const loginUser = (reqData) => {
     return postAuxEnd('/salary/login', postData, false)
 }
 
-// FUNCTION TO GET DEMO USERS
-export const demoUsersList = (reqData) => {
+// FUNCTION TO GET APPLIED LOANS TABLE
+export const applyLoan = (reqData) => {
     const postData = { ...reqData }
-    return getAuxEnd(`/salary/demousers`, postData)
+    return getAuxEnd(`/office/loan/apply`, 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)
 }
\ No newline at end of file