diff --git a/src/components/DetailCard/index.vue b/src/components/DetailCard/index.vue
index 82904c7be..d41b97c67 100644
--- a/src/components/DetailCard/index.vue
+++ b/src/components/DetailCard/index.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="content">
       <el-row v-for="item in items" :key="'card-' + item.key" class="item" :gutter="10">
-        <el-col :span="6"><div class="item-label"><label>{{ item.key }}</label></div></el-col>
+        <el-col :span="6"><div class="item-label" :style="{ 'text-align': align}"><label>{{ item.key }}: </label></div></el-col>
         <el-col :span="18"><div class="item-text">{{ item.value }}</div></el-col>
       </el-row>
     </div>
@@ -23,6 +23,10 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    align: {
+      type: String,
+      default: 'left'
     }
   }
 }
@@ -31,6 +35,6 @@ export default {
 <style scoped>
   .content {
     font-size: 13px;
-    line-height: 2;
+    line-height: 2.5;
   }
 </style>
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 7178f7754..f40bbc980 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -80,12 +80,17 @@ const cn = {
     'Add': '添加',
     'Auth': '认证',
     'Others': '其他',
-    'Members': '成员'
+    'Members': '成员',
+    'Username': '用户名',
+    'Email': '邮件',
+    'Role': '角色',
+    'Date expired': '失效日期'
   },
   route: {
     'dashboard': '仪表盘',
     'Users': '用户管理',
     'UserList': '用户列表',
+    'UserDetail': '用户详情',
     'UserGroupList': '用户组',
     'UserGroupDetail': '用户组详情',
     'Assets': '资产管理',
@@ -150,7 +155,7 @@ const cn = {
     'username': '用户名',
     'Username': '用户名',
     'Role': '角色',
-    'User Groups': '用户组',
+    'User groups': '用户组',
     'email': '邮箱',
     'userGroup': '用户组',
     'role': '角色',
@@ -203,26 +208,13 @@ const cn = {
     'database_app_permission': '数据库应用授权',
     'Account': '账户',
     'Authentication': '认证',
-    'Secure': '安全'
+    'Secure': '安全',
+    'Date last login': '最后登录日期',
+    'Date password updated': '更新密码日期',
+    'MFA': '多因子认证',
+    'Source': '用户来源'
   },
   // 用户组
-  usergroup: {
-    'user_group_list': '用户组列表',
-    'user_group_detail': '用户组详情',
-    'create_user_group': '创建用户组',
-    'update_user_group': '更新用户组',
-    'name': '名称',
-    'user': '用户',
-    'comment': '备注',
-    'action': '操作',
-    'update': '更新',
-    'delete': '删除',
-    'created_by': '创建者',
-    'date_created': '创建日期',
-    'asset_granted': '授权的资产',
-    'add_user': '添加用户',
-    'add': '添加'
-  },
   assets: {
     // asset
     'asset_list': '资产列表',
diff --git a/src/views/users/index.js b/src/views/users/index.js
index def99dca5..0088c7b93 100644
--- a/src/views/users/index.js
+++ b/src/views/users/index.js
@@ -20,8 +20,8 @@ export default [
     meta: { title: 'UserUpdate', activeMenu: '/users/users', action: 'update' }
   },
   {
-    path: 'users/detail/:id',
-    component: () => import('@/views/users/users/UserDetail.vue'), // Parent router-view
+    path: 'users/:id',
+    component: () => import('@/views/users/users/UserDetail/index.vue'), // Parent router-view
     name: 'UserDetail',
     hidden: true,
     meta: { title: 'UserDetail', activeMenu: '/users/users' }
diff --git a/src/views/users/users/UserDetail.vue b/src/views/users/users/UserDetail.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/views/users/users/UserDetail/UserAssetPermission.vue b/src/views/users/users/UserDetail/UserAssetPermission.vue
new file mode 100644
index 000000000..4e6f31555
--- /dev/null
+++ b/src/views/users/users/UserDetail/UserAssetPermission.vue
@@ -0,0 +1,13 @@
+<template>
+  <div />
+</template>
+
+<script>
+export default {
+  name: 'UserAssetPermission'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/users/users/UserDetail/UserInfo.vue b/src/views/users/users/UserDetail/UserInfo.vue
new file mode 100644
index 000000000..4cffb9bb2
--- /dev/null
+++ b/src/views/users/users/UserDetail/UserInfo.vue
@@ -0,0 +1,123 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :title="cardTitle" :items="detailItems" />
+    </el-col>
+    <el-col :md="10" :sm="24">
+      <RelationCard v-bind="relationConfig" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { DetailCard, RelationCard } from '@/components'
+export default {
+  name: 'UserInfo',
+  components: {
+    DetailCard,
+    RelationCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      relationConfig: {
+        icon: 'fa-user',
+        title: this.$t('users.User groups'),
+        objectsAjax: {
+          url: '/api/v1/users/groups/?fields_size=mini&order=name'
+        },
+        hasObjectsId: this.object.groups,
+        performDelete: (item) => {
+          const itemId = item.value
+          const objectId = this.object.id
+          const relationUrl = `/api/v1/users/users-groups-relations/?user=${objectId}&usergroup=${itemId}`
+          return this.$axios.delete(relationUrl)
+        },
+        performAdd: (items) => {
+          const relationUrl = `/api/v1/users/users-groups-relations/`
+          const objectId = this.object.id
+          const data = items.map(v => {
+            return {
+              usergroup: v.value,
+              user: objectId
+            }
+          })
+          return this.$axios.post(relationUrl, data)
+        }
+      },
+      cardTitle: this.$tc('Basic Info')
+    }
+  },
+  computed: {
+    detailItems() {
+      return [
+        {
+          key: this.$tc('Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$tc('Username'),
+          value: this.object.username
+        },
+        {
+          key: this.$tc('Email'),
+          value: this.object.email
+        },
+        {
+          key: this.$tc('Role'),
+          value: this.object.role_display
+        },
+        {
+          key: this.$t('users.MFA'),
+          value: this.object.mfa_level_display
+        },
+        {
+          key: this.$t('users.Source'),
+          value: this.object.source_display
+        },
+        {
+          key: this.$tc('Date expired'),
+          value: this.object.date_expired
+        },
+        {
+          key: this.$tc('Created by'),
+          value: this.object.created_by
+        },
+        {
+          key: this.$tc('Date Created'),
+          value: this.object.date_joined
+        },
+        {
+          key: this.$t('users.Date last login'),
+          value: this.object.last_login
+        },
+        {
+          key: this.$t('users.Date password updated'),
+          value: this.object.date_password_last_updated
+        },
+        {
+          key: this.$tc('Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  },
+  watch: {
+    group(iNew, iOld) {
+      this.$log.debug('Group has changed')
+      this.relationConfig.hasObjectsId = iNew.users
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/users/users/UserDetail/index.vue b/src/views/users/users/UserDetail/index.vue
new file mode 100644
index 000000000..9bd5be7dd
--- /dev/null
+++ b/src/views/users/users/UserDetail/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <GenericDetailPage :object.sync="user" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="user" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import UserAssetPermission from './UserAssetPermission'
+import UserInfo from './UserInfo'
+
+export default {
+  components: {
+    GenericDetailPage,
+    UserAssetPermission,
+    UserInfo,
+    TabPage
+  },
+  data() {
+    return {
+      user: { name: '', username: '', email: '', comment: '' },
+      config: {
+        activeMenu: 'UserInfo',
+        submenu: [
+          {
+            title: this.$tc('Basic Info'),
+            name: 'UserInfo'
+          },
+          {
+            title: this.$t('perms.Asset permissions'),
+            name: 'UserAssetPermission'
+          }
+        ],
+        actions: {
+          canDelete: true,
+          canUpdate: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleTabClick(tab) {
+      this.$log.debug('Current nav is: ', this.config.activeMenu)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/users/users/UserList.vue b/src/views/users/users/UserList.vue
index 224e214dd..2fefef6ec 100644
--- a/src/views/users/users/UserList.vue
+++ b/src/views/users/users/UserList.vue
@@ -30,7 +30,6 @@ export default {
         }
       },
       headerActions: {
-        hasCreate: false,
         extraMoreActions: [
           {
             name: 'deactiveSelected',