diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 79090a1..b58c32b 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -7,6 +7,8 @@ import { TbClock2 } from "react-icons/tb";
 import { CiWallet } from "react-icons/ci";
 import { HiOutlineReceiptPercent } from "react-icons/hi2";
 import { IoMdQrScanner } from "react-icons/io";
+import { GrDocumentPdf } from "react-icons/gr";
+import { AiOutlineFileGif } from "react-icons/ai";
 
 const getRandomDate = (start, end) => {
   const date = new Date(
@@ -468,8 +470,22 @@ const GlobalStateProvider = ({ children }) => {
       updateOn: "28-Jun-24",
     },
   ]);
-  
-  
+  const [create, setCreate] = useState([
+    {
+      id: 1,
+      Type: <GrDocumentPdf />,
+      fileName: "Investment Private Company",
+      document: "Investment.pdf",
+      status: true,
+    },
+    {
+      id: 2,
+      Type: <AiOutlineFileGif />,
+      fileName: "Investment Private",
+      document: "Investment.pdf",
+      status: true,
+    },
+  ]);
   const [keyMerits, setKeyMerits] = useState([
     {
       id: 1,
@@ -1507,8 +1523,8 @@ const GlobalStateProvider = ({ children }) => {
         setDeleteRequest,
         viewIO,
         setViewIO,
-        // create,
-        // setCreate,
+        create,
+        setCreate,
         keyMerits,
         setKeyMerits,
         iOArtifacts,
diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
index 8b9f946..047a85d 100644
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -6,7 +6,6 @@ import {
   Text,
   Tooltip,
   useDisclosure,
-  VStack,
   useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useRef, useState } from "react";
@@ -25,37 +24,35 @@ import {
 } from "@chakra-ui/icons";
 import { GrDocumentPdf } from "react-icons/gr";
 import { AiOutlineFileGif } from "react-icons/ai";
+import InvestmentView from "../ViewIO/InvestmentView";
+import InvestmentEdit from "../EditIO/InvestmentEdit";
 
 const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
-  const { slideFromRight } =
-    useContext(GlobalStateContext);
+  const { slideFromRight, create, setCreate } = useContext(GlobalStateContext);
   const firstField = useRef();
+  const secondField = useRef();
+  const thirdField = useRef();
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
-  const [actionId, setActionId] = useState(null);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isViewOpen,
+    onOpen: onViewOpen,
+    onClose: onViewClose,
+  } = useDisclosure();
+  const {
+    isOpen: isEditOpen,
+    onOpen: onEditOpen,
+    onClose: onEditClose,
+  } = useDisclosure();
+  const [actionId, setActionId] = useState(null);
   const navigate = useNavigate();
   const toast = useToast();
 
-  const [create, setCreate] = useState([
-    {
-      id: 1,
-      Type: <GrDocumentPdf />,
-      fileName: "Investment Private Company",
-      document: "Investment.pdf",
-      status: true,
-    },
-    {
-      id: 2,
-      Type: <AiOutlineFileGif />,
-      fileName: "Investment Private",
-      document: "Investment.pdf",
-      status: true,
-    },
-  ]);
+
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -96,6 +93,16 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
     setIsLoading(true);
   };
 
+  const handleView = (id) => {
+    setActionId(id)
+    onViewOpen();
+  };
+
+  const handleEdit = (id) => {
+    setActionId(id)
+    onEditOpen();
+  };
+
   const extractedArray = filteredData.map((item, index) => ({
     "Sr.no": (
       <Text
@@ -115,7 +122,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
         color="teal.900"
         fontWeight="500"
         className="d-flex align-items-center"
-        fontSize={'xl'}
+        fontSize={"xl"}
       >
         {item.Type}
       </Text>
@@ -150,7 +157,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
         >
           <Button
             _hover={{ color: "green.500" }}
-            onClick={() => navigate(`view-investment/${item.id}`)}
+            onClick={() => handleView(item.id)}
             color="green.300"
             rounded="sm"
             size="xs"
@@ -168,6 +175,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
         >
           <Button
             _hover={{ color: "blue.500" }}
+            onClick={() => handleEdit(item.id)}
             color="blue.400"
             rounded="sm"
             size="xs"
@@ -236,17 +244,28 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index }) => {
           size="sm"
           fontSize="xs"
           rounded="sm"
-          colorScheme="green"
+          color="green"
         >
-          Add
+          Add Document
         </Button>
         <InvestmentDocuments
-        create={create}
-        setCreate={setCreate}
+          create={create}
+          setCreate={setCreate}
           isOpen={isOpen}
           onClose={onClose}
           firstField={firstField}
         />
+        <InvestmentView
+        id={actionId}
+          isOpen={isViewOpen}
+          onClose={onViewClose}
+          secondField={secondField}
+        />
+        <InvestmentEdit
+          isOpen={isEditOpen}
+          onClose={onEditClose}
+          thirdField={thirdField}
+        />
       </Box>
       <DataTable
         emptyMessage="We don't have any Sponsors"
diff --git a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
new file mode 100644
index 0000000..f1da0df
--- /dev/null
+++ b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
@@ -0,0 +1,121 @@
+import {
+    Button,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+    FormControl,
+    FormLabel,
+    Input,
+    Box,
+    Text,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect } from "react";
+  import { 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 {
+      control,
+      handleSubmit,
+      reset,
+      register,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(investmentDocSchema),
+    });
+  
+    useEffect(() => {
+      if (filteredObject) {
+        reset(filteredObject);
+      }
+    }, [id, create, reset]);
+  
+    const onSubmit = (data) => {
+      const updatedCreate = create.map((item) =>
+        item.id === id ? { ...item, ...data } : item
+      );
+      setCreate(updatedCreate);
+      onClose();
+    };
+  
+    return (
+      <Drawer isOpen={isOpen} placement="right" onClose={onClose} initialFocusRef={thirdField}>
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"md"}>Edit Document</DrawerHeader>
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <DrawerBody>
+              <FormControl mb={4} isInvalid={errors.fileName}>
+                <FormLabel fontSize="sm">File Name</FormLabel>
+                <Input
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  {...register("fileName")}
+                />
+                {errors.fileName && (
+                  <Text color="red.500" fontSize="sm">
+                    {errors.fileName.message}
+                  </Text>
+                )}
+              </FormControl>
+              <FormControl mb={4} isInvalid={errors.document}>
+                <FormLabel fontSize="sm">Document</FormLabel>
+                <Input
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  {...register("document")}
+                />
+                {errors.document && (
+                  <Text color="red.500" fontSize="sm">
+                    {errors.document.message}
+                  </Text>
+                )}
+              </FormControl>
+              <FormControl mb={4} isInvalid={errors.Type}>
+                <FormLabel fontSize="sm">Type</FormLabel>
+                <Input
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  {...register("Type")}
+                />
+                {errors.Type && (
+                  <Text color="red.500" fontSize="sm">
+                    {errors.Type.message}
+                  </Text>
+                )}
+              </FormControl>
+            </DrawerBody>
+            <DrawerFooter>
+              <Button
+                variant="outline"
+                colorScheme="green"
+                rounded="sm"
+                size="sm"
+                mr={3}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button colorScheme="green" rounded="sm" size="sm" type="submit">
+                Save
+              </Button>
+            </DrawerFooter>
+          </Box>
+        </DrawerContent>
+      </Drawer>
+    );
+  };
+  
+  export default InvestmentEdit;
+  
\ No newline at end of file
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
index a2a5d6f..0b18295 100644
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -86,7 +86,7 @@ const InvestmentDocuments = ({ id, isOpen, onClose, firstField, create, setCreat
         return <GrDocumentPdf />;
       case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
       case 'application/msword':
-        return <TbFileTypeDocx />;
+        return <TbFileTypeDocx fontSize={'16px'} />;
       case 'image/jpeg':
       case 'image/png':
       case 'image/gif':
diff --git a/src/Pages/IO_Management/ViewIO/InvestmentView.jsx b/src/Pages/IO_Management/ViewIO/InvestmentView.jsx
new file mode 100644
index 0000000..4adfb43
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIO/InvestmentView.jsx
@@ -0,0 +1,78 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  FormControl,
+  FormLabel,
+  Input,
+  Text,
+  Box,
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+
+const InvestmentView = ({ isOpen, onClose, secondField, id }) => {
+    console.log(id);
+    const { create, setCreate } = useContext(GlobalStateContext);
+    const filteredObject = create?.find((item) => item?.id === id)
+    console.log(filteredObject);
+  return (
+    <Drawer
+      isOpen={isOpen}
+      placement="right"
+      onClose={onClose}
+      initialFocusRef={secondField}
+    >
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader fontSize={'md'}>View Document</DrawerHeader>
+        <DrawerBody>
+            <>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">File Name</FormLabel>
+                <Text
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                >{filteredObject?.fileName}</Text>
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Document</FormLabel>
+                <Text
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                >{filteredObject?.document}</Text>
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Type</FormLabel>
+                <Text
+                  fontSize="xl"
+                  type="text"
+                  size="sm"
+                >{filteredObject?.Type}</Text>
+              </FormControl>
+            </>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button
+            variant="outline"
+            colorScheme="green"
+            rounded="sm"
+            size="sm"
+            mr={3}
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default InvestmentView;
diff --git a/src/Pages/Master/Sponser/EditSponser.jsx b/src/Pages/Master/Sponser/EditSponser.jsx
index 71287d5..e1de7c5 100644
--- a/src/Pages/Master/Sponser/EditSponser.jsx
+++ b/src/Pages/Master/Sponser/EditSponser.jsx
@@ -46,19 +46,14 @@ const EditSponser = () => {
     }
   }, [params, sponser, reset]);
 
-
-
-
-
   if (!foundObject) {
     return <Box>Loading...</Box>; // or any loading indicator
   }
 
-
   const formFields = [
     {
       label: "Sponser name (English)",
-      placeHolder:" ",
+      placeHolder: " ",
       name: "sponserName",
       type: "text",
       isRequired: true,
@@ -67,7 +62,7 @@ const EditSponser = () => {
     {
       label: "Sponser Name (Arabic)",
       name: "sponserNameArabic",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       arabic: true,
@@ -76,7 +71,7 @@ const EditSponser = () => {
     {
       label: "Description (English)",
       name: "description",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "textarea",
       isRequired: true,
       section: "Add Details",
@@ -84,7 +79,7 @@ const EditSponser = () => {
     {
       label: "Description (Arabic)",
       name: "descriptionArabic",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "textarea",
       isRequired: true,
       arabic: true,
@@ -92,8 +87,8 @@ const EditSponser = () => {
     },
     {
       label: "Address (English)",
-      name: "sponserAddress", 
-      placeHolder:" ",
+      name: "sponserAddress",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
@@ -101,7 +96,7 @@ const EditSponser = () => {
     {
       label: "Address (Arabic)",
       name: "sponserAddressArabic",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       arabic: true,
@@ -110,7 +105,7 @@ const EditSponser = () => {
     {
       label: "Bank Name (English)",
       name: "bankName",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
@@ -118,7 +113,7 @@ const EditSponser = () => {
     {
       label: "Bank Name (Arabic)",
       name: "bankNameArabic",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       arabic: true,
@@ -127,7 +122,7 @@ const EditSponser = () => {
     {
       label: "Account Name (English)",
       name: "accountHolderName",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
@@ -135,7 +130,7 @@ const EditSponser = () => {
     {
       label: "Account Name (Arabic)",
       name: "accountHolderNameArabic",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       arabic: true,
@@ -144,7 +139,7 @@ const EditSponser = () => {
     {
       label: "Mobile Number (English)",
       name: "mobileNo",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "number",
       isRequired: true,
       section: "Add Details",
@@ -152,14 +147,14 @@ const EditSponser = () => {
     {
       label: "Account Number (English)",
       name: "accountNumber",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
     },
     {
       label: "IFSC Code (English)",
-      placeHolder:" ",
+      placeHolder: " ",
       name: "swiftCode",
       type: "text",
       isRequired: true,
@@ -167,9 +162,6 @@ const EditSponser = () => {
     },
   ];
 
-
- 
-
   const groupedFields = formFields.reduce((groups, field) => {
     const { section } = field;
     if (!groups[section]) {
@@ -180,18 +172,17 @@ const EditSponser = () => {
   }, {});
 
   const onSubmit = (data) => {
-console.log(data);
-  }
+    console.log(data);
+  };
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-    <FormInputMain
-      groupedFields={groupedFields}
-      control={control}
-      errors={errors}
-
-      onSubmit={handleSubmit(onSubmit)}
-    />
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index ba5dea9..4f2a18c 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -149,7 +149,7 @@ const Sponser = () => {
       <Box display={"flex"} justifyContent={"space-between"}>
 
         <Tooltip
-          rounded={"sm"}
+          rounded={"sm"} 
           fontSize={"xs"}
           label="View"
           bg="#fff"
diff --git a/src/Pages/Master/Sponser/ViewSponser.jsx b/src/Pages/Master/Sponser/ViewSponser.jsx
index 51c2de7..e01a64a 100644
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -30,7 +30,7 @@ const ViewSponser = () => {
     },
     {
       label: "Sponser Name (Arabic)",
-      value: foundObject.sponserName,
+      value: foundObject.sponserName, 
       type: "text",
       isRequired: true,
       arabic: true,