diff --git a/backend/src/main/java/io/metersphere/controller/UserController.java b/backend/src/main/java/io/metersphere/controller/UserController.java
index 55324f028e0867c3cf06af154d2d5672301792d2..e6314d2788e9a1ca6ad54a4bf9b43727936cf20e 100644
--- a/backend/src/main/java/io/metersphere/controller/UserController.java
+++ b/backend/src/main/java/io/metersphere/controller/UserController.java
@@ -17,15 +17,14 @@ import io.metersphere.controller.request.member.SetAdminRequest;
 import io.metersphere.controller.request.organization.AddOrgMemberRequest;
 import io.metersphere.controller.request.organization.QueryOrgMemberRequest;
 import io.metersphere.dto.UserDTO;
+import io.metersphere.dto.UserRoleDTO;
 import io.metersphere.service.OrganizationService;
 import io.metersphere.service.UserService;
 import io.metersphere.service.WorkspaceService;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.shiro.authz.annotation.Logical;
 import org.apache.shiro.authz.annotation.RequiresRoles;
-import org.springframework.beans.BeanUtils;
 import org.springframework.web.bind.annotation.*;
-
 import javax.annotation.Resource;
 import java.util.List;
 
@@ -54,6 +53,12 @@ public class UserController {
         return PageUtils.setPageInfo(page, userService.getUserListWithRequest(request));
     }
 
+    @GetMapping("/special/user/role/{userId}")
+    @RequiresRoles(RoleConstants.ADMIN)
+    public UserRoleDTO getUserRole(@PathVariable("userId") String userId) {
+        return userService.getUserRole(userId);
+    }
+
     @GetMapping("/special/delete/{userId}")
     @RequiresRoles(RoleConstants.ADMIN)
     public void deleteUser(@PathVariable(value = "userId") String userId) {
diff --git a/backend/src/main/java/io/metersphere/dto/UserRoleDTO.java b/backend/src/main/java/io/metersphere/dto/UserRoleDTO.java
new file mode 100644
index 0000000000000000000000000000000000000000..80009d51c3f239fada5b7c50368702efe74248a0
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/dto/UserRoleDTO.java
@@ -0,0 +1,18 @@
+package io.metersphere.dto;
+
+import io.metersphere.base.domain.Role;
+import io.metersphere.base.domain.UserRole;
+import lombok.Getter;
+import lombok.Setter;
+import java.util.List;
+
+@Getter
+@Setter
+public class UserRoleDTO {
+
+    private String userId;
+    private List<Role> roles;
+    private List<UserRole> userRoles;
+    private static final long serialVersionUID = 1L;
+
+}
diff --git a/backend/src/main/java/io/metersphere/service/UserService.java b/backend/src/main/java/io/metersphere/service/UserService.java
index 7ee198862ba5d6bf4e5bb80db55d1e6db0e1595f..f0c9a244169c9d8632be437e29e6e35f1b873edd 100644
--- a/backend/src/main/java/io/metersphere/service/UserService.java
+++ b/backend/src/main/java/io/metersphere/service/UserService.java
@@ -17,13 +17,13 @@ import io.metersphere.controller.request.member.SetAdminRequest;
 import io.metersphere.controller.request.organization.AddOrgMemberRequest;
 import io.metersphere.controller.request.organization.QueryOrgMemberRequest;
 import io.metersphere.dto.UserDTO;
+import io.metersphere.dto.UserRoleDTO;
 import io.metersphere.i18n.Translator;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.BeanUtils;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.CollectionUtils;
-
 import javax.annotation.Resource;
 import java.util.List;
 import java.util.UUID;
@@ -100,16 +100,24 @@ public class UserService {
         }
         UserDTO userDTO = new UserDTO();
         BeanUtils.copyProperties(user, userDTO);
+        UserRoleDTO userRole = getUserRole(userId);
+        userDTO.setUserRoles(userRole.getUserRoles());
+        userDTO.setRoles(userRole.getRoles());
+        return userDTO;
+    }
+
+    public UserRoleDTO getUserRole(String userId) {
+        UserRoleDTO userRoleDTO = new UserRoleDTO();
         //
         UserRoleExample userRoleExample = new UserRoleExample();
         userRoleExample.createCriteria().andUserIdEqualTo(userId);
         List<UserRole> userRoleList = userRoleMapper.selectByExample(userRoleExample);
 
         if (CollectionUtils.isEmpty(userRoleList)) {
-            return userDTO;
+            return userRoleDTO;
         }
         // 设置 user_role
-        userDTO.setUserRoles(userRoleList);
+        userRoleDTO.setUserRoles(userRoleList);
 
         List<String> roleIds = userRoleList.stream().map(UserRole::getRoleId).collect(Collectors.toList());
 
@@ -117,9 +125,9 @@ public class UserService {
         roleExample.createCriteria().andIdIn(roleIds);
 
         List<Role> roleList = roleMapper.selectByExample(roleExample);
-        userDTO.setRoles(roleList);
+        userRoleDTO.setRoles(roleList);
 
-        return userDTO;
+        return userRoleDTO;
     }
 
     public List<User> getUserList() {
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index aaf7ca4ca175406ed5ba5e9e93cb47f1e64c198d..56d1dc0389b47923288d2f6dac65374b5f12a718 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-loading="result.loading">
 
-     <el-card class="table-card">
+    <el-card class="table-card">
       <template v-slot:header>
         <ms-table-header :condition.sync="condition" @search="search" @create="create"
                          :create-tip="$t('user.create')" :title="$t('commons.member')"/>
@@ -9,7 +9,12 @@
 
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="id" label="ID"/>
-        <el-table-column prop="name" :label="$t('commons.username')"/>
+        <el-table-column prop="name" :label="$t('commons.username')" width="200"/>
+        <el-table-column :label="$t('commons.role')" width="120">
+          <template v-slot:default="scope">
+            <ms-roles-tag :roles="scope.row.roles"/>
+          </template>
+        </el-table-column>
         <el-table-column prop="email" :label="$t('commons.email')"/>
         <el-table-column prop="status" :label="$t('commons.status')">
           <template v-slot:default="scope">
@@ -22,7 +27,7 @@
             />
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" :label="$t('commons.create_time')" width="180">
+        <el-table-column prop="createTime" :label="$t('commons.create_time')">
           <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>
@@ -108,14 +113,14 @@
           @confirm="updateUser('updateUserForm')"/>
       </template>
     </el-dialog>
-   <!--Changing user password in system settings-->
+    <!--Changing user password in system settings-->
     <el-dialog :title="$t('member.edit_password')" :visible.sync="editPasswordVisible" width="30%" left>
       <el-form :model="ruleForm" label-position="right" label-width="100px" size="small" :rules="rule"
                ref="editPasswordForm" class="demo-ruleForm">
         <el-form-item :label="$t('member.new_password')" prop="newpassword">
           <el-input type="password" v-model="ruleForm.newpassword" autocomplete="off" show-password></el-input>
         </el-form-item>
-        <el-form-item >
+        <el-form-item>
           <el-input v-model="ruleForm.id" autocomplete="off" :disabled="true" style="display:none"/>
         </el-form-item>
       </el-form>
@@ -137,10 +142,19 @@
   import MsDialogFooter from "../../common/components/MsDialogFooter";
   import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
   import {getCurrentUser} from "../../../../common/js/utils";
+  import MsRolesTag from "../../common/components/MsRolesTag";
 
   export default {
     name: "MsUser",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsTableOperator, MsDialogFooter, MsTableOperatorButton},
+    components: {
+      MsCreateBox,
+      MsTablePagination,
+      MsTableHeader,
+      MsTableOperator,
+      MsDialogFooter,
+      MsTableOperatorButton,
+      MsRolesTag
+    },
     data() {
       return {
         queryPath: '/user/special/list',
@@ -271,9 +285,9 @@
           }
         })
       },
-      editUserPassword(editPasswordForm){
-        this.$refs[editPasswordForm].validate(valid=>{
-          if(valid){
+      editUserPassword(editPasswordForm) {
+        this.$refs[editPasswordForm].validate(valid => {
+          if (valid) {
             this.result = this.$post(this.editPasswordPath, this.ruleForm, response => {
               this.$success(this.$t('commons.modify_success'));
               this.editPasswordVisible = false;
@@ -290,6 +304,15 @@
           let data = response.data;
           this.total = data.itemCount;
           this.tableData = data.listObject;
+          let url = "/user/special/user/role";
+          for (let i = 0; i < this.tableData.length; i++) {
+            this.$get(url + '/' + this.tableData[i].id, result => {
+              let data = result.data;
+              let roles = data.roles;
+              // let userRoles = result.userRoles;
+              this.$set(this.tableData[i], "roles", roles);
+            })
+          }
         })
       },
       handleClose() {