diff --git a/src/api/endpoints/apiActions.ts b/src/api/endpoints/apiActions.ts
index d25d8458..ca5a41c7 100644
--- a/src/api/endpoints/apiActions.ts
+++ b/src/api/endpoints/apiActions.ts
@@ -1,8 +1,5 @@
 import { AxiosRequestConfig } from 'axios';
 import { customInstance } from '../../../mock/mutator/customClient';
-import { API_CONFIG } from '../../config';
-import { useCookies } from 'react-cookie'
-
 
 type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1];
 
@@ -42,4 +39,4 @@ export const createGetRequest = <T = any, P = any>(endpoint: string, contentType
       return response;
     });
   }
-}
+}
\ No newline at end of file
diff --git a/src/api/endpoints/apiService.ts b/src/api/endpoints/apiService.ts
index 64bb46b8..bba23e99 100644
--- a/src/api/endpoints/apiService.ts
+++ b/src/api/endpoints/apiService.ts
@@ -16,6 +16,10 @@ export interface RegisterRequest {
   organization: string
 }
 
+interface ForgotPasswordReguest {
+  username: string;
+}
+
 type LabelType =
   | string
   | { '@value': string; '@language'?: string }
@@ -210,6 +214,8 @@ export const retrieveTokenApi = ({ groupname }: { groupname: string }) => {
   return createGetRequest<any, any>(endpoint, "application/json")();
 };
 
+export const forgotPassword = createPostRequest<any, ForgotPasswordReguest>(API_CONFIG.REAL_API.USER_RECOVER, { "Content-Type": "application/x-www-form-urlencoded" })
+
 export const getMatchTerms = async (group: string, term: string, filters = {}) => {
   try {
     const response = await createGetRequest<any, any>(`/${group}/${term}.${BASE_EXTENSION}`, "application/json")();
@@ -244,4 +250,4 @@ export const getTermDiscussions = async (group: string, variantID: string) => {
 
 export const getVariant = (group: string, term: string) => {
   return createGetRequest<any, any>(`/${group}/variant/${term}`, "application/json")();  
-};
\ No newline at end of file
+};
diff --git a/src/components/Auth/ForgotPassword.jsx b/src/components/Auth/ForgotPassword.jsx
index 16c98db9..7c1662ea 100644
--- a/src/components/Auth/ForgotPassword.jsx
+++ b/src/components/Auth/ForgotPassword.jsx
@@ -3,17 +3,18 @@ import { Box, Button, FormControl, Grid, Paper, Typography } from "@mui/material
 import { ArrowBack } from "@mui/icons-material";
 import FormField from "./UI/Formfield";
 import { Link } from "react-router-dom";
-import { handleForgotPassword } from "../../api/endpoints/index";
+import { forgotPassword } from "../../api/endpoints/apiService";
 
 const ForgotPassword = () => {
-  const [email, setEmail] = React.useState("");
+  const [username, setUsername] = React.useState("");
+  const [error, setError] = React.useState("");
 
-  const forgotPassword = async () => {
+  const handleForgotPassword = async () => {
     try {
-      await handleForgotPassword(email);
-      console.log("Password reset email sent");
+      await forgotPassword({username: username});
     } catch (error) {
       console.error("Error:", error);
+      setError(error.message);
     }
   };
 
@@ -29,14 +30,15 @@ const ForgotPassword = () => {
           <form className="authForm">
             <Grid container spacing={2.5}>
               <FormField
-                label="Email"
-                placeholder="Enter your email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
+                label="Username"
+                placeholder="Enter your username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                errorMessage={error}
               />
               <Grid item xs={12}>
                 <FormControl>
-                  <Button variant="contained" color="primary" onClick={forgotPassword}>
+                  <Button variant="contained" color="primary" onClick={handleForgotPassword}>
                     Reset my password
                   </Button>
                 </FormControl>
diff --git a/src/components/Dashboard/User/AccountSettingsDialog.jsx b/src/components/Dashboard/User/AccountSettingsDialog.jsx
new file mode 100644
index 00000000..abca8238
--- /dev/null
+++ b/src/components/Dashboard/User/AccountSettingsDialog.jsx
@@ -0,0 +1,205 @@
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { Box, Divider, Button, Typography, Avatar, Stack, Grid, TextField, Link } from "@mui/material";
+import CustomizedDialog from "../../common/CustomizedDialog";
+import PasswordField from "./PasswordField";
+import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
+import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+import { vars } from "../../../theme/variables";
+const { gray600, gray700, brand700 } = vars;
+
+const HeaderRightSideContent = ({ handleClose, handleSubmit }) => {
+    return (
+        <Box display='flex' alignItems='center' gap='.75rem'>
+            <Button variant="outlined" onClick={handleClose}>Cancel</Button>
+            <Button variant='contained' disabled onClick={handleSubmit}>
+                Save Changes
+            </Button>
+        </Box>
+    );
+};
+
+HeaderRightSideContent.propTypes = {
+    handleClose: PropTypes.func.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+};
+
+const AccountSettingsDialog = ({
+    user,
+    open,
+    handleClose
+}) => {
+    const [showPasswordField, setShowPasswordField] = useState(false);
+    const [formData, setFormData] = useState({
+        email: user?.email,
+        currentPassword: "",
+        newPassword: "",
+        confirmPassword: "",
+    })
+
+    const handleInputChange = (field, value) => {
+        setFormData((prev) => ({
+            ...prev,
+            [field]: value,
+        }))
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        console.log("Form submitted:", formData)
+    }
+
+    const userGroupname = user?.groupname.charAt(0).toUpperCase() + user?.groupname.slice(1)
+    const isPasswordFormValid = formData.currentPassword.trim() !== "" && formData.newPassword.trim() !== "" && formData.confirmPassword.trim() !== "";
+
+
+    return (
+        <CustomizedDialog
+            open={open}
+            handleClose={handleClose}
+            title="Account settings"
+            aria-labelledby="accounts-settings-dialog-title"
+            fullScreen={false}
+            HeaderRightSideContent={<HeaderRightSideContent handleClose={handleClose} handleSubmit={handleClose} />}
+            sx={{
+                '& .MuiDialog-paper': {
+                    maxWidth: '62.5rem'
+                }
+            }}
+        >
+            <Box display="flex" sx={{ alignItems: "center" }}>
+                <Avatar sx={{ width: 64, height: 64 }} >
+                    <PersonOutlineIcon fontSize="large" />
+                </Avatar>
+                <Stack sx={{ marginLeft: "1.25rem" }}>
+                    <Typography variant="h6" component="label" sx={{ color: "#3B403F" }}>{userGroupname}</Typography>
+                    <Typography variant="subtitle1" sx={{ color: "#4D4F4F" }}>{user?.email}</Typography>
+                </Stack>
+            </Box>
+            <Divider sx={{ mt: 5, mb: 5 }} />
+            <Box component="form" onSubmit={handleSubmit}>
+                <Grid container spacing={4}>
+                    <Grid item xs={12}>
+                        <Box>
+                            <Typography variant="subtitle2" component="label" sx={{ color: gray700, marginBottom: "0.375rem" }}>
+                                Email
+                            </Typography>
+                            <TextField
+                                fullWidth
+                                type="email"
+                                variant="outlined"
+                                value={formData.email}
+                                onChange={(e) => handleInputChange("email", e.target.value)}
+                                disabled
+                                size="small"
+                            />
+                            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: "flex", alignItems: "center", fontSize: "0.875rem", color: gray600 }}>
+                                Email address can&apos;t be changed from the interface. Please contact us to make this change.
+                                <Link
+                                    href="mailto:support@interlex.org"
+                                    underline="none"
+                                    sx={{
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        fontSize: '0.875rem',
+                                        fontWeight: 500,
+                                        color: brand700,
+                                        ml: 0.5
+                                    }}
+                                >
+                                    Contact support
+                                    <ArrowForwardIcon fontSize="small" sx={{ ml: 0.5 }} />
+                                </Link>
+                            </Typography>
+                        </Box>
+                    </Grid>
+
+                    {showPasswordField && (
+                        <>
+                            <Grid item xs={12}>
+                                <Box>
+                                    <Typography variant="subtitle2" component="label" sx={{ color: gray700, marginBottom: "0.375rem" }}>
+                                        Current Password
+                                    </Typography>
+                                    <PasswordField
+                                        name="currentPassword"
+                                        value={formData.currentPassword}
+                                        handleChange={(e) => handleInputChange("currentPassword", e.target.value)}
+                                        placeholder="Enter your current password"
+                                    />
+                                </Box>
+                            </Grid>
+
+                            <Grid item xs={12} md={6}>
+                                <Box>
+                                    <Typography variant="subtitle2" component="label" sx={{ color: gray700, marginBottom: "0.375rem" }}>
+                                        Enter New Password
+                                    </Typography>
+                                    <PasswordField
+                                        name="newPassword"
+                                        value={formData.newPassword}
+                                        handleChange={(e) => handleInputChange("newPassword", e.target.value)}
+                                        placeholder="Enter new password"
+                                    />
+                                </Box>
+                            </Grid>
+
+                            <Grid item xs={12} md={6}>
+                                <Box>
+                                    <Typography variant="subtitle2" component="label" sx={{ color: gray700, marginBottom: "0.375rem" }}>
+                                        Confirm New Password
+                                    </Typography>
+                                    <PasswordField
+                                        name="confirmPassword"
+                                        value={formData.confirmPassword}
+                                        handleChange={(e) => handleInputChange("confirmPassword", e.target.value)}
+                                        placeholder="Confirm new password"
+                                    />
+                                </Box>
+                            </Grid>
+                        </>
+                    )}
+
+                    <Grid item xs={12}>
+                        <Box sx={{ pt: 2 }}>
+                            {!showPasswordField ? (
+                                <Button
+                                    type="submit"
+                                    variant="outlined"
+                                    startIcon={<ModeEditOutlineOutlinedIcon />}
+                                    onClick={() => setShowPasswordField(true)}
+                                >
+                                    Change Password
+                                </Button>
+                            ) : (<>
+                                <Button
+                                    type="submit"
+                                    variant="outlined"
+                                    startIcon={isPasswordFormValid ? <SaveOutlinedIcon /> : <ModeEditOutlineOutlinedIcon />}
+                                    onClick={() => setShowPasswordField(true)}
+                                    disabled={!isPasswordFormValid}
+                                >
+                                    Save new password
+                                </Button>
+                                <Button variant="text" onClick={() => setShowPasswordField(false)}>
+                                    Cancel
+                                </Button>
+                            </>)}
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Box>
+        </CustomizedDialog>
+    );
+};
+
+AccountSettingsDialog.propTypes = {
+    user: PropTypes.object.isRequired,
+    open: PropTypes.bool.isRequired,
+    handleClose: PropTypes.func.isRequired,
+};
+
+export default AccountSettingsDialog;
diff --git a/src/components/Dashboard/User/PasswordField.jsx b/src/components/Dashboard/User/PasswordField.jsx
new file mode 100644
index 00000000..6da60e95
--- /dev/null
+++ b/src/components/Dashboard/User/PasswordField.jsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Button, Typography } from "@mui/material";
+import ActionInput from "../../common/ActionInput";
+import { VisibilityOutlined, VisibilityOffOutlined } from "@mui/icons-material"
+import PropTypes from "prop-types";
+
+const PasswordField = ({ value, name, placeholder, handleChange, error, helperText }) => {
+    const [showPassword, setShowPassword] = useState(false)
+
+    return (
+        <div>
+            <ActionInput
+                placeholder={placeholder}
+                type={showPassword ? "text" : "password"}
+                name={name}
+                value={value}
+                onChange={handleChange}
+                size="small"
+                actionButton={
+                    <Button
+                        onClick={() => setShowPassword(!showPassword)}
+                        startIcon={showPassword ? <VisibilityOutlined /> : <VisibilityOffOutlined />}
+                    >
+                        {showPassword ? "Show" : "Hide"}
+                    </Button>
+                }
+            />
+            {helperText && (
+                <Typography variant="caption" sx={{ mt: 1, display: "flex", alignItems: "center", fontSize: "0.875rem" }}>
+                    {helperText}
+                </Typography>
+            )}
+            {error && <Typography variant="body2" sx={{ color: "#F04438", marginTop: "0.375rem" }}>{`${error.charAt(0).toUpperCase() + error.slice(1)}`}</Typography>}
+        </div>
+    )
+}
+
+PasswordField.propTypes = {
+    placeholder: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    error: PropTypes.bool,
+    helperText: PropTypes.string,
+    handleChange: PropTypes.func.isRequired
+};
+
+PasswordField.defaultProps = {
+    placeholder: "",
+};
+
+
+export default PasswordField;
\ No newline at end of file
diff --git a/src/components/Dashboard/User/index.jsx b/src/components/Dashboard/User/index.jsx
index 721e41a6..fb52c178 100644
--- a/src/components/Dashboard/User/index.jsx
+++ b/src/components/Dashboard/User/index.jsx
@@ -1,10 +1,12 @@
-import {Box, Button, Chip, Grid, Stack, Typography} from "@mui/material";
+import { useState } from "react";
+import { Box, Button, Chip, Grid, Stack, Typography } from "@mui/material";
 import { vars } from "../../../theme/variables";
 import CustomBreadcrumbs from "../../common/CustomBreadcrumbs";
 import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
 import { SettingsOutlined } from "@mui/icons-material";
-import {GlobalDataContext} from "../../../contexts/DataContext";
+import { GlobalDataContext } from "../../../contexts/DataContext";
 import { useContext } from "react";
+import AccountSettingsDialog from "./AccountSettingsDialog";
 
 const { gray25, gray600, gray800, gray500 } = vars;
 
@@ -14,7 +16,8 @@ const breadcrumbItems = [
 ];
 
 const User = () => {
-  const {user} = useContext(GlobalDataContext)
+  const { user } = useContext(GlobalDataContext)
+  const [open, setOpen] = useState(false);
 
   return (
     <Box sx={{
@@ -33,6 +36,7 @@ const User = () => {
         <Button
           startIcon={<SettingsOutlined />}
           variant='outlined'
+          onClick={() => setOpen(true)}
         >
           Account settings
         </Button>
@@ -69,6 +73,7 @@ const User = () => {
           </Stack>
         </Grid>
       </Grid>
+      <AccountSettingsDialog user={user} open={open} handleClose={() => setOpen(false)} />
     </Box>
   );
 };
diff --git a/src/components/SingleOrganization/CreateForkDialog.jsx b/src/components/SingleOrganization/CreateForkDialog.jsx
index d2227bc5..5f2120b8 100644
--- a/src/components/SingleOrganization/CreateForkDialog.jsx
+++ b/src/components/SingleOrganization/CreateForkDialog.jsx
@@ -103,7 +103,7 @@ const CreateForkDialog = ({ open, handleClose, onSubmit }) => {
         >
             <Grid container spacing={8} flexDirection="column">
                 <Grid item xs={12} lg={6}>
-                    <Typography variant="h6" sx={{ color: gray800, fontSize: "1.125rem", fontWeight: 600, marginBottom: "2rem" }}>Add a fork</Typography>
+                    <Typography variant="h6" sx={{ color: gray800, marginBottom: "2rem" }}>Add a fork</Typography>
                     <Stack direction="column" mb={1}>
                         <CustomAutocompleteBox
                             label="Select term"
@@ -117,7 +117,7 @@ const CreateForkDialog = ({ open, handleClose, onSubmit }) => {
                     </Stack>
                 </Grid>
                 <Grid item xs={12} lg={6}>
-                    <Typography variant="h6" sx={{ color: gray800, fontSize: "1.125rem", fontWeight: 600, marginBottom: "2rem" }}>To the organization</Typography>
+                    <Typography variant="h6" sx={{ color: gray800, marginBottom: "2rem" }}>To the organization</Typography>
                     <Box display="flex" alignItems="flex-end" justifyContent="space-between">
                         <Stack direction="column">
                             <CustomSelectBox
diff --git a/src/components/common/ActionInput.jsx b/src/components/common/ActionInput.jsx
new file mode 100644
index 00000000..56169187
--- /dev/null
+++ b/src/components/common/ActionInput.jsx
@@ -0,0 +1,88 @@
+import Paper from '@mui/material/Paper';
+import InputBase from '@mui/material/InputBase';
+import IconButton from '@mui/material/IconButton';
+import PropTypes from "prop-types";
+import { vars } from '../../theme/variables';
+
+const { gray300, brand600, error300, inputBoxShadow, inputErrorBoxShadow } = vars;
+
+const ActionInput = ({ name, value, onChange, error, actionButton, placeholder, type, size, inputIcon }) => {
+    return (
+        <Paper
+            component="div"
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                borderRadius: "0.5rem",
+                boxShadow: inputBoxShadow,
+                maxHeight: size === 'small' ? "2.5rem" : "3rem",
+                height: size === 'small' ? "2.5rem" : "3rem",
+                '& .MuiButton-root': {
+                    border: `1px solid ${gray300}`,
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0,
+                    height: "100%",
+                    borderLeftColor: "transparent"
+                },
+                '& .MuiButton-startIcon': {
+                    marginLeft: 0
+                }
+            }}
+        >
+            <InputBase
+                sx={{
+                    flex: 1,
+                    paddingY: "0.625rem",
+                    paddingLeft: "0.875rem",
+                    paddingRight: 0,
+                    borderRadius: "0.5rem",
+                    height: "100%",
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                    border: "1px solid",
+                    borderColor: gray300,
+                    '&.Mui-focused': {
+                        borderColor: brand600,
+                        borderWidth: "2px"
+                    },
+                    '&.MuiInputBase-colorError': {
+                        borderColor: error300,
+                        '&.Mui-focused': {
+                            boxShadow: inputErrorBoxShadow
+                        }
+                    }
+                }}
+                type={type}
+                value={value}
+                onChange={onChange}
+                name={name}
+                placeholder={placeholder}
+                color={error ? 'error' : 'info'}
+                inputProps={{ 'aria-label': name }}
+            />
+            {inputIcon && (<IconButton type="button" sx={{ py: '0.625rem', px: "0.875rem" }} aria-label="search">
+                {inputIcon}
+            </IconButton>)}
+            {actionButton}
+        </Paper>
+    );
+}
+
+ActionInput.propTypes = {
+    placeholder: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    error: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    type: PropTypes.string,
+    size: PropTypes.string,
+    actionButton: PropTypes.node,
+    inputIcon: PropTypes.element
+};
+
+ActionInput.defaultProps = {
+    placeholder: "",
+};
+
+
+export default ActionInput
\ No newline at end of file
diff --git a/src/components/common/CustomizedDialog.jsx b/src/components/common/CustomizedDialog.jsx
index ded95122..41f9d946 100644
--- a/src/components/common/CustomizedDialog.jsx
+++ b/src/components/common/CustomizedDialog.jsx
@@ -19,6 +19,7 @@ const CustomizedDialog = ({
   title,
   open,
   handleClose,
+  fullScreen = true,
   HeaderRightSideContent,
   sx,
 }) => {
@@ -27,7 +28,7 @@ const CustomizedDialog = ({
       onClose={handleClose}
       aria-labelledby="customized-dialog-title"
       open={open}
-      fullScreen
+      fullScreen={fullScreen}
       TransitionComponent={Transition}
       sx={sx}
     >
@@ -85,6 +86,7 @@ CustomizedDialog.propTypes = {
   title: PropTypes.string.isRequired,
   open: PropTypes.bool.isRequired,
   handleClose: PropTypes.func.isRequired,
+  fullScreen: PropTypes.bool,
   HeaderRightSideContent: PropTypes.node,
   sx: PropTypes.object,
 };
diff --git a/src/config.js b/src/config.js
index d280e79f..1e92e581 100644
--- a/src/config.js
+++ b/src/config.js
@@ -35,6 +35,7 @@ export const API_CONFIG = {
         API_RETRIEVE_TOKEN: "/priv/api-tokens",
         GET_ORGANIZATIONS: "/priv/role-other",
         LOGOUT: "/priv/logout",
+        USER_RECOVER: "/u/ops/user-recover"
     },
     SESSION_DATA: {
         SETTINGS: "settings",
diff --git a/src/theme/index.jsx b/src/theme/index.jsx
index b166478a..7d5fb139 100644
--- a/src/theme/index.jsx
+++ b/src/theme/index.jsx
@@ -113,6 +113,21 @@ const theme = createTheme({
 				}
             `,
 		},
+		MuiTypography: {
+			styleOverrides: {
+				h6: {
+					fontSize: '1.125rem',
+					fontWeight: 600
+				}
+			}
+		},
+		MuiDivider: {
+			styleOverrides: {
+				root: {
+					borderColor: gray200
+				}
+			}
+		},
 		MuiRichTreeView: {
 			styleOverrides: {
 				backgroundColor: "red",
@@ -197,6 +212,7 @@ const theme = createTheme({
 		MuiOutlinedInput: {
 			styleOverrides: {
 				root: {
+					borderRadius: "0.5rem",
 					"& .MuiOutlinedInput-notchedOutline": {
 						borderColor: gray200,
 					},
@@ -221,6 +237,14 @@ const theme = createTheme({
 							color: error500
 						}
 					},
+					'&.Mui-disabled': {
+						background: gray50,
+						WebkitTextFillColor: `${gray500} !important`
+					}
+				},
+				sizeSmall: {
+					padding: '0.5rem 0.75rem',
+					'& input': { padding: 0 }
 				}
 			},
 		},
@@ -619,6 +643,9 @@ const theme = createTheme({
 					height: "1.25rem",
 					fontSize: "1.25rem",
 				},
+				fontSizeLarge: {
+					fontSize: '2rem'
+				}
 			},
 		},
 		MuiAccordion: {
@@ -1037,7 +1064,7 @@ const theme = createTheme({
 					},
 				},
 			},
-		},
+		}
 	},
 });
 
diff --git a/src/theme/variables.js b/src/theme/variables.js
index 648a1927..40a108e5 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -73,5 +73,7 @@ export const vars = {
     success900: '#074D31',
     success950: '#053321',
     paperShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
-    errorInputBoxShadow: '0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24)'
+    errorInputBoxShadow: '0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24)',
+    inputBoxShadow: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+    inputErrorBoxShadow: '0px 0px 0px 4px rgba(240, 68, 56, 0.24)'
 }
\ No newline at end of file