diff --git a/src/Contexts/GlobalStateContext.tsx b/src/Contexts/GlobalStateContext.tsx
index 8c7e0cd..6015cbb 100644
--- a/src/Contexts/GlobalStateContext.tsx
+++ b/src/Contexts/GlobalStateContext.tsx
@@ -2,11 +2,12 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
 // Define the shape of your context value
-type GlobalStateContextType = {
+export interface GlobalStateContextType {
   isAuthenticate: boolean;
   setIsAuthenticate: Dispatch<SetStateAction<boolean>>;
-};
-
+  isBarLoading: boolean;
+  setIsBarLoading: Dispatch<SetStateAction<boolean>>;
+}
 // Create the context with a default value of `undefined`
 const GlobalStateContext = createContext<GlobalStateContextType | undefined>(undefined);
 
diff --git a/src/Contexts/GlobalStateProvider.tsx b/src/Contexts/GlobalStateProvider.tsx
index 105a8cb..82b7d9a 100644
--- a/src/Contexts/GlobalStateProvider.tsx
+++ b/src/Contexts/GlobalStateProvider.tsx
@@ -1,14 +1,21 @@
-import { ReactNode, useState } from 'react';
-import GlobalStateContext from './GlobalStateContext';
-
+import { ReactNode, useState } from "react";
+import GlobalStateContext from "./GlobalStateContext";
 
 
 
 const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
   const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
+  const [isBarLoading, setIsBarLoading] = useState<boolean>(false); // ✅ Fixed typo
+
+ 
 
   return (
-    <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>
+    <GlobalStateContext.Provider value={{
+      isAuthenticate,
+      setIsAuthenticate,
+      isBarLoading,
+      setIsBarLoading, // ✅ Fixed typo
+    }}>
       {children}
     </GlobalStateContext.Provider>
   );
diff --git a/src/Layouts/DefaultLayout.tsx b/src/Layouts/DefaultLayout.tsx
index ac7cd29..7dd0c7d 100644
--- a/src/Layouts/DefaultLayout.tsx
+++ b/src/Layouts/DefaultLayout.tsx
@@ -24,7 +24,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
   if (!context) {
     throw new Error('App must be used within a GlobalStateProvider');
   }
-  const { setIsAuthenticate } = context;
+  const { setIsAuthenticate, isBarLoading } = context;
   const [ logOutAdmin ] = useLogOutMutation()
 
 
@@ -48,7 +48,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
 
   return (
     <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
-    <ProgressBar isLoading={false}  />
+    <ProgressBar isLoading={isBarLoading}  />
     <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
       
       <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
@@ -56,9 +56,9 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
           <Image w={55} src={logo} />
         </HStack>
         <VStack  w={'100%'} p={2} pt={0}>
-          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
+          {nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
             <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
-            <AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
+            <AccordionRoot border={location?.pathname.startsWith(initPath ?? path) ? "1px solid #02A0A0" : '1px' } key={index} bg={'#fff'} rounded={'lg'} collapsible>
               <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
                 <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
                 {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
diff --git a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
index 2275af0..7801ed7 100644
--- a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
@@ -18,7 +18,7 @@ const AboutUs = () => {
   return (
 
     <MainFrame>
-      <Box>
+      <Box pb={4}>
         <HStack
           w={"100%"}
           justifyContent={"space-between"}
@@ -61,12 +61,6 @@ const AboutUs = () => {
             {content}
           </Text>
         )}
-        {/* <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          {content}
-        </Text> */}
-        {/* <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text> */}
       </Box>
     </MainFrame>
   )
diff --git a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
index 301c0de..4d7948e 100644
--- a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -1,189 +1,119 @@
-// import { FaRegEdit } from "react-icons/fa"
-// import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-// import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-// import { Button } from "../../../components/ui/button"
-// import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service"
-
-// function AboutUsAddModel() {
-
-//     const [ updateAboutUs ] = useUpdateAboutUsMutation()
-
-
-//     try {
-//         const res = updateAboutUs({id:2, updatedData:''})
-//         console.log(res);
-
-
-//     } catch (error) {
-
-//     }
-
-
-
-
-//     return (
-
-//         <DialogRoot placement="center">
-//             <DialogTrigger asChild>
-//                 {/* <Button bg={"transparent"} size="sm">
-//                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-//                 </Button> */}
-//                 <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
-
-//             </DialogTrigger>
-
-//             <DialogContent
-//                 bg={"#fff"}
-//                 // w={{ lg: "60%", md: "230px" }}
-//                 w={{ base: '90%', md: '400px' }}
-//                 height={"auto"}
-
-//                 p={3} // Reduced padding
-//                 bgSize={'md'}
-//             >
-//                 <DialogHeader bg="white" >
-//                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-//                 </DialogHeader>
-
-//                 <DialogBody bg="white">
-//                     <Stack py={3} >
-
-//                         <Field.Root>
-//                             <Field.Label color="black" pt={1} fontSize="12px">AboutUs</Field.Label>
-//                             <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-//                         </Field.Root>
-//                     </Stack>
-//                 </DialogBody>
-//                 <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-//                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
-//                         Save
-//                     </Button>
-//                 </DialogFooter>
-
-//                 <DialogCloseTrigger color="black" />
-//             </DialogContent>
-//         </DialogRoot >
-
-//     )
-// }
-
-// export default AboutUsAddModel
-
-
 import React, { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
 import {
-    DialogBody,
-    DialogCloseTrigger,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogRoot,
-    DialogTitle,
-    DialogTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
 } from "../../../components/ui/dialog";
 import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
 import { Button } from "../../../components/ui/button";
 import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
 
 function AboutUsAddModel() {
-    const [content, setContent] = useState(""); // State for the textarea input
-    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
-    //   const toast = useToast(); // Toast for feedback
+  const [content, setContent] = useState(""); // State for the textarea input
+  const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
+  //   const toast = useToast(); // Toast for feedback
 
-    // Handle form submission
-    const handleSubmit = async (e: any) => {
-        e.preventDefault(); // Prevent default form submission
+  // Handle form submission
+  const handleSubmit = async (e: any) => {
+    e.preventDefault(); // Prevent default form submission
 
-        try {
-            // Call the updateAboutUs mutation
-            const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
-            console.log(res);
+    try {
+      // Call the updateAboutUs mutation
+      const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
+      console.log(res);
 
-            // Show success toast
-            //   toast({
-            //     title: "Success",
-            //     description: "About Us content updated successfully",
-            //     status: "success",
-            //     duration: 5000,
-            //     isClosable: true,
-            //   });
+      // Show success toast
+      //   toast({
+      //     title: "Success",
+      //     description: "About Us content updated successfully",
+      //     status: "success",
+      //     duration: 5000,
+      //     isClosable: true,
+      //   });
 
-            // Clear the input field after successful submission
-            setContent("");
-        } catch (error) {
-            // Show error toast
-            //   toast({
-            //     title: "Error",
-            //     description: "Failed to update About Us content",
-            //     status: "error",
-            //     duration: 5000,
-            //     isClosable: true,
-            //   });
-        }
-    };
+      // Clear the input field after successful submission
+      setContent("");
+    } catch (error) {
+      // Show error toast
+      //   toast({
+      //     title: "Error",
+      //     description: "Failed to update About Us content",
+      //     status: "error",
+      //     duration: 5000,
+      //     isClosable: true,
+      //   });
+    }
+  };
 
-    return (
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bgColor="#EEEEEE" pl={3} pr={3} size="xs" color="#000">
-                    <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
-                    <Text color="#000" mt={1}>
-                        Edit
-                    </Text>
-                </Button>
-            </DialogTrigger>
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button bgColor="#EEEEEE" pl={3} pr={3} size="xs" color="#000">
+          <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+          <Text color="#000" mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
 
-            <DialogContent
-                bg="#fff"
-                w={{ base: "90%", md: "400px" }}
-                height="auto"
-                p={3}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">
-                        Edit
-                    </DialogTitle>
-                </DialogHeader>
+      <DialogContent
+        bg="#fff"
+        w={{ base: "90%", md: "400px" }}
+        height="auto"
+        p={3}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">
-                                AboutUs
-                            </Field.Label>
-                            <Textarea
-                                placeholder="Enter About Us content"
-                                bgColor="#EEEEEE"
-                                color="black"
-                                border="none"
-                                pl={1}
-                                fontSize="12px"
-                                height="100px" // Increased height for better usability
-                                pt={1.5}
-                                value={content} // Bind the state to the textarea
-                                onChange={(e) => setContent(e.target.value)} // Update state on change
-                            />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                AboutUs
+              </Field.Label>
+              <Textarea
+                placeholder="Enter About Us content"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="140px" // Increased height for better usability
+                pt={1.5}
+                value={content} // Bind the state to the textarea
+                onChange={(e) => setContent(e.target.value)} 
+                resize={'none'}
+                _focusVisible={{outline:'none'}}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
 
-                <DialogFooter display="flex" justifyContent="center" pt="2">
-                    <Button
-                        w="100%"
-                        bg="#02A0A0"
-                        color="#fff"
-                        onClick={handleSubmit} // Trigger handleSubmit on button click
-                    // isLoading={isLoading} // Show loading state while the mutation is in progress
-                    >
-                        Save
-                    </Button>
-                </DialogFooter>
+        <DialogFooter display="flex" justifyContent="center" pt="2">
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color="#fff"
+            onClick={handleSubmit} // Trigger handleSubmit on button click
+            // isLoading={isLoading} // Show loading state while the mutation is in progress
+          >
+            Save
+          </Button>
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-    );
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default AboutUsAddModel;
\ No newline at end of file
+export default AboutUsAddModel;
diff --git a/src/Pages/ManageCMS/FAQ/EditDetails.tsx b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
index ee9a64e..d088351 100644
--- a/src/Pages/ManageCMS/FAQ/EditDetails.tsx
+++ b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
@@ -1,64 +1,79 @@
-import { TbEdit } from "react-icons/tb";
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Grid, Icon, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
 function EditDetails() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-                {/* <Button><FaRegEdit /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Details
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Questions
+              </Field.Label>
+              <Input
+                placeholder="Questions"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                pt={1.5}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditDetails
\ No newline at end of file
+export default EditDetails;
diff --git a/src/Pages/ManageCMS/FAQ/FAQ.tsx b/src/Pages/ManageCMS/FAQ/FAQ.tsx
index bcb9a6d..f8cdf5a 100644
--- a/src/Pages/ManageCMS/FAQ/FAQ.tsx
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -8,6 +8,7 @@ import AlertDailog from "../../../components/AlertDailog";
 import { RiDeleteBin5Line } from "react-icons/ri";
 import { Switch } from "../../../components/ui/switch";
 import FaqAddModel from "./FaqAddModel";
+import Delete from "../../../components/ActionIcons/Delete";
 
 
 // table data
@@ -31,7 +32,7 @@ const managepost: any[] = [
         </Box>
         <EditDetails />
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
diff --git a/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
index 40b1f60..5af08af 100644
--- a/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
+++ b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
@@ -1,57 +1,84 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Button } from "../../../components/ui/button";
 
 function FaqAddModel() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> <Text>Add</Text>
+        </Button>
+      </DialogTrigger>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Questions
+              </Field.Label>
+              <Input
+                placeholder="Questions"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                _focusVisible={{outline:'none'}}
+                size={'sm'}
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="120px"
+                resize={'none'}
+                _focusVisible={{outline:'none'}}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default FaqAddModel
\ No newline at end of file
+export default FaqAddModel;
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
index 12a4e46..ad5d583 100644
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
@@ -1,66 +1,57 @@
-import { Box, HStack, Text, Skeleton } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame";
-import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
 import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+import MainFrame from "../../../components/MainFrame";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
 
 
 const PrivacyPolicy = () => {
-  // Fetch data using RTK Query with type annotations
-  const { data, isLoading } = useGetPrivacyPolicyQuery();
+  const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
 
+<<<<<<< HEAD
  
+=======
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error('App must be used within a GlobalStateProvider');
+>>>>>>> cd586ddf1bf133f5c551b8188262ad150a7b8a8e
   
-
-  // Log the response for debugging
-  console.log("====================================");  
-  console.log(data);
-  console.log("====================================");
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching)
+  }, [data])
   
-  // Extract content array from the response
-  const content = data?.data?.[0]?.content;
-
   return (
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-            Privacy Policy
-          </Text>
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        {isLoading || isFetching ?
+          <Spinner /> : data?.data?.map(({ id, content, privacy_language }) => <VStack bg={'#fff'}
+            boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+            <HStack
+              w={"100%"}
+              justifyContent={"space-between"}
 
-          <HStack>
-            <PrivacyPolicyAddModel />
-          </HStack>
-        </HStack>
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                Privacy Policy <Badge variant={'surface'}  colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
+              </Text>
 
-        {/* Render multiple skeletons or content based on loading state */}
-        {isLoading || !content ? (
-          <Box px={3} pb={3} w="90%">
-            <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="15px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="80%" />
-            <Skeleton height="20px" width="60%" />
-          </Box>
-        ) : (
-          <Text
-            as="p"
-            fontSize="sm"
-            fontWeight={400}
-            color="#1D1D1D"
-            px={3}
-            w="85%"
-            mb="15px"
-          >
-            {content}
-          </Text>
-        )}
-      </Box>
+              <PrivacyPolicyAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
+      </VStack>
     </MainFrame>
   );
 };
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
index f541053..bb650fa 100644
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -1,26 +1,77 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 
 function PrivacyPolicyAddModel() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+        <Button bgColor={"#EEEEEE"} pl={3} pr={3} size={"xs"} color={"#000"}>
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
 
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                PrivacyPolicy
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
+<<<<<<< HEAD
                 p={3} // Reduced padding
                 bgSize={'md'}
             >
@@ -48,6 +99,12 @@ function PrivacyPolicyAddModel() {
         </DialogRoot >
 
     )
+=======
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+>>>>>>> cd586ddf1bf133f5c551b8188262ad150a7b8a8e
 }
 
-export default PrivacyPolicyAddModel
\ No newline at end of file
+export default PrivacyPolicyAddModel;
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
new file mode 100644
index 0000000..1244b85
--- /dev/null
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
@@ -0,0 +1,16 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+import React from 'react'
+
+const PrivacyPolicySkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+            <Skeleton height="20px" mb="10px" width="90%" />
+            <Skeleton height="20px" mb="15px" width="90%" />
+            <Skeleton height="20px" mb="10px" width="90%" />
+            <Skeleton height="20px" mb="10px" width="80%" />
+            <Skeleton height="20px" width="60%" />
+          </Box>
+  )
+}
+
+export default PrivacyPolicySkeleton
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
index 17a97fa..11d4715 100644
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
@@ -1,53 +1,77 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 
 function TermsAndConditionsAddModel() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button bgColor={"#EEEEEE"} pl={3} pr={3} size={"xs"} color={"#000"}>
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                TermsAndConditions
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">TermsAndConditions</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default TermsAndConditionsAddModel
\ No newline at end of file
+export default TermsAndConditionsAddModel;
diff --git a/src/Pages/ManageGroups/EditDetailGroup.tsx b/src/Pages/ManageGroups/EditDetailGroup.tsx
index b7da10c..a829600 100644
--- a/src/Pages/ManageGroups/EditDetailGroup.tsx
+++ b/src/Pages/ManageGroups/EditDetailGroup.tsx
@@ -1,92 +1,119 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
-import { FaRegEdit } from "react-icons/fa";
 import { AvatarGroup } from "../../components/ui/avatar";
-import { TbEdit } from "react-icons/tb";
+import Edit from "../../components/ActionIcons/Edit";
 function EditDetailGroups() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit details
+          </DialogTitle>
+        </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
-
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>   <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>{" "}
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditDetailGroups
\ No newline at end of file
+export default EditDetailGroups;
diff --git a/src/Pages/ManageGroups/ManageGroups.tsx b/src/Pages/ManageGroups/ManageGroups.tsx
index 5824d73..7d88ddb 100644
--- a/src/Pages/ManageGroups/ManageGroups.tsx
+++ b/src/Pages/ManageGroups/ManageGroups.tsx
@@ -1,16 +1,16 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
-import { InputGroup } from "../../components/ui/input-group"
-import { LuSearch } from "react-icons/lu"
-import DataTable from "../../components/DataTable"
-import AlertDailog from "../../components/AlertDailog"
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+import AlertDailog from "../../components/AlertDailog";
 import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewManageGroup from "./ViewManageGroup"
-import EditDetailGroups from "./EditDetailGroup"
-import AddGroup from "./AddGroup"
+import ViewManageGroup from "./ViewManageGroup";
+import EditDetailGroups from "./EditDetailGroup";
+import AddGroup from "./AddGroup";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewSubAdmin from "./ViewSubAdmin"
 
-
 // table data
 
 const tableHeadRow = [
@@ -26,21 +26,15 @@ const managepost: any[] = [
   ...Array.from({ length: 12 }, (_, i) => ({
     "Sr. No": i + 1,
     "Group Name": "ABC",
-    "Description": "Lorem ipsum",
-    "Date": "12/01/1987",
+    Description: "Lorem ipsum",
+    Date: "12/01/1987",
     "Group type": "Private",
-    "Action": (
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
         <ViewManageGroup />
         <EditDetailGroups />
-
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -54,8 +48,7 @@ const managepost: any[] = [
 ];
 const ManageGroups = () => {
   return (
-
-    <MainFrame >
+    <MainFrame>
       <Box>
         <HStack
           w={"100%"}
@@ -68,10 +61,13 @@ const ManageGroups = () => {
             Manage Groups
           </Text>
 
-          <HStack >
+          <HStack>
             <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -85,9 +81,9 @@ const ManageGroups = () => {
                 size={"xs"}
                 fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
-                border={'none'}
+                border={"none"}
               />
             </InputGroup>
             {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
@@ -99,7 +95,8 @@ const ManageGroups = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>    </MainFrame>
-  )
-}
-export default ManageGroups
\ No newline at end of file
+      </Box>{" "}
+    </MainFrame>
+  );
+};
+export default ManageGroups;
diff --git a/src/Pages/ManageGroups/ViewManageGroup.tsx b/src/Pages/ManageGroups/ViewManageGroup.tsx
index 4622904..cc02725 100644
--- a/src/Pages/ManageGroups/ViewManageGroup.tsx
+++ b/src/Pages/ManageGroups/ViewManageGroup.tsx
@@ -1,94 +1,116 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
-import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
-import { TbEdit } from "react-icons/tb";
+import View from "../../components/ActionIcons/View";
 function ViewManageGroup() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View details
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
 
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewManageGroup
\ No newline at end of file
+export default ViewManageGroup;
diff --git a/src/Pages/ManageJobs/ManageJobs.tsx b/src/Pages/ManageJobs/ManageJobs.tsx
index 3d408ab..d694131 100644
--- a/src/Pages/ManageJobs/ManageJobs.tsx
+++ b/src/Pages/ManageJobs/ManageJobs.tsx
@@ -7,7 +7,7 @@ import MainFrame from "../../components/MainFrame";
 import { InputGroup } from "../../components/ui/input-group";
 import ManageJobsAdd from "./ManageJobsAdd";
 import ViewManageJob from "./ViewManageJob";
-
+import Delete from "../../components/ActionIcons/Delete";
 
 // table data
 
@@ -26,21 +26,15 @@ const managepost: any[] = [
     "Sr. No": i + 1,
     "Job Title": "Freelance content writer",
     "Workspace mode": "Onsite",
-    "Category": "IT",
+    Category: "IT",
     "Sub-category": "Flutter dev",
-    "Salary": "3.5 LPA",
-    "Action": (
+    Salary: "3.5 LPA",
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
         <ViewManageJob />
         <ManageJobsAdd />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -55,7 +49,6 @@ const managepost: any[] = [
 
 const ManageJobs = () => {
   return (
-
     <MainFrame>
       <Box>
         <HStack
@@ -69,10 +62,13 @@ const ManageJobs = () => {
             View job Posting
           </Text>
 
-          <HStack >
-            <InputGroup 
+          <HStack>
+            <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -86,7 +82,7 @@ const ManageJobs = () => {
                 size={"xs"}
                 fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
               />
             </InputGroup>
@@ -98,8 +94,8 @@ const ManageJobs = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>       
+      </Box>
     </MainFrame>
-  )
-}
-export default ManageJobs
\ No newline at end of file
+  );
+};
+export default ManageJobs;
diff --git a/src/Pages/ManageJobs/ManageJobsAdd.tsx b/src/Pages/ManageJobs/ManageJobsAdd.tsx
index 60f300e..46a7454 100644
--- a/src/Pages/ManageJobs/ManageJobsAdd.tsx
+++ b/src/Pages/ManageJobs/ManageJobsAdd.tsx
@@ -1,125 +1,261 @@
-import { Field, Icon, Input, SelectValueText, Stack, createListCollection } from "@chakra-ui/react";
+import {
+  Field,
+  Icon,
+  Input,
+  SelectValueText,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
 import { Button } from "../../components/ui/button";
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
 
 import { TbEdit } from "react-icons/tb";
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import Edit from "../../components/ActionIcons/Edit";
 
 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ManageJobsAdd() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
-                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
-                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
-                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
-                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
-                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
-                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
-                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace mode
+              </Field.Label>
+              <Input
+                placeholder="Enter the Workspace Mode"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Sub-Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Sub-Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Salary
+              </Field.Label>
+              <Input
+                placeholder="Enter the Salary"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Experience
+              </Field.Label>
+              <Input
+                placeholder="Enter the Experience"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Location
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Location"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                             <Input placeholder="Enter the Country Selection"   /> */}
-                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                borderRadius={"5px"}>
-                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                            </SelectTrigger>
-                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                {frameworks.items.map((movie) => (
-                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                        fontSize="12px" >
-                                        {movie.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </SelectRoot>
-                        <Field.Root>
+            <SelectRoot collection={frameworks} size="sm" w={"100%"}>
+              <SelectLabel pt={1} color="black" fontSize="12px">
+                Country Selection
+              </SelectLabel>
+              <SelectTrigger
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                borderRadius={"5px"}
+              >
+                <SelectValueText
+                  placeholder="Enter the Country Selection"
+                  pb={"6px"}
+                  fontSize={"12px"}
+                />
+              </SelectTrigger>
+              <SelectContent position={"relative"} zIndex={"9999"} bg={"#fff"}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem
+                    item={movie}
+                    key={movie.value}
+                    color={"black"}
+                    pl={2}
+                    p={1}
+                    _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                    fontSize="12px"
+                  >
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Type"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills required
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills Required"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
 
-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ManageJobsAdd
\ No newline at end of file
+export default ManageJobsAdd;
diff --git a/src/Pages/ManageJobs/ViewManageJob.tsx b/src/Pages/ManageJobs/ViewManageJob.tsx
index bcd9bc8..460a8f9 100644
--- a/src/Pages/ManageJobs/ViewManageJob.tsx
+++ b/src/Pages/ManageJobs/ViewManageJob.tsx
@@ -1,119 +1,276 @@
-import { Field, Icon, Input, SelectValueText, Stack, createListCollection, } from "@chakra-ui/react"
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import {
+  Field,
+  Icon,
+  Input,
+  SelectValueText,
+  Stack,
+  createListCollection,
+} from "@chakra-ui/react";
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
 
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import View from "../../components/ActionIcons/View";
 
 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ViewManageJob() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
-                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
-                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
-                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
-                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
-                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
-                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
-                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace mode
+              </Field.Label>
+              <Input
+                placeholder="Enter the Workspace Mode"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Sub-Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Sub-Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Salary
+              </Field.Label>
+              <Input
+                placeholder="Enter the Salary"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Experience
+              </Field.Label>
+              <Input
+                placeholder="Enter the Experience"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Location
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Location"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                             <Input placeholder="Enter the Country Selection"   /> */}
-                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                borderRadius={"5px"}>
-                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                            </SelectTrigger>
-                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                {frameworks.items.map((movie) => (
-                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                        fontSize="12px" >
-                                        {movie.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </SelectRoot>
+            <SelectRoot collection={frameworks} size="sm" w={"100%"}>
+              <SelectLabel pt={1} color="black" fontSize="12px">
+                Country Selection
+              </SelectLabel>
+              <SelectTrigger
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                borderRadius={"5px"}
+              >
+                <SelectValueText
+                  placeholder="Enter the Country Selection"
+                  pb={"6px"}
+                  fontSize={"12px"}
+                />
+              </SelectTrigger>
+              <SelectContent position={"relative"} zIndex={"9999"} bg={"#fff"}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem
+                    item={movie}
+                    key={movie.value}
+                    color={"black"}
+                    pl={2}
+                    p={1}
+                    _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                    fontSize="12px"
+                  >
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>
 
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
-                            <Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Type"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills required
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills Required"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Upload Image
+              </Field.Label>
+              <Input
+                placeholder="Upload Image"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewManageJob
\ No newline at end of file
+export default ViewManageJob;
diff --git a/src/Pages/ManagePost/ManagePost.tsx b/src/Pages/ManagePost/ManagePost.tsx
index 8f63a58..67c1264 100644
--- a/src/Pages/ManagePost/ManagePost.tsx
+++ b/src/Pages/ManagePost/ManagePost.tsx
@@ -1,14 +1,14 @@
-
-import { Box, HStack, Image, Input, Text } from '@chakra-ui/react'
-import MainFrame from '../../components/MainFrame'
-import { InputGroup } from '../../components/ui/input-group'
-import { LuSearch } from 'react-icons/lu'
-import DataTable from '../../components/DataTable'
-import AlertDailog from '../../components/AlertDailog'
-import { Switch } from '../../components/ui/switch'
-import img from "../../assets/waterfall.jpg"
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+import AlertDailog from "../../components/AlertDailog";
+import { Switch } from "../../components/ui/switch";
+import img from "../../assets/waterfall.jpg";
 import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewDailog from './ViewDailog'
+import ViewDailog from "./ViewDailog";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewDailog from './ViewDailog'
 
 // table data
@@ -25,31 +25,29 @@ const tableHeadRow = [
 const managepost: any[] = [
   ...Array.from({ length: 12 }, (_, i) => ({
     "Sr. No": i + 1,
-    "Images": (
+    Images: (
       // <Image w={50} src={img} />
-      <Image rounded={'lg'} w={100} h={50} src={img} />
-
-
+      <Image rounded={"lg"} w={100} h={50} src={img} />
+    ),
+    Description: (
+      <Text>
+        {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(
+          0,
+          30
+        ) + "..."}
+      </Text>
     ),
-    "Description": (<Text>
-      {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(0, 30) + '...'}
-    </Text>),
     "Publish Data": "12/01/2025",
     "Activate/Deactivate": (
-      <Box w={'100%'} >
-        <Switch size={'sm'} colorPalette={'teal'} />
+      <Box w={"100%"}>
+        <Switch size={"sm"} colorPalette={"teal"} />
       </Box>
     ),
-    "Action": (
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
         <ViewDailog />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -79,7 +77,10 @@ const ManagePost = () => {
           <HStack>
             <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -93,7 +94,7 @@ const ManagePost = () => {
                 size={"xs"}
                 fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
               />
             </InputGroup>
@@ -106,7 +107,7 @@ const ManagePost = () => {
         />
       </Box>
     </MainFrame>
-  )
-}
+  );
+};
 
-export default ManagePost
+export default ManagePost;
diff --git a/src/Pages/ManagePost/ViewDailog.tsx b/src/Pages/ManagePost/ViewDailog.tsx
index 390da84..4efcbff 100644
--- a/src/Pages/ManagePost/ViewDailog.tsx
+++ b/src/Pages/ManagePost/ViewDailog.tsx
@@ -2,22 +2,14 @@ import { Field, Icon, Image, Input, Stack } from "@chakra-ui/react"
 import { TbEdit } from "react-icons/tb"
 import img from "../../assets/waterfall.jpg"
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import Edit from "../../components/ActionIcons/Edit"
 
 function ViewDailog() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
+                <Edit />
             </DialogTrigger>
 
             <DialogContent
diff --git a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
index c552fe3..48e568a 100644
--- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
@@ -9,6 +9,7 @@ import { LuSearch } from "react-icons/lu";
 import ViewRegisterUsers from "./ViewRegisterUsers";
 import EditRegisterUsers from "./EditRegisterUsers";
 import AddRegisterUsers from "./AddRegisterUsers";
+import Delete from "../../../components/ActionIcons/Delete";
 
 const tableHeadRow = [
   "Sr. No",
@@ -42,7 +43,7 @@ const registerUser: any[] = [
         <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} // Pass as function
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="Are You Sure You Want To Delete This User ?"
diff --git a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
index 5f26943..66ab01c 100644
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -9,31 +9,23 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-      <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+        <View />
       </DialogTrigger>
 
       <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
       >
         <DialogHeader bg="white">
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -48,42 +40,72 @@ function ViewRegisterUsers() {
                 First Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Last Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
             </Field.Root>
           </Stack>
diff --git a/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
index e524e50..ea011b8 100644
--- a/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
@@ -1,83 +1,152 @@
-import { FaRegEdit } from "react-icons/fa"
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
-import { TbEdit } from "react-icons/tb"
-
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                value="Active"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Action
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
           >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditAgencyMaster
\ No newline at end of file
+export default EditAgencyMaster;
diff --git a/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
index e8e2d9a..ea581eb 100644
--- a/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
@@ -1,83 +1,153 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../../components/ui/button"
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Button } from "../../../components/ui/button";
+import View from "../../../components/ActionIcons/View";
 
 function ViewAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                value="Active"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Action
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
           >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewAgencyMaster
\ No newline at end of file
+export default ViewAgencyMaster;
diff --git a/src/Pages/MasterModule/Country/EditCountryModel.tsx b/src/Pages/MasterModule/Country/EditCountryModel.tsx
index a26501e..6b88c1b 100644
--- a/src/Pages/MasterModule/Country/EditCountryModel.tsx
+++ b/src/Pages/MasterModule/Country/EditCountryModel.tsx
@@ -1,61 +1,67 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FaRegEdit } from "react-icons/fa";
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditCountryModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-   
-    return (
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Country
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditCountryModel
\ No newline at end of file
+export default EditCountryModel;
diff --git a/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx b/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
index 7efe0a1..c40632a 100644
--- a/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
+++ b/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
@@ -2,6 +2,7 @@ import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHead
 import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
 import { Button } from "../../../components/ui/button"
 import { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
 
 
 function EditJobStatusModel() {
@@ -12,13 +13,7 @@ function EditJobStatusModel() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
+               <Edit />
             </DialogTrigger>
 
             <DialogContent
diff --git a/src/Pages/MasterModule/JobType/EditJobModel.tsx b/src/Pages/MasterModule/JobType/EditJobModel.tsx
index 86938b0..1684f80 100644
--- a/src/Pages/MasterModule/JobType/EditJobModel.tsx
+++ b/src/Pages/MasterModule/JobType/EditJobModel.tsx
@@ -1,62 +1,67 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FiUpload } from "react-icons/fi";
-import { FaRegEdit } from "react-icons/fa";
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditJobeModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-   
-    return (
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job Type
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditJobeModel
\ No newline at end of file
+export default EditJobeModel;
diff --git a/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx b/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
index a96fffd..8619281 100644
--- a/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
@@ -1,100 +1,143 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import {
+  Box,
+  Field,
+  IconButton,
+  Input,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 import { FiUpload } from "react-icons/fi";
 import { useState } from "react";
 import { FaRegEdit } from "react-icons/fa";
-
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditTemplateModel() {
+  const [images, setImages] = useState<string[]>([]);
 
-    const [images, setImages] = useState<string[]>([]);
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const selectedFiles = Array.from(event.target.files);
 
-    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) {
-        const selectedFiles = Array.from(event.target.files);
-  
-        const newImages = selectedFiles.map((file) => {
-          return URL.createObjectURL(file); // Convert to preview URL
-        });
-  
-        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
-      }
-    };
+      const newImages = selectedFiles.map((file) => {
+        return URL.createObjectURL(file); // Convert to preview URL
+      });
 
-   
-    return (
+      setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
+    }
+  };
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-               
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Template Name
+              </Field.Label>
+              <Input
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3}>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Images
+              </Field.Label>
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+                px={3}
+                bgColor="#EEEEEE"
+                border="none"
+                width="100%"
+                height="50px"
+                cursor="pointer"
+                position="relative"
+              >
+                <Input
+                  type="file"
+                  accept="image/*"
+                  opacity={0}
+                  position="absolute"
+                  bgColor="#EEEEEE"
+                  border="none"
+                  pl={1}
+                  width="100%"
+                  height="100%"
+                  cursor="pointer"
+                  onChange={handleImageChange}
+                />
+                <Box display="flex" gap={2} overflow="hidden">
+                  {images.length > 0 ? (
+                    images.map((img, index) => (
+                      <img
+                        key={index}
+                        src={img}
+                        alt={`Uploaded ${index}`}
+                        style={{
+                          maxHeight: "40px",
+                          maxWidth: "70px",
+                          objectFit: "contain",
+                        }}
+                      />
+                    ))
+                  ) : (
+                    <Box width="70px" height="40px" /> // Placeholder to maintain layout
+                  )}
+                </Box>
+                <FiUpload color="#000" />
+              </Box>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+              {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
-                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
-                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
-                            <Box display="flex" gap={2} overflow="hidden">
-                                {images.length > 0 ? (
-                                images.map((img, index) => (
-                                    <img
-                                    key={index}
-                                    src={img}
-                                    alt={`Uploaded ${index}`}
-                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
-                                    />
-                                ))
-                                ) : (
-                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
-                                )}
-                            </Box>
-                              <FiUpload color="#000" />
-                            </Box>
-                           
-                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
-
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditTemplateModel
\ No newline at end of file
+export default EditTemplateModel;
diff --git a/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx b/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
index ec0defb..325801a 100644
--- a/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
@@ -1,61 +1,76 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import {
+  Box,
+  Field,
+  IconButton,
+  Input,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 import { FaRegEdit } from "react-icons/fa";
-
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditWorkModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
 
-   
-    return (
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace Mode
+              </Field.Label>
+              <Input
+                value="Lorem Ipsum"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditWorkModel
\ No newline at end of file
+export default EditWorkModel;
diff --git a/src/Pages/Profile/Profile.tsx b/src/Pages/Profile/Profile.tsx
index 858216a..b32b9a0 100644
--- a/src/Pages/Profile/Profile.tsx
+++ b/src/Pages/Profile/Profile.tsx
@@ -1,7 +1,6 @@
-import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
-import { Button } from "../../components/ui/button";
+import MainFrame from "../../components/MainFrame";
 import Changepassword from "./ChangePassword";
 
 const Profile = () => {
@@ -10,13 +9,11 @@ const Profile = () => {
       <Stack p={5}>
         <Box position="relative" width="fit-content"
           display="inline-block"
-
           cursor="pointer" onClick={() => alert("Avatar clicked!")}>
           <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
             <Avatar.Fallback />
             <Avatar.Image src="https://bit.ly/sage-adebayo" />
           </Avatar.Root>
-
           <Box
             position="absolute"
             bottom="-2px"
@@ -27,7 +24,6 @@ const Profile = () => {
           </Box>
         </Box>
         <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
-        {/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
         <Text color="black" fontSize="12px">
           Employee ID: <span>#1245679</span>
         </Text>
@@ -35,14 +31,16 @@ const Profile = () => {
           <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
-              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
             <Field.Root>
               <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
-              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
-
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" />
+            </Field.Root>
           </SimpleGrid>
           <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
           {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
diff --git a/src/Pages/SubAdmin/SubAdmin.tsx b/src/Pages/SubAdmin/SubAdmin.tsx
index b48a452..8f3d299 100644
--- a/src/Pages/SubAdmin/SubAdmin.tsx
+++ b/src/Pages/SubAdmin/SubAdmin.tsx
@@ -8,6 +8,7 @@ import { RiDeleteBin5Line } from "react-icons/ri";
 import AddModel from "./AddModel"
 import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewSubAdmin from "./ViewSubAdmin"
+import Delete from "../../components/ActionIcons/Delete"
 
 
 // table data
@@ -37,7 +38,7 @@ const managepost: any[] = [
         <EditSubAdmin />
 
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
diff --git a/src/Pages/SubAdmin/ViewSubAdmin.tsx b/src/Pages/SubAdmin/ViewSubAdmin.tsx
index b566162..6eac072 100644
--- a/src/Pages/SubAdmin/ViewSubAdmin.tsx
+++ b/src/Pages/SubAdmin/ViewSubAdmin.tsx
@@ -1,93 +1,183 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Field,
+  Grid,
+  Heading,
+  Icon,
+  Input,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { Checkbox } from "../../components/ui/checkbox";
 import { MdOutlineRemoveRedEye } from "react-icons/md";
 import { FaRegEdit } from "react-icons/fa";
+import View from "../../components/ActionIcons/View";
 function ViewSubAdmin() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-               
-                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/> */}
-               
-                {/* <Button><MdOutlineRemoveRedEye /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View Sub Admin Account</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                ID
+              </Field.Label>
+              <Input
+                value="ID"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                value="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">ID</Field.Label>
-                            <Input value="ID" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input value="11/02/1989" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input value="Male" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly
-                            />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"} >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                value="Male"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Dashboard</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage contact us</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>manage User</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage CMS</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage Post</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>Manage Reports</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>manage Sub-Admin</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                {" "}
+                <Text fontSize={12}>My profile</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage Jobs</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> manage feedbacks</Text>
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}>Manage community</Text>{" "}
+              </Checkbox>
+              <Checkbox size={"sm"} color={"black"}>
+                <Text fontSize={12}> Notification</Text>
+              </Checkbox>
+            </Grid>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button> */}
-                </DialogFooter>
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewSubAdmin
\ No newline at end of file
+export default ViewSubAdmin;
diff --git a/src/Routes/Nav.ts b/src/Routes/Nav.ts
index 83956b9..03cf928 100644
--- a/src/Routes/Nav.ts
+++ b/src/Routes/Nav.ts
@@ -17,18 +17,18 @@ export const nav = [
         },
         {
           title: "Manage Users",
-          path: "/register-users",
+          initPath: "/manage-users",
           Icon: BiUserPin,
           type:'multiple',
           children: [
             {
               title: "Register Users",
-              path: "/register-users",
+              path: "/manage-users/register-users",
               Icon: GoDotFill,
             },
             {
               title: "Deactivated Accounts",
-              path: "/deactivated-accounts",
+              path: "/manage-users/deactivated-accounts",
               Icon: GoDotFill,
             },
           ],
@@ -65,33 +65,33 @@ export const nav = [
         },
         {
           title: "Manage CMS",
-          path: "/faq",
+          initPath: "/manage-cms",
           Icon: AiOutlineFileText,
           type:'multiple',
           children: [
             {
               title: "FAQs",
-              path: "/faq",
+              path: "/manage-cms/faq",
               Icon: GoDotFill,
             },
             {
               title: "About Us",
-              path: "/about-us",
+              path: "/manage-cms/about-us",
               Icon: GoDotFill,
             },
             {
               title: "Privacy Policy",
-              path: "/privacy-policy",
+              path: "/manage-cms/privacy-policy",
               Icon: GoDotFill,
             },
             {
               title: "Terms And Conditions",
-              path: "/terms-conditions",
+              path: "/manage-cms/terms-conditions",
               Icon: GoDotFill,
             },
             {
               title: "Privacy",
-              path: "/privacy",
+              path: "/manage-cms/privacy",
               Icon: GoDotFill,
             },
           ],
@@ -104,38 +104,38 @@ export const nav = [
         },
         {
           title: "Master Module",
-          path: "/agency-master",
+          initPath: "/master-module",
           Icon: BsBoxes,
           type:'multiple',
           children: [
             {
               title: "Agency Master",
-              path: "/agency-master",
+              path: "/master-module/agency-master",
               Icon: GoDotFill,
             },
             {
               title: "Template Master",
-              path: "/template-master",
+              path: "/master-module/template-master",
               Icon: GoDotFill,
             },
             {
               title: "Job Type",
-              path: "/job-type",
+              path: "/master-module/job-type",
               Icon: GoDotFill,
             },
             {
               title: "Workspace Mode",
-              path: "/workspace-mode",
+              path: "/master-module/workspace-mode",
               Icon: GoDotFill,
             },
             {
               title: "Country",
-              path: "/country",
+              path: "/master-module/country",
               Icon: GoDotFill,
             },
             {
               title: "Job Status",
-              path: "/job-status",
+              path: "/master-module/job-status",
               Icon: GoDotFill,
             },
           ],
diff --git a/src/Routes/Routes.ts b/src/Routes/Routes.ts
index c014a40..d1fcb50 100644
--- a/src/Routes/Routes.ts
+++ b/src/Routes/Routes.ts
@@ -27,27 +27,40 @@ import { Spinner } from "../components/Sipnner/Spinner";
 export const RouteLink = [
     { path: "/", Component: Dashboard },
     { path: "/dashboard", Component: Dashboard },
-    { path: "/register-users", Component: RegisterUsers },
-    { path: "/deactivated-accounts", Component: DeactivatedAccounts },
+    { path: "/manage-users/register-users", Component: RegisterUsers },
+    { path: "/manage-users/deactivated-accounts", Component: DeactivatedAccounts },
     { path: "/manage-post", Component: ManagePost },
     { path: "/sub-admin", Component: SubAdmin},
     { path: "/manage-jobs", Component: ManageJobs},
     { path: "/manage-groups", Component: ManageGroups },
     { path: "/manage-contact", Component: ManageContact},
-    { path: "/faq", Component: FAQ},
-    { path: "/about-us", Component: AboutUs},
-    { path: "/privacy-policy", Component: PrivacyPolicy},
-    { path: "/terms-conditions", Component: TermsAndConditions},
-    { path: "/privacy", Component: Privacy},
+
+
+
+    { path: "/manage-cms/faq", Component: FAQ},
+    { path: "/manage-cms/about-us", Component: AboutUs},
+    { path: "/manage-cms/privacy-policy", Component: PrivacyPolicy},
+    { path: "/manage-cms/terms-conditions", Component: TermsAndConditions},
+    { path: "/manage-cms/privacy", Component: Spinner},
+
+
+
     { path: "/my-profile", Component: MyProfile},
     { path: "/manage-notification", Component: Notification},
+
+
+
+
+
     { path: "/profile", Component: Profile},
-    { path: "/agency-master", Component: AgencyMaster},
-    { path: "/template-master", Component: TemplateMaster},
-    { path: "/job-type", Component: JobType},
-    { path: "/workspace-mode", Component: WorkspaceMode},
-    { path: "/country", Component: Country},
-    { path: "/job-status", Component: JobStatus},
+
+
+    { path: "/master-module/agency-master", Component: AgencyMaster},
+    { path: "/master-module/template-master", Component: TemplateMaster},
+    { path: "/master-module/job-type", Component: JobType},
+    { path: "/master-module/workspace-mode", Component: WorkspaceMode},
+    { path: "/master-module/country", Component: Country},
+    { path: "/master-module/job-status", Component: JobStatus},
     // { path: "/job-status", Component: Spinner},
 
 ]
\ No newline at end of file
diff --git a/src/Types/privacyPolicyTypes.tsx b/src/Types/privacyPolicyTypes.tsx
index fce8cb3..f0ca289 100644
--- a/src/Types/privacyPolicyTypes.tsx
+++ b/src/Types/privacyPolicyTypes.tsx
@@ -3,6 +3,11 @@ export interface PrivacyPolicyContent {
   language_master_xid: number;
   content: string;
   is_active: boolean;
+  privacy_language:{
+    id:number;
+    language_code:string;
+    language_name:string;
+  }
 }
 
 export interface PrivacyPolicyResponse {
diff --git a/src/components/ActionIcons/Delete.tsx b/src/components/ActionIcons/Delete.tsx
new file mode 100644
index 0000000..95f1cf5
--- /dev/null
+++ b/src/components/ActionIcons/Delete.tsx
@@ -0,0 +1,34 @@
+import { Icon, Image } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { RiDeleteBin5Line } from "react-icons/ri";
+
+const Delete = () => {
+  return (
+    <Tooltip
+      content="Delete"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#fed7d7",
+          color: "#822727",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <RiDeleteBin5Line />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Delete;
diff --git a/src/components/ActionIcons/Edit.tsx b/src/components/ActionIcons/Edit.tsx
index d6d4b09..fde1f52 100644
--- a/src/components/ActionIcons/Edit.tsx
+++ b/src/components/ActionIcons/Edit.tsx
@@ -1,22 +1,33 @@
-import { Icon } from '@chakra-ui/react'
-import { TbEdit } from 'react-icons/tb'
-import { Tooltip } from '../ui/tooltip'
+import { Icon } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Tooltip } from "../ui/tooltip";
 
 const Edit = () => {
   return (
-    <Tooltip content='Edit' >
-    <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-        </Tooltip>
-  )
-}
+    <Tooltip
+      content="Edit"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#c6f6d5",
+          color: "#22543d",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+      >
+        <TbEdit />
+      </Icon>
+    </Tooltip>
+  );
+};
 
-export default Edit
\ No newline at end of file
+export default Edit;
diff --git a/src/components/ActionIcons/View.tsx b/src/components/ActionIcons/View.tsx
new file mode 100644
index 0000000..c83d22a
--- /dev/null
+++ b/src/components/ActionIcons/View.tsx
@@ -0,0 +1,34 @@
+import { Icon } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+
+const View = () => {
+  return (
+    <Tooltip
+      content="View"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#ccecec",
+          color: "#055757",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <MdOutlineRemoveRedEye />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default View;
diff --git a/src/components/EditSubAdmin.tsx b/src/components/EditSubAdmin.tsx
index 4928b75..faf8978 100644
--- a/src/components/EditSubAdmin.tsx
+++ b/src/components/EditSubAdmin.tsx
@@ -12,22 +12,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
+import Edit from "./ActionIcons/Edit";
 function EditSubAdmin() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
           {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
 
-          <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
+          <Edit />
         {/* <Button><FaRegEdit /></Button> */}
       </DialogTrigger>
 
diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx
index d6a3404..9c66e8c 100644
--- a/src/components/MainFrame.tsx
+++ b/src/components/MainFrame.tsx
@@ -9,19 +9,20 @@ const MotionVStack = motion(VStack)
 interface MainFrameProps {
   children: React.ReactNode
   title?: string
+  transperant?:boolean
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"  p={0} pe={2} ps={1.5}  pb={2}>
+    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        // h="100%"
-        bg="#ffffff"
+        // minH="100%"
+        bg={transperant?'transperant':"#ffffff"}
         // overflow={'scroll'}
         rounded="lg"
-        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
-        pt={3}
+        boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={transperant?0:3}
         
       >
         {children}
diff --git a/src/components/Sipnner/Spinner.tsx b/src/components/Sipnner/Spinner.tsx
index 12dc49d..159b28c 100644
--- a/src/components/Sipnner/Spinner.tsx
+++ b/src/components/Sipnner/Spinner.tsx
@@ -1,6 +1,7 @@
 import { Center } from '@chakra-ui/react'
 import './Spinner.css'
-export const Spinner = () => <Center w={'100%'} h={'100%'}> <div className='loader'/></Center>
+import MainFrame from '../MainFrame'
+export const Spinner = () =><Center boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} w={'100%'} h={'89vh'} bg={'#fff'} > <div className='loader'/></Center>
 
 
 
diff --git a/src/index.css b/src/index.css
index a7a0c7c..e4f999d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,6 +42,7 @@ body {
   transition: all 0.5s;
   border-radius: 8px;
   /* background-color: #e2e8f01c; */
+  
 }
 
 .active:hover {
@@ -153,11 +154,13 @@ body {
   width: 6px;
   height: 8px;
   cursor: pointer;
+
 }
 
 /* Scrollbar track */
 ::-webkit-scrollbar-track {
   background: transparent; /* No visible track */
+  border-radius: 50%;
 }
 
 /* Scrollbar thumb (the draggable part) */