diff --git a/frontend/src/api/user/editUser.ts b/frontend/src/api/user/editUser.ts
index 88f7c40a25..a1550fab4a 100644
--- a/frontend/src/api/user/editUser.ts
+++ b/frontend/src/api/user/editUser.ts
@@ -10,6 +10,7 @@ const editUser = async (
 	try {
 		const response = await axios.put(`/user/${props.userId}`, {
 			Name: props.name,
+			Role: props.role,
 		});
 
 		return {
diff --git a/frontend/src/container/MySettings/UserInfo/index.tsx b/frontend/src/container/MySettings/UserInfo/index.tsx
index 0b9eb3bec4..acc5458a8b 100644
--- a/frontend/src/container/MySettings/UserInfo/index.tsx
+++ b/frontend/src/container/MySettings/UserInfo/index.tsx
@@ -1,7 +1,6 @@
 import '../MySettings.styles.scss';
 import './UserInfo.styles.scss';
-
-import { Button, Card, Flex, Input, Space, Typography } from 'antd';
+import { Button, Card, Flex, Input, Space, Select, Typography } from 'antd';
 import editUser from 'api/user/editUser';
 import { useNotifications } from 'hooks/useNotifications';
 import { PencilIcon } from 'lucide-react';
@@ -15,15 +14,18 @@ import { UPDATE_USER } from 'types/actions/app';
 import AppReducer from 'types/reducer/app';
 
 import { NameInput } from '../styles';
+import { ROLES, USER_ROLES } from 'types/roles';
+import { Logout } from 'api/utils';
 
 function UserInfo(): JSX.Element {
-	const { user, role, org, userFlags } = useSelector<AppState, AppReducer>(
+	const { user, org, role, userFlags } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 	const { t } = useTranslation();
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
 	const [changedName, setChangedName] = useState<string>(user?.name || '');
+	const [changedRole, setChangedRole] = useState<ROLES>(role || 'ADMIN');
 	const [loading, setLoading] = useState<boolean>(false);
 
 	const { notifications } = useNotifications();
@@ -32,12 +34,17 @@ function UserInfo(): JSX.Element {
 		return <div />;
 	}
 
+	const updateRole = (value: ROLES): void => {
+		setChangedRole(value);
+	};
+
 	const onClickUpdateHandler = async (): Promise<void> => {
 		try {
 			setLoading(true);
 			const { statusCode } = await editUser({
 				name: changedName,
 				userId: user.userId,
+				role: changedRole,
 			});
 
 			if (statusCode === 200) {
@@ -51,12 +58,19 @@ function UserInfo(): JSX.Element {
 					payload: {
 						...user,
 						name: changedName,
-						ROLE: role || 'ADMIN',
+						ROLE: changedRole || 'ADMIN',
 						orgId: org[0].id,
 						orgName: org[0].name,
 						userFlags: userFlags || {},
 					},
 				});
+
+				if (changedRole !== role) {
+					notifications.info({
+						message: t('Please login again', { ns: 'common' }),
+					});
+					Logout();
+				}
 			} else {
 				notifications.error({
 					message: t('something_went_wrong', {
@@ -130,11 +144,15 @@ function UserInfo(): JSX.Element {
 						{' '}
 						Role{' '}
 					</Typography>
-					<Input
+					<Select
 						className="userInfo-value"
-						value={role || ''}
-						disabled
 						data-testid="role-textbox"
+						value={changedRole}
+						onChange={updateRole}
+						options={Object.entries(USER_ROLES).map(([role]) => ({
+							label: role,
+							value: role,
+						}))}
 					/>
 				</Space>
 			</Space>
diff --git a/frontend/src/types/api/user/editUser.ts b/frontend/src/types/api/user/editUser.ts
index a080214158..f6a6030bf6 100644
--- a/frontend/src/types/api/user/editUser.ts
+++ b/frontend/src/types/api/user/editUser.ts
@@ -7,4 +7,5 @@ export type PayloadProps = Payload;
 export interface Props {
 	userId: User['userId'];
 	name: User['name'];
+	role: User['role'];
 }
diff --git a/frontend/src/types/reducer/app.ts b/frontend/src/types/reducer/app.ts
index cfc431ab03..6d97e1a5b3 100644
--- a/frontend/src/types/reducer/app.ts
+++ b/frontend/src/types/reducer/app.ts
@@ -12,6 +12,7 @@ export interface User {
 	userId: string;
 	email: UserPayload['email'];
 	name: UserPayload['name'];
+	role: UserPayload['role'];
 	profilePictureURL: UserPayload['profilePictureURL'];
 }