diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx
index ee67c64..2edef3d 100644
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -5,28 +5,29 @@ import { OPACITY_ON_LOAD } from "../Layout/animations";
 import { ArrowBackIcon } from "@chakra-ui/icons";
 
 const FormInputMain = ({
+  register,
   groupedFields,
   control,
   errors,
   onSubmit,
   children,
-  onCancle, 
+  onCancle,
   submitTitle,
   p,
-  w
+  w,
 }) => {
   return (
     <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={4}>
+          <Heading as="h6" size="xs" mx={5} fontWeight={"500"}>
             {/* <ArrowBackIcon fontSize={'lg'} />  */}
             {section}
           </Heading>
           <Box display={"flex"} gap={0}>
             <Box
               width={"100%"}
-              p={p?p:5}
+              p={p ? p : 5}
               display={"flex"}
               flexWrap={"wrap"}
               gap={4}
@@ -49,7 +50,7 @@ const FormInputMain = ({
                     options,
                     helperText,
                     multiple,
-                    width
+                    width,
                   },
                   key
                 ) => (
@@ -83,22 +84,24 @@ const FormInputMain = ({
       ))}
 
       {children}
-      
-      <Box display={'flex'} justifyContent={'end'} mb={5}>
-        <Box display={"flex"} justifyContent={"end"} p={2} w={'49%'} gap={4}>
-          {onCancle && <Button
-            size={"sm"}
-            width={w?w:"44.5%"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme='gray'
-            onClick={onCancle}
-          >
-            Cancel
-          </Button>}
+
+      <Box display={"flex"} justifyContent={"end"} mb={5}>
+        <Box display={"flex"} justifyContent={"end"} p={2} w={"49%"} gap={4}>
+          {onCancle && (
+            <Button
+              size={"sm"}
+              width={w ? w : "44.5%"}
+              rounded={"sm"}
+              type="submit"
+              colorScheme="gray"
+              onClick={onCancle}
+            >
+              Cancel
+            </Button>
+          )}
           <Button
             size={"sm"}
-            width={w?w:"44.5%"}
+            width={w ? w : "44.5%"}
             rounded={"sm"}
             type="submit"
             colorScheme="green"
diff --git a/src/Pages/IO_Management/EditIO/EditIO.jsx b/src/Pages/IO_Management/EditIO/EditIO.jsx
new file mode 100644
index 0000000..8057e93
--- /dev/null
+++ b/src/Pages/IO_Management/EditIO/EditIO.jsx
@@ -0,0 +1,283 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+import FormInputMain from "../../../Components/FormInputMain";
+import FormField from "./EditIOForm";
+
+const EditIO = ({ isOpen, onClose }) => {
+    
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      ioName: "",
+      ioNameArabic: "",
+      description: "",
+      descriptionArabic: "",
+      typeName: "",
+      typeNameArabic: "",
+      sponserName: "",
+      sponserNameArabic: "",
+      goalAmount: 0,
+      minInvestment: 0,
+      maxInvestment: 0,
+      holdingPeriod: 0,
+      expectedReturn: 0,
+      closingDate: "",
+      ioStatus: "",
+    },
+  });
+
+  const formFields = [
+    {
+      label: "IO Name (English)",
+      placeHolder: " ",
+      name: "ioName",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "IO Name (Arabic)",
+      placeHolder: " ",
+      name: "ioNameArabic",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "discription",
+      type: "textarea",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "discriptionArabic",
+      type: "textarea",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Investment Type (English)",
+      placeHolder: " ",
+      name: "typeName",
+      type: "select",
+
+      section: " ",
+      width: "49%",
+      options: [
+        {
+          label: "option 1",
+          value: "option 1",
+        },
+        {
+          label: "option 2",
+          value: "option 2",
+        },
+        {
+          label: "option 3",
+          value: "option 3",
+        },
+        {
+          label: "option 4",
+          value: "option 4",
+        },
+      ],
+    },
+    {
+      label: "Investment Type (Arabic)",
+      placeHolder: " ",
+      name: "typeNameArabic",
+      type: "select",
+
+      section: " ",
+      width: "49%",
+      options: [
+        {
+          label: "option 1",
+          value: "option 1",
+        },
+        {
+          label: "option 2",
+          value: "option 2",
+        },
+        {
+          label: "option 3",
+          value: "option 3",
+        },
+        {
+          label: "option 4",
+          value: "option 4",
+        },
+      ],
+    },
+    {
+      label: "Sponser Name (English)",
+      placeHolder: " ",
+      name: "sponserName",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Sponser Name (Arabic)",
+      placeHolder: " ",
+      name: "sponserNameArabic",
+      type: "text",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Goal Amount (English)",
+      placeHolder: " ",
+      name: "goalAmount",
+      type: "Number",
+
+      section: " ",
+      width: "49%",
+    },
+    {
+      label: "Minimum Investment Amount (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Maximum Investment Amount (English)",
+      placeHolder: " ",
+      name: "maxInvestment",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriod",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Expected Return Estimated (English)",
+      placeHolder: " ",
+      name: "expectedReturn",
+      type: "number",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "Closing Date (English)",
+      placeHolder: " ",
+      name: "closingDate",
+      type: "date",
+
+      section: " ",
+      width: "32.3%",
+    },
+    {
+      label: "IO status",
+      placeHolder: " ",
+      name: "ioStatus",
+      type: "select",
+
+      section: " ",
+      width: "32.3%",
+      options: [
+        {
+          label: "option 1",
+          value: "option 1",
+        },
+        {
+          label: "option 2",
+          value: "option 2",
+        },
+        {
+          label: "option 3",
+          value: "option 3",
+        },
+        {
+          label: "option 4",
+          value: "option 4",
+        },
+      ],
+    },
+  ];
+
+  const onSubmit = (data) => {
+    console.log(data);
+    // Handle form submission
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent maxW={"1280px"}>
+        <ModalHeader>Update IO Status</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody paddingBottom={"20px"}>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Box display={"flex"} flexWrap={"wrap"} gap={2}>
+              {formFields.map((field, index) => (
+                <FormField
+                  key={index}
+                  field={field}
+                  register={register}
+                  errors={errors}
+                />
+              ))}
+            </Box>
+            <Box display={"flex"} justifyContent={"end"} mt={4}>
+              <Button
+                bg={"hsla(139, 100%, 14%, 1)"}
+                mr={3}
+                type="submit"
+                color={"#fff"}
+                _hover={{
+                  bg: "hsl(139deg 98.99% 26.59%)",
+                }}
+              >
+                Save
+              </Button>
+              <Button onClick={onClose}>Close</Button>
+            </Box>
+          </form>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default EditIO;
diff --git a/src/Pages/IO_Management/EditIO/EditIOForm.jsx b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
new file mode 100644
index 0000000..52e0bfd
--- /dev/null
+++ b/src/Pages/IO_Management/EditIO/EditIOForm.jsx
@@ -0,0 +1,68 @@
+import React, { useContext } from "react";
+import {
+  Box,
+  Input,
+  Select,
+  Textarea,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+} from "@chakra-ui/react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useParams } from "react-router-dom";
+
+const FormField = ({ field, register, errors }) => {
+    const { label, name, type, placeHolder, options, width } = field;   
+
+
+  return (
+    <Box width={width}>
+      <FormControl isInvalid={errors[name]}>
+        <FormLabel>{label}</FormLabel>
+        {type === "text" && (
+          <Input
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "textarea" && (
+          <Textarea
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "number" && (
+          <Input
+            type="number"
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "date" && (
+          <Input
+            type="date"
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          />
+        )}
+        {type === "select" && (
+          <Select
+            placeholder={placeHolder}
+            {...register(name, { required: true })}
+          >
+            {options.map((option, index) => (
+              <option key={index} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </Select>
+        )}
+        <FormErrorMessage>
+          {errors[name] && `${label} is required`}
+        </FormErrorMessage>
+      </FormControl>
+    </Box>
+  );
+};
+
+export default FormField;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
new file mode 100644
index 0000000..f151fb5
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const AmountInvested = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Amount Invested</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AmountInvested;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
new file mode 100644
index 0000000..badc2dc
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const DistributionInvestor = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Distribution To investors</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DistributionInvestor;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
new file mode 100644
index 0000000..48e6b2b
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionSponsor.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const DistributionSponsor = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Distribution from Sponsors</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DistributionSponsor;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
new file mode 100644
index 0000000..c904b6b
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/FeesExpenses.jsx
@@ -0,0 +1,69 @@
+import {
+  Box,
+  Button,
+  Input,
+  InputGroup,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const FeesExpenses = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Fees & Expenses</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button  mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default FeesExpenses;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
new file mode 100644
index 0000000..ac77924
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIONav.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const UpdateIONav = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Update iO NAV</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default UpdateIONav;
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
new file mode 100644
index 0000000..1db6ecb
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+
+const UpdateIOStatus = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Update IO Status</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Date
+            </Text>
+            <Input
+              placeholder="Select Date"
+              size="md"
+              type="date"
+              fontSize={"sm"}
+            />
+          </Box>
+
+          <Box mb={"15px"} fontSize={"sm"} fontWeight={"bold"}>
+            <Text as={"label"}>Amount</Text>
+            <Input placeholder="Enter amount" fontSize={"sm"} />
+          </Box>
+
+          <Box mb={"15px"}>
+            <Text as={"label"} fontSize={"sm"} fontWeight={"bold"}>
+              Comments
+            </Text>
+            <Textarea placeholder="Write Comments" fontSize={"sm"} />
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            bg={"hsla(139, 100%, 14%, 1)"}
+            mr={3}
+            color={"#fff"}
+            _hover={{
+              bg: "hsl(139deg 98.99% 26.59%)",
+            }}
+          >
+            Save
+          </Button>
+          <Button mr={3} onClick={onClose}>
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default UpdateIOStatus;
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index a9fe68e..3e8db8d 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -8,6 +8,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useNavigate, useParams } from "react-router-dom";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
@@ -26,9 +27,10 @@ import ViewInvestors from "./ViewInvestors";
 import ViewIOcash from "./ViewIOcash";
 import ViewIOnav from "./ViewIOnav";
 import ViewDistribution from "./ViewDistribution";
+import EditIO from "../EditIO/EditIO";
 
 const ViewIOdata = () => {
-  const [isEditing, setIsEditing] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
 
   const tabs = [
@@ -70,7 +72,19 @@ const ViewIOdata = () => {
             </Tab>
           ))}
         </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 c476aaf..0af6990 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx
@@ -1,14 +1,93 @@
-import { Box, Image, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Divider,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Portal,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
+import { HiDotsVertical } from "react-icons/hi";
+import { Link } 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";
 
 const ViewIOdataHeader = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef();
+
+  const {
+    isOpen: isInvestmentOpen,
+    onOpen: onInvestmentOpen,
+    onClose: onInvestmentClose,
+  } = useDisclosure();
+  const {
+    isOpen: isFeesOpen,
+    onOpen: onFeesOpen,
+    onClose: onFeesClose,
+  } = useDisclosure();
+  const {
+    isOpen: isDistSponsorOpen,
+    onOpen: onDistSponsorOpen,
+    onClose: onDistSponsorClose,
+  } = useDisclosure();
+  const {
+    isOpen: isDistInvestorOpen,
+    onOpen: onDistInvestorOpen,
+    onClose: onDistInvestorClose,
+  } = useDisclosure();
+  const {
+    isOpen: isUpdateNavOpen,
+    onOpen: onUpdateNavOpen,
+    onClose: onUpdateNavClose,
+  } = useDisclosure();
+  const {
+    isOpen: isUpdateStatusOpen,
+    onOpen: onUpdateStatusOpen,
+    onClose: onUpdateStatusClose,
+  } = useDisclosure();
+
+  const bg = {
+    bg: "#fff",
+  };
+
+  const hover = {
+    textDecoration: "underline",
+    background: "#fff",
+  };
   return (
     <Box
       display={"flex"}
       alignItems={"center"}
       justifyContent={"space-between"}
       bg={"#caf5d8"}
-      paddingRight={"25px"}
+      paddingRight={"10px"}
       borderRadius={"10px"}
     >
       <Box>
@@ -34,6 +113,123 @@ const ViewIOdataHeader = () => {
         <Text>IO NAV</Text>
         <Text fontWeight={"500"}>$1,140,500</Text>
       </Box>
+
+      <Box display={"flex"} alignItems={"start"} height={"95px"}>
+        <Menu>
+          <MenuButton
+            className="link p-1 rounded-1"
+            bg={"#fff"}
+            _hover={{ backgroundColor: "#fff !important" }}
+            onClick={onOpen}
+            ref={btnRef}
+          >
+            <HiDotsVertical className="rubix-text-dark fs-6" />
+          </MenuButton>
+        </Menu>
+
+        {/* Drawer */}
+        <Drawer
+          isOpen={isOpen}
+          placement="right"
+          onClose={onClose}
+          finalFocusRef={btnRef}
+        >
+          <DrawerOverlay />
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader>Transaction</DrawerHeader>
+
+            <DrawerBody>
+              <Box
+                display={"grid"}
+                alignContent={"left"}
+                justifyItems={"start"}
+              >
+                <Button
+                  onClick={onInvestmentOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
+                  Amount Invested
+                </Button>
+                <Divider />
+                <Button
+                  onClick={onFeesOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
+                  Fees & Expenses
+                </Button>
+                <Divider />
+                <Button
+                  onClick={onDistSponsorOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
+                  Distribution from Sponsors
+                </Button>
+                <Divider />
+                <Button
+                  onClick={onDistInvestorOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
+                  Distribution To Investors
+                </Button>
+                <Divider />
+                <Button
+                  onClick={onUpdateNavOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
+                  Update IO NAV
+                </Button>
+                <Divider />
+                <Button
+                  onClick={onUpdateStatusOpen}
+                  bg={bg}
+                  _hover={hover}
+                  paddingInline={"0px"}
+                >
+                  Update IO Status
+                </Button>
+                <Divider />
+                {/* <Button variant="ghost" onClick={onClose} bg={bg}>
+                  Cancel
+                </Button> */}
+              </Box>
+            </DrawerBody>
+
+            <DrawerFooter>
+              <Button variant="outline" mr={3} onClick={onClose}>
+                Cancel
+              </Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+
+        {/* Modals */}
+        <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />
+        <FeesExpenses isOpen={isFeesOpen} onClose={onFeesClose} />
+        <DistributionSponsor
+          isOpen={isDistSponsorOpen}
+          onClose={onDistSponsorClose}
+        />
+        <DistributionInvestor
+          isOpen={isDistInvestorOpen}
+          onClose={onDistInvestorClose}
+        />
+        <UpdateIONav isOpen={isUpdateNavOpen} onClose={onUpdateNavClose} />
+        <UpdateIOStatus
+          isOpen={isUpdateStatusOpen}
+          onClose={onUpdateStatusClose}
+        />
+      </Box>
     </Box>
   );
 };