diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 2649016..aac69de 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -1731,7 +1731,7 @@ const GlobalStateProvider = ({ children }) => {
 
   // ==============[ prod state ]===============================
   const [IODetails, setIODetails] = useState(null);
-  const [ IOStatus, setIoStatus ] = useState(null)
+  const [ isIOloading, setIOloading ] = useState(false)
 
   return (
     <GlobalStateContext.Provider
@@ -1806,10 +1806,8 @@ const GlobalStateProvider = ({ children }) => {
         setIOArtifactsTwo,
         
 
-
-
-        IOStatus, 
-        setIoStatus
+        isIOloading, 
+        setIOloading 
       }}
     >
       {children}
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index b657b98..2995343 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -391,7 +391,7 @@ const DashboardLayout = ({ isOnline }) => {
           // onMouseOver={() => setIsDrawerOpen(true)}
           // onMouseLeave={() => setIsDrawerOpen(false)}
           style={{
-            width: isDrawerOpen || openDrawerClick ? 255 : 74,
+            width: isDrawerOpen || openDrawerClick ? 230 : 74,
             transition: "width 0.3s ease-in-out", // Smooth transition for width change
             // overflow: "hidden",
             backgroundColor: "#0041180A",
@@ -631,7 +631,7 @@ const DashboardLayout = ({ isOnline }) => {
       <main
         className={`h-100   ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
         style={{
-          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 255 : 74}px)`,
+          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
           transition: "width 0.3s ease-in-out",
 
         }}
diff --git a/src/Pages/IO_Management/CreateIO/AddIONav.jsx b/src/Pages/IO_Management/CreateIO/AddIONav.jsx
new file mode 100644
index 0000000..ad7c533
--- /dev/null
+++ b/src/Pages/IO_Management/CreateIO/AddIONav.jsx
@@ -0,0 +1,234 @@
+import {
+    Box,
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    Input,
+    Select,
+    Stack,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import * as yup from "yup";
+  import React, { useState, useEffect, useContext } from "react";
+  import { useForm, Controller } from "react-hook-form";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+  import { v4 as uuidv4 } from "uuid";
+  import { useCreateIoCashMutation, useCreateIoNavMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+  import ToastBox from "../../../Components/ToastBox";
+  import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+  import CurrencyInput from "../../../Components/CurrencyInput";
+import { formatDatee } from "../../../Components/FormField";
+  
+  const ioNav = yup.object().shape({
+    transactionDate: yup.string().required("Artifact name is required"),
+    transactionAmount: yup.number().required("Artifact name is required"),
+    comments: yup.string().notRequired(),
+  });
+  
+  const AddIONav = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+    const params = useParams()
+    const id = params?.id
+    const [file, setFile] = useState("");
+    const [fileName, setFileName] = useState("");
+    const [isLoading, setIsLoading] = useState(false)
+    const [alert, setAlert] = useState(false);
+    const toast = useToast();
+  
+  
+  
+    // ======================[ Cotext Api ]
+    const { IODetails } = useContext(GlobalStateContext);
+    const found = data?.find((item) => item?.id === actionId);
+  
+  
+    const [createIoNav] = useCreateIoNavMutation()
+    // const {
+    //   data
+    // } = useGetArtifactsQuery(id)
+  
+    const {
+      control,
+      handleSubmit,
+      watch,
+      reset,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(ioNav),
+    });
+  
+  
+    const [createIoCash] = useCreateIoCashMutation()
+  
+  
+    const onSubmit = async (data) => {
+  
+      setIsLoading(true)
+  
+      try {
+  
+        const res = await createIoNav({ data, id })
+        if (res?.data?.statusCode === 201) {
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          handleClose()
+        }else if(res?.error?.status === 400){
+          setIsLoading(false);
+          toast({
+            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+          });
+        }
+  
+  
+      } catch (error) {
+        console.log(error);
+  
+      }
+  
+    };
+  
+  
+  
+    const handleConfirm = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleSave = () => {
+      handleSubmit(onSubmit)();
+    };
+  
+    const handleClose = () => {
+      setAlert(false)
+      onClose()
+      reset({
+        transactionDate:"",
+        transactionAmount:"",
+        comments:""
+      })
+    }
+
+
+
+
+const today = formatDatee(new Date(), 'yyyy-MM-dd'); 
+
+
+  
+    return (
+      <>
+        <Drawer
+          size={"md"}
+          isOpen={isOpen}
+          placement="right"
+          initialFocusRef={firstField}
+          onClose={handleClose}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
+  
+            <DrawerBody>
+              <Stack spacing={4}>
+                <FormControl isInvalid={errors.transactionDate} isRequired>
+                  <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                  <Controller
+                    name="transactionDate"
+                    control={control}
+                    render={({ field }) => (
+                      <Input {...field} 
+                      max={today} // Set max attribute to today’s date
+                       fontSize={"sm"} type="date" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionDate?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+                <FormControl isInvalid={errors.transactionAmount} isRequired>
+                  <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                  <Controller
+                    name="transactionAmount"
+                    control={control}
+                    render={({ field }) => (
+                      <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.transactionAmount?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+  
+  
+                <FormControl isInvalid={errors.comments}>
+                  <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                  <Controller
+                    name="comments"
+                    control={control}
+                    render={({ field }) => (
+                      <Textarea {...field}  fontSize={"sm"} type="text" size={"sm"} />
+                    )}
+                  />
+                  <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                    {errors.comments?.message}
+                  </FormErrorMessage>
+                </FormControl>
+  
+              </Stack>
+            </DrawerBody>
+  
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+                mr={3}
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+  
+              <Button
+                colorScheme={"forestGreen"}
+                rounded={"sm"}
+                size={"sm"}
+  
+                onClick={() => setAlert(true)}
+              >
+                Save
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+  
+  
+        <CustomAlertDialog
+          isOpen={alert}
+          onClose={() => setAlert(false)}
+          alertHandler={handleSave}
+          message={"Are you sure you want to add NAV details?"}
+          isLoading={isLoading}
+        />
+      </>
+    );
+  };
+  
+  export default AddIONav;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/CreateIO/CreateIO.jsx b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
index 039e3a9..c7e223b 100644
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -58,22 +58,22 @@ const CreateIO = () => {
     {
       label: "Investors",
       Content: Investors,
-      isDisabled: id ? false : false,
+      isDisabled: id ? false : true,
     },
     {
       label: "IO Cash Detail",
       Content: IOCashDetails,
-      isDisabled: id ? false : false,
+      isDisabled: id ? false : true,
     },
     {
       label: "IO NAV Details",
       Content: IONAVDetails,
-      isDisabled: id ? false : false,
+      isDisabled: id ? false : true,
     },
     {
       label: "Distribution to Investors",
       Content: IONAVDetails,
-      isDisabled: id ? false : false,
+      isDisabled: id ? false : true,
     },
   ];
 
@@ -98,7 +98,7 @@ const CreateIO = () => {
         >
           <ArrowBackIcon cursor={"pointer"} /> Back
         </span> */}
-        <ViewIOdataHeader data={data?.data} />
+        <ViewIOdataHeader isLoading={isLoading} data={data?.data} />
       </Box>}
       <Tabs
         index={activeIndex}
diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx
index d84a811..2c0163e 100644
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -123,7 +123,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
   const id = params?.id;
 
   // ======================[ Cotext Api ]
-  const { investmentType, sponser, setIOStatus, setIODetails } =
+  const { investmentType, sponser, setIOStatus, setIODetails, setIOloading } =
     useContext(GlobalStateContext);
 
   // ======================[ RTK Querry Api ]
@@ -134,9 +134,6 @@ const IODetails = ({ enableNextTab, index, data }) => {
     error: IObyIDerror,
   } = useGetIOByIdQuery(id, { skip: !id });
 
-
-
-  
   const [creatIO] = useCreateIOMutation();
   const [updateIO] = useUpdateIOMutation();
 
@@ -200,6 +197,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
   });
 
   useEffect(() => {
+    setIOloading(IObyIDisLoading)
     setIODetails({
       ...IObyID?.data,
     });
@@ -222,6 +220,9 @@ const IODetails = ({ enableNextTab, index, data }) => {
         expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
       });
     }
+
+
+
   }, [id, IObyID]);
 
 
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
index febb978..6a9c277 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
@@ -1,14 +1,19 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import GlobalStateContext from '../../../Contexts/GlobalStateContext';
-import { Box, HStack, Input,Text, Table, Tbody, Th, Tr } from '@chakra-ui/react';
+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 DataTable from '../../../Components/DataTable/DataTable';
+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';
 
 const IONAVDetails = () => {
-  const { navDetails, setNavDetails, slideFromRight } =
+  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);
@@ -16,6 +21,10 @@ const IONAVDetails = () => {
     const [mouseEntered, setMouseEntered] = useState(false);
     const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+
+    console.log(IODetails?.ioNAVHistory);
+    
+
     
   useEffect(() => {
     // Simulate loading
@@ -29,50 +38,74 @@ const IONAVDetails = () => {
 
     // Table setup
     const tableHeadRow = [
-      "Sr.No",
-      "As On Date",
-      "IO NAV Value",
+      // "Sr.No",
+      "Valuation Date",
+      "NAV",
+      "Last NAV update",
+      "Investment Closed",
       "Comments",
       "Update by ",
-      "Update On",
+      // "Update On",
     ];
 
       // Table filter
-  const filteredData = navDetails?.filter((item) => {
-    const name = item.updateBy;
+  const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
+    const name = item.transactionType;
     const searchLower = searchTerm.toLowerCase();
     const nameMatches = name.toLowerCase().includes(searchLower);
     return nameMatches;
   });
 
-  const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
+  const  extractedArray=filteredData?.map((item, index) => ({
     id: item?.id,
     "Sr.No": index +1,
-    "As On Date": (
+    "Valuation Date": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {item.date}
+        {formatDatee(item.transactionDate)}
       </Text>
     ),
-    "IO NAV Value": (
+    "NAV": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {`$${item.IONavValue}`}
+        {`$ ${item.transactionAmount}`}
+      </Text>
+    ),
+    "Last NAV update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `$ ${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.initialNAVvalue&&`$ ${item.initialNAVvalue}`}
       </Text>
     ),
     "Comments": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -83,18 +116,20 @@ const IONAVDetails = () => {
     ),
     "Update by ": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent ={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
+        gap={2}
         className="d-flex align-items-center web-text-small"
       >
-        {item.updateBy}
+        
+    <Avatar size='sm' name={"faisal"} src={null} />Faisal
       </Text>
     ),
     "Update On": (
       <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={"center"}
         as={"span"}
         color={"teal.900"}
         fontWeight={"500"}
@@ -103,7 +138,7 @@ const IONAVDetails = () => {
         {item.updateOn}
       </Text>
     ),
-  })));
+  }));
 
 
 
@@ -145,15 +180,18 @@ const IONAVDetails = () => {
         {/* <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 NAV</Button>:null}
+
       </HStack>
     </Box>
 
-    <DataTable
+    <NormalTable
       centered={true}
       emptyMessage={`We don't have any Sponers`}
       tableHeadRow={tableHeadRow}
       data={extractedArray} 
-      setData={setExtractedArray}
       isLoading={isLoading}
       viewActionId={actionId}
       setViewActionId={setActionId}
@@ -169,6 +207,15 @@ const IONAVDetails = () => {
       alertHandler={handleDelete}
       isLoading={isLoading}
     />
+
+
+
+<AddIONav 
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField} />
+
+
   </Box>
   )
 }
diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx
index c8a2ced..18a530b 100644
--- a/src/Pages/IO_Management/IOArtifactsAdd.jsx
+++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx
@@ -116,7 +116,10 @@ const IOArtifactsAdd = ({
           toast({
             render: () => <ToastBox message={res?.data?.message} />,
           });
-          reset();
+          reset({
+            artifactName: "",
+            artifactPathName: "",
+          });
           setFile(null);
           setIsLoading(false);
           setAlert(false);
diff --git a/src/Pages/IO_Management/KeyMeritsAdd.jsx b/src/Pages/IO_Management/KeyMeritsAdd.jsx
index dab9a79..e3102e0 100644
--- a/src/Pages/IO_Management/KeyMeritsAdd.jsx
+++ b/src/Pages/IO_Management/KeyMeritsAdd.jsx
@@ -305,7 +305,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
                           </Text>
                         </Box>
                       </MenuButton>
-                      <MenuList minW="415px" size={"sm"} fontWeight={500}>
+                      <MenuList overflow={'scroll'} minW="415px" size={"sm"} fontWeight={500}>
                         {icons?.map(({ iconName, id, iconFilePath }) => (
                           <MenuItem
                             key={id}
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
index ab4b400..95643e2 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -31,7 +31,7 @@ import { formatDatee } from "../../../../Components/FormField";
 
 const ioNav = yup.object().shape({
   transactionDate: yup.string().required("Artifact name is required"),
-  ioTransType_xid: yup.number().required("Artifact name is required"),
+  // ioTransType_xid: yup.number().required("Artifact name is required"),
   transactionAmount: yup.number().required("Artifact name is required"),
   comments: yup.string().notRequired(),
 });
@@ -116,7 +116,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
             </FormControl>
 
 
-            <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+            {/* <FormControl isInvalid={errors.ioTransType_xid} isRequired>
               <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
               <Controller
                 name="ioTransType_xid"
@@ -139,7 +139,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
               <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                 {errors.ioTransType_xid?.message}
               </FormErrorMessage>
-            </FormControl>
+            </FormControl> */}
 
 
 
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
index b992fae..8248b0d 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -82,18 +82,30 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
               textAlign={"left"}
             >
               <Badge 
+          rounded={"full"}
+          pt={1.5}
+          pb={1.5}
+          ps={4}
+          pe={4}
+          mt={1.5}
+          mb={1.5}
           textTransform={"none"}
-          variant={"subtle"}
           colorScheme={
             selectedItem === "Draft"
-              ? "blue"
+              ? "gray"
               : selectedItem === "Processing"
               ? "yellow"
               : selectedItem === "Open"
-              ? "forestGreen"
+              ? "blue"
               : selectedItem === "Closed"
-              ? "red":null
-          } py={"3px"} px={"8px"}>
+              ? "green"
+              : selectedItem === "Exited"
+              ? "red"
+              : selectedItem === "Canclled"
+              ? "orange"
+              : "purple"
+          } 
+          py={"3px"} px={"8px"}>
                     {selectedItem ? selectedItem: "No action"}
                   </Badge>
             </MenuButton>
@@ -106,17 +118,32 @@ const UpdateIOStatus = ({ isOpen, onClose , status}) => {
                   onClick={() => handleMenuItemClick(statusAdmin, id)}
                 >
                   <Badge 
+          rounded={"full"}
+          pt={1.5}
+          pb={1.5}
+          ps={4}
+          pe={4}
+          mt={1.5}
+          mb={1.5}
           textTransform={"none"}
-          variant={"subtle"}
+          
+          // variant={"solid"}
           colorScheme={
             statusAdmin === "Draft"
-              ? "blue"
+              ? "gray"
               : statusAdmin === "Processing"
               ? "yellow"
               : statusAdmin === "Open"
-              ? "forestGreen"
-              : "red"
-          } py={"1px"} px={"8px"}>
+              ? "blue"
+              : statusAdmin === "Closed"
+              ? "green"
+              : statusAdmin === "Exited"
+              ? "red"
+              : statusAdmin === "Canclled"
+              ? "orange"
+              : "purple"
+          }
+          py={"1px"} px={"8px"}>
                     {statusAdmin}
                   </Badge>
                 </MenuItem>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
index c71ceb7..bd4b0e3 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOTable.jsx
@@ -144,21 +144,30 @@ const ViewIOTable = () => {
     "IO Status": (
       <Box w={"auto"} isTruncated={true}>
         <Badge
-          rounded={"sm"}
-          pt={0.5}
-          pb={0.5}
+          rounded={"full"}
+          pt={1}
+          pb={1}
           ps={4}
           pe={4}
-          // textTransform={"none"}
-          variant={"subtle"}
+          mt={1.5}
+          mb={1.5}
+          textTransform={"none"}
+          
+          // variant={"solid"}
           colorScheme={
             item?.ioStatus?.statusAdmin === "Draft"
-              ? "blue"
+              ? "gray"
               : item?.ioStatus?.statusAdmin === "Processing"
-              ? "orange"
+              ? "yellow"
               : item?.ioStatus?.statusAdmin === "Open"
+              ? "blue"
+              : item?.ioStatus?.statusAdmin === "Closed"
               ? "green"
-              : "red"
+              : item?.ioStatus?.statusAdmin === "Exited"
+              ? "red"
+              : item?.ioStatus?.statusAdmin === "Canclled"
+              ? "orange"
+              : "purple"
           }
           
   boxShadow={'0 4px 6px rgba(0, 0, 0, 0.1)'} // Adjusted shadow
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
index 607eb88..cd3a111 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -40,12 +40,12 @@ import Cancle from "./HeaderModal/Cancle";
 import { AddIcon } from "@chakra-ui/icons";
 import { GrGallery } from "react-icons/gr";
 
-const ViewIOdataHeader = ({data}) => {
+const ViewIOdataHeader = ({data, isLoading}) => {
   const params = useParams();
   const id = params?.id;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const btnRef = useRef();
-  const { IODetails } = useContext(GlobalStateContext);
+  const { IODetails, isIOloading } = useContext(GlobalStateContext);
   
   const {
     isOpen: isInvestmentOpen,
@@ -122,11 +122,11 @@ const ViewIOdataHeader = ({data}) => {
       title:"Distribution To Investors",
       onClickFunction:onDistInvestorOpen
     },
-    // {
-    //   id:5,
-    //   title:"Update IO NAV",
-    //   onClickFunction:onUpdateNavOpen
-    // },
+    {
+      id:5,
+      title:"Update IO NAV",
+      onClickFunction:onUpdateNavOpen
+    },
     {
       id:8,
       title:"Exit",
@@ -155,29 +155,51 @@ console.log(filteredMenu);
 
 
   
+console.log(isLoading);
 
 
 
 
   return (
+    isLoading ?"": 
     <Box
       display={"flex"}
       alignItems={"center"}
       justifyContent={"start"}
       gap={8}
-      bg={"#caf5d8"}
+      bg={
+        IODetails?.ioStatus?.statusAdmin === "Draft"
+          ? "#EDF2F7"
+          : IODetails?.ioStatus?.statusAdmin === "Processing"
+          ? "#FEFBBF"
+          : IODetails?.ioStatus?.statusAdmin === "Open"
+          ? "#BEE2F8"
+          : IODetails?.ioStatus?.statusAdmin === "Closed"
+          ? "#C6F6D5"
+          : IODetails?.ioStatus?.statusAdmin === "Exited"
+          ? "red.500"
+          : IODetails?.ioStatus?.statusAdmin === "Canclled"
+          ? "orange.500"
+          : IODetails?.ioStatus?.statusAdmin === "DeActivate"
+          ? "#E9D8FD"
+          : null
+      }
       rounded={"md"}
       // bgGradient='linear(to-r, #caf5d8, #f5e8ca)'
       // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
       // bgGradient='linear(to-r, #caf5d8, #d4a5a5)'
       // bgGradient='linear(to-r, #caf5d8, #b3e5fc)'
       // bgGradient='linear(to-r, #ffd54f, #caf5d8)'
-      bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
+      // bgGradient='linear(to-r, #caf5d8, #a8e6cf)'
       boxShadow={"md"}
       paddingRight={"10px"}
       borderRadius={"10px"}
       position={"relative"}
     >
+
+
+
+      
       <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 ? (
@@ -234,23 +256,30 @@ console.log(filteredMenu);
           IO Status
         </Text>
         <Badge
-          rounded={"sm"}
-          pt={0.5}
-          pb={0.5}
+          rounded={"full"}
+          pt={1}
+          pb={1}
           ps={4}
           pe={4}
-          // textTransform={"none"}
-          variant={"subtle"}
+          mt={1.5}
+          mb={1.5}
+          textTransform={"none"}
+          
+          // variant={"solid"}
           colorScheme={
             IODetails?.ioStatus?.statusAdmin === "Draft"
-              ? "blue"
+              ? "gray"
               : IODetails?.ioStatus?.statusAdmin === "Processing"
-              ? "orange"
+              ? "yellow"
               : IODetails?.ioStatus?.statusAdmin === "Open"
-              ? "green"
+              ? "blue"
               : IODetails?.ioStatus?.statusAdmin === "Closed"
+              ? "green"
+              : IODetails?.ioStatus?.statusAdmin === "Exited"
               ? "red"
-              : "gray"
+              : IODetails?.ioStatus?.statusAdmin === "Canclled"
+              ? "orange"
+              : "purple"
           }
         >
           {IODetails?.ioStatus?.statusAdmin