diff --git a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
index 66ab01c..4cce6e5 100644
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -1,5 +1,5 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import View from "../../../components/ActionIcons/View";
 import {
   DialogBody,
   DialogCloseTrigger,
@@ -9,7 +9,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
-import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (
diff --git a/src/Pages/Profile/ChangePassword.tsx b/src/Pages/Profile/ChangePassword.tsx
index fee0a39..d3a74bf 100644
--- a/src/Pages/Profile/ChangePassword.tsx
+++ b/src/Pages/Profile/ChangePassword.tsx
@@ -1,28 +1,22 @@
 
-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 { Field, Input, Stack } from "@chakra-ui/react";
 import { Button } from "../../components/ui/button";
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
 import EnterPassword from "./EnterPassword";
 function Changepassword() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+                <Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={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
+                p={2} 
                 bgSize={'md'}
             >
                 <DialogHeader bg="white" pt={3} pb={2} >
@@ -33,22 +27,17 @@ function Changepassword() {
                     <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>
+                            <Input color="black" pl={1} fontSize="12px"  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>
+                            <Input color="black" pl={1} fontSize="12px"  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 >
 
diff --git a/src/Pages/Profile/Profile.tsx b/src/Pages/Profile/Profile.tsx
index b32b9a0..b3b5b2f 100644
--- a/src/Pages/Profile/Profile.tsx
+++ b/src/Pages/Profile/Profile.tsx
@@ -1,18 +1,24 @@
-import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react";
+import { Avatar, Box, Center, HStack, Input, SimpleGrid, Stack, Text, VStack } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
 import MainFrame from "../../components/MainFrame";
 import Changepassword from "./ChangePassword";
+import { Field } from "../../components/ui/field";
+import EditableInput from "../../components/EditableInput";
 
 const Profile = () => {
   return (
     <MainFrame >
-      <Stack p={5}>
-        <Box position="relative" width="fit-content"
-          display="inline-block"
+      <HStack  alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >
+
+        <VStack   w={'50%'} p={3} rounded={'lg'} mb={3}>
+
+<HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'}  w={'100%'} px={3}  py={3} >
+        <VStack  w={'100%'} alignItems={'flex-start'} gap={0}>
+        <Box mb={2} position="relative" width="fit-content"
           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.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
           </Avatar.Root>
           <Box
             position="absolute"
@@ -20,37 +26,42 @@ const Profile = () => {
             left={"39px"}
             p="2px"
           >
-            <FaCamera color="black" size={16} />
+            <FaCamera  color="#ccc" size={16} />
           </Box>
         </Box>
-        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
-        <Text color="black" fontSize="12px">
+        <Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>Ritesh Pandey</Text>
+        <Text color="black" as={'span'} fontSize={'xs'}>
           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 />
+        </VStack>
 
-        </Box>
+        
+        <Changepassword />
+        </HStack>
 
-      </Stack>
+        
+        <VStack  w={"100%"} >
+        <Field mt={4} label="First Name" fontSize="xs" required>
+              <EditableInput defaultValue="Ritesh" placeholder="Enter first name" />
+            </Field>
+
+            <Field mt={4} label="Last Name" fontSize="xs" required>
+              <EditableInput defaultValue="Pandey" placeholder="Enter last name" />
+            </Field>
+
+            <Field mt={4} label="Mobile Number" fontSize="xs" required>
+              <EditableInput defaultValue={"98234567892"} placeholder="Mobile Number" type='number' />
+            </Field>
+
+
+
+
+
+
+        </VStack>
+        </VStack>
+
+      </HStack>
 
     </MainFrame >
   )
diff --git a/src/components/EditableInput.tsx b/src/components/EditableInput.tsx
new file mode 100644
index 0000000..59d9cc3
--- /dev/null
+++ b/src/components/EditableInput.tsx
@@ -0,0 +1,53 @@
+import { Editable } from "@chakra-ui/react";
+import { FC } from "react";
+
+interface InputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+  placeholder?: string;
+  props?: any;
+  type?:string
+}
+const EditableInput: FC<InputProps> = ({
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  type,
+  ...props
+}) => {
+  return (
+    <Editable.Root
+      {...props}
+      value={value}
+      onChange={() => onChange && onChange}
+      w={"100%"}
+      size={"sm"}
+      textAlign="start"
+      defaultValue={defaultValue || ""}
+    >
+      <Editable.Preview
+        bg={"#00000006"}
+        fontSize={"xs"}
+        w={"100%"}
+        bgSize={"sm"}
+        ps={3}
+        // _hover={{ backgroundColor: "#00000010" }}
+      />
+      <Editable.Input
+        fontSize={"xs"}
+        placeholder={placeholder}
+        w={"100%"}
+        border={"#ccc 1px solid"}
+        type={type}
+        _focus={{ bg: "#02A0A015" }}
+        outline={"#007F33"}
+        bgSize={"xs"}
+        ps={3}
+      />
+    </Editable.Root>
+  );
+};
+
+export default EditableInput;
diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx
index 9c66e8c..4394283 100644
--- a/src/components/MainFrame.tsx
+++ b/src/components/MainFrame.tsx
@@ -10,14 +10,15 @@ interface MainFrameProps {
   children: React.ReactNode
   title?: string
   transperant?:boolean
+  props?:any
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant, props }) => {
   return (
-    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
+    <MotionVStack {...props} overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        // minH="100%"
+        // h="100%"
         bg={transperant?'transperant':"#ffffff"}
         // overflow={'scroll'}
         rounded="lg"
diff --git a/src/components/ui/field.tsx b/src/components/ui/field.tsx
index dd3b66f..9474dea 100644
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -15,7 +15,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     return (
       <ChakraField.Root ref={ref} {...rest}>
         {label && (
-          <ChakraField.Label>
+          <ChakraField.Label fontSize={'xs'}>
             {label}
             <ChakraField.RequiredIndicator fallback={optionalText} />
           </ChakraField.Label>