diff --git a/src/Components/InvestmentCard/InvestmentCard.jsx b/src/Components/InvestmentCard/InvestmentCard.jsx
index 6b08414..13ed3af 100644
--- a/src/Components/InvestmentCard/InvestmentCard.jsx
+++ b/src/Components/InvestmentCard/InvestmentCard.jsx
@@ -16,7 +16,7 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
 const InvestmentCard = ({ investment }) => {
   return (
     <Card
-    {...OPACITY_ON_LOAD}
+      {...OPACITY_ON_LOAD}
       direction={{ base: "column", sm: "row" }}
       variant="outline"
       display={"flex"}
@@ -24,7 +24,7 @@ const InvestmentCard = ({ investment }) => {
       mb={"20px"}
       boxShadow={"md"}
       border={"none"}
-  mt={2}
+      mt={2}
     >
       <Image
         p={"14px"}
@@ -32,14 +32,14 @@ const InvestmentCard = ({ investment }) => {
         objectFit="cover"
         w={"200px"}
         h={"140px"}
-        src={investment?.imgSrc}
-        alt={investment?.title}
+        src={investment?.banner_image}
+        alt={investment?.ioName}
       />
 
       <Stack w={"38%"}>
         <CardBody>
           <Heading size="sm" fontWeight={"500"}>
-            {investment?.title}
+            {investment?.ioName}
             <Badge
               colorScheme={
                 investment?.status === "Available"
@@ -48,7 +48,10 @@ const InvestmentCard = ({ investment }) => {
                   ? "green"
                   : "red"
               }
-              ps={2} pe={2} pt={0.5} pb={0.5}
+              ps={2}
+              pe={2}
+              pt={0.5}
+              pb={0.5}
               fontSize={"xs"}
               ms={3}
             >
@@ -60,75 +63,88 @@ const InvestmentCard = ({ investment }) => {
             </Badge>
           </Heading>
           <Text fontSize="sm" mb={"4px"}>
-            Sponsor:{" "}
+            Sponsor: 
             <Text as={"span"} fontWeight={"600"}>
-              {investment?.sponsor}
-            </Text>{" "}
+              {investment?.sponserName}
+            </Text>
           </Text>
           <Text fontSize="sm" mb={"4px"}>
-            Ann return:{" "}
+            Ann return: 
             <Text as={"span"} fontWeight={"600"}>
-              {investment?.annReturn}
-            </Text>{" "}
+              {investment?.annualReturn}
+            </Text>
           </Text>
           <Text fontSize="sm" mb={"4px"}>
-            Ann Yield:{" "}
+            Ann Yield: 
             <Text as={"span"} fontWeight={"600"}>
-              {investment?.annYield}
-            </Text>{" "}
+              {investment?.annualyield}
+            </Text>
+          </Text>
+          <Text fontSize="sm" mb={"4px"}>
+            Tenure: 
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.tenure}
+            </Text>
+          </Text>
+          <Text fontSize="sm" mb={"4px"}>
+            Quaterly: 
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.quaterly}
+            </Text>
           </Text>
         </CardBody>
       </Stack>
       <Stack borderLeft={"1px solid #ccc"}>
         <CardBody>
+        <Text fontSize="sm" mb={"4px"}>
+              Destributed Amount: 
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.destributedAmount}
+            </Text>
+          </Text>
           <Text fontSize="sm" mb={"4px"}>
-            Min.Invests:{" "}
+            Min.Invests:
             <Text as={"span"} fontWeight={"600"}>
               {investment?.minInvests}
-            </Text>{" "}
+            </Text>
           </Text>
           <Text fontSize="sm" mb={"4px"}>
-            Targ Close:{" "}
+            Targ Close:
             <Text as={"span"} fontWeight={"600"}>
-              {investment?.targClose}
-            </Text>{" "}
+              {new Date(investment?.targetClose).toLocaleDateString()}
+            </Text>
           </Text>
           <Text fontSize="sm" mb={"4px"}>
-            Holding per:{" "}
+            Year: 
             <Text as={"span"} fontWeight={"600"}>
-              {investment?.holdingPer}
-            </Text>{" "}
+              {investment?.year}
+            </Text>
           </Text>
         </CardBody>
       </Stack>
       <Stack>
         <CardBody>
-
-          <Box as="span" display={'flex'} justifyContent={'space-between'} mb={1}>
-                <Text fontSize={'xs'} fontWeight={500} as={'span'}>$ 500,000.450</Text>
-                <Text fontSize={'xs'} fontWeight={500}  as={'span'}>{investment?.progressValue} % Funded</Text>
+          <Box
+            as="span"
+            display={"flex"}
+            justifyContent={"space-between"}
+            mb={1}
+          >
+            <Text fontSize={"xs"} fontWeight={500} as={"span"}>
+              $ 500,000.450
+            </Text>
+            <Text fontSize={"xs"} fontWeight={500} as={"span"}>
+              75 % Funded
+            </Text>
           </Box>
-          {/* <Tooltip
-            hasArrow
-            placement="top-start"
-            label={`${investment?.progressValue}%`}
-            bg="white"
-            color="#000"
-            fontSize={'xs'}
-          > */}
-            <Progress
-              width={"200px"}
-              value={investment?.progressValue}
-              rounded={"10px"}
-              colorScheme={"green"}
-              size={"sm"}
-            />
-          {/* </Tooltip> */}
-
-
-
+          <Progress
+            width={"200px"}
+            value={75} // Assuming a static progress value
+            rounded={"10px"}
+            colorScheme={"green"}
+            size={"sm"}
+          />
           <Button
-            // variant='ghost'
             w={"100%"}
             colorScheme={"gray"}
             rounded={"sm"}
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 7c802db..029f3da 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -263,47 +263,302 @@ const GlobalStateProvider = ({ children }) => {
       createdAt: "6",
     },
   ]);
+  
+  const [investmentType, setInvestmentType] = useState([
+    {
+      id: 1,
+      investmentName: "John Doe",
+      mobileNo: "1234567890",
+      sponserAddress: "123 Main St, Springfield, USA",
+      accountHolderName: "John Doe",
+      bankName: "Example Bank",
+      accountNumber: "1234567890",
+      bankBranch: "Main Branch",
+      branchAddress: "456 Elm St, Springfield, USA",
+      ifscCode: "IFSC12345",
+      swiftCode: "SWIFT56789",
+      routingNumber: "987654321",
+      iban: "IBAN987654321",
+      accountType: "savings",
+      bankPhoneNumber: "9876543210",
+      bankEmail: "john.doe@example.com",
+      status: true,
+      createdAt: "45",
+    },
+    {
+      id: 2,
+      investmentName: "Jane Smith",
+      mobileNo: "9876543210",
+      sponserAddress: "456 Oak St, Metropolis, USA",
+      accountHolderName: "Jane Smith",
+      bankName: "Another Bank",
+      accountNumber: "0987654321",
+      bankBranch: "Downtown Branch",
+      branchAddress: "789 Pine St, Metropolis, USA",
+      ifscCode: "IFSC54321",
+      swiftCode: "SWIFT98765",
+      routingNumber: "123456789",
+      iban: "IBAN123456789",
+      accountType: "checking",
+      bankPhoneNumber: "1234567890",
+      bankEmail: "jane.smith@example.com",
+      status: false,
+      createdAt: "45",
+    },
+    {
+      id: 3,
+      investmentName: "Alice Johnson",
+      mobileNo: "1231231234",
+      sponserAddress: "789 Pine St, Gotham, USA",
+      accountHolderName: "Alice Johnson",
+      bankName: "Gotham Bank",
+      accountNumber: "5678901234",
+      bankBranch: "Uptown Branch",
+      branchAddress: "101 Oak St, Gotham, USA",
+      ifscCode: "IFSC67890",
+      swiftCode: "SWIFT34567",
+      routingNumber: "987654321",
+      iban: "IBAN345678901",
+      accountType: "business",
+      bankPhoneNumber: "5556667777",
+      bankEmail: "alice.johnson@example.com",
+      status: true,
+      createdAt: "12",
+    },
+    {
+      id: 4,
+      investmentName: "Bob Brown",
+      mobileNo: "3213214321",
+      sponserAddress: "101 Maple St, Smallville, USA",
+      accountHolderName: "Bob Brown",
+      bankName: "Smallville Credit Union",
+      accountNumber: "5432109876",
+      bankBranch: "Main Street Branch",
+      branchAddress: "202 Pine St, Smallville, USA",
+      ifscCode: "IFSC43210",
+      swiftCode: "SWIFT87654",
+      routingNumber: "123456789",
+      iban: "IBAN567890123",
+      accountType: "savings",
+      bankPhoneNumber: "8889990000",
+      bankEmail: "bob.brown@example.com",
+      status: true,
+      createdAt: "7",
+    },
+    {
+      id: 5,
+      investmentName: "Charlie Davis",
+      mobileNo: "5555555555",
+      sponserAddress: "202 Birch St, Star City, USA",
+      accountHolderName: "Charlie Davis",
+      bankName: "Star City Bank",
+      accountNumber: "9876543210",
+      bankBranch: "Downtown Branch",
+      branchAddress: "303 Oak St, Star City, USA",
+      ifscCode: "IFSC55555",
+      swiftCode: "SWIFT00000",
+      routingNumber: "111223344",
+      iban: "IBAN999988887",
+      accountType: "checking",
+      bankPhoneNumber: "1112223333",
+      bankEmail: "charlie.davis@example.com",
+      status: false,
+      createdAt: "4",
+    },
+    {
+      id: 6,
+      investmentName: "Daniel Evans",
+      mobileNo: "4444444444",
+      sponserAddress: "303 Cedar St, Central City, USA",
+      accountHolderName: "Daniel Evans",
+      bankName: "Central City Bank",
+      accountNumber: "4444555566",
+      bankBranch: "Uptown Branch",
+      branchAddress: "404 Elm St, Central City, USA",
+      ifscCode: "IFSC44444",
+      swiftCode: "SWIFT11111",
+      routingNumber: "555666777",
+      iban: "IBAN4444555566",
+      accountType: "business",
+      bankPhoneNumber: "4445556666",
+      bankEmail: "daniel.evans@example.com",
+      status: true,
+      createdAt: "2",
+    },
+    {
+      id: 7,
+      investmentName: "Ella Fitzgerald",
+      mobileNo: "3333333333",
+      sponserAddress: "404 Elm St, Coast City, USA",
+      accountHolderName: "Ella Fitzgerald",
+      bankName: "Coast City Bank",
+      accountNumber: "3333444455",
+      bankBranch: "Downtown Branch",
+      branchAddress: "505 Cedar St, Coast City, USA",
+      ifscCode: "IFSC77777",
+      swiftCode: "SWIFT22222",
+      routingNumber: "888999000",
+      iban: "IBAN888999000",
+      accountType: "savings",
+      bankPhoneNumber: "7778889999",
+      bankEmail: "ella.fitzgerald@example.com",
+      status: false,
+      createdAt: "9",
+    },
+    {
+      id: 8,
+      investmentName: "Frank Green",
+      mobileNo: "2222222222",
+      sponserAddress: "505 Ash St, Keystone City, USA",
+      accountHolderName: "Frank Green",
+      bankName: "Keystone City Bank",
+      accountNumber: "2222333344",
+      bankBranch: "Main Branch",
+      branchAddress: "606 Birch St, Keystone City, USA",
+      ifscCode: "IFSC88888",
+      swiftCode: "SWIFT33333",
+      routingNumber: "444555666",
+      iban: "IBAN444555666",
+      accountType: "checking",
+      bankPhoneNumber: "2222333444",
+      bankEmail: "frank.green@example.com",
+      status: true,
+      createdAt: "8",
+    },
+    {
+      id: 9,
+      investmentName: "Grace Hall",
+      mobileNo: "1111111111",
+      sponserAddress: "606 Willow St, Hub City, USA",
+      accountHolderName: "Grace Hall",
+      bankName: "Hub City Bank",
+      accountNumber: "1111222233",
+      bankBranch: "Downtown Branch",
+      branchAddress: "707 Cedar St, Hub City, USA",
+      ifscCode: "IFSC99999",
+      swiftCode: "SWIFT44444",
+      routingNumber: "555566677",
+      iban: "IBAN555566677",
+      accountType: "business",
+      bankPhoneNumber: "1111222333",
+      bankEmail: "grace.hall@example.com",
+      status: true,
+      createdAt: "1",
+    },
+    {
+      id: 10,
+      investmentName: "Henry Ingram",
+      mobileNo: "6666666666",
+      sponserAddress: "707 Spruce St, Fawcett City, USA",
+      accountHolderName: "Henry Ingram",
+      bankName: "Fawcett City Bank",
+      accountNumber: "6666777788",
+      bankBranch: "Main Street Branch",
+      branchAddress: "808 Oak St, Fawcett City, USA",
+      ifscCode: "IFSC66666",
+      swiftCode: "SWIFT55555",
+      routingNumber: "999000111",
+      iban: "IBAN999000111",
+      accountType: "savings",
+      bankPhoneNumber: "6666777888",
+      bankEmail: "henry.ingram@example.com",
+      status: false,
+      createdAt: "6",
+    },
+    {
+      id: 11,
+      investmentName: "Grace Hall",
+      mobileNo: "1111111111",
+      sponserAddress: "606 Willow St, Hub City, USA",
+      accountHolderName: "Grace Hall",
+      bankName: "Hub City Bank",
+      accountNumber: "1111222233",
+      bankBranch: "Downtown Branch",
+      branchAddress: "707 Cedar St, Hub City, USA",
+      ifscCode: "IFSC99999",
+      swiftCode: "SWIFT44444",
+      routingNumber: "555566677",
+      iban: "IBAN555566677",
+      accountType: "business",
+      bankPhoneNumber: "1111222333",
+      bankEmail: "grace.hall@example.com",
+      status: true,
+      createdAt: "1",
+    },
+    {
+      id: 12,
+      investmentName: "Henry Ingram",
+      mobileNo: "6666666666",
+      sponserAddress: "707 Spruce St, Fawcett City, USA",
+      accountHolderName: "Henry Ingram",
+      bankName: "Fawcett City Bank",
+      accountNumber: "6666777788",
+      bankBranch: "Main Street Branch",
+      branchAddress: "808 Oak St, Fawcett City, USA",
+      ifscCode: "IFSC66666",
+      swiftCode: "SWIFT55555",
+      routingNumber: "999000111",
+      iban: "IBAN999000111",
+      accountType: "savings",
+      bankPhoneNumber: "6666777888",
+      bankEmail: "henry.ingram@example.com",
+      status: false,
+      createdAt: "6",
+    },
+  ]);
 
   const [investment, setInvestment] = useState([
-    {
-      imgSrc:
-        "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-      title: "Multi Family Residence Portfolio",
-      sponsor: "KKR",
-      annReturn: "12.5%",
-      annYield: "12.5%",
-      minInvests: ",00 $0",
-      targClose: "24 December",
-      holdingPer: "5-7 years",
-      progressValue: 80,
-      status: "Available"
-    },
-    {
-      imgSrc:
-        "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-      title: "Multi Family Residence Portfolio",
-      sponsor: "KKR",
-      annReturn: "12.5%",
-      annYield: "12.5%",
-      minInvests: ",00 $0",
-      targClose: "24 December",
-      holdingPer: "5-7 years",
-      progressValue: 80,
-      status: "Upcomming"
-    },
-    {
-      imgSrc:
-        "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
-      title: "Multi Family Residence Portfolio",
-      sponsor: "KKR",
-      annReturn: "12.5%",
-      annYield: "12.5%",
-      minInvests: ",00 $0",
-      targClose: "24 December",
-      holdingPer: "5-7 years",
-      progressValue: 80,
-      status: "Closed"
-    },
+    // {
+    //   banner_image:
+    //     "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
+    //   ioName: "Multi Family Residence Portfolio",
+    //   sponserName: "KKR",
+    //   annualReturn: "12.5%",
+    //   annualyield: "12.5%",
+    //   minInvests: ",00 $0",
+    //   targetClose: "24 December",
+    //   year: "5-7 years",
+    //   tenure: 92,
+    //   quaterly: "Q2",
+    //   destributedAmount: 62,
+    //   ioName: "Sybil Christensen",
+    //   ioNameArabic: "September Kelley",
+    //   status: "Available"
+    // },
+    // {
+    //   banner_image:
+    //     "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
+    //   ioName: "Multi Family Residence Portfolio",
+    //   sponserName: "KKR",
+    //   annualReturn: "12.5%",
+    //   annualyield: "12.5%",
+    //   minInvests: ",00 $0",
+    //   targetClose: "24 December",
+    //   year: "5-7 years",
+    //   tenure: 92,
+    //   quaterly: "Q2",
+    //   destributedAmount: 62,
+    //   ioName: "Sybil Christensen",
+    //   ioNameArabic: "September Kelley",
+    //   status: "Available"
+    // },
+    // {
+    //   banner_image:
+    //     "https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
+    //   ioName: "Multi Family Residence Portfolio",
+    //   sponserName: "KKR",
+    //   annualReturn: "12.5%",
+    //   annualyield: "12.5%",
+    //   minInvests: ",00 $0",
+    //   targetClose: "24 December",
+    //   year: "5-7 years",
+    //   tenure: 92,
+    //   quaterly: "Q2",
+    //   destributedAmount: 62,
+    //   ioName: "Sybil Christensen",
+    //   ioNameArabic: "September Kelley",
+    //   status: "Available"
+    // },
   ]);
 
   const [rateExchange, setRateExchange] = useState([
@@ -672,6 +927,8 @@ const GlobalStateProvider = ({ children }) => {
         setPendingRequest,
         viewHistory,
         setViewHistory,
+        investmentType,
+        setInvestmentType
       }}
     >
       {children}
diff --git a/src/Pages/IO_Management/CreateIO.jsx b/src/Pages/IO_Management/CreateIO.jsx
index 269c47f..6968cb7 100644
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -90,7 +90,7 @@ export function debounce(func, delay) {
 }
 const CreateIO = () => {
   const navigate = useNavigate();
-  const { sponser, setSponser } = useContext(GlobalStateContext);
+  const { sponser, setSponser,investment, setInvestment } = useContext(GlobalStateContext);
   const [bannerImageData, setBannerImageData] = useState(null);
   const [otherImageData, setOtherImageData] = useState(null);
 
@@ -98,10 +98,12 @@ const CreateIO = () => {
   const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
   
 
+
   const {
     control,
     handleSubmit,
     reset,
+    setValue,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(schema),
@@ -117,7 +119,12 @@ const CreateIO = () => {
   console.log(errors);
 
   const onSubmit = (data) => {
-    console.log(data);
+
+    // setValue("banner_image", selectedBannerImageData);
+    data.banner_image = selectedBannerImageData;
+    const updatedData = { ...data, status: "Available"}
+    console.log(selectedBannerImageData);
+    setInvestment([...investment,updatedData])
     navigate("/view-io");
     reset();
   };
diff --git a/src/Pages/IO_Management/ViewIO.jsx b/src/Pages/IO_Management/ViewIO.jsx
index e12841c..5a5cad4 100644
--- a/src/Pages/IO_Management/ViewIO.jsx
+++ b/src/Pages/IO_Management/ViewIO.jsx
@@ -37,11 +37,11 @@ const ExchangeRate = () => {
   }, []);
 
   // ====================================================[Table Filter]================================================================
-  const filteredData = investment.filter((item) => {
+  const filteredData = investment?.filter((item) => {
     // Filter by name (case insensitive)
-    const name = item.title;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
+    const name = item?.ioName;
+    const searchLower = searchTerm?.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
 
     // Filter by status
     const status = item.status;
@@ -79,7 +79,7 @@ const ExchangeRate = () => {
           mt="-1.5px"
           height="2px"
           bg="green.500"
-          borderRadius="1px"
+          borderRadius="1px" 
         />
         <TabPanels>
           <TabPanel>
diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
new file mode 100644
index 0000000..7a48652
--- /dev/null
+++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AddInvestmentType = () => {
+  return (
+    <div>
+      AddInvestmentType
+    </div>
+  )
+}
+
+export default AddInvestmentType
diff --git a/src/Pages/Master/InvestmentType/EditInvestmentType.jsx b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
new file mode 100644
index 0000000..bc2f65d
--- /dev/null
+++ b/src/Pages/Master/InvestmentType/EditInvestmentType.jsx
@@ -0,0 +1,22 @@
+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 EditInvestmentType = () => {
+  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>
+  )
+}
+
+export default EditInvestmentType
\ No newline at end of file
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index 36ce927..f61ccc5 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -1,18 +1,255 @@
-import { Box, Card, CardBody, Heading, Image, Stack, Text } from "@chakra-ui/react";
-// import error from "../assets/Error.svg"
-import robot from "../../../assets/robot.png";
-import InvestmentCard from "../../../Components/InvestmentCard/InvestmentCard";
-// import robot from "../assets/robot.png"
+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 "../Sponser/AddSponser";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
 const InvestmentType = () => {
+  const toast = useToast()
+  const { investmentType, setInvestmentType,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 = [
+    "investment name",
+    "Address",
+    "Mobile no",
+    "Status",
+    "Created At",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    
+    setInvestmentType((prevInvestmentType) =>
+      prevInvestmentType.map((investmentType) =>
+        investmentType.id === id ? { ...investmentType, status: !investmentType.status } : investmentType
+      )
+    );
+    toast({
+      render: () => (
+        <ToastBox
+          message={"Status changed succesfully.!"}
+        />
+      ),
+    });
+  },300) ;
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = investmentType.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.investmentName;
+    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,
+    "investment name": (
+      <Text justifyContent={slideFromRight? 'right': 'left' }
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.investmentName}
+      </Text>
+    ),
+    Address: (
+      <Box w={350} isTruncated={true} >
+        <Text as={"span"} color={"teal.900"}>
+          {item.sponserAddress}
+        </Text>
+      </Box>
+    ),
+    "Mobile no": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.mobileNo}
+        </Text>
+      </Box>
+    ),
+    Status:
+      <Switch
+        size={"sm"}
+        color="green"
+        onChange={() => handleUpdateStatus(item.id)}
+        isChecked={item.status}
+      />
+
+      // item?.status ? (
+      //   <Badge bg={'transparent'} color={"#05c46b"}>
+      //     Passed
+      //   </Badge>
+      // ) : (
+      //   <Badge bg={'transparent'} color={"#f53b57"}>
+      //     Not passes
+      //   </Badge>
+      // ),
+      
+      ,
+    "Created At": (
+      <span className="d-flex justify-content-between align-items-center">
+        <Text as={"span"} color={"gray.600"} className=" fw-bold">
+          {formatDate(item.createdAt)}
+        </Text>
+        <Menu>
+          <MenuButton className="link p-1 rounded-1">
+            <HiDotsVertical className="rubix-text-dark fs-6" />
+          </MenuButton>
+          <Portal>
+            <MenuList minWidth="80px">
+              <RouterLink to={`edit-investment/${item.id}`}>
+                <MenuItem className="web-text-medium">Edit</MenuItem>
+              </RouterLink>
+              <RouterLink to={`view-investment/${item.id}`}>
+                <MenuItem className="web-text-medium">View</MenuItem>
+              </RouterLink>
+              <MenuItem
+                onClick={() => {
+                  setActionId(item?.id);
+                  setDeleteAlert(true);
+                }}
+                className="web-text-medium"
+              >
+                Delete
+              </MenuItem>
+            </MenuList>
+          </Portal>
+        </Menu>
+      </span>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedInvestmentType = investmentType.filter((investmentType) => investmentType.id !== actionId);
+
+    setTimeout(() => {
+      setInvestmentType(updatedInvestmentType);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  
+
+
   return (
-    <Box
-    display={'flex'}
-    height={'100vh'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    >
-      <Image src={robot} w={"171px"} />
-      {/* <InvestmentCard /> */}
+    <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={"/investment-type/add-investment"}>
+              <Button
+                leftIcon={<AddIcon />}
+                colorScheme={"green"}
+                rounded={"sm"}
+                size={"sm"}
+              >
+                Add Investment
+              </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 Investment Type?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
new file mode 100644
index 0000000..1c1b8fe
--- /dev/null
+++ b/src/Pages/Master/InvestmentType/ViewInvestmentType.jsx
@@ -0,0 +1,22 @@
+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 ViewInvestmentType = () => {
+  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>
+  )
+}
+
+export default ViewInvestmentType
\ No newline at end of file
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index 06500dc..002aca2 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -51,6 +51,7 @@ export function debounce(func, delay) {
     debounceTimer = setTimeout(() => func.apply(this, args), delay);
   };
 }
+
 const AddSponser = () => {
   const navigate = useNavigate();
   const { sponser, setSponser } = useContext(GlobalStateContext);
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 3d73d16..c64e57a 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -17,7 +17,10 @@ import upgradeHistory from "../Pages/InvestorUpgrade/UpgradeHistory";
 import InvestorDetails from "../Pages/Investor_Management/InvestorDetails";
 import InvestorTransactions from "../Pages/Investor_Management/InvestorTransactions";
 import ExchangeRate from "../Pages/Master/ExchangeRate/ExchangeRate";
+import AddInvestmentType from "../Pages/Master/InvestmentType/AddInvestmentType";
+import EditInvestmentType from "../Pages/Master/InvestmentType/EditInvestmentType";
 import InvestmentType from "../Pages/Master/InvestmentType/InvestmentType";
+import ViewInvestmentType from "../Pages/Master/InvestmentType/ViewInvestmentType";
 import AddSponser from "../Pages/Master/Sponser/AddSponser";
 import EditSponser from "../Pages/Master/Sponser/EditSponser";
 import Sponser from "../Pages/Master/Sponser/Sponsers";
@@ -39,6 +42,9 @@ export const RouteLink = [
 
   { path: "/exchange-rate", Component: ExchangeRate },
   { path: "/investment-type", Component: InvestmentType },
+  { path: "/investment-type/add-investment", Component: AddInvestmentType },
+  { path: "/investment-type/view-investment/:id", Component: ViewInvestmentType },
+  { path: "/investment-type/edit-investment/:id", Component: EditInvestmentType },
 
   // ===============[ IO Management]===============
   { path: "/create-io", Component: CreateIO },