diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 75921f479..d148d8504 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -291,10 +291,10 @@ const cn = {
     'Asset permissions': '资产授权',
     'name': '名称',
     'user': '用户',
-    'user_group': '用户组',
+    'userGroup': '用户组',
     'asset': '资产',
     'node': '节点',
-    'system_user': '系统用户',
+    'systemUser': '系统用户',
     'validity': '有效',
     'action': '动作',
     'update': '更新',
@@ -315,14 +315,14 @@ const cn = {
     'users_and_user_groups': '用户或用户组',
     'assets_and_node': '资产或节点',
     //
-    'remote_app': '远程应用',
+    'RemoteApp': '远程应用',
     'remote_app_permission_list': '远程应用授权列表',
     'remote_app_permission_detail': '远程应用授权详情',
     'create_remote_app_permission': '创建远程应用授权规则',
     'update_remote_app_permission': '更新远程应用授权规则',
     'remote_app_count': '远程应用数量',
     //
-    'database_app': '数据库应用',
+    'DatabaseaApp': '数据库应用',
     'database_app_permission_list': '数据库应用授权列表',
     'database_app_permission_detail': '数据库应用授权详情',
     'create_database_app_permission': '创建数据库应用授权规则',
diff --git a/src/router/index.js b/src/router/index.js
index d6d7f8ed3..f228e8c08 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -190,26 +190,26 @@ export const constantRoutes = [
   {
     path: '/perms/',
     component: Layout,
-    redirect: '/perms/asset-permission/',
+    redirect: '/perms/asset-permissions/',
     name: 'Perms',
     meta: { title: 'Perms', icon: 'edit' },
     children: [
       {
         path: 'asset-permissions',
         name: 'AssetPermissionList',
-        component: import('@/views/tree/index'),
+        component: () => import('@/views/perms/AssetPermissionList'),
         meta: { title: 'AssetPermission' }
       },
       {
         path: 'remote-app-permissions',
         name: 'RemoteAppPermissionList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/perms/RemoteAppPermissionList'),
         meta: { title: 'RemoteAppPermission' }
       },
       {
         path: 'database-app-permissions',
         name: 'DatabaseAppPermissionList',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/perms/DatabaseAppPermissionList'),
         meta: { title: 'DatabaseAppPermission' }
       }
     ]
diff --git a/src/views/perms/AssetPermissionList.vue b/src/views/perms/AssetPermissionList.vue
new file mode 100644
index 000000000..9f81d835e
--- /dev/null
+++ b/src/views/perms/AssetPermissionList.vue
@@ -0,0 +1,68 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import DetailFormatter from '@/components/DataTable/formatters/DetailFormatter'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      showTree: true,
+      tableConfig: {
+        url: '/api/v1/perms/asset-permissions/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('common.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'AssetPermissionDetail'
+          },
+          {
+            prop: 'users',
+            label: this.$t('perms.user')
+          },
+          {
+            prop: 'user_groups',
+            label: this.$t('perms.userGroup')
+          },
+          {
+            prop: 'assets',
+            label: this.$t('perms.asset')
+          },
+          {
+            prop: 'nodes',
+            label: this.$t('perms.node')
+          },
+          {
+            prop: 'system_users',
+            label: this.$t('perms.systemUser')
+          },
+          {
+            prop: 'is_active',
+            label: this.$t('perms.validity')
+          }
+        ],
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
+        }
+      },
+      headerActions: {
+        hasDelete: false,
+        hasUpdate: false,
+        createRoute: 'AssetPermissionCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/perms/DatabaseAppPermissionList.vue b/src/views/perms/DatabaseAppPermissionList.vue
new file mode 100644
index 000000000..8b5581ccf
--- /dev/null
+++ b/src/views/perms/DatabaseAppPermissionList.vue
@@ -0,0 +1,64 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import DetailFormatter from '@/components/DataTable/formatters/DetailFormatter'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      showTree: true,
+      tableConfig: {
+        url: '/api/v1/perms/database-app-permissions/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('perms.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'DatabaseAppPermissionDetail'
+          },
+          {
+            prop: 'users',
+            label: this.$t('perms.user')
+          },
+          {
+            prop: 'user_groups',
+            label: this.$t('perms.userGroup')
+          },
+          {
+            prop: 'database_apps',
+            label: this.$t('perms.DatabaseApp')
+          },
+          {
+            prop: 'system_users',
+            label: this.$t('perms.systemUser')
+          },
+          {
+            prop: 'is_valid',
+            label: this.$t('perms.validity')
+          }
+        ],
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
+        }
+      },
+      headerActions: {
+        hasDelete: false,
+        hasUpdate: false,
+        createRoute: 'DatabaseAppPermissionCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/perms/RemoteAppPermissionList.vue b/src/views/perms/RemoteAppPermissionList.vue
new file mode 100644
index 000000000..fe6291070
--- /dev/null
+++ b/src/views/perms/RemoteAppPermissionList.vue
@@ -0,0 +1,64 @@
+<template>
+  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+import DetailFormatter from '@/components/DataTable/formatters/DetailFormatter'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      showTree: true,
+      tableConfig: {
+        url: '/api/v1/perms/remote-app-permissions/',
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('perms.name'),
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'RemoteAppPermissionDetail'
+          },
+          {
+            prop: 'users',
+            label: this.$t('perms.user')
+          },
+          {
+            prop: 'user_groups',
+            label: this.$t('perms.userGroup')
+          },
+          {
+            prop: 'remote_apps',
+            label: this.$t('perms.RemoteApp')
+          },
+          {
+            prop: 'system_users',
+            label: this.$t('perms.systemUser')
+          },
+          {
+            prop: 'is_valid',
+            label: this.$t('perms.validity')
+          }
+        ],
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
+        }
+      },
+      headerActions: {
+        hasDelete: false,
+        hasUpdate: false,
+        createRoute: 'RemoteAppPermissionCreate'
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>