diff --git a/src/router/settings/index.js b/src/router/settings/index.js
index 44e737794..12f318d9f 100644
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -229,6 +229,16 @@ export default {
             permissions: ['settings.change_terminal']
           }
         },
+        {
+          path: 'hosts/:id',
+          name: 'AppletHostDetail',
+          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostDetail/index'),
+          hidden: true,
+          meta: {
+            title: i18n.t('route.AppletHostDetail'),
+            permissions: ['settings.change_terminal']
+          }
+        },
         {
           path: 'hosts/:id/update',
           name: 'AppletHostUpdate',
diff --git a/src/views/settings/Applet/AppletHosts/AppletHostDetail/Detail.vue b/src/views/settings/Applet/AppletHosts/AppletHostDetail/Detail.vue
new file mode 100644
index 000000000..4b35c6585
--- /dev/null
+++ b/src/views/settings/Applet/AppletHosts/AppletHostDetail/Detail.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <DetailCard :items="detailCardItems" />
+    </el-col>
+    <el-col :md="10" :sm="24">
+      <QuickActions type="primary" :actions="quickActions" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import DetailCard from '@/components/DetailCard'
+import QuickActions from '@/components/QuickActions'
+import { toSafeLocalDateStr } from '@/utils/common'
+import { openTaskPage } from '@/utils/jms'
+
+export default {
+  name: 'Detail',
+  components: {
+    DetailCard,
+    QuickActions
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      quickActions: [
+        {
+          title: this.$t('assets.IsActive'),
+          type: 'switcher',
+          attrs: {
+            label: this.$t('common.Test'),
+            model: this.object.is_active,
+            disabled: !vm.$hasPerm('assets.change_asset')
+          },
+          callbacks: {
+            change: function(val) {
+              this.$axios.patch(
+                `/api/v1/assets/assets/${this.object.id}/`,
+                { is_active: val }
+              ).then(res => {
+                this.$message.success(this.$t('common.updateSuccessMsg'))
+              }).catch(err => {
+                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
+              })
+            }.bind(this)
+          }
+        },
+        {
+          title: this.$t('assets.RefreshHardware'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('assets.Refresh'),
+            disabled: !vm.$hasPerm('assets.refresh_assethardwareinfo')
+          },
+          callbacks: {
+            click: function() {
+              this.$axios.post(
+                `/api/v1/assets/assets/${this.object.id}/tasks/`,
+                { action: 'refresh' }
+              ).then(res => {
+                openTaskPage(res['task'])
+              })
+            }.bind(this)
+          }
+        },
+        {
+          title: this.$t('assets.TestAssetsConnective'),
+          attrs: {
+            type: 'primary',
+            label: this.$t('assets.Test'),
+            disabled: !vm.$hasPerm('assets.test_assetconnectivity')
+          },
+          callbacks: {
+            click: function() {
+              this.$axios.post(
+                `/api/v1/assets/assets/${this.object.id}/tasks/`,
+                { action: 'test' }
+              ).then(res => {
+                openTaskPage(res['task'])
+              })
+            }.bind(this)
+          }
+        }
+      ]
+    }
+  },
+  computed: {
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('assets.Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('assets.ip'),
+          value: this.object.ip
+        },
+        {
+          key: this.$t('assets.Protocols'),
+          value: this.object.protocols.map(i => i.name).join(',')
+        },
+        {
+          key: this.$t('assets.PublicIp'),
+          value: this.object.public_ip
+        },
+        {
+          key: this.$t('assets.AdminUser'),
+          value: this.object.admin_user_display
+        },
+        {
+          key: this.$t('assets.Domain'),
+          value: this.object.domain?.name || ''
+        },
+        {
+          key: this.$t('assets.Vendor'),
+          value: this.object.vendor
+        },
+        {
+          key: this.$t('assets.Model'),
+          value: this.object.model
+        },
+        {
+          key: this.$t('assets.Cpu'),
+          value: this.object.cpu_model
+        },
+        {
+          key: this.$t('assets.Memory'),
+          value: this.object.memory
+        },
+        {
+          key: this.$t('assets.Disk'),
+          value: this.object.disk_info
+        },
+        {
+          key: this.$t('assets.Platform'),
+          value: this.object.platform?.name || ''
+        },
+        {
+          key: this.$t('assets.Os'),
+          value: this.object.os_arch
+        },
+        {
+          key: this.$t('assets.IsActive'),
+          value: this.object.is_active
+        },
+        {
+          key: this.$t('assets.SerialNumber'),
+          value: this.object.sn
+        },
+        {
+          key: this.$t('assets.AssetNumber'),
+          value: this.object.number
+        },
+        {
+          key: this.$t('assets.DateJoined'),
+          value: toSafeLocalDateStr(this.object.date_created)
+        },
+        {
+          key: this.$t('assets.CreatedBy'),
+          value: this.object.created_by
+        },
+        {
+          key: this.$t('assets.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>
diff --git a/src/views/settings/Applet/AppletHosts/AppletHostDetail/index.vue b/src/views/settings/Applet/AppletHosts/AppletHostDetail/index.vue
new file mode 100644
index 000000000..67ce722b6
--- /dev/null
+++ b/src/views/settings/Applet/AppletHosts/AppletHostDetail/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <GenericDetailPage
+    :object.sync="asset"
+    :active-menu.sync="config.activeMenu"
+    v-bind="config"
+    v-on="$listeners"
+  >
+    <keep-alive>
+      <component :is="config.activeMenu" :object="asset" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import Detail from './Detail'
+
+export default {
+  name: 'AssetListDetail',
+  components: {
+    GenericDetailPage,
+    TabPage,
+    Detail
+  },
+  data() {
+    return {
+      asset: {},
+      config: {
+        url: '/api/v1/terminal/applet-hosts/',
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            'title': 'AppletHostDetail',
+            'name': 'Detail'
+          }
+        ],
+        hasRightSide: true,
+        actions: {
+          updateCallback: () => {
+            const category = this.asset.category.value || 'host'
+            const routerName = _.capitalize(category) + 'Update'
+            this.$router.push({
+              name: routerName,
+              params: { id: this.$route.params.id },
+              query: { platform: this.asset.platform.id }
+            })
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/settings/Applet/AppletHosts/AppletHostList.vue b/src/views/settings/Applet/AppletHosts/AppletHostList.vue
index 3c53aaf64..c32449092 100644
--- a/src/views/settings/Applet/AppletHosts/AppletHostList.vue
+++ b/src/views/settings/Applet/AppletHosts/AppletHostList.vue
@@ -25,6 +25,17 @@ export default {
           ]
         },
         columnsMeta: {
+          name: {
+            formatterArgs: {
+              getRoute: ({ row }) => {
+                console.log('Row: ', row)
+                return {
+                  name: 'AppletHostDetail',
+                  params: { id: row.id }
+                }
+              }
+            }
+          },
           protocols: {
             label: this.$t('assets.Protocols'),
             formatter: (row) => {