diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
index 57850f6..2aa0354 100644
--- a/src/components/Icons.jsx
+++ b/src/components/Icons.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { AiFillProduct, AiOutlineDashboard } from 'react-icons/ai'
+import { FaEdit } from 'react-icons/fa'
 import { FaEye, FaRegMoneyBill1 } from 'react-icons/fa6'
 import { GoDotFill } from 'react-icons/go'
 import { IoPeople, IoTrash } from 'react-icons/io5'
@@ -26,6 +27,8 @@ export default function Icons({name, className}) {
     <TbPlayerTrackNext lassName={`text-base ${className}`} />
     :name.toLowerCase() == 'prev' ?
     <TbPlayerTrackPrev lassName={`text-base ${className}`} />
+    :name.toLowerCase() == 'edit' ?
+    <FaEdit lassName={`text-base ${className}`} />
     :
     null
     }
diff --git a/src/components/applyloancom/ApplyCom.jsx b/src/components/applyloancom/ApplyCom.jsx
index 892c2ea..0ece57b 100644
--- a/src/components/applyloancom/ApplyCom.jsx
+++ b/src/components/applyloancom/ApplyCom.jsx
@@ -20,7 +20,7 @@ export default function ApplyCom() {
     const appliedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
 
     return (
-        <div className='w-full flex flex-col gap-3'>
+        <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
 
             {isFetching ? 
@@ -34,11 +34,11 @@ export default function ApplyCom() {
                     <p className='text-red-500'>{error.message}</p>
                 </div>
               :
-                <TableWrapper data={appliedUsers} itemsPerPage={9}>
+                <TableWrapper data={appliedUsers} itemsPerPage={8}>
                 {({ 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">
+                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                 <tr>
                                     <th scope="col" className="px-4 py-2">
                                         Name
@@ -85,6 +85,9 @@ export default function ApplyCom() {
                                             </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='edit' />
+                                            </span>
                                             <span className='text-primary text-xl'>
                                                 <Icons name='eye' />
                                             </span>
diff --git a/src/components/approvedloancom/ApprovedLoanCom.jsx b/src/components/approvedloancom/ApprovedLoanCom.jsx
index f13d8e0..d4040a5 100644
--- a/src/components/approvedloancom/ApprovedLoanCom.jsx
+++ b/src/components/approvedloancom/ApprovedLoanCom.jsx
@@ -20,7 +20,7 @@ export default function ApprovedLoanCom() {
     const approvedUsers = data?.data?.result_data?.data // APPLY LOAN LIST
 
     return (
-        <div className='w-full flex flex-col gap-3'>
+        <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Approved Loan' paths={['Dashboard', 'Approved Loan']} />
 
             {isFetching ? 
@@ -34,11 +34,11 @@ export default function ApprovedLoanCom() {
                     <p className='text-red-500'>{error.message}</p>
                 </div>
               :
-                <TableWrapper data={approvedUsers} itemsPerPage={9}>
+                <TableWrapper data={approvedUsers} itemsPerPage={8}>
                 {({ 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">
+                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                 <tr>
                                     <th scope="col" className="px-4 py-2">
                                         Name
@@ -85,6 +85,9 @@ export default function ApprovedLoanCom() {
                                             </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='edit' />
+                                            </span>
                                             <span className='text-primary text-xl'>
                                                 <Icons name='eye' />
                                             </span>
diff --git a/src/components/selectloancom/SelectLoanCom.jsx b/src/components/selectloancom/SelectLoanCom.jsx
index b0520a5..c51d9b9 100644
--- a/src/components/selectloancom/SelectLoanCom.jsx
+++ b/src/components/selectloancom/SelectLoanCom.jsx
@@ -20,7 +20,7 @@ export default function SelectLoanCom() {
     const selectUsers = data?.data?.result_data?.data // APPLY LOAN LIST
 
     return (
-        <div className='w-full flex flex-col gap-3'>
+        <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Apply' paths={['Dashboard', 'Apply']} />
 
             {isFetching ? 
@@ -34,11 +34,11 @@ export default function SelectLoanCom() {
                     <p className='text-red-500'>{error.message}</p>
                 </div>
               :
-                <TableWrapper data={selectUsers} itemsPerPage={9}>
+                <TableWrapper data={selectUsers} itemsPerPage={8}>
                 {({ 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">
+                            <thead className="text-sm md:text-base text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                 <tr>
                                     <th scope="col" className="px-4 py-2">
                                         Name
@@ -46,9 +46,6 @@ export default function SelectLoanCom() {
                                     <th scope="col" className="px-4 py-2">
                                         Loan
                                     </th>
-                                    <th scope="col" className="px-4 py-2">
-                                        Amount
-                                    </th>
                                     <th scope="col" className="px-4 py-2">
                                         Added
                                     </th>
@@ -70,9 +67,6 @@ export default function SelectLoanCom() {
                                         <td className="px-3 py-2">
                                             {item?.loan || ''}
                                         </td>
-                                        <td className="px-3 py-2">
-                                            {item?.amount || ''}
-                                        </td>
                                         <td className="px-3 py-2">
                                             <div className="flex items-center">
                                             {new Date(item?.added).toDateString()}
@@ -85,6 +79,9 @@ export default function SelectLoanCom() {
                                             </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='edit' />
+                                            </span>
                                             <span className='text-primary text-xl'>
                                                 <Icons name='eye' />
                                             </span>
@@ -96,7 +93,7 @@ export default function SelectLoanCom() {
                                 ))
                                 :
                                 <tr className="w-3 p-3">
-                                    <td className="px-3 py-2" colSpan={5}>
+                                    <td className="px-3 py-2" colSpan={4}>
                                         <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 39ba495..ffb9a5d 100644
--- a/src/components/tableWrapper/TableWrapper.jsx
+++ b/src/components/tableWrapper/TableWrapper.jsx
@@ -53,7 +53,7 @@ export default function TableWrapper({
   },[itemsPerPage])
 
   return (
-    <div className="p-2 w-full bg-white border-b dark:bg-gray-800 rounded-md">
+    <div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
       {data.length > 0 && filterItem && (
         <div className="mb-10 flex justify-end items-center gap-2">
           {filterItem.map((item, index) => (
@@ -77,7 +77,7 @@ export default function TableWrapper({
       )}
     
       <div className="flex flex-col">
-        <div className="w-full">
+        <div className="w-full overflow-x-auto">
           {children({ data: newData })}
         </div>
         
diff --git a/src/pages/ApprovedLoansPage.jsx b/src/pages/ApprovedLoansPage.jsx
index 3ba6ef5..3a72fde 100644
--- a/src/pages/ApprovedLoansPage.jsx
+++ b/src/pages/ApprovedLoansPage.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
-// import ApprovedLoanCom from '../components/approvedloancom/ApprovedLoanCom'
+import ApprovedLoanCom from '../components/approvedloancom/ApprovedLoanCom'
 
 export default function ApprovedLoansPage() {
   return (
diff --git a/src/pages/SelectPage.jsx b/src/pages/SelectPage.jsx
index 6a828e8..0f2fc13 100644
--- a/src/pages/SelectPage.jsx
+++ b/src/pages/SelectPage.jsx
@@ -1,15 +1,8 @@
 import React from 'react'
-import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
-// import SelectLoanCom from '../components/selectloancom/SelectLoanCom'
+import SelectLoanCom from '../components/selectloancom/SelectLoanCom'
 
 export default function SelectPage() {
   return (
-    <div className='w-full'>
-      <BreadcrumbCom title='Select' paths={['Dashboard', 'Select']} />
-      <p className=''>
-        coming soon ...
-      </p>
-      {/* <SelectLoanCom /> */}
-    </div>
+    <SelectLoanCom />
   )
 }
\ No newline at end of file