diff --git a/src/Pages/Dashboard/AgencyName.tsx b/src/Pages/Dashboard/AgencyName.tsx
new file mode 100644
index 0000000..9941623
--- /dev/null
+++ b/src/Pages/Dashboard/AgencyName.tsx
@@ -0,0 +1,103 @@
+import { Box, HStack, Image, Input, Stack, Text } from "@chakra-ui/react";
+import React, { useState, useEffect } from "react";
+import { Button } from "../../components/ui/button";
+import { IoAddSharp } from "react-icons/io5";
+import delateIcon from "../../assets/deleteIcon.png";
+import { FaClockRotateLeft } from "react-icons/fa6";
+
+interface Todo {
+  id: number;
+  text: string;
+  completed: boolean;
+  timestamp: string;
+}
+
+const AgencyName: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [input, setInput] = useState<string>("");
+
+  
+  const getCurrentTime = () => {
+    const now = new Date();
+    return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+
+  const addTodo = () => {
+    if (input.trim() === "") return;
+    setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
+    setInput(""); 
+  };
+
+  // Delete a task
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+
+  useEffect(() => {
+    const savedTodos = localStorage.getItem("todos");
+    if (savedTodos) {
+      setTodos(JSON.parse(savedTodos));
+    }
+  }, []); // Runs only on mount
+
+  // 🔹 Save todos to localStorage whenever they change
+  useEffect(() => {
+    if (todos.length > 0) {
+      localStorage.setItem("todos", JSON.stringify(todos));
+    }
+  }, [todos]); // Runs when `todos` changes
+
+
+  return (
+    <Box p={"10px"}>
+      <HStack justifyContent={"space-between"} mb={5}>
+        <Text fontSize={"xs"} fontWeight={500}>
+          Add Agency Name
+        </Text>
+        <Button
+          bg={"#fff"}
+          color={"#222222CC"}
+          px={3}
+          fontSize={"12px"}
+          h={"28px"}
+          onClick={addTodo}
+        >
+          <IoAddSharp /> Add
+        </Button>
+      </HStack>
+      <Input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Add a task..."
+        backgroundColor={"#fff"}
+        size={"sm"}
+        w={"100%"}
+        p={2}
+        mb={4}
+      />
+      {todos.map((todo) => (
+        <HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
+          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.text}</Text>
+          <Stack display={'flex'} alignItems={'end'} w={'130px'}>
+            <Box display={'flex'} alignItems={'center'} gap={2}>
+                <FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} /> 
+                <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
+            </Box>
+            <Box
+              onClick={() => deleteTodo(todo.id)}
+              bg={"none"}
+              color={"#22222299"}
+              cursor={'pointer'}
+            >
+              <Image w={"16px"} src={delateIcon} />
+            </Box>
+          </Stack>
+        </HStack>
+      ))}
+    </Box>
+  );
+};
+
+export default AgencyName;
diff --git a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
new file mode 100644
index 0000000..75b9c73
--- /dev/null
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -0,0 +1,53 @@
+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 AboutUsAddModel() {
+    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
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/FAQ/EditDetails.tsx b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
new file mode 100644
index 0000000..a8759e9
--- /dev/null
+++ b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
@@ -0,0 +1,56 @@
+import { Button } from "../../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { FaRegEdit } from "react-icons/fa";
+function EditDetails() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
+                </Button>
+                {/* <Button><FaRegEdit /></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 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 >
+
+    )
+}
+
+export default EditDetails
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/FAQ/FAQ.tsx b/src/Pages/ManageCMS/FAQ/FAQ.tsx
new file mode 100644
index 0000000..44bd58d
--- /dev/null
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -0,0 +1,97 @@
+import { Box, Button, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import EditDetails from "./EditDetails";
+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 { Switch } from "../../../components/ui/switch";
+import FaqAddModel from "./FaqAddModel";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Question",
+  "Answer",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Question": "Lorem Ipsum",
+    "Answer": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+        <EditDetails />
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
+
+const FAQ = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+           FAQs
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <FaqAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default FAQ
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
new file mode 100644
index 0000000..40b1f60
--- /dev/null
+++ b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
@@ -0,0 +1,57 @@
+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 (
+
+        <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>
+
+            </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">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 >
+
+    )
+}
+
+export default FaqAddModel
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/Privacy/Privacy.tsx b/src/Pages/ManageCMS/Privacy/Privacy.tsx
new file mode 100644
index 0000000..04c2cab
--- /dev/null
+++ b/src/Pages/ManageCMS/Privacy/Privacy.tsx
@@ -0,0 +1,12 @@
+import MainFrame from "../../../components/MainFrame"
+
+
+const Privacy = () => {
+    return (
+      
+      <MainFrame >
+         Privacy
+      </MainFrame>
+    )
+  }
+  export default Privacy
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
new file mode 100644
index 0000000..566a00e
--- /dev/null
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -0,0 +1,53 @@
+import { FaRegEdit } from "react-icons/fa"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Field, Input, 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">
+                    <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">PrivacyPolicy</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 PrivacyPolicyAddModel
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
new file mode 100644
index 0000000..35f1e5a
--- /dev/null
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
@@ -0,0 +1,38 @@
+import { Box, HStack, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import { p } from "framer-motion/client";
+import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
+
+
+const TermsAndConditions = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+           Terms And Conditions
+          </Text>
+
+          <HStack mr={5}>
+            
+            <TermsAndConditionsAddModel />
+          </HStack>
+        </HStack>
+        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
+          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>
+        <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>
+  )
+}
+export default TermsAndConditions
\ No newline at end of file
diff --git a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
new file mode 100644
index 0000000..17a97fa
--- /dev/null
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
@@ -0,0 +1,53 @@
+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 (
+
+        <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">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 >
+
+    )
+}
+
+export default TermsAndConditionsAddModel
\ No newline at end of file
diff --git a/src/Pages/ManageContact/ManageContact.tsx b/src/Pages/ManageContact/ManageContact.tsx
new file mode 100644
index 0000000..1207bf7
--- /dev/null
+++ b/src/Pages/ManageContact/ManageContact.tsx
@@ -0,0 +1,83 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame"
+import PendingRequests from "../../Pages/ManageContact/PendingRequests"
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import DataTable from "../../components/DataTable";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Email id",
+  "Name",
+  "Date",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Email id": "ABC@gmail.com",
+    "Name": "Pooja",
+    "Date": "11/02/1989",
+    "Action": (
+      <HStack justifyContent="center">
+        <PendingRequests />
+       
+      </HStack>
+    ),
+  })),
+];
+
+const ManageContact = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Contact Requests
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default ManageContact
\ No newline at end of file
diff --git a/src/Pages/ManageContact/PendingRequests.tsx b/src/Pages/ManageContact/PendingRequests.tsx
new file mode 100644
index 0000000..23d566b
--- /dev/null
+++ b/src/Pages/ManageContact/PendingRequests.tsx
@@ -0,0 +1,77 @@
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, HStack, Input, Stack, Textarea, } from "@chakra-ui/react"
+function PendingRequests() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} fontSize={"xs"} color="#000000CC" fontWeight="700" textDecoration="underline">
+                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} /> */}
+                    Answer request
+                </Button>
+                {/* <Button><FaRegEdit /></Button> */}
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+                p={3} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Pending Requests</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Request Type</Field.Label>
+                            <Input placeholder="Message" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Solution</Field.Label>
+                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="80px" pt={1.5} />
+                        </Field.Root>
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display={{ base: 'block', md: 'flex' }} justifyContent="center" gap={1} pt={2}>
+
+                    <HStack mt={2} width={"100%"}
+                        justifyContent={"space-between"}>
+                        <Button
+                            width={"48%"}
+                            color="black"
+                            _hover={{ bgColor: "white" }}
+                            variant="outline"
+                            borderRadius="sm"
+                            border="1px solid black"
+                            size={"xs"}
+                        >
+                            Unresolved
+                        </Button>
+                        <Button
+                            width={"48%"}
+                            borderRadius="sm"
+                            // bgColor="#007F33"
+                            bgColor={'#02A0A0'}
+                            color="white"
+                            // colorPalette="#007F33"
+                            size={"xs"}
+                        >
+                            Resolved{" "}
+                        </Button>
+                    </HStack>
+
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default PendingRequests
\ No newline at end of file
diff --git a/src/Pages/ManageGroups/AddGroup.tsx b/src/Pages/ManageGroups/AddGroup.tsx
new file mode 100644
index 0000000..d5cc33a
--- /dev/null
+++ b/src/Pages/ManageGroups/AddGroup.tsx
@@ -0,0 +1,58 @@
+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, Text } from "@chakra-ui/react"
+import { Switch } from "../../components/ui/switch";
+import { IoMdAdd } from "react-icons/io";
+function AddGroup() {
+    return (
+
+        <DialogRoot placement="center" >
+            <DialogTrigger asChild>
+                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+                // overflow={'scroll'}
+                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="xs">Group Name</Field.Label>
+                            <Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="xs">Group Introduction</Field.Label>
+                            <Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root>
+
+                        <Button w="30%" size={'xs'} bg="#02A0A0" mt={3} color={"#fff"}>
+                            Add Member
+                        </Button>
+                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
+                        <Switch />
+                    </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 AddGroup
\ No newline at end of file
diff --git a/src/Pages/ManageGroups/EditDetailGroup.tsx b/src/Pages/ManageGroups/EditDetailGroup.tsx
new file mode 100644
index 0000000..64d8c8f
--- /dev/null
+++ b/src/Pages/ManageGroups/EditDetailGroup.tsx
@@ -0,0 +1,85 @@
+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, Text } from "@chakra-ui/react"
+import { Switch } from "../../components/ui/switch";
+import { FaRegEdit } from "react-icons/fa";
+import { AvatarGroup } from "../../components/ui/avatar";
+function EditDetailGroups() {
+    return (
+
+        <DialogRoot placement="center" >
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <FaRegEdit style={{ cursor: "pointer", }}  color="#000"/>
+                </Button>
+                {/* <Button><FaRegEdit /></Button> */}
+
+            </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 />
+
+                            <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 />
+
+                            <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 >
+
+    )
+}
+
+export default EditDetailGroups
\ No newline at end of file
diff --git a/src/Pages/ManageGroups/ManageGroups.tsx b/src/Pages/ManageGroups/ManageGroups.tsx
new file mode 100644
index 0000000..7cb4b8f
--- /dev/null
+++ b/src/Pages/ManageGroups/ManageGroups.tsx
@@ -0,0 +1,105 @@
+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 ViewSubAdmin from "./ViewSubAdmin"
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Group Name",
+  "Description",
+  "Date",
+  "Group type",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Group Name": "ABC",
+    "Description": "Lorem ipsum",
+    "Date": "12/01/1987",
+    "Group type": "Private",
+    "Action": (
+      <HStack justifyContent="center">
+
+        {/* <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          /> */}
+        <ViewManageGroup />
+        <EditDetailGroups />
+
+        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
+const ManageGroups = () => {
+  return (
+
+    <MainFrame >
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            Manage Groups
+          </Text>
+
+          <HStack >
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+                border={'none'}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <AddGroup />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>    </MainFrame>
+  )
+}
+export default ManageGroups
\ No newline at end of file
diff --git a/src/Pages/ManageGroups/ViewManageGroup.tsx b/src/Pages/ManageGroups/ViewManageGroup.tsx
new file mode 100644
index 0000000..d479bc0
--- /dev/null
+++ b/src/Pages/ManageGroups/ViewManageGroup.tsx
@@ -0,0 +1,86 @@
+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, Input, Stack, Text } from "@chakra-ui/react"
+import { Checkbox } from "../../components/ui/checkbox"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Switch } from "../../components/ui/switch";
+import { AvatarGroup } from "../../components/ui/avatar";
+function ViewManageGroup() {
+    return (
+
+        <DialogRoot placement="center" >
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }}  color="#000"/>
+                </Button>
+                {/* <Button><FaRegEdit /></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">View 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 />
+
+                            <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 />
+
+                            <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>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default ViewManageGroup
\ No newline at end of file
diff --git a/src/Pages/ManageJobs/ManageJobsAdd.tsx b/src/Pages/ManageJobs/ManageJobsAdd.tsx
new file mode 100644
index 0000000..018b2e8
--- /dev/null
+++ b/src/Pages/ManageJobs/ManageJobsAdd.tsx
@@ -0,0 +1,118 @@
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { createListCollection, Field, Input, SelectValueText, Stack } from "@chakra-ui/react"
+
+import { FaRegEdit } from "react-icons/fa"
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+
+const frameworks = createListCollection({
+    items: [
+        { label: "React.js", value: "react" },
+        { label: "Vue.js", value: "vue" },
+        { label: "Angular", value: "angular" },
+        { label: "Svelte", value: "svelte" },
+    ],
+})
+function ManageJobsAdd() {
+    return (
+
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} color="#000" />
+                </Button>
+            </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>
+                            <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>
+
+                            <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>
+
+
+    )
+}
+
+export default ManageJobsAdd
\ No newline at end of file
diff --git a/src/Pages/ManageJobs/ViewManageJob.tsx b/src/Pages/ManageJobs/ViewManageJob.tsx
new file mode 100644
index 0000000..3dcf57c
--- /dev/null
+++ b/src/Pages/ManageJobs/ViewManageJob.tsx
@@ -0,0 +1,113 @@
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
+
+import { FaRegEdit } from "react-icons/fa"
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+import { MdOutlineRemoveRedEye } from "react-icons/md"
+
+const frameworks = createListCollection({
+    items: [
+        { label: "React.js", value: "react" },
+        { label: "Vue.js", value: "vue" },
+        { label: "Angular", value: "angular" },
+        { label: "Svelte", value: "svelte" },
+    ],
+})
+function ViewManageJob() {
+    return (
+
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+            </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>
+                            <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>
+                            <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>
+
+
+    )
+}
+
+export default ViewManageJob
\ No newline at end of file
diff --git a/src/Pages/ManagePost/ViewDailog.tsx b/src/Pages/ManagePost/ViewDailog.tsx
new file mode 100644
index 0000000..f835014
--- /dev/null
+++ b/src/Pages/ManagePost/ViewDailog.tsx
@@ -0,0 +1,51 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md"
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Image, Input, Stack } from "@chakra-ui/react"
+import img from "../../assets/waterfall.jpg"
+function ViewDailog() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
+                </Button>
+            </DialogTrigger>
+
+            <DialogContent
+                w={{ base: '90%', md: '400px' }}
+                bg={"#fff"}
+                h="auto"
+                p={3} // Reduced padding
+            >
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View Details</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
+                            <Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
+                            <Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
+                            <Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Image</Field.Label>
+                            <Image src={img} w="100%" maxH="150px" objectFit="contain" />
+                        </Field.Root>
+                    </Stack>
+                </DialogBody>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot>
+
+    )
+}
+
+export default ViewDailog
\ No newline at end of file
diff --git a/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
new file mode 100644
index 0000000..1a5a24f
--- /dev/null
+++ b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
@@ -0,0 +1,78 @@
+import { Box, HStack, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+
+const tableHeadRow = [
+  "Sr. No",
+  "First Name",
+  "Last Name",
+  "Company name",
+  "Activate/Deactivate",
+];
+
+const manageUser: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "First Name": "Ritesh",
+    "Last Name": "akanksha@gmail.com",
+    "Company name": "9876543210",
+    "Activate/Deactivate": (
+      <Box display={'flex'} justifyContent={'center'}>
+        <Switch colorPalette={'teal'} />
+      </Box>
+    ),
+  })),
+];
+
+const DeactivatedAccounts = () => {
+  return (
+    <MainFrame>
+      <Box>
+      <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+             Deactivated User Accounts
+          </Text>
+
+          <HStack>
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"}  style={{position:'relative',left:'10px'}} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={4}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={manageUser}
+        />
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default DeactivatedAccounts;
diff --git a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
new file mode 100644
index 0000000..bbb4ea1
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
@@ -0,0 +1,100 @@
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+
+function AddRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={4} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> Add
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+         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">
+            Add User Accounts
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+               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"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                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"
+              />
+
+              <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"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Language
+              </Field.Label>
+              <Input
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={2}>
+          <DialogActionTrigger asChild>
+            <Button w="100%" bg="#02A0A0" color={"#fff"}>
+              Save
+            </Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default AddRegisterUsers;
diff --git a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
new file mode 100644
index 0000000..30b934f
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
@@ -0,0 +1,97 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { BiEdit } from "react-icons/bi";
+import { Button } from "../../../components/ui/button";
+
+function EditRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: '90%', md: '400px' }}
+        height={'80vh'}
+        overflow={'scroll'}
+        overflowX="hidden" 
+        p={3} // Reduced padding
+        bgSize={'md'}
+      >
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit user Accounts
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                 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"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                 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"
+              />
+
+              <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"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Language
+              </Field.Label>
+              <Input
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={5}>
+          <DialogActionTrigger asChild>
+            <Button rounded={'md'} w={"100%"} size={'sm'} bg={'#02A0A0'}>Save</Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default EditRegisterUsers;
diff --git a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
new file mode 100644
index 0000000..4bf7247
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
@@ -0,0 +1,111 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+import AlertDailog from "../../../components/AlertDailog";
+import { NavLink } from "react-router-dom";
+import { RiDeleteBin5Line } from "react-icons/ri";
+import DataTable from "../../../components/DataTable";
+import { Switch } from "../../../components/ui/switch";
+import { InputGroup } from "../../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import { BiEdit } from "react-icons/bi";
+import ViewRegisterUsers from "./ViewRegisterUsers";
+import EditRegisterUsers from "./EditRegisterUsers";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+import AddRegisterUsers from "./AddRegisterUsers";
+
+const tableHeadRow = [
+  "Sr. No",
+  "First Name",
+  "Mobile Number",
+  "Gender",
+  "DOB",
+  "Type Of User",
+  "Language",
+  "Activate/Deactivate",
+  "Action",
+];
+
+const registerUser: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "First Name": "Ritesh",
+    "Mobile Number": "akanksha@gmail.com",
+    "Gender": "9876543210",
+    "DOB": "Female",
+    "Type Of User": "15-01-1990",
+    "Language": "Mumbai",
+    "Activate/Deactivate": (
+      <Box>
+        <Switch colorPalette={'teal'} />
+      </Box>
+    ),
+    "Action": (
+      <HStack justifyContent="center">  
+        <ViewRegisterUsers />
+        <EditRegisterUsers />
+        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="Are You Sure You Want To Delete This User ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
+
+const RegisterUsers = () => {
+  return (
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            Register Users
+          </Text>
+
+          <HStack>
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            <AddRegisterUsers />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={registerUser}
+        />
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default RegisterUsers;
diff --git a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
new file mode 100644
index 0000000..7826ee4
--- /dev/null
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -0,0 +1,92 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+
+function ViewRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <MdOutlineRemoveRedEye
+          color="#000"
+          style={{ cursor: "pointer", fontSize: "16px" }}
+        />
+      </DialogTrigger>
+
+      <DialogContent
+         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">
+            View Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                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"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                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"
+              />
+
+              <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"
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Language
+              </Field.Label>
+              <Input
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ViewRegisterUsers;
diff --git a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
new file mode 100644
index 0000000..360b868
--- /dev/null
+++ b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
@@ -0,0 +1,99 @@
+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 { Switch } from "../../../components/ui/switch";
+import EditAgencyMaster from "./EditAgencyMaster";
+import ViewAgencyAddModel from "./ViewAgencyAddModel";
+import ViewAgencyMaster from "./ViewAgencyMaster";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Agency Name",
+  "RC no.",
+  "State",
+  "RC Status",
+  "Registered Office Address",
+  "Website/Domain",
+  "GST no.",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Agency Name": "Lorem Ipsum",
+    "RC no.": "Lorem Ipsum",
+    "State": "Lorem Ipsum",
+    "RC Status": "Active",
+    "Registered Office Address": "Lorem Ipsum",
+    "Website/Domain": "Lorem Ipsum",
+    "GST no.": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <ViewAgencyMaster/>
+        <EditAgencyMaster />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
+const AgencyMaster = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Agency Master
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <ViewAgencyAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default AgencyMaster
\ No newline at end of file
diff --git a/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
new file mode 100644
index 0000000..841a1ed
--- /dev/null
+++ b/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
@@ -0,0 +1,75 @@
+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, } from "@chakra-ui/react"
+
+
+function EditAgencyMaster() {
+    return (
+
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+            </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>
+
+                <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>
+
+
+    )
+}
+
+export default EditAgencyMaster
\ No newline at end of file
diff --git a/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx b/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx
new file mode 100644
index 0000000..d17c6ef
--- /dev/null
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx
@@ -0,0 +1,76 @@
+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 ViewAgencyAddModel() {
+    return (
+
+        <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>
+
+            </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>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Agency Name</Field.Label>
+                            <Input placeholder="" 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 placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
+                            <Input placeholder="" 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 placeholder="" 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 placeholder="" 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 placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            
+                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
+                            <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 >
+
+    )
+}
+
+export default ViewAgencyAddModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
new file mode 100644
index 0000000..2c5a6f0
--- /dev/null
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
@@ -0,0 +1,75 @@
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Field, Input, Stack, } from "@chakra-ui/react"
+import { MdOutlineRemoveRedEye } from "react-icons/md"
+import { Button } from "../../../components/ui/button"
+
+
+function ViewAgencyMaster() {
+    return (
+
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+            </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>
+
+                <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>
+
+
+    )
+}
+
+export default ViewAgencyMaster
\ No newline at end of file
diff --git a/src/Pages/MasterModule/Country/Country.tsx b/src/Pages/MasterModule/Country/Country.tsx
new file mode 100644
index 0000000..d1b3d00
--- /dev/null
+++ b/src/Pages/MasterModule/Country/Country.tsx
@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import CountryAddModel from "./CountryAddModel";
+import EditCountryModel from "./EditCountryModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditCountryModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
+const Country = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Country
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <CountryAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default Country
\ No newline at end of file
diff --git a/src/Pages/MasterModule/Country/CountryAddModel.tsx b/src/Pages/MasterModule/Country/CountryAddModel.tsx
new file mode 100644
index 0000000..f2e2ec9
--- /dev/null
+++ b/src/Pages/MasterModule/Country/CountryAddModel.tsx
@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function CountryAddModel() {
+   
+    return (
+
+        <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>
+
+            </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>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
+                            <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 >
+
+    )
+}
+
+export default CountryAddModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/Country/EditCountryModel.tsx b/src/Pages/MasterModule/Country/EditCountryModel.tsx
new file mode 100644
index 0000000..c9da0c4
--- /dev/null
+++ b/src/Pages/MasterModule/Country/EditCountryModel.tsx
@@ -0,0 +1,61 @@
+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";
+
+
+function EditCountryModel() {
+
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button bg={"transparent"} size="sm">
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+
+            </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 >
+
+    )
+}
+
+export default EditCountryModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx b/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
new file mode 100644
index 0000000..5b0e081
--- /dev/null
+++ b/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
@@ -0,0 +1,61 @@
+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";
+
+
+function EditJobStatusModel() {
+
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button bg={"transparent"} size="sm">
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+
+            </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 Status</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 >
+
+    )
+}
+
+export default EditJobStatusModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/JobStatus/JobStatus.tsx b/src/Pages/MasterModule/JobStatus/JobStatus.tsx
new file mode 100644
index 0000000..95d83ff
--- /dev/null
+++ b/src/Pages/MasterModule/JobStatus/JobStatus.tsx
@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import JobStatusAddModel from "./JobStatusAddModel";
+import EditJobStatusModel from "./EditJobStatusModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditJobStatusModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
+const JobStatus = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Job Status
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <JobStatusAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default JobStatus
\ No newline at end of file
diff --git a/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx b/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
new file mode 100644
index 0000000..801e297
--- /dev/null
+++ b/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function JobStatusAddModel() {
+   
+    return (
+
+        <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>
+
+            </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>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
+                            <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 >
+
+    )
+}
+
+export default JobStatusAddModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/JobType/EditJobModel.tsx b/src/Pages/MasterModule/JobType/EditJobModel.tsx
new file mode 100644
index 0000000..6a8021c
--- /dev/null
+++ b/src/Pages/MasterModule/JobType/EditJobModel.tsx
@@ -0,0 +1,62 @@
+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";
+
+
+function EditJobeModel() {
+
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button bg={"transparent"} size="sm">
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+
+            </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 >
+
+    )
+}
+
+export default EditJobeModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/JobType/JobAddModel.tsx b/src/Pages/MasterModule/JobType/JobAddModel.tsx
new file mode 100644
index 0000000..15c9477
--- /dev/null
+++ b/src/Pages/MasterModule/JobType/JobAddModel.tsx
@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function JobAddModel() {
+   
+    return (
+
+        <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>
+
+            </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>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
+                            <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 >
+
+    )
+}
+
+export default JobAddModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/JobType/JobType.tsx b/src/Pages/MasterModule/JobType/JobType.tsx
new file mode 100644
index 0000000..ba43fba
--- /dev/null
+++ b/src/Pages/MasterModule/JobType/JobType.tsx
@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import JobAddModel from "./JobAddModel";
+import EditJobeModel from "./EditJobModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditJobeModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
+const JobType = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Job Type
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <JobAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default JobType
\ No newline at end of file
diff --git a/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx b/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
new file mode 100644
index 0000000..7e508c3
--- /dev/null
+++ b/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
@@ -0,0 +1,100 @@
+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";
+
+
+function EditTemplateModel() {
+
+    const [images, setImages] = useState<string[]>([]);
+
+    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
+      }
+    };
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button bg={"transparent"} size="sm">
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+
+            </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>
+
+                <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" />
+
+                            
+                            <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 >
+
+    )
+}
+
+export default EditTemplateModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx b/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
new file mode 100644
index 0000000..4dbc121
--- /dev/null
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
@@ -0,0 +1,100 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+import { FiUpload } from "react-icons/fi";
+import { useState } from "react";
+
+
+function TemplateAddModel() {
+
+    const [images, setImages] = useState<string[]>([]);
+
+    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
+      }
+    };
+
+   
+    return (
+
+        <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>
+
+            </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>
+
+                <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" />
+
+                            
+                            <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 >
+
+    )
+}
+
+export default TemplateAddModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
new file mode 100644
index 0000000..7764629
--- /dev/null
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
@@ -0,0 +1,99 @@
+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 { Switch } from "../../../components/ui/switch";
+import img from "../../../assets/waterfall.jpg"
+import Templateimg from "../../../assets/Template_img.png"
+import TemplateAddModel from "./TemplateAddModel";
+import EditTemplateModel from "./EditTemplateModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Images",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Images": (
+      // <Image w={50} src={img} />
+      <HStack >
+      <Image w={100} h={50} src={img} />
+      <Image w={100} h={50} src={Templateimg} />
+      </HStack>
+
+
+    ),
+    
+    "Action": (
+      <HStack justifyContent="center">
+        <EditTemplateModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
+const TemplateMaster = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Template Master
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <TemplateAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default TemplateMaster
\ No newline at end of file
diff --git a/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx b/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
new file mode 100644
index 0000000..b4fcde9
--- /dev/null
+++ b/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
@@ -0,0 +1,61 @@
+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";
+
+
+function EditWorkModel() {
+
+
+   
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button bg={"transparent"} size="sm">
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
+                </Button>
+
+            </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 >
+
+    )
+}
+
+export default EditWorkModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx b/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx
new file mode 100644
index 0000000..22287a1
--- /dev/null
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx
@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function WorkAddModel() {
+   
+    return (
+
+        <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>
+
+            </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>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</Field.Label>
+                            <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 >
+
+    )
+}
+
+export default WorkAddModel
\ No newline at end of file
diff --git a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
new file mode 100644
index 0000000..a236b90
--- /dev/null
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import WorkAddModel from "./WorkAddModel";
+import EditWorkModel from "./EditWorkModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Title": "Lorem Ipsum",
+    "Action": (
+      <HStack justifyContent="center">
+        <EditWorkModel />
+        <Box>
+          <Switch colorPalette={'teal'} size={"xs"}/>
+        </Box>
+      </HStack>
+    ),
+  })),
+];
+
+const WorkspaceMode = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Workspace Mode
+          </Text>
+
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <WorkAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default WorkspaceMode
\ No newline at end of file
diff --git a/src/Pages/MyProfile/MyProfile.tsx b/src/Pages/MyProfile/MyProfile.tsx
new file mode 100644
index 0000000..e72c329
--- /dev/null
+++ b/src/Pages/MyProfile/MyProfile.tsx
@@ -0,0 +1,11 @@
+import MainFrame from "../../components/MainFrame"
+
+const MyProfile = () => {
+  return (
+
+    <MainFrame >
+      MyProfile
+    </MainFrame>
+  )
+}
+export default MyProfile
\ No newline at end of file
diff --git a/src/Pages/Profile/ChangePassword.tsx b/src/Pages/Profile/ChangePassword.tsx
new file mode 100644
index 0000000..fee0a39
--- /dev/null
+++ b/src/Pages/Profile/ChangePassword.tsx
@@ -0,0 +1,58 @@
+
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { FaRegEdit } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import EnterPassword from "./EnterPassword";
+function Changepassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+                    Change Password
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterPassword />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default Changepassword
\ No newline at end of file
diff --git a/src/Pages/Profile/EnterOTP.tsx b/src/Pages/Profile/EnterOTP.tsx
new file mode 100644
index 0000000..1e07d2c
--- /dev/null
+++ b/src/Pages/Profile/EnterOTP.tsx
@@ -0,0 +1,109 @@
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Box, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+import { BiSolidEdit } from "react-icons/bi";
+
+function EnterOTP() {
+    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+
+    // Handle change for OTP inputs
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
+        const value = e.target.value;
+
+        // Prevent non-numeric input
+        if (/[^0-9]/.test(value)) return;
+
+        // Update the OTP state with the new value
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+
+        // Move focus to the next input automatically
+        if (value && index < otp.length - 1) {
+            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
+            if (nextInput) nextInput.focus();
+        }
+    };
+
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3}>
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={2}>
+                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
+                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
+                        <BiSolidEdit color="black" />
+                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
+                    </Box>
+
+
+                    <Stack direction="row" justify="center" pt={2}>
+
+                        {/* 4 OTP Inputs */}
+                        {otp.map((digit, index) => (
+                            <Input
+                                key={index}
+                                id={`otp-input-${index}`}
+                                value={digit}
+                                maxW="50px"
+                                color={"black"}
+                                textAlign="center"
+                                fontSize="20px"
+                                placeholder="0"
+                                border="1px solid grey"
+                                onChange={(e) => handleChange(e, index)}
+                                maxLength={1} // Only allows 1 character per input
+                            />
+                        ))}
+                    </Stack>
+                    <Box textAlign="center">
+                        <Text
+                            color="#4746F4"
+                            textDecoration="underline"
+                            fontWeight="bold"
+                            mt={3}
+                            cursor="pointer"
+                            display="inline-block"
+                            px={2} // Adds padding for better appearance
+                        >
+                            Resend OTP
+                        </Text>
+                    </Box>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterOTP
\ No newline at end of file
diff --git a/src/Pages/Profile/EnterPassword.tsx b/src/Pages/Profile/EnterPassword.tsx
new file mode 100644
index 0000000..18eb230
--- /dev/null
+++ b/src/Pages/Profile/EnterPassword.tsx
@@ -0,0 +1,55 @@
+
+import { DialogBody, 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 EnterOTP from "./EnterOTP";
+function EnterPassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterOTP />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterPassword
\ No newline at end of file
diff --git a/src/Pages/SubAdmin/AddModel.tsx b/src/Pages/SubAdmin/AddModel.tsx
new file mode 100644
index 0000000..403549b
--- /dev/null
+++ b/src/Pages/SubAdmin/AddModel.tsx
@@ -0,0 +1,80 @@
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Checkbox } from "../../components/ui/checkbox"
+
+function AddModel() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                {/* <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                </Button> */}
+                <Button px={4} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+
+            </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 Sub Admin Account</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3} >
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+                            <Input placeholder="Enter the First Name" 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 placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
+                            <Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
+                            <Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <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>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default AddModel
\ No newline at end of file
diff --git a/src/Pages/SubAdmin/SubAdmin.tsx b/src/Pages/SubAdmin/SubAdmin.tsx
new file mode 100644
index 0000000..4fa4c0e
--- /dev/null
+++ b/src/Pages/SubAdmin/SubAdmin.tsx
@@ -0,0 +1,106 @@
+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 AddModel from "./AddModel"
+import EditSubAdmin from "../../components/EditSubAdmin"
+import ViewSubAdmin from "./ViewSubAdmin"
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Id",
+  "First Name",
+  "last Name",
+  "DOB",
+  "Gender",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Id": 12565,
+    "First Name": "Kamlesh",
+    "last Name": "Pandey",
+    "DOB": "12/01/1987",
+    "Gender": "Male",
+    "Action": (
+      <HStack justifyContent="center">
+
+        {/* <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          /> */}
+        {/* <ViewDailog /> */}
+        <ViewSubAdmin />
+        <EditSubAdmin />
+
+        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
+const SubAdmin = () => {
+  return (
+
+    <MainFrame >
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            {/* Manage Post */}
+          </Text>
+
+          <HStack>
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <AddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>    </MainFrame>
+  )
+}
+export default SubAdmin
\ No newline at end of file
diff --git a/src/Pages/SubAdmin/ViewSubAdmin.tsx b/src/Pages/SubAdmin/ViewSubAdmin.tsx
new file mode 100644
index 0000000..d3f45b8
--- /dev/null
+++ b/src/Pages/SubAdmin/ViewSubAdmin.tsx
@@ -0,0 +1,82 @@
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { Checkbox } from "../../components/ui/checkbox"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+function ViewSubAdmin() {
+    return (
+
+        <DialogRoot placement="center" >
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} color="#000"/>
+                </Button>
+                {/* <Button><FaRegEdit /></Button> */}
+
+            </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">View Sub Admin Account</DialogTitle>
+                </DialogHeader>
+
+                <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 />
+
+                            <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"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default ViewSubAdmin
\ No newline at end of file
diff --git a/src/assets/Template_img.png b/src/assets/Template_img.png
new file mode 100644
index 0000000..2ea7aab
Binary files /dev/null and b/src/assets/Template_img.png differ
diff --git a/src/assets/deleteIcon.png b/src/assets/deleteIcon.png
new file mode 100644
index 0000000..b3b827d
Binary files /dev/null and b/src/assets/deleteIcon.png differ
diff --git a/src/assets/waterfall.jpg b/src/assets/waterfall.jpg
new file mode 100644
index 0000000..898a841
Binary files /dev/null and b/src/assets/waterfall.jpg differ
diff --git a/src/components/AlertDailog.tsx b/src/components/AlertDailog.tsx
new file mode 100644
index 0000000..0202dd6
--- /dev/null
+++ b/src/components/AlertDailog.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+
+import { DialogBody, HStack, Icon, Image, Text } from "@chakra-ui/react";
+import { Button } from "./ui/button";
+import {
+  DialogActionTrigger,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogRoot,
+  DialogTrigger,
+} from "./ui/dialog";
+import DeleteICN from '../assets/deleteIcon.png'
+
+interface DeleteConfirmationDialogProps {
+  onConfirm?: () => void;
+  alertText?: string;
+  alertCaption?: string;
+  alertIcon?: any;
+  AltertTiggerIcon?: any;
+  button?: any;
+  iconColor?: string;
+}
+
+const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
+  onConfirm,
+  alertText,
+  alertCaption,
+  alertIcon,
+  AltertTiggerIcon,
+  button,
+  iconColor,
+}) => {
+  return (
+    <DialogRoot
+      placement={"center"}
+      motionPreset="slide-in-bottom"
+      size={"xs"}
+      role="alertdialog"
+    >
+      <DialogTrigger asChild>
+        {button ? (
+          button
+        ) : (
+          <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            color={iconColor && iconColor}
+          >
+            <AltertTiggerIcon />
+          </Icon>
+        )}
+      </DialogTrigger>
+      <DialogContent bgColor="#fff">
+        {/* <DialogHeader display="flex" justifyContent="center"> */}
+        {/* <Image src={alertIcon} h={"39px"} /> */}
+
+        {/* </DialogHeader> */}
+        <DialogBody
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          color="black"
+          p={8}
+          gap={2}
+        >
+          {/* {alertIcon && alertIcon} */}
+          <Image  w={'40px'} src={DeleteICN} />
+          <Text
+            mt={3}
+            fontWeight={600}
+            fontSize="sm"
+            color="#000000"
+            textAlign="center"
+            as={"span"}
+          >
+            {alertText}
+          </Text>
+          <Text
+            as={"span"}
+            fontSize="sm"
+            style={{ textAlign: "center", color: "#000000CC", width: "100%" }}
+          >
+            {" "}
+            {alertCaption}
+          </Text>
+          <HStack mt={4} w={"100%"}>
+            <DialogActionTrigger asChild>
+              <Button
+                width="50%"
+                color="black"
+                _hover={{ bgColor: "white" }}
+                variant="outline"
+                borderRadius="sm"
+                border="1px solid black"
+                size={"xs"}
+              >
+                No
+              </Button>
+            </DialogActionTrigger>
+            <Button
+              borderRadius="sm"
+              width="50%"
+              // bgColor="#007F33"
+              bgColor={'#02A0A0'}
+              color="white"
+              // colorPalette="#007F33"
+              onClick={onConfirm}
+              size={"xs"}
+            >
+              Yes{" "}
+            </Button>
+          </HStack>
+        </DialogBody>
+
+        <DialogCloseTrigger
+          _hover={{ bg: "#00000010" }}
+          color={"#000"}
+          colorPalette={"bg"}
+        />
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default AlertDailog;
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
new file mode 100644
index 0000000..011bb8b
--- /dev/null
+++ b/src/components/Charts/BarChart.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { BiBorderRadius } from "react-icons/bi";
+
+// ✅ Register the required components
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const BarChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Jan", "Jan", "Jan", "Jan", "Jan","Jan", "Jan", "Jan"],
+    datasets: [
+      {
+        label: "Sales ($)",
+        data: [1, 2, 3, 5, 4,6,5,8],
+        backgroundColor: "#6976EB", // Light blue color
+        borderColor: "#6976EB",
+        borderWidth: 1,
+        borderRadius:4
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: { display: false },
+      title: { display: false, text: "Monthly Sales Data" },
+    },
+  };
+
+  return (
+    <div>
+      <Bar data={data} options={options} />
+    </div>
+  );
+};
+
+export default BarChart;
diff --git a/src/components/Charts/CircularProgress.tsx b/src/components/Charts/CircularProgress.tsx
new file mode 100644
index 0000000..95fb47c
--- /dev/null
+++ b/src/components/Charts/CircularProgress.tsx
@@ -0,0 +1,51 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+
+const CircularProgress: React.FC<{ value: number; max: number }> = ({ value, max }) => {
+  const totalDots = 60; // Total number of dots in the circle
+  const filledDots = Math.round((value / max) * totalDots); // Number of filled dots
+
+  return (
+    <Box position={'relative'}>
+      <svg width="200" height="100%" viewBox="0 0 100 100">
+        {Array.from({ length: totalDots }).map((_, i) => {
+          const angle = (i / totalDots) * 360;
+          const x = 50 + 40 * Math.cos((angle * Math.PI) / 180);
+          const y = 50 + 40 * Math.sin((angle * Math.PI) / 180);
+
+          return (
+            <circle
+              key={i}
+              cx={x}
+              cy={y}
+              r="1"
+              fill={i < filledDots ? "#2563eb" : ""} // Blue for filled, Gray for empty
+              opacity={i < filledDots ? 1 : 0.1}
+            />
+          );
+        })}
+      </svg>
+      <Text position={'absolute'} left={'42%'} top={'44%'} fontSize={'md'} fontWeight={500}>{value}</Text>
+    </Box>
+  );
+};
+
+// Usage Example with Animation
+const CircularApp: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => (prev < 350 ? prev + 20 : 350));
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box display={'flex'} justifyContent={'center'} alignItems={'center'} h={'90%'}>
+      <CircularProgress value={progress} max={450} />
+    </Box>
+  );
+};
+
+export default CircularApp;
diff --git a/src/components/Charts/SemiDoughnutChart.tsx b/src/components/Charts/SemiDoughnutChart.tsx
new file mode 100644
index 0000000..d643595
--- /dev/null
+++ b/src/components/Charts/SemiDoughnutChart.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Doughnut } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { FaUser } from "react-icons/fa";
+
+// ✅ Register required components
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const SemiDoughnutChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Recruiter", "Customer"],
+    datasets: [
+      {
+        data: [2554, 2800], // Values
+        backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue
+        borderWidth: 0, // No border
+        cutout: "90%", // Makes it a doughnut shape
+        circumference: 270, // Semi-circle
+        rotation: 225, // Starts from the top
+        
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false }, // Hide legend
+      tooltip: { enabled: true },
+    },
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Doughnut data={data} options={options} />
+      <div
+        style={{
+          position: "absolute",
+          top: "55%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          fontSize: "20px",
+          fontWeight: "bold",
+          color: "#3D5AFE",
+          backgroundColor:'#ECEAF8',
+          padding:'15px',
+          borderRadius:'50%'
+        }}
+      >
+        <FaUser />
+      </div>
+    </div>
+  );
+};
+
+export default SemiDoughnutChart;
diff --git a/src/components/EditSubAdmin.tsx b/src/components/EditSubAdmin.tsx
new file mode 100644
index 0000000..767022d
--- /dev/null
+++ b/src/components/EditSubAdmin.tsx
@@ -0,0 +1,79 @@
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { Checkbox } from "./ui/checkbox"
+import { FaRegEdit } from "react-icons/fa";
+function EditSubAdmin() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg={"transparent"} size="sm">
+                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
+                </Button>
+                {/* <Button><FaRegEdit /></Button> */}
+
+            </DialogTrigger>
+
+            <DialogContent
+                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">Edit Sub Admin Account</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3} >
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+                            <Input placeholder="Enter the First Name" 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 placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
+                            <Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
+                            <Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <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>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EditSubAdmin
\ No newline at end of file
diff --git a/src/components/ui/link-button.tsx b/src/components/ui/link-button.tsx
new file mode 100644
index 0000000..defa1c3
--- /dev/null
+++ b/src/components/ui/link-button.tsx
@@ -0,0 +1,12 @@
+"use client"
+
+import type { HTMLChakraProps, RecipeProps } from "@chakra-ui/react"
+import { createRecipeContext } from "@chakra-ui/react"
+
+export interface LinkButtonProps
+  extends HTMLChakraProps<"a", RecipeProps<"button">> {}
+
+const { withContext } = createRecipeContext({ key: "button" })
+
+// Replace "a" with your framework's link component
+export const LinkButton = withContext<HTMLAnchorElement, LinkButtonProps>("a")
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..d9db678
--- /dev/null
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import type { ButtonProps, TextProps } from "@chakra-ui/react";
+import {
+  Button,
+  Pagination as ChakraPagination,
+  HStack,
+  IconButton,
+  Text,
+  createContext,
+  usePaginationContext,
+} from "@chakra-ui/react";
+import * as React from "react";
+import { HiChevronLeft, HiChevronRight } from "react-icons/hi2";
+import { LinkButton } from "./link-button";
+
+interface ButtonVariantMap {
+  current: ButtonProps["variant"];
+  default: ButtonProps["variant"];
+  ellipsis: ButtonProps["variant"];
+}
+
+type PaginationVariant = "outline" | "solid" | "subtle";
+
+interface ButtonVariantContext {
+  size: ButtonProps["size"];
+  variantMap: ButtonVariantMap;
+  getHref?: (page: number) => string;
+}
+
+const [RootPropsProvider, useRootProps] = createContext<ButtonVariantContext>({
+  name: "RootPropsProvider",
+});
+
+export interface PaginationRootProps
+  extends Omit<ChakraPagination.RootProps, "type"> {
+  size?: ButtonProps["size"];
+  variant?: PaginationVariant;
+  getHref?: (page: number) => string;
+}
+
+const variantMap: Record<PaginationVariant, ButtonVariantMap> = {
+  outline: { default: "ghost", ellipsis: "plain", current: "solid" },
+  solid: { default: "outline", ellipsis: "outline", current: "solid" },
+  subtle: { default: "ghost", ellipsis: "plain", current: "subtle" },
+};
+
+export const PaginationRoot = React.forwardRef<
+  HTMLDivElement,
+  PaginationRootProps
+>(function PaginationRoot(props, ref) {
+  const { size = "sm", variant = "outline", getHref, ...rest } = props;
+  return (
+    <RootPropsProvider
+      value={{ size, variantMap: variantMap[variant], getHref }}
+    >
+      <ChakraPagination.Root
+        ref={ref}
+        type={getHref ? "link" : "button"}
+        {...rest}
+      />
+    </RootPropsProvider>
+  );
+});
+
+export const PaginationEllipsis = React.forwardRef<
+  HTMLDivElement,
+  ChakraPagination.EllipsisProps
+>(function PaginationEllipsis(props, ref) {
+  const { size, variantMap } = useRootProps();
+  return (
+    <ChakraPagination.Ellipsis ref={ref} {...props} asChild>
+      <Button as="span" variant={variantMap.ellipsis} size={size}>
+        ...
+      </Button>
+    </ChakraPagination.Ellipsis>
+  );
+});
+
+export const PaginationItem = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPagination.ItemProps
+>(function PaginationItem(props, ref) {
+  const { page } = usePaginationContext();
+  const { size, variantMap, getHref } = useRootProps();
+
+  const current = page === props.value;
+  const variant = current ? variantMap.current : variantMap.default;
+
+  if (getHref) {
+    return (
+      <LinkButton
+        href={getHref(props.value)}
+        variant={variant}
+        size={size}
+        bg={current ? "#02A0A0" : "white"}
+        color={current ? "black" : "black"}
+        _hover={{ bg: "#02A0A0", color: "black" }}
+      >
+        {props.value}
+      </LinkButton>
+    );
+  }
+
+  return (
+    <ChakraPagination.Item ref={ref} {...props} asChild>
+      <Button
+        bg={current ? "#F5F8FB" : "white"}
+        color={current ? "black" : "black"}
+        variant={variant}
+        size={size}
+        _hover={{ bg: "#F5F8FB", color: "black" }}
+        border="none"
+      >
+        {props.value}
+      </Button>
+    </ChakraPagination.Item>
+  );
+});
+
+export const PaginationPrevTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPagination.PrevTriggerProps
+>(function PaginationPrevTrigger(props, ref) {
+  const { size, variantMap, getHref } = useRootProps();
+  const { previousPage } = usePaginationContext();
+
+  if (getHref) {
+    return (
+      <LinkButton
+        href={previousPage != null ? getHref(previousPage) : undefined}
+        variant={variantMap.default}
+        size={size}
+        _hover={{ bg: "#F5F8FB", color: "black" }}
+      >
+        <HiChevronLeft />
+      </LinkButton>
+    );
+  }
+
+  return (
+    <ChakraPagination.PrevTrigger ref={ref} asChild {...props}>
+      <IconButton variant={variantMap.default} size={size}>
+        <HiChevronLeft />
+      </IconButton>
+    </ChakraPagination.PrevTrigger>
+  );
+});
+
+export const PaginationNextTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraPagination.NextTriggerProps
+>(function PaginationNextTrigger(props, ref) {
+  const { size, variantMap, getHref } = useRootProps();
+  const { nextPage } = usePaginationContext();
+
+  if (getHref) {
+    return (
+      <LinkButton
+        href={nextPage != null ? getHref(nextPage) : undefined}
+        variant={variantMap.default}
+        // size={size}
+        borderRadius="94px"
+        bg="#F5F8FB"
+        color="white"
+        w="136px"
+        fontSize="sm"
+        _hover={{ bg: "#026060" }}
+      >
+        Next
+      </LinkButton>
+    );
+  }
+
+  return (
+    <ChakraPagination.NextTrigger ref={ref} asChild {...props}>
+      <Text
+        w="136px"
+        // borderRadius="94px"
+        // bg="#02A0A0"
+        color="black"
+        // variant={variantMap.default}
+        // size={size}
+        cursor="pointer"
+        // _hover={{ bg: "#026060" }}
+        display="flex"
+        gap="12px"
+        alignItems="center"
+        fontSize="xs"
+        justifyContent="center"
+      >
+        Next
+        <HiChevronRight />
+      </Text>
+    </ChakraPagination.NextTrigger>
+  );
+});
+
+export const PaginationItems = (props: React.HTMLAttributes<HTMLElement>) => {
+  return (
+    <ChakraPagination.Context>
+      {({ pages }) =>
+        pages.map((page, index) => (
+          <PaginationItem
+            key={index}
+            type="page"
+            value={page.value}
+            {...props}
+          />
+        ))
+      }
+    </ChakraPagination.Context>
+  );
+};
+
+interface PageTextProps extends TextProps {
+  format?: "short" | "compact" | "long";
+}
+
+export const PaginationPageText = React.forwardRef<
+  HTMLParagraphElement,
+  PageTextProps
+>(function PaginationPageText(props, ref) {
+  const { format = "compact", ...rest } = props;
+  const { page, totalPages, pageRange, count } = usePaginationContext();
+  const content = React.useMemo(() => {
+    if (format === "short") return `${page} / ${totalPages}`;
+    if (format === "compact") return `${page} of ${totalPages}`;
+    return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} of ${count}`;
+  }, [format, page, totalPages, pageRange, count]);
+
+  return (
+    <Text fontWeight="medium" ref={ref} {...rest}>
+      {content}
+    </Text>
+  );
+});
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..a677ca2
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,39 @@
+import { Switch as ChakraSwitch } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface SwitchProps extends ChakraSwitch.RootProps {
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLLabelElement>
+  trackLabel?: { on: React.ReactNode; off: React.ReactNode }
+  thumbLabel?: { on: React.ReactNode; off: React.ReactNode }
+}
+
+export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  function Switch(props, ref) {
+    const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
+      props
+
+    return (
+      <ChakraSwitch.Root ref={rootRef} {...rest}>
+        <ChakraSwitch.HiddenInput ref={ref} {...inputProps} />
+        <ChakraSwitch.Control>
+          <ChakraSwitch.Thumb>
+            {thumbLabel && (
+              <ChakraSwitch.ThumbIndicator fallback={thumbLabel?.off}>
+                {thumbLabel?.on}
+              </ChakraSwitch.ThumbIndicator>
+            )}
+          </ChakraSwitch.Thumb>
+          {trackLabel && (
+            <ChakraSwitch.Indicator fallback={trackLabel.off}>
+              {trackLabel.on}
+            </ChakraSwitch.Indicator>
+          )}
+        </ChakraSwitch.Control>
+        {children != null && (
+          <ChakraSwitch.Label>{children}</ChakraSwitch.Label>
+        )}
+      </ChakraSwitch.Root>
+    )
+  },
+)