diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 6e232b1..8ae0392 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.57smkc9q598"
+    "revision": "0.tm0o9v27ue"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/package-lock.json b/package-lock.json
index 0d62def..f18c84e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1670,7 +1670,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
index 51377a3..a86544c 100644
--- a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
@@ -1,7 +1,7 @@
 import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import { p } from "framer-motion/client";
-import AboutUsAddModel from "../../../components/AboutUsAddModel";
+import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
 
 
 const AboutUs = () => {
diff --git a/src/components/AboutUsAddModel.tsx b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
similarity index 60%
rename from src/components/AboutUsAddModel.tsx
rename to src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
index 6643c16..75b9c73 100644
--- a/src/components/AboutUsAddModel.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -1,7 +1,7 @@
 import { FaRegEdit } from "react-icons/fa"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+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 (
@@ -11,31 +11,33 @@ function AboutUsAddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
 
             </DialogTrigger>
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
-                <DialogHeader bg="white" py={3} >
-                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3} >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={2}>AboutUs</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
+                            <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={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/components/EditDetails.tsx b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
similarity index 63%
rename from src/components/EditDetails.tsx
rename to src/Pages/ManageCMS/FAQ/EditDetails.tsx
index 4c7b8af..a8759e9 100644
--- a/src/components/EditDetails.tsx
+++ b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
@@ -1,5 +1,5 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+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() {
@@ -16,29 +16,31 @@ function EditDetails() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
-                <DialogHeader bg="white" py={3}>
-                    <DialogTitle alignSelf="center" color="black">Edit Details</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3} >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={2}>Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
+                            <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={2}>Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
+                            <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={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/ManageCMS/FAQ/FAQ.tsx b/src/Pages/ManageCMS/FAQ/FAQ.tsx
index cff2e78..44bd58d 100644
--- a/src/Pages/ManageCMS/FAQ/FAQ.tsx
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -1,13 +1,13 @@
 import { Box, Button, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import EditDetails from "../../../components/EditDetails";
+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 "../../../components/FaqAddModel";
+import FaqAddModel from "./FaqAddModel";
 
 
 // table data
@@ -60,8 +60,8 @@ const FAQ = () => {
            FAQs
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
diff --git a/src/components/FaqAddModel.tsx b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
similarity index 56%
rename from src/components/FaqAddModel.tsx
rename to src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
index 563b2ef..40b1f60 100644
--- a/src/components/FaqAddModel.tsx
+++ b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
@@ -1,7 +1,7 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+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 (
@@ -11,35 +11,37 @@ function FaqAddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd color="#000"  /> <Text color={"#00000099"}>Add</Text></Button>
+                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
 
             </DialogTrigger>
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
-                <DialogHeader bg="white" py={3}>
-                    <DialogTitle alignSelf="center" color="black">Add</DialogTitle>
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3} >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={2}>Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
+                            <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={2}>Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
+                            <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={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
index e427996..26e9126 100644
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
@@ -1,7 +1,7 @@
 import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import { p } from "framer-motion/client";
-import PrivacyPolicyAddModel from "../../../components/PrivacyPolicyAddModel";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
 
 
 const PrivacyPolicy = () => {
diff --git a/src/components/PrivacyPolicyAddModel.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
similarity index 60%
rename from src/components/PrivacyPolicyAddModel.tsx
rename to src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
index 64b6db9..566a00e 100644
--- a/src/components/PrivacyPolicyAddModel.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -1,7 +1,7 @@
 import { FaRegEdit } from "react-icons/fa"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+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 (
@@ -11,31 +11,33 @@ function PrivacyPolicyAddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
 
             </DialogTrigger>
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
-                <DialogHeader bg="white" py={3} >
-                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
+                <DialogHeader bg="white"  >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3} >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={2}>PrivacyPolicy</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
+                            <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={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
index 8c42617..35f1e5a 100644
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
@@ -1,7 +1,7 @@
 import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import { p } from "framer-motion/client";
-import TermsAndConditionsAddModel from "../../../components/TermsAndConditionsAddModel";
+import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
 
 
 const TermsAndConditions = () => {
diff --git a/src/components/TermsAndConditionsAddModel.tsx b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
similarity index 60%
rename from src/components/TermsAndConditionsAddModel.tsx
rename to src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
index d0033cc..17a97fa 100644
--- a/src/components/TermsAndConditionsAddModel.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
@@ -1,7 +1,7 @@
 import { FaRegEdit } from "react-icons/fa"
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+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 (
@@ -11,31 +11,33 @@ function TermsAndConditionsAddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
 
             </DialogTrigger>
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
-                <DialogHeader bg="white" py={3} >
-                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack  >
+                    <Stack py={3}>
 
                         <Field.Root>
-                            <Field.Label color="black" pt={2}>TermsAndConditions</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
+                            <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={"5"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/ManageContact/ManageContact.tsx b/src/Pages/ManageContact/ManageContact.tsx
index cc1e9c8..1207bf7 100644
--- a/src/Pages/ManageContact/ManageContact.tsx
+++ b/src/Pages/ManageContact/ManageContact.tsx
@@ -1,6 +1,6 @@
 import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../components/MainFrame"
-import PendingRequests from "../../components/PendingRequests";
+import PendingRequests from "../../Pages/ManageContact/PendingRequests"
 import { InputGroup } from "../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../components/DataTable";
diff --git a/src/components/PendingRequests.tsx b/src/Pages/ManageContact/PendingRequests.tsx
similarity index 63%
rename from src/components/PendingRequests.tsx
rename to src/Pages/ManageContact/PendingRequests.tsx
index 996bc45..23d566b 100644
--- a/src/components/PendingRequests.tsx
+++ b/src/Pages/ManageContact/PendingRequests.tsx
@@ -1,6 +1,6 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, HStack, Input, Stack, Textarea,  } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, HStack, Input, Stack, Textarea, } from "@chakra-ui/react"
 function PendingRequests() {
     return (
 
@@ -16,33 +16,33 @@ function PendingRequests() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: "90%", md: "400px" }}
-                maxW="90vw"
-                h="auto"
-                p={4}
+                w={{ base: '90%', md: '400px' }}
+                height={"auto"}
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
-                <DialogHeader bg="white" py={3}>
-                    <DialogTitle alignSelf="center" color="black">Pending Requests</DialogTitle>
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Pending Requests</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack  >
-
+                    <Stack py={3}>
                         <Field.Root>
-                            <Field.Label color="black" pt={2}>Request Type</Field.Label>
-                            <Input placeholder="Message" bgColor="#EEEEEE" color="black" border="none" pl={2} />
+                            <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={2}>Solution</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" height={"80px"} color="black" border="none" pl={2}  pt={2}/>
+                            <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={5}>
-                     
-                    <HStack mt={2} w={"100%"}>
+                <DialogFooter display={{ base: 'block', md: 'flex' }} justifyContent="center" gap={1} pt={2}>
+
+                    <HStack mt={2} width={"100%"}
+                        justifyContent={"space-between"}>
                         <Button
-                            width="50%"
+                            width={"48%"}
                             color="black"
                             _hover={{ bgColor: "white" }}
                             variant="outline"
@@ -53,14 +53,14 @@ function PendingRequests() {
                             Unresolved
                         </Button>
                         <Button
+                            width={"48%"}
                             borderRadius="sm"
-                            width="50%"
                             // bgColor="#007F33"
                             bgColor={'#02A0A0'}
                             color="white"
                             // colorPalette="#007F33"
                             size={"xs"}
-                            >
+                        >
                             Resolved{" "}
                         </Button>
                     </HStack>
diff --git a/src/Pages/ManageGroups/AddGroup.tsx b/src/Pages/ManageGroups/AddGroup.tsx
index fa2f5f4..d5cc33a 100644
--- a/src/Pages/ManageGroups/AddGroup.tsx
+++ b/src/Pages/ManageGroups/AddGroup.tsx
@@ -8,7 +8,7 @@ function AddGroup() {
 
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
 
             </DialogTrigger>
 
@@ -16,19 +16,17 @@ function AddGroup() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-
-
-                // height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
+                height={"auto"}
+                // overflow={'scroll'}
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white">
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="xs">Group Name</Field.Label>
@@ -41,18 +39,11 @@ function AddGroup() {
                         <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">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/ManageGroups/EditDetailGroup.tsx b/src/Pages/ManageGroups/EditDetailGroup.tsx
index e81f7b2..64d8c8f 100644
--- a/src/Pages/ManageGroups/EditDetailGroup.tsx
+++ b/src/Pages/ManageGroups/EditDetailGroup.tsx
@@ -10,7 +10,7 @@ function EditDetailGroups() {
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} />
+                    <FaRegEdit style={{ cursor: "pointer", }}  color="#000"/>
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -19,15 +19,15 @@ function EditDetailGroups() {
             <DialogContent
                 bg={"#fff"}
                 w={{ base: '90%', md: '400px' }}
-                overflow={'scroll'}
-                p={2} // Reduced padding
+                height={"auto"}
+                p={3} // Reduced padding
             >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white">
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
@@ -71,7 +71,7 @@ function EditDetailGroups() {
                         <Switch />
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/ManageGroups/ManageGroups.tsx b/src/Pages/ManageGroups/ManageGroups.tsx
index f055d68..7cb4b8f 100644
--- a/src/Pages/ManageGroups/ManageGroups.tsx
+++ b/src/Pages/ManageGroups/ManageGroups.tsx
@@ -5,8 +5,6 @@ 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 "../SubAdmin/AddModel"
-import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewManageGroup from "./ViewManageGroup"
 import EditDetailGroups from "./EditDetailGroup"
 import AddGroup from "./AddGroup"
@@ -70,7 +68,7 @@ const ManageGroups = () => {
             Manage Groups
           </Text>
 
-          <HStack gap={4}>
+          <HStack >
             <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
diff --git a/src/Pages/ManageGroups/ViewManageGroup.tsx b/src/Pages/ManageGroups/ViewManageGroup.tsx
index 61c6971..d479bc0 100644
--- a/src/Pages/ManageGroups/ViewManageGroup.tsx
+++ b/src/Pages/ManageGroups/ViewManageGroup.tsx
@@ -11,7 +11,7 @@ function ViewManageGroup() {
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }}  color="#000"/>
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -21,19 +21,16 @@ function ViewManageGroup() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-
-
-                // height={'80vh'}
-                overflow={'scroll'}
-                p={2} // Reduced padding
+                height={"auto"}
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white" >
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
@@ -73,10 +70,6 @@ function ViewManageGroup() {
                                 </AvatarGroup>
                             </Box>
 
-
-
-
-
                         </Field.Root>
                         <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
                         <Switch />
diff --git a/src/Pages/ManageJobs/ManageJobsAdd.tsx b/src/Pages/ManageJobs/ManageJobsAdd.tsx
index d69907f..6e19bbc 100644
--- a/src/Pages/ManageJobs/ManageJobsAdd.tsx
+++ b/src/Pages/ManageJobs/ManageJobsAdd.tsx
@@ -20,7 +20,7 @@ function ManageJobsAdd() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} />
+                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} color="#000" />
                 </Button>
             </DialogTrigger>
 
@@ -28,18 +28,18 @@ function ManageJobsAdd() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-
                 height={'80vh'}
                 overflow={'scroll'}
-                p={2} // Reduced padding
+                overflowX="hidden" 
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" p={2}>
+                <DialogHeader bg="white">
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2}>
+                    <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" />
@@ -92,7 +92,7 @@ function ManageJobsAdd() {
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
                         Save
                     </Button>
diff --git a/src/Pages/ManageJobs/ViewManageJob.tsx b/src/Pages/ManageJobs/ViewManageJob.tsx
index c8b574b..fca4cd6 100644
--- a/src/Pages/ManageJobs/ViewManageJob.tsx
+++ b/src/Pages/ManageJobs/ViewManageJob.tsx
@@ -21,7 +21,7 @@ function ViewManageJob() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }} />
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
                 </Button>
             </DialogTrigger>
 
@@ -29,18 +29,18 @@ function ViewManageJob() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-
                 height={'80vh'}
                 overflow={'scroll'}
-                p={2} // Reduced padding
+                overflowX="hidden" 
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" p={2}>
+                <DialogHeader bg="white" >
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2}>
+                    <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" />
@@ -95,7 +95,7 @@ function ViewManageJob() {
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
                         Save
                     </Button>
diff --git a/src/Pages/ManagePost/ViewDailog.tsx b/src/Pages/ManagePost/ViewDailog.tsx
index 446b26a..f835014 100644
--- a/src/Pages/ManagePost/ViewDailog.tsx
+++ b/src/Pages/ManagePost/ViewDailog.tsx
@@ -9,7 +9,7 @@ function ViewDailog() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
                 </Button>
             </DialogTrigger>
 
@@ -17,14 +17,14 @@ function ViewDailog() {
                 w={{ base: '90%', md: '400px' }}
                 bg={"#fff"}
                 h="auto"
-                p={2} // Reduced padding
+                p={3} // Reduced padding
             >
-                <DialogHeader bg="white" p={2}>
+                <DialogHeader bg="white" >
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">View Details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <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 />
diff --git a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
index 8fa5979..bbb4ea1 100644
--- a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
@@ -17,104 +17,76 @@ function AddRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+        <Button px={4} size={"xs"} bg={"#02A0A0"}>
           <IoMdAdd /> Add
         </Button>
       </DialogTrigger>
 
       <DialogContent
-        bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        maxW="90vw"
-        h="auto"
-        p={4}
+         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 fontSize={"sm"} alignSelf="center" color="black">
+        <DialogHeader bg="white" >
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
             Add User Accounts
           </DialogTitle>
         </DialogHeader>
 
         <DialogBody bg="white">
-          <Stack pt={3} pb={3}>
+          <Stack py={3}>
             <Field.Root>
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 First Name
               </Field.Label>
               <Input
-                name="Priyanka"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Last Name
               </Field.Label>
               <Input
-                name="Joshi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                name="Female"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                name="11/02/1989"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                name="Yes"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                name="English, Hindi, Marathi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
             </Field.Root>
           </Stack>
         </DialogBody>
-        <DialogFooter mt={5}>
+        <DialogFooter mt={2}>
           <DialogActionTrigger asChild>
-            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
+            <Button w="100%" bg="#02A0A0" color={"#fff"}>
               Save
             </Button>
           </DialogActionTrigger>
diff --git a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
index 4604103..30b934f 100644
--- a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
@@ -23,90 +23,62 @@ function EditRegisterUsers() {
 
       <DialogContent
         bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        maxW="90vw"
-        h="auto"
-        p={4}
+        w={{ base: '90%', md: '400px' }}
+        height={'80vh'}
+        overflow={'scroll'}
+        overflowX="hidden" 
+        p={3} // Reduced padding
+        bgSize={'md'}
       >
         <DialogHeader bg="white" p={0}>
-          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
             Edit user Accounts
           </DialogTitle>
         </DialogHeader>
 
         <DialogBody bg="white">
-          <Stack pt={3} pb={3}>
+          <Stack py={3}>
             <Field.Root>
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 First Name
               </Field.Label>
               <Input
-                name="Priyanka"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Last Name
               </Field.Label>
               <Input
-                name="Joshi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                name="Female"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                name="11/02/1989"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                name="Yes"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                name="English, Hindi, Marathi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                size={"xs"}
+                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
             </Field.Root>
           </Stack>
diff --git a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
index 95717cd..7826ee4 100644
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -21,97 +21,63 @@ function ViewRegisterUsers() {
       </DialogTrigger>
 
       <DialogContent
-        bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        maxW="90vw"
-        h="auto"
-        p={4}
+         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 fontSize={"sm"} alignSelf="center" color="black">
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
             View Details
           </DialogTitle>
         </DialogHeader>
 
         <DialogBody bg="white">
-          <Stack pt={3} pb={3}>
+          <Stack py={3}>
             <Field.Root>
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 First Name
               </Field.Label>
               <Input
-                value="Priyanka"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label color="black" pt={2} fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Last Name
               </Field.Label>
               <Input
-                value="Joshi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                value="Female"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                value="11/02/1989"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 OTP Verified
               </Field.Label>
               <Input
-                value="Yes"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
 
-              <Field.Label pt={2} color="black" fontSize={"xs"}>
+              <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                value="English, Hindi, Marathi"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={2}
-                readOnly
-                size={"xs"}
+                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
               />
             </Field.Root>
           </Stack>
diff --git a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
index 052c2de..360b868 100644
--- a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
@@ -1,12 +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>
-         AgencyMaster
-      </MainFrame>
-    )
-  }
-  export default AgencyMaster
\ No newline at end of file
+  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
index 71676e1..d1b3d00 100644
--- a/src/Pages/MasterModule/Country/Country.tsx
+++ b/src/Pages/MasterModule/Country/Country.tsx
@@ -1,12 +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>
-         Country
-      </MainFrame>
-    )
-  }
-  export default Country
\ No newline at end of file
+  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
index 8a7e6ed..95d83ff 100644
--- a/src/Pages/MasterModule/JobStatus/JobStatus.tsx
+++ b/src/Pages/MasterModule/JobStatus/JobStatus.tsx
@@ -1,12 +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>
-         JobStatus
-      </MainFrame>
-    )
-  }
-  export default JobStatus
\ No newline at end of file
+  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
index d134f83..ba43fba 100644
--- a/src/Pages/MasterModule/JobType/JobType.tsx
+++ b/src/Pages/MasterModule/JobType/JobType.tsx
@@ -1,12 +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>
-         JobType
-      </MainFrame>
-    )
-  }
-  export default JobType
\ No newline at end of file
+  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
index a10c785..7764629 100644
--- a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
@@ -1,12 +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>
-         TemplateMaster
-      </MainFrame>
-    )
-  }
-  export default TemplateMaster
\ No newline at end of file
+  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
index b6e8985..a236b90 100644
--- a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
@@ -1,12 +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 >
-         WorkspaceMode
-      </MainFrame>
-    )
-  }
-  export default WorkspaceMode
\ No newline at end of file
+  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/SubAdmin/AddModel.tsx b/src/Pages/SubAdmin/AddModel.tsx
index 6395eeb..403549b 100644
--- a/src/Pages/SubAdmin/AddModel.tsx
+++ b/src/Pages/SubAdmin/AddModel.tsx
@@ -12,7 +12,7 @@ function AddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button px={4} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
 
             </DialogTrigger>
 
@@ -20,19 +20,19 @@ function AddModel() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-
                 height={'80vh'}
                 overflow={'scroll'}
-                p={2} // Reduced padding
+                overflowX="hidden" 
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white"  >
                     <DialogTitle alignSelf="center" color="black" fontSize="14px"
                     >Add Sub Admin Account</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
@@ -64,7 +64,7 @@ function AddModel() {
                         </Grid>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
diff --git a/src/Pages/SubAdmin/SubAdmin.tsx b/src/Pages/SubAdmin/SubAdmin.tsx
index 28c943d..4fa4c0e 100644
--- a/src/Pages/SubAdmin/SubAdmin.tsx
+++ b/src/Pages/SubAdmin/SubAdmin.tsx
@@ -70,8 +70,8 @@ const SubAdmin = () => {
             {/* Manage Post */}
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack>
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
diff --git a/src/Pages/SubAdmin/ViewSubAdmin.tsx b/src/Pages/SubAdmin/ViewSubAdmin.tsx
index dbe4f88..d3f45b8 100644
--- a/src/Pages/SubAdmin/ViewSubAdmin.tsx
+++ b/src/Pages/SubAdmin/ViewSubAdmin.tsx
@@ -9,7 +9,7 @@ function ViewSubAdmin() {
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} color="#000"/>
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -19,20 +19,18 @@ function ViewSubAdmin() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-
-
-
                 height={'80vh'}
                 overflow={'scroll'}
-                p={2} // Reduced padding
+                overflowX="hidden" 
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white">
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">View Sub Admin Account</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
@@ -68,11 +66,11 @@ function ViewSubAdmin() {
                         </Grid>
                     </Stack>
                 </DialogBody>
-                {/* <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"} >
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
-                </DialogFooter> */}
+                </DialogFooter>
 
                 <DialogCloseTrigger color="black" />
             </DialogContent>
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/components/EditSubAdmin.tsx b/src/components/EditSubAdmin.tsx
index 1640f05..60f92a7 100644
--- a/src/components/EditSubAdmin.tsx
+++ b/src/components/EditSubAdmin.tsx
@@ -9,7 +9,7 @@ function EditSubAdmin() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} />
+                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -17,18 +17,19 @@ function EditSubAdmin() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
                 height={'80vh'}
                 overflow={'scroll'}
-                p={2} // Reduced padding
+                overflowX="hidden" 
+                p={3} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" pt={1} pb={2}>
+                <DialogHeader bg="white">
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Sub Admin Account</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack p={2} >
+                    <Stack py={3} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
@@ -61,7 +62,7 @@ function EditSubAdmin() {
                         </Grid>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center">
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>