diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
index 4716ec3..57850f6 100644
--- a/src/components/Icons.jsx
+++ b/src/components/Icons.jsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { AiFillProduct, AiOutlineDashboard } from 'react-icons/ai'
-import { FaRegMoneyBill1 } from 'react-icons/fa6'
+import { FaEye, FaRegMoneyBill1 } from 'react-icons/fa6'
 import { GoDotFill } from 'react-icons/go'
 import { IoPeople, IoTrash } from 'react-icons/io5'
+import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
 
 export default function Icons({name, className}) {
   return (
@@ -19,6 +20,12 @@ export default function Icons({name, className}) {
     <AiFillProduct className={`text-base ${className}`} />
     :name.toLowerCase() == 'trash' ?
     <IoTrash lassName={`text-base ${className}`} />
+    :name.toLowerCase() == 'eye' ?
+    <FaEye lassName={`text-base ${className}`} />
+    :name.toLowerCase() == 'next' ?
+    <TbPlayerTrackNext lassName={`text-base ${className}`} />
+    :name.toLowerCase() == 'prev' ?
+    <TbPlayerTrackPrev lassName={`text-base ${className}`} />
     :
     null
     }
diff --git a/src/components/MainBtn.jsx b/src/components/MainBtn.jsx
index 78c035e..5ad5048 100644
--- a/src/components/MainBtn.jsx
+++ b/src/components/MainBtn.jsx
@@ -10,7 +10,7 @@ export default function MainBtn({
   return (
     <button 
         disabled={disabled}
-        className={`py-3 px-4 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
+        className={`py-2 px-3 rounded text-12 lg:text-lg ${className || ''} ${(disabled || loading) && 'opacity-60'}`}
         onClick={onClick}
     >
         {children && children}
diff --git a/src/components/applyloancom/ApplyCom.jsx b/src/components/applyloancom/ApplyCom.jsx
index fa0778e..892c2ea 100644
--- a/src/components/applyloancom/ApplyCom.jsx
+++ b/src/components/applyloancom/ApplyCom.jsx
@@ -17,15 +17,12 @@ export default function ApplyCom() {
         queryFn: () => applyLoan()
     })
 
-    console.log('data', data?.data)
-    // const appliedUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
+    const appliedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
 
     return (
-        <div className='w-full'>
+        <div className='w-full flex flex-col gap-3'>
             <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
-            <p className='py-4'>
-            coming soon ...
-            </p>
+
             {isFetching ? 
               <>
                   <div className="w-full py-4">
@@ -37,29 +34,23 @@ export default function ApplyCom() {
                     <p className='text-red-500'>{error.message}</p>
                 </div>
               :
-                <TableWrapper data={dummy} itemsPerPage={7}>
+                <TableWrapper data={appliedUsers} itemsPerPage={9}>
                 {({ data }) => (
                     <>
-                        <table className="hidden py-2 w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                        <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
+                                        Loan
                                     </th>
                                     <th scope="col" className="px-4 py-2">
-                                        From
+                                        Amount
                                     </th>
                                     <th scope="col" className="px-4 py-2">
-                                        Ticket Number
+                                        Added
                                     </th>
                                     <th scope="col" className="px-4 py-2">
                                         Action
@@ -69,39 +60,34 @@ export default function ApplyCom() {
                             <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 className="font-normal text-gray-500">{item?.bvn}</div>
                                             </div>  
                                         </th>
                                         <td className="px-3 py-2">
-                                            {item?.to || ''}
+                                            {item?.loan || ''}
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            {item?.amount || ''}
                                         </td>
                                         <td className="px-3 py-2">
                                             <div className="flex items-center">
-                                            {item?.from || ''}
+                                            {new Date(item?.added).toDateString()}
                                             </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">
+                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
                                             {/* <!-- 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-primary text-xl'>
+                                                <Icons name='eye' />
+                                            </span>
                                             <span className='text-red-500 text-xl'>
                                                 <Icons name='trash' />
                                             </span>
@@ -110,7 +96,7 @@ export default function ApplyCom() {
                                 ))
                                 :
                                 <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={6}>
+                                    <td className="px-3 py-2" colSpan={5}>
                                         <div className="flex justify-center items-center">
                                             No Record Found
                                         </div>
@@ -125,9 +111,4 @@ export default function ApplyCom() {
             }
         </div>
     )
-}
-
-
-const dummy = [
-    {name:'ok'}
-]
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/approvedloancom/ApprovedLoanCom.jsx b/src/components/approvedloancom/ApprovedLoanCom.jsx
index 945d071..f13d8e0 100644
--- a/src/components/approvedloancom/ApprovedLoanCom.jsx
+++ b/src/components/approvedloancom/ApprovedLoanCom.jsx
@@ -8,24 +8,21 @@ import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { applyLoan } from '../../services/siteServices'
+import { approvedLoan } from '../../services/siteServices'
 
 export default function ApprovedLoanCom() {
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.apply_loan,
-        queryFn: () => applyLoan()
+        queryKey: queryKeys.approved_loan,
+        queryFn: () => approvedLoan()
     })
 
-    console.log('data', data?.data)
-    // const approvedUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
+    const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
 
     return (
-        <div className='w-full'>
-            <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
-            <p className='py-4'>
-            coming soon ...
-            </p>
+        <div className='w-full flex flex-col gap-3'>
+            <BreadcrumbCom title='Approved Loan' paths={['Dashboard', 'Approved Loan']} />
+
             {isFetching ? 
               <>
                   <div className="w-full py-4">
@@ -37,29 +34,23 @@ export default function ApprovedLoanCom() {
                     <p className='text-red-500'>{error.message}</p>
                 </div>
               :
-                <TableWrapper data={dummy} itemsPerPage={7}>
+                <TableWrapper data={approvedUsers} itemsPerPage={9}>
                 {({ 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
+                                        Loan
                                     </th>
                                     <th scope="col" className="px-4 py-2">
-                                        From
+                                        Amount
                                     </th>
                                     <th scope="col" className="px-4 py-2">
-                                        Ticket Number
+                                        Added
                                     </th>
                                     <th scope="col" className="px-4 py-2">
                                         Action
@@ -69,39 +60,34 @@ export default function ApprovedLoanCom() {
                             <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 className="font-normal text-gray-500">{item?.bvn}</div>
                                             </div>  
                                         </th>
                                         <td className="px-3 py-2">
-                                            {item?.to || ''}
+                                            {item?.loan || ''}
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            {item?.amount || ''}
                                         </td>
                                         <td className="px-3 py-2">
                                             <div className="flex items-center">
-                                            {item?.from || ''}
+                                            {new Date(item?.added).toDateString()}
                                             </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">
+                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
                                             {/* <!-- 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-primary text-xl'>
+                                                <Icons name='eye' />
+                                            </span>
                                             <span className='text-red-500 text-xl'>
                                                 <Icons name='trash' />
                                             </span>
@@ -110,7 +96,7 @@ export default function ApprovedLoanCom() {
                                 ))
                                 :
                                 <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={6}>
+                                    <td className="px-3 py-2" colSpan={5}>
                                         <div className="flex justify-center items-center">
                                             No Record Found
                                         </div>
@@ -125,9 +111,4 @@ export default function ApprovedLoanCom() {
             }
         </div>
     )
-}
-
-
-const dummy = [
-    {name:'ok'}
-]
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/selectloancom/SelectLoanCom.jsx b/src/components/selectloancom/SelectLoanCom.jsx
index 95afe99..b0520a5 100644
--- a/src/components/selectloancom/SelectLoanCom.jsx
+++ b/src/components/selectloancom/SelectLoanCom.jsx
@@ -8,24 +8,21 @@ import Icons from '../Icons'
 
 import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
-import { applyLoan } from '../../services/siteServices'
+import { selectLoan } from '../../services/siteServices'
 
 export default function SelectLoanCom() {
 
     const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.apply_loan,
-        queryFn: () => applyLoan()
+        queryKey: queryKeys.select_loan,
+        queryFn: () => selectLoan()
     })
 
-    console.log('data', data?.data)
-    // const selectLoanUsers = data?.data?.demo_data?.list // APPLY LOAN LIST
+    const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
 
     return (
-        <div className='w-full'>
+        <div className='w-full flex flex-col gap-3'>
             <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
-            <p className='py-4'>
-            coming soon ...
-            </p>
+
             {isFetching ? 
               <>
                   <div className="w-full py-4">
@@ -37,29 +34,23 @@ export default function SelectLoanCom() {
                     <p className='text-red-500'>{error.message}</p>
                 </div>
               :
-                <TableWrapper data={dummy} itemsPerPage={7}>
+                <TableWrapper data={selectUsers} itemsPerPage={9}>
                 {({ 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
+                                        Loan
                                     </th>
                                     <th scope="col" className="px-4 py-2">
-                                        From
+                                        Amount
                                     </th>
                                     <th scope="col" className="px-4 py-2">
-                                        Ticket Number
+                                        Added
                                     </th>
                                     <th scope="col" className="px-4 py-2">
                                         Action
@@ -69,39 +60,34 @@ export default function SelectLoanCom() {
                             <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 className="font-normal text-gray-500">{item?.bvn}</div>
                                             </div>  
                                         </th>
                                         <td className="px-3 py-2">
-                                            {item?.to || ''}
+                                            {item?.loan || ''}
+                                        </td>
+                                        <td className="px-3 py-2">
+                                            {item?.amount || ''}
                                         </td>
                                         <td className="px-3 py-2">
                                             <div className="flex items-center">
-                                            {item?.from || ''}
+                                            {new Date(item?.added).toDateString()}
                                             </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">
+                                        <td className="px-3 py-2 flex gap-3 md:gap-4">
                                             {/* <!-- 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-primary text-xl'>
+                                                <Icons name='eye' />
+                                            </span>
                                             <span className='text-red-500 text-xl'>
                                                 <Icons name='trash' />
                                             </span>
@@ -110,7 +96,7 @@ export default function SelectLoanCom() {
                                 ))
                                 :
                                 <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={6}>
+                                    <td className="px-3 py-2" colSpan={5}>
                                         <div className="flex justify-center items-center">
                                             No Record Found
                                         </div>
diff --git a/src/components/tableWrapper/TableWrapper.jsx b/src/components/tableWrapper/TableWrapper.jsx
index f51420f..39ba495 100644
--- a/src/components/tableWrapper/TableWrapper.jsx
+++ b/src/components/tableWrapper/TableWrapper.jsx
@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useState } from "react";
 import MainBtn from "../MainBtn";
+import Icons from "../Icons";
 
 
 export default function TableWrapper({
@@ -89,16 +90,20 @@ export default function TableWrapper({
             <div className='flex items-center gap-3 md:gap-6'>
                 <MainBtn 
                     onClick={handlePrev}
-                    text='Prev' 
-                    className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light`} 
+                    // text='Prev' 
+                    className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
                     disabled={isLoading}
-                />
+                >
+                <Icons name='prev' />
+                </MainBtn>
                 <MainBtn 
                     onClick={handleNext}
-                    text='Next' 
-                    className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light`} 
+                    // text='Next' 
+                    className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
                     disabled={isLoading}
-                />
+                > 
+                <Icons name='next' />
+                </MainBtn>
             </div>
           </div>
         }
diff --git a/src/pages/ApprovedLoansPage.jsx b/src/pages/ApprovedLoansPage.jsx
index 1c8c697..3ba6ef5 100644
--- a/src/pages/ApprovedLoansPage.jsx
+++ b/src/pages/ApprovedLoansPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+// import ApprovedLoanCom from '../components/approvedloancom/ApprovedLoanCom'
 
 export default function ApprovedLoansPage() {
   return (
@@ -8,6 +9,7 @@ export default function ApprovedLoansPage() {
       <p className=''>
         coming soon ...
       </p>
+      {/* <ApprovedLoanCom /> */}
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/pages/SelectPage.jsx b/src/pages/SelectPage.jsx
index e5b6fa0..6a828e8 100644
--- a/src/pages/SelectPage.jsx
+++ b/src/pages/SelectPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+// import SelectLoanCom from '../components/selectloancom/SelectLoanCom'
 
 export default function SelectPage() {
   return (
@@ -8,6 +9,7 @@ export default function SelectPage() {
       <p className=''>
         coming soon ...
       </p>
+      {/* <SelectLoanCom /> */}
     </div>
   )
 }
\ No newline at end of file