diff --git a/ui/src/components/view/ResourceView.vue b/ui/src/components/view/ResourceView.vue
index 8a52b223211..d497c776559 100644
--- a/ui/src/components/view/ResourceView.vue
+++ b/ui/src/components/view/ResourceView.vue
@@ -29,8 +29,9 @@
         <a-skeleton active v-if="loading" />
         <a-tabs
           v-else
-          :defaultActiveKey="tabs[0].name"
           style="width: 100%"
+          :animated="false"
+          :defaultActiveKey="tabs[0].name"
           @change="onTabChange" >
           <a-tab-pane
             v-for="tab in tabs"
diff --git a/ui/src/components/view/SettingTable.vue b/ui/src/components/view/SettingTable.vue
new file mode 100644
index 00000000000..f1d48da4b10
--- /dev/null
+++ b/ui/src/components/view/SettingTable.vue
@@ -0,0 +1,88 @@
+// 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"
+    :scroll="{ x: 'true' }"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="items"
+    :rowKey="record => record.id || record.name || record.key"
+    :pagination="false"
+    :rowClassName="getRowClassName"
+    bordered
+  >
+    <template slot="value" slot-scope="text, record">
+      <span style="float: left; margin-right: 5px" v-if="record">
+        <a-button size="small" shape="circle">
+          <a-icon type="close" />
+        </a-button>
+        <a-button size="small" shape="circle">
+          <a-icon type="edit" />
+        </a-button>
+      </span>
+      <span>{{ text }}</span>
+    </template>
+  </a-table>
+</template>
+
+<script>
+export default {
+  name: 'SettingTable',
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    getRowClassName (record, index) {
+      if (index % 2 === 0) {
+        return 'light-row'
+      }
+      return 'dark-row'
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .ant-table-thead {
+  background-color: #f9f9f9;
+}
+
+/deep/ .light-row {
+  background-color: #fff;
+}
+
+/deep/ .dark-row {
+  background-color: #f9f9f9;
+}
+</style>
diff --git a/ui/src/config/section/compute.js b/ui/src/config/section/compute.js
index 3715c5f4d31..e2a51880b16 100644
--- a/ui/src/config/section/compute.js
+++ b/ui/src/config/section/compute.js
@@ -50,7 +50,7 @@ export default {
         component: () => import('@/views/compute/InstanceHardware.vue')
       }, {
         name: 'settings',
-        component: () => import('@/views/setting/ResourceSettingsTab.vue')
+        component: () => import('@/views/compute/InstanceSettings.vue')
       }],
       actions: [
         {
diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
index 8eb75b883c1..0b4ee5f7424 100644
--- a/ui/src/config/section/image.js
+++ b/ui/src/config/section/image.js
@@ -29,6 +29,16 @@ export default {
       params: { 'templatefilter': 'executable' },
       columns: ['name', 'ostypename', 'status', 'hypervisor', 'account', 'domain'],
       details: ['name', 'id', 'displaytext', 'checksum', 'hypervisor', 'format', 'ostypename', 'size', 'isready', 'passwordenabled', 'directdownload', 'isextractable', 'isdynamicallyscalable', 'ispublic', 'isfeatured', 'crosszones', 'type', 'account', 'domain', 'created'],
+      tabs: [{
+        name: 'details',
+        component: () => import('@/components/view/DetailsTab.vue')
+      }, {
+        name: 'zones',
+        component: () => import('@/views/image/TemplateZones.vue')
+      }, {
+        name: 'settings',
+        component: () => import('@/views/image/TemplateSettings.vue')
+      }],
       actions: [
         {
           api: 'registerTemplate',
diff --git a/ui/src/views/compute/InstanceSettings.vue b/ui/src/views/compute/InstanceSettings.vue
new file mode 100644
index 00000000000..1790a8447eb
--- /dev/null
+++ b/ui/src/views/compute/InstanceSettings.vue
@@ -0,0 +1,60 @@
+// 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>
+  <div>
+    <a-button style="margin-bottom: 15px; float: right">
+      Add Setting
+    </a-button>
+    <setting-table
+      :columns="[{
+        title: $t('name'),
+        dataIndex: 'name',
+        width: '40%'
+      },{
+        title: $t('value'),
+        dataIndex: 'value',
+        width: '40%',
+        scopedSlots: { customRender: 'value' }
+      }]"
+      :items="Object.keys(resource.details).map(k => { return { name: k, value: resource.details[k] } })"
+      :loading="loading"
+    >
+    </setting-table>
+  </div>
+</template>
+
+<script>
+import SettingTable from '@/components/view/SettingTable'
+
+export default {
+  name: 'SettingsTab',
+  components: {
+    SettingTable
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/ui/src/views/image/TemplateSettings.vue b/ui/src/views/image/TemplateSettings.vue
new file mode 100644
index 00000000000..1790a8447eb
--- /dev/null
+++ b/ui/src/views/image/TemplateSettings.vue
@@ -0,0 +1,60 @@
+// 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>
+  <div>
+    <a-button style="margin-bottom: 15px; float: right">
+      Add Setting
+    </a-button>
+    <setting-table
+      :columns="[{
+        title: $t('name'),
+        dataIndex: 'name',
+        width: '40%'
+      },{
+        title: $t('value'),
+        dataIndex: 'value',
+        width: '40%',
+        scopedSlots: { customRender: 'value' }
+      }]"
+      :items="Object.keys(resource.details).map(k => { return { name: k, value: resource.details[k] } })"
+      :loading="loading"
+    >
+    </setting-table>
+  </div>
+</template>
+
+<script>
+import SettingTable from '@/components/view/SettingTable'
+
+export default {
+  name: 'SettingsTab',
+  components: {
+    SettingTable
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
new file mode 100644
index 00000000000..3e024acba1d
--- /dev/null
+++ b/ui/src/views/image/TemplateZones.vue
@@ -0,0 +1,41 @@
+// 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>
+  <div>
+    TODO: list of zones and the zone specific status?
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'TemplateZones',
+  components: {
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>