diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx
index 355c136..50bb3a8 100644
--- a/src/Components/DataTable/DataTable.jsx
+++ b/src/Components/DataTable/DataTable.jsx
@@ -118,7 +118,7 @@ const DataTable = ({
                             }}
                             className="web-text-small"
                           >
-                            <Skeleton fadeDuration={index / 12} isLoaded={!isLoading}>
+                            <Skeleton display={'flex'} alignItems={'center'} justifyContent={tableHeadRow.length - 1 === i || centered ? "center" : "start"} h={5} fadeDuration={index / 12} isLoaded={!isLoading}>
                               {item[heading]}
                             </Skeleton>
                           </Td>
diff --git a/src/Components/EmptySearchList.jsx b/src/Components/EmptySearchList.jsx
index f455898..e720948 100644
--- a/src/Components/EmptySearchList.jsx
+++ b/src/Components/EmptySearchList.jsx
@@ -1,6 +1,6 @@
 import { Box, Image, Text } from "@chakra-ui/react"
 // import EmptySearchListImage from "../assets/empty_state_empty_folder.svg"
-import EmptySearchListImage from "../assets/EmptySearchList.svg"
+import EmptySearchListImage from "../assets/EmptySearchList.png"
 
 const EmptySearchList = ({message}) => {
   return (
@@ -11,7 +11,7 @@ const EmptySearchList = ({message}) => {
     flexDirection={'column'}
     w={"100%"} h={"80vh"}  
     >
-        <Image w={200} mb={8} h={200} src={EmptySearchListImage} alt='Dan Abramov' />
+        <Image w={200} mb={8}  src={EmptySearchListImage} alt='empty list' />
         <Text className=" fw-bold fs-5" >{message}</Text>
         <Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text>
         
diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx
index 700271c..f573563 100644
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -47,12 +47,12 @@ const FormField = ({
     w={width ? width : "49%"}
     isInvalid={errors[name]}
     isRequired={isRequired}
-    className="mb-3"
+    mb={2}
   >
     <FormLabel
       textAlign={arabic ? "right" : "left"}
-      fontSize={"sm"}
-      fontWeight={"400"}
+      fontSize={"xs"}
+      color={"gray.600"}
     >
       {label}
     </FormLabel>
@@ -70,10 +70,11 @@ const FormField = ({
               {...field}
               {...props}
               cursor={"pointer"}
+              fontSize={'sm'}
               placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
-              _placeholder={{ fontSize: "xs" }}
-              borderRadius={"4px"}
+              _placeholder={{ fontSize: "sm" }}
+              rounded={'sm'}
             >
               {options.map((option, index) => (
                 <option key={index} value={option.value}>
@@ -91,8 +92,8 @@ const FormField = ({
               {...props}
               placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
-              _placeholder={{ fontSize: "xs" }}
-              borderRadius={"4px"}
+              _placeholder={{ fontSize: "sm" }}
+              rounded={'sm'}
               resize={"none"}
             />
           );
@@ -359,9 +360,9 @@ const FormField = ({
               {...field}
               {...props}
               placeholder={placeHolder ? placeHolder : label}
-              borderRadius={"4px"}
+              rounded={'sm'}
               textAlign={arabic || type === "number" ? "right" : "left"}
-              _placeholder={{ fontSize: "xs" }}
+              _placeholder={{ fontSize: "sm" }}
               min={type === "date" ? today : undefined}
             />
           );
diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx
index 2edef3d..9f4f8b3 100644
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -17,15 +17,15 @@ const FormInputMain = ({
   w,
 }) => {
   return (
-    <form onSubmit={onSubmit}>
+    <Box mt={0} as="form" onSubmit={onSubmit}>
       {Object.entries(groupedFields).map(([section, fields], index) => (
-        <Box key={section} mt={4}>
-          <Heading as="h6" size="xs" mx={5} fontWeight={"500"}>
+        <Box key={section} mt={2}>
+          <Heading as="h6" size="xs" mx={5} my={0} fontWeight={"500"}>
             {/* <ArrowBackIcon fontSize={'lg'} />  */}
             {section}
           </Heading>
-          <Box display={"flex"} gap={0}>
             <Box
+              as="span"
               width={"100%"}
               p={p ? p : 5}
               display={"flex"}
@@ -78,14 +78,13 @@ const FormInputMain = ({
                 )
               )}
             </Box>
-          </Box>
           {index < Object.entries(groupedFields).length - 1 && <Divider />}
         </Box>
       ))}
 
       {children}
 
-      <Box display={"flex"} justifyContent={"end"} mb={5}>
+      <Box display={"flex"} justifyContent={"end"} mt={2} >
         <Box display={"flex"} justifyContent={"end"} p={2} w={"49%"} gap={4}>
           {onCancle && (
             <Button
@@ -110,7 +109,7 @@ const FormInputMain = ({
           </Button>
         </Box>
       </Box>
-    </form>
+    </Box>
   );
 };
 
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 8713e31..05cad92 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -20,6 +20,26 @@ const getRandomDate = (start, end) => {
 const startDate = new Date(2020, 0, 1); // January 1, 2020
 const endDate = new Date(); // Current date
 
+
+export const generateUniqueId = () => {
+  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const digits = '0123456789';
+
+  let id = '';
+
+  // Generate three random uppercase letters
+  for (let i = 0; i < 3; i++) {
+    id += letters[Math.floor(Math.random() * letters.length)];
+  }
+
+  // Generate seven random digits
+  for (let i = 0; i < 7; i++) {
+    id += digits[Math.floor(Math.random() * digits.length)];
+  }
+
+  return id;
+}
+
 const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
   const [memberIfo, setMemberInfo] = useState();
@@ -470,6 +490,29 @@ const GlobalStateProvider = ({ children }) => {
       updateOn: "28-Jun-24",
     },
   ]);
+
+
+  
+  const [navDetails, setNavDetails] = useState([
+    {
+      id: 1,
+      date: "02-Jan-24",
+      IONavValue: 1229750,
+      comments: "MV Increased by 10%",
+      updateBy: "Faisal",
+      updateOn: "02-Jan-24",
+    },
+    {
+      id: 2,
+      date: "02-Jan-24",
+      IONavValue: 1229750,
+      comments: "MV Increased by 10%",
+      updateBy: "Faisal",
+      updateOn: "13-Feb-24",
+    },
+  ]);
+
+
   const [create, setCreate] = useState([
     {
       id: 1,
@@ -480,7 +523,7 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       id: 2,
-      Type: <AiOutlineFileGif />,
+      Type: <AiOutlineFileGif fontSize={25} />,
       fileName: "Investment Private",
       document: "Investment.pdf",
       status: true,
@@ -1461,7 +1504,7 @@ const GlobalStateProvider = ({ children }) => {
 
   const [ IODetails, setIODetails ] = useState([
     {
-      id:uuidv4(),
+      id:generateUniqueId(),
       closingDate: "Fri Jul 26 2024 00:00:00 GMT+0530 (India Standard Time)",
       discription: "Animi molestias cup",
       discriptionArabic: "Ut aliquam corporis",
@@ -1470,14 +1513,14 @@ const GlobalStateProvider = ({ children }) => {
       holdingPeriod: 47,
       ioName: "Harlan Head",
       ioNameArabic: "Ulric Torres",
-      ioStatus: "open",
+      ioStatus: "Open",
       maxInvestment: 80,
       minInvestment: 77,
       sponserName: "Ella Fitzgerald",
       typeName: "Commercial"
     },
     {
-      id:uuidv4(),
+      id:generateUniqueId(),
       closingDate: "Wed Sep 18 2024 00:00:00 GMT+0530 (India Standard Time)",
       discription: "Voluptas necessitatibus",
       discriptionArabic: "Nemo enim ipsam",
@@ -1486,14 +1529,14 @@ const GlobalStateProvider = ({ children }) => {
       holdingPeriod: 30,
       ioName: "John Doe",
       ioNameArabic: "Ali Ahmed",
-      ioStatus: "closed",
+      ioStatus: "Closed",
       maxInvestment: 95,
       minInvestment: 60,
       sponserName: "Louis Armstrong",
       typeName: "Residential"
     },
     {
-      id:uuidv4(),
+      id:generateUniqueId(),
       closingDate: "Mon Oct 21 2024 00:00:00 GMT+0530 (India Standard Time)",
       discription: "Tempora incidunt",
       discriptionArabic: "Eius modi tempora",
@@ -1502,14 +1545,14 @@ const GlobalStateProvider = ({ children }) => {
       holdingPeriod: 60,
       ioName: "Jane Smith",
       ioNameArabic: "Fatima Al-Hassan",
-      ioStatus: "open",
+      ioStatus: "Pending",
       maxInvestment: 100,
       minInvestment: 85,
       sponserName: "Duke Ellington",
       typeName: "Industrial"
     },
     {
-      id:uuidv4(),
+      id:generateUniqueId(),
       closingDate: "Fri Nov 15 2024 00:00:00 GMT+0530 (India Standard Time)",
       discription: "Dolor sit amet",
       discriptionArabic: "Consectetur adipiscing elit",
@@ -1518,14 +1561,14 @@ const GlobalStateProvider = ({ children }) => {
       holdingPeriod: 90,
       ioName: "Alice Johnson",
       ioNameArabic: "Layla Khalid",
-      ioStatus: "open",
+      ioStatus: "Open",
       maxInvestment: 70,
       minInvestment: 50,
       sponserName: "Billie Holiday",
       typeName: "Commercial"
     },
     {
-      id:uuidv4(),
+      id:generateUniqueId(),
       closingDate: "Tue Dec 10 2024 00:00:00 GMT+0530 (India Standard Time)",
       discription: "Consectetur adipisci",
       discriptionArabic: "Elit sed do eiusmod",
@@ -1534,7 +1577,7 @@ const GlobalStateProvider = ({ children }) => {
       holdingPeriod: 45,
       ioName: "Robert Brown",
       ioNameArabic: "Omar Hussain",
-      ioStatus: "closed",
+      ioStatus: "Closed",
       maxInvestment: 90,
       minInvestment: 70,
       sponserName: "Miles Davis",
@@ -1588,7 +1631,8 @@ const GlobalStateProvider = ({ children }) => {
         setIOArtifacts,
         investors, 
         setInvestors,IODetails, setIODetails,
-   
+        navDetails, 
+        setNavDetails,
         caseDetails,
         setCaseDetails,
       }}
diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
index 01b876a..c81e77d 100644
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -116,17 +116,17 @@ const CreateIO = () => {
     {
       label: "Investors",
       Content: Investors,
-      isDisabled: id ? false : true ,
+      isDisabled: id ? false : false ,
     },
     {
       label: "IO Cash Details",
       Content: IOCashDetails,
-      isDisabled: id ? false : true ,
+      isDisabled: id ? false : false ,
     },
     {
       label: "IO NAV Details",
       Content: IONAVDetails,
-      isDisabled: id ? false : true ,
+      isDisabled: id ? false : false ,
     },
   ];
 
@@ -143,8 +143,8 @@ const CreateIO = () => {
 
 
   return (
-    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={10}>
-      <Box paddingInline={"12px"} mt={2}>
+    <Box {...OPACITY_ON_LOAD} w={"100%"} overflowY={"scroll"} overflowX={'hidden'} height={"100vh"} pb={10}>
+      <Box paddingInline={"12px"} mt={2} >
         {/* <span
           onClick={() => navigate(-1)}
           style={{ fontSize: "15px", cursor: "pointer" }}
diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx
index 70e3571..7b52145 100644
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
+import { generateUniqueId } from "../../../Contexts/GlobalStateProvider";
 
 const schema = yup.object().shape({
   ioName: yup
@@ -109,7 +110,7 @@ const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
   const id = params?.id;
   const navigate = useNavigate();
 
-  const { investmentType, sponser, IODetails } = useContext(GlobalStateContext);
+  const { investmentType, sponser, IODetails, setIODetails } = useContext(GlobalStateContext);
   const [foundObject, setFoundObject] = useState(null);
 
   const investmentTypeOptions = investmentType.map(({ investmentName }) => {
@@ -145,6 +146,7 @@ const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
   const {
     control,
     reset,
+    setValue,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -509,11 +511,21 @@ const IODetails = ({ enableNextTab, index, isLoading, setIsLoading }) => {
   }, {});
 
   const onSubmit = (data) => {
+    if(params?.id){
+      return enableNextTab(index);
+    }
+    const id = generateUniqueId();
+    setValue("id", id)
+    const updatedData = { ...data, id };
+    
     console.log(data);
-    enableNextTab(index);
+    // Add the updated data to the IODetails array
+    setIODetails([...IODetails, updatedData]);
+
+    // Navigate to the new route
+    navigate(`/create-io/${updatedData?.id}`);
   };
 
-  console.log(id);
 
   if (isLoading) return <FullscreenLoaders/>;
   return (
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
index 986a658..3eb9766 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
@@ -1,8 +1,178 @@
-import React from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import GlobalStateContext from '../../../Contexts/GlobalStateContext';
+import { Box, HStack, Input,Text, Table, Tbody, Th, Tr } from '@chakra-ui/react';
+import { OPACITY_ON_LOAD } from '../../../Layout/animations';
+import Pagination from '../../../Components/Pagination';
+import DataTable from '../../../Components/DataTable/DataTable';
+import CustomAlertDialog from '../../../Components/CustomAlertDialog';
 
 const IONAVDetails = () => {
-  return (
-    <div>IONAVDetails</div>
+  const { navDetails, setNavDetails, slideFromRight } =
+    useContext(GlobalStateContext);
+    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("");
+
+    
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+    // Table setup
+    const tableHeadRow = [
+      "Sr.No",
+      "As On Date",
+      "IO NAV Value",
+      "Comments",
+      "Update by ",
+      "Update On",
+    ];
+
+    console.log(navDetails);
+      // Table filter
+  const filteredData = navDetails?.filter((item) => {
+    const name = item.updateBy;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+    return nameMatches;
+  });
+
+  const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr.No": index +1,
+    "As On Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.date}
+      </Text>
+    ),
+    "IO NAV Value": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {`$${item.IONavValue}`}
+      </Text>
+    ),
+    "Comments": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.comments}
+      </Text>
+    ),
+    "Update by ": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.updateBy}
+      </Text>
+    ),
+    "Update On": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.updateOn}
+      </Text>
+    ),
+  })));
+
+
+  console.log(extractedArray);
+
+
+  const handleDelete = () => {
+    const updatedNav = navDetails.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setNavDetails(updatedNav);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    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)}
+        />
+
+        <HStack display={"flex"} alignItems={"center"}>
+          <Pagination totalItems={10} />
+        </HStack>
+      </HStack>
+    </Box>
+
+    <DataTable
+      centered={true}
+      emptyMessage={`We don't have any Sponers`}
+      tableHeadRow={tableHeadRow}
+      data={extractedArray} 
+      setData={setExtractedArray}
+      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}
+    />
+  </Box>
   )
 }
 
diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
index 047a85d..24a98c1 100644
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -52,8 +52,6 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
   const navigate = useNavigate();
   const toast = useToast();
 
-
-
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -94,12 +92,12 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
   };
 
   const handleView = (id) => {
-    setActionId(id)
+    setActionId(id);
     onViewOpen();
   };
 
   const handleEdit = (id) => {
-    setActionId(id)
+    setActionId(id);
     onEditOpen();
   };
 
@@ -146,7 +144,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
       </Text>
     ),
     Action: (
-      <Box display="flex" justifyContent="space-evenly">
+      <Box display="flex" justifyContent="center" gap={2}>
         <Tooltip
           rounded="sm"
           fontSize="xs"
@@ -256,12 +254,13 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
           firstField={firstField}
         />
         <InvestmentView
-        id={actionId}
+          id={actionId}
           isOpen={isViewOpen}
           onClose={onViewClose}
           secondField={secondField}
         />
         <InvestmentEdit
+          id={actionId}
           isOpen={isEditOpen}
           onClose={onEditClose}
           thirdField={thirdField}
@@ -271,7 +270,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
         emptyMessage="We don't have any Sponsors"
         tableHeadRow={tableHeadRow}
         data={extractedArray}
-        isLoading={isLoading}
+        isLoading={false}
         viewActionId={actionId}
         setViewActionId={setActionId}
         setMouseEnteredId={setMouseEnteredId}
diff --git a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
index f1da0df..13b205e 100644
--- a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
+++ b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
@@ -12,18 +12,21 @@ import {
     Box,
     Text,
   } from "@chakra-ui/react";
-  import React, { useContext, useEffect } from "react";
-  import { investmentDocSchema } from "../InvestmentDocuments";
+  import React, { useContext, useEffect, useState } from "react";
+  import { bytesToMB, getFileIcon, investmentDocSchema } from "../InvestmentDocuments";
   import { yupResolver } from "@hookform/resolvers/yup";
   import { useForm } from "react-hook-form";
   import GlobalStateContext from "../../../Contexts/GlobalStateContext";
   
   const InvestmentEdit = ({ isOpen, onClose, thirdField, id }) => {
     const { create, setCreate } = useContext(GlobalStateContext);
-    const filteredObject = create?.find((item) => item?.id === id);
-  
+    const [file, setFile] = useState(null);
+    const filteredObject = create?.find((item) => item?.id === id)
+    console.log(filteredObject?.Type);
     const {
       control,
+      watch,
+      setValue,
       handleSubmit,
       reset,
       register,
@@ -31,20 +34,37 @@ import {
     } = useForm({
       resolver: yupResolver(investmentDocSchema),
     });
+
+    console.log(filteredObject);
   
     useEffect(() => {
       if (filteredObject) {
-        reset(filteredObject);
+        reset({
+          fileName:filteredObject?.fileName,
+          document: filteredObject?.document,
+          Type: filteredObject?.Type
+        });
+
       }
     }, [id, create, reset]);
+
   
     const onSubmit = (data) => {
+// setValue('Type',data.Type[0]?.type)
+console.log(data);
       const updatedCreate = create.map((item) =>
         item.id === id ? { ...item, ...data } : item
       );
       setCreate(updatedCreate);
       onClose();
     };
+
+    
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
   
     return (
       <Drawer isOpen={isOpen} placement="right" onClose={onClose} initialFocusRef={thirdField}>
@@ -84,17 +104,32 @@ import {
               <FormControl mb={4} isInvalid={errors.Type}>
                 <FormLabel fontSize="sm">Type</FormLabel>
                 <Input
-                  fontSize="sm"
-                  type="text"
-                  size="sm"
+                  name="Type"
                   {...register("Type")}
+                  fontSize="sm"
+                   className="form-control"
+                  type="file"
+                  size="sm"
+                  onChange={handleFileChange}
                 />
-                {errors.Type && (
+                {errors.type && (
                   <Text color="red.500" fontSize="sm">
-                    {errors.Type.message}
+                    {errors.type.message}
                   </Text>
                 )}
               </FormControl>
+              {file === null ? 
+              <Text>{filteredObject?.Type}</Text>: (
+                <Box mt={4}>
+                  <Box display="flex" mb={2}>
+                    <Text>{getFileIcon(file.type)}</Text>
+                    <Text fontSize="sm" ml={2} mb={0  }>
+                      {file.name}
+                    </Text>
+                  </Box>
+                  <Text fontSize="sm">{bytesToMB(file.size)}</Text>
+                </Box>
+              )}
             </DrawerBody>
             <DrawerFooter>
               <Button
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
index 0b18295..9b36cd1 100644
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -33,6 +33,22 @@ export const bytesToMB = (bytes) => {
   return (bytes / bytesInMB).toFixed(2) + " MB";
 };
 
+export const getFileIcon = (type) => {
+  switch (type) {
+    case 'application/pdf':
+      return <GrDocumentPdf />;
+    case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+    case 'application/msword':
+      return <TbFileTypeDocx fontSize={'16px'} />;
+    case 'image/jpeg':
+    case 'image/png':
+    case 'image/gif':
+      return <AiOutlineFileGif fontSize={25} />;
+    default:
+      return <FaRegFileAlt />;
+  }
+};
+
 export const investmentDocSchema = yup.object().shape({
   document: yup.mixed().required("Document is required"),
   fileName: yup.string().required("File name is required"),
@@ -72,7 +88,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
     };
 
     setCreate((prevCreate) => [...prevCreate, newDocument]);
-    navigate(" ");
+    onClose()
   };
 
   const handleFileChange = (event) => {
@@ -80,21 +96,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
     setFile(selectedFile);
   };
 
-  const getFileIcon = (type) => {
-    switch (type) {
-      case 'application/pdf':
-        return <GrDocumentPdf />;
-      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      case 'application/msword':
-        return <TbFileTypeDocx fontSize={'16px'} />;
-      case 'image/jpeg':
-      case 'image/png':
-      case 'image/gif':
-        return <AiOutlineFileGif />;
-      default:
-        return <FaRegFileAlt />;
-    }
-  };
+
 
   const getFileTitle = (type) => {
     switch (type) {
@@ -136,7 +138,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
                   size="sm"
                 />
                 {errors.fileName && (
-                  <Text fontSize="sm" color="red">
+                  <Text  fontSize="xs" color="red">
                     {errors.fileName.message}
                   </Text>
                 )}
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
index f151fb5..15a1674 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormLabel,
   Input,
   Modal,
   ModalBody,
@@ -18,32 +20,43 @@ const AmountInvested = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Amount Invested</ModalHeader>
+        <ModalHeader fontSize={'md'}>Amount Invested</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Date
-            </Text>
+            </FormLabel>
             <Input
               placeholder="Select Date"
-              size="md"
-              type="date"
+              size="sm"
+              rounded={'sm'}
               fontSize={"sm"}
+              focusBorderColor="forestGreen.300"
+              type="date"
             />
-          </Box>
+          </FormControl>
 
-          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
-            <Text as={"label"}>Amount</Text>
-            <Input placeholder="Enter amount" fontSize={"sm"} />
-          </Box>
+          <FormControl mb={"15px"} >
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+            <Input 
+              size="sm"
+              rounded={'sm'}
+              textAlign={'end'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="$00.00"  />
+          </FormControl>
 
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Comments
-            </Text>
-            <Textarea placeholder="Write Comments" fontSize={"sm"} />
-          </Box>
+            </FormLabel>
+            <Textarea 
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="Write Comments"  />
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -53,10 +66,14 @@ const AmountInvested = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
+            size={'sm'}
+            rounded={"sm"}
           >
             Save
           </Button>
-          <Button mr={3} onClick={onClose}>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
index badc2dc..68b2fab 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormLabel,
   Input,
   Modal,
   ModalBody,
@@ -18,32 +20,43 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Distribution To investors</ModalHeader>
+        <ModalHeader fontSize={"md"}>Distribution To investors</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Date
-            </Text>
+            </FormLabel>
             <Input
               placeholder="Select Date"
-              size="md"
-              type="date"
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
               fontSize={"sm"}
+              type="date"
             />
-          </Box>
+          </FormControl>
 
-          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
-            <Text as={"label"}>Amount</Text>
-            <Input placeholder="Enter amount" fontSize={"sm"} />
-          </Box>
+          <FormControl mb={"15px"} >
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+            <Input 
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
+              textAlign={'end'}
+              fontSize={"sm"} placeholder="$00.00"  />
+          </FormControl>
 
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Comments
-            </Text>
-            <Textarea placeholder="Write Comments" fontSize={"sm"} />
-          </Box>
+            </FormLabel>
+            <Textarea 
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="Write Comments"  />
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -53,10 +66,14 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
+            size={'sm'}
+            rounded={"sm"}
           >
             Save
           </Button>
-          <Button mr={3} onClick={onClose}>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
index 48e6b2b..4076396 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormLabel,
   Input,
   Modal,
   ModalBody,
@@ -18,32 +20,43 @@ const DistributionSponsor = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Distribution from Sponsors</ModalHeader>
+        <ModalHeader fontSize={'md'}>Distribution from Sponsors</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Date
-            </Text>
+            </FormLabel>
             <Input
               placeholder="Select Date"
-              size="md"
-              type="date"
+              size="sm"
+              rounded={'sm'}
               fontSize={"sm"}
+              focusBorderColor="forestGreen.300"
+              type="date"
             />
-          </Box>
+          </FormControl>
 
-          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
-            <Text as={"label"}>Amount</Text>
-            <Input placeholder="Enter amount" fontSize={"sm"} />
-          </Box>
+          <FormControl mb={"15px"} >
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+            <Input 
+              size="sm"
+              rounded={'sm'}
+              textAlign={'end'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="$00.00"  />
+          </FormControl>
 
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Comments
-            </Text>
-            <Textarea placeholder="Write Comments" fontSize={"sm"} />
-          </Box>
+            </FormLabel>
+            <Textarea 
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="Write Comments"  />
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -53,10 +66,14 @@ const DistributionSponsor = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
+            size={'sm'}
+            rounded={"sm"}
           >
             Save
           </Button>
-          <Button mr={3} onClick={onClose}>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
index c904b6b..5ef5506 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormLabel,
   Input,
   InputGroup,
   Modal,
@@ -19,32 +21,43 @@ const FeesExpenses = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Fees & Expenses</ModalHeader>
+        <ModalHeader fontSize={'md'}>Fees & Expenses</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Date
-            </Text>
+            </FormLabel>
             <Input
               placeholder="Select Date"
-              size="md"
-              type="date"
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
               fontSize={"sm"}
+              type="date"
             />
-          </Box>
+          </FormControl>
 
-          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
-            <Text as={"label"}>Amount</Text>
-            <Input placeholder="Enter amount" fontSize={"sm"} />
-          </Box>
+          <FormControl mb={"15px"} >
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+            <Input 
+              size="sm"
+              rounded={'sm'}
+              textAlign={'end'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="$00.00"  />
+          </FormControl>
 
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Comments
-            </Text>
-            <Textarea placeholder="Write Comments" fontSize={"sm"} />
-          </Box>
+            </FormLabel>
+            <Textarea 
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="Write Comments"  />
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -54,10 +67,14 @@ const FeesExpenses = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
+            size={'sm'}
+            rounded={"sm"}
           >
             Save
           </Button>
-          <Button  mr={3} onClick={onClose}>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
index ac77924..5298630 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormLabel,
   Input,
   Modal,
   ModalBody,
@@ -18,32 +20,43 @@ const UpdateIONav = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Update iO NAV</ModalHeader>
+        <ModalHeader fontSize={'md'}>Update iO NAV</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Date
-            </Text>
+            </FormLabel>
             <Input
               placeholder="Select Date"
-              size="md"
-              type="date"
+              size="sm"
+              rounded={'sm'}
               fontSize={"sm"}
+              focusBorderColor="forestGreen.300"
+              type="date"
             />
-          </Box>
+          </FormControl>
 
-          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
-            <Text as={"label"}>Amount</Text>
-            <Input placeholder="Enter amount" fontSize={"sm"} />
-          </Box>
+          <FormControl mb={"15px"} >
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+            <Input 
+              size="sm"
+              rounded={'sm'}
+              textAlign={'end'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="$00.00"  />
+          </FormControl>
 
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Comments
-            </Text>
-            <Textarea placeholder="Write Comments" fontSize={"sm"} />
-          </Box>
+            </FormLabel>
+            <Textarea 
+              size="sm"
+              rounded={'sm'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="Write Comments"  />
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -53,10 +66,14 @@ const UpdateIONav = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
+            size={'sm'}
+            rounded={"sm"}
           >
             Save
           </Button>
-          <Button mr={3} onClick={onClose}>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
index 1db6ecb..7680bb9 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  FormControl,
+  FormLabel,
   Input,
   Modal,
   ModalBody,
@@ -18,32 +20,43 @@ const UpdateIOStatus = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Update IO Status</ModalHeader>
+        <ModalHeader fontSize={'md'}>Update IO Status</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Date
-            </Text>
+            </FormLabel>
             <Input
               placeholder="Select Date"
-              size="md"
-              type="date"
+              size="sm"
+              rounded={'sm'}
               fontSize={"sm"}
+              type="date"
+              focusBorderColor="forestGreen.300"
             />
-          </Box>
+          </FormControl>
 
-          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
-            <Text as={"label"}>Amount</Text>
-            <Input placeholder="Enter amount" fontSize={"sm"} />
-          </Box>
+          <FormControl mb={"15px"} >
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+            <Input 
+              size="sm"
+              rounded={'sm'}
+              textAlign={'end'}
+              focusBorderColor="forestGreen.300"
+              fontSize={"sm"} placeholder="$00.00"  />
+          </FormControl>
 
-          <Box mb={"15px"}>
-            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+          <FormControl mb={"15px"}>
+            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
               Comments
-            </Text>
-            <Textarea placeholder="Write Comments" fontSize={"sm"} />
-          </Box>
+            </FormLabel>
+            <Textarea 
+              size="sm"
+              rounded={'sm'}
+              colorScheme={'green'}
+              fontSize={"sm"} placeholder="Write Comments"  />
+          </FormControl>
         </ModalBody>
         <ModalFooter>
           <Button
@@ -53,10 +66,14 @@ const UpdateIOStatus = ({ isOpen, onClose }) => {
             _hover={{
               bg: "hsl(139deg 98.99% 26.59%)",
             }}
+            size={'sm'}
+            rounded={"sm"}
           >
             Save
           </Button>
-          <Button mr={3} onClick={onClose}>
+          <Button 
+            size={'sm'}
+            rounded={"sm"} mr={3} onClick={onClose}>
             Close
           </Button>
         </ModalFooter>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index 7b28580..cf09bda 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -63,10 +63,10 @@ const ViewIOTable = () => {
 
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
-    "Sr.no",
+    // "Sr.no",
     "Deal ID",
+    "IO Name",
     "Sponser Name",
-    "Investment Type",
     "IO status",
     "Action",
   ];
@@ -84,6 +84,7 @@ const ViewIOTable = () => {
   //     });
   //   }, 300);
 
+  console.log(IODetails);
   // ====================================================[Table Filter]================================================================
   const filteredData = IODetails.filter((item) => {
     // Filter by name (case insensitive)
@@ -126,6 +127,13 @@ const ViewIOTable = () => {
         {item.id}
       </Text>
     ),
+    "IO Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item.ioName}
+        </Text>
+      </Box>
+    ),
     "Sponser Name": (
       <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -133,27 +141,26 @@ const ViewIOTable = () => {
         </Text>
       </Box>
     ),
-    "Investment Type": (
-      <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.typeName}
-        </Text>
-      </Box>
-    ),
     "IO status": (
       <Box w={"auto"} isTruncated={true}>
         <Badge
+          rounded={'md'}
+          pt={0.5}
+          pb={0.5}
+          ps={4}
+          pe={4}
+          textTransform={'none'}
           color={
-            item.ioStatus === "open"
+            item.ioStatus === "Open"
               ? "#00B69B"
-              : item.ioStatus === "pending"
+              : item.ioStatus === "Pending"
               ? "#6226EF"
               : "#EF3826"
           }
           colorScheme={
-            item.ioStatus === "open"
+            item.ioStatus === "Open"
               ? "green"
-              : item.ioStatus === "pending"
+              : item.ioStatus === "Pending"
               ? "purple"
               : "red"
           }
@@ -164,7 +171,7 @@ const ViewIOTable = () => {
     ),
 
     Action: (
-      <Box display={"flex"} justifyContent={"space-evenly"}>
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index b02ba7c..55d0d2d 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -29,16 +29,16 @@ import ViewIOnav from "./ViewIOnav";
 import ViewDistribution from "./ViewDistribution";
 import InvestmentDocument from "../CreateIO/InvestmentDocument";
 import KeyMerits from "../CreateIO/KeyMerits";
-import IOArtifacts from "../CreateIO/IOArtifacts";
 import Investors from "../CreateIO/Investors"
 import EditIO from "../EditIO/EditIO";
+import IOArtifacts from "../CreateIO/IOArtifacts";
+import IOCashDetails from "../CreateIO/IOCashDetails";
+import IONAVDetails from "../CreateIO/IONAVDetails";
 
 
 const ViewIOdata = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
-  const params = useParams()
-  console.log(params?.id);
   const [isEditing, setIsEditing] = useState(false);
 
 
@@ -48,8 +48,8 @@ const ViewIOdata = () => {
     { label: "Key merits", content: <KeyMerits /> },
     { label: "IO artifacts", content: <IOArtifacts /> },
     { label: "Investors", content: <Investors /> },
-    { label: "IO Cash Details", content: <ViewIOcash /> },
-    { label: "IO NAV Details", content: <ViewIOnav /> },
+    { label: "IO Cash Details", content: <IOCashDetails /> },
+    { label: "IO NAV Details", content: <IONAVDetails /> },
     // { label: "Distribution", content: <ViewDistribution /> },
   ];
 
@@ -84,19 +84,6 @@ const ViewIOdata = () => {
           </Box>
           <Button onClick={()=> navigate(`/create-io/${params?.id}`)} ps={4} pe={4} colorScheme="green" rounded={"sm"} size={'xs'}>Edit</Button>
         </TabList>
-        <Box p={3} width={"100%"} textAlign={"right"}>
-          <Button
-            bg={"hsla(139, 100%, 14%, 1)"}
-            color={"#fff"}
-            _hover={{
-              bg: "hsl(139deg 98.99% 26.59%)",
-            }}
-            onClick={onOpen}
-          >
-            Edit
-          </Button>
-          <EditIO isOpen={isOpen} onClose={onClose} />
-        </Box>
         <TabPanels>
           {tabs.map(({ content }, index) => (
             <TabPanel key={index}>{content}</TabPanel>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index a7707c6..5e5e534 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -19,22 +19,32 @@ import {
   MenuItemOption,
   MenuGroup,
   MenuOptionGroup,
-  MenuDivider,Badge, Box
+  MenuDivider,
+  Badge,
+  Box,
 } from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
 import { HiDotsVertical } from "react-icons/hi";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import AmountInvested from "./HeaderModal/AmountInvested";
 import FeesExpenses from "./HeaderModal/FeesExpenses";
 import DistributionSponsor from "./HeaderModal/DistributionSponsor";
 import DistributionInvestor from "./HeaderModal/DistributionInvestor";
 import UpdateIONav from "./HeaderModal/UpdateIONav";
 import UpdateIOStatus from "./HeaderModal/UpdateIOStatus";
-import { useRef } from "react";
+import { useContext, useRef } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 
 const ViewIOdataHeader = () => {
+  const params = useParams()
+  const id = params?.id;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const btnRef = useRef();
+  const { IODetails } = useContext(GlobalStateContext);
+  const foundObject = IODetails?.find(
+    (item) => item?.id.toString() === id?.toString()
+  );
+
 
   const {
     isOpen: isInvestmentOpen,
@@ -94,43 +104,109 @@ const ViewIOdataHeader = () => {
       // bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
       // bgGradient='linear(to-r, #ffd54f, #caf5d8)'
       // bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
-      boxShadow={'md'}
-
-
-
-
-
+      boxShadow={"md"}
       paddingRight={"10px"}
       borderRadius={"10px"}
+      position={"relative"}
     >
       <Box p={1}>
         <Image h={82} src={header} />
       </Box>
-      <Box  display={"flex"} flexDirection={'column'} gap={2}>
-        <Text as={'span'} fontSize={"sm"} fontWeight={"500"}>KKR Private Equity Fund (K-Prime)</Text>
-        <Text as={'span'} fontSize={"sm"} fontWeight={"500"}>sponsor name: KKR</Text>
-      </Box>
-      <Box  display={"flex"} flexDirection={'column'} gap={2}>
-        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO Status</Text>
-        <Badge  variant='subtle' w={"auto"}  color='green'>Open</Badge>
-      </Box>
-      <Box  display={"flex"} flexDirection={'column'} gap={2}>
-        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO MV NAV</Text>
-        <Text as={'span'} fontSize={"sm"}  fontWeight={"500"}>$1,092,500</Text>
-      </Box>
-      <Box  display={"flex"} flexDirection={'column'} gap={2}>
-        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO cash</Text>
-        <Text as={'span'} fontSize={"sm"}  fontWeight={"500"}>$48,000</Text>
-      </Box>
-      <Box  display={"flex"} flexDirection={'column'} gap={2}>
-        <Text as={'span'} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>IO NAV</Text>
-        <Text as={'span'} fontSize={"sm"}  fontWeight={"500"}>$1,140,500</Text>
+      {/* <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+        IO name: <Text as={'span'} ms={2}>{foundObject?.ioName}</Text>
+        </Text>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          Sponsor name: <Text as={'span'} ms={2}>{foundObject?.sponserName}</Text>
+        </Text>
+      </Box> */}
+
+<Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
+          IO Name
+        </Text>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+        {id ? foundObject?.ioName : "N/A"}
+        </Text>
       </Box>
 
-      <Box display={"flex"} alignItems={"start"} height={"95px"}>
+      
+      <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
+          Sponser Name
+        </Text>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+        {id ? foundObject?.sponserName : "N/A"}
+        </Text>
+      </Box>
+
+      
+      <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
+          IO Status
+        </Text>
+        <Badge
+          rounded={'md'}
+          pt={0.5}
+          pb={0.5}
+          ps={4}
+          pe={4}
+          textTransform={'none'}
+          color={
+            foundObject?.ioStatus === "Open"
+              ? "#00B69B"
+              : foundObject?.ioStatus === "Pending"
+              ? "#6226EF"
+              : "#EF3826"
+          }
+          colorScheme={
+            foundObject?.ioStatus === "Open"
+              ? "green"
+              : foundObject?.ioStatus === "Pending"
+              ? "purple"
+              : "red"
+          }
+        >
+          {id ? foundObject?.ioStatus : "N/A"}
+        </Badge>
+      </Box>
+      <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
+          IO MV NAV
+        </Text>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          {id? "$42012.00" : "N/A"}
+
+        </Text>
+      </Box>
+      <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
+          IO cash
+        </Text>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          {id ?"$48,000" : "N/A"}
+        </Text>
+      </Box>
+      <Box display={"flex"} flexDirection={"column"} gap={2}>
+        <Text as={"span"} fontSize={"xs"} color={"gray.500"} fontWeight={"500"}>
+          IO NAV
+        </Text>
+        <Text as={"span"} fontSize={"sm"} fontWeight={"500"}>
+          {id ? "$1,140,500" : "N/A"}
+        </Text>
+      </Box>
+
+      <Box
+        position={"absolute"}
+        right={3}
+        top={2}
+        display={"flex"}
+        alignItems={"start"}
+        height={"95px"}
+      >
         <Menu>
           <MenuButton
-            className="link p-1 rounded-1"
+            className="link p-1 rounded-1 "
             bg={"#fff"}
             _hover={{ backgroundColor: "#fff !important" }}
             onClick={onOpen}
@@ -138,83 +214,25 @@ const ViewIOdataHeader = () => {
           >
             <HiDotsVertical className="rubix-text-dark fs-6" />
           </MenuButton>
-          
-          <MenuList>
-            <Box display={"grid"} alignContent={"left"} justifyItems={"start"}>
-              <MenuItem _hover={hover} _focus={{ bg: "transparent" }}>
-                <Button
-                  onClick={onInvestmentOpen}
-                  bg={bg}
-                  _hover={hover}
-                  style={style}
-                >
-                  Amount Invested
-                </Button>
-              </MenuItem>
-
-              <Divider />
-              <MenuItem _hover={hover}>
-                <Button
-                  onClick={onFeesOpen}
-                  bg={bg}
-                  _hover={hover}
-                  style={style}
-                >
-                  Fees & Expenses
-                </Button>
-              </MenuItem>
-
-              <Divider />
-              <MenuItem _hover={hover}>
-                <Button
-                  onClick={onDistSponsorOpen}
-                  bg={bg}
-                  _hover={hover}
-                  style={style}
-                >
-                  Distribution from Sponsors
-                </Button>
-              </MenuItem>
-
-              <Divider />
-
-              <MenuItem _hover={hover}>
-                <Button
-                  onClick={onDistInvestorOpen}
-                  bg={bg}
-                  _hover={hover}
-                  style={style}
-                >
-                  Distribution To Investors
-                </Button>
-              </MenuItem>
-
-              <Divider />
-
-              <MenuItem _hover={hover}>
-                <Button
-                  onClick={onUpdateNavOpen}
-                  bg={bg}
-                  _hover={hover}
-                  style={style}
-                >
-                  Update IO NAV
-                </Button>
-              </MenuItem>
-
-              <Divider />
-
-              <MenuItem _hover={hover}>
-                <Button
-                  onClick={onUpdateStatusOpen}
-                  bg={bg}
-                  _hover={hover}
-                  style={style}
-                >
-                  Update IO Status
-                </Button>
-              </MenuItem>
-            </Box>
+          <MenuList fontSize={"sm"}>
+            <MenuItem _hover={{
+              bg:"#fff"
+            }} as={'span'} fontWeight={600} className="border-bottom">
+              Tansaction
+            </MenuItem>
+            <MenuItem  onClick={onInvestmentOpen} className="border-bottom">Amount Invested</MenuItem>
+            <MenuItem onClick={onFeesOpen} className="border-bottom">Fees & Expenses</MenuItem>
+            <MenuItem onClick={onDistSponsorOpen} className="border-bottom">
+              Distribution from Sponsors
+            </MenuItem>
+            <MenuItem  onClick={onDistInvestorOpen}
+ className="border-bottom">
+              Distribution To investors
+            </MenuItem>
+            <MenuItem onClick={onUpdateNavOpen} className="border-bottom">Update iO NAV</MenuItem>
+            <MenuItem className="border-bottom">Exit</MenuItem>
+            <MenuItem className="border-bottom">Cancel</MenuItem>
+            <MenuItem   onClick={onUpdateStatusOpen}>Update iO status</MenuItem>
           </MenuList>
         </Menu>
 
diff --git a/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx b/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
index fb9b1f8..2519aaf 100644
--- a/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/EditExchangeRate.jsx
@@ -12,6 +12,7 @@ import {
   FormLabel,
   Input,
   Text,
+  Tooltip,
   useDisclosure,
 } from "@chakra-ui/react";
 import React, { useContext, useRef, useState, useEffect } from "react";
@@ -20,6 +21,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import { FiEdit3 } from "react-icons/fi";
 import { BiMessageSquareEdit } from "react-icons/bi";
 import { TbEdit } from "react-icons/tb";
+import { EditIcon, ViewIcon } from "@chakra-ui/icons";
 
 // Convert date to YYYY-MM-DD format
 const formatDateValue = (date) => {
@@ -79,18 +81,26 @@ const EditExchangeRate = ({ id, setIsLoading, updateHistory }) => {
   };
 
   return (
-    <>
+    <> <Tooltip
+    rounded={"sm"}
+    fontSize={"xs"}
+    label="Edit"
+    bg="#fff"
+    color={"blue.500"}
+    placement="top"
+  >
       <Button
-        leftIcon={<TbEdit />}
         ref={btnRef}
         onClick={onOpen}
-        // colorScheme="forestGreen"
-        color={"green.500"}
+        _hover={{ color: "blue.500" }}
+        // transition={"0.5s all"}
+        color="blue.400"
         size={"xs"}
-        variant={"ghost"}
+        rounded={"sm"}
       >
-        Edit
+        <EditIcon />
       </Button>
+      </Tooltip>
       <Drawer
         isOpen={isOpen}
         placement="right"
diff --git a/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx b/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
index cdde2ba..94be602 100644
--- a/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
@@ -12,6 +12,7 @@ import {
   FormLabel,
   Input,
   Text,
+  Tooltip,
   useDisclosure,
 } from "@chakra-ui/react";
 import React, { useContext, useRef, useState, useEffect } from "react";
@@ -84,18 +85,26 @@ const ExchangeHistory = ({ id, setIsLoading, history }) => {
 
   return (
     <>
+    <Tooltip
+      rounded={"sm"}
+      fontSize={"xs"}
+      label="History"
+      bg="#fff"
+      color={"purple.500"}
+      placement="top"
+    >
       <Button
-        leftIcon={<MdHistory />}
         ref={btnRef}
         onClick={onOpen}
-        color={"green.500"}
+        _hover={{ color: "purple.500" }}
+        // transition={"0.5s all"}
+        color="purple.400"
+        rounded={"sm"}
         size={"xs"}
-        variant={"ghost"}
-        rounded={"md"}
-        ms={"auto"}
       >
-        History
+        <MdHistory />
       </Button>
+      </Tooltip>
       <Drawer
         isOpen={isOpen}
         placement="right"
diff --git a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
index 2ba0adc..114733f 100644
--- a/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeRate.jsx
@@ -14,6 +14,7 @@ import {
   Switch,
   Tag,
   Text,
+  Tooltip,
   useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -161,7 +162,7 @@ const ExchangeRate = () => {
       // <Button colorScheme="green" size={"xs"} variant={"ghost"}>
       //   Edit
       // </Button>
-      <>
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
         <EditExchangeRate
           setIsLoading={setIsLoading}
           id={item.id}
@@ -172,7 +173,7 @@ const ExchangeRate = () => {
           id={item.id}
           history={history}
         />
-      </>
+      </Box>
     ),
   }));
 
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index 173c54f..3e81f86 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -103,7 +103,7 @@ const InvestmentType = () => {
   });
 
   const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
-    id: item?.id,
+    // id: item?.id,
     "Sr.no": (
       <Text
         justifyContent={slideFromRight ? "right" : "left"}
@@ -184,7 +184,7 @@ const InvestmentType = () => {
     //   </span>
     // ),
     Action: (
-      <Box display={"flex"} justifyContent={"space-evenly"}>
+      <Box display={"flex"} justifyContent={"center"} gap={2} >
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 4f2a18c..f7af312 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -92,154 +92,153 @@ const Sponser = () => {
     return nameMatches;
   });
 
-  const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item) => ({
-    id: item?.id,
-    "Sponser name": (
-      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.sponserName}
-      </Text>
-    ),
-    Address: (
-      <Box w={350} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.sponserAddress}
-        </Text>
-      </Box>
-    ),
-    "Mobile no": (
-      <Box w={"auto"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.mobileNo}
-        </Text>
-      </Box>
-    ),
-    Status: (
-      <Switch
-        size={"sm"}
-        colorScheme="green"
-        onChange={() => handleUpdateStatus(item.id)}
-        isChecked={item.status}
-      />
-    ),
-
-    // item?.status ? (
-    //   <Badge bg={'transparent'} color={"#05c46b"}>
-    //     Passed
-    //   </Badge>
-    // ) : (
-    //   <Badge bg={'transparent'} color={"#f53b57"}>
-    //     Not passes
-    //   </Badge>
-    // ),
-
-    "Created At": (
-      <Box  className="d-flex justify-content-between align-items-center">
-        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
-          {formatDate(item.createdAt)}
-        </Text>
-      </Box>
-    ),
-    Action: (
-      <Box display={"flex"} justifyContent={"space-between"}>
-
-        <Tooltip
-          rounded={"sm"} 
-          fontSize={"xs"}
-          label="View"
-          bg="#fff"
-          color={"green.500"}
-          placement="top"
+  const [extractedArray, setExtractedArray] = useState(
+    filteredData?.map((item) => ({
+      id: item?.id,
+      "Sponser name": (
+        <Text
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
         >
-          <Button
-            _hover={{ color: "green.500" }}
-            // transition={"0.5s all"}
-            color="green.300"
+          {item.sponserName}
+        </Text>
+      ),
+      Address: (
+        <Box w={200} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item.sponserAddress}
+          </Text>
+        </Box>
+      ),
+      "Mobile no": (
+        <Box w={"auto"} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item.mobileNo}
+          </Text>
+        </Box>
+      ),
+      Status: (
+        <Box minW={24} isTruncated={true}>
+          <Switch
+            size={"sm"}
+            colorScheme="green"
+            onChange={() => handleUpdateStatus(item.id)}
+            isChecked={item.status}
+          />
+        </Box>
+      ),
+
+      // item?.status ? (
+      //   <Badge bg={'transparent'} color={"#05c46b"}>
+      //     Passed
+      //   </Badge>
+      // ) : (
+      //   <Badge bg={'transparent'} color={"#f53b57"}>
+      //     Not passes
+      //   </Badge>
+      // ),
+
+      "Created At": (
+        <Box className="d-flex justify-content-between align-items-center">
+          <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+            {formatDate(item.createdAt)}
+          </Text>
+        </Box>
+      ),
+      Action: (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Tooltip
             rounded={"sm"}
-            size={"xs"}
+            fontSize={"xs"}
+            label="View"
+            bg="#fff"
+            color={"green.500"}
+            placement="top"
           >
-            <ViewIcon />
-          </Button>
-        </Tooltip>
+            <Button
+              _hover={{ color: "green.500" }}
+              // transition={"0.5s all"}
+              color="green.300"
+              rounded={"sm"}
+              size={"xs"}
+            >
+              <ViewIcon />
+            </Button>
+          </Tooltip>
 
-
-        <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
-          label="Edit"
-          bg="#fff"
-          color={"blue.500"}
-          placement="top"
-        >
-          <Button
-            _hover={{ color: "blue.500" }}
-            // transition={"0.5s all"}
-            color="blue.400"
+          <Tooltip
             rounded={"sm"}
-            size={"xs"}
+            fontSize={"xs"}
+            label="Edit"
+            bg="#fff"
+            color={"blue.500"}
+            placement="top"
           >
-            <EditIcon />
-          </Button>
-        </Tooltip>
-   
+            <Button
+              _hover={{ color: "blue.500" }}
+              // transition={"0.5s all"}
+              color="blue.400"
+              rounded={"sm"}
+              size={"xs"}
+            >
+              <EditIcon />
+            </Button>
+          </Tooltip>
 
-        <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
-          label="Delete"
-          bg="#fff"
-          color={"red.500"}
-          placement="top"
-        >
-          <Button
-            onClick={() => {
-              setActionId(item?.id);
-              setDeleteAlert(true);
-            }}
-            _hover={{ color: "red.500" }}
-            // transition={"0.5s all"}
-            color="red.300"
+          <Tooltip
             rounded={"sm"}
-            size={"xs"}
+            fontSize={"xs"}
+            label="Delete"
+            bg="#fff"
+            color={"red.500"}
+            placement="top"
           >
-            <DeleteIcon />
-          </Button>
-        </Tooltip>
-
-      </Box>
-    ),
-
-    // "Created At":
-    //   mouseEntered && mouseEnteredId === item?.id ? (
-    //     // false ? (
-    //     <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
-    //     <Box as="span" p={1} className="link" rounded={'sm'} >
-    //       <EditIcon fontSize={'md'} />
-    //     </Box>
-    //       <Box as="span" p={1} className="link" rounded={'sm'} >
-    //         <ViewIcon fontSize={'md'} />
-    //       </Box>
-    //       <Box as="span" p={1} className="link" rounded={'sm'} >
-    //         <DeleteIcon fontSize={'md'} />
-    //       </Box>
-    //     </Box>
-    //   ) : (
-    //     <Box
-    //       as="span" display={"flex"} justifyContent={"start"}
-    //       p={1}
-    //     >
-    //       <Text  as={"span"} color={"gray.600"} fontWeight={"500"}>
-    //         {formatDate(item.createdAt)}
-    //       </Text>
-    //     </Box>
-    //   ),
-  })))
+            <Button
+              onClick={() => {
+                setActionId(item?.id);
+                setDeleteAlert(true);
+              }}
+              _hover={{ color: "red.500" }}
+              // transition={"0.5s all"}
+              color="red.300"
+              rounded={"sm"}
+              size={"xs"}
+            >
+              <DeleteIcon />
+            </Button>
+          </Tooltip>
+        </Box>
+      ),
 
+      // "Created At":
+      //   mouseEntered && mouseEnteredId === item?.id ? (
+      //     // false ? (
+      //     <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
+      //     <Box as="span" p={1} className="link" rounded={'sm'} >
+      //       <EditIcon fontSize={'md'} />
+      //     </Box>
+      //       <Box as="span" p={1} className="link" rounded={'sm'} >
+      //         <ViewIcon fontSize={'md'} />
+      //       </Box>
+      //       <Box as="span" p={1} className="link" rounded={'sm'} >
+      //         <DeleteIcon fontSize={'md'} />
+      //       </Box>
+      //     </Box>
+      //   ) : (
+      //     <Box
+      //       as="span" display={"flex"} justifyContent={"start"}
+      //       p={1}
+      //     >
+      //       <Text  as={"span"} color={"gray.600"} fontWeight={"500"}>
+      //         {formatDate(item.createdAt)}
+      //       </Text>
+      //     </Box>
+      //   ),
+    }))
+  );
 
   const handleDelete = () => {
     const updatedSponsors = sponser.filter(
@@ -253,7 +252,6 @@ const Sponser = () => {
     }, 100);
     setIsLoading(true);
   };
-  
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
diff --git a/src/assets/EmptySearchList.png b/src/assets/EmptySearchList.png
new file mode 100644
index 0000000..2d43ea0
Binary files /dev/null and b/src/assets/EmptySearchList.png differ