diff --git a/package-lock.json b/package-lock.json
index 0d62def..565b898 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1670,7 +1670,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/src/Pages/Login.tsx b/src/Pages/Login.tsx
index ea2c5dd..c479a26 100644
--- a/src/Pages/Login.tsx
+++ b/src/Pages/Login.tsx
@@ -50,8 +50,8 @@ const Login = () => {
     <VStack
       w={'100%'} h={'100vh'} bg={'#ffffff'}  >
 
-      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8}  h={'7%'} justifyContent={'flex-start'}>
-      <Image w={50} src={logo} />
+      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8} h={'7%'} justifyContent={'flex-start'}>
+        <Image w={50} src={logo} />
 
       </HStack>
 
diff --git a/src/Pages/ManageJobs/ManageJobsAdd.tsx b/src/Pages/ManageJobs/ManageJobsAdd.tsx
index d69907f..bf74bd6 100644
--- a/src/Pages/ManageJobs/ManageJobsAdd.tsx
+++ b/src/Pages/ManageJobs/ManageJobsAdd.tsx
@@ -43,50 +43,59 @@ function ManageJobsAdd() {
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
                             <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root>
+                        <Field.Root>
 
                             <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
                             <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
                             <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
                             <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
                             <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
                             <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
                             <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+                        </Field.Root>
+                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                             <Input placeholder="Enter the Country Selection"   /> */}
-                            <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                                <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                                <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                    borderRadius={"5px"}>
-                                    <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                                </SelectTrigger>
-                                <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                    {frameworks.items.map((movie) => (
-                                        <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                            fontSize="12px" >
-                                            {movie.label}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </SelectRoot>
-
+                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
+                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
+                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                                borderRadius={"5px"}>
+                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
+                            </SelectTrigger>
+                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
+                                {frameworks.items.map((movie) => (
+                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                                        fontSize="12px" >
+                                        {movie.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </SelectRoot>
+                        <Field.Root>
 
                             <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
                             <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
                             <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root>
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
                             <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                         </Field.Root>
diff --git a/src/Pages/ManageJobs/ViewManageJob.tsx b/src/Pages/ManageJobs/ViewManageJob.tsx
index c8b574b..2fb4217 100644
--- a/src/Pages/ManageJobs/ViewManageJob.tsx
+++ b/src/Pages/ManageJobs/ViewManageJob.tsx
@@ -44,52 +44,53 @@ function ViewManageJob() {
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
                             <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
                             <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
                             <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
                             <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
                             <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
                             <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
                             <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
+                        </Field.Root>
+                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                             <Input placeholder="Enter the Country Selection"   /> */}
-                            <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                                <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                                <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                    borderRadius={"5px"}>
-                                    <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                                </SelectTrigger>
-                                <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                    {frameworks.items.map((movie) => (
-                                        <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                            fontSize="12px" >
-                                            {movie.label}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </SelectRoot>
-
+                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
+                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
+                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                                borderRadius={"5px"}>
+                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
+                            </SelectTrigger>
+                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
+                                {frameworks.items.map((movie) => (
+                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                                        fontSize="12px" >
+                                        {movie.label}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </SelectRoot>
 
+                        <Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
                             <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
                             <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
                             <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root><Field.Root>
                             <Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
                             <Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                         </Field.Root>
diff --git a/src/Pages/MyProfile/MyProfile.tsx b/src/Pages/MyProfile/MyProfile.tsx
index 9c7ed8b..e72c329 100644
--- a/src/Pages/MyProfile/MyProfile.tsx
+++ b/src/Pages/MyProfile/MyProfile.tsx
@@ -2,9 +2,9 @@ import MainFrame from "../../components/MainFrame"
 
 const MyProfile = () => {
   return (
-    
+
     <MainFrame >
-        MyProfile
+      MyProfile
     </MainFrame>
   )
 }
diff --git a/src/Pages/Profile/ChangePassword.tsx b/src/Pages/Profile/ChangePassword.tsx
new file mode 100644
index 0000000..fee0a39
--- /dev/null
+++ b/src/Pages/Profile/ChangePassword.tsx
@@ -0,0 +1,58 @@
+
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { FaRegEdit } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import EnterPassword from "./EnterPassword";
+function Changepassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+                    Change Password
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterPassword />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default Changepassword
\ No newline at end of file
diff --git a/src/Pages/Profile/EnterOTP.tsx b/src/Pages/Profile/EnterOTP.tsx
new file mode 100644
index 0000000..1e07d2c
--- /dev/null
+++ b/src/Pages/Profile/EnterOTP.tsx
@@ -0,0 +1,109 @@
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Box, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+import { BiSolidEdit } from "react-icons/bi";
+
+function EnterOTP() {
+    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+
+    // Handle change for OTP inputs
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
+        const value = e.target.value;
+
+        // Prevent non-numeric input
+        if (/[^0-9]/.test(value)) return;
+
+        // Update the OTP state with the new value
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+
+        // Move focus to the next input automatically
+        if (value && index < otp.length - 1) {
+            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
+            if (nextInput) nextInput.focus();
+        }
+    };
+
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3}>
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={2}>
+                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
+                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
+                        <BiSolidEdit color="black" />
+                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
+                    </Box>
+
+
+                    <Stack direction="row" justify="center" pt={2}>
+
+                        {/* 4 OTP Inputs */}
+                        {otp.map((digit, index) => (
+                            <Input
+                                key={index}
+                                id={`otp-input-${index}`}
+                                value={digit}
+                                maxW="50px"
+                                color={"black"}
+                                textAlign="center"
+                                fontSize="20px"
+                                placeholder="0"
+                                border="1px solid grey"
+                                onChange={(e) => handleChange(e, index)}
+                                maxLength={1} // Only allows 1 character per input
+                            />
+                        ))}
+                    </Stack>
+                    <Box textAlign="center">
+                        <Text
+                            color="#4746F4"
+                            textDecoration="underline"
+                            fontWeight="bold"
+                            mt={3}
+                            cursor="pointer"
+                            display="inline-block"
+                            px={2} // Adds padding for better appearance
+                        >
+                            Resend OTP
+                        </Text>
+                    </Box>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterOTP
\ No newline at end of file
diff --git a/src/Pages/Profile/EnterPassword.tsx b/src/Pages/Profile/EnterPassword.tsx
new file mode 100644
index 0000000..18eb230
--- /dev/null
+++ b/src/Pages/Profile/EnterPassword.tsx
@@ -0,0 +1,55 @@
+
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Input, Stack } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import EnterOTP from "./EnterOTP";
+function EnterPassword() {
+    return (
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    Save
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
+                // height={'80vh'}
+                // overflow={'scroll'}
+                p={2} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" pt={3} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white" pt={5}>
+                    <Stack p={2} >
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
+                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterOTP />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterPassword
\ No newline at end of file
diff --git a/src/Pages/Profile/Profile.tsx b/src/Pages/Profile/Profile.tsx
index 49e11f8..858216a 100644
--- a/src/Pages/Profile/Profile.tsx
+++ b/src/Pages/Profile/Profile.tsx
@@ -1,10 +1,60 @@
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 import MainFrame from "../../components/MainFrame"
+import { FaCamera } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import Changepassword from "./ChangePassword";
 
 const Profile = () => {
   return (
     <MainFrame >
-      Profile
-    </MainFrame>
+      <Stack p={5}>
+        <Box position="relative" width="fit-content"
+          display="inline-block"
+
+          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
+          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
+            <Avatar.Fallback />
+            <Avatar.Image src="https://bit.ly/sage-adebayo" />
+          </Avatar.Root>
+
+          <Box
+            position="absolute"
+            bottom="-2px"
+            left={"39px"}
+            p="2px"
+          >
+            <FaCamera color="black" size={16} />
+          </Box>
+        </Box>
+        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
+        {/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
+        <Text color="black" fontSize="12px">
+          Employee ID: <span>#1245679</span>
+        </Text>
+        <Box w={"70%"} mt={5}>
+          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+
+          </SimpleGrid>
+          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
+          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+            Change Password
+          </Button> */}
+          <Changepassword />
+
+        </Box>
+
+      </Stack>
+
+    </MainFrame >
   )
 }
 
diff --git a/src/components/EditSubAdmin.tsx b/src/components/EditSubAdmin.tsx
index 1640f05..f3c267b 100644
--- a/src/components/EditSubAdmin.tsx
+++ b/src/components/EditSubAdmin.tsx
@@ -17,7 +17,9 @@ function EditSubAdmin() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ lg: "60%", md: "230px" }}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+
                 height={'80vh'}
                 overflow={'scroll'}
                 p={2} // Reduced padding
@@ -33,7 +35,8 @@ function EditSubAdmin() {
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
                             <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                             <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
                             <Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />