diff --git a/src/Components/FormInputView.jsx b/src/Components/FormInputView.jsx
index 2652198..922101b 100644
--- a/src/Components/FormInputView.jsx
+++ b/src/Components/FormInputView.jsx
@@ -1,38 +1,49 @@
 import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
 import React from "react";
 
-const FormInputView = ({ groupedFields, name,groupedFieldsTwo, errors, onSubmit, children }) => {
- 
+const FormInputView = ({
+  groupedFields,
+  name,
+  groupedFieldsTwo,
+  errors,
+  onSubmit,
+  children,
+}) => {
   console.log(groupedFields);
 
   return (
     <form>
-      {Object?.entries(groupedFields,groupedFieldsTwo).map(([section, fields], index) => (
-        <Box key={section}>
-          <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
-            {section}
-          </Heading>
-          <Box display={"flex"} gap={0}>
-            <Box
-              width={"100%"}
-              p={5}
-              display={"flex"}
-              flexWrap={"wrap"}
-              gap={4}
-            >
-              {fields.map(({ value, label, id }, key) => (
-                <Box w={'49%'}>
-                  <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
-                    {label}
-                  </FormLabel>
-                  <FormLabel>{value}</FormLabel>
-                </Box>
-              ))}
+      {Object?.entries(groupedFields, groupedFieldsTwo).map(
+        ([section, fields], index) => (
+          <Box key={section}>
+            <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
+              {section}
+            </Heading>
+            <Box display={"flex"} gap={0}>
+              <Box
+                width={"100%"}
+                p={5}
+                display={"flex"}
+                flexWrap={"wrap"}
+                gap={4}
+              >
+                {fields.map(({ value, label, id, width }, key) => (
+                  <Box w={!width ? "49%" : width}>
+                    <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
+                      {label}
+                    </FormLabel>
+                    <FormLabel>{value}</FormLabel>
+                  </Box>
+                ))}
+              </Box>
             </Box>
+            {index <
+              Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
+              <Divider />
+            )}
           </Box>
-          {index < Object.entries(groupedFields,groupedFieldsTwo).length - 1 && <Divider />}
-        </Box>
-      ))}
+        )
+      )}
       {children}
     </form>
   );
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 7d763d0..19f1736 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -303,7 +303,7 @@ const GlobalStateProvider = ({ children }) => {
       status: true,
     },
   ]);
-  
+
   const [investmentType, setInvestmentType] = useState([
     // {
     //   id: 1,
@@ -1248,21 +1248,21 @@ const GlobalStateProvider = ({ children }) => {
     },
     {
       id: 2,
-      DealID: "UWE3424992",
+      DealID: "UWE3424993",
       DealName: "K-Prime",
       SponsorName: "KKR",
       IOstatus: "Pending",
     },
     {
       id: 3,
-      DealID: "UWE3424992",
+      DealID: "UWE3424994",
       DealName: "K-Prime",
       SponsorName: "KKR",
       IOstatus: "Close",
     },
     {
       id: 4,
-      DealID: "UWE3424992",
+      DealID: "UWE3424995",
       DealName: "K-Prime",
       SponsorName: "KKR",
       IOstatus: "Open",
diff --git a/src/Pages/IO_Management/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIOdata.jsx
index 8ef2009..afd6d10 100644
--- a/src/Pages/IO_Management/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIOdata.jsx
@@ -1,4 +1,14 @@
-import { Box } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
 import { useNavigate, useParams } from "react-router-dom";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { useContext, useEffect, useState } from "react";
@@ -6,6 +16,11 @@ import FormInputView from "../../Components/FormInputView";
 import { useForm } from "react-hook-form"; // assuming react-hook-form is used
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { ArrowBackIcon } from "@chakra-ui/icons";
+import DataTable from "../../Components/DataTable/DataTable";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import FormInputMain from "../../Components/FormInputMain";
+import InvestmentDocuments from "./InvestmentDocuments";
+import ViewIOdataHeader from "./ViewIOdataHeader";
 
 const ViewIOdata = () => {
   const navigate = useNavigate();
@@ -16,10 +31,9 @@ const ViewIOdata = () => {
 
 
   const id = params?.id;
-  const foundObject = viewIO.find((item) =>item?.id.toString() === id.toString());
-
-  
-  console.log(foundObject);
+  const foundObject = viewIO.find(
+    (item) => item?.id.toString() === id.toString()
+  );
 
   if (!foundObject) {
     return <Box>Loading...</Box>;
@@ -27,16 +41,88 @@ const ViewIOdata = () => {
 
   const formFields = [
     {
-      label: "Deal ID",
-      value: foundObject.DealID,
+      label: "IO Name (English)",
+      value: foundObject.DealName,
+      width: "49%",
+      section: "",
     },
     {
-      label: "Sponsor name",
+      label: "IO Name (Arabic)",
       value: foundObject.SponsorName,
+      width: "49%",
+      section: "",
     },
     {
-      label: "IO status",
+      label: "Description (English)",
       value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Description (Arabic)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Investment Type (English)",
+      value: foundObject.DealName,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Investment Type (Arabic)",
+      value: foundObject.DealID,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Sponser Name (English)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Goal Amount (English)",
+      value: foundObject.IOstatus,
+      width: "49%",
+      section: "",
+    },
+    {
+      label: "Minimum Investment Amount (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Maximum Investment Amount (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Holding Period (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Expected Return Estimated (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "Closing Date (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
+    },
+    {
+      label: "IO Status (English)",
+      value: foundObject.IOstatus,
+      width: "32.3%",
+      section: "",
     },
   ];
 
@@ -51,14 +137,87 @@ const ViewIOdata = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <span
-        onClick={() => navigate(-1)}
-        style={{ fontSize: "15px", cursor: "pointer" }}
-      >
-        <ArrowBackIcon cursor={"pointer"} /> Back
-      </span>
-      <FormInputView groupedFields={groupedFields} />
-      
+      <Box paddingInline={"12px"}>
+        <span
+          onClick={() => navigate(-1)}
+          style={{ fontSize: "15px", cursor: "pointer" }}
+        >
+          <ArrowBackIcon cursor={"pointer"} /> Back
+        </span>
+        <ViewIOdataHeader />
+      </Box>
+
+      <Tabs mt={4}>
+        <TabList>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO Details
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Investment Documents
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Key Merits
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO artifacts
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Investors
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO Cash detail
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            IO NAV detail
+          </Tab>
+          <Tab
+            fontSize={"sm"}
+            _selected={{ color: "#004118", borderBottom: "2px solid #38a169" }}
+          >
+            Distribution
+          </Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <FormInputView groupedFields={groupedFields} />
+          </TabPanel>
+          <TabPanel>
+            <FormInputView groupedFields={groupedFields} />
+          </TabPanel>
+          <TabPanel>
+            <FormInputView groupedFields={groupedFields} />
+          </TabPanel>
+          <TabPanel>
+            <FormInputView groupedFields={groupedFields} />
+          </TabPanel>
+          <TabPanel>
+            <FormInputView groupedFields={groupedFields} />
+          </TabPanel>
+          <TabPanel></TabPanel>
+        </TabPanels>
+      </Tabs>
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/ViewIOdataHeader.jsx b/src/Pages/IO_Management/ViewIOdataHeader.jsx
new file mode 100644
index 0000000..54f5369
--- /dev/null
+++ b/src/Pages/IO_Management/ViewIOdataHeader.jsx
@@ -0,0 +1,41 @@
+import { Box, Image, Text } from "@chakra-ui/react";
+import header from "../../../src/assets/IOheader.png";
+
+const ViewIOdataHeader = () => {
+  return (
+    <Box
+      display={"flex"}
+      alignItems={"center"}
+      justifyContent={"space-between"}
+      bg={"#caf5d8"}
+      paddingRight={"25px"}
+      borderRadius={"10px"}
+    >
+      <Box>
+        <Image src={header} />
+      </Box>
+      <Box fontSize={"sm"} fontWeight={"500"}>
+        <Text>KKR Private Equity Fund (K-Prime)</Text>
+        <Text>sponsor name: KKR</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO Status</Text>
+        <Text fontWeight={"500"}>Open</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO MV NAV</Text>
+        <Text fontWeight={"500"}>$1,092,500</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO cash</Text>
+        <Text fontWeight={"500"}>$48,000</Text>
+      </Box>
+      <Box fontSize={"sm"}>
+        <Text>IO NAV</Text>
+        <Text fontWeight={"500"}>$1,140,500</Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default ViewIOdataHeader;
diff --git a/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx b/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
index 0a280f7..cdde2ba 100644
--- a/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
+++ b/src/Pages/Master/ExchangeRate/ExchangeHistroy.jsx
@@ -116,7 +116,7 @@ const ExchangeHistory = ({ id, setIsLoading, history }) => {
             <Box mt={4}>
               {history &&
                 history.map((entry, index) => {
-                  console.log("entry:", entry); // Log the date for debugging
+                  // console.log("entry:", entry);
                   return (
                     <>
                       {id === entry.id ? (
diff --git a/src/assets/IOheader.png b/src/assets/IOheader.png
new file mode 100644
index 0000000..9eead41
Binary files /dev/null and b/src/assets/IOheader.png differ