diff --git a/src/components/loanscom/LoansCom.jsx b/src/components/loanscom/LoansCom.jsx
index c09d4ce..7d28d7d 100644
--- a/src/components/loanscom/LoansCom.jsx
+++ b/src/components/loanscom/LoansCom.jsx
@@ -1,6 +1,5 @@
 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'
@@ -10,17 +9,19 @@ import Avatar from '../../assets/user_avatar.jpg'
 import queryKeys from '../../services/queryKeys'
 import { getLoans } from '../../services/siteServices'
 import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import formatNumber from '../../helpers/formatNumber'
 import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 
 export default function LoansCom() {
 
-    const {data, isFetching, isError, error} = useQuery({
+    const {data:allLoans, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.loans,
         queryFn: () => getLoans()
     })
 
-    const loans = data // LOANS LIST
-    console.log('LOANS', loans)
+    const loans = allLoans?.data?.loans // LOANS LIST
+    const loansCount = allLoans?.data?.count // LOANS LIST COUNT
+    // console.log('LOANS', loans)
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -34,19 +35,19 @@ export default function LoansCom() {
                 : isError ?
                     <p className='text-red-500'>{error.message}</p>
                 :
-                    <TableWrapper data={selectUsers} itemsPerPage={15}>
+                    <TableWrapper data={loans} itemsPerPage={15}>
                     {({ data }) => (
                         <>
-                            <table className="py-2 w-full text-sm">
+                            <table className="table-auto 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 scope="col" className="px-2 text-right">
+                                            Loan Amount
                                         </th>
-                                        <th scope="col" className="px-2">
+                                        <th scope="col" className="px-2 text-right">
                                             Added
                                         </th>
                                         <th scope="col" className="px-2 text-right">
@@ -61,20 +62,20 @@ export default function LoansCom() {
                                                 <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 className="text-base font-semibold">{item?.account_id || ''}</div>
+                                                    <div className="font-normal text-gray-500">{item?.customer_id}</div>
                                                 </div>  
                                                 </div>
                                             </td>
                                             <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.loan}</div>
-                                                    <div className="font-normal text-gray-500">{item?.description}</div>
+                                                <div className="text-right">
+                                                    {/* <div className="text-base font-semibold">{formatNumber(item?.initial_loan_amount)}</div> */}
+                                                    <div className="font-normal text-gray-500">{formatNumber(item?.initial_loan_amount)}</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 className="text-right">
+                                                    <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)}</div>
                                                 </div> 
                                             </td>
                                             <td className="px-2 text-right">