diff --git a/src/Components/Loaders/Loader01.jsx b/src/Components/Loaders/Loader01.jsx
index 1ca3a81..67e3c02 100644
--- a/src/Components/Loaders/Loader01.jsx
+++ b/src/Components/Loaders/Loader01.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./FullscreenLoaders.css";
+import './FullscreenLoaders.css'
 import { Spinner } from "@chakra-ui/react";
 
 const Loader01 = () => {
@@ -15,15 +15,17 @@ const Loader01 = () => {
     //   <div className="dot-spinner__dot"></div>
     // </div>
 
-    // {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
-
-    <Spinner
-      thickness="4px"
-      speed="0.65s"
-      emptyColor="#fff"
-      color="#004118"
-      size="lg"
-    />
+    // <div className="dot-spinner">
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    // </div>
+    <Spinner color='green.900' />
   );
 };
 
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 27a771b..7afc70a 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -231,14 +231,14 @@ const DashboardLayout = ({ isOnline }) => {
         return (
           <span className="d-flex align-items-end gap-2">
             <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deposit pending request
+            Deposit Pending Request
           </span>
         );
       case path.startsWith("/deposit-history"):
         return (
           <span className="d-flex align-items-end gap-2">
             <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Deposite request
+            Deposite Request
           </span>
         );
         
diff --git a/src/Pages/AccountDeletion/InvestorComment.jsx b/src/Pages/AccountDeletion/InvestorComment.jsx
index 35c33ea..bf22ba4 100644
--- a/src/Pages/AccountDeletion/InvestorComment.jsx
+++ b/src/Pages/AccountDeletion/InvestorComment.jsx
@@ -49,7 +49,7 @@ const InvestorComment = ({ isOpen, onClose }) => {
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                   rounded={"md"}
                   resize={"none"}
                 />
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
index b6e26a2..7090541 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
@@ -4,6 +4,7 @@ import {
   Button,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -35,7 +36,7 @@ const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
 export const conformModalSchema = yup.object().shape({
   investorAmount: yup.string().required("Investor amount is required"),
-  comment: yup.string().notRequired(),
+  comment: yup.string().notRequired() .max(200, "Approve Comment cannot be more than 200 characters"),
   supporting_FileName: yup.mixed().required("File is required"),
   // .test("fileType", "Unsupported File Format", (value) => {
   //   return value && FILE_TYPES.includes(value.type);
@@ -192,7 +193,7 @@ const DepositRequestApprove = ({
                 )}
               </FormControl>
               <FormControl mb={4}>
-                <FormLabel fontSize="sm">Comments</FormLabel>
+                <FormLabel fontSize="sm">Comment</FormLabel>
                 <Textarea
                   rows={5}
                   focusBorderColor="green.400"
@@ -201,14 +202,19 @@ const DepositRequestApprove = ({
                   fontSize="sm"
                   type="textarea"
                   size="sm"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                   resize={"none"}
+                  maxLength={200} 
                 />
                 {errors.comment && (
                   <Text fontSize="xs" color="red">
                     {errors.comment.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comment")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
diff --git a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
index c5e01f2..8a8ea29 100644
--- a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import { useDepositRejectMutation } from "../../../Services/deposit.request.serv
 import ToastBox from "../../../Components/ToastBox";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required") 
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -121,15 +124,20 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your comments...."}
+                placeholder={"Enter your comment...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200} 
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/Fawateer/CreateRequest.jsx b/src/Pages/Fawateer/CreateRequest.jsx
index 0529ef9..07ce60c 100644
--- a/src/Pages/Fawateer/CreateRequest.jsx
+++ b/src/Pages/Fawateer/CreateRequest.jsx
@@ -45,7 +45,7 @@ const validationSchema = Yup.object().shape({
     .typeError("Transaction amount must be a number") // Custom error message if it's not a number
     .positive("Transaction amount must be greater than zero"),
   spportFile_path: Yup.mixed().required("Support file is required"),
-  makerComment: Yup.string(),
+  makerComment: Yup.string()  .max(200, "Approve Comment cannot be more than 50 characters"),
 });
 
 const CreateRequest = () => {
@@ -62,6 +62,7 @@ const CreateRequest = () => {
   const {
     control,
     register,
+    watch,
     handleSubmit,
     setValue,
     reset,
@@ -393,6 +394,7 @@ const CreateRequest = () => {
             rounded={"sm"}
             placeholder={"Description"}
             {...register("makerComment")}
+            maxLength={200}
           />
           <FormHelperText
             fontSize={"xs"}
@@ -401,6 +403,12 @@ const CreateRequest = () => {
           >
             {errors.makerComment?.message}
           </FormHelperText>
+          <FormHelperText fontSize="xs" color="gray.500">
+            <Box as="span" me={1}>
+              Maximum length should be 200 characters. You have entered
+            </Box>
+            {watch("makerComment")?.length || 0} characters.
+          </FormHelperText>
         </FormControl>
 
         {/* Submit Button */}
diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
index 870c4b2..a9777d2 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
@@ -116,7 +116,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
         setDeleteAlertVideo(false);
         setIsLoadingBtn(false);
         toast({
-          render: () => <ToastBox message={res?.data?.message} status="error" />,
+          render: () => <ToastBox message={res?.data?.message} status="success" />,
         });
       }
     } catch (error) {
@@ -134,7 +134,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
         setDeleteAlertImage(false);
         setIsLoadingBtn(false);
         toast({
-          render: () => <ToastBox message={res?.data?.message} status="error" />,
+          render: () => <ToastBox message={res?.data?.message} status="success" />,
         });
 
       }
@@ -372,7 +372,7 @@ const sortedDataVideo = [...(IObyID?.data?.artifactsVideo || [])]?.sort(
           Manage IO Images
         </Box>
         <HStack>
-
+ 
 
           {IObyID?.data?.artifactsImage?.length !== 0 &&<SetDisplayOrderIOArtifactsImages data={sortedDataImage} />}
           <Button
diff --git a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
index 535f7a7..0e68193 100644
--- a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Input,
   Stack,
@@ -26,7 +27,8 @@ import { useParams } from "react-router-dom";
 import ToastBox from "../../../Components/ToastBox";
 
 const investmentVideoSchema = yup.object().shape({
-  artifactName: yup.string().required("Artifact name is required"),
+  artifactName: yup.string().required("Artifact name is required")
+  .max(50, "Approve Comment cannot be more than 50 characters"),
   artifactStreamingURL: yup.string()
     .required("Artifact streaming URL is required")
     .url("Invalid URL format"),
@@ -152,21 +154,25 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
 
           <DrawerBody>
             <Stack spacing={4}>
-              <FormControl isInvalid={errors.artifactName}>
+              <FormControl isInvalid={errors.artifactName} isRequired>
                 <FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
                 <Controller
                   name="artifactName"
                   control={control}
                   render={({ field }) => (
-                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} />
+                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} maxLength={50}  />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.artifactName?.message}
                 </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 50 characters. You have entered </Box>
+                    {watch("artifactName")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
 
-              <FormControl isInvalid={errors.artifactStreamingURL}>
+              <FormControl isInvalid={errors.artifactStreamingURL} isRequired>
                 <FormLabel fontSize={"sm"}>Artifact Streaming URL</FormLabel>
                 <Controller
                   name="artifactStreamingURL"
@@ -211,7 +217,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleSave}
-        message={"Are you sure you want to add this artifact?"}
+        message={"Are you sure you want to update this artifact?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
index 3bc016d..fc10f40 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Input,
   Select,
@@ -33,10 +34,11 @@ const cashDetails = yup.object().shape({
   transactionDate: yup.string().required("Date is required"),
   ioTransType_xid: yup.number().required("Cash transaction is required"),
   transactionAmount: yup.number().required("Transaction Amount is required"),
-  comments: yup.string().notRequired(),
+  comments: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
-const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data, setActiveTab }) => {
   const params = useParams() 
   const id = params?.id
   const [file, setFile] = useState("");
@@ -88,6 +90,7 @@ const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
           render: () => <ToastBox message={res?.data?.message} />,
         });
         handleClose()
+        setActiveTab(1)
       }else if(res?.error){
         setIsLoading(false);
         toast({
@@ -198,18 +201,23 @@ const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
 
 
               <FormControl isInvalid={errors.comments}>
-                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <FormLabel fontSize={"sm"}>Comment</FormLabel>
                 <Controller
                   name="comments"
-                  control={control}
+                  control={control} 
                   render={({ field }) => (
-                    <Textarea {...field} textAlign={'left'} 
+                    <Textarea {...field} textAlign={'left'}  
+                    maxLength={200} 
                     focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.comments?.message}
                 </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comments")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
 
             </Stack>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
index 749498b..4780be9 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -82,11 +82,11 @@ const Approved = () => {
 
   const tableHeadRow = [
     "Sr No.",
-    "Transaction date",
+    "Transaction Date",
     "Transaction Type",
     "Amount",
     "Comments",
-    "Update by",
+    "Update By",
     "Update On",
   ];
 
@@ -97,7 +97,7 @@ const Approved = () => {
         {index + 1}.
       </Text>
     ),
-    "Transaction date": (
+    "Transaction Date": (
       <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
         {formatDate(item?.transactionDate)}
       </Text>
@@ -123,7 +123,7 @@ const Approved = () => {
         {item?.comments ? item?.comments : "---"}
       </Text>
     ),
-    "Update by": (
+    "Update By": (
       <Text
         w={"100px"}
         as={"span"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
index 3055a43..a66e6af 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -1,4 +1,5 @@
 import {
+  Badge,
   Box,
   Button,
   Tab,
@@ -9,7 +10,7 @@ import {
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useRef } from "react";
+import React, { useContext, useRef, useState } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
 import Rejected from "./Rejected";
@@ -24,15 +25,14 @@ const IOCashDetails = () => {
   const params = useParams();
   const toast = useToast();
   const id = params?.id;
-  const { IODetails} = useContext(GlobalStateContext);
+  const { IODetails } = useContext(GlobalStateContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const firstField = useRef();
 
   const [updateIOCase] = useUpdateIOCaseMutation();
+  const [activeTab, setActiveTab] = useState(0);
 
   const handleAdd = async () => {
-    
-    
     try {
       const res = await updateIOCase(id);
       if (res?.data) {
@@ -56,69 +56,83 @@ const IOCashDetails = () => {
 
   return (
     <Box>
-    <Tabs variant='unstyled'>
-      <Box
-        display={"flex"}
-        justifyContent={"space-between"}
-        alignItems={"center"}
-        borderBottom={"1px solid #ccc"}
+      <Tabs
+        index={activeTab}
+        onChange={(index) => setActiveTab(index)}
+        variant="unstyled"
       >
-        <TabList>
-          <Tab
-            fontSize={"sm"}
-            _selected={{
-              color: "#004118",
-              borderBottom: "2px solid #38a169",
-            }}
-          >
-            Approved
-          </Tab>
-          <Tab
-            fontSize={"sm"}
-            _selected={{
-              color: "#004118",
-              borderBottom: "2px solid #38a169",
-            }}
-          >
-            Pending
-          </Tab>
-          <Tab
-            fontSize={"sm"}
-            _selected={{
-              color: "#004118",
-              borderBottom: "2px solid #38a169",
-            }}
-          >
-            Rejected
-          </Tab>
-        </TabList>
-        {IODetails?.isInvestedAmount ? (
-        localStorage?.getItem('role') ==="Maker" && 
-        <Button
-          onClick={handleAdd}
-          leftIcon={<AddIcon />}
-          colorScheme="forestGreen"
-          size={"sm"}
-          rounded={"sm"}
-          fontSize={"xs"}
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          borderBottom={"1px solid #ccc"}
         >
-          Add
-        </Button>
-         ) : null} 
-      </Box>
-      <TabPanels>
-        <TabPanel>
-          <Approved />
-        </TabPanel>
-        <TabPanel>
-          <Pending />
-        </TabPanel>
-        <TabPanel>
-          <Rejected />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
-    <AddCaseDetails
+          <TabList>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Approved
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Pending
+              {IODetails?.ioCashStatusHistory?.Pending.length > 0 && (
+                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                  {IODetails?.ioCashStatusHistory?.Pending.length !== 0 && IODetails?.ioCashStatusHistory?.Pending.length}
+                </Badge>
+              )}
+              {/* <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                {IODetails?.ioCashStatusHistory?.Pending.length || 0}
+              </Badge> */}
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Rejected
+            </Tab>
+          </TabList>
+          {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === "Maker" && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null}
+        </Box>
+        <TabPanels>
+          <TabPanel>
+            <Approved />
+          </TabPanel>
+          <TabPanel>
+            <Pending />
+          </TabPanel>
+          <TabPanel>
+            <Rejected />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+      <AddCaseDetails
+        setActiveTab={setActiveTab}
         isOpen={isOpen}
         onClose={onClose}
         firstField={firstField}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
index fa7e9db..b025968 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -98,11 +98,11 @@ const Pending = () => {
 
   const tableHeadRow = [
     "Sr No.",
-    "Transaction date",
+    "Transaction Date",
     "Transaction Type",
     "Amount",
     "Comments",
-    "Update by",
+    "Update By",
     "Update On",
     ...(localStorage?.getItem('role')!=="Maker" ? ["Actions"] : []),
     
@@ -115,7 +115,7 @@ const Pending = () => {
         {index + 1}.
       </Text>
     ),
-    "Transaction date": (
+    "Transaction Date": (
       <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
         {formatDate(item?.transactionDate)}
       </Text>
@@ -141,7 +141,7 @@ const Pending = () => {
         {item?.comments}
       </Text>
     ),
-    "Update by": (
+    "Update By": (
       <Text
         w={"100px"}
         as={"span"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
index 470fdc8..38598ec 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -77,11 +77,11 @@ import AddCaseDetails from "./AddCaseDetails";
   
     const tableHeadRow = [
       "Sr No.",
-      "Transaction date",
+      "Transaction Date",
       "Transaction Type",
       "Amount",
       "Comments",
-      "Update by",
+      "Update By",
       "Update On",
     ];
   
@@ -96,7 +96,7 @@ import AddCaseDetails from "./AddCaseDetails";
           {index + 1}.
         </Text>
       ),
-      "Transaction date": (
+      "Transaction Date": (
         <Text
           as={"span"}
           color={"gray.600"}
@@ -135,7 +135,7 @@ import AddCaseDetails from "./AddCaseDetails";
           {item?.comments}
         </Text>
       ),
-      "Update by": (
+      "Update By": (
         <Text
           w={"100px"}
           as={"span"}
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
index c771b46..a737d08 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,24 +124,24 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.message}
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
-                 {watch("checkerComment")?.length || 0} characters.
+                 {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
index 3a44d26..9e48976 100644
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -125,12 +128,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IODetails.jsx b/src/Pages/IO_Management/CreateIO/IODetails.jsx
index 18ff85c..de5ce86 100644
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -70,7 +70,7 @@ const schema = yup.object().shape({
   InvestmentDetails: yup.string().notRequired(),
 
   comment: yup.string().notRequired()
-  .min(10, "Comment must be at least 10 characters long")
+  // .min(10, "Comment must be at least 10 characters long")
   .max(100, "Comment must be at most 100 characters long"),
 
   expectedReturn: yup
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
index 0427829..4d575fb 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   HStack,
   Input,
@@ -36,7 +37,8 @@ import { formatDatee } from "../../../../Components/FormField";
 const ioNav = yup.object().shape({
   transactionDate: yup.string().required("Date is required"),
   transactionAmount: yup.number().required("New NAV is required"),
-  comments: yup.string().notRequired(),
+  comments: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const AddNavDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
@@ -204,17 +206,21 @@ console.log(calculatePercentage(1092500, 976070));
 
 
               <FormControl isInvalid={errors.comments}>
-                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <FormLabel fontSize={"sm"}>Comment</FormLabel>
                 <Controller
                   name="comments"
                   control={control}
                   render={({ field }) => (
-                    <Textarea {...field}  fontSize={"sm"} type="text" size={"sm"} />
+                    <Textarea {...field} maxLength={200}   fontSize={"sm"} type="text" size={"sm"} />
                   )}
                 />
                 <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                   {errors.comments?.message}
                 </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comments")?.length || 0} characters.
+                  </FormHelperText>
               </FormControl>
 
             </Stack>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
index 03cf067..5aca373 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -54,6 +54,7 @@
 // export default IONAVDetails;
 
 import {
+  Badge,
   Box,
   Button,
   Tab,
@@ -134,6 +135,11 @@ const IONAVDetails = () => {
               }}
             >
               Pending
+              {IODetails?.ioNAVStatusHistory?.Pending.length > 0 && (
+                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                  {IODetails?.ioNAVStatusHistory?.Pending.length || 0}
+                </Badge>
+              )}
             </Tab>
             <Tab
               fontSize={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
index edad9d3..4d1a439 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,24 +124,24 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.message}
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
               <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                {watch("checkerComment")?.length || 0} characters.
+                {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
index 3a44d26..9e48976 100644
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -125,12 +128,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                 placeholder={"Enter your comments...."}
                 rounded={"md"}
                 resize={"none"}
+                maxLength={200}
               />
               {errors.comments && (
                 <Text fontSize="xs" color="red">
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
index 639d4b7..1ce7964 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveDistributedMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -126,24 +126,24 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}> Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
index 8ea065e..ff29faf 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveInvestedMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -124,24 +124,24 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
index 1233c75..9c0e86f 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -108,24 +108,24 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                   <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
index 2b3f4fa..d2506bd 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -24,7 +24,7 @@ import {
   import {  useApproveExitTransactionMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -122,24 +122,24 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                  <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
index 7ac057d..265a638 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
@@ -1,10 +1,19 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
-import React from "react";
+import {
+  Badge,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
 import Approved from "./Approved";
 import Pending from "./Pending";
 import Rejected from "./Rejected";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
 
 const IOTransaction = () => {
+  const { IODetails } = useContext(GlobalStateContext);
   return (
     <Tabs>
       <TabList>
@@ -25,6 +34,11 @@ const IOTransaction = () => {
           }}
         >
           Pending
+          {IODetails?.ioTransactionRecords?.Pending.length > 0 && (
+            <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+              {IODetails?.ioTransactionRecords?.Pending.length || 0}
+            </Badge>
+          )}
         </Tab>
         <Tab
           fontSize={"sm"}
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
index 507aeb2..1eae102 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -25,9 +25,9 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useApproveDistributionMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  // checkerComment: yup.string().required("Comment is required")
+  // comments: yup.string().required("Comment is required")
   // .max(50, "Investment name cannot be more than 50 characters"),
-  checkerComment: yup
+  comments: yup
   .string()
   .required("Comment is required")
   .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -123,24 +123,24 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
               <Textarea
                 rows={6}
                 focusBorderColor="green.400"
-                name="checkerComment"
-                {...register("checkerComment")}
+                name="comments"
+                {...register("comments")}
                 fontSize="sm"
                 type="textarea"
                 size="md"
-                placeholder={"Enter your checkerComment...."}
+                placeholder={"Enter your checker comment...."}
                 rounded={"md"}
                 resize={"none"}
                 maxLength={200}
               />
-              {errors.checkerComment && (
+              {errors.comments && (
                 <Text fontSize="xs" color="red">
-                  {errors.checkerComment.message}
+                  {errors.comments.message}
                 </Text>
               )}
               <FormHelperText fontSize="xs" color="gray.500">
               <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                {watch("checkerComment")?.length || 0} characters.
+                {watch("comments")?.length || 0} characters.
               </FormHelperText>
             </FormControl>
           </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
index 5bc15c7..a5a16a5 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -25,9 +25,9 @@ import {
   import { useApproveDistributionMutation, useApproveExitMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
   
   export const conformModalSchema = yup.object().shape({
-    // checkerComment: yup.string().required("Comment is required")
+    // comments: yup.string().required("Comment is required")
     // .max(50, "Investment name cannot be more than 50 characters"),
-    checkerComment: yup
+    comments: yup
     .string()
     .required("Comment is required")
     .max(200, "Approve Comment cannot be more than 200 characters"),
@@ -123,24 +123,24 @@ import {
                 <Textarea
                   rows={6}
                   focusBorderColor="green.400"
-                  name="checkerComment"
-                  {...register("checkerComment")}
+                  name="comments"
+                  {...register("comments")}
                   fontSize="sm"
                   type="textarea"
                   size="md"
-                  placeholder={"Enter your checkerComment...."}
+                  placeholder={"Enter your checker comment...."}
                   rounded={"md"}
                   resize={"none"}
                   maxLength={200}
                 />
-                {errors.checkerComment && (
+                {errors.comments && (
                   <Text fontSize="xs" color="red">
-                    {errors.checkerComment.message}
+                    {errors.comments.message}
                   </Text>
                 )}
                 <FormHelperText fontSize="xs" color="gray.500">
                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
-                  {watch("checkerComment")?.length || 0} characters.
+                  {watch("comments")?.length || 0} characters.
                 </FormHelperText>
               </FormControl>
             </ModalBody>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
index d4631f4..3e1660d 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Input,
   Modal,
@@ -24,7 +25,8 @@ import ToastBox from "../../../../Components/ToastBox";
 import { useRejectIOCaseMutation } from "../../../../Services/io.service";
 
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
@@ -35,6 +37,7 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose})
   const {
     register,
     reset,
+    watch,
     handleSubmit,
     formState: { errors },
   } = useForm({
@@ -136,6 +139,10 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose})
                   {errors.comments.message}
                 </Text>
               )}
+              <FormHelperText fontSize="xs" color="gray.500">
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
             </FormControl>
           </ModalBody>
           <ModalFooter>
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
index a297a60..9af6d74 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -116,6 +116,7 @@ const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
   };
 
   // const formatDate = (date) => new Date(date).toLocaleDateString();
+  
 
   const handleAmountChange = (e) => {
     // e might be an object or just a value, handle both cases
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
index e388d02..b4ee8ca 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -86,15 +86,17 @@ import RequestRejectModal from "./RequestRejectModal";
       resolver: yupResolver(investorExit),
     });
   
-    // useEffect(() => {
-    //   console.log("hiit     useEffectc");
-    //   handleCalculate(id, {
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    //   reset({
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    // }, [IODetails, id]);
+    useEffect(() => {
+      console.log("hiit     useEffectc");
+      if (id && IODetails) {
+        handleCalculate(id, {
+          amount: IODetails?.ioMVNAV,
+        });
+       }
+      reset({
+        amount: IODetails?.ioMVNAV,
+      });
+    }, [IODetails, id]);
   
     const handleCalculate = async (id, data) => {
       try {
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
index 6df053a..b0ec1d3 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -72,9 +72,14 @@ const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
 
   useEffect(() => {
     console.log("hiit     useEffectc");
-    handleCalculate(id, {
-      amount: IODetails?.ioMVNAV,
-    });
+    // handleCalculate(id, {
+    //   amount: IODetails?.ioMVNAV,
+    // });
+    if (id && IODetails) {
+      handleCalculate(id, {
+        amount: IODetails?.ioMVNAV,
+      });
+     }
     reset({
       amount: IODetails?.ioMVNAV,
     });
diff --git a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
index 1bb0b6a..a14168a 100644
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -76,18 +76,21 @@ import RequestRejectModal from "./RequestRejectModal";
       resolver: yupResolver(),
     });
   
-    // useEffect(() => {
-    //   console.log("hiit     useEffectc");
-    //   handleCalculate(id, {
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    //   reset({
-    //     amount: IODetails?.ioMVNAV,
-    //   });
-    // }, [IODetails, id]);
+    useEffect(() => {
+      console.log("hiit     useEffectc");
+     if (id && IODetails) {
+      handleCalculate(id, {
+        amount: IODetails?.ioMVNAV,
+      });
+     }
+      reset({
+        amount: IODetails?.ioMVNAV,
+      });
+    }, [IODetails, id]);
   
     const handleCalculate = async (id, data) => {
       try {
+        
         const res = await getDistributionInvestment({ id, data });
         console.log(res?.data?.data);
   
diff --git a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
index fe617b0..bfade61 100644
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -363,7 +363,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index, }) => {
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message="Are you sure you want to delete the sponsor?"
+        message="Are you sure you want to delete the Investment?"
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
diff --git a/src/Pages/IO_Management/CreateIO/Investors.jsx b/src/Pages/IO_Management/CreateIO/Investors.jsx
index 36f0955..3d37013 100644
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -103,16 +103,16 @@ const Investors = ({ data }) => {
   // Table setup 
   const tableHeadRow = [
     "Client ID",
-    "First name",
-    "Last name",
-    "Investment amount",
+    "First Name",
+    "Last Name",
+    "Investment Amount",
     "Percentage",
     "Market Value",
     "Return on Investment",
     "Distribution",
     "Distribution Percent",
     "Total Return",
-    "Total return on Investment",
+    "Total Return on Investment",
   ];
 
   const handleUpdateStatus = debounce((id) => {
@@ -164,7 +164,7 @@ const Investors = ({ data }) => {
     "Distribution": parseFloat(item?.Distribution_Amt) || 0, // Convert to float
     "Distribution Percent": parseFloat(item?.Distribution_Per) || 0, // Convert to float
     "Total Return": parseFloat(item?.Total_Return) || 0, // Convert to float
-    "Total return on Investment": parseFloat(item?.Total_Return_On_Investment) || 0, // Convert to float
+    "Total Return on Investment": parseFloat(item?.Total_Return_On_Investment) || 0, // Convert to float
   }));
 
   console.log(exportInvestorDetails);
@@ -508,7 +508,7 @@ console.log(IODetails?.investors);
             > 
               Export xls
             </Button>
-            <Box as="span">
+            {/* <Box as="span">
               <Icon
                 ms={0}
                 animation={
@@ -524,7 +524,7 @@ console.log(IODetails?.investors);
                 _hover={{ bg: "gray.100" }}
                 cursor={"pointer"}
               />
-            </Box>
+            </Box> */}
           </Box>
 
           <HStack
diff --git a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
index 6d2eee0..e4bd99b 100644
--- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
@@ -89,7 +89,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
       const res = await deleteKeyMerits(actionId);
       if (res?.data?.statusCode === 200) {
         toast({
-          render: () => <ToastBox message={res?.data?.message} />,
+          render: () => <ToastBox message={res?.data?.message} status={"success"}  />,
         });
         setIsBtnLoading(false);
         setDeleteAlert(false);
diff --git a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
index 0c71ac1..76c7299 100644
--- a/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
+++ b/src/Pages/IO_Management/EditIO/InvestmentEdit.jsx
@@ -297,7 +297,7 @@ const InvestmentEdit = ({ isOpen, onClose, thirdField, id, data }) => {
         onClose={() => setAlert(false)}
         alertHandler={handleConfirm}
         isLoading={isLoading}
-        message="Are you sure you want to add this document?"
+        message="Are you sure you want to add this Investment?"
       />
     </Drawer>
   );
diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx
index f80f838..2e3ea3f 100644
--- a/src/Pages/IO_Management/IOArtifactsAdd.jsx
+++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx
@@ -10,6 +10,7 @@ import {
   DrawerOverlay,
   FormControl,
   FormErrorMessage,
+  FormHelperText,
   FormLabel,
   Icon,
   Image,
@@ -35,7 +36,7 @@ import { IoMdRemoveCircleOutline } from "react-icons/io";
 
 const investmentImageSchema = yup.object().shape({
   artifactName: yup.string().required("Artifact image name is required")
-  .max(25, "File name must be at most 25 characters"),
+  .max(50, "Approve Comment cannot be more than 50 characters"),
   artifactPathName: yup.mixed().required("Artifact image is required"),
 });
 
@@ -226,19 +227,24 @@ const IOArtifactsAdd = ({
                   <Controller
                     name="artifactName"
                     control={control}
+                    //  maxLength={50} 
                     render={({ field }) => (
                       <Input
                         {...field}
                         fontSize={"sm"}
                         type="text"
                         size={"sm"}
-                        maxLength={25} 
+                        maxLength={50} 
                       />
                     )}
-                  />
+                  /> 
                   <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                     {errors.artifactName?.message}
                   </FormErrorMessage>
+                  <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 50 characters. You have entered </Box>
+                    {watch("artifactName")?.length || 0} characters.
+                  </FormHelperText>
                 </FormControl>
 
                 <FormControl
@@ -354,7 +360,7 @@ const IOArtifactsAdd = ({
         isOpen={alert}
         onClose={handleAlertClose}
         alertHandler={handleSave}
-        message={"Are you sure you want to add this artifact?"}
+        message={"Are you sure you want to update this artifact?"}
         isLoading={loading}
       />
     </>
diff --git a/src/Pages/IO_Management/InvestmentDocuments.jsx b/src/Pages/IO_Management/InvestmentDocuments.jsx
index 848c0cb..f89958f 100644
--- a/src/Pages/IO_Management/InvestmentDocuments.jsx
+++ b/src/Pages/IO_Management/InvestmentDocuments.jsx
@@ -60,7 +60,7 @@ export const investmentDocSchema = yup.object().shape({
   //   return value && value.size <= 2 * 1024 * 1024; // 2MB in bytes
   // })
   fileName: yup.string().required("File name is required")
-  .max(25, "File name must be at most 25 characters"), // Maximum length validation,
+  .max(30, "File name must be at most 30 characters"), // Maximum length validation,
   documentNameArabic: yup.string().required("File name Arabic is required")
   .max(25, "File name must be at most 30 characters"), 
 });
@@ -91,6 +91,7 @@ const InvestmentDocuments = ({
   const {
     register,
     handleSubmit,
+    watch,
     reset,
     formState: { errors },
   } = useForm({
@@ -210,13 +211,17 @@ const InvestmentDocuments = ({
                   fontSize="sm"
                   type="text"
                   size="sm"
-                  maxLength={25} // Maximum length constraint in the input field
+                  maxLength={30} // Maximum length constraint in the input field
                 />
                 {errors.fileName && (
                   <Text mt={1} fontSize="xs" fontWeight={500} color="red">
                     {errors.fileName.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 30 characters. You have entered </Box>
+                    {watch("fileName")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
 
 
@@ -229,13 +234,17 @@ const InvestmentDocuments = ({
                   type="text"
                   size="sm"
                   textAlign={'right'}
-                  maxLength={30} // Maximum length constraint in the input field
+                  maxLength={35} // Maximum length constraint in the input field
                 />
                 {errors.documentNameArabic && (
                   <Text mt={1} fontSize="xs" fontWeight={500} color="red">
                     {errors.documentNameArabic.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 35 characters. You have entered </Box>
+                    {watch("documentNameArabic")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
 
 
diff --git a/src/Pages/IO_Management/KeyMeritsAdd.jsx b/src/Pages/IO_Management/KeyMeritsAdd.jsx
index f7582c0..950acb1 100644
--- a/src/Pages/IO_Management/KeyMeritsAdd.jsx
+++ b/src/Pages/IO_Management/KeyMeritsAdd.jsx
@@ -360,7 +360,7 @@ const KeyMeritsAdd = ({ isOpen, onClose, firstField, id, icons }) => {
         onClose={handleClose}
         // alertHandler={handleSave}
         alertHandler={handleConfirm}
-        message={"Are you sure you want to add this key merit?"}
+        message={"Are you sure you want to add this key merits?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/IO_Management/KeyMeritsEdit.jsx b/src/Pages/IO_Management/KeyMeritsEdit.jsx
index e6dbe80..8f0b888 100644
--- a/src/Pages/IO_Management/KeyMeritsEdit.jsx
+++ b/src/Pages/IO_Management/KeyMeritsEdit.jsx
@@ -367,7 +367,7 @@ const KeyMeritsEdit = ({
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleSave}
-        message={"Are you sure you want to add this key merit?"}
+        message={"Are you sure you want to update this key merits?"}
         isLoading={isLoading}
       />
     </>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
index cb3a6d1..0360eee 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdata.jsx
@@ -1,7 +1,10 @@
 import {
   Box,
   Button,
+  Icon,
   Input,
+  keyframes,
+  Stack,
   Tab,
   TabList,
   TabPanel,
@@ -16,7 +19,7 @@ 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";
-import { ArrowBackIcon } from "@chakra-ui/icons";
+import { ArrowBackIcon, RepeatIcon } from "@chakra-ui/icons";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ViewIOdataHeader from "./ViewIOdataHeader";
 import ViewIOdetails from "./ViewIOdetails";
@@ -34,27 +37,44 @@ import EditIO from "../EditIO/EditIO";
 import IOArtifacts from "../CreateIO/IOArtifacts";
 // import IOCashDetails from "../CreateIO/IOCashDetailsold";
 // import IONAVDetails from "../CreateIO/IONAVDetailsOld";
-import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
+import { useGetIOByIdQuery, useGetIOprepopulateDataQuery } from "../../../Services/io.service";
 import UnderConstruction from "../../UnderConstruction";
 import Destribution from "../CreateIO/Destribution";
 import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
 import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
 import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";
+import { GoDotFill } from "react-icons/go";
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
 
 const ViewIOdata = () => {
   const params = useParams();
   const id = params?.id;
-  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
+  const { data, error, isLoading, refetch } = useGetIOprepopulateDataQuery();
+  const {
+    data: IObyID,
+    isLoading: IObyIDisLoading,
+    error: IObyIDerror,
+    refetch: IObyIDrefetch,
+  } = useGetIOByIdQuery(id, { skip: !id });
   const { isOpen, onOpen, onClose } = useDisclosure();
   const navigate = useNavigate();
   const [isEditing, setIsEditing] = useState(false);
+  const [isRefetchLoading, setIsRefetchLoading] = useState(false);
   const { IODetails, setIODetails } = useContext(GlobalStateContext);
-  console.log(IODetails?.isInvestedAmount); 
+  console.log(IODetails?.isInvestedAmount);
 
   const tabs = [
     { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
     {
-      label: "Investment documents", 
+      label: "Investment documents",
       content: <InvestmentDocument data={data?.data} />,
     },
     { label: "Key merits", content: <KeyMerits data={data?.data} /> },
@@ -74,6 +94,15 @@ const ViewIOdata = () => {
     // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
   ];
 
+  const handleRefresh = async () => {
+    setIsRefetchLoading(true);
+
+    await IObyIDrefetch();
+    setIsRefetchLoading(false);
+  };
+
+  console.log(IODetails?.ioNAVHistory);
+
   return (
     <Box
       {...OPACITY_ON_LOAD}
@@ -94,7 +123,7 @@ const ViewIOdata = () => {
 
       <Tabs mt={4}>
         <TabList justifyContent={"space-between"} pe={4} alignItems={"center"}>
-          <Box display={"flex"}>
+          <Box display={"flex"} position={"relative"} w={"100%"}>
             {tabs.map(({ label }, index) => (
               <Tab
                 px={3}
@@ -108,7 +137,6 @@ const ViewIOdata = () => {
                     ? false
                     : !IODetails?.isInvestedAmount
                 }
-                
                 // isDisabled={
                 //   index === 0 ||
                 //   index === 1 ||
@@ -125,10 +153,59 @@ const ViewIOdata = () => {
                   borderBottom: "2px solid #38a169",
                 }}
                 fontWeight={500}
+                position={"relative"}
               >
-                {label}
+                {label}{" "}
+                {(index === 5 &&
+                  IODetails?.ioCashStatusHistory?.Pending?.length !== 0) ||
+                (index === 6 &&
+                  IODetails?.ioNAVStatusHistory?.Pending?.length !== 0) ||
+                (index === 8 &&
+                  IODetails?.ioTransactionRecords?.Pending?.length !== 0) ? (
+                  <Box
+                    as="span"
+                    right={0}
+                    color={"forestGreen"}
+                    top={1}
+                    position={"absolute"}
+                  >
+                    <GoDotFill />
+                  </Box>
+                ) : (
+                  ""
+                )}
               </Tab>
             ))}
+            {/* <Box as="span" position={"absolute"} right={2} bottom={1}>
+              <Icon
+                ms={0}
+                animation={
+                  isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
+                }
+                bg={"gray.50"}
+                onClick={handleRefresh}
+                fontWeight={600}
+                as={RepeatIcon}
+                boxSize={8}
+                p={2}
+                rounded={"full"}
+                _hover={{ bg: "gray.100" }}
+                cursor={"pointer"}
+              />
+            </Box> */}
+            <Stack position={"absolute"} right={1} bottom={1} direction="row" spacing={4}>
+              <Button
+                isLoading={isRefetchLoading}
+                loadingText="Refresh"
+                colorScheme="forestGreen"
+                variant="solid"
+                size={'xs'}
+                onClick={handleRefresh}
+                fontWeight={400}
+              >
+                Refresh
+              </Button>
+            </Stack>
           </Box>
         </TabList>
         <TabPanels>
diff --git a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
index bd2d3f8..6c837be 100644
--- a/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
+++ b/src/Pages/IO_Management/ViewIO/ViewIOdetails.jsx
@@ -1,4 +1,4 @@
-import { Box, Button } from "@chakra-ui/react";
+import { Box, Button, Text } from "@chakra-ui/react";
 import React, { useContext, useEffect } from "react";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -240,11 +240,6 @@ const ViewIOdetails = () => {
       width: "32.3%",
       value: IObyID?.data?.isShariah,
     },
-
-
-
-
-
     {
       label: "Investment Type",
       placeHolder: "Select option",
@@ -351,19 +346,22 @@ const ViewIOdetails = () => {
 
   return (
     <Box position={"relative"}>
-      <Button
-        position={"absolute"}
-        top={"-62px"}
-        right={0}
-        onClick={() => navigate(`/create-io/${params?.id}`)}
-        ps={4}
-        pe={4}
-        colorScheme="forestGreen"
-        rounded={"sm"}
-        size={"xs"}
-      >  
-        Edit IO
-      </Button>
+      <Box display={"flex"} justifyContent={"space-between"}>
+        <Text></Text>
+        <Button
+          // position={"absolute"}
+          // top={"-62px"}
+          right={0}
+          onClick={() => navigate(`/create-io/${params?.id}`)}
+          ps={4}
+          pe={4}
+          colorScheme="forestGreen"
+          rounded={"sm"}
+          size={"xs"}
+        >  
+          Edit IO
+        </Button>
+      </Box>
       <FormInputView  groupedFields={groupedFields} />
     </Box>
   );
diff --git a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
index 3e50cc9..69abf45 100644
--- a/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/InvestorDetails.jsx
@@ -213,13 +213,14 @@ const InvestorDetails = () => {
         as={'span'}
           fontWeight={"700"}
           textTransform={"none"}
-          color={item.ioStatus ? "gray.500":item.kycStatus ? "blue.500" : "red.500"}
+          color={item?.KYCStatus === true ? "green" : "yellow.500"}
           px={2}
           py={0.5}
           variant={'solid'}
 
         >
-          {item.KYCStatus ? "Completed" : "Not complete"}
+          {/* {item.KYCStatus ? "Completed" : "Not complete"} */}
+          {item?.KYCStatus === true ? "Completed" : "NotCompleted"}
         </Text>
       </Box>
     ),
diff --git a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
index 844f470..6884845 100644
--- a/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/Kyc.jsx
@@ -49,7 +49,7 @@ const Kyc = () => {
           <HStack spacing={4} mb={4}>
             <FormControl>
               <FormLabel mb={1} fontSize={"sm"}>
-                House/Unit
+                Address line 1
               </FormLabel>
               <Input
                 bg={"#ccc3"}
@@ -62,7 +62,7 @@ const Kyc = () => {
             </FormControl>
             <FormControl>
               <FormLabel mb={1} fontSize={"sm"}>
-                Road/Street
+                Address line 2
               </FormLabel>
               <Input
                 bg={"#ccc3"}
diff --git a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
index d37fc31..a7fdfc0 100644
--- a/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/AddInvestmentType.jsx
@@ -24,7 +24,7 @@ export const addInvestmentType = yup.object().shape({
     .string()
     .required("Investment type is required")
     .max(50, "Investment name cannot be more than 50 characters"),
-  note: yup.string().optional().max(255, "Note cannot exceed 255 characters"),
+  // note: yup.string().optional().max(255, "Note cannot exceed 255 characters"),
   investmentTypeNameArabic: yup
     .string()
     .required("Investment type in required"),
@@ -199,7 +199,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "note",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       section: "",
       maxLength: 255,
       helperText: `Maximum length should be 255 characters. You have entered ${
@@ -211,7 +211,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "noteArabic",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       arabic: true,
       section: "",
       maxLength: 255,
@@ -254,7 +254,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "note",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       section: "",
       maxLength: 255,
       helperText: `Maximum length should be 255 characters. You have entered ${
@@ -266,7 +266,7 @@ const AddInvestmentType = () => {
       placeHolder: " ",
       name: "noteArabic",
       type: "textarea",
-      // isRequired: true,
+      isRequired: false,
       arabic: true,
       section: "",
       maxLength: 255,
@@ -338,7 +338,7 @@ const AddInvestmentType = () => {
         isOpen={alert}
         onClose={() => setAlert(false)}
         alertHandler={handleConfirm}
-        message={id ? "Are you sure you want to update this document?" : " Are you sure you want to add this document?"}
+        message={id ? "Are you sure you want to update this Investment Type?" : " Are you sure you want to add this Investment Type?"}
         isLoading={isLoadingBtn}
       />
     </Box>
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index 9916ea0..8c92882 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -232,16 +232,49 @@ const InvestmentType = () => {
 
   // ==================== [Delete Function] =======================
 
+  // const handleDelete = async () => {
+  //   console.log(actionId);
+  //   setIsLoading(true);
+  //   try {
+  //     const response = await deleteInvestmentType(actionId);
+  //     console.log(response);
+  //     setIsLoading(false);
+  //     setDeleteAlert(false);
+  //   } catch (error) {}
+  // };
+
   const handleDelete = async () => {
     console.log(actionId);
     setIsLoading(true);
     try {
       const response = await deleteInvestmentType(actionId);
-      console.log(response);
+      console.log(response?.data);
+  
+      if (response?.error?.data?.code === 400) {
+        toast({
+          render: () => (
+            <ToastBox message={response?.error?.data?.message} status="error" />
+          ),
+        });
+      } else if (
+        response?.data?.statusCode === 201 ||
+        response?.data?.statusCode === 200
+      ) {
+        toast({
+          render: () => (
+            <ToastBox message={response?.data?.message} status="success" />
+          ),
+        });
+      }
       setIsLoading(false);
       setDeleteAlert(false);
-    } catch (error) {}
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
   };
+  
+
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
@@ -315,7 +348,7 @@ const InvestmentType = () => {
       <CustomAlertDialog
         onClose={() => setDeleteAlert(false)}
         isOpen={deleteAlert}
-        message={"Are you sure you want to delete sponers?"}
+        message={"Are you sure you want to delete Investment Type?"}
         alertHandler={handleDelete}
         isLoading={isLoading}
       />
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 2af1bc0..d179d77 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -187,13 +187,13 @@ const Sponser = () => {
       console.log(response?.data);
       if(response?.error?.data?.code === 400){
         toast({
-          render: () => <ToastBox message={response?.error?.data?.message} status={'warn'} />,
+          render: () => <ToastBox message={response?.error?.data?.message} status={'error'} />,
         });
         setIsLoading(false);
         setDeleteAlert(false);
       } else if(response?.data?.statusCode === 201 || response?.data?.statusCode === 200){
         toast({
-          render: () => <ToastBox message={response?.data?.message} status={'error'} />,
+          render: () => <ToastBox message={response?.data?.message} status={'success'} />,
         });
         setIsLoading(false);
         setDeleteAlert(false);
@@ -201,7 +201,7 @@ const Sponser = () => {
       }
     } catch (error) {}
   };
-
+ 
   console.log(isSponserLoading);
 
   
diff --git a/src/Pages/SplashScreen.jsx b/src/Pages/SplashScreen.jsx
index 47f0bc6..9e2b656 100644
--- a/src/Pages/SplashScreen.jsx
+++ b/src/Pages/SplashScreen.jsx
@@ -13,27 +13,17 @@ const SplashScreen = () => {
       gap={10}
     >
       <Image src={logo} />
-
-      {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
-      {/* <Spinner color='green.900' size='md' /> */}
+      <Spinner color='green.900' size='md' />
       {/* <div className="dot-spinner">
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-    <div className="dot-spinner__dot"></div>
-</div> */}
-
-      <Spinner
-        thickness="4px"
-        speed="0.65s"
-        emptyColor="#fff"
-        color="#004118"
-        size="lg"
-      />
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+        <div className="dot-spinner__dot"></div>
+      </div> */}
     </Box>
   );
 };
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
index a70e7e6..6163e42 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestApprove.jsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   FormControl,
+  FormHelperText,
   FormLabel,
   Heading,
   HStack,
@@ -36,7 +37,8 @@ const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
 export const conformModalSchema = yup.object().shape({
   investorAmount: yup.string().required("Investor amount is required"),
-  comment: yup.string().notRequired(),
+  comment: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });
 
 const DrawalRequestApprove = ({
@@ -59,6 +61,7 @@ const DrawalRequestApprove = ({
   const {
     control,
     register,
+    watch,
     reset,
     handleSubmit,
     formState: { errors },
@@ -259,12 +262,17 @@ const DrawalRequestApprove = ({
                   size="sm"
                   placeholder={"Enter your comments...."}
                   resize={"none"}
+                  maxLength={200}
                 />
                 {errors.comment && (
                   <Text fontSize="xs" color="red">
                     {errors.comment.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
+                  {watch("checkerComment")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
diff --git a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
index 3766c66..85b9a7f 100644
--- a/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
+++ b/src/Pages/WithDrawal/DrawalRequest/DrawalRequestReject.jsx
@@ -2,6 +2,7 @@ import {
     Box,
     Button,
     FormControl,
+    FormHelperText,
     FormLabel,
     Input,
     Modal,
@@ -24,7 +25,8 @@ import {
 import { useDepositRejectMutation } from "../../../Services/drawal.request.service";
   
   export const conformModalSchema = yup.object().shape({
-    comments: yup.string().required("Comment is required"),
+    comments: yup.string().required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
   });
   
   const DrawalRequestReject = ({ isOpen, onClose, firstField ,id}) => {
@@ -34,6 +36,7 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
   
     const {
       register,
+      watch,
       reset,
       handleSubmit,
       formState: { errors },
@@ -101,16 +104,21 @@ import { useDepositRejectMutation } from "../../../Services/drawal.request.servi
                   placeholder={"Enter your comments...."}
                   rounded={"md"}
                   resize={"none"}
+                  maxLength={200}
                 />
                 {errors.comments && (
                   <Text fontSize="xs" color="red">
                     {errors.comments.message}
                   </Text>
                 )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Text as={"span"} me={1}>Maximum length should be 200 characters. You have entered</Text>
+                  {watch("comments")?.length || 0} characters.
+                </FormHelperText>
               </FormControl>
             </ModalBody>
             <ModalFooter>
-              <Button
+              <Button 
                 colorScheme="gray"
                 mr={3}
                 onClick={onClose}