diff --git a/src/Components/CurrencyInput.jsx b/src/Components/CurrencyInput.jsx
index c972aee..b5d646b 100644
--- a/src/Components/CurrencyInput.jsx
+++ b/src/Components/CurrencyInput.jsx
@@ -38,6 +38,7 @@ const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
       {...props}
       ref={ref}  // Forward ref here
       type="text"
+      colorScheme='forestGreen'
       value={formatCurrency(value)}
       onChange={handleChange}
     />
diff --git a/src/Components/DataTable/NormalTable.jsx b/src/Components/DataTable/NormalTable.jsx
index 0ae24b8..5c65c88 100644
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -20,6 +20,7 @@ const DataTable = ({
   tableHeadRow,
   emptyMessage,
   centered,
+  total
 }) => {
 
   console.log(data);
@@ -34,7 +35,7 @@ const DataTable = ({
         <EmptySearchList message={emptyMessage} />
       ) : (
         <Table size="sm">
-          <TableCaption>Tanami v1.0.0</TableCaption>
+          <TableCaption p={total?0:null}>{total? total :"Tanami v1.0.0"}</TableCaption>
           <Thead backgroundColor="gray.50">
             <Tr>
               {tableHeadRow.map((heading, index) => (
diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
index e0a9f5a..47d58f5 100644
--- a/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
+++ b/src/Pages/IO_Management/ViewIO/HeaderModal/DistributionInvestor.jsx
@@ -1,4 +1,6 @@
 import {
+  Alert,
+  AlertIcon,
   Box,
   Button,
   FormControl,
@@ -20,8 +22,9 @@ import {
   Textarea,
   Th,
   Tr,
+  useToast,
 } from "@chakra-ui/react";
-import DataTable from "../../../../Components/DataTable/DataTable";
+import NormalData from "../../../../Components/DataTable/NormalTable";
 import { useState } from "react";
 import { AddIcon } from "@chakra-ui/icons";
 import { useGetDistributionInvestorMutation } from "../../../../Services/io.service";
@@ -30,6 +33,9 @@ import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
+import ToastBox from "../../../../Components/ToastBox";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+import { IoCalculator } from "react-icons/io5";
 
 export const investor = yup.object().shape({
   amount: yup.string().required("Amount is required"),
@@ -37,7 +43,10 @@ export const investor = yup.object().shape({
 
 const DistributionInvestor = ({ isOpen, onClose }) => {
   const params = useParams();
+  const toast = useToast();
   const id = params?.id;
+  const [ isCalculateLoading, setIsCalculateLoading ] = useState(false)
+  const [ calcualtedData, setCalculatedDate ] = useState(null)
 
   // const {
   //   data:IObyID,
@@ -79,23 +88,8 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     "($)",
   ];
 
-  const filteredData = [
-    {
-      id: 1,
-    },
-    {
-      id: 1,
-    },
-    {
-      id: 1,
-    },
-    {
-      id: 1,
-    },
-  ];
 
-  const [extractedArray, setExtractedArray] = useState(
-    filteredData?.map((item, index) => ({
+  const extractedArray = calcualtedData?.data?.map((item, index) => ({
       id: item?.id,
       "Sr No.": (
         <Box
@@ -113,28 +107,28 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
       "Client Id": (
         <Box w={100} isTruncated={true}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            BH00000001
+            {item?.clientId}
           </Text>
         </Box>
       ),
       "First name": (
         <Box minW={24} isTruncated={true}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            Faisal
+            {item?.firstName}
           </Text>
         </Box>
       ),
       "Last Name": (
         <Box minW={24} isTruncated={true}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            Aljalahma
+            {item?.lastName}
           </Text>
         </Box>
       ),
       Amount: (
         <Box minW={24} isTruncated={true}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            $100,000 /-
+            {item?.amount}
           </Text>
         </Box>
       ),
@@ -146,25 +140,25 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
             color={"teal.900"}
             fontWeight={"500"}
           >
-            26.0 %
+            {item?.distribution_per} %
           </Text>
         </Box>
       ),
       "($)": (
         <Box minW={24} isTruncated={true}>
           <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            $100,000 /-
+            {item?.distribution_amt?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
           </Text>
         </Box>
       ),
     }))
-  );
+
 
   const Total = () => {
     return (
       <Table size="sm">
-        <Tbody backgroundColor="gray.50">
-          <Tr>
+        <Tbody>
+          <Tr  backgroundColor="gray.50">
             <Th
               textAlign={"left"}
               p={3}
@@ -218,7 +212,7 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              $100200
+              {calcualtedData?.totalInvestedAmt?.toFixed(2)?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
             </Th>
             <Th
               textAlign={"left"}
@@ -229,7 +223,7 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              100.0%
+              {calcualtedData?.distributed_per?.toFixed(2)}%
             </Th>
             <Th
               textAlign={"center"}
@@ -240,7 +234,7 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
               wordBreak="normal"
               overflowWrap="normal"
             >
-              $100230
+            {calcualtedData?.distributed_amt?.toFixed(2)?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
             </Th>
           </Tr>
         </Tbody>
@@ -248,8 +242,35 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
     );
   };
 
-  const onSubmit = (data) => {
+  const onSubmit = async (data) => {
     console.log(data);
+    setIsCalculateLoading(true)
+
+    try {
+          const res = await getDistributionInvestment({id,data})
+          console.log(res?.data?.data);
+
+          if (res?.error?.status === 401) {
+            toast({
+              render: () => (
+                <ToastBox message={res?.error?.data?.message} status={"error"} />
+              ),
+            })
+            setIsCalculateLoading(false)
+          } else if(res?.data?.statusCode === 200){
+            setCalculatedDate(res?.data?.data)
+            toast({
+              render: () => (
+                <ToastBox message={res?.data?.message} />
+              ),
+            })
+            setIsCalculateLoading(false)
+
+          }
+    
+        } catch (error) {
+    
+        }
   };
 
   console.log(errors);
@@ -269,13 +290,16 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
           <HStack onSubmit={handleSubmit(onSubmit)} as={"form"} mb={4}>
             {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
             <FormControl isInvalid={errors.amount}>
-              <FormLabel fontSize={"sm"}> Amount to Distribute</FormLabel>
-              <Box display={"flex"} alignItems={"center"}>
+              <FormLabel textAlign={'right'} fontSize={"sm"} > Amount to Distribute</FormLabel>
+              <Box display={"flex"} justifyContent={'end'} alignItems={"end"} gap={0}>
                 <Controller
                   name="amount"
                   control={control}
                   render={({ field }) => (
-                    <Input
+                    <CurrencyInput
+                  
+                    rounded={0}
+                    w={'18%'}
                       {...field}
                       fontSize={"sm"}
                       type="number"
@@ -285,12 +309,12 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
                   )}
                 />
                 <Button
-                ml={3}
-                  // leftIcon={<AddIcon />}
+                  leftIcon={<IoCalculator />}
                   size={"sm"}
-                  rounded={"sm"}
+                  rounded={0}
                   colorScheme="forestGreen"
                   type="submit"
+                  isLoading={isCalculateLoading}
                 >
                   Calculate
                 </Button>
@@ -301,14 +325,16 @@ const DistributionInvestor = ({ isOpen, onClose }) => {
             </FormControl>
           </HStack>
 
-          <DataTable
+          {calcualtedData ? <NormalData
             emptyMessage={`We don't have any Sponers `}
             tableHeadRow={tableHeadRow}
             data={extractedArray}
-            setData={setExtractedArray}
-            caption={<Total />}
+            total={<Total />}
             // isLoading={isLoading}
-          />
+          /> : <Alert status='info' fontSize={'sm'} rounded={'sm'}>
+          <AlertIcon />
+          Please enter amount to calcutale Distribution!
+        </Alert>}
         </ModalBody>
         <ModalFooter pt={0}>
           <Button
diff --git a/src/Services/io.service.js b/src/Services/io.service.js
index 6a8bdc4..0c6521c 100644
--- a/src/Services/io.service.js
+++ b/src/Services/io.service.js
@@ -202,7 +202,7 @@ export const ioService = createApi({
     updateStatusIo: builder.mutation({
       query: ({ data, id }) => ({
         url: `/io/admin/transaction/${id}/update-status/`,
-        method: "PATCH",
+        method: "POST",
         body: data,
       }),
       invalidatesTags: ["getIOById", 'getIO'],
@@ -247,22 +247,12 @@ export const ioService = createApi({
 
     getDistributionInvestor : builder.mutation({
       query: ({id,data}) => ({
-        url: `/io/admin/io-distribution/pre-populate/${id}`,
+        url: `/io/admin/transaction/${id}/calculate-distribution-amt`,
         method: "POST",
         body: data,
       }),
       invalidatesTags: ["getIOById"],
     }),
-
-  
-
-
-
-
-
-
-
-
   }),
 });