diff --git a/ui/src/components/header/ProjectMenu.vue b/ui/src/components/header/ProjectMenu.vue
index 0d1f8dbdd0b..adb4f96ee79 100644
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@@ -21,7 +21,7 @@
       class="project-select"
       defaultValue="Default View"
       :loading="loading"
-      :value="('id' in $store.getters.project) ? ($store.getters.project.displaytext || $store.getters.project.name) : 'Default View'"
+      :value="($store.getters.project && 'id' in $store.getters.project) ? ($store.getters.project.displaytext || $store.getters.project.name) : 'Default View'"
       :disabled="isDisabled()"
       :filterOption="filterProject"
       @change="changeProject"
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 8219dca8971..2992a5a1f22 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -61,6 +61,7 @@ export default {
         }
         return fields
       },
+      details: ['displayname', 'name', 'id', 'state', 'ipaddress', 'templatename', 'ostypename', 'serviceofferingname', 'isdynamicallyscalable', 'haenable', 'hypervisor', 'boottype', 'bootmode', 'account', 'domain', 'zonename'],
       related: [{
         name: 'volume',
         title: 'label.volumes',
@@ -79,11 +80,7 @@ export default {
         param: 'virtualmachineid'
       }],
       tabs: [{
-        name: 'hardware',
-        component: () => import('@/views/compute/InstanceHardware.vue')
-      }, {
-        name: 'settings',
-        component: () => import('@/components/view/DetailSettings')
+        component: () => import('@/views/compute/InstanceTab.vue')
       }],
       actions: [
         {
diff --git a/ui/src/config/section/infra/routers.js b/ui/src/config/section/infra/routers.js
index 8a0eba8b592..c810a5a8e3d 100644
--- a/ui/src/config/section/infra/routers.js
+++ b/ui/src/config/section/infra/routers.js
@@ -23,6 +23,13 @@ export default {
   params: { projectid: '-1' },
   columns: ['name', 'state', 'publicip', 'guestnetworkname', 'vpcname', 'redundantstate', 'version', 'hostname', 'account', 'zonename', 'requiresupgrade'],
   details: ['name', 'id', 'version', 'requiresupgrade', 'guestnetworkname', 'vpcname', 'publicip', 'guestipaddress', 'linklocalip', 'serviceofferingname', 'networkdomain', 'isredundantrouter', 'redundantstate', 'hostname', 'account', 'zonename', 'created'],
+  tabs: [{
+    name: 'details',
+    component: () => import('@/components/view/DetailsTab.vue')
+  }, {
+    name: 'nics',
+    component: () => import('@/views/network/NicsTable.vue')
+  }],
   actions: [
     {
       api: 'startRouter',
diff --git a/ui/src/core/lazy_lib/components_use.js b/ui/src/core/lazy_lib/components_use.js
index 81ddb253e0a..4713112fcbc 100644
--- a/ui/src/core/lazy_lib/components_use.js
+++ b/ui/src/core/lazy_lib/components_use.js
@@ -55,6 +55,7 @@ import {
   Progress,
   Skeleton,
   Popconfirm,
+  Descriptions,
   message,
   notification
 } from 'ant-design-vue'
diff --git a/ui/src/views/compute/InstanceHardware.vue b/ui/src/views/compute/InstanceTab.vue
similarity index 64%
rename from ui/src/views/compute/InstanceHardware.vue
rename to ui/src/views/compute/InstanceTab.vue
index 4d9dacbf606..9d3ac0262ce 100644
--- a/ui/src/views/compute/InstanceHardware.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -16,199 +16,109 @@
 // under the License.
 
 <template>
-  <div>
-    <a-collapse v-model="activeKey" :bordered="false">
-      <a-collapse-panel :header="'ISO: ' + vm.isoname" v-if="vm.isoid" key="1">
-        <a-list
-          itemLayout="horizontal">
-          <a-list-item>
-            <a-list-item-meta>
-              <div slot="avatar">
-                <a-avatar>
-                  <a-icon type="usb" />
-                </a-avatar>
-              </div>
-              <div slot="title">
-                <router-link :to="{ path: '/iso/' + vm.isoid }">{{ vm.isoname }}</router-link> <br/>
-                <a-icon type="barcode"/> {{ vm.isoid }}
-              </div>
-            </a-list-item-meta>
-          </a-list-item>
-        </a-list>
-      </a-collapse-panel>
-
-      <a-collapse-panel :header="'Disks: ' + volumes.length" key="2">
-        <a-list
+  <a-spin :spinning="loading">
+    <a-tabs
+      :activeKey="currentTab"
+      :tabPosition="device === 'mobile' ? 'top' : 'left'"
+      :animated="false"
+      @change="handleChangeTab">
+      <a-tab-pane :tab="$t('label.details')" key="details">
+        <DetailsTab :resource="resource" :loading="loading" />
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('label.iso')" key="cdrom" v-if="vm.isoid">
+        <a-icon type="usb" />
+        <router-link :to="{ path: '/iso/' + vm.isoid }">{{ vm.isoname }}</router-link> <br/>
+        <a-icon type="barcode"/> {{ vm.isoid }}
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('label.volumes')" key="volumes" v-if="'listVolumes' in $store.getters.apis">
+        <a-table
+          class="table"
           size="small"
-          itemLayout="vertical"
+          :columns="volumeColumns"
           :dataSource="volumes"
+          :rowKey="item => item.id"
+          :pagination="false"
         >
-          <a-list-item slot="renderItem" slot-scope="item" class="list-item">
-            <a-list-item-meta>
-              <div slot="avatar">
-                <a-avatar>
-                  <a-icon type="hdd" />
-                </a-avatar>
-              </div>
-              <div slot="title" class="title">
-                <router-link :to="{ path: '/volume/' + item.id }">{{ item.name }} </router-link>
-                <div class="tags">
-                  <a-tag v-if="item.type">
-                    {{ item.type }}
-                  </a-tag>
-                  <a-tag v-if="item.state">
-                    {{ item.state }}
-                  </a-tag>
-                  <a-tag v-if="item.provisioningtype">
-                    {{ item.provisioningtype }}
-                  </a-tag>
-                </div>
-              </div>
-            </a-list-item-meta>
-            <div>
-              <a-divider class="divider-small" />
-              <div class="attribute">
-                <div class="label">{{ $t('label.size') }}</div>
-                <div>{{ (item.size / (1024 * 1024 * 1024.0)).toFixed(2) }} GB</div>
-              </div>
-              <div class="attribute" v-if="item.physicalsize">
-                <div class="label">{{ $t('label.physicalsize') }}</div>
-                <div>{{ (item.physicalsize / (1024 * 1024 * 1024.0)).toFixed(4) }} GB</div>
-              </div>
-              <div class="attribute" v-if="item.storage">
-                <div class="label">{{ $t('label.storagepool') }}</div>
-                <div>{{ item.storage }} ({{ item.storagetype }})</div>
-              </div>
-              <div class="attribute">
-                <div class="label">{{ $t('label.id') }}</div>
-                <div><a-icon type="barcode"/> {{ item.id }}</div>
-              </div>
-            </div>
-          </a-list-item>
-        </a-list>
-      </a-collapse-panel>
-
-      <a-collapse-panel :header="'Network Adapter(s): ' + (vm && vm.nic ? vm.nic.length : 0)" key="3" >
+          <template slot="name" slot-scope="text, item">
+            <a-icon type="hdd" />
+            <router-link :to="{ path: '/volume/' + item.id }">
+              {{ text }}
+            </router-link>
+            <a-tag v-if="item.provisioningtype">
+              {{ item.provisioningtype }}
+            </a-tag>
+          </template>
+          <template slot="state" slot-scope="text">
+            <status :text="text ? text : ''" displayText />
+          </template>
+          <template slot="size" slot-scope="text, item">
+            {{ parseFloat(item.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
+          </template>
+        </a-table>
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('label.nics')" key="nics" v-if="'listNics' in $store.getters.apis">
         <a-button
-          type="primary"
+          type="dashed"
+          style="width: 100%; margin-bottom: 10px"
           @click="showAddModal"
           :loading="loadingNic"
           :disabled="!('addNicToVirtualMachine' in $store.getters.apis)">
           <a-icon type="plus"></a-icon> {{ $t('label.network.addvm') }}
         </a-button>
-        <a-divider class="divider-small" />
-        <a-list
-          size="small"
-          itemLayout="vertical"
-          :dataSource="vm.nic"
-          class="list"
-          :loading="loadingNic"
-        >
-          <a-list-item slot="renderItem" slot-scope="item" class="list-item">
-            <a-list-item-meta>
-              <div slot="avatar">
-                <a-avatar slot="avatar">
-                  <a-icon type="wifi" />
-                </a-avatar>
-              </div>
-              <div slot="title" class="title">
-                <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }} </router-link>
-                <div class="title__details">
-                  <div class="actions">
-                    <a-popconfirm
-                      title="Please confirm that you would like to make this NIC the default for this VM."
-                      @confirm="setAsDefault(item)"
-                      okText="Yes"
-                      cancelText="No"
-                      v-if="!item.isdefault"
-                    >
-                      <a-button
-                        :disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
-                        icon="check-square"
-                        shape="circle" />
-                    </a-popconfirm>
-                    <a-tooltip placement="bottom" v-if="item.type !== 'L2'">
-                      <template slot="title">
-                        {{ "Change IP Address" }}
-                      </template>
-                      <a-button
-                        icon="swap"
-                        shape="circle"
-                        :disabled="!('updateVmNicIp' in $store.getters.apis)"
-                        @click="editIpAddressNic = item.id; showUpdateIpModal = true" />
-                    </a-tooltip>
-                    <a-tooltip placement="bottom" v-if="item.type !== 'L2'">
-                      <template slot="title">
-                        {{ "Manage Secondary IP Addresses" }}
-                      </template>
-                      <a-button
-                        icon="environment"
-                        shape="circle"
-                        :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
-                        @click="fetchSecondaryIPs(item.id)" />
-                    </a-tooltip>
-                    <a-popconfirm
-                      :title="$t('message.network.removenic')"
-                      @confirm="removeNIC(item)"
-                      okText="Yes"
-                      cancelText="No"
-                      v-if="!item.isdefault"
-                    >
-                      <a-button
-                        :disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
-                        type="danger"
-                        icon="delete"
-                        shape="circle" />
-                    </a-popconfirm>
-                  </div>
-                  <div class="tags">
-                    <a-tag v-if="item.isdefault">
-                      {{ $t('label.default') }}
-                    </a-tag>
-                    <a-tag v-if="item.type">
-                      {{ item.type }}
-                    </a-tag>
-                    <a-tag v-if="item.broadcasturi">
-                      {{ item.broadcasturi }}
-                    </a-tag>
-                    <a-tag v-if="item.isolationuri">
-                      {{ item.isolationuri }}
-                    </a-tag>
-                  </div>
-                </div>
-              </div>
-            </a-list-item-meta>
-            <div>
-              <a-divider class="divider-small" />
-              <div class="attribute">
-                <div class="label">{{ $t('label.macaddress') }}</div>
-                <div>{{ item.macaddress }}</div>
-              </div>
-              <div class="attribute" v-if="item.ipaddress">
-                <div class="label">{{ $t('label.ipaddress') }}</div>
-                <div>{{ item.ipaddress }}</div>
-              </div>
-              <div class="attribute" v-if="item.secondaryip && item.secondaryip.length > 0 && item.type !== 'L2'">
-                <div class="label">{{ $t('label.secondaryips') }}</div>
-                <div>{{ item.secondaryip.map(x => x.ipaddress).join(', ') }}</div>
-              </div>
-              <div class="attribute" v-if="item.netmask">
-                <div class="label">{{ $t('label.netmask') }}</div>
-                <div>{{ item.netmask }}</div>
-              </div>
-              <div class="attribute" v-if="item.gateway">
-                <div class="label">{{ $t('label.gateway') }}</div>
-                <div>{{ item.gateway }}</div>
-              </div>
-              <div class="attribute">
-                <div class="label">{{ $t('label.id') }}</div>
-                <div><a-icon type="barcode"/> {{ item.id }}</div>
-              </div>
-            </div>
-          </a-list-item>
-        </a-list>
-      </a-collapse-panel>
-    </a-collapse>
+        <NicsTable :resource="vm" :loading="loading">
+          <span slot="actions" slot-scope="record">
+            <a-popconfirm
+              :title="$t('label.set.default.nic')"
+              @confirm="setAsDefault(record.nic)"
+              okText="Yes"
+              cancelText="No"
+              v-if="!record.nic.isdefault"
+            >
+              <a-button
+                :disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
+                icon="check-square"
+                shape="circle" />
+            </a-popconfirm>
+            <a-tooltip placement="bottom" v-if="record.nic.type !== 'L2'">
+              <template slot="title">
+                {{ "Change IP Address" }}
+              </template>
+              <a-button
+                icon="swap"
+                shape="circle"
+                :disabled="!('updateVmNicIp' in $store.getters.apis)"
+                @click="editIpAddressNic = record.nic.id; showUpdateIpModal = true" />
+            </a-tooltip>
+            <a-tooltip placement="bottom" v-if="record.nic.type !== 'L2'">
+              <template slot="title">
+                {{ "Manage Secondary IP Addresses" }}
+              </template>
+              <a-button
+                icon="environment"
+                shape="circle"
+                :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
+                @click="fetchSecondaryIPs(record.nic.id)" />
+            </a-tooltip>
+            <a-popconfirm
+              :title="$t('message.network.removenic')"
+              @confirm="removeNIC(record.nic)"
+              okText="Yes"
+              cancelText="No"
+              v-if="!record.nic.isdefault"
+            >
+              <a-button
+                :disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
+                type="danger"
+                icon="delete"
+                shape="circle" />
+            </a-popconfirm>
+          </span>
+        </NicsTable>
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('label.settings')" key="settings">
+        <DetailSettings :resource="resource" :loading="loading" />
+      </a-tab-pane>
+    </a-tabs>
 
     <a-modal
       :visible="showAddNetworkModal"
@@ -216,10 +126,9 @@
       @cancel="closeModals"
       @ok="submitAddNetwork">
       {{ $t('message.network.addvm.desc') }}
-
       <div class="modal-form">
         <p class="modal-form__label">{{ $t('label.network') }}:</p>
-        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network === e">
+        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network = e">
           <a-select-option
             v-for="network in addNetworkData.allNetworks"
             :key="network.id"
@@ -230,7 +139,6 @@
         <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
         <a-input v-model="addNetworkData.ip"></a-input>
       </div>
-
     </a-modal>
 
     <a-modal
@@ -245,7 +153,6 @@
         <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
         <a-input v-model="editIpAddressValue"></a-input>
       </div>
-
     </a-modal>
 
     <a-modal
@@ -284,21 +191,29 @@
       </a-list>
     </a-modal>
 
-  </div>
+  </a-spin>
 </template>
 
 <script>
 
 import { api } from '@/api'
+import { mixinDevice } from '@/utils/mixin.js'
 import ResourceLayout from '@/layouts/ResourceLayout'
 import Status from '@/components/widgets/Status'
+import DetailsTab from '@/components/view/DetailsTab'
+import DetailSettings from '@/components/view/DetailSettings'
+import NicsTable from '@/views/network/NicsTable'
 
 export default {
-  name: 'InstanceHardware',
+  name: 'InstanceTab',
   components: {
     ResourceLayout,
+    DetailsTab,
+    DetailSettings,
+    NicsTable,
     Status
   },
+  mixins: [mixinDevice],
   props: {
     resource: {
       type: Object,
@@ -315,7 +230,7 @@ export default {
       vm: {},
       volumes: [],
       totalStorage: 0,
-      activeKey: ['1', '2', '3'],
+      currentTab: 'details',
       showAddNetworkModal: false,
       showUpdateIpModal: false,
       showSecondaryIpModal: false,
@@ -329,7 +244,28 @@ export default {
       editIpAddressValue: '',
       secondaryIPs: [],
       selectedNicId: '',
-      newSecondaryIp: ''
+      newSecondaryIp: '',
+      volumeColumns: [
+        {
+          title: this.$t('label.name'),
+          dataIndex: 'name',
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('label.state'),
+          dataIndex: 'state',
+          scopedSlots: { customRender: 'state' }
+        },
+        {
+          title: this.$t('label.type'),
+          dataIndex: 'type'
+        },
+        {
+          title: this.$t('label.size'),
+          dataIndex: 'size',
+          scopedSlots: { customRender: 'size' }
+        }
+      ]
     }
   },
   created () {
@@ -346,6 +282,9 @@ export default {
     }
   },
   methods: {
+    handleChangeTab (e) {
+      this.currentTab = e
+    },
     fetchData () {
       this.volumes = []
       if (!this.vm || !this.vm.id) {
diff --git a/ui/src/views/network/NicsTable.vue b/ui/src/views/network/NicsTable.vue
new file mode 100644
index 00000000000..06d78bd085a
--- /dev/null
+++ b/ui/src/views/network/NicsTable.vue
@@ -0,0 +1,121 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-table
+    size="small"
+    :columns="nicColumns"
+    :dataSource="resource.nic"
+    :rowKey="item => item.id"
+    :pagination="false"
+  >
+    <p slot="expandedRowRender" slot-scope="record">
+      <slot name="actions" :nic="record" />
+      <a-descriptions style="margin-top: 10px" layout="vertical" :column="1" :bordered="false" size="small">
+        <a-descriptions-item :label="$t('label.id')">
+          {{ record.id }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.networkid')" v-if="record.networkid">
+          {{ record.networkid }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.type')" v-if="record.type">
+          {{ record.type }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.traffictype')" v-if="record.traffictype">
+          {{ record.traffictype }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.secondaryips')" v-if="record.secondaryip && record.secondaryip.length > 0 && record.type !== 'L2'">
+          {{ record.secondaryip.map(x => x.ipaddress).join(', ') }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.ip6address')" v-if="record.ip6address">
+          {{ record.ip6address }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.ip6gateway')" v-if="record.ip6gateway">
+          {{ record.ip6gateway }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.ip6cidr')" v-if="record.ip6cidr">
+          {{ record.ip6cidr }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.broadcasturi')" v-if="record.broadcasturi">
+          {{ record.broadcasturi }}
+        </a-descriptions-item>
+        <a-descriptions-item :label="$t('label.isolationuri')" v-if="record.isolationuri">
+          {{ record.isolationuri }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </p>
+    <template slot="networkname" slot-scope="text, item">
+      <a-icon type="apartment" />
+      <router-link :to="{ path: '/guestnetwork/' + item.networkid }">
+        {{ text }}
+      </router-link>
+      <a-tag v-if="item.isdefault">
+        Default
+      </a-tag>
+    </template>
+  </a-table>
+</template>
+
+<script>
+
+export default {
+  name: 'NicsTable',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['parentFetchData'],
+  data () {
+    return {
+      nicColumns: [
+        {
+          title: this.$t('label.networkname'),
+          dataIndex: 'networkname',
+          scopedSlots: { customRender: 'networkname' }
+        },
+        {
+          title: this.$t('label.macaddress'),
+          dataIndex: 'macaddress'
+        },
+        {
+          title: this.$t('label.ipaddress'),
+          dataIndex: 'ipaddress'
+        },
+        {
+          title: this.$t('label.netmask'),
+          dataIndex: 'netmask'
+        },
+        {
+          title: this.$t('label.gateway'),
+          dataIndex: 'gateway'
+        }
+      ]
+    }
+  },
+  watch: {
+    resource: function (newItem, oldItem) {
+      this.resource = newItem
+    }
+  }
+}
+</script>