diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue
index 250eace5e54..cfa340fd665 100644
--- a/ui/src/components/view/DetailsTab.vue
+++ b/ui/src/components/view/DetailsTab.vue
@@ -38,6 +38,7 @@
         </div>
       </div>
     </a-list-item>
+    <HostInfo :resource="resource" v-if="$route.meta.name === 'host' && 'listHosts' in $store.getters.apis" />
     <DedicateData :resource="resource" v-if="dedicatedSectionActive" />
     <VmwareData :resource="resource" v-if="$route.meta.name === 'zone' && 'listVmwareDcs' in $store.getters.apis" />
   </a-list>
@@ -45,12 +46,14 @@
 
 <script>
 import DedicateData from './DedicateData'
+import HostInfo from '@/views/infra/HostInfo'
 import VmwareData from './VmwareData'
 
 export default {
   name: 'DetailsTab',
   components: {
     DedicateData,
+    HostInfo,
     VmwareData
   },
   props: {
diff --git a/ui/src/config/section/infra/hosts.js b/ui/src/config/section/infra/hosts.js
index e06a7d7281f..de1e8273eca 100644
--- a/ui/src/config/section/infra/hosts.js
+++ b/ui/src/config/section/infra/hosts.js
@@ -27,9 +27,6 @@ export default {
   tabs: [{
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
-  }, {
-    name: 'config',
-    component: () => import('@/views/infra/HostInfoTab.vue')
   }],
   related: [{
     name: 'vm',
diff --git a/ui/src/views/infra/HostInfoTab.vue b/ui/src/views/infra/HostInfo.vue
similarity index 90%
rename from ui/src/views/infra/HostInfoTab.vue
rename to ui/src/views/infra/HostInfo.vue
index aeb3b767a6f..627f6ffc9c3 100644
--- a/ui/src/views/infra/HostInfoTab.vue
+++ b/ui/src/views/infra/HostInfo.vue
@@ -21,9 +21,14 @@
       <a-list-item>
         <div>
           <strong>{{ $t('label.hypervisorversion') }}</strong>
-          <div v-if="host.details">
+          <div>
             {{ host.hypervisor }}
-            {{ host.details['Host.OS'] + ' ' + host.details['Host.OS.Version'] }}
+            <span v-if="host.details">
+              {{ host.details['Host.OS'] + ' ' + host.details['Host.OS.Version'] }}
+            </span>
+            <span v-else>
+              {{ host.version }}
+            </span>
           </div>
         </div>
       </a-list-item>
@@ -100,7 +105,7 @@
 import { api } from '@/api'
 
 export default {
-  name: 'HostInfoTab',
+  name: 'HostInfo',
   props: {
     resource: {
       type: Object,
@@ -121,8 +126,8 @@ export default {
     this.fetchData()
   },
   watch: {
-    loading (newData, oldData) {
-      if (!newData && this.resource.id) {
+    resource (newItem, oldItem) {
+      if (this.resource && this.resource.id && newItem && newItem.id !== oldItem.id) {
         this.fetchData()
       }
     }