diff --git a/src/Components/DataTable/NormalTable.jsx b/src/Components/DataTable/NormalTable.jsx
index 83a9b4e..883df72 100644
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -1,20 +1,50 @@
 import React from "react";
-import { Table, TableContainer, Tbody, Td, Th, Thead, Tr, Skeleton, TableCaption, Tfoot } from "@chakra-ui/react";
+import {
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Skeleton,
+  TableCaption,
+  Tfoot,
+} from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 
-const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
-  const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto";
+const DataTable = ({
+  data,
+  isLoading,
+  tableHeadRow,
+  emptyMessage,
+  centered,
+}) => {
+  const columnWidth =
+    data && data[0]
+      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
+      : "auto";
   return (
     <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
-        <Table   size="sm">
-        <TableCaption>Rubix v1.0.0</TableCaption>
-          <Thead   backgroundColor="purple.50">
+        <Table size="sm">
+          <TableCaption>Tanami v1.0.0</TableCaption>
+          <Thead backgroundColor="gray.50">
             <Tr>
               {tableHeadRow.map((heading, index) => (
-                <Th key={index} p={3} w={columnWidth}>
+                <Th
+                width={'fit-content'}
+                  textAlign={
+                    tableHeadRow.length - 1 === index || centered
+                      ? "center"
+                      : "left"
+                  }
+                  key={index}
+                  p={3}
+                  w={columnWidth}
+                >
                   {isLoading ? <Skeleton height="20px" /> : heading}
                   {/* {heading} */}
                 </Th>
@@ -26,7 +56,16 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
               ? Array.from({ length: 12 }).map((_, index) => (
                   <Tr key={index}>
                     {tableHeadRow.map((_, i) => (
-                      <Td key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" w={columnWidth}>
+                      <Td
+                      width={'fit-content'}
+                        key={i}
+                        style={{
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        className="web-text-small"
+                        w={columnWidth}
+                      >
                         <Skeleton height="20px" mb={1} mt={1} />
                       </Td>
                     ))}
@@ -35,7 +74,20 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage }) => {
               : data?.map((item, index) => (
                   <Tr key={index}>
                     {tableHeadRow.map((heading, i) => (
-                      <Td color={"gray.600"} key={i} style={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }} className="web-text-small" >
+                      <Td
+                        textAlign={
+                          tableHeadRow?.length - 1 === i || centered
+                            ? "center"
+                            : "left"
+                        }
+                        color={"gray.600"}
+                        key={i}
+                        style={{
+                          whiteSpace: "nowrap",
+                          textOverflow: "ellipsis",
+                        }}
+                        className="web-text-small"
+                      >
                         {item[heading]}
                       </Td>
                     ))}
diff --git a/src/Components/Pagination.jsx b/src/Components/Pagination.jsx
index 3c388b6..6532b1f 100644
--- a/src/Components/Pagination.jsx
+++ b/src/Components/Pagination.jsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { Select, HStack, Text, Box, IconButton } from '@chakra-ui/react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 
-const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
-  const [pageSize, setPageSize] = useState(itemsPerPageOptions[0]);
-  const [currentPage, setCurrentPage] = useState(1);
+const Pagination = ({ pageSize, setPageSize, totalItems,isLoading, setCurrentPage, currentPage }) => {
+  // const [] = useState(itemsPerPageOptions[0]);
+
 
   const totalPages = Math.ceil(totalItems / pageSize);
 
@@ -34,8 +34,8 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
     <HStack d="flex" justifyContent="flex-end" alignItems="center">
       {/* <Text className='web-text-small'>Tanami v0.1</Text> */}
 
-      <HStack  w={150}>
-      {/* <Select
+      <HStack>
+      <Select
         
         className="pointer web-text-small"
         width={"90px"}
@@ -44,12 +44,12 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
         value={pageSize}
         onChange={handlePageSizeChange}
       >
-        {itemsPerPageOptions.map((size) => (
+        {[ 15, 20, 30]?.map((size) => (
           <option key={size} value={size}>
             {size}
           </option>
         ))}
-      </Select> */}
+      </Select>
         <IconButton
         mt={1}
           size={'sm'}
@@ -59,8 +59,8 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
           className="link pointer"
           isDisabled={currentPage === 1}
         />
-        <Text className="web-text-medium" as={"span"}>
-          {displayRange.start} - {displayRange.end} of {totalItems}
+        <Text w={"81px"} display={'flex'} justifyContent={'center'} className="web-text-medium" as={"span"}>
+          {isLoading ? "0": displayRange?.start} - {isLoading ? "00" :displayRange?.end} of {isLoading ? "00":totalItems}
         </Text>
         <IconButton
         mt={1}
diff --git a/src/Constants/Paginations.js b/src/Constants/Paginations.js
index 1accc24..b01cbd8 100644
--- a/src/Constants/Paginations.js
+++ b/src/Constants/Paginations.js
@@ -1,2 +1,2 @@
-export const TABLE_PAGINATION = { page: 1, size: 10 }
+export const TABLE_PAGINATION = { page: 1, size:20 }
 export const IMAGE_URI = import.meta.env.VITE_API_IMAGE_URL
\ No newline at end of file
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index 0ef1ed3..8b3e1a1 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -19,7 +19,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import DataTable from "../../../Components/DataTable/DataTable";
+import NormalTable from "../../../Components/DataTable/NormalTable";
 import { HiDotsVertical } from "react-icons/hi";
 import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
 import {
@@ -54,9 +54,9 @@ const ViewIOTable = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
-  // ===============================[ Paginations ]
+  // ===============================[ Paginations ] 
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
 
   // ===============================[ RTK Api calls ]
   const {
@@ -288,7 +288,10 @@ const ViewIOTable = () => {
               <option value="Exited">Exited</option>
               <option value="Closed">Closed</option>
             </Select>
-            <Pagination totalItems={10} />
+            
+            
+            <Pagination isLoading={isLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={data?.data?.totalItems} />
+
 
             {/* <Link to={"/create-io"}>
               <Button
@@ -307,7 +310,7 @@ const ViewIOTable = () => {
         </HStack>
       </Box>
 
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Sponers `}
         tableHeadRow={tableHeadRow}
         data={extractedArray}
diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
index 4bd8ac7..377617f 100644
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -20,7 +20,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState, useRef } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import DataTable from "../../../Components/DataTable/DataTable";
+import NormalTable from "../../../Components/DataTable/NormalTable";
 import { HiDotsVertical } from "react-icons/hi";
 import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
 import {
@@ -37,6 +37,7 @@ import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "../../Master/Sponser/AddSponser";
 import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
 import { useGetInvestorsQuery } from "../../../Services/investor.details.service";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -59,11 +60,13 @@ const InvestorDetails = () => {
   } = useDisclosure();
   const btnRef = React.useRef();
 
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
   const {
     data: investorDetails,
     isLoading: investorDetailsLoading,
     error,
-  } = useGetInvestorsQuery({ page: 1, size: 10 });
+  } = useGetInvestorsQuery({ page: currentPage, size: pageSize });
 
   console.log(investorDetails);
 
@@ -192,11 +195,11 @@ const InvestorDetails = () => {
         <Badge
           fontWeight={"500"}
           textTransform={"none"}
-          color={item.kycStatus === "Completed" ? "blue" : "red"}
+          colorScheme={item.kycStatus ? "blue" : "red"}
           px={2}
           py={0.5}
         >
-          {item.KYCStatus}
+          {item.KYCStatus ? "Completed" : "Not complete"}
         </Badge>
       </Box>
     ),
@@ -209,7 +212,7 @@ const InvestorDetails = () => {
       />
     ),
     Action: (
-      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -284,35 +287,7 @@ const InvestorDetails = () => {
               fontSize={"xs"}
               cursor={"pointer"}
             >
-              <option value="" selected disabled hidden>
-                Status
-              </option>
-
-              <option value="all">All</option>
-              <option value="ban">Ban</option>
-              <option value="unban">UnBan</option>
-            </Select>
-            <Select
-              focusBorderColor="green.500"
-              size={"sm"}
-              fontSize={"xs"}
-              cursor={"pointer"}
-            >
-              <option value="" selected disabled hidden>
-                Status
-              </option>
-
-              <option value="all">All</option>
-              <option value="ban">Ban</option>
-              <option value="unban">UnBan</option>
-            </Select>
-            <Select
-              focusBorderColor="green.500"
-              size={"sm"}
-              fontSize={"xs"}
-              cursor={"pointer"}
-            >
-              <option value="" selected disabled hidden>
+              <option value="" defaultValue={"all"} disabled hidden>
                 Status
               </option>
 
@@ -327,7 +302,37 @@ const InvestorDetails = () => {
               fontSize={"xs"}
               cursor={"pointer"}
             >
-              <option value="" selected disabled hidden>
+              <option value="" defaultValue={"all"} disabled hidden>
+                Status
+              </option>
+
+              <option value="all">All</option>
+              <option value="ban">Ban</option>
+              <option value="unban">UnBan</option>
+            </Select>
+
+            <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+            >
+              <option value="" defaultValue={"all"} disabled hidden>
+                Status
+              </option>
+
+              <option value="all">All</option>
+              <option value="ban">Ban</option>
+              <option value="unban">UnBan</option>
+            </Select>
+
+            <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+            >
+              <option value="" defaultValue={"all"} disabled hidden>
                 KYC Status
               </option>
               <option value="all">All</option>
@@ -341,7 +346,7 @@ const InvestorDetails = () => {
               fontSize={"xs"}
               cursor={"pointer"}
             >
-              <option value="" selected disabled hidden>
+              <option value="" defaultValue={"all"} disabled hidden>
                 Country
               </option>
               <option value="behrain">Behrain</option>
@@ -350,7 +355,15 @@ const InvestorDetails = () => {
               <option value="saudi arabia">Saudi arabia</option>
               <option value="united arab emirates">United arab emirates</option>
             </Select>
-            <Pagination totalItems={10} />
+
+            <Pagination
+              isLoading={investorDetailsLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={investorDetails?.data?.totalItems}
+            />
           </HStack>
         </HStack>
         <InvestmentDetailsEdit
@@ -361,11 +374,12 @@ const InvestorDetails = () => {
         />
       </Box>
 
-      <DataTable
+      <NormalTable
+        // centered={true}
         emptyMessage={`We don't have any Sponers `}
         tableHeadRow={tableHeadRow}
         data={extractedArray}
-        isLoading={isLoading}
+        isLoading={investorDetailsLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
         setMouseEnteredId={setMouseEnteredId}
diff --git a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
index 56c6c1b..d62c179 100644
--- a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
@@ -19,6 +19,8 @@ import FormInputView from "../../../Components/FormInputView";
 import ViewInvestorDetails from "./ViewInvestorDetails";
 import { LuWallet } from "react-icons/lu";
 import Transaction from "./Transaction";
+import FullscreenLoaders from '../../../Components/Loaders/FullscreenLoaders'
+import { useGetInvestorsDetailsByIdQuery } from "../../../Services/investor.details.service";
 
 const ProfileView = () => {
   const navigate = useNavigate();
@@ -27,95 +29,113 @@ const ProfileView = () => {
   const { reset } = useForm(); // assuming react-hook-form
 
   const id = params?.id;
-  const foundObject = InvestorDetails.find(
-    (item) => item?.id.toString() === id.toString()
-  );
 
-  if (!foundObject) {
-    return <Box>Loading...</Box>;
-  }
+  const { data, isLoading, errors } = useGetInvestorsDetailsByIdQuery(id, {
+    skip: !id,
+  });
+
+  console.log(data?.data);
+
+  const foundObject = data?.data;
+  
+  
 
   const formFields = [
     {
       label: "Client ID",
-      value: foundObject.clientId,
+      value: foundObject?.id,
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "Full Name",
-      value: foundObject.fullName,
+      label: "First Name",
+      value: foundObject?.principal?.firstName,
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
+      width: "32%",
+    },
+
+    {
+      label: "Last Name",
+      value: foundObject?.principal?.lastName,
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
       width: "32%",
     },
     {
       label: "E-mail ID",
-      value: foundObject.emailID,
+      value: foundObject?.principal?.emailAddress,
       type: "text",
       isRequired: true,
-      arabic: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
       label: "Phone Number",
-      value: foundObject.phoneNumber,
-      type: "text",
+      value: foundObject?.principal?.mobileNumber,
+      type: "tel",
       isRequired: true,
-      arabic: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "Address",
-      value: foundObject.address,
+      label: "Country",
+      value: foundObject?.country?.countryName,
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "Bank Name",
-      value: foundObject.bankName,
+      label: "Investment type",
+      value: foundObject?.investor_type?.investorTypeName,
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "Branch Address",
-      value: foundObject.branchAddress,
+      label: "Investor limit",
+      value: foundObject?.investorLimit,
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "IBAN",
-      value: foundObject.iban,
+      label: "KYC Status",
+      value: foundObject?.KYCStatus  ? "Completed" : "Not complete",
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "SWIFT/BIC code",
-      value: foundObject.swiftCode,
+      label: "Status",
+      value: foundObject?.userStatus ? "Unban" : "Ban",
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
       width: "32%",
     },
     {
-      label: "Reference ID",
-      value: foundObject.referenceID,
+      label: "Default language",
+      value: foundObject?.defaultLanguage_xid === 1 ? "English" : "Arabic" ,
       type: "text",
       isRequired: true,
-      section: "",
+      section: "Personal Details",
+      width: "32%",
+    },
+    {
+      label: "App Notification",
+      value: foundObject?.IsAppNotificationEnabled === 1 ? "Yes" : "No" ,
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
       width: "32%",
     },
   ];
@@ -130,6 +150,7 @@ const ProfileView = () => {
   }, {});
 
   return (
+    isLoading? <FullscreenLoaders />:
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
       <Box
         pt={2}
diff --git a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
index 979f012..7e7bd81 100644
--- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
@@ -208,9 +208,7 @@ const ExchangeRate = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
 
-          <HStack display={"flex"} alignItems={"center"}>
-            <Pagination totalItems={10} />
-          </HStack>
+
         </HStack>
       </Box>
 
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index fc21760..9291de5 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -8,8 +8,9 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "./AddInvestmentType";
-import DataTable from "../../../Components/DataTable/DataTable";
+import NormalTable from "../../../Components/DataTable/NormalTable";
 import {useDeleteInvestmentTypeMutation, useGetInvestmentTypesQuery,} from "../../../Services/investment.type.service";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -30,7 +31,12 @@ const InvestmentType = () => {
   useContext(GlobalStateContext);
 
   const [deleteInvestmentType] = useDeleteInvestmentTypeMutation();
-  const {data: investmentTypes,isLoading: investmentTypesLoading,error,} = useGetInvestmentTypesQuery({ page: 1, size: 10 });
+
+    // =========================== [Use State] ============================= 
+    const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+    const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  
+  const {data: investmentTypes,isLoading: investmentTypesLoading,error,} = useGetInvestmentTypesQuery({ page: currentPage, size: pageSize });
 
   console.log(investmentTypes?.data?.rows);
 
@@ -63,7 +69,7 @@ const InvestmentType = () => {
    // ==================================================== [Table Setup] ================================================================
   
    const tableHeadRow = [
-    "Sr.no",
+    // "Sr.no",
     "Investment Type",
     "Description",
     "Status",
@@ -71,32 +77,44 @@ const InvestmentType = () => {
   ];
 
   const extractedArray = filteredData?.map((item, index) => ({
-    "Sr.no": (
-      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {index + 1}
-      </Text>
-    ),
+    // "Sr.no": (
+    //   <Text
+    //     justifyContent={slideFromRight ? "right" : "left"}
+    //     as={"span"}
+    //     color={"teal.900"}
+    //     fontWeight={"500"}
+    //     className="d-flex align-items-center web-text-small"
+    //   >
+    //     {index + 1}
+    //   </Text>
+    // ),
     "Investment Type": (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
+        isTruncated={true}
         className="d-flex align-items-center web-text-small"
       >
         {item.investmentTypeName}
       </Text>
     ),
     Description: (
-        <Text as={"span"} w={'400px'} isTruncated={true} color={"teal.900"} fontWeight={"500"}>
-          {item.note}
-        </Text>
+    <Text
+      as={"span"}
+      color={"teal.900"}
+      fontWeight={"500"}
+
+
+      maxWidth="750px" // Adjust width as needed
+      display="block" // Ensure block display for proper truncation
+      overflow="hidden"
+      isTruncated
+      textOverflow="ellipsis"
+    >
+      {item.note}
+    </Text>
     ),
     Status: (
       <Box isTruncated={true}>
@@ -224,9 +242,10 @@ const InvestmentType = () => {
 
           <HStack display={"flex"} alignItems={"center"}>
 
-            {/* ==================== [Pagination] ===================== */}
+            {/* ====================[Pagination]===================== */}
+
+            <Pagination isLoading={investmentTypesLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={investmentTypes?.data?.totalItems} />
 
-            <Pagination totalItems={10} />
 
             {/* ===================== [Add Button] ===================== */}
 
@@ -236,8 +255,9 @@ const InvestmentType = () => {
                 colorScheme={"forestGreen"}
                 rounded={"sm"}
                 size={"sm"}
+                fontSize={'xs'}
               >
-                Add
+                Add Investment Type
               </Button>
             </Link>
           </HStack>
@@ -246,7 +266,7 @@ const InvestmentType = () => {
 
       {/* ======================== [Data Table] ======================= */}
 
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Investment type `}
         tableHeadRow={tableHeadRow}
         data={extractedArray}
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 6f2fd35..ac1d0e1 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -1,7 +1,7 @@
 import {Badge, Box,Button,HStack,Input,Text,Tooltip,useToast,} from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import DataTable from "../../../Components/DataTable/DataTable";
+import NormalTable from '../../../Components/DataTable/NormalTable'
 import { Link, Link as RouterLink } from "react-router-dom";
 import {AddIcon,DeleteIcon,EditIcon,} from "@chakra-ui/icons";
 import Pagination from "../../../Components/Pagination";
@@ -27,10 +27,13 @@ const Sponser = () => {
   const navigate = useNavigate();
   const toast = useToast();
 
-  // =========================== [Use State] ============================= 
+  
+
 
-  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [searchTerm, setSearchTerm] = useState("");
+
+
+
   const [isLoading, setIsLoading] = useState(false);
   const [deleteAlert, setDeleteAlert] = useState(false);
   const [actionId, setActionId] = useState(false);
@@ -40,30 +43,12 @@ const Sponser = () => {
   const [deleteSponser] = useDeleteSponserMutation(); 
   const { sponser, setSponser, slideFromRight } = useContext(GlobalStateContext);
 
-  const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: 1, size: 20 });
+  // =========================== [Use State] ============================= 
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: currentPage, size: pageSize });
 
-  console.log(sponsors?.data?.rows);
-
-  // ========================= [Toggle ToastBox] ==========================
-
-  // const handleUpdateStatus = debounce(async (id) => {
-  //   try {
-  //     await toggleStatus({ id }).then((response) => {
-  //       console.log(response);
-  //       if (response?.data?.statusCode) {
-  //         toast({
-  //           render: () => <ToastBox message={response?.data?.message} />,
-  //         });
-  //       } else {
-  //         toast({
-  //           render: () => (
-  //             <ToastBox message={"Something Went Wrong"} status={"error"} />
-  //           ),
-  //         });
-  //       }
-  //     });
-  //   } catch (error) {}
-  // }, 300);
+  // console.log(sponsors?.data?.rows);
 
   // ==============================[Table Filter]========================
 
@@ -71,7 +56,6 @@ const Sponser = () => {
     const name = item.sponsorName;
     const searchLower = searchTerm?.toLowerCase();
     const nameMatches = name?.toLowerCase().includes(searchLower);
-
     return nameMatches;
   });
 
@@ -176,6 +160,8 @@ const Sponser = () => {
     } catch (error) {}
   };
 
+  console.log(isSponserLoading);
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
@@ -206,7 +192,7 @@ const Sponser = () => {
 
             {/* ====================[Pagination]===================== */}
 
-            <Pagination totalItems={10} />
+            <Pagination isLoading={isSponserLoading} pageSize={pageSize} setPageSize={setPageSize} currentPage={currentPage} setCurrentPage={setCurrentPage} totalItems={sponsors?.data?.totalItems} />
 
             {/* =====================[Add Button]===================== */}
 
@@ -218,7 +204,7 @@ const Sponser = () => {
                 fontSize={'xs'}
                 size={"sm"}
               >
-                Add
+                Add Sponsor
               </Button>
             </Link>
           </HStack>
@@ -227,7 +213,7 @@ const Sponser = () => {
 
       {/* =================== [Data Table] ===================== */}
       
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Sponers `}
         tableHeadRow={tableHeadRow}
         data={extractedArray}
diff --git a/src/Services/investor.details.service.js b/src/Services/investor.details.service.js
index fd734bd..ccc6f73 100644
--- a/src/Services/investor.details.service.js
+++ b/src/Services/investor.details.service.js
@@ -16,9 +16,17 @@ export const investorDetails = createApi({
         `/investorDetails/admin?page=${page}&size=${size}`,
       providesTags: ["getInvestors"],
     }),
+
+
+        // =====[get investment details ]
+        getInvestorsDetailsById: builder.query({
+          query: (id) => `/investorDetails/admin/${id}`,
+          providesTags: ["getInvestors"],
+        }),
+    
     
   }),
 });
 
 // Export hooks for usage in functional components
-export const { useGetInvestorsQuery } = investorDetails;
+export const { useGetInvestorsQuery, useGetInvestorsDetailsByIdQuery } = investorDetails;
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 6170c2a..ca28d2b 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -205,7 +205,7 @@ export const ioService = createApi({
         method: "PATCH",
         body: data,
       }),
-      invalidatesTags: ["getIOById"],
+      invalidatesTags: ["getIOById", 'getIO'],
     }),