diff --git a/src/Components/MobileView.jsx b/src/Components/MobileView.jsx
index 4fa04e2..ca022a6 100644
--- a/src/Components/MobileView.jsx
+++ b/src/Components/MobileView.jsx
@@ -27,7 +27,7 @@ import { BiWifi } from "react-icons/bi";
 import { useGetIOByIdQuery } from "../Services/io.service";
 import { useNavigate, useParams } from "react-router-dom";
 import FullscreenLoaders from "./Loaders/FullscreenLoaders";
-import { formatDate } from "../Constants/Constants";
+import { calculatePercentage, formatDate } from "../Constants/Constants";
 import { BsFileText } from "react-icons/bs";
 
 const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
@@ -63,6 +63,13 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
     });
   };
 
+  console.log(
+    calculatePercentage(
+      IObyID?.data?.totalAmtInvestmentInUSD,
+      IObyID?.data?.goalAmount
+    )
+  );
+
   return (
     <Modal
       display={"flex"}
@@ -89,12 +96,12 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
             w={"320px"}
             sx={{
               "@media (max-width: 2024px)": {
-                  height:"695px",
-                  width:"360px",
+                height: "695px",
+                width: "360px",
               },
               "@media (max-width: 1440px)": {
-                  height:"600px",
-                  width:"320px",
+                height: "600px",
+                width: "320px",
               },
             }}
           >
@@ -117,16 +124,12 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
             >
               {IObyIDisLoading ? (
                 <Box
-                display={"flex"}
-                justifyContent={"center"}
-                alignItems={"center"}
-                h={"100%"}
+                  display={"flex"}
+                  justifyContent={"center"}
+                  alignItems={"center"}
+                  h={"100%"}
                 >
-                  <Spinner 
-                  thickness='3px'
-                  color='purple.900'
-                  size='lg'
-                   />
+                  <Spinner thickness="3px" color="purple.900" size="lg" />
                 </Box>
               ) : (
                 <>
@@ -174,10 +177,10 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                     borderBottomRightRadius={"23px"}
                     sx={{
                       "@media (max-width: 2024px)": {
-                          height:"575px",
+                        height: "575px",
                       },
                       "@media (max-width: 1440px)": {
-                        height:"483px",
+                        height: "483px",
                       },
                     }}
                   >
@@ -246,7 +249,10 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                         <Progress
                           colorScheme="green"
                           size="sm"
-                          value={20}
+                          value={calculatePercentage(
+                            IObyID?.data?.totalAmtInvestmentInUSD,
+                            IObyID?.data?.goalAmount
+                          )}
                           borderRadius={"3px"}
                         />
                         <Text
@@ -255,7 +261,16 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                           fontWeight={600}
                           mb={0}
                         >
-                          0.0% funded
+                          {parseFloat(
+                            calculatePercentage(
+                              IObyID?.data?.totalAmtInvestmentInUSD,
+                              IObyID?.data?.goalAmount
+                            ) || 0
+                          ).toLocaleString(undefined, {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })}
+                          % funded
                         </Text>
                         <Text
                           fontSize={"xs"}
@@ -334,25 +349,28 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                       <Heading fontSize="14px" fontWeight={600}>
                         Key Merits
                       </Heading>
-                      <Box display={"flex"} alignItems={"center"}>
-                        {keyMerits?.[0]?.icon?.iconFilePath && (
-                          <Image
-                            rounded={"md"}
-                            display={"flex"}
-                            p={1}
-                            justifyContent={"center"}
-                            alignItems={"center"}
-                            src={
-                              "https://tanami.betadelivery.com/" +
-                              keyMerits[0].icon.iconFilePath
-                            }
-                            w={8}
-                            h={8}
-                          />
-                        )}
-                        <Text fontSize={"xs"} mb={0}>
-                          {IObyID?.data?.keyMerits[0]?.meritsDescription}
-                        </Text>
+                      <Box>
+                        {keyMerits &&
+                          keyMerits.map((item, index) => (
+                            <Box display={"flex"} alignItems={"center"}>
+                              <Image
+                                rounded={"md"}
+                                display={"flex"}
+                                p={1}
+                                justifyContent={"center"}
+                                alignItems={"center"}
+                                src={
+                                  "https://tanami.betadelivery.com/" +
+                                  item?.icon.iconFilePath
+                                }
+                                w={8}
+                                h={8}
+                              />
+                              <Text fontSize={"xs"} mb={0}>
+                                {item?.meritsDescription}
+                              </Text>
+                            </Box>
+                          ))}
                       </Box>
                     </Box>
                     <Box
diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index 510695e..6031b55 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -138,4 +138,11 @@ export function formatDate(dateString) {
   const options = { year: 'numeric', month: 'short', day: 'numeric' };
   const date = new Date(dateString);
   return date.toLocaleDateString('en-US', options);
+}
+
+export function calculatePercentage(part, total) {
+  if (total === 0) {
+    return 0; // To avoid division by zero
+  }
+  return (part / total) * 100;
 }
\ No newline at end of file
diff --git a/src/Pages/AccountDeletion/DeletionHistory.jsx b/src/Pages/AccountDeletion/DeletionHistory.jsx
index b578bfe..530f39b 100644
--- a/src/Pages/AccountDeletion/DeletionHistory.jsx
+++ b/src/Pages/AccountDeletion/DeletionHistory.jsx
@@ -38,6 +38,13 @@ const DeletionHistory = () => {
     refetch
   } = useGetDeleteHistoryQuery()
 
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString('en-GB', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  };
 
  // Use useEffect to refetch data when the component mounts
  useEffect(() => {
diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
index 617234a..e049632 100644
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -23,7 +23,7 @@ const CreateIO = () => {
   const { data, error, isLoading } = useGetIOprepopulateDataQuery();
   
 
-  // console.log(data?.data);
+  console.log(data?.data);
 
   const enableNextTab = (index) => {
     setTabs((prevTabs) => {
diff --git a/src/Pages/IO_Management/CreateIO/Destribution.jsx b/src/Pages/IO_Management/CreateIO/Destribution.jsx
index 56c4770..c53d1e2 100644
--- a/src/Pages/IO_Management/CreateIO/Destribution.jsx
+++ b/src/Pages/IO_Management/CreateIO/Destribution.jsx
@@ -24,7 +24,13 @@ const Destribution = () => {
 
     console.log(IODetails?.ioNAVHistory);
     
-
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+      });
+    };
     
   useEffect(() => {
     // Simulate loading
@@ -69,7 +75,7 @@ const Destribution = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {formatDatee(item.transactionDate)}
+        {formatDate(item.transactionDate)}
       </Text>
     ),
     "Amount": (
@@ -82,7 +88,11 @@ const Destribution = () => {
       >
         {/* {`${item.transactionAmount}`} */}
 
-        {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
+        {/* {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`} */}
+        {`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}`}
       </Text>
     ),
     "% of Investment": (
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
index 783ca2b..6f471c4 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails.jsx
@@ -1,5 +1,6 @@
 import {
   Avatar,
+  Badge,
   Box,
   Button,
   HStack,
@@ -30,7 +31,8 @@ const IOCashDetails = () => {
   const toast = useToast();
   const firstField = useRef();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { caseDetails, setCaseDetails, IODetails } = useContext(GlobalStateContext);
+  const { caseDetails, setCaseDetails, IODetails } =
+    useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
@@ -48,6 +50,14 @@ const IOCashDetails = () => {
     return () => clearTimeout(timer);
   }, []);
 
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
   // Calculate totals
   const totalAmount = caseDetails.reduce(
     (acc, caseDetail) => acc + caseDetail.amount,
@@ -72,21 +82,22 @@ const IOCashDetails = () => {
     );
     toast({
       render: () => <ToastBox message={"Status changed succesfully.!"} />,
-    }); 
+    });
   }, 300);
 
   // Table filter
-  const filteredData = IODetails?.ioCashHistory?.filter((item) => {
-    const name = item.transactionType;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  }).sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
-
+  const filteredData = IODetails?.ioCashHistory
+    ?.filter((item) => {
+      const name = item.transactionType;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
 
   const extractedArray = filteredData?.map((item, index) => ({
     id: item?.id,
-    "Date": (
+    Date: (
       <Text
         justifyContent={"center"}
         as={"span"}
@@ -99,7 +110,7 @@ const IOCashDetails = () => {
     ),
     "Transaction type": (
       <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -108,20 +119,27 @@ const IOCashDetails = () => {
         {item?.transactionType}
       </Text>
     ),
-    "Amount": (
+    Amount: (
       <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-       {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {/* {parseFloat(item.transactionAmount || 0).toLocaleString()} */}
+        {`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}`}
       </Text>
     ),
-    "Comments": (
+    Comments: (
       <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -132,20 +150,24 @@ const IOCashDetails = () => {
     ),
     "Update by ": (
       <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         gap={2}
         className="d-flex align-items-center web-text-small"
       >
-        
-    <Avatar size='sm' name={item.creator?.firstName} src={item.creator?.profilePhoto} />{item.creator?.firstName}
+        <Avatar
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+        {item.creator?.firstName}
       </Text>
     ),
     "Update On": (
       <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -173,7 +195,7 @@ const IOCashDetails = () => {
     return (
       <Table size="sm">
         <Tbody backgroundColor="gray.50">
-          <Tr >
+          <Tr>
             <Th
               textAlign={"center"}
               p={3}
@@ -267,9 +289,18 @@ const IOCashDetails = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
 
-
-          {IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null}
-
+          {IODetails?.isInvestedAmount ? (
+            <Button
+              onClick={onOpen}
+              leftIcon={<AddIcon />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              rounded={"sm"}
+              fontSize={"xs"}
+            >
+              Add IO Cash
+            </Button>
+          ) : null}
         </HStack>
       </Box>
 
@@ -277,7 +308,7 @@ const IOCashDetails = () => {
         centered={true}
         emptyMessage={`We don't have any Sponers`}
         tableHeadRow={tableHeadRow}
-        data={extractedArray} 
+        data={extractedArray}
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
@@ -294,23 +325,11 @@ const IOCashDetails = () => {
         isLoading={isLoading}
       />
 
-
-
-
-
-
-
-
-
-
-      <AddCashDetails 
-          isOpen={isOpen}
-          onClose={onClose}
-          firstField={firstField} />
-
-
-
-
+      <AddCashDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
index 3a002f0..b518724 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
@@ -1,32 +1,42 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import GlobalStateContext from '../../../Contexts/GlobalStateContext';
-import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button } from '@chakra-ui/react';
-import { OPACITY_ON_LOAD } from '../../../Layout/animations';
-import Pagination from '../../../Components/Pagination';
-import NormalTable from '../../../Components/DataTable/NormalTable';
-import CustomAlertDialog from '../../../Components/CustomAlertDialog';
-import { formatDatee } from '../../../Components/FormField';
-import { AddIcon } from '@chakra-ui/icons';
-import AddIONav from './AddIONav';
-import { formatDate } from '../../Master/Sponser/Sponsers';
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import {
+  Box,
+  HStack,
+  Input,
+  Text,
+  Table,
+  Tbody,
+  Th,
+  Tr,
+  Avatar,
+  useDisclosure,
+  Button,
+  Badge,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Pagination from "../../../Components/Pagination";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import { formatDatee } from "../../../Components/FormField";
+import { AddIcon } from "@chakra-ui/icons";
+import AddIONav from "./AddIONav";
+import { formatDate } from "../../Master/Sponser/Sponsers";
 
 const IONAVDetails = () => {
   const { navDetails, setNavDetails, IODetails } =
     useContext(GlobalStateContext);
-    const firstField = useRef();
-    const { isOpen, onOpen, onClose } = useDisclosure();
-    const [searchTerm, setSearchTerm] = useState("");
-    const [isLoading, setIsLoading] = useState(true);
-    const [deleteAlert, setDeleteAlert] = useState(false);
-    const [actionId, setActionId] = useState(false);
-    const [mouseEntered, setMouseEntered] = useState(false);
-    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+  console.log(IODetails?.ioNAVHistory);
 
-    console.log(IODetails?.ioNAVHistory);
-    
-
-    
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
@@ -37,29 +47,31 @@ const IONAVDetails = () => {
     return () => clearTimeout(timer);
   }, []);
 
-    // Table setup
-    const tableHeadRow = [
-      // "Sr.No",
-      "Valuation Date",
-      "NAV",
-      "Last NAV update",
-      "Investment Closed",
-      "Comments",
-      "Update by ",
-      // "Update On",
-    ];
+  // Table setup
+  const tableHeadRow = [
+    // "Sr.No",
+    "Valuation Date",
+    "NAV",
+    "Last NAV update",
+    "Investment Closed",
+    "Comments",
+    "Update by ",
+    // "Update On",
+  ];
 
-      // Table filter
-  const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
-    const name = item.transactionType;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  }).sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
+  // Table filter
+  const filteredData = IODetails?.ioNAVHistory
+    ?.filter((item) => {
+      const name = item.transactionType;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
 
-  const  extractedArray=filteredData?.map((item, index) => ({
+  const extractedArray = filteredData?.map((item, index) => ({
     id: item?.id,
-    "Sr.No": index +1,
+    "Sr.No": index + 1,
     "Valuation Date": (
       <Text
         justifyContent={"center"}
@@ -72,17 +84,23 @@ const IONAVDetails = () => {
         {formatDate(item?.transactionDate)}
       </Text>
     ),
-    "NAV": (
+    NAV: (
       <Text
-        justifyContent={"center"}
+        justifyContent={"left"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
-        className="d-flex align-items-center web-text-small" 
+        className="d-flex align-items-left web-text-small"
       >
         {/* {`${item.transactionAmount}`} */}
 
-        {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
       </Text>
     ),
     "Last NAV update": (
@@ -104,10 +122,10 @@ const IONAVDetails = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {item.initialNAVvalue&& `${item.initialNAVvalue}`}
+        {item.initialNAVvalue && `${item.initialNAVvalue}`}
       </Text>
     ),
-    "Comments": (
+    Comments: (
       <Text
         justifyContent={"center"}
         as={"span"}
@@ -120,15 +138,15 @@ const IONAVDetails = () => {
     ),
     "Update by ": (
       <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         gap={2}
         className="d-flex align-items-center web-text-small"
       >
-        
-    <Avatar size='sm' name={"faisal"} src={null} />Faisal
+        <Avatar size="sm" name={"faisal"} src={null} />
+        Faisal
       </Text>
     ),
     "Update On": (
@@ -144,12 +162,8 @@ const IONAVDetails = () => {
     ),
   }));
 
-
-
   const handleDelete = () => {
-    const updatedNav = navDetails.filter(
-      (sponsor) => sponsor.id !== actionId
-    );
+    const updatedNav = navDetails.filter((sponsor) => sponsor.id !== actionId);
 
     setTimeout(() => {
       setNavDetails(updatedNav);
@@ -159,71 +173,71 @@ const IONAVDetails = () => {
     setIsLoading(true);
   };
 
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
 
-
-
-  return (<Box {...OPACITY_ON_LOAD} pb={0}>
-    <Box bg="white.500">
-      <HStack
-        display={"flex"}
-        justifyContent={"space-between"}
-        pb={3}
-        spacing="24px"
-      >
-        <Input
-          type="search"
-          width={300}
-          placeholder="Search..."
-          size="sm"
-          rounded="sm"
-          focusBorderColor="green.500"
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-
-        {/* <HStack display={"flex"} alignItems={"center"}>
+          {/* <HStack display={"flex"} alignItems={"center"}>
           <Pagination totalItems={10} />
         </HStack> */}
 
           {/* {IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null} */}
 
+          {IODetails?.isInvestedAmount ? (
+            <Button
+              onClick={onOpen}
+              leftIcon={<AddIcon />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              rounded={"sm"}
+              fontSize={"xs"}
+            >
+              Add IO Nav
+            </Button>
+          ) : null}
+        </HStack>
+      </Box>
 
-{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Nav</Button>:null}
+      <NormalTable
+        centered={true}
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        caption={"Tanami v1.0"}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
 
-      </HStack>
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddIONav isOpen={isOpen} onClose={onClose} firstField={firstField} />
     </Box>
+  );
+};
 
-    <NormalTable
-      centered={true}
-      emptyMessage={`We don't have any Sponers`}
-      tableHeadRow={tableHeadRow}
-      data={extractedArray} 
-      isLoading={isLoading}
-      viewActionId={actionId}
-      setViewActionId={setActionId}
-      caption={"Tanami v1.0"}
-      setMouseEnteredId={setMouseEnteredId}
-      setMouseEntered={setMouseEntered}
-    />
-
-    <CustomAlertDialog
-      onClose={() => setDeleteAlert(false)}
-      isOpen={deleteAlert}
-      message={"Are you sure you want to delete sponers?"}
-      alertHandler={handleDelete}
-      isLoading={isLoading}
-    />
-
-
-
-<AddIONav 
-          isOpen={isOpen}
-          onClose={onClose}
-          firstField={firstField} />
-
-
-  </Box>
-  )
-}
-
-export default IONAVDetails
\ No newline at end of file
+export default IONAVDetails;
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index 28d76ce..5e347aa 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -42,14 +42,17 @@ import { formatCurrency } from "../../../Components/CurrencyInput";
 import { IoIosPhonePortrait } from "react-icons/io";
 import MobileView from "../../../Components/MobileView";
 import { ImMobile } from "react-icons/im";
-import { generateSerialNumber, removeTrailingZeros } from "../../../Constants/Constants";
+import {
+  generateSerialNumber,
+  removeTrailingZeros,
+} from "../../../Constants/Constants";
 // import { debounce } from "./AddIOCharges";
 
 const formatDate = (date) => {
-  return new Date(date).toLocaleDateString('en-GB', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
+  return new Date(date).toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
   });
 }; // Simple date formatter
 
@@ -74,12 +77,11 @@ const ViewIOTable = () => {
 
   // ===============================[ RTK Api calls ] =============================================
   const { data, isLoading, error } = useGetIOsQuery({
-    page: currentPage, 
+    page: currentPage,
     size: pageSize,
   });
 
   console.log(data);
-  
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
@@ -91,7 +93,7 @@ const ViewIOTable = () => {
     "Goal Amount",
     "Closing Date",
     "IO Status",
-    // "Preview",
+    "Preview",
     "Action",
   ];
 
@@ -114,16 +116,16 @@ const ViewIOTable = () => {
   const extractedArray = filteredData?.map((item, idx) => ({
     "Sr No.": (
       <Text
-      w={'24px'}
+        w={"24px"}
         justifyContent={slideFromRight ? "right" : "left"}
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center fw-bold web-text-small"
       >
         {/* {item.id} */}
-        {generateSerialNumber(idx,currentPage, pageSize )}
-        
-      </Text>),
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
     "IO ID": (
       <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -140,27 +142,27 @@ const ViewIOTable = () => {
       //   </Text>
       // </Box>
       <Tooltip
-      hasArrow
-      bg={"#fff"}
-      fontSize={"xs"}
-      label={item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
-      placement="top-start"
-      color={"blue.800"}
-    >
-      <Text
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        maxWidth="200px" // Adjust width as needed
-        display="block" // Ensure block display for proper truncation
-        overflow="hidden"
-        isTruncated
-        textOverflow="ellipsis"
-        cursor={"grab"}
+        hasArrow
+        bg={"#fff"}
+        fontSize={"xs"}
+        label={item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
+        placement="top-start"
+        color={"blue.800"}
       >
-        {item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
-      </Text>
-    </Tooltip>
+        <Text
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          maxWidth="200px" // Adjust width as needed
+          display="block" // Ensure block display for proper truncation
+          overflow="hidden"
+          isTruncated
+          textOverflow="ellipsis"
+          cursor={"grab"}
+        >
+          {item.investmentNameEnglish ? item.investmentNameEnglish : "---"}
+        </Text>
+      </Tooltip>
     ),
     Sponsor: (
       <Box w={"auto"} isTruncated={true}>
@@ -179,18 +181,18 @@ const ViewIOTable = () => {
       </Box>
     ),
     "Goal Amount": (
-      <Box w={"100%"}>
-        <Text
-          w={"100%"}
-          textAlign={"center"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-        >
+      <Box w={"100%"} display={"flex"} justifyContent={"end"}>
+        <Text color={"teal.900"} fontWeight={"500"}>
           {/* {item.goalAmount
             ? formatCurrency(removeTrailingZeros(item.goalAmount))
             : "---"} */}
-            {`$${parseFloat(item.goalAmount||0).toLocaleString()}`}
+          {`${parseFloat(item.goalAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}`}
+          <Badge ms={1} colorScheme="green">
+            USD
+          </Badge>
         </Text>
       </Box>
     ),
@@ -201,7 +203,7 @@ const ViewIOTable = () => {
           {formatDate(item.closingDate ? item.closingDate : "---")}
         </Text>
       </Box>
-    ),                                 
+    ),
     "IO Status": (
       <Box w={"auto"} isTruncated={true}>
         <Badge
@@ -238,12 +240,15 @@ const ViewIOTable = () => {
     Preview: (
       <Box display={"flex"} justifyContent={"start"}>
         <Badge
-        display={"flex"} px={2} py={1} alignItems={"center"} 
-        color={"#000"}
-        fontWeight={500}
+          display={"flex"}
+          px={2}
+          py={1}
+          alignItems={"center"}
+          color={"#000"}
+          fontWeight={500}
           bg="purple.200"
-          onClick={() =>{
-            setActionId(item.id) 
+          onClick={() => {
+            setActionId(item.id);
             onOpen();
           }}
           rounded={"sm"}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 75d5096..1866daf 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -162,6 +162,9 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
     apiTransactionTitles?.includes(item.id)
   );
 
+
+  const balanceAmount = IODetails?.goalAmount - IODetails?.totalAmtInvestmentInUSD
+
   return IODetails?.investmentNameEnglish ? (
     <Box
       display={"flex"}
@@ -195,7 +198,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
       boxShadow={"md"}
       position={"relative"}
     >
-      <HStack gap={8}>
+      <HStack gap={4}>
         <Box h={100} w={200} p={1.5}>
           {/* <Image rounded={'md'} h={"100%"} src={ " https://tanami.betadelivery.com/" + IODetails?.ioName} alt={IODetails?.ioName}/> */}
           {IODetails?.artifactsImage?.[0]?.artifactPathName ? (
@@ -225,41 +228,102 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
           )}
         </Box>
 
-        <Box display={"flex"} w={"auto"} flexDirection={"column"} gap={2}>
-          <Text
-            as={"span"}
-            fontSize={"xs"}
-            color={"gray.500"}
-            fontWeight={"500"}
-          >
-            IO Name
-          </Text>
-          <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
-            {IODetails?.investmentNameEnglish
-              ? IODetails?.investmentNameEnglish
-              : "---"}
-          </Text>
-        </Box>
+        <Box>
+          <Box  w={"auto"} flexDirection={"column"} gap={2}>
+            <Text
+              as={"span"}
+              fontSize={"xs"}
+              color={"gray.500"}
+              fontWeight={"500"}
+              me={2}
+            >
+              IO Name :-
+            </Text>
+            <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
+              {IODetails?.investmentNameEnglish
+                ? IODetails?.investmentNameEnglish
+                : "---"}
+            </Text>
+          </Box>
 
-        <Box display={"flex"} flexDirection={"column"} gap={2}>
-          <Text
-            as={"span"}
-            fontSize={"xs"}
-            color={"gray.500"}
-            fontWeight={"500"}
-          >
-            Sponsor Name
-          </Text>
-          <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
-            {IODetails?.sponsor?.sponsorName
-              ? IODetails?.sponsor?.sponsorName
-              : "---"}
-          </Text>
+          <Box  gap={2}>
+            <Text
+              as={"span"}
+              fontSize={"xs"}
+              color={"gray.500"}
+              fontWeight={"500"}
+              me={2}
+            >
+              Sponsor Name :-
+            </Text>
+            <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
+              {IODetails?.sponsor?.sponsorName
+                ? IODetails?.sponsor?.sponsorName
+                : "---"}
+            </Text>
+          </Box>
         </Box>
       </HStack>
+       
+      <Box gap={8} me={12} w={"200px"}>
 
-      <HStack gap={8} me={20}>
-        <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
+          <Text
+            as={"span"}
+            fontSize={"xs"}
+            color={"gray.500"}
+            fontWeight={"500"}
+          >
+            Goal Amount :-
+          </Text>
+          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
+            {/* {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"} */}
+            {parseFloat(IODetails?.goalAmount || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+
+        <Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
+          <Text
+            as={"span"}
+            fontSize={"xs"}
+            color={"gray.500"}
+            fontWeight={"500"}
+          >
+            Amount Invested :-
+          </Text>
+          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
+            {/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
+            {parseFloat(IODetails?.totalAmtInvestmentInUSD || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+
+        <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+          <Text
+            as={"span"}
+            fontSize={"xs"}
+            color={"gray.500"}
+            fontWeight={"500"}
+          >
+            Balance :-
+          </Text>
+          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
+            {/* {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"} */}
+            {parseFloat(balanceAmount || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+      </Box>
+
+      <Box gap={8} me={12} w={"140px"}>
+        <Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
           <Text
             as={"span"}
             textAlign={"center"}
@@ -267,14 +331,12 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
             color={"gray.500"}
             fontWeight={"500"}
           >
-            IO Status
+            IO Status :-
           </Text>
           <Badge
             rounded={"full"}
             pt={0}
             pb={0.5}
-            ps={4}
-            pe={4}
             textTransform={"none"}
             // variant={"solid"}
             colorScheme={
@@ -299,16 +361,16 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
           </Badge>
         </Box>
 
-        <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
           <Text
             as={"span"}
             fontSize={"xs"}
             color={"gray.500"}
             fontWeight={"500"}
           >
-            IO MV
+            IO MV :-
           </Text>
-          <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
             {/* {IODetails?.ioNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioNAV)) : "00.00"} */}
             {parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
               minimumFractionDigits: 2,
@@ -317,16 +379,16 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
           </Text>
         </Box>
 
-        <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Box display={"flex"} justifyContent={"space-between"} gap={2} pb={1}>
           <Text
             as={"span"}
             fontSize={"xs"}
             color={"gray.500"}
             fontWeight={"500"}
           >
-            IO cash
+            IO cash :-
           </Text>
-          <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
             {/* {IODetails?.ioCash ? formatCurrency(removeTrailingZeros(IODetails?.ioCash)) : "00.00"} */}
             {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
               minimumFractionDigits: 2,
@@ -335,16 +397,16 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
           </Text>
         </Box>
 
-        <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Box display={"flex"} justifyContent={"space-between"} gap={2}>
           <Text
             as={"span"}
             fontSize={"xs"}
             color={"gray.500"}
             fontWeight={"500"}
           >
-            IO NAV
+            IO NAV :-
           </Text>
-          <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          <Text as={"span"} fontSize={"xs"} fontWeight={"500"}>
             {/* {IODetails?.ioMVNAV ? formatCurrency(removeTrailingZeros(IODetails?.ioMVNAV)) : "00.00"} */}
             {parseFloat(IODetails?.ioMVNAV || 0).toLocaleString(undefined, {
               minimumFractionDigits: 2,
@@ -352,7 +414,7 @@ const ViewIOdataHeader = ({ data, isLoading }) => {
             })}
           </Text>
         </Box>
-      </HStack>
+      </Box>
 
       <Box
         position={"absolute"}
diff --git a/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx b/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
index ac127ed..813e450 100644
--- a/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/Transaction.jsx
@@ -121,7 +121,7 @@ console.log(transaction);
         </Box>
       ),
       "Transaction": (
-        <Box w={"100px"} isTruncated={true}>
+        <Box w={"80px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
             {item.investorTransaction?.transactionName}
           </Text>
@@ -135,7 +135,7 @@ console.log(transaction);
         </Box>
       ),
       "Amount in investors currency": (
-        <Box w={"120px"} isTruncated={true} display={"flex"} justifyContent={"end"}>
+        <Box w={"100px"} isTruncated={true} display={"flex"} justifyContent={"end"}>
           <Text as={"span"} color={"teal.900"}>
             {/* {item.investorAmount} */}
             {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
@@ -147,14 +147,14 @@ console.log(transaction);
         </Box>
       ),
       "From USD": (
-        <Box w={"80px"} isTruncated={true}>
+        <Box w={"100px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
             {item.USDToInvCur_Rate}
           </Text>
         </Box>
       ),
       "TO USD": (
-        <Box w={"80px"} isTruncated={true}>
+        <Box w={"100px"} isTruncated={true}>
           <Text as={"span"} color={"teal.900"}>
             {item.invCurToUSD_Rate}
           </Text>
@@ -168,7 +168,8 @@ console.log(transaction);
               minimumFractionDigits: 2,
               maximumFractionDigits: 2,
             })}
-            <Badge ms={1} colorScheme="green">$</Badge>
+            {/* <Badge ms={1} colorScheme="green">$</Badge> */}
+            <Badge ms={1} colorScheme="green">USD</Badge>
           </Text>
         </Box>
       ),
@@ -246,7 +247,7 @@ console.log(transaction);
                 <Th
                   textAlign={"center"}
                   p={3}
-                  width="80px"
+                  width="100px"
                   color={"#004118"}
                   whiteSpace="normal"
                   wordBreak="normal"
@@ -257,7 +258,7 @@ console.log(transaction);
                 <Th
                   textAlign={"center"}
                   p={3}
-                  width="80px"
+                  width="100px"
                   color={"#004118"}
                   whiteSpace="normal"
                   wordBreak="normal"
@@ -268,7 +269,7 @@ console.log(transaction);
                 <Th
                   textAlign={"center"}
                   p={3}
-                  width="80px"
+                  width="100px"
                   color={"#004118"}
                   whiteSpace="normal"
                   wordBreak="normal"
@@ -276,7 +277,7 @@ console.log(transaction);
                 >
                   <Box display={"flex"} justifyContent={"end"}>
                     {parseFloat(InvestorWallet?.WalletBalance_InUSD).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                    <Badge ms={1} colorScheme="green">{InvestorWallet?.currencyCode_InCur}</Badge>
+                    <Badge ms={1} colorScheme="green">USD</Badge>
                   </Box>
                 </Th>
                 <Th
diff --git a/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx b/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
index d680f19..acd8d99 100644
--- a/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
+++ b/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
@@ -188,7 +188,7 @@ const ViewHistory = () => {
     "Withdrawal Amount": (
       <Box  isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-        ${parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+        <Badge ms={1} colorScheme="green" me={1}>$</Badge>{parseFloat(item?.USDAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
         </Text>
       </Box>
     ),