diff --git a/src/Components/SwitchButton.jsx b/src/Components/SwitchButton.jsx
new file mode 100644
index 0000000..6ec1401
--- /dev/null
+++ b/src/Components/SwitchButton.jsx
@@ -0,0 +1,29 @@
+// SwitchButton.js
+import { Box, Switch, Text } from '@chakra-ui/react';
+import React from 'react';
+
+const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
+  const switch_onChange_handle = () => {
+    setIsSwitchOn(!isSwitchOn);
+  };
+
+  return (
+    <Box display="flex" alignItems="center">
+      <Switch
+        size="lg"
+        isChecked={isSwitchOn}
+        onChange={switch_onChange_handle}
+        sx={{
+          ".chakra-switch__track": {
+            backgroundColor: isSwitchOn ? "#707070" : "#4CCD8D",
+          },
+        }}
+      />
+      <Text ml={4} className={isSwitchOn ? 'mont' : 'year'}>
+        {isSwitchOn ? 'Active' : 'Inactive'}
+      </Text>
+    </Box>
+  );
+};
+
+export default SwitchButton;
diff --git a/src/Pages/Master/InvestmentType/InvestmentType.jsx b/src/Pages/Master/InvestmentType/InvestmentType.jsx
index 578124b..1d123b3 100644
--- a/src/Pages/Master/InvestmentType/InvestmentType.jsx
+++ b/src/Pages/Master/InvestmentType/InvestmentType.jsx
@@ -36,6 +36,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "./AddInvestmentType";
 import DataTable from "../../../Components/DataTable/DataTable";
+import SwitchButton from "../../../Components/SwitchButton";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -50,11 +51,12 @@ const InvestmentType = () => {
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
 
   useEffect(() => {
     // Simulate loading
     const timer = setTimeout(() => {
-      setIsLoading(false); 
+      setIsLoading(false);
     }, 1500);
 
     // Cleanup the timer on component unmount
@@ -102,183 +104,161 @@ const InvestmentType = () => {
     return nameMatches;
   });
 
-  const [ extractedArray, setExtractedArray ] = useState(filteredData?.map((item, index) => ({
-    // id: item?.id,
-    "Sr.no": (
-      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {index + 1}
-      </Text>
-    ),
-    "Investment Type": (
-      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.investmentName}
-      </Text>
-    ),
-    Description: (
-      <Box w={"200px"} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.description}
+  const [extractedArray, setExtractedArray] = useState(
+    filteredData?.map((item, index) => ({
+      // id: item?.id,
+      "Sr.no": (
+        <Text
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {index + 1}
         </Text>
-      </Box>
-    ),
-    Status: (
-      <Switch
-        size={"sm"}
-        colorScheme="green"
-        onChange={() => handleUpdateStatus(item.id)}
-        isChecked={item.status}
-      />
-    ),
-
-    // item?.status ? (
-    //   <Badge bg={'transparent'} color={"#05c46b"}>
-    //     Passed
-    //   </Badge>
-    // ) : (
-    //   <Badge bg={'transparent'} color={"#f53b57"}>
-    //     Not passes
-    //   </Badge>
-    // ),
-
-    // "Created At": (
-    //   <span className="d-flex justify-content-between align-items-center">
-    //     <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
-    //       {formatDate(item.createdAt)}
-    //     </Text>
-    //     <Menu>
-    //       <MenuButton className="link p-1 rounded-1">
-    //         <HiDotsVertical className="rubix-text-dark fs-6" />
-    //       </MenuButton>
-    //       <Portal>
-    //         <MenuList minWidth="80px">
-    //           <RouterLink to={`edit-sponser/${item.id}`}>
-    //             <MenuItem className="web-text-medium">Edit</MenuItem>
-    //           </RouterLink>
-    //           <RouterLink to={`view-sponser/${item.id}`}>
-    //             <MenuItem className="web-text-medium">View</MenuItem>
-    //           </RouterLink>
-    //           <MenuItem
-    //             onClick={() => {
-    //               setActionId(item?.id);
-    //               setDeleteAlert(true);
-    //             }}
-    //             className="web-text-medium"
-    //           >
-    //             Delete
-    //           </MenuItem>
-    //         </MenuList>
-    //       </Portal>
-    //     </Menu>
-    //   </span>
-    // ),
-    Action: (
-      <Box display={"flex"} justifyContent={"center"} gap={2} >
-        <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
-          label="View"
-          bg="#fff"
-          color={"green.500"}
-          placement="top"
+      ),
+      "Investment Type": (
+        <Text
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
         >
-          <Button
-            _hover={{ color: "green.500" }}
-            // transition={"0.5s all"}
-            onClick={() => {
-              navigate(`view-investment/${item.id}`);
-            }}
-            color="green.300"
-            rounded={"sm"}
-            size={"xs"}
-          >
-            <ViewIcon />
-          </Button>
-        </Tooltip>
+          {item.investmentName}
+        </Text>
+      ),
+      Description: (
+        <Box w={"200px"} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item.description}
+          </Text>
+        </Box>
+      ),
+      Status: (
+        // <Switch
+        //   size={"sm"}
+        //   colorScheme="green"
+        //   onChange={() => handleUpdateStatus(item.id)}
+        //   isChecked={item.status}
+        // />
+        <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
+      ),
 
-        <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
-          label="Edit"
-          bg="#fff"
-          color={"blue.500"}
-          placement="top"
-        >
-          <Button
-            onClick={() => {
-              navigate(`edit-investment/${item.id}`);
-            }}
-            _hover={{ color: "blue.500" }}
-            // transition={"0.5s all"}
-            color="blue.400"
-            rounded={"sm"}
-            size={"xs"}
-          >
-            <EditIcon />
-          </Button>
-        </Tooltip>
+      // item?.status ? (
+      //   <Badge bg={'transparent'} color={"#05c46b"}>
+      //     Passed
+      //   </Badge>
+      // ) : (
+      //   <Badge bg={'transparent'} color={"#f53b57"}>
+      //     Not passes
+      //   </Badge>
+      // ),
 
-        <Tooltip
-          rounded={"sm"}
-          fontSize={"xs"}
-          label="Delete"
-          bg="#fff"
-          color={"red.500"}
-          placement="top"
-        >
-          <Button
-            onClick={() => {
-              setActionId(item?.id);
-              setDeleteAlert(true);
-            }}
-            _hover={{ color: "red.500" }}
-            // transition={"0.5s all"}
-            color="red.300"
+      // "Created At": (
+      //   <span className="d-flex justify-content-between align-items-center">
+      //     <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+      //       {formatDate(item.createdAt)}
+      //     </Text>
+      //     <Menu>
+      //       <MenuButton className="link p-1 rounded-1">
+      //         <HiDotsVertical className="rubix-text-dark fs-6" />
+      //       </MenuButton>
+      //       <Portal>
+      //         <MenuList minWidth="80px">
+      //           <RouterLink to={`edit-sponser/${item.id}`}>
+      //             <MenuItem className="web-text-medium">Edit</MenuItem>
+      //           </RouterLink>
+      //           <RouterLink to={`view-sponser/${item.id}`}>
+      //             <MenuItem className="web-text-medium">View</MenuItem>
+      //           </RouterLink>
+      //           <MenuItem
+      //             onClick={() => {
+      //               setActionId(item?.id);
+      //               setDeleteAlert(true);
+      //             }}
+      //             className="web-text-medium"
+      //           >
+      //             Delete
+      //           </MenuItem>
+      //         </MenuList>
+      //       </Portal>
+      //     </Menu>
+      //   </span>
+      // ),
+      Action: (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Tooltip
             rounded={"sm"}
-            size={"xs"}
+            fontSize={"xs"}
+            label="View"
+            bg="#fff"
+            color={"green.500"}
+            placement="top"
           >
-            <DeleteIcon />
-          </Button>
-        </Tooltip>
-      </Box>
-    ),
+            <Button
+              _hover={{ color: "green.500" }}
+              // transition={"0.5s all"}
+              onClick={() => {
+                navigate(`view-investment/${item.id}`);
+              }}
+              color="green.300"
+              rounded={"sm"}
+              size={"xs"}
+            >
+              <ViewIcon />
+            </Button>
+          </Tooltip>
 
-    // "Created At":
-    //   mouseEntered && mouseEnteredId === item?.id ? (
-    //     // false ? (
-    //     <Box w={38} as="span" display={"flex"} justifyContent={"start"} gap={3}>
-    //     <Box as="span" p={1} className="link" rounded={'sm'} >
-    //       <EditIcon fontSize={'md'} />
-    //     </Box>
-    //       <Box as="span" p={1} className="link" rounded={'sm'} >
-    //         <ViewIcon fontSize={'md'} />
-    //       </Box>
-    //       <Box as="span" p={1} className="link" rounded={'sm'} >
-    //         <DeleteIcon fontSize={'md'} />
-    //       </Box>
-    //     </Box>
-    //   ) : (
-    //     <Box
-    //       as="span" display={"flex"} justifyContent={"start"}
-    //       p={1}
-    //     >
-    //       <Text  as={"span"} color={"gray.600"} fontWeight={"500"}>
-    //         {formatDate(item.createdAt)}
-    //       </Text>
-    //     </Box>
-    //   ),
-  })));
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Edit"
+            bg="#fff"
+            color={"blue.500"}
+            placement="top"
+          >
+            <Button
+              onClick={() => {
+                navigate(`edit-investment/${item.id}`);
+              }}
+              _hover={{ color: "blue.500" }}
+              // transition={"0.5s all"}
+              color="blue.400"
+              rounded={"sm"}
+              size={"xs"}
+            >
+              <EditIcon />
+            </Button>
+          </Tooltip>
+
+          <Tooltip
+            rounded={"sm"}
+            fontSize={"xs"}
+            label="Delete"
+            bg="#fff"
+            color={"red.500"}
+            placement="top"
+          >
+            <Button
+              onClick={() => {
+                setActionId(item?.id);
+                setDeleteAlert(true);
+              }}
+              _hover={{ color: "red.500" }}
+              // transition={"0.5s all"}
+              color="red.300"
+              rounded={"sm"}
+              size={"xs"}
+            >
+              <DeleteIcon />
+            </Button>
+          </Tooltip>
+        </Box>
+      ),
+    }))
+  );
 
   const handleDelete = () => {
     const IOtype = investmentType.filter(
@@ -294,7 +274,7 @@ const InvestmentType = () => {
   };
 
   return (
-    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}  pb={38}>
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       <Box bg="white.500">
         <HStack
           display={"flex"}
diff --git a/src/Pages/Master/Sponser/AddSponser.jsx b/src/Pages/Master/Sponser/AddSponser.jsx
index dee284c..2cd4612 100644
--- a/src/Pages/Master/Sponser/AddSponser.jsx
+++ b/src/Pages/Master/Sponser/AddSponser.jsx
@@ -1,46 +1,33 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-import {
-  Box,
-  Divider,
-  FormControl,
-  FormLabel,
-  Heading,
-  Input,
-  Select,
-  Textarea,
-  Button,
-  Text,
-} from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { useForm, Controller } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { WarningTwoIcon } from "@chakra-ui/icons";
 import { TiWarning } from "react-icons/ti";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
 import FormInputMain from "../../../Components/FormInputMain";
+import {
+  useCreateSponserMutation,
+  // useEditSponserMutation,
+  useGetSponserByIdQuery,
+  useUpdateSponserMutation,
+} from "../../../Services/sponser.service";
+import ToastBox from "../../../Components/ToastBox";
+import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 
 export const addSponser = yup.object().shape({
-  sponserName: yup.string().required("Sponser name is required"),
-  sponserNameArabic: yup.string().required("Sponser name is required"),
-  mobileNo: yup.string().required("Mobile no is required"),
-  sponserAddress: yup.string().required("Sponser address is required"),
-
-  bankName: yup.string().required("Bank Name is required"),
-  accountNumber: yup.string().required("Account Number is required"),
-  swiftCode: yup.string().required("SWIFT/BIC Code is required"),
-  bankEmail: yup.string().email("Invalid email format"),
- 
-  // routingNumber: yup.string().required("Routing Number is required"),
-  // iban: yup.string().required("IBAN is required"),
-  // accountType: yup.string().required("Account Type is required"),
-  // bankPhoneNumber: yup.string().required("Bank Phone Number is required"),
-  // bankBranch: yup.string().required("Bank Branch is required"),
-  // branchAddress: yup.string().required("Branch Address is required"),
-  // ifscCode: yup.string().required("IFSC Code is required"),
-  // accountHolderName: yup.string().required("Account Holder's Name is required"),
+  sponsorName: yup.string().required("Sponser name is required"),
+  sponsorNameArabic: yup.string().required("Sponser name is required"),
+  mobileNo: yup
+    .string()
+    .required("Mobile no is required")
+    .matches(/^[0-9]+$/, "Mobile no must be only digits")
+    .min(10, "Mobile no must be at least 10 digits")
+    .max(10, "Mobile no must be at most 15 digits"),
 });
 
 export function debounce(func, delay) {
@@ -52,6 +39,7 @@ export function debounce(func, delay) {
 }
 
 const AddSponser = () => {
+  const params = useParams();
   const navigate = useNavigate();
   const [bannerImageData, setBannerImageData] = useState(null);
   const [selectedBannerImageData, setSelectedBannerImageData] = useState(null);
@@ -60,184 +48,108 @@ const AddSponser = () => {
   const [selectedOtherImageData, setSelectedOtherImageData] = useState(null);
 
   const { sponser, setSponser } = useContext(GlobalStateContext);
+
+  const [createSponser] = useCreateSponserMutation();
+
+  const [updateSponser] = useUpdateSponserMutation();
+  console.log(params?.id);
+  const { data, error, isLoading } = useGetSponserByIdQuery(params?.id);
+  console.log(data?.data);
+ 
+
   const {
     control,
 
     handleSubmit,
     formState: { errors },
+    reset,
   } = useForm({
     resolver: yupResolver(addSponser),
   });
 
   console.log(errors);
 
-  const handleBannerImageChange = (e) => {
-    const file = e.target.files[0];
-    setBannerImageData(file);
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setSelectedBannerImageData(reader.result);
-      };
-      reader.readAsDataURL(file);
+  useEffect(() => {
+    if (data) {
+      reset({
+        sponsorName: data?.data?.sponsorName,
+        mobileNo: data?.data?.mobileNo,
+        sponsorNameArabic: data?.data?.sponsorNameArabic,
+      });
     }
-  };
-
-  // Handler for file input
-  const handleOtherImageChange = (e) => {
-    const files = Array.from(e.target.files);
-    const newImageData = [...(otherImageData || []), ...files]; // Ensure otherImageData is an array
-
-    setOtherImageData(newImageData);
-
-    const readers = files.map((file) => {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          resolve(reader.result);
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-      });
-    });
-
-    Promise.all(readers)
-      .then((results) => {
-        setSelectedOtherImageData([
-          ...(selectedOtherImageData || []),
-          ...results,
-        ]); // Ensure selectedOtherImageData is an array
-      })
-      .catch((error) => {
-        console.error("Error reading files:", error);
-      });
-  };
-
-  // Function to remove a specific image
-  const removeOtherImage = (index) => {
-    const newImageData = otherImageData.filter((_, i) => i !== index);
-    const newSelectedImageData = selectedOtherImageData.filter(
-      (_, i) => i !== index
-    );
-
-    setOtherImageData(newImageData);
-    setSelectedOtherImageData(newSelectedImageData);
-  };
+  }, [data, reset]);
 
+  if (isLoading) {
+    return <FullscreenLoaders />;
+  }
+  
   // console.log(selectedBannerImageData);
 
   const formFields = [
     {
       label: "Sponser name (English)",
-      placeHolder:" ",
-      name: "sponserName",
+      placeHolder: " ",
+      name: "sponsorName",
       type: "text",
       isRequired: true,
       section: "Add Details",
     },
     {
-      label: "Sponser Name (Arabic)",
-      name: "sponserNameArabic",
-      placeHolder:" ",
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Description (English)",
-      name: "description",
-      placeHolder:" ",
-      type: "textarea",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Description (Arabic)",
-      name: "descriptionArabic",
-      placeHolder:" ",
-      type: "textarea",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Address (English)",
-      name: "sponserAddress", 
-      placeHolder:" ",
+      label: "Sponser name (Arabic)",
+      name: "sponsorNameArabic",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
+      isArabic:true
     },
     {
-      label: "Address (Arabic)",
-      name: "sponserAddressArabic",
-      placeHolder:" ",
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Bank Name (English)",
-      name: "bankName",
-      placeHolder:" ",
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Bank Name (Arabic)",
-      name: "bankNameArabic",
-      placeHolder:" ",
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Account Name (English)",
-      name: "accountHolderName",
-      placeHolder:" ",
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Account Name (Arabic)",
-      name: "accountHolderNameArabic",
-      placeHolder:" ",
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Mobile Number (English)",
+      label: "Mobile Number",
       name: "mobileNo",
-      placeHolder:" ",
+      placeHolder: " ",
       type: "number",
       isRequired: true,
       section: "Add Details",
     },
+  ];
+
+  const formEditFields = [
     {
-      label: "Account Number (English)",
-      name: "accountNumber",
-      placeHolder:" ",
+      label: "Sponser name",
+      placeHolder: " ",
+      name: "sponsorName",
       type: "text",
       isRequired: true,
       section: "Add Details",
     },
     {
-      label: "IFSC Code (English)",
-      placeHolder:" ",
-      name: "swiftCode",
+      label: "Sponser name (Arabic)",
+      name: "sponsorNameArabic",
+      placeHolder: " ",
       type: "text",
       isRequired: true,
       section: "Add Details",
+      isArabic:true
+    },
+    {
+      label: "Mobile Number",
+      name: "mobileNo",
+      placeHolder: " ",
+      type: "number",
+      isRequired: true,
+      section: "Add Details",
     },
   ];
 
+  const groupedEditFields = formEditFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
   const groupedFields = formFields.reduce((groups, field) => {
     const { section } = field;
     if (!groups[section]) {
@@ -247,24 +159,43 @@ const AddSponser = () => {
     return groups;
   }, {});
 
-  const onSubmit = (data) => {
+  const onSubmit = async (data) => {
     console.log(data);
-    setSponser([
-      {
-        ...data,
-        status: true,
-        id: uuidv4(),
-        createdAt: new Date().toISOString(),
-      },
-      ...sponser,
-    ]);  
+    // setSponser([
+    //   {
+    //     ...data,
+    //     status: true,
+    //     id: uuidv4(),
+    //     createdAt: new Date().toISOString(),
+    //   },
+    //   ...sponser,
+    // ]);
     navigate("/sponser");
+    const id = params?.id
+    try {
+      await createSponser(data).then((response) => {
+        console.log(response);
+        if (response?.data?.statusCode) {
+          toast({
+            render: () => <ToastBox message={response?.data?.message} />,
+          });
+        } else {
+          toast({
+            render: () => (
+              <ToastBox message={"Something Went Wrong"} status={"error"} />
+            ),
+          });
+        }
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
       <FormInputMain
-        groupedFields={groupedFields}
+        groupedFields={params?.id ? groupedEditFields : groupedFields}
         control={control}
         errors={errors}
         onSubmit={handleSubmit(onSubmit)}
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index 62683cb..acc3c6e 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -26,14 +26,19 @@ import {
 import Pagination from "../../../Components/Pagination";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import { useNavigate } from "react-router-dom";
 import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "./AddSponser";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
-import { useGetSponserMasterQuery } from "../../../Services/sponser.service";
+import {
+  useGetSponserMasterQuery,
+  useToggleStatusMutation,
+} from "../../../Services/sponser.service";
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
 const Sponser = () => {
+  const navigate = useNavigate();
   const toast = useToast();
 
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
@@ -57,6 +62,7 @@ const Sponser = () => {
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [toggleStatus] = useToggleStatusMutation();
   // useEffect(() => {
   //   setSponser(sponsors)
   // }, [])
@@ -74,25 +80,37 @@ const Sponser = () => {
   // ====================================================[Table Setup]================================================================
   const tableHeadRow = [
     "Sponsor name",
-    "Address",
     "Mobile no",
     "Status",
     "Created At",
     "Action",
   ];
 
-  const handleUpdateStatus = debounce((id) => {
-    setSponser((prevSponser) =>
-      prevSponser.map((sponsor) =>
-        sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
-      )
-    );
-    toast({
-      render: () => <ToastBox message={"Status changed succesfully.!"} />,
-    });
+  const handleUpdateStatus = debounce(async (id) => {
+    // setSponser((prevSponser) =>
+    //   prevSponser.map((sponsor) =>
+    //     sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
+    //   )
+    // );
+
+    try {
+      await toggleStatus({ id }).then((response) => {
+        console.log(response);
+        if (response?.data?.statusCode) {
+          toast({
+            render: () => <ToastBox message={response?.data?.message} />,
+          });
+        } else {
+          toast({
+            render: () => (
+              <ToastBox message={"Something Went Wrong"} status={"error"} />
+            ),
+          });
+        }
+      });
+    } catch (error) {}
   }, 300);
 
-  console.log(sponsors?.data?.rows);
   // // ====================================================[Table Filter]================================================================
   // const filteredData = sponsors?.data?.rows?.filter((item) => {
   //   // Filter by name (case insensitive)
@@ -117,12 +135,10 @@ const Sponser = () => {
     const name = item.sponsorName;
     const searchLower = searchTerm?.toLowerCase();
     const nameMatches = name?.toLowerCase().includes(searchLower);
-  
+
     return nameMatches;
   });
 
-  console.log(filteredData);
-
   const extractedArray = filteredData?.map((item) => ({
     // id: item?.id,
     "Sponsor name": (
@@ -136,13 +152,6 @@ const Sponser = () => {
         {item.sponsorName}
       </Text>
     ),
-    Address: (
-      <Box w={200} isTruncated={true}>
-        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-          {item.address}
-        </Text>
-      </Box>
-    ),
     "Mobile no": (
       <Box w={"auto"} isTruncated={true}>
         <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
@@ -155,7 +164,7 @@ const Sponser = () => {
         <Switch
           size={"sm"}
           colorScheme="green"
-          // onChange={() => handleUpdateStatus(item.id)}
+          onChange={() => handleUpdateStatus(item.id)}
           isChecked={item.isActive}
         />
       </Box>
@@ -189,6 +198,10 @@ const Sponser = () => {
           placement="top"
         >
           <Button
+            // onClick={() => navigate(`/view-sponser/${item.id}`) }
+            onClick={() => {
+              navigate(`view-sponser/${item.id}`);
+            }}
             _hover={{ color: "green.500" }}
             // transition={"0.5s all"}
             color="green.300"
@@ -208,6 +221,7 @@ const Sponser = () => {
           placement="top"
         >
           <Button
+            onClick={() => navigate(`/sponser/${item.id}`)}
             _hover={{ color: "blue.500" }}
             // transition={"0.5s all"}
             color="blue.400"
@@ -269,8 +283,6 @@ const Sponser = () => {
     //   ),
   }));
 
-  console.log(extractedArray);
-
   const handleDelete = () => {
     const updatedSponsors = sponser.filter(
       (sponsor) => sponsor.id !== actionId
@@ -317,7 +329,7 @@ const Sponser = () => {
                 rounded={"sm"}
                 size={"sm"}
               >
-                Add sponsorer
+                Add
               </Button>
             </Link>
           </HStack>
diff --git a/src/Pages/Master/Sponser/ViewSponser.jsx b/src/Pages/Master/Sponser/ViewSponser.jsx
index bae0f13..6c0059f 100644
--- a/src/Pages/Master/Sponser/ViewSponser.jsx
+++ b/src/Pages/Master/Sponser/ViewSponser.jsx
@@ -10,112 +10,25 @@ const ViewSponser = () => {
   const params = useParams();
   const { sponser } = useContext(GlobalStateContext);
   const { reset } = useForm(); // assuming react-hook-form
+  const { data, error, isLoading } = useGetSponserByIdQuery(params?.id);
 
-  const id = params?.id;
-  const foundObject = sponser.find(
-    (item) => item?.id.toString() === id.toString()
-  );
 
-  if (!foundObject) {
+  if (!data) {
     return <Box>Loading...</Box>;
   }
 
   const formFields = [
     {
-      label: "Sponsorer name",
-      value: foundObject.sponserName,
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
+      label: "Sponser name",
+      value:data?.sponsorName
     },
     {
-      label: "Sponsorer Name (Arabic)",
-      value: foundObject.sponserName, 
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Description",
-      value: foundObject.description,
-      type: "textarea",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Description (Arabic)",
-      value: foundObject.descriptionArabic,
-      type: "textarea",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Address",
-      value: foundObject.sponserAddress,
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Address (Arabic)",
-      value: foundObject.sponserAddressArabic,
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Bank Name",
-      value: foundObject.bankName,
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Bank Name (Arabic)",
-      value: foundObject.bankNameArabic,
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
-    },
-    {
-      label: "Account Name",
-      value: foundObject.accountNumber,
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Account Name (Arabic)",
-      value: foundObject.accountNumberArabic,
-      type: "text",
-      isRequired: true,
-      arabic: true,
-      section: "Add Details",
+      label: "Sponser name (Arabic)",
+      value:data?.sponsorNameArabic
     },
     {
       label: "Mobile Number",
-      value: foundObject.mobileNo,
-      type: "number",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "Account Number",
-      value: foundObject.accountNumber,
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-    },
-    {
-      label: "IFSC Code",
-      value: foundObject.swiftCode,
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
+      value:data?.mobileNo
     },
   ];
 
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 9628aa8..7f03347 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -41,7 +41,7 @@ export const RouteLink = [
   // ===============[ Management]===============
   { path: "/", Component: Sponser },
   { path: "/sponser", Component: Sponser },
-  { path: "/sponser/add-sponser", Component: AddSponser },
+  { path: "/sponser/:id", Component: AddSponser },
   { path: "/sponser/view-sponser/:id", Component: ViewSponser },
   { path: "/sponser/edit-sponser/:id", Component: EditSponser },
 
diff --git a/src/Services/sponser.service.js b/src/Services/sponser.service.js
index 6c44a60..ecf6299 100644
--- a/src/Services/sponser.service.js
+++ b/src/Services/sponser.service.js
@@ -6,36 +6,61 @@ import { api } from "./api.service";
 const baseUrl = api?.defaults.baseURL;
 console.log(baseUrl);
 
-
 // const baseUrl = `${import.meta.env.VITE_API_BASE_URL}/${import.meta.env.VITE_API_VERSION}`
 
 // Define a service using a base URL and expected endpoints
 export const sponserMaster = createApi({
   reducerPath: "sponserMaster",
-  baseQuery: fetchBaseQuery({  baseUrl: baseUrl }),
-  tagTypes: [],
+  baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
+  tagTypes: ["getSponser"],
   endpoints: (builder) => ({
-
-
     getSponserMaster: builder.query({
       query: ({ page, size }) => `/sponsor/admin?page=${page}&size=${size}`,
+      providesTags: ["getSponser"],
     }),
 
-
-
-
     getSponserMasterActive: builder.query({
-      query: () => '/sponsor/admin/active',
+      query: () => "/sponsor/admin/active",
+    }),
+    getSponserById: builder.query({
+      query: (id) => ({ url: `/sponsor/admin/${id}` }),
+      providesTags: ["getSponser"],
     }),
 
+    toggleStatus: builder.mutation({
+      query: ({ id }) => ({
+        url: `/sponsor/admin/toggle-status/${id}`,
+        method: "PATCH",
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
 
+    createSponser: builder.mutation({
+      query: (data) => ({
+        url: `/sponsor/admin`,
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
 
-    
-
-
+    updateSponser: builder.mutation({
+      query: ({ data, id }) => ({
+        url: `/sponsor/admin/${id}`,
+        method: "PATCH",
+        body: data,
+      }),
+      invalidatesTags: ["getSponser"],
+    }),
   }),
 });
 
 // Export hooks for usage in functional components
-export const { useGetSponserMasterQuery, useGetSponserMasterActiveQuery } = sponserMaster;
-
+export const {
+  useGetSponserMasterQuery,
+  useGetSponserMasterActiveQuery,
+  useToggleStatusMutation,
+  useCreateSponserMutation,
+  useUpdateSponserMutation,
+  useGetSponserByIdQuery,
+} = sponserMaster;