diff --git a/src/Components/FormField.jsx b/src/Components/FormField.jsx
index 7005683..e11e1f3 100644
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -1,97 +1,219 @@
-import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack } from '@chakra-ui/react';
-import React from 'react';
+import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack, Box, Heading, FormHelperText, Kbd } from '@chakra-ui/react';
 import { Controller } from 'react-hook-form';
 import { TiWarning } from 'react-icons/ti';
+import { motion } from 'framer-motion';
 
 const FormField = ({
-    label,
-    control,
-    name,
-    type = "text",
-    options = [],
-    errors,
-    isRequired,
-    arabic,
-    ...props
-  }) => (
-    <FormControl isInvalid={errors[name]}>
-      <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
-      <Controller
-        control={control}
-        name={name}
-        defaultValue=""
-        render={({ field }) => {
-          switch (type) {
-            case 'textarea':
-              return (
-                <Textarea
-                  focusBorderColor="forestGreen.400"
-                  size={"sm"}
-                  {...field}
-                  {...props}
-                  placeholder={label}
-                  textAlign={arabic ? "right" : "left"}
-                />
-              );
-            case 'select':
-              return (
-                <Select
-                  focusBorderColor="forestGreen.300"
-                  size={"sm"}
-                  {...field}
-                  {...props}
-                  placeholder={label}
-                  textAlign={arabic ? "right" : "left"}
+  label,
+  control,
+  name,
+  type = "text",
+  options = [],
+  errors,
+  isRequired,
+  rules,
+  arabic,
+  placeHolder,
+  helperText,
+  multiple,
+  handleImageChange,
+  ...props
+}) => (
+  <FormControl isInvalid={errors[name]} isRequired={isRequired} className="mb-3">
+    <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
+    <Controller
+      control={control}
+      name={name}
+      defaultValue=""
+      rules={rules}
+      render={({ field }) => {
+        if (type === 'select') {
+          return (
+            <Select
+              focusBorderColor="forestGreen.300"
+              size={"sm"}
+              {...field}
+              {...props}
+              cursor={'pointer'}
+              placeholder={placeHolder? placeHolder : label}
+              textAlign={arabic ? "right" : "left"}
+            >
+              {options.map((option, index) => (
+                <option key={index} value={option.value}>{option.label}</option>
+              ))}
+            </Select>
+          );
+        } else if (type === 'textarea') {
+          return (
+            <Textarea
+              focusBorderColor="forestGreen.400"
+              size={"sm"}
+              {...field}
+              {...props}
+              placeholder={placeHolder? placeHolder : label}
+              textAlign={arabic ? "right" : "left"}
+            />
+          );
+        } else if (type === 'checkbox') {
+          return (
+            <Checkbox
+              size={"sm"}
+              {...field}
+              {...props}
+              textAlign={arabic ? "right" : "left"}
+            >
+              {label}
+            </Checkbox>
+          );
+        } else if (type === 'radio') {
+          return (
+            <RadioGroup {...field} {...props}>
+              <Stack direction="row">
+                {options.map((option, index) => (
+                  <Radio key={index} value={option.value}>
+                    {option.label}
+                  </Radio>
+                ))}
+              </Stack>
+            </RadioGroup>
+          );
+        } else if (type === 'file') {
+          return (
+            <Box
+              borderColor="gray.300"
+              borderStyle="dashed"
+              borderWidth="2px"
+              rounded="md"
+              shadow="sm"
+              role="group"
+              transition="all 150ms ease-in-out"
+              _hover={{
+                shadow: "md",
+              }}
+              as={motion.div}
+              initial="rest"
+              animate="rest"
+              whileHover="hover"
+              height={"105px"}
+              className="pointer"
+            >
+              <Box position="relative" height="100%" width="100%">
+                <Box
+                  position="absolute"
+                  top="0"
+                  left="0"
+                  height="100%"
+                  width="100%"
+                  display="flex"
+                  flexDirection="column"
                 >
-                  {options.map((option, index) => (
-                    <option key={index} value={option.value}>{option.label}</option>
-                  ))}
-                </Select>
-              );
-            case 'checkbox':
-              return (
-                <Checkbox
-                  size={"sm"}
-                  {...field}
-                  {...props}
-                  textAlign={arabic ? "right" : "left"}
-                >
-                  {label}
-                </Checkbox>
-              );
-            case 'radio':
-              return (
-                <RadioGroup {...field} {...props}>
-                  <Stack direction="row">
-                    {options.map((option, index) => (
-                      <Radio key={index} value={option.value}>
-                        {option.label}
-                      </Radio>
-                    ))}
+                  <Stack
+                    height="100%"
+                    width="100%"
+                    display="flex"
+                    alignItems="center"
+                    justify="center"
+                  >
+                    <span
+                      className="d-flex flex-column align-items-center pointer"
+                      spacing="1"
+                    >
+                      <Heading
+                        fontSize="lg"
+                        color="gray.700"
+                        fontWeight="bold"
+                        cursor={"pointer"}
+                      >
+                        Drop images here
+                      </Heading>
+                      <span
+                        fontWeight="light"
+                        className="web-text-large text-secondary text-center pointer"
+                      >
+                        or click to upload
+                      </span>
+                    </span>
                   </Stack>
-                </RadioGroup>
-              );
-            default:
-              return (
+                </Box>
                 <Input
-                  focusBorderColor="forestGreen.300"
-                  size={"sm"}
-                  type={type}
                   {...field}
                   {...props}
-                  placeholder={label}
-                  textAlign={arabic ? "right" : "left"}
+                  type="file"
+                  height="100%"
+                  width="100%"
+                  position="absolute"
+                  top="0"
+                  left="0"
+                  opacity="0"
+                  aria-hidden="true"
+                  accept="image/*"
+                  onChange={(e) => {
+                    field.onChange(e);
+                    handleImageChange(e);
+                  }}
+                  onDrop={(e) => {
+                    field.onChange(e);
+                    handleImageChange(e);
+                  }}
                 />
-              );
-          }
-        }}
-      />
-      {errors[name] && (
-        <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
-          <TiWarning className="fw-bold fs-5 " /> {errors[name].message}
-        </span>
-      )}
-    </FormControl>
-  );
+              </Box>
+            </Box>
+          );
+        }else if (type === 'fileNormal') {
+          return (
+            <>
+              <Input
+                {...field}
+                {...props}
+                multiple={multiple} // Support for multiple file uploads
+                accept="image/*"
+                type="file"
+                className="web-text-medium form-control rounded-1"
+                size="sm"
+                onChange={(e) => {
+                  field.onChange(e);
+                  handleImageChange(e);
+                }}
+              />
+              {multiple && (
+                <FormHelperText className="web-text-small">
+                  You can select multiple images using{" "}
+                  <span className="text-dark">
+                    <Kbd size={'sm'} className="text-dark">ctrl</Kbd> + <Kbd className="text-dark">select</Kbd>
+                  </span>.
+                </FormHelperText>
+              )}
+            </>
+          );
+        } else {
+          return (
+            <Input
+              focusBorderColor="forestGreen.300"
+              size={"sm"}
+              type={type}
+              {...field}
+              {...props}
+              placeholder={placeHolder? placeHolder : label}
+              textAlign={arabic ? "right" : "left"}
+            />
+          );
+        }
+      }}
+    />
+    {errors[name] && (
+      <span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
+        <TiWarning className="fw-bold fs-5 " /> {errors[name].message}
+      </span>
+    )}
+    {helperText &&<FormHelperText className="web-text-small">
+       {helperText}
+      </FormHelperText>}
+    {type === 'file' && (
+      <FormHelperText className="web-text-small">
+        Maximum limit of image is 10MB.
+      </FormHelperText>
+    )}
+  </FormControl>
+);
 
 export default FormField;
diff --git a/src/Components/Pagination.jsx b/src/Components/Pagination.jsx
index 8f0480d..3f3debb 100644
--- a/src/Components/Pagination.jsx
+++ b/src/Components/Pagination.jsx
@@ -36,6 +36,7 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
 
       <HStack>
       <Select
+        
         className="pointer web-text-small"
         width={"90px"}
         rounded="sm"
@@ -50,6 +51,7 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
         ))}
       </Select>
         <IconButton
+        mt={1}
           size={'sm'}
           rounded="sm" 
           icon={<ChevronLeftIcon />}
@@ -61,6 +63,7 @@ const Pagination = ({ totalItems, itemsPerPageOptions = [ 10, 15] }) => {
           {displayRange.start} - {displayRange.end} of {totalItems}
         </Text>
         <IconButton
+        mt={1}
           icon={<ChevronRightIcon />}
           size={'sm'}
           rounded="sm" 
diff --git a/src/Pages/IO_Management/CreateIO.jsx b/src/Pages/IO_Management/CreateIO.jsx
index 0e8d424..79c8354 100644
--- a/src/Pages/IO_Management/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import {
   Box,
@@ -11,11 +11,12 @@ import {
   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 { WarningTwoIcon } from "@chakra-ui/icons";
+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";
@@ -23,30 +24,66 @@ import FormField from "../../Components/FormField";
 import { v4 as uuidv4 } from "uuid";
 
 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"),
-  mobileNo: yup.string().required("Mobile no is required"),
-  sponserAddress: yup.string().required("Sponser address is required"),
-
-  bankName: yup.string().required("Bank Name is required"),
-  accountNumber: yup.string().required("Account Number is required"),
-  swiftCode: yup.string().required("SWIFT/BIC Code is required"),
-  bankEmail: yup.string().email("Invalid email format"),
-
-  // routingNumber: yup.string().required("Routing Number is required"),
-  // iban: yup.string().required("IBAN is required"),
-  // accountType: yup.string().required("Account Type is required"),
-  // bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
-  // bankBranch: yup.string().required("Bank Branch is required"),
-  // branchAddress: yup.string().required("Branch Address is required"),
-  // ifscCode: yup.string().required("IFSC Code is required"),
-  // accountHolderName: yup.string().required("Account Holder's 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"),
+  // .test(
+  //   'fileSize',
+  //   'File size is too large',
+  //   value => value && value.size <= 10485760 // 10MB
+  // )
+  // .test(
+  //   'fileType',
+  //   'Unsupported file format',
+  //   value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
+  // ),
+  other_image: yup.mixed().required("Profile image is required"),
+  // .test(
+  //   'fileSize',
+  //   'File size is too large',
+  //   value => value && value.size <= 10485760 // 10MB
+  // )
+  // .test(
+  //   'fileType',
+  //   'Unsupported file format',
+  //   value => value && ['image/jpg', 'image/jpeg', 'image/gif', 'image/png'].includes(value.type)
+  // ),
 });
 
-
+const startYear = 2024;
+const endYear = 2124;
+// const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
+const years = Array.from({ length: 2124 - 2024 + 1 }, (_, i) => 2024 + i).map(
+  (year) => ({ value: year, label: year })
+);
 
 export function debounce(func, delay) {
   let debounceTimer;
-  return function(...args) {
+  return function (...args) {
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => func.apply(this, args), delay);
   };
@@ -54,41 +91,92 @@ export function debounce(func, delay) {
 const CreateIO = () => {
   const navigate = useNavigate();
   const { sponser, setSponser } = useContext(GlobalStateContext);
+  const [bannerImageData, setBannerImageData] = useState(null);
+  const [otherImageData, setOtherImageData] = useState(null);
+
+  const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
+  const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
+  
+
   const {
     control,
     handleSubmit,
+    reset,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(schema),
+    // defaultValues: {
+    //   destributedAmount: 0,
+    //   tenure: 0,
+    //   annualReturn: 0,
+    //   miniInvest: 0,
+    //   annualyield: 0,
+    // },
   });
 
   console.log(errors);
 
   const onSubmit = (data) => {
-    setSponser([
-      {
-        ...data,
-        status: true,
-        id: uuidv4(),
-        createdAt: new Date().toISOString(),
-      },
-      ...sponser,
-    ]);
-    navigate("/sponser");
+    console.log(data?.targetClose);
+    navigate("/view-io");
+    reset();
   };
 
+  // Extract options for the select input
+  const sponserOptions = sponser.map((item) => ({
+    value: item.sponserName,
+    label: item.sponserName,
+  }));
 
-    // Extract options for the select input
-    const sponserOptions = sponser.map(item => ({
-      value: item.id,
-      label: item.sponserName
-    }));
+  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);
+};
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Heading as="h6" size="xs" mt={4}>
-          IO Details
+          Investment Object Details
         </Heading>
         <Box display={"flex"} gap={0}>
           <Box
@@ -99,39 +187,125 @@ const CreateIO = () => {
             gap={4}
           >
             <FormField
-              label="IO name"
-              name="IO name"
+              label="Investment object name"
+              name="ioName"
               control={control}
               errors={errors}
               isRequired={true}
             />
 
-<FormField
-  label="Select Option"
-  control={control}
-  name="selectOption"
-  type="select"
-  options={sponserOptions}
-  errors={errors}
-/>
-
-
             <FormField
-              label="Mobile no"
-              name="mobileNo"
-              type="tel"
+              label="Destributed Amount"
+              placeHolder={"$00.0"}
+              helperText={"Please enter value in $"}
+              name="destributedAmount"
+              type="number"
               control={control}
               errors={errors}
               isRequired={true}
             />
+
+            {/* <FormField
+              label="Year"
+              control={control}
+              name="year"
+              type="select"
+              options={years}
+              errors={errors}
+              isRequired={true}
+            /> */}
+
             <FormField
-              label="Sponser address"
-              name="sponserAddress"
-              type="textarea"
+              label="Sponsers Name"
+              control={control}
+              name="sponserName"
+              type="select"
+              options={sponserOptions}
+              errors={errors}
+              isRequired={true}
+            />
+
+            <FormField
+              label="Tenure"
+              // helperText={"Please enter value in Dollar"}
+              name="tenure"
+              type="number"
               control={control}
               errors={errors}
               isRequired={true}
             />
+
+            <FormField
+              label="Annual return"
+              placeHolder={"00.00%"}
+              helperText={"Please enter value in percentage"}
+              name="annualReturn"
+              type="number"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+
+            <FormField
+              label="Banner image"
+              control={control}
+              name="banner_image"
+              type="fileNormal"
+              helperText={"You can select only one image for banner."}
+              errors={errors}
+              multiple={false}
+              handleImageChange={handleBannerImageChange}
+              isRequired={true}
+              rules={{
+                required: "Profile image is required",
+              }}
+              // register={register}  // Pass register function to FormField
+            />
+
+            {selectedBannerImageData && (
+              <Box width={"20%"}>
+                <Image
+                  rounded={"md"}
+                  objectFit={"cover"}
+                  src={selectedBannerImageData}
+                  alt="profile"
+                  width={100}
+                  height={100}
+                />
+                <Box
+                  w={"100%"}
+                  display={"flex"}
+                  flexDirection={"column"}
+                  position={"relative"}
+                >
+                  <CloseIcon
+                    onClick={() => setSelectedBannerImageData(null)}
+                    className="link pointer"
+                    p={1}
+                    fontSize={"lg"}
+                    color={"red"}
+                    fontWeight={"500"}
+                    rounded={"md"}
+                    position={"absolute"}
+                    top={1}
+                    right={0}
+                  />
+                  <Text
+                    as={"span"}
+                    fontSize={"xs"}
+                    w={"80%"}
+                    fontWeight={"500"}
+                    mt={1}
+                    isTruncated={true}
+                  >
+                    {bannerImageData?.name}
+                  </Text>
+                  <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                    {(bannerImageData?.size / (1024 * 1024)).toFixed(2)} mb
+                  </Text>
+                </Box>
+              </Box>
+            )}
           </Box>
 
           <Box
@@ -142,30 +316,174 @@ const CreateIO = () => {
             gap={4}
           >
             <FormField
-              label="اسم الراعي"
-              name="اسم الراعي"
+              label="Investment object"
+              name="ioNameArabic"
+              placeHolder={"الرجاء إدخال القيمة"}
               control={control}
               errors={errors}
               isRequired={true}
               arabic={true}
             />
+
+            <FormField
+              label="Min Invest"
+              placeHolder={"$00.00"}
+              helperText={"Please enter value in $"}
+              name="miniInvest"
+              type="number"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+
+            <FormField
+              label="Quaterly"
+              control={control}
+              name="quaterly"
+              type="select"
+              options={[
+                {
+                  label: "Q1",
+                  value: "Q1",
+                },
+                {
+                  label: "Q2",
+                  value: "Q2",
+                },
+                {
+                  label: "Q3",
+                  value: "Q3",
+                },
+                {
+                  label: "Q4",
+                  value: "Q4",
+                },
+              ]}
+              errors={errors}
+              isRequired={true}
+            />
+
+            <FormField
+              label="Target close"
+              name="targetClose"
+              type="date"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+
+            <FormField
+              label="Annual yeild"
+              placeHolder={"00.00%"}
+              helperText={"Please enter value in percentage"}
+              name="annualyield"
+              type="number"
+              control={control}
+              errors={errors}
+              isRequired={true}
+            />
+
+
+<FormField
+              id="otherImageInput"
+              label="Other images"
+              control={control}
+              name="other_image"
+              type="fileNormal"
+              multiple={true}
+              errors={errors}
+              handleImageChange={handleOtherImageChange}
+              isRequired={true}
+              rules={{
+                required: "Profile image is required",
+              }}
+              // register={register}  // Pass register function to FormField
+            />
+
+            {selectedOtherImageData?.length > 0 && (
+              <Box width={"100%"} display="flex" flexWrap="wrap" gap={4}>
+                {selectedOtherImageData.map((imageData, index) => (
+                  <Box key={index} width={"100px"}>
+                    <Image
+                      rounded={"md"}
+                      objectFit={"cover"}
+                      src={imageData}
+                      alt={`profile-${index}`}
+                      width={100}
+                      height={100}
+                    />
+                    <Box
+                      display={"flex"}
+                      flexDirection={"column"}
+                      position={"relative"}
+                    >
+                      <CloseIcon
+                        onClick={() => removeOtherImage(index)}
+                        bg={"#fff"}
+                        className="link pointer"
+                        p={1}
+                        fontSize={"lg"}
+                        color={"red"}
+                        fontWeight={"500"}
+                        rounded={"md"}
+                        position={"absolute"}
+                        bottom={0}
+                        right={0}
+                      />
+                      <Text
+                        as={"span"}
+                        fontSize={"xs"}
+                        fontWeight={"500"}
+                        mt={1}
+                        isTruncated={true}
+                      >
+                        {otherImageData[index]?.name}
+                      </Text>
+                      <Text as={"span"} fontSize={"xs"} fontStyle={"italic"}>
+                        {(otherImageData[index]?.size / (1024 * 1024)).toFixed(
+                          2
+                        )}{" "}
+                        mb
+                      </Text>
+                    </Box>
+                  </Box>
+                ))}
+                {/* <Box  width={"100px"} display={'flex'} alignItems={'center'}> */}
+                <AddIcon
+
+      onClick={() => document.getElementById('otherImageInput').click()}
+                  rounded={"md"}
+                  width={50}
+                  height={50}
+                  mt={26}
+                  p={4}
+                  cursor={"pointer"}
+                  // rounded={'md'}
+                  className="link"
+                />
+                {/* </Box> */}
+              </Box>
+            )}
+
+            
           </Box>
         </Box>
 
-        <Box display={"flex"} justifyContent={"flex-start"} p={4}>
+        <Box display={"flex"} justifyContent={"flex-end"} p={4}>
           <Button
-            size={"sm"}
-            width={"50%"}
-            rounded={"sm"}
-            type="submit"
-            colorScheme="green"
-          >
-            Submit
-          </Button>
+              size={"sm"}
+              width={"50%"}
+              rounded={"sm"}
+              type="submit"
+              colorScheme="green"
+              mt={4}
+            >
+              Submit
+            </Button>
         </Box>
       </form>
-      
-      <Divider />
+
+      {/* <Divider /> */}
     </Box>
   );
 };
diff --git a/src/Pages/IO_Management/ViewIO.jsx b/src/Pages/IO_Management/ViewIO.jsx
index 4c8fb4e..e12841c 100644
--- a/src/Pages/IO_Management/ViewIO.jsx
+++ b/src/Pages/IO_Management/ViewIO.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Image,
   Input,
+  Select,
   Skeleton,
   Tab,
   TabIndicator,
@@ -24,6 +25,7 @@ const ExchangeRate = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const { investment, setInvestment } = useContext(GlobalStateContext);
   const [isLoading, setIsLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState("all");
 
   useEffect(() => {
     // Simulate loading
@@ -42,15 +44,16 @@ const ExchangeRate = () => {
     const nameMatches = name.toLowerCase().includes(searchLower);
 
     // Filter by status
-    // const status = item.status;
+    const status = item.status;
     // const statusLower = status ? "active" : "inactive";
 
-    // const statusMatches =
-    //   statusFilter === "all" ||
-    //   (statusFilter === "active" && status === true) ||
-    //   (statusFilter === "inactive" && status === false);
+    const statusMatches =
+      statusFilter === "all" ||
+      (statusFilter === "Available" && status === "Available") ||
+      (statusFilter === "Upcomming" && status === "Upcomming") ||
+      (statusFilter === "Closed" && status === "Closed");
 
-    return nameMatches;
+      return nameMatches && statusMatches;
   });
 
   const availableInvestments = filteredData.filter(
@@ -91,7 +94,22 @@ const ExchangeRate = () => {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
+            <Box display={"flex"} gap={2} >
+              <Select pb={1}
+              className="pointer web-text-small"
+              width={"100px"}
+              rounded="sm"
+              size="sm"
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+            >
+              <option value="all">All</option>
+              <option value="Available">Available</option>
+              <option value="Upcomming">Upcomming</option>
+              <option value="Closed">Closed</option>
+            </Select>
               <Pagination pageCount={false} totalItems={50} />
+              </Box>
             </Box>
             {filteredData?.length === 0 ? (
               <EmptySearchList message="We have no IO with this name" />
@@ -166,7 +184,11 @@ const ExchangeRate = () => {
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
               />
+
+
+
               <Pagination pageCount={false} totalItems={50} />
+
             </Box>
             {closedInvestments?.length === 0 ? (
               <EmptySearchList message="We have no IO with this name" />