diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 71fbb6659..838981dae 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -731,6 +731,10 @@
     "dateLastLogin": ""
   },
   "xpack": {
+    "Vault": {
+      "Vault": "密码匣子",
+      "Create": "创建"
+    },
     "Basic": "基本",
     "Other": "其他",
     "Admin": "管理员",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 1bbd92ef4..1125967d0 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -724,6 +724,10 @@
     "ResetAndDownloadSSHKey": "Reset and download SSH Key"
   },
   "xpack": {
+    "Vault": {
+      "Vault": "Vault",
+      "Create": "Create"
+    },
     "Admin": "Admin",
     "AssetCount": "Asset count",
     "Auditor": "Auditor",
diff --git a/src/layout/components/GenericTreeListPage/index.vue b/src/layout/components/GenericTreeListPage/index.vue
index 4674f5403..a917eb055 100644
--- a/src/layout/components/GenericTreeListPage/index.vue
+++ b/src/layout/components/GenericTreeListPage/index.vue
@@ -1,7 +1,7 @@
 <template>
   <Page>
     <el-alert v-if="helpMessage" type="success"> {{ helpMessage }} </el-alert>
-    <TreeTable :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
+    <TreeTable ref="TreeTable" :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
   </Page>
 </template>
 
diff --git a/src/views/xpack/Vault/VaultCreate.vue b/src/views/xpack/Vault/VaultCreate.vue
new file mode 100644
index 000000000..793fedfbd
--- /dev/null
+++ b/src/views/xpack/Vault/VaultCreate.vue
@@ -0,0 +1,60 @@
+<template>
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
+</template>
+
+<script>
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+import Uploadkey from '@/components/UploadKey'
+
+export default {
+  name: 'AdminUserCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      url: '/api/v1/assets/asset-users/',
+      initial: {
+
+      },
+      fields: [
+        ['', ['asset', 'username', 'password', 'private_key', 'comment']]
+      ],
+      fieldsMeta: {
+        asset: {
+          label: this.$t('perms.Asset'),
+          el: {
+            multiple: false,
+            ajax: {
+              url: '/api/v1/assets/assets/',
+              transformOption: (item) => {
+                return { label: `${item.hostname}(${item.ip})`, value: item.id }
+              }
+            }
+          }
+        },
+        name: {
+          el: {
+            placeholder: this.$t('common.Name')
+          }
+        },
+        username: {
+          el: {
+            placeholder: this.$t('common.Username')
+          }
+        },
+        password: {
+          helpText: this.$t('common.passwordOrPassphrase')
+        },
+        private_key: {
+          component: Uploadkey
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/xpack/Vault/VaultList.vue b/src/views/xpack/Vault/VaultList.vue
new file mode 100644
index 000000000..339d9a7fa
--- /dev/null
+++ b/src/views/xpack/Vault/VaultList.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <GenericTreeListPage ref="TreeTablePage" :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
+    <Dialog width="50" :title="this.$t('assets.UpdateAssetUserToken')" :visible.sync="showDialog" @confirm="handleConfirm()" @cancel="handleCancel()">
+      <el-form label-position="right" label-width="80px" :model="dialogInfo">
+        <el-form-item :label="this.$t('assets.Hostname')">
+          <el-input v-model="dialogInfo.hostname" disabled />
+        </el-form-item>
+        <el-form-item :label="this.$t('assets.Username')">
+          <el-input v-model="dialogInfo.username" disabled />
+        </el-form-item>
+        <el-form-item :label="this.$t('assets.Password')">
+          <el-input v-model="dialogInfo.password" type="password" />
+        </el-form-item>
+        <el-form-item :label="this.$t('assets.sshkey')">
+          <input type="file" @change="Onchange">
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
+import { ActionsFormatter, DateFormatter } from '@/components/ListTable/formatters'
+import Dialog from '@/components/Dialog'
+
+export default {
+  name: 'Vault',
+  components: {
+    GenericTreeListPage,
+    Dialog
+  },
+  data() {
+    return {
+      showDialog: false,
+      dialogInfo: {
+        asset: '',
+        username: '',
+        hostname: '',
+        password: '',
+        key: ''
+      },
+      treeSetting: {
+        showMenu: false,
+        showRefresh: false,
+        showAssets: true,
+        url: '/api/v1/assets/asset-users/',
+        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
+      },
+      headerActions: {
+        hasLeftActions: true,
+        hasRightActions: true,
+        hasExport: true,
+        hasImport: true,
+        hasRefresh: true,
+        hasSearch: true,
+        hasBulkDelete: false,
+        hasCreate: true
+      },
+      tableConfig: {
+        url: `/api/v1/assets/asset-users/?latest=1`,
+        columns: [
+          {
+            prop: 'hostname',
+            label: this.$t('assets.Hostname')
+          },
+          {
+            prop: 'ip',
+            label: this.$t('assets.ip')
+          },
+          {
+            prop: 'username',
+            label: this.$t('assets.Username')
+          },
+          {
+            prop: 'version',
+            label: this.$t('assets.Version')
+          },
+          {
+            prop: 'date_created',
+            label: this.$t('assets.date_joined'),
+            formatter: DateFormatter
+          },
+          {
+            prop: 'id',
+            align: 'center',
+            label: this.$t('assets.Action'),
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: false, // can set function(row, value)
+              canUpdate: false, // can set function(row, value)
+              hasDelete: false, // can set function(row, value)
+              canDelete: false,
+              extraActions: [
+                {
+                  name: 'delete',
+                  title: this.$t('common.Delete'),
+                  type: 'primary',
+                  callback: (val) => {
+                    this.$axios.delete(`/api/v1/assets/asset-users/${val.cellValue}/`).then(
+                      this.$refs.TreeTablePage.$refs.TreeTable.$refs.ListTable.reloadTable()
+                    )
+                  }
+                },
+                {
+                  name: this.$t('common.Test'),
+                  title: this.$t('common.Test'),
+                  callback: (val) => {
+                    console.log(val.cellValue)
+                    this.$axios.post(
+                      `api/v1/assets/asset-users/tasks/?id=${val.cellValue}`,
+                      { action: 'test' }
+                    ).then(res => {
+                      window.open(`/core/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
+                    })
+                  }
+                },
+                {
+                  name: this.$t('common.Update'),
+                  title: this.$t('common.Update'),
+                  callback: function(val) {
+                    console.log(val)
+                    this.showDialog = true
+                    this.dialogInfo.asset = val.row.asset
+                    this.dialogInfo.hostname = val.row.hostname
+                    this.dialogInfo.username = val.row.username
+                  }.bind(this)
+                },
+                {
+                  name: 'Push',
+                  title: this.$t('common.Push'),
+                  callback: function(val) {
+                    console.log('Push')
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.dialogInfo = {
+        asset: '',
+        username: '',
+        hostname: '',
+        password: '',
+        key: ''
+      }
+      this.showDialog = false
+    },
+    Onchange(e) {
+      const vm = this
+      // TODO 校验文件类型
+      const reader = new FileReader()
+      reader.onload = function() {
+        vm.dialogInfo.key = this.result
+      }
+      reader.readAsText(
+        e.target.files[0]
+      )
+    },
+    handleConfirm() {
+      const data = {
+        asset: this.dialogInfo.asset,
+        username: this.dialogInfo.username
+      }
+      if (this.dialogInfo.password !== '') {
+        data.password = this.dialogInfo.password
+      }
+      if (this.dialogInfo.key !== '') {
+        data.key = this.dialogInfo.key
+      }
+      this.$axios.post(
+        `/api/v1/assets/asset-users/`,
+        data
+      ).then(res => {
+        this.$refs.TreeTablePage.$refs.TreeTable.$refs.ListTable.reloadTable()
+        this.$message.success(this.$t('common.updateSuccessMsg'))
+      }).catch(err => {
+        this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
+      })
+      this.dialogInfo = {
+        asset: '',
+        username: '',
+        hostname: '',
+        password: '',
+        key: ''
+      }
+      this.showDialog = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/xpack/Vault/index.vue b/src/views/xpack/Vault/index.vue
deleted file mode 100644
index 4b15380b0..000000000
--- a/src/views/xpack/Vault/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <h2>hello</h2>
-</template>
-
-<script>
-export default {
-  name: 'Vault'
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/xpack/router.js b/src/views/xpack/router.js
index d2c6dea54..bdbe3f911 100644
--- a/src/views/xpack/router.js
+++ b/src/views/xpack/router.js
@@ -182,7 +182,26 @@ export default {
           meta: { title: i18n.t('xpack.Cloud.SyncInstanceTaskUpdate') }
         }
       ]
+    },
+    {
+      path: 'vault',
+      component: empty,
+      meta: { title: i18n.t('xpack.Vault.Vault'), activeMenu: '/xpack/vault/vault' },
+      children: [
+        {
+          path: 'vault',
+          component: () => import('@/views/xpack/Vault/VaultList.vue'),
+          name: 'VaultList',
+          meta: { title: i18n.t('xpack.Vault.Vault'), activeMenu: '/xpack/vault/vault' }
+        },
+        {
+          path: 'vault/create',
+          component: () => import('@/views/xpack/Vault/VaultCreate'),
+          name: 'VaultCreate',
+          meta: { title: i18n.t('xpack.Vault.Create'), activeMenu: '/xpack/vault/vault' },
+          hidden: true
+        }
+      ]
     }
-
   ]
 }