diff --git a/src/Components/CurrencyInput.jsx b/src/Components/CurrencyInput.jsx
index 45932c4..facdca8 100644
--- a/src/Components/CurrencyInput.jsx
+++ b/src/Components/CurrencyInput.jsx
@@ -9,6 +9,8 @@ export const formatCurrency = (value) => {
 };
 
 const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
+  console.log(props);
+  
 
   const handleChange = (event) => {
     let { value } = event.target;
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
index 0490be4..f17fae3 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
@@ -148,34 +148,34 @@ const DepositRequest = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {item?.principal?.investor_details?.clientReference_id}
+        {item?.clientReference_id}
       </Text>
     ),
     "First Name": (
       <Box isTruncated={true} w={"70px"}>
         <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item?.principal?.firstName}
+          {item?.firstName}
         </Text>
       </Box>
     ),
     "Last Name": (
       <Box w={"70px"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-          {item?.principal?.lastName}
+          {item?.lastName}
         </Text>
       </Box>
     ),
     Country: (
       <Box w={"100px"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-          {item?.principal?.investor_details?.country?.countryName}
+          {item?.countryName}
         </Text>
       </Box>
     ),
     "Phone Number": (
       <Box w={"80px"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"}>
-          {item?.principal?.mobileNumber}
+          {item?.mobileNumber}
         </Text>
       </Box>
     ),
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
index 00c73c6..dc21c41 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
@@ -64,10 +64,6 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
    
   }, [requestData, id])
   
-  
-
-
-
   const onSubmit = async(data) => {
     setIsBtnLoading(true)
     const formData = new FormData();
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
index 1d385b8..0a898b5 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/AmountInvested.jsx
@@ -1,3 +1,4 @@
+import React, { useContext, useEffect, useState } from 'react';
 import {
   Box,
   Button,
@@ -12,10 +13,86 @@ import {
   ModalHeader,
   ModalOverlay,
   Text,
-  Textarea,
+  useToast,
 } from "@chakra-ui/react";
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import GlobalStateContext from '../../../../Contexts/GlobalStateContext';
+import { useParams } from 'react-router-dom';
+import { useAmountIvestmentMutation } from '../../../../Services/io.service';
+import ToastBox from '../../../../Components/ToastBox';
+
+// Validation schema
+const validationSchema = yup.object().shape({
+  transactionDate: yup.date().required('Date is required'),
+  Total_Amount: yup.number().positive('Amount must be positive').required('Amount is required'),
+  amountInvested: yup.number().positive('Amount to invest must be positive').required('Amount to invest is required'),
+  IoCash: yup.number().positive('IO Cash must be positive').required('IO Cash is required'),
+});
+
 
 const AmountInvested = ({ isOpen, onClose }) => {
+  const params = useParams()
+  const toast = useToast()
+  const id = params?.id
+  const { register, handleSubmit, reset, watch, formState: { errors } } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+  const [ isLoading, setIsLoading ] = useState(false)
+  const { IODetails } = useContext(GlobalStateContext);
+  const [ amountInvested ] = useAmountIvestmentMutation()
+
+  useEffect(() => {
+    reset({
+      Total_Amount: IODetails?.goalAmount,
+      IoCash: IODetails?.goalAmount
+    })
+  }, [IODetails])
+  
+
+  const onSubmit = async (data) => {
+    console.log(data);
+    setIsLoading(true)
+
+    try {
+      const res = await amountInvested({data, id})
+      console.log(res);
+      if (res?.data?.statusCode === 200 ) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsLoading(false)
+        onClose()
+
+      }else if(response?.error?.status === 400) {
+        toast({
+          render: () => (
+            <ToastBox message={response?.error?.data?.message} status={"error"} />
+          ),
+        });
+        setIsLoading(false)
+      }
+      
+      
+      
+    } catch (error) {
+      
+    }
+    // Handle form submission
+  };
+
+  const handleAmountChange = (e) => {
+    const amount = parseFloat(e.target.value) || 0;
+    const totalAmount = parseFloat(IODetails?.goalAmount) || 0;
+    const ioCash = (totalAmount - amount).toFixed(2); // Ensure precision with toFixed
+
+    reset({
+      amountInvested: amount,
+      IoCash: parseFloat(ioCash), // Convert to number for consistent formatting
+    });
+  };
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
@@ -23,73 +100,93 @@ const AmountInvested = ({ isOpen, onClose }) => {
         <ModalHeader fontSize={'md'}>Amount Invested</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <FormControl mb={"15px"}>
-            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-              Date
-            </FormLabel>
-            <Input
-              placeholder="Select Date"
-              size="sm"
-              rounded={'sm'}
-              fontSize={"sm"}
-              focusBorderColor="forestGreen.300"
-              type="date"
-            />
-          </FormControl>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <FormControl mb={"15px"} isInvalid={!!errors.transactionDate} isRequired>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Date
+              </FormLabel>
+              <Input
+                type="date"
+                {...register('transactionDate')}
+                size="sm"
+                rounded={'sm'}
+                fontSize={"sm"}
+                focusBorderColor="forestGreen.300"
+              />
+              {errors.transactionDate && <Text color="red.500">{errors.transactionDate.message}</Text>}
+            </FormControl>
 
-          <FormControl mb={"15px"} >
-            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
-            <Input 
-              size="sm"
-              rounded={'sm'}
-              textAlign={'end'}
-              readOnly
-              value={"$ 100000"}
-              focusBorderColor="forestGreen.300"
-              fontSize={"sm"} placeholder="$00.00"  />
-          </FormControl>
+            <FormControl mb={"15px"} isInvalid={!!errors.Total_Amount} isReadOnly>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount</FormLabel>
+              <Input
+                type="number"
+                {...register('Total_Amount')}
+                size="sm"
+                rounded={'sm'}
+                textAlign={'end'}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+              {errors.Total_Amount && <Text color="red.500">{errors.Total_Amount.message}</Text>}
+            </FormControl>
 
-<FormControl mb={"15px"} >
-  <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount to invest</FormLabel>
-  <Input 
-    size="sm"
-    rounded={'sm'}
-    textAlign={'end'}
-    focusBorderColor="forestGreen.300"
-    fontSize={"sm"} placeholder="$00.00"  />
-</FormControl>
+            <FormControl mb={"15px"} isInvalid={!!errors.amountInvested} isRequired>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>Amount to invest</FormLabel>
+              <Input
+                type="number"
+                {...register('amountInvested')}
+                size="sm"
+                rounded={'sm'}
+                textAlign={'end'}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                onChange={handleAmountChange}
 
-          <FormControl mb={"15px"}>
-            <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
-            IO Cash
-            </FormLabel>
-            <Input 
-              size="sm"
-              rounded={'sm'}
-              placeholder="$00.00"
-              focusBorderColor="forestGreen.300"
-              fontSize={"sm"}  />
-          </FormControl>
+              />
+              {errors.amountInvested && <Text color="red.500">{errors.amountInvested.message}</Text>}
+            </FormControl>
+
+            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                IO Cash
+              </FormLabel>
+              <Input
+                type="number"
+                {...register('IoCash')}
+                size="sm"
+                rounded={'sm'}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                textAlign={'right'}
+                readOnly
+              />
+              {errors.IoCash && <Text color="red.500">{errors.IoCash.message}</Text>}
+            </FormControl>
+
+            <ModalFooter>
+              <Button
+                type="submit"
+                bg={"hsla(139, 100%, 14%, 1)"}
+                mr={3}
+                color={"#fff"}
+                _hover={{
+                  bg: "hsl(139deg 98.99% 26.59%)",
+                }}
+                size={'sm'}
+                rounded={"sm"}
+                isLoading={isLoading}
+              >
+                Save
+              </Button>
+              <Button
+                size={'sm'}
+                rounded={"sm"} mr={3} onClick={onClose}>
+                Close
+              </Button>
+            </ModalFooter>
+          </form>
         </ModalBody>
-        <ModalFooter>
-          <Button
-            bg={"hsla(139, 100%, 14%, 1)"}
-            mr={3}
-            color={"#fff"}
-            _hover={{
-              bg: "hsl(139deg 98.99% 26.59%)",
-            }}
-            size={'sm'}
-            rounded={"sm"}
-          >
-            Save
-          </Button>
-          <Button 
-            size={'sm'}
-            rounded={"sm"} mr={3} onClick={onClose}>
-            Close
-          </Button>
-        </ModalFooter>
       </ModalContent>
     </Modal>
   );
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 5b7049e..d200ff3 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -231,6 +231,22 @@ export const ioService = createApi({
 
 
 
+    // =====[ Amount Investment ]
+    amountIvestment : builder.mutation({
+      query: ({ data, id }) => ({
+        url: `/io/admin/amount-invested/${id}`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getIOById"],
+    }),
+
+
+
+
+
+
+
 
 
 
@@ -277,5 +293,11 @@ export const {
 
 
 
-  useUpdateStatusIoMutation
+  useUpdateStatusIoMutation,
+
+
+
+
+
+  useAmountIvestmentMutation,
 } = ioService;