diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx
index d8292e1..c540af8 100644
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -47,7 +47,7 @@ const FormField = ({
     isRequired={isRequired}
     className="mb-3"
   >
-    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>
+    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"} fontWeight={'400'}>
       {label}
     </FormLabel>
     <Controller
@@ -66,6 +66,8 @@ const FormField = ({
               cursor={"pointer"}
               placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
+              _placeholder={{fontSize:'xs'}}
+              borderRadius={'4px'}
             >
               {options.map((option, index) => (
                 <option key={index} value={option.value}>
@@ -83,6 +85,9 @@ const FormField = ({
               {...props}
               placeholder={placeHolder ? placeHolder : label}
               textAlign={arabic ? "right" : "left"}
+              _placeholder={{fontSize:'xs'}}
+              borderRadius={'4px'}
+              resize={'none'}
             />
           );
         } else if (type === "checkbox") {
@@ -218,7 +223,6 @@ const FormField = ({
                     </Kbd>{" "}
                     + <Kbd className="text-dark">select</Kbd>
                   </span>
-                  .
                 </FormHelperText>
               )}
               {selectedImageData &&  (
@@ -255,14 +259,14 @@ const FormField = ({
                           />
                           <Text
                             as={"span"}
-                            fontSize={"xs"}
+                            fontSize={"sm"}
                             fontWeight={"500"}
                             mt={1}
                             isTruncated={true}
                           >
                             {imageData[index]?.name}
                           </Text>
-                          <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                          <Text as={"span"} fontSize={"sm"} fontStyle={"italic"}>
                             {(imageData[index]?.size / (1024 * 1024)).toFixed(2)}{" "}
                             mb
                           </Text>
@@ -332,11 +336,14 @@ const FormField = ({
             <Input
               focusBorderColor="forestGreen.300"
               size={"sm"}
+              fontSize={'sm'}
               type={type}
               {...field}
               {...props}
               placeholder={placeHolder ? placeHolder : label}
+              borderRadius={'4px'}
               textAlign={arabic ? "right" : "left"}
+              _placeholder={{fontSize:'xs'}}
             />
           );
         }
diff --git a/src/Components/FormInputMain.jsx b/src/Components/FormInputMain.jsx
index 2acfd4d..450ad77 100644
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -2,19 +2,21 @@ import { Box, Button, Divider, Heading } from "@chakra-ui/react";
 import React from "react";
 import FormField from "./FormField";
 import { OPACITY_ON_LOAD } from "../Layout/animations";
+import { ArrowBackIcon } from "@chakra-ui/icons";
 
 const FormInputMain = ({
   groupedFields,
   control,
   errors,
   onSubmit,
-  children,
+  children, 
 }) => {
   return (
     <form onSubmit={onSubmit}>
       {Object.entries(groupedFields).map(([section, fields], index) => (
-        <Box key={section}>
-          <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
+        <Box key={section} mt={4}>
+          <Heading as="h6" size="xs" mx={5} fontWeight={'500'}>
+            {/* <ArrowBackIcon fontSize={'lg'} />  */}
             {section}
           </Heading>
           <Box display={"flex"} gap={0}>
@@ -75,17 +77,28 @@ const FormInputMain = ({
       ))}
 
       {children}
-
-      <Box display={"flex"} justifyContent={"flex-end"} p={4}>
-        <Button
-          size={"sm"}
-          width={"49.5%"}
-          rounded={"sm"}
-          type="submit"
-          colorScheme="green"
-        >
-          Submit
-        </Button>
+      
+      <Box display={'flex'} justifyContent={'end'} mb={5}>
+        <Box display={"flex"} justifyContent={"space-around"} p={4} w={'49%'}>
+          <Button
+            size={"sm"}
+            width={"44.5%"}
+            rounded={"sm"}
+            type="submit"
+            colorScheme='gray'
+          >
+            Cancel
+          </Button>
+          <Button
+            size={"sm"}
+            width={"44.5%"}
+            rounded={"sm"}
+            type="submit"
+            colorScheme="green"
+          >
+            Submit
+          </Button>
+        </Box>
       </Box>
     </form>
   );
diff --git a/src/Components/FormInputView.jsx b/src/Components/FormInputView.jsx
new file mode 100644
index 0000000..f088385
--- /dev/null
+++ b/src/Components/FormInputView.jsx
@@ -0,0 +1,41 @@
+import { Box, Button, Divider, FormLabel, Heading } from "@chakra-ui/react";
+import React from "react";
+
+const FormInputView = ({ groupedFields, name, errors, onSubmit, children }) => {
+ 
+  console.log(groupedFields);
+
+  return (
+    <form>
+      {Object.entries(groupedFields).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>
+              ))}
+            </Box>
+          </Box>
+          {index < Object.entries(groupedFields).length - 1 && <Divider />}
+        </Box>
+      ))}
+      {children}
+    </form>
+  );
+};
+
+export default FormInputView;
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 96db934..9e3038a 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -25,7 +25,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 1,
       sponserName: "John Doe",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1234567890",
       sponserAddress: "123 Main St, Springfield, USA",
       accountHolderName: "John Doe",
@@ -46,7 +46,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 2,
       sponserName: "Jane Smith",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "9876543210",
       sponserAddress: "456 Oak St, Metropolis, USA",
       accountHolderName: "Jane Smith",
@@ -67,7 +67,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 3,
       sponserName: "Alice Johnson",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1231231234",
       sponserAddress: "789 Pine St, Gotham, USA",
       accountHolderName: "Alice Johnson",
@@ -88,7 +88,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 4,
       sponserName: "Bob Brown",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "3213214321",
       sponserAddress: "101 Maple St, Smallville, USA",
       accountHolderName: "Bob Brown",
@@ -109,7 +109,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 5,
       sponserName: "Charlie Davis",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "5555555555",
       sponserAddress: "202 Birch St, Star City, USA",
       accountHolderName: "Charlie Davis",
@@ -130,7 +130,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 6,
       sponserName: "Daniel Evans",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "4444444444",
       sponserAddress: "303 Cedar St, Central City, USA",
       accountHolderName: "Daniel Evans",
@@ -151,7 +151,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 7,
       sponserName: "Ella Fitzgerald",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "3333333333",
       sponserAddress: "404 Elm St, Coast City, USA",
       accountHolderName: "Ella Fitzgerald",
@@ -172,7 +172,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 8,
       sponserName: "Frank Green",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "2222222222",
       sponserAddress: "505 Ash St, Keystone City, USA",
       accountHolderName: "Frank Green",
@@ -193,7 +193,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 9,
       sponserName: "Grace Hall",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1111111111",
       sponserAddress: "606 Willow St, Hub City, USA",
       accountHolderName: "Grace Hall",
@@ -214,7 +214,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 10,
       sponserName: "Henry Ingram",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "6666666666",
       sponserAddress: "707 Spruce St, Fawcett City, USA",
       accountHolderName: "Henry Ingram",
@@ -235,7 +235,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 11,
       sponserName: "Grace Hall",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "1111111111",
       sponserAddress: "606 Willow St, Hub City, USA",
       accountHolderName: "Grace Hall",
@@ -256,7 +256,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 12,
       sponserName: "Henry Ingram",
-      sponserNameArabic: "الرجاء إدخال القيمة",
+      sponserNameArabic:"الرجاء إدخال القيمة",
       mobileNo: "6666666666",
       sponserAddress: "707 Spruce St, Fawcett City, USA",
       accountHolderName: "Henry Ingram",
@@ -275,7 +275,7 @@ const GlobalStateProvider = ({ children }) => {
       createdAt: "6",
     },
   ]);
-
+  
   const [investmentType, setInvestmentType] = useState([
     // {
     //   id: 1,
@@ -340,6 +340,7 @@ const GlobalStateProvider = ({ children }) => {
       status: true,
     },
   ]);
+  
 
   const [investment, setInvestment] = useState([
     // {
@@ -513,6 +514,37 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+  const [investorTransaction, setInvestorTransaction] = useState([
+    {
+      id: 1,
+      InvestorName: "ICC",
+      Sponsor: "Adani",
+      InvestmentAmount: "1000000",
+      Action: "Distribute",
+    },
+    {
+      id: 2,
+      InvestorName: "ECHO Investment",
+      Sponsor: "Tata",
+      InvestmentAmount: "2500000",
+      Action: "Distribute",
+    },
+    {
+      id: 3,
+      InvestorName: "ICC",
+      Sponsor: "Adani",
+      InvestmentAmount: "1000000",
+      Action: "Distribute",
+    },
+    {
+      id: 4,
+      InvestorName: "ECHO Investment",
+      Sponsor: "Tata",
+      InvestmentAmount: "2500000",
+      Action: "Distribute",
+    },
+  ]);
+
   const [pendingRequest, setPendingRequest] = useState([
     {
       id: uuidv4(),
@@ -735,6 +767,228 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+  const [upgradeHistory, setUpgradeHistory] = useState([
+    {
+      id: uuidv4(),
+      date: "2024-01-15",
+      Distribution: "Office supplies",
+      charge: "200.50",
+      year: "2024",
+      quarter: "Q1",
+      amount: 1500,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-02-10",
+      Distribution: "Marketing expenses",
+      charge: "450.00",
+      year: "2024",
+      quarter: "Q1",
+      amount: 2000,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-03-05",
+      Distribution: "Software subscription",
+      charge: "300.75",
+      year: "2024",
+      quarter: "Q1",
+      amount: 1200,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-04-18",
+      Distribution: "Travel expenses",
+      charge: "600.30",
+      year: "2024",
+      quarter: "Q2",
+      amount: 2500,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-05-22",
+      Distribution: "Consulting fees",
+      charge: "800.00",
+      year: "2024",
+      quarter: "Q2",
+      amount: 3000,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-06-14",
+      Distribution: "Office rent",
+      charge: "1200.25",
+      year: "2024",
+      quarter: "Q2",
+      amount: 3500,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-07-09",
+      Distribution: "Utilities",
+      charge: "150.40",
+      year: "2024",
+      quarter: "Q3",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-08-29",
+      Distribution: "Employee training",
+      charge: "500.00",
+      year: "2024",
+      quarter: "Q3",
+      amount: 1800,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-09-13",
+      Distribution: "Website maintenance",
+      charge: "350.65",
+      year: "2024",
+      quarter: "Q3",
+      amount: 1400,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-10-23",
+      Distribution: "Advertising",
+      charge: "900.50",
+      year: "2024",
+      quarter: "Q4",
+      amount: 2200,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-10-23",
+      Distribution: "Advertising",
+      charge: "900.50",
+      year: "2024",
+      quarter: "Q4",
+      amount: 2200,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-10-23",
+      Distribution: "Advertising",
+      charge: "900.50",
+      year: "2024",
+      quarter: "Q4",
+      amount: 2200,
+    },
+  ]);
+
+  const [deleteHistory, setDeleteHistory] = useState([
+    {
+      id: uuidv4(),
+      date: "2024-01-15",
+      Distribution: "Office supplies",
+      charge: "200.50",
+      year: "2024",
+      quarter: "Q1",
+      amount: 1500,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-02-10",
+      Distribution: "Marketing expenses",
+      charge: "450.00",
+      year: "2024",
+      quarter: "Q1",
+      amount: 2000,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-03-05",
+      Distribution: "Software subscription",
+      charge: "300.75",
+      year: "2024",
+      quarter: "Q1",
+      amount: 1200,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-04-18",
+      Distribution: "Travel expenses",
+      charge: "600.30",
+      year: "2024",
+      quarter: "Q2",
+      amount: 2500,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-05-22",
+      Distribution: "Consulting fees",
+      charge: "800.00",
+      year: "2024",
+      quarter: "Q2",
+      amount: 3000,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-06-14",
+      Distribution: "Office rent",
+      charge: "1200.25",
+      year: "2024",
+      quarter: "Q2",
+      amount: 3500,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-07-09",
+      Distribution: "Utilities",
+      charge: "150.40",
+      year: "2024",
+      quarter: "Q3",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-08-29",
+      Distribution: "Employee training",
+      charge: "500.00",
+      year: "2024",
+      quarter: "Q3",
+      amount: 1800,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-09-13",
+      Distribution: "Website maintenance",
+      charge: "350.65",
+      year: "2024",
+      quarter: "Q3",
+      amount: 1400,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-10-23",
+      Distribution: "Advertising",
+      charge: "900.50",
+      year: "2024",
+      quarter: "Q4",
+      amount: 2200,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-10-23",
+      Distribution: "Advertising",
+      charge: "900.50",
+      year: "2024",
+      quarter: "Q4",
+      amount: 2200,
+    },
+    {
+      id: uuidv4(),
+      date: "2024-10-23",
+      Distribution: "Advertising",
+      charge: "900.50",
+      year: "2024",
+      quarter: "Q4",
+      amount: 2200,
+    },
+  ]);
+
   const [investorRequest, setInvestorRequest] = useState([
     {
       id: uuidv4(),
@@ -846,6 +1100,118 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+  const [deleteRequest, setDeleteRequest] = useState([
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+    {
+      id: uuidv4(),
+      date: getRandomDate(startDate, endDate),
+      Distribution: "lorem ipsum dummy text",
+      charge: "500",
+      year: "2024",
+      quater: "Q 1",
+      amount: 1000,
+    },
+  ]);
+
+
   return (
     <GlobalStateContext.Provider
       value={{
@@ -876,6 +1242,14 @@ const GlobalStateProvider = ({ children }) => {
         setInvestmentType,
         investorRequest,
         setInvestorRequest,
+        investorTransaction,
+        setInvestorTransaction,
+        upgradeHistory,
+        setUpgradeHistory,
+        deleteHistory,
+        setDeleteHistory,
+        deleteRequest,
+        setDeleteRequest
       }}
     >
       {children}
diff --git a/src/Pages/AccountDeletion/DeletionHistory.jsx b/src/Pages/AccountDeletion/DeletionHistory.jsx
index 373a6e9..ba11bc2 100644
--- a/src/Pages/AccountDeletion/DeletionHistory.jsx
+++ b/src/Pages/AccountDeletion/DeletionHistory.jsx
@@ -1,22 +1,220 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const DeletionHistory = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import DataTable from "../../Components/DataTable/DataTable";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+// import { formatDate } from "../../Components/Functions/UTCConvertor";
 
-export default DeletionHistory
\ No newline at end of file
+const DeletionHistory = () => {
+  const toast = useToast();
+  const { slideFromRight, deleteHistory, setDeleteHistory } =
+    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 Filter]================================================================
+  const filteredData = deleteHistory.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.Distribution;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Date",
+    "Distribution Amount",
+    "Charges (USD)",
+    "Year",
+    "Quater",
+    "Action",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {index + 1}.
+      </Text>
+    ),
+    "Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {formatDate(item.date)}
+      </Text>
+    ),
+    "Distribution Amount": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center  web-text-small"
+        fontWeight={'500'}
+      >
+        {item.Distribution}
+      </Text>
+    ),
+    "Charges (USD)": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.charge}
+        {/* {formatDate(item.charge)} */}
+      </Text>
+    ),
+    Year: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.year}
+      </Text>
+    ),
+    Quater: (
+      <Text 
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.quarter}
+      </Text>
+    ),
+    Action: (
+      <Box display={'flex'} justifyContent={'space-around'}>
+        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Accept' bg='#fff' color={'green.500'} placement="left-start">
+        <Button color="green.500"   rounded={'sm'} size={'xs'}>
+        <CheckIcon /></Button></Tooltip>
+        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Reject' bg='#fff' color={'red.500'} placement="left-start">
+        <Button color="red.500" rounded={'sm'} size={'xs'}>
+        <CloseIcon /></Button></Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const deleteHistory = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setSponser(deleteHistory);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          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
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default DeletionHistory;
diff --git a/src/Pages/AccountDeletion/DeletionRequest.jsx b/src/Pages/AccountDeletion/DeletionRequest.jsx
index 9f1b2d5..a094386 100644
--- a/src/Pages/AccountDeletion/DeletionRequest.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequest.jsx
@@ -1,22 +1,220 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const DeletionRequest = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import DataTable from "../../Components/DataTable/DataTable";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+// import { formatDate } from "../../Components/Functions/UTCConvertor";
 
-export default DeletionRequest
\ No newline at end of file
+const DeletionRequest = () => {
+  const toast = useToast();
+  const { slideFromRight, deleteRequest, setDeleteRequest } =
+    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 Filter]================================================================
+  const filteredData = deleteRequest.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.Distribution;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Date",
+    "Distribution Amount",
+    "Charges (USD)",
+    "Year",
+    "Quater",
+    "Amount",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {index + 1}.
+      </Text>
+    ),
+    "Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {formatDate(item.date)}
+      </Text>
+    ),
+    "Distribution Amount": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.Distribution}
+      </Text>
+    ),
+    "Charges (USD)": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.charge}
+        {/* {formatDate(item.charge)} */}
+      </Text>
+    ),
+    Year: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.year}
+      </Text>
+    ),
+    Quater: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.quater}
+      </Text>
+    ),
+
+    Amount: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.amount}
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setSponser(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          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
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default DeletionRequest;
diff --git a/src/Pages/IO_Management/CreateIO.jsx b/src/Pages/IO_Management/CreateIO.jsx
index 70a24c9..059fde5 100644
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -26,9 +26,32 @@ import AddIOCharges from "./AddIOCharges";
 import FormInputMain from "../../Components/FormInputMain";
 
 const schema = yup.object().shape({
-  ioNameArabic: yup.string().required("Arabic name is required"),
-  ioName: yup.string().required("Investment Object name is required"),
-  sponserName: yup.string().required("Sponser name is required"),
+  ioName: yup.string().required("Arabic name is required"),
+  ioNameArabic: yup.string().required("Investment Object name is required"),
+  discription: yup.string().required("Sponser name is required"),
+  discriptionArabic: yup.string().required("Arabic name is required"),
+  typeName: yup.string().required("Investment Object name is required"),
+  typeNameArabic: yup.string().required("Sponser name is required"),
+  sponserName: yup.string().required("Arabic name is required"),
+  sponserNameArabic: yup
+    .string()
+    .required("Investment Object name is required"),
+  holdingPeriod: yup.string().required("Sponser name is required"),
+  holdingPeriodArabic: yup.string().required("Arabic name is required"),
+  ioStartus: yup.string().required("Investment Object name is required"),
+  ioStartusArabic: yup.string().required("Sponser name is required"),
+  goalAmount: yup.string().required("Arabic name is required"),
+  closingDate: yup.string().required("Investment Object name is required"),
+  minInvestment: yup.string().required("Sponser name is required"),
+  maxInvestment: yup.string().required("Arabic name is required"),
+  expectedReturn: yup.string().required("Investment Object name is required"),
+  originalValue: yup.string().required("Sponser name is required"),
+  keyname: yup.string().required("Arabic name is required"),
+  keyNameArabic: yup.string().required("Investment Object name is required"),
+  keyDescription: yup.string().required("Sponser name is required"),
+  keyDescriptionArabic: yup.string().required("Sponser name is required"),
+  docType: yup.string().required("Sponser name is required"),
+
   destributedAmount: yup
     .number()
     .required("Distributed Amount is required")
@@ -52,8 +75,11 @@ const schema = yup.object().shape({
     .number()
     .required("Annual Yield is required")
     .positive("Must be a positive number"),
-  banner_image: yup.mixed().required("Profile image is required"),
-  other_image: yup.mixed().required("Profile image is required"),
+    iconUpload: yup.mixed().required("Profile image is required"),
+    bannerImages: yup.mixed().required("Profile image is required"),
+    otherImage: yup.mixed().required("Profile image is required"),
+    docAttach: yup.mixed().required("Profile image is required"),
+    videos: yup.mixed().required("Profile image is required"),
 });
 
 const startYear = 2024;
@@ -127,92 +153,6 @@ const CreateIO = () => {
     label: item.sponserName,
   }));
 
-  const [investForm, setInvestForm] = useState([
-    {
-      label: "Investment object name",
-      name: "ioName",
-      type: "text",
-      isRequired: true,
-    },
-    {
-      label: "Investment object",
-      name: "ioNameArabic",
-      placeHolder: "الرجاء إدخال القيمة",
-      arabic: true,
-      isRequired: true,
-    },
-    {
-      label: "Destributed Amount",
-      placeHolder: "$00.0",
-      helperText: "Please enter value in $",
-      name: "destributedAmount",
-      type: "number",
-      isRequired: true,
-    },
-    {
-      label: "Min Invest",
-      placeHolder: "$00.00",
-      helperText: "Please enter value in $",
-      name: "miniInvest",
-      type: "number",
-      isRequired: true,
-    },
-    {
-      label: "Year",
-      name: "year",
-      type: "select",
-      options: years,
-      isRequired: true,
-    },
-    {
-      label: "Quaterly",
-      name: "quaterly",
-      type: "select",
-      options: [
-        { label: "Q1", value: "Q1" },
-        { label: "Q2", value: "Q2" },
-        { label: "Q3", value: "Q3" },
-        { label: "Q4", value: "Q4" },
-      ],
-      isRequired: true,
-    },
-    {
-      label: "Sponsers Name",
-      name: "sponserName",
-      type: "select",
-      options: sponserOptions,
-      isRequired: true,
-    },
-    {
-      label: "Target close",
-      name: "targetClose",
-      type: "date",
-      isRequired: true,
-    },
-    {
-      label: "Tenure",
-      name: "tenure",
-      type: "number",
-      isRequired: true,
-    },
-    {
-      label: "Annual yeild",
-      placeHolder: "00.00%",
-      helperText: "Please enter value in percentage",
-      name: "annualyield",
-      type: "number",
-      isRequired: true,
-    },
-    {
-      label: "Annual return",
-      placeHolder: "00.00%",
-      helperText: "Please enter value in percentage",
-      name: "annualReturn",
-      type: "number",
-      isRequired: true,
-    },
-  ]);
-
   const handleBannerImageChange = (e) => {
     const file = e.target.files[0];
     setBannerImageData(file);
@@ -267,125 +207,304 @@ const CreateIO = () => {
 
   const formFields = [
     {
-      label: "Investment object name",
+      label: "IO Name (English)",
+      placeHolder: " ",
       name: "ioName",
       type: "text",
       isRequired: true,
-      section: "Investment Object Details",
+      section: "create IO",
     },
     {
-      label: "Investment object (Arabic)",
+      label: "IO Name (Arabic)",
+      placeHolder: " ",
       name: "ioNameArabic",
-      placeHolder: "الرجاء إدخال القيمة",
       type: "text",
       isRequired: true,
-      arabic: true,
-      section: "Investment Object Details",
+      section: "create IO",
     },
     {
-      label: "Destributed Amount",
-      name: "destributedAmount",
-      type: "number",
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "discription",
+      type: "text",
       isRequired: true,
-      section: "Investment Object Details",
+      section: "create IO",
     },
     {
-      label: "Min Invest",
-      name: "miniInvest",
-      type: "number",
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "discriptionArabic",
+      type: "text",
       isRequired: true,
-      section: "Investment Object Details",
+      section: "create IO",
     },
     {
-      label: "Sponsers name",
+      label: "Investment Type Name (English)",
+      placeHolder: " ",
+      name: "typeName",
+      type: "select",
+      isRequired: true,
+      section: "create IO",
+      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 Name (Arabic)",
+      placeHolder: " ",
+      name: "typeNameArabic",
+      type: "select",
+      isRequired: true,
+      section: "create IO",
+      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",
       isRequired: true,
-      section: "Investment Object Details",
+      section: "create IO",
     },
     {
-      label: "Year",
-      name: "accountNumber",
+      label: "Sponser Name (Arabic)",
+      placeHolder: " ",
+      name: "sponserNameArabic",
+      type: "text",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriod",
+      type: "text",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "Holding Period (English)",
+      placeHolder: " ",
+      name: "holdingPeriodArabic",
+      type: "text",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "IO Status (English)",
+      placeHolder: " ",
+      name: "ioStartus",
       type: "select",
-      options: years,
       isRequired: true,
-      section: "Investment Object Details",
-    },
-    {
-      label: "Annual return",
-      name: "annualReturn",
-      type: "number",
-      isRequired: true,
-      section: "Investment Object Details",
-    },
-    {
-      label: "Annual yeild",
-      name: "annualyield",
-      type: "number",
-      helperText: "Please enter value in percentage",
-      isRequired: true,
-      section: "Investment Object Details",
-    },
-    {
-      label: "Quaterly",
-      name: "quaterly",
-      type: "select",
+      section: "create IO",
       options: [
         {
-          label: "Q1",
-          value: "Q1",
+          label: "option 1",
+          value: "option 1",
         },
         {
-          label: "Q2",
-          value: "Q2",
+          label: "option 2",
+          value: "option 2",
         },
         {
-          label: "Q3",
-          value: "Q3",
+          label: "option 3",
+          value: "option 3",
         },
         {
-          label: "Q4",
-          value: "Q4",
+          label: "option 4",
+          value: "option 4",
         },
       ],
-      isRequired: true,
-      section: "Investment Object Details",
     },
-
     {
-      label: "Target close",
-      name: "targetClose",
+      label: "IO Status (Arabic)",
+      placeHolder: " ",
+      name: "ioStartusArabic",
+      type: "select",
+      isRequired: true,
+      section: "create IO",
+      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: "Goal Amount (English)",
+      placeHolder: " ",
+      name: "goalAmount",
+      type: "number",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "Closing Date (English)",
+      placeHolder: " ",
+      name: "closingDate",
       type: "date",
       isRequired: true,
-      section: "Investment Object Details",
+      section: "create IO",
+    },
+    {
+      label: "Minimum Investment Amount (English)",
+      placeHolder: " ",
+      name: "minInvestment",
+      type: "number",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "Maximum Investment Amount (English)",
+      placeHolder: " ",
+      name: "maxInvestment",
+      type: "number",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "Expected Return Estimated (English)",
+      placeHolder: " ",
+      name: "expectedReturn",
+      type: "number",
+      isRequired: true,
+      section: "create IO",
+    },
+    {
+      label: "Original Valuation (English)",
+      placeHolder: " ",
+      name: "originalValue",
+      type: "number",
+      isRequired: true,
+      section: "create IO",
     },
 
     {
-      label: "Banner image",
-      name: "banner_image",
-      id: "banner_image",
-      type: "fileNormal",
+      label: "Name (English)",
+      placeHolder: " ",
+      name: "keyname",
+      type: "text",
       isRequired: true,
-      section: "Uplaod Banner Images",
-      multiple: false,
-      selectedImageData: selectedBannerImageData,
-      setSelectedImageData: setSelectedBannerImageData,
-      imageData: bannerImageData,
-      handleImageChange: handleBannerImageChange,
+      section: "Key Merits",
     },
     {
-      label: "Multi Image",
-      name: "OtherImage",
-      id: "OtherImage",
+      label: "Name (Arabic)",
+      placeHolder: " ",
+      name: "keyNameArabic",
+      type: "text",
+      isRequired: true,
+      section: "Key Merits",
+    },
+    {
+      label: "Description (English)",
+      placeHolder: " ",
+      name: "keyDescription",
+      type: "textarea",
+      isRequired: true,
+      section: "Key Merits",
+    },
+    {
+      label: "Description (Arabic)",
+      placeHolder: " ",
+      name: "keyDescriptionArabic",
+      type: "textarea",
+      isRequired: true,
+      section: "Key Merits",
+    },
+    {
+      label: "Icon",
+      placeHolder: " ",
+      name: "iconUpload",
       type: "fileNormal",
       isRequired: true,
-      section: "Uplaod Banner Images",
-      multiple: true,
-      selectedImageData: selectedOtherImageData,
-      setSelectedImageData: setSelectedOtherImageData,
-      imageData: otherImageData,
-      handleImageChange: handleOtherImageChange,
-      removeImage: removeOtherImage,
+      section: "Key Merits",
+    },
+
+    {
+      label: "Banner Images ",
+      placeHolder: " ",
+      name: "bannerImages",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Images",
+    },
+
+    {
+        label: "Other Images",
+        placeHolder: " ",
+        name: "otherImage",
+        type: "fileNormal",
+        isRequired: true,
+        section: "Images",
+      },
+  
+    {
+      label: "Type",
+      placeHolder: " ",
+      name: "docType",
+      type: "text",
+      isRequired: true,
+      section: "Documents",
+    },
+    {
+      label: "Attachment",
+      placeHolder: " ",
+      name: "type",
+      type: "docAttach",
+      isRequired: true,
+      section: "Documents",
+    },
+    {
+      label: "Videos",
+      placeHolder: " ",
+      name: "videos",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Videos",
     },
   ];
 
@@ -405,134 +524,7 @@ const CreateIO = () => {
         control={control}
         errors={errors}
         onSubmit={handleSubmit(onSubmit)}
-      >
-        <Divider />
-        <Heading
-          w={"100%"}
-          display={"flex"}
-          justifyContent={"space-between"}
-          as="h6"
-          size="xs"
-          mb={5}
-          pe={6}
-        >
-          Final calculation
-          <AddIOCharges charges={charges} setCharges={setCharges} />
-        </Heading>
-
-        <Box
-          w={"40%"}
-          display={"flex"}
-          justifyContent={"center"}
-          flexDirection={"column"}
-          alignItems={"start"}
-          gap={1}
-          p={5}
-          m={1}
-          rounded={"lg"}
-          boxShadow={"lg"}
-          color={"#fff"}
-          bgGradient="linear(to-tr, #000000, #004118)"
-        >
-          {charges.map(({ title, value }, index) => (
-            <Box as={"span"} w={"100%"} display={"flex"} key={index}>
-              <Text
-                fontSize={"sm"}
-                fontWeight={"600"}
-                as={"span"}
-                w={"70%"}
-                bg={""}
-              >
-                {title}
-              </Text>
-              <Text
-                as={"span"}
-                fontSize={"sm"}
-                fontWeight={"600"}
-                w={"30%"}
-                bg={""}
-              >
-                $ {value}
-              </Text>
-            </Box>
-          ))}
-
-          <Box
-            as={"span"}
-            w={"100%"}
-            display={"flex"}
-            flexDirection={"column"}
-            gap={2}
-          >
-            {totalCharge !== 0 ? (
-              <Box display={"flex"}>
-                <Text
-                  fontSize={"sm"}
-                  fontWeight={"500"}
-                  as={"span"}
-                  w={"70%"}
-                  bg={""}
-                >
-                  Total charges
-                </Text>
-                <Text
-                  as={"span"}
-                  fontSize={"sm"}
-                  fontWeight={"600"}
-                  w={"30%"}
-                  bg={""}
-                >
-                  $ {totalCharge.toFixed(4)}
-                </Text>
-              </Box>
-            ) : (
-              ""
-            )}
-
-            <Box display={"flex"}>
-              <Text
-                fontSize={"sm"}
-                fontWeight={"500"}
-                as={"span"}
-                w={"70%"}
-                bg={""}
-              >
-                Total distributed amount
-              </Text>
-              <Text
-                as={"span"}
-                fontSize={"sm"}
-                fontWeight={"600"}
-                w={"30%"}
-                bg={""}
-              >
-                $ {destributedAmount.toFixed(4)}
-              </Text>
-            </Box>
-
-            <Box pt={2} borderTop={"1px solid #fff"} as="span" display={"flex"}>
-              <Text
-                fontSize={"sm"}
-                fontWeight={"500"}
-                as={"span"}
-                w={"70%"}
-                bg={""}
-              >
-                Total Net Charges
-              </Text>
-              <Text
-                as={"span"}
-                fontSize={"sm"}
-                fontWeight={"600"}
-                w={"30%"}
-                bg={""}
-              >
-                $ {totalAmount.toFixed(4)}
-              </Text>
-            </Box>
-          </Box>
-        </Box>
-      </FormInputMain>
+      ></FormInputMain>
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/InputComponents.jsx b/src/Pages/IO_Management/InputComponents.jsx
new file mode 100644
index 0000000..20f6fa4
--- /dev/null
+++ b/src/Pages/IO_Management/InputComponents.jsx
@@ -0,0 +1,545 @@
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  Box,
+  Divider,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Select,
+  Textarea,
+  Button,
+  Text,
+  Image,
+} from "@chakra-ui/react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { AddIcon, CloseIcon, WarningTwoIcon } from "@chakra-ui/icons";
+import { TiWarning } from "react-icons/ti";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { useNavigate } from "react-router-dom";
+import FormField from "../../Components/FormField";
+import { v4 as uuidv4 } from "uuid";
+import AddIOCharges from "./AddIOCharges";
+import FormInputMain from "../../Components/FormInputMain";
+
+const schema = yup.object().shape({
+  ioNameArabic: yup.string().required("Arabic name is required"),
+  ioName: yup.string().required("Investment Object name is required"),
+  sponserName: yup.string().required("Sponser name is required"),
+  destributedAmount: yup
+    .number()
+    .required("Distributed Amount is required")
+    .positive("Must be a positive number"),
+  year: yup.string().required("Year is required"),
+  tenure: yup
+    .number()
+    .required("Tenure is required")
+    .positive("Must be a positive number"),
+  annualReturn: yup
+    .number()
+    .required("Annual Return is required")
+    .positive("Must be a positive number"),
+  miniInvest: yup
+    .number()
+    .required("Minimum Invest is required")
+    .positive("Must be a positive number"),
+  quaterly: yup.string().required("Quaterly is required"),
+  targetClose: yup.date().required("Target close date is required"),
+  annualyield: yup
+    .number()
+    .required("Annual Yield is required")
+    .positive("Must be a positive number"),
+  banner_image: yup.mixed().required("Profile image is required"),
+  other_image: yup.mixed().required("Profile image is required"),
+});
+
+const startYear = 2024;
+const endYear = 2124;
+const years = Array.from(
+  { length: endYear - startYear + 1 },
+  (_, i) => startYear + i
+).map((year) => ({ value: year, label: year }));
+
+const InputComponents = () => {
+  const navigate = useNavigate();
+  const { sponser, setSponser, investment, setInvestment } =
+    useContext(GlobalStateContext);
+  const [bannerImageData, setBannerImageData] = useState(null);
+  const [otherImageData, setOtherImageData] = useState(null);
+  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
+  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
+  const [charges, setCharges] = useState([]);
+  const [totalCharge, setTotalCharge] = useState(0.0);
+  const [totalAmount, setTotalAmount] = useState(0.0);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  console.log(errors);
+
+  const destributedAmount = Number(watch().destributedAmount) || 0;
+
+  useEffect(() => {
+    const calculateTotalCharge = () => {
+      const totalChargeValue = charges.reduce(
+        (acc, { value }) => acc + Number(value),
+        0
+      );
+      setTotalCharge(totalChargeValue);
+    };
+
+    const calculateTotalAmount = () => {
+      const totalChargeValue = charges.reduce(
+        (acc, { value }) => acc + Number(value),
+        0
+      );
+      setTotalAmount(destributedAmount + totalChargeValue);
+    };
+
+    calculateTotalCharge();
+    calculateTotalAmount();
+  }, [charges, destributedAmount]);
+
+  const onSubmit = (data) => {
+    // setValue("banner_image", selectedBannerImageData);
+    data.banner_image = selectedBannerImageData;
+    const updatedData = { ...data, status: "Available" };
+    console.log(selectedBannerImageData);
+    setInvestment([...investment, updatedData]);
+    navigate("/view-io");
+    reset();
+  };
+
+  // Extract options for the select input
+  const sponserOptions = sponser.map((item) => ({
+    value: item.sponserName,
+    label: item.sponserName,
+  }));
+
+
+  const [investForm, setInvestForm] = useState(
+    [
+      {
+        label: "Investment object name",
+        name: "ioName",
+        type: "text",
+        isRequired: true,
+      },
+      {
+        label: "Investment object",
+        name: "ioNameArabic",
+        placeHolder: "الرجاء إدخال القيمة",
+        arabic: true,
+        isRequired: true,
+      },
+      {
+        label: "Destributed Amount",
+        placeHolder: "$00.0",
+        helperText: "Please enter value in $",
+        name: "destributedAmount",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Min Invest",
+        placeHolder: "$00.00",
+        helperText: "Please enter value in $",
+        name: "miniInvest",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Year",
+        name: "year",
+        type: "select",
+        options: years,
+        isRequired: true,
+      },
+      {
+        label: "Quaterly",
+        name: "quaterly",
+        type: "select",
+        options: [
+          { label: "Q1", value: "Q1" },
+          { label: "Q2", value: "Q2" },
+          { label: "Q3", value: "Q3" },
+          { label: "Q4", value: "Q4" },
+        ],
+        isRequired: true,
+      },
+      {
+        label: "Sponsers Name",
+        name: "sponserName",
+        type: "select",    
+        options: sponserOptions,
+        isRequired: true,
+      },
+      {
+        label: "Target close",
+        name: "targetClose",
+        type: "date",
+        isRequired: true,
+      },
+      {
+        label: "Tenure",
+        name: "tenure",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Annual yeild",
+        placeHolder: "00.00%",
+        helperText: "Please enter value in percentage",
+        name: "annualyield",
+        type: "number",
+        isRequired: true,
+      },
+      {
+        label: "Annual return",
+        placeHolder: "00.00%",
+        helperText: "Please enter value in percentage",
+        name: "annualReturn",
+        type: "number",
+        isRequired: true,
+      },
+    ]
+  );
+
+
+
+  const handleBannerImageChange = (e) => {
+    const file = e.target.files[0];
+    setBannerImageData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedBannerImageData(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  // Handler for file input
+  const handleOtherImageChange = (e) => {
+    const files = Array.from(e.target.files);
+    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
+
+    setOtherImageData(newImageData);
+
+    const readers = files.map((file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+
+    Promise.all(readers)
+      .then((results) => {
+        setSelectedOtherImageData([
+          ...(selectedOtherImageData || []),
+          ...results,
+        ]); // Ensure selectedOtherImageData is an array
+      })
+      .catch((error) => {
+        console.error("Error reading files:", error);
+      });
+  };
+  // Function to remove a specific image
+  const removeOtherImage = (index) => {
+    const newImageData = otherImageData.filter((_, i) => i !== index);
+    const newSelectedImageData = selectedOtherImageData.filter(   
+      (_, i) => i !== index
+    );
+
+    setOtherImageData(newImageData);
+    setSelectedOtherImageData(newSelectedImageData);
+  };
+
+  const formFields = [
+    {
+      label: "Investment object name",
+      name: "ioName",
+      type: "text",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Investment object (Arabic)",
+      name: "ioNameArabic",
+      placeHolder: "الرجاء إدخال القيمة",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Destributed Amount",
+      name: "destributedAmount",
+      type: "number",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Min Invest",
+      name: "miniInvest",
+      type: "number",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Sponsers name",
+      name: "sponserName",
+      type: "text",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Year",
+      name: "accountNumber",
+      type: "select",
+      options: years,
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Annual return",
+      name: "annualReturn",
+      type: "number",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Annual yeild",
+      name: "annualyield",
+      type: "number",
+      helperText: "Please enter value in percentage",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+    {
+      label: "Quaterly",
+      name: "quaterly",
+      type: "select",
+      options: [
+        {
+          label: "Q1",
+          value: "Q1",
+        },
+        {
+          label: "Q2",
+          value: "Q2",
+        },
+        {
+          label: "Q3",
+          value: "Q3",
+        },
+        {
+          label: "Q4",
+          value: "Q4",
+        },
+      ],
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+
+    {
+      label: "Target close",
+      name: "targetClose",
+      type: "date",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+
+    {
+      label: "Banner image",
+      name: "banner_image",
+      id: "banner_image",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Uplaod Banner Images",
+      multiple: false,
+      selectedImageData: selectedBannerImageData,
+      setSelectedImageData: setSelectedBannerImageData,
+      imageData: bannerImageData,
+      handleImageChange: handleBannerImageChange,
+    },
+    {
+      label: "Multi Image",
+      name: "OtherImage",
+      id: "OtherImage",
+      type: "fileNormal",
+      isRequired: true,
+      section: "Uplaod Banner Images",
+      multiple: true,
+      selectedImageData: selectedOtherImageData,
+      setSelectedImageData: setSelectedOtherImageData,
+      imageData: otherImageData,
+      handleImageChange: handleOtherImageChange,
+      removeImage: removeOtherImage,
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Divider />
+        <Heading
+          w={"100%"}
+          display={"flex"}
+          justifyContent={"space-between"}
+          as="h6"
+          size="xs"
+          mb={5}
+          pe={6}
+        >
+          Final calculation
+          <AddIOCharges charges={charges} setCharges={setCharges} />
+        </Heading>
+
+        <Box
+          w={"40%"}
+          display={"flex"}
+          justifyContent={"center"}
+          flexDirection={"column"}
+          alignItems={"start"}
+          gap={1}
+          p={5}
+          m={1}
+          rounded={"lg"}
+          boxShadow={"lg"}
+          color={"#fff"}
+          bgGradient="linear(to-tr, #000000, #004118)"
+        >
+          {charges.map(({ title, value }, index) => (
+            <Box as={"span"} w={"100%"} display={"flex"}>
+              <Text
+                fontSize={"sm"}
+                fontWeight={"600"}
+                as={"span"}
+                w={"70%"}
+                bg={""}
+              >
+                {title}
+              </Text>
+              <Text
+                as={"span"}
+                fontSize={"sm"}
+                fontWeight={"600"}
+                w={"30%"}
+                bg={""}
+              >
+                $ {value}
+              </Text>
+            </Box>
+          ))}
+
+          <Box
+            as={"span"}
+            w={"100%"}
+            display={"flex"}
+            flexDirection={"column"}
+            gap={2}
+          >
+            {totalCharge !== 0 ? (
+              <Box display={"flex"}>
+                <Text
+                  fontSize={"sm"}
+                  fontWeight={"500"}
+                  as={"span"}
+                  w={"70%"}
+                  bg={""}
+                >
+                  Total charges
+                </Text>
+                <Text
+                  as={"span"}
+                  fontSize={"sm"}
+                  fontWeight={"600"}
+                  w={"30%"}
+                  bg={""}
+                >
+                  $ {totalCharge.toFixed(4)}
+                </Text>
+              </Box>
+            ) : (
+              ""
+            )}
+
+            <Box display={"flex"}>
+              <Text
+                fontSize={"sm"}
+                fontWeight={"500"}
+                as={"span"}
+                w={"70%"}
+                bg={""}
+              >
+                Total distributed amount
+              </Text>
+              <Text
+                as={"span"}
+                fontSize={"sm"}
+                fontWeight={"600"}
+                w={"30%"}
+                bg={""}
+              >
+                $ {destributedAmount.toFixed(4)}
+              </Text>
+            </Box>
+
+            <Box pt={2} borderTop={"1px solid #fff"} as="span" display={"flex"}>
+              <Text
+                fontSize={"sm"}
+                fontWeight={"500"}
+                as={"span"}
+                w={"70%"}
+                bg={""}
+              >
+                Total Net Charges
+              </Text>
+              <Text
+                as={"span"}
+                fontSize={"sm"}
+                fontWeight={"600"}
+                w={"30%"}
+                bg={""}
+              >
+                $ {totalAmount.toFixed(4)}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      </FormInputMain>
+    </Box>
+  );
+};
+
+export default InputComponents;
diff --git a/src/Pages/InvestorUpgrade/UpgradeHistory.jsx b/src/Pages/InvestorUpgrade/UpgradeHistory.jsx
index 5957008..cee2d04 100644
--- a/src/Pages/InvestorUpgrade/UpgradeHistory.jsx
+++ b/src/Pages/InvestorUpgrade/UpgradeHistory.jsx
@@ -1,22 +1,220 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const UpgradeHistory = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import DataTable from "../../Components/DataTable/DataTable";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import { formatDate } from "../../Components/Functions/UTCConvertor";
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+// import { formatDate } from "../../Components/Functions/UTCConvertor";
 
-export default UpgradeHistory
\ No newline at end of file
+const UpgradeHistory = () => {
+  const toast = useToast();
+  const { slideFromRight, upgradeHistory, setUpgradeHistory } =
+    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 Filter]================================================================
+  const filteredData = upgradeHistory.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.Distribution;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Date",
+    "Distribution Amount",
+    "Charges (USD)",
+    "Year",
+    "Quater",
+    "Action",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {index + 1}.
+      </Text>
+    ),
+    "Date": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {formatDate(item.date)}
+      </Text>
+    ),
+    "Distribution Amount": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center  web-text-small"
+        fontWeight={'500'}
+      >
+        {item.Distribution}
+      </Text>
+    ),
+    "Charges (USD)": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.charge}
+        {/* {formatDate(item.charge)} */}
+      </Text>
+    ),
+    Year: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.800"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.year}
+      </Text>
+    ),
+    Quater: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.quarter}
+      </Text>
+    ),
+    Action: (
+      <Box display={'flex'} justifyContent={'space-around'}>
+        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Accept' bg='#fff' color={'green.500'} placement="left-start">
+        <Button color="green.500"   rounded={'sm'} size={'xs'}>
+        <CheckIcon /></Button></Tooltip>
+        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Reject' bg='#fff' color={'red.500'} placement="left-start">
+        <Button color="red.500" rounded={'sm'} size={'xs'}>
+        <CloseIcon /></Button></Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const upgradeHistory = upgradeHistory.filter(
+      (upgradeHistory) => upgradeHistory.id !== actionId
+    );
+
+    setTimeout(() => {
+      setSponser(upgradeHistory);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          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
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default UpgradeHistory;
diff --git a/src/Pages/Investor_Management/InvestorTransactions.jsx b/src/Pages/Investor_Management/InvestorTransactions.jsx
index e43d1ce..1f2afeb 100644
--- a/src/Pages/Investor_Management/InvestorTransactions.jsx
+++ b/src/Pages/Investor_Management/InvestorTransactions.jsx
@@ -1,22 +1,228 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const InvestorTransactions = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Portal,
+  Select,
+  Switch,
+  Tag,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import DataTable from "../../Components/DataTable/DataTable";
+import { HiDotsVertical } from "react-icons/hi";
+import { Link, Link as RouterLink } from "react-router-dom";
+import { AddIcon, EmailIcon } from "@chakra-ui/icons";
+import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import ToastBox from "../../Components/ToastBox";
+import { debounce } from "../Master/Sponser/AddSponser";
 
-export default InvestorTransactions
\ No newline at end of file
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const InvestorTransactions = () => { 
+  const toast = useToast();
+  const { investorTransaction, setInvestorTransaction, 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 N/O",
+    "Investor Name",
+    "Sponsor",
+    "Investment Amount",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setInvestorDetails((prevData) =>
+      prevData.map((investorTransaction) =>
+        investorTransaction.id === id ? { ...investorTransaction } : investorTransaction
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = investorTransaction.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.InvestorName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  const extractedArray = filteredData?.map((item) => ({
+    id: item?.id,
+    "Sr N/O": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {item.id}
+      </Text>
+    ),
+    "Investor Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.InvestorName}
+        </Text>
+      </Box>
+    ),
+    Sponsor: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.Sponsor}
+        </Text>
+      </Box>
+    ),
+    "Investment Amount": (
+      // <Switch
+      //   size={"sm"}
+      //   color="green"
+      //   onChange={() => handleUpdateStatus(item.id)}
+      //   isChecked={item.status}
+      // />
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.InvestmentAmount} $
+        </Text>
+      </Box>
+    ),
+
+    // item?.status ? (
+    //   <Badge bg={'transparent'} color={"#05c46b"}>
+    //     Passed
+    //   </Badge>
+    // ) : (
+    //   <Badge bg={'transparent'} color={"#f53b57"}>
+    //     Not passes
+    //   </Badge>
+    // ),
+
+    Action: (
+          <Button 
+          color={"green.500"} size={"xs"} variant={"ghost"}>
+        Distribute
+       </Button>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedInvestorTransaction = investorTransaction.filter(
+      (investorTransaction) => investorTransaction.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestorTransaction(updatedInvestorTransaction);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          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} />
+
+            <Link to={""}>
+              <Button
+                leftIcon={<AddIcon />}
+                colorScheme={"green"}
+                rounded={"sm"}
+                size={"sm"}
+              >
+                Add sponsers
+              </Button>
+            </Link>
+          </HStack>
+        </HStack>
+      </Box>
+
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default InvestorTransactions;
diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
index c5f8058..317c796 100644
--- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
@@ -1,6 +1,8 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import { Box, Divider, Heading, Button, Text } from "@chakra-ui/react";
+import {
+  Box,
+} from "@chakra-ui/react";
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -10,8 +12,9 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { useNavigate } from "react-router-dom";
 import FormField from "../../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
+import FormInputMain from "../../../Components/FormInputMain";
 
-const schema = yup.object().shape({
+export const addInvestmentType = yup.object().shape({
   investmentName: yup.string().required("Investment name is required"),
   // investmentNameArabic: yup.string().required("Investment name is required"),
   // mobileNo: yup.string().required("Mobile no is required"),
@@ -42,17 +45,153 @@ export function debounce(func, delay) {
 }
 
 const AddInvestmentType = () => {
+
   const navigate = useNavigate();
+  const [bannerImageData, setBannerImageData] = useState(null);
   const { investmentType, setInvestmentType } = useContext(GlobalStateContext);
+  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
+
+  const [otherImageData, setOtherImageData] = useState(null);
+  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
   const {
     control,
     handleSubmit,
     formState: { errors },
   } = useForm({
-    resolver: yupResolver(schema),
+    resolver: yupResolver(addInvestmentType),
   });
 
-  console.log(errors);
+  const handleBannerImageChange = (e) => {
+    const file = e.target.files[0];
+    setBannerImageData(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedBannerImageData(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  // Handler for file input
+  const handleOtherImageChange = (e) => {
+    const files = Array.from(e.target.files);
+    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
+
+    setOtherImageData(newImageData);
+
+    const readers = files.map((file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    });
+
+    Promise.all(readers)
+      .then((results) => {
+        setSelectedOtherImageData([
+          ...(selectedOtherImageData || []),
+          ...results,
+        ]); // Ensure selectedOtherImageData is an array
+      })
+      .catch((error) => {
+        console.error("Error reading files:", error);
+      });
+  };
+
+  // Function to remove a specific image
+  const removeOtherImage = (index) => {
+    const newImageData = otherImageData.filter((_, i) => i !== index);
+    const newSelectedImageData = selectedOtherImageData.filter(
+      (_, i) => i !== index
+    );
+
+    setOtherImageData(newImageData);
+    setSelectedOtherImageData(newSelectedImageData);
+  };
+
+  console.log(selectedBannerImageData);
+
+  const formFields = [
+    {
+      label: "Investment name",
+      name: "investmentName",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Investment Name (Arabic)",
+      name: "investmentNameArabic",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      name: "mobileNo",
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Investment address",
+      name: "investmentAddress",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      name: "bankName",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      name: "accountNumber",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      name: "swiftCode",
+      type: "number",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Annual yeild",
+      name: "annualyield",
+      type: "number",
+      helperText: "Please enter value in percentage",
+      isRequired: true,
+      section: "Investment Object Details",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
 
   const onSubmit = (data) => {
     setInvestmentType([
@@ -67,110 +206,15 @@ const AddInvestmentType = () => {
     navigate("/investment-type");
   };
 
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Heading as="h6" size="xs" mt={4}>
-          Personal Details
-        </Heading>
-        <Box display={"flex"} gap={0}>
-          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-            <FormField
-              height={"2.5rem"}
-              label="Investment Name (English)"
-              name="investmentName"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              height={"2.5rem"}
-              label="Investment Name (Arabic)"
-              // placeHolder={"الرجاء إدخال القيمة"}
-              placeHolder={"Investment Name (Arabic)"}
-              name="investmentNameArabic"
-              control={control}
-              errors={errors}
-              isRequired={true}
-              arabic={true}
-            />
-            <FormField
-              label="Description (English)"
-              name="description"
-              type="textarea"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              label="Description (Arabic)"
-              name="descriptionArabic"
-              type="textarea"
-              control={control}
-              errors={errors}
-              isRequired={true}
-              arabic={true}
-            />
-          </Box>
-        </Box>
-
-        {/* <Heading as="h6" size="xs" mt={4}>
-          Bank Details
-        </Heading>
-        <Box display={"flex"} gap={0}>
-          {Array(1).fill(
-            <Box
-              width={"100%"}
-              p={5}
-              display={"flex"}
-              flexWrap={"wrap"}
-              gap={4}
-            >
-              <FormField
-                label="Bank Name"
-                name="bankName"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              <FormField
-                label="Account Number"
-                name="accountNumber"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              <FormField
-                label="SWIFT/BIC Code"
-                name="swiftCode"
-                control={control}
-                errors={errors}
-                isRequired={true}
-              />
-              <FormField
-                label="Bank Email (optional)"
-                name="bankEmail"
-                control={control}
-                errors={errors}
-              />
-            </Box>
-          )}
-        </Box> */}
-
-        <Box display={"flex"} justifyContent={"flex-end"} p={5}>
-          <Button
-            padding={"0 3rem"}
-            borderRadius={"5px"}
-            size={"sm"}
-            width={"auto"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme="green"
-          >
-            Submit
-          </Button>
-        </Box>
-      </form>
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
index 447bd30..8caba41 100644
--- a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
@@ -3,156 +3,155 @@ import { useParams } from "react-router-dom";
 import { useContext, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import FormField from "../../../Components/FormField";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import AddInvestmentType from "./AddInvestmentType";
+import FormInputMain from "../../../Components/FormInputMain";
+import { addInvestmentType } from "./AddInvestmentType";
 
 const EditInvestmentType = () => {
   const params = useParams();
-  const { investmentType } = useContext(GlobalStateContext);
+  const { investmentType } = useContext(GlobalStateContext); 
   const [foundObject, setFoundObject] = useState(null);
-
-
   const {
     control,
     handleSubmit,
     reset,
+    getValues,
     formState: { errors },
   } = useForm({
-    resolver: yupResolver(AddInvestmentType),
-    defaultValues: {
-      investmentName: foundObject?.investmentName,
-      mobileNo: foundObject?.mobileNo,
-      investmentAddress: foundObject?.investmentAddress,
-      bankName: foundObject?.bankName,
-      accountNumber: foundObject?.accountNumber,
-      swiftCode: foundObject?.swiftCode,
-      bankEmail: foundObject?.bankEmail,
-    },
+    resolver: yupResolver(addInvestmentType),
   });
 
   useEffect(() => {
-    // console.log(investmentName);
+    console.log(investmentType);
     const id = params?.id;
     console.log(id);
 
     // Ensure id is compared correctly
     const found = investmentType.find((item) => item?.id.toString() === id.toString());
-    console.log(found);
+    console.log(found?.swiftCode);
     setFoundObject(found);
 
     if (found) {
       reset({
         investmentName: found.investmentName,
+        sponserNameArabic: found.sponserNameArabic,
         mobileNo: found.mobileNo,
         investmentAddress: found.investmentAddress,
         bankName: found.bankName,
-        accountNumber: found.accountNumber,
         swiftCode: found.swiftCode,
+        accountNumber: found.accountNumber,
         bankEmail: found.bankEmail,
       });
     }
   }, [params, investmentType, reset]);
 
-   const onSubmit = (data)=> {
-     console.log(data);
-  }
+
+
+
 
   if (!foundObject) {
     return <Box>Loading...</Box>; // or any loading indicator
   }
 
+  const formFields = [
+    {
+      label: "Investment name",
+      name: "investmentName",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Investment Name (Arabic)",
+      name: "investmentNameArabic",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      name: "mobileNo",
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Investment address",
+      name: "investmentAddress",
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      name: "bankName",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      name: "accountNumber",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      name: "swiftCode",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      name: "bankEmail",
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+  ];
 
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const onSubmit = (data) => {
+    setInvestmentType([
+      {
+        ...data,
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+      },
+      ...investmentType,
+    ]);
+    navigate("/investment-type");
+  }
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Box display={"flex"} gap={0}>
-          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-            <FormField
-              label="Investment name"
-              name="investmentName"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              placeHolder={"الرجاء إدخال القيمة"}
-              name="اسم الراعي"
-              control={control}
-              errors={errors}
-              isRequired={true}
-              arabic={true}
-            />
-            <FormField
-              label="Mobile no"
-              name="mobileNo"
-              type="tel"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              label="Investment address"
-              name="investmentAddress"
-              type="textarea"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-          </Box>
-        </Box>
+    <FormInputMain
+      groupedFields={groupedFields}
+      control={control}
+      errors={errors}
 
-        <Divider />
-
-        <Heading as="h6" size="xs" mt={4}>
-          Bank Details
-        </Heading>
-        <Box display={"flex"} gap={0}>
-          <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-            <FormField
-              label="Bank Name"
-              name="bankName"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              label="Account Number"
-              name="accountNumber"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              label="SWIFT/BIC Code"
-              name="swiftCode"
-              control={control}
-              errors={errors}
-              isRequired={true}
-            />
-            <FormField
-              label="Bank Email (optional)"
-              name="bankEmail"
-              control={control}
-              errors={errors}
-            />
-          </Box>
-        </Box>
-
-        <Box display={"flex"} justifyContent={"flex-end"} p={4}>
-          <Button
-            size={"sm"}
-            width={"49.5%"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme="green"
-          >
-            Submit
-          </Button>
-        </Box>
-      </form>
+      onSubmit={handleSubmit(onSubmit)}
+    />
     </Box>
   );
 };
diff --git a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
index c3c4171..33f2a3f 100644
--- a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
@@ -1,64 +1,103 @@
 import {
   Box,
-  Button,
-  FormControl,
-  FormLabel,
-  Image,
-  Text,
 } from "@chakra-ui/react";
-// import error from "../assets/Error.svg"
-import robot from "../../../assets/robot.png";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import { useNavigate, useParams } from "react-router-dom";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import { useContext } from "react";
-import { ArrowBackIcon } from "@chakra-ui/icons";
-// import robot from "../assets/robot.png"
+import { useContext, useEffect, useState } from "react";
+import FormInputView from "../../../Components/FormInputView";
+import { useForm } from "react-hook-form"; // assuming react-hook-form is used
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+
 const ViewInvestmentType = () => {
   const navigate = useNavigate();
   const params = useParams();
-  const { investmentType } = useContext(GlobalStateContext);
-  const id = params?.id;
+  const { investmentType } = useContext(GlobalStateContext); 
+  const { reset } = useForm(); // assuming react-hook-form
 
-  const found = investmentType.find(
-    (item) => item?.id.toString() === id.toString()
-  );
+ 
+  const id = params?.id;
+  const foundObject = investmentType.find((item) => item?.id.toString() === id.toString());
+
+
+
+  if (!foundObject) {
+    return <Box>Loading...</Box>;
+  }
+
+  const formFields = [
+    {
+      label: "Investment name",
+      value: foundObject.investmentName,
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Investment Name (Arabic)",
+      value: foundObject.investmentName,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Mobile no",
+      value: foundObject.mobileNo,
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Investment address",
+      value: foundObject.investmentAddress,
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      value: foundObject.bankName,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      value: foundObject.accountNumber,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      value: foundObject.swiftCode,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      value: foundObject.bankEmail,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <ArrowBackIcon cursor={"pointer"} onClick={() => navigate(-1)} />
-
-      <Box display={"flex"} gap={0}>
-        <Box width={"100%"} p={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-          <FormControl w={"49%"} mb={3}>
-            <FormLabel color={"gray.500"} fontSize={"sm"}>
-              Investment name
-            </FormLabel>
-            <FormLabel fontSize={"sm"}>{found?.investmentName}</FormLabel>
-          </FormControl>
-
-          <FormControl w={"49%"} mb={3}>
-            <FormLabel color={"gray.500"} fontSize={"sm"}>
-              Inves name ( Arabic )
-            </FormLabel>
-            <FormLabel fontSize={"sm"}>{found?.investmentName}</FormLabel>
-          </FormControl>
-
-          {/* <FormControl w={"49%"} mb={3}>
-            <FormLabel color={"gray.500"} fontSize={"sm"}>
-              ADDRESS
-            </FormLabel>
-            <FormLabel fontSize={"sm"}>{found?.investmentAddress}</FormLabel>
-          </FormControl> */}
-
-          {/* <FormControl w={"49%"} mb={3}>
-            <FormLabel color={"gray.500"} fontSize={"sm"}>
-              Moobile no
-            </FormLabel>
-            <FormLabel fontSize={"md"}>{found?.mobileNo}</FormLabel>
-          </FormControl> */}
-        </Box>
-      </Box>
+      <FormInputView
+          groupedFields={groupedFields}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 03526b6..238d22c 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -56,22 +56,21 @@ const AddSponser = () => {
   const [bannerImageData, setBannerImageData] = useState(null);
   const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
 
-  
   const [otherImageData, setOtherImageData] = useState(null);
   const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
 
-
-
   const { sponser, setSponser } = useContext(GlobalStateContext);
   const {
     control,
+
     handleSubmit,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(addSponser),
   });
 
-  
+  console.log(errors);
+
   const handleBannerImageChange = (e) => {
     const file = e.target.files[0];
     setBannerImageData(file);
@@ -84,9 +83,8 @@ const AddSponser = () => {
     }
   };
 
-
-   // Handler for file input
-   const handleOtherImageChange = (e) => {
+  // Handler for file input
+  const handleOtherImageChange = (e) => {
     const files = Array.from(e.target.files);
     const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
 
@@ -126,73 +124,117 @@ const AddSponser = () => {
     setSelectedOtherImageData(newSelectedImageData);
   };
 
-console.log(selectedBannerImageData);
-  
+  // console.log(selectedBannerImageData);
+
   const formFields = [
     {
-      label: "Sponser name",
+      label: "Sponser name (English)",
+      placeHolder:" ",
       name: "sponserName",
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
       label: "Sponser Name (Arabic)",
       name: "sponserNameArabic",
+      placeHolder:" ",
       type: "text",
       isRequired: true,
       arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Mobile no",
-      name: "mobileNo",
-      type: "number",
+      label: "Description (English)",
+      name: "description",
+      placeHolder:" ",
+      type: "textarea",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Sponser address",
-      name: "sponserAddress",
+      label: "Description (Arabic)",
+      name: "descriptionArabic",
+      placeHolder:" ",
+      type: "textarea",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Address (English)",
+      name: "sponserAddress", 
+      placeHolder:" ",
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
-      label: "Bank name",
+      label: "Address (Arabic)",
+      name: "sponserAddressArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Bank Name (English)",
       name: "bankName",
+      placeHolder:" ",
       type: "text",
       isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
     },
     {
-      label: "Account Name",
+      label: "Bank Name (Arabic)",
+      name: "bankNameArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (English)",
+      name: "accountHolderName",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Name (Arabic)",
+      name: "accountHolderNameArabic",
+      placeHolder:" ",
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Add Details",
+    },
+    {
+      label: "Mobile Number (English)",
+      name: "mobileNo",
+      placeHolder:" ",
+      type: "number",
+      isRequired: true,
+      section: "Add Details",
+    },
+    {
+      label: "Account Number (English)",
       name: "accountNumber",
+      placeHolder:" ",
       type: "text",
       isRequired: true,
-      section: "Bank Details",
+      section: "Add Details",
     },
     {
-      label: "SWIFT/BIC Code",
+      label: "IFSC Code (English)",
+      placeHolder:" ",
       name: "swiftCode",
-      type: "number",
-      isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Account Email",
-      name: "bankEmail",
       type: "text",
       isRequired: true,
-      section: "Bank Details",
-    },
-    {
-      label: "Annual yeild",
-      name: "annualyield",
-      type: "number",
-      helperText: "Please enter value in percentage",
-      isRequired: true,
-      section: "Investment Object Details",
+      section: "Add Details",
     },
   ];
 
@@ -205,8 +247,8 @@ console.log(selectedBannerImageData);
     return groups;
   }, {});
 
-
   const onSubmit = (data) => {
+    console.log(data);
     setSponser([
       {
         ...data,
@@ -221,14 +263,13 @@ console.log(selectedBannerImageData);
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-    <FormInputMain
-      groupedFields={groupedFields}
-      control={control}
-      errors={errors}
-
-      onSubmit={handleSubmit(onSubmit)}
-
-    /></Box>
+      <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 7c50e6e..70b86d6 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -335,8 +335,6 @@ const Sponser = () => {
         isLoading={isLoading}
         viewActionId={actionId}
         setViewActionId={setActionId}
-        // totalPages={10}
-
         setMouseEnteredId={setMouseEnteredId}
         setMouseEntered={setMouseEntered}
       />
diff --git a/src/Pages/Master/Sponser/ViewSponser.jsx b/src/Pages/Master/Sponser/ViewSponser.jsx
index 9b53c77..1a0882a 100644
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -1,100 +1,97 @@
-import {
-  Box,
-  Button,
-  Divider,
-  FormControl,
-  FormLabel,
-  Heading,
-  Image,
-  Text,
-} from "@chakra-ui/react";
-// import error from "../assets/Error.svg"
-import robot from "../../../assets/robot.png";
-import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import { Box } from "@chakra-ui/react";
 import { useNavigate, useParams } from "react-router-dom";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import { useContext } from "react";
-// import robot from "../assets/robot.png"
+import { useContext, useEffect, useState } from "react";
+import FormInputView from "../../../Components/FormInputView";
+import { useForm } from "react-hook-form"; // assuming react-hook-form is used
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+
 const ViewSponser = () => {
   const params = useParams();
-  const navigate = useNavigate()
   const { sponser } = useContext(GlobalStateContext);
+  const { reset } = useForm(); // assuming react-hook-form
+
   const id = params?.id;
+  const foundObject = sponser.find(
+    (item) => item?.id.toString() === id.toString()
+  );
 
-  const found = sponser.find((item) => item?.id.toString() === id.toString());
+  if (!foundObject) {
+    return <Box>Loading...</Box>;
+  }
 
-  const personalDetails = [
+  const formFields = [
     {
-      title: "Sponser Name",
-      value: found?.sponserName,
+      label: "Sponser name",
+      value: foundObject.sponserName,
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
     },
     {
-      title: "Sponser Name (Arabic)",
-      value: found?.sponserNameArabic,
+      label: "Sponser Name (Arabic)",
+      value: foundObject.sponserName,
+      type: "text",
+      isRequired: true,
+      arabic: true,
+      section: "Personal Details",
     },
     {
-      title: "Mobile no",
-      value: found?.mobileNo,
+      label: "Mobile no",
+      value: foundObject.mobileNo,
+      type: "number",
+      isRequired: true,
+      section: "Personal Details",
     },
     {
-      title: "Sponser address",
-      value: found?.sponserAddress,
+      label: "Sponser address",
+      value: foundObject.sponserAddress,
+      type: "text",
+      isRequired: true,
+      section: "Personal Details",
+    },
+    {
+      label: "Bank name",
+      value: foundObject.bankName,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Name",
+      value: foundObject.accountNumber,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "SWIFT/BIC Code",
+      value: foundObject.swiftCode,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
+    },
+    {
+      label: "Account Email",
+      value: foundObject.bankEmail,
+      type: "text",
+      isRequired: true,
+      section: "Bank Details",
     },
   ];
 
-  const bankDetails = [
-    {
-      title: "Bank Name",
-      value: found?.bankName,
-    },
-    {
-      title: "Account number",
-      value: found?.accountNumber,
-    },
-    {
-      title: "SWIFT/BIC Code",
-      value: found?.swiftCode,
-    },
-    {
-      title: "Account Email",
-      value: found?.bankEmail,
-    },
-  ];
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <Heading display={'flex'} justifyContent={'space-between'} pe={4} as="h6" size="xs" mt={3}>
-        Personal Details <Button colorScheme="green" size={'xs'} rounded={'sm'} onClick={() => navigate(`/sponser/edit-sponser/${id}`)} >Edit sponsers</Button>
-      </Heading>
-      <Box display={"flex"} gap={0}>
-        <Box width={"100%"} pt={5} mb={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-          {personalDetails?.map(({ title, value }, index) => (
-            <FormControl className="border-end" key={index} w={"49%"} mb={0}>
-              <FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"} color={"gray.500"} fontSize={"xs"}>
-                {title}
-              </FormLabel>
-              <FormLabel textAlign={title === "Sponser Name (Arabic)" ? "right": "left"}  fontSize={"sm"}>{value}</FormLabel>
-            </FormControl>
-          ))}
-        </Box>
-      </Box>
-
-      <Divider />
-      <Heading as="h6" size="xs" mt={0}>
-        Bank Details
-      </Heading>
-      <Box display={"flex"} gap={0}>
-        <Box width={"100%"} pt={5} display={"flex"} flexWrap={"wrap"} gap={4}>
-          {bankDetails?.map(({ title, value }, index) => (
-            <FormControl  className="border-end" key={index} w={"49%"} mb={0}>
-              <FormLabel color={"gray.500"} fontSize={"xs"}>
-                {title}
-              </FormLabel>
-              <FormLabel fontSize={"sm"}>{value}</FormLabel>
-            </FormControl>
-          ))}
-        </Box>
-      </Box>
+      <FormInputView groupedFields={groupedFields} />
     </Box>
   );
 };
diff --git a/src/Pages/RubixRefencePages/Events/EditEvents.jsx b/src/Pages/RubixRefencePages/Events/EditEvents.jsx
index c26223f..f795667 100644
--- a/src/Pages/RubixRefencePages/Events/EditEvents.jsx
+++ b/src/Pages/RubixRefencePages/Events/EditEvents.jsx
@@ -79,9 +79,7 @@ const EditEvents = () => {
 
   useEffect(() => {
     if (data?.data) {
-      setSelectedImage(
-        `${API_URL}/${data?.data?.banner_image}`
-      );
+      setSelectedImage(`${API_URL}/${data?.data?.banner_image}`);
       setValue("title", data?.data?.title);
       setValue("content", data?.data?.content);
       setValue("location", data?.data?.location);
@@ -108,7 +106,6 @@ const EditEvents = () => {
     }
   };
 
-
   const onSubmit = (data) => {
     setIsLoadingEdit(true);
     const formData = new FormData();
@@ -119,27 +116,18 @@ const EditEvents = () => {
     formData.append("organizer_mobile_number", data.organizer_mobile_number);
     formData.append("organizer_email", data.organizer_email);
 
-
     if (eventsDate.length === 0) {
       setIsLoadingEdit(false);
       return toast({
         render: () => (
           <ToastBox status={"warn"} message={"Please add events date"} />
         ),
-      })
-    }else{
-        eventsDate.forEach((date, index) => {
-          formData.append(`dates[${index}]`, date);
-        });
-      }
-
-
-  
-
-    
-
-
-
+      });
+    } else {
+      eventsDate.forEach((date, index) => {
+        formData.append(`dates[${index}]`, date);
+      });
+    }
 
     if (data.banner_image[0]) {
       formData.append("banner_image", data.banner_image[0]);
@@ -182,7 +170,6 @@ const EditEvents = () => {
       });
   };
 
-
   return isLoading ? (
     <FullscreenLoaders />
   ) : (
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index aeb6d68..54b6a7c 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -8,7 +8,8 @@ import Contact from "../Pages/Admin/Contact";
 import Notification from "../Pages/Admin/Notification";
 import Users from "../Pages/Admin/Users";
 import CreateIO from "../Pages/IO_Management/CreateIO";
-import Create from "../Pages/IO_Management/CreateIO";
+// import CreateIO from "../Pages/IO_Management/InputComponents";
+import Create from "../Pages/IO_Management/InputComponents";
 import ViewIO from "../Pages/IO_Management/ViewIO";
 import View from "../Pages/IO_Management/ViewIO";
 import InvestorPendingRequest from "../Pages/InvestorUpgrade/InvestorRequest";