diff --git a/apps/api/src/user/dto/updateUserById.dto.ts b/apps/api/src/user/dto/updateUserById.dto.ts
new file mode 100644
index 0000000..3462594
--- /dev/null
+++ b/apps/api/src/user/dto/updateUserById.dto.ts
@@ -0,0 +1,7 @@
+import { UserRole } from '@prisma/client';
+
+export class UpdateUserByIdDto {
+  name: string;
+  email: string;
+  userRole: UserRole;
+}
diff --git a/apps/api/src/user/interface/updateUserById.interface.ts b/apps/api/src/user/interface/updateUserById.interface.ts
new file mode 100644
index 0000000..a1ce0f6
--- /dev/null
+++ b/apps/api/src/user/interface/updateUserById.interface.ts
@@ -0,0 +1,15 @@
+import { UserRole } from '@prisma/client';
+
+export interface UpdateUserByIdRes {
+  message: string;
+  user: UserRes;
+}
+
+export interface UserRes {
+  id: string;
+  name: string;
+  email: string;
+  created_at: Date;
+  updated_at: Date;
+  userRoles: UserRole[];
+}
diff --git a/apps/api/src/user/user.controller.ts b/apps/api/src/user/user.controller.ts
index 0f7f1cd..d31a0ba 100644
--- a/apps/api/src/user/user.controller.ts
+++ b/apps/api/src/user/user.controller.ts
@@ -5,11 +5,13 @@ import jwt from 'jsonwebtoken';
 import { SignupDto } from './dto/signup.dto';
 import { LoginDto } from './dto/login.dto';
 import { ChangePasswordDto } from './dto/changePassword.dto';
+import { UpdateUserByIdDto } from './dto/updateUserById.dto';
 import { SignupRes } from './interface/signup.interface';
 import { LoginRes } from './interface/login.interface';
 import { GetNormalUsersRes } from './interface/getNormalUsers.interface';
 import { GetUserByIdRes } from './interface/getUserById.interface';
 import { ChangePasswordRes } from './interface/changePassword.interface';
+import { UpdateUserByIdRes } from './interface/updateUserById.interface';
 
 @Controller('users')
 export class UserController {
@@ -98,6 +100,33 @@ export class UserController {
     return response;
   }
 
+  @Patch('/:id')
+  async updateUserById(
+    @Param('id') id: string,
+    @Body() updateUserByIdDto: UpdateUserByIdDto
+  ): Promise<UpdateUserByIdRes> {
+    let response: UpdateUserByIdRes;
+
+    const name = updateUserByIdDto.name;
+    const email = updateUserByIdDto.email;
+    const userRole = updateUserByIdDto.userRole;
+
+    const user = await this.userService.updateUserById(
+      id,
+      name,
+      email,
+      userRole
+    );
+    if (user) {
+      response = {
+        message: 'update user by id',
+        user: user,
+      };
+    }
+
+    return response;
+  }
+
   @Patch('/:id/changePassword')
   async changePassword(
     @Param('id') id: string,
diff --git a/apps/api/src/user/user.repository.ts b/apps/api/src/user/user.repository.ts
index c5f06b6..bbd81cf 100644
--- a/apps/api/src/user/user.repository.ts
+++ b/apps/api/src/user/user.repository.ts
@@ -57,6 +57,25 @@ export class UserRepository {
     return user;
   }
 
+  async updateUserById(
+    id: string,
+    name: string,
+    email: string,
+    userRole: UserRole
+  ) {
+    const user = await this.prisma.user.update({
+      where: {
+        id: id,
+      },
+      data: {
+        name: name,
+        email: email,
+        userRoles: [userRole],
+      },
+    });
+    return user;
+  }
+
   async changePassword(id: string, password: string) {
     const salt = bcrypt.genSaltSync(10);
 
diff --git a/apps/api/src/user/user.service.ts b/apps/api/src/user/user.service.ts
index e8037fc..7572af4 100644
--- a/apps/api/src/user/user.service.ts
+++ b/apps/api/src/user/user.service.ts
@@ -95,6 +95,34 @@ export class UserService {
     return user;
   }
 
+  async updateUserById(
+    id: string,
+    name: string,
+    email: string,
+    userRole: UserRole
+  ) {
+    let user = null;
+
+    const userFromDB = await this.userRepository.updateUserById(
+      id,
+      name,
+      email,
+      userRole
+    );
+    if (userFromDB) {
+      user = {
+        id: userFromDB.id,
+        name: userFromDB.name,
+        email: userFromDB.email,
+        created_at: userFromDB.created_at,
+        updated_at: userFromDB.updated_at,
+        userRoles: userFromDB.userRoles,
+      };
+    }
+
+    return user;
+  }
+
   async changePassword(id: string, password: string) {
     let user = null;
 
diff --git a/apps/web/src/components/profile/Profile.tsx b/apps/web/src/components/profile/Profile.tsx
index 794b61f..66d1565 100644
--- a/apps/web/src/components/profile/Profile.tsx
+++ b/apps/web/src/components/profile/Profile.tsx
@@ -10,15 +10,19 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import { User, UserRole } from '@prisma/client';
-import * as userService from '../../services/userService';
 import CustomBreadcrumbs from '../customBreadcrumbs/CustomBreadcrumbs';
+import CustomSnackBar from '../customSnackBar/CustomSnackBar';
+import * as userService from '../../services/userService';
 
 function Profile() {
   const [user, setUser] = useState<User>();
 
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
-  const [userRoles, setUserRoles] = useState<UserRole>(UserRole.NORMAL_USER);
+  const [userRole, setUserRole] = useState<UserRole>(UserRole.NORMAL_USER);
+
+  const [snackbarText, setSnackbarText] = useState('');
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
 
   useEffect(() => {
     getUserById();
@@ -37,7 +41,7 @@ function Profile() {
           setUser(responseData.user);
           setName(responseData.user.name);
           setEmail(responseData.user.email);
-          setUserRoles(responseData.user.userRoles);
+          setUserRole(responseData.user.userRoles[0]);
         }
       }
     }
@@ -56,11 +60,29 @@ function Profile() {
   };
 
   const handleUserRolesChange = (event: SelectChangeEvent) => {
-    setUserRoles(event.target.value as UserRole);
+    setUserRole(event.target.value as UserRole);
   };
 
-  const handleUpdateUserClick = () => {
-    console.log('update user api');
+  const handleUpdateUserClick = async () => {
+    const token = localStorage.getItem('token');
+    if (token && user && name && email && userRole) {
+      const response = await userService.updateUserById(
+        token,
+        user.id,
+        name,
+        email,
+        userRole
+      );
+      console.log('response = ', response);
+
+      if (response) {
+        const responseData = response.data;
+        if (responseData) {
+          setSnackbarOpen(true);
+          setSnackbarText('Update user by id');
+        }
+      }
+    }
   };
 
   const renderProfileView = () => {
@@ -107,7 +129,7 @@ function Profile() {
                 <Select
                   labelId="demo-simple-select-helper-label"
                   id="demo-simple-select-helper"
-                  value={userRoles}
+                  value={userRole}
                   label="User Roles"
                   onChange={handleUserRolesChange}
                 >
@@ -142,6 +164,12 @@ function Profile() {
       </div>
 
       {renderProfileView()}
+
+      <CustomSnackBar
+        type={snackbarText}
+        open={snackbarOpen}
+        setOpen={setSnackbarOpen}
+      />
     </>
   );
 }
diff --git a/apps/web/src/components/signup/signup.tsx b/apps/web/src/components/signup/signup.tsx
index 7b71878..dd5b7c3 100644
--- a/apps/web/src/components/signup/signup.tsx
+++ b/apps/web/src/components/signup/signup.tsx
@@ -42,10 +42,10 @@ function Signup() {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
 
-  const [userRoles, setUserRoles] = useState<UserRole>(UserRole.NORMAL_USER);
+  const [userRole, setUserRole] = useState<UserRole>(UserRole.NORMAL_USER);
 
   const handleUserRolesChange = (event: SelectChangeEvent) => {
-    setUserRoles(event.target.value as UserRole);
+    setUserRole(event.target.value as UserRole);
   };
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -56,7 +56,7 @@ function Signup() {
       const name = data.get('name');
       const email = data.get('email');
       const password = data.get('password');
-      if (name && email && password && userRoles) {
+      if (name && email && password && userRole) {
         const nameStr = name as string;
         const emailStr = email as string;
         const passwordStr = password as string;
@@ -64,7 +64,7 @@ function Signup() {
           nameStr,
           emailStr,
           passwordStr,
-          [userRoles]
+          [userRole]
         );
         console.log('response = ', response);
 
@@ -161,7 +161,7 @@ function Signup() {
                   <Select
                     labelId="demo-simple-select-helper-label"
                     id="demo-simple-select-helper"
-                    value={userRoles}
+                    value={userRole}
                     label="User Roles"
                     onChange={handleUserRolesChange}
                   >
diff --git a/apps/web/src/services/userService.ts b/apps/web/src/services/userService.ts
index b5a5b3f..4d9066c 100644
--- a/apps/web/src/services/userService.ts
+++ b/apps/web/src/services/userService.ts
@@ -49,6 +49,26 @@ export const getUserById = async (token: string, id: string) => {
   return response;
 };
 
+export const updateUserById = async (
+  token: string,
+  id: string,
+  name: string,
+  email: string,
+  userRole: UserRole
+) => {
+  const data = {
+    name: name,
+    email: email,
+    userRole: userRole,
+  };
+  const response = await axios.patch(`${rootUrl}/users/${id}`, data, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return response;
+};
+
 export const changePassword = async (
   token: string,
   id: string,