diff --git a/ui/src/config/section/iam.js b/ui/src/config/section/iam.js
index d910392056a..3f00ae7c46e 100644
--- a/ui/src/config/section/iam.js
+++ b/ui/src/config/section/iam.js
@@ -220,6 +220,13 @@ export default {
       permission: ['listRoles'],
       columns: ['name', 'type', 'description'],
       details: ['name', 'id', 'type', 'description'],
+      tabs: [{
+        name: 'details',
+        component: () => import('@/components/view/DetailsTab.vue')
+      }, {
+        name: 'rules',
+        component: () => import('@/views/iam/RolePermissionTab.vue')
+      }],
       actions: [
         {
           api: 'createRole',
diff --git a/ui/src/views/iam/RolePermissionTab.vue b/ui/src/views/iam/RolePermissionTab.vue
new file mode 100644
index 00000000000..762c669100d
--- /dev/null
+++ b/ui/src/views/iam/RolePermissionTab.vue
@@ -0,0 +1,52 @@
+// 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>
+    Boilerplate for implementation
+    {{ loading }}
+    {{ resource }}
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'RolePermissionTab',
+  components: {
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index d918b2abdb5..462678f8930 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -16,7 +16,39 @@
 // under the License.
 
 <template>
-  <a-row :gutter="24" style="margin: 6px">
+  <a-row :gutter="24">
+    <a-col :md="18">
+      <a-card>
+      <breadcrumb />
+      </a-card>
+    </a-col>
+    <a-col
+      :md="6" >
+      <a-card>
+        <a-button
+          style="margin-left: 10px; float: right"
+          @click="fetchData()"
+          icon="reload"
+          :loading="loading"
+          type="primary">
+          {{ $t('Refresh') }}
+        </a-button>
+        <a-button
+          style="margin-left: 10px; float: right"
+          @click="sslFormVisible = true"
+          icon="safety-certificate">
+          {{ $t('SSL Certificate') }}
+        </a-button>
+        <a-modal
+          :title="$t('SSL Certificate')"
+          v-model="sslFormVisible"
+          @ok="handle">
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </a-modal>
+      </a-card>
+    </a-col>
     <a-col
       :md="6"
       :style="{ marginBottom: '12px', marginTop: '12px' }"
@@ -32,26 +64,6 @@
         </div>
       </chart-card>
     </a-col>
-    <!-- move refresh and ssl cert setup somewhere more friendly -->
-    <a-col
-      :md="6"
-      :style="{ marginBottom: '12px', marginTop: '12px' }">
-      <a-card>
-        <a-button
-          style="width: 100%"
-          icon="reload"
-          @click="fetchData()"
-          :loading="loading"
-          type="primary">
-          {{ $t('Refresh') }}
-        </a-button>
-        <a-button
-          style="width: 100%"
-          icon="safety-certificate">
-          {{ $t('SSL Certificate') }}
-        </a-button>
-      </a-card>
-    </a-col>
   </a-row>
 </template>
 
@@ -59,18 +71,21 @@
 import { api } from '@/api'
 import router from '@/router'
 
+import Breadcrumb from '@/components/widgets/Breadcrumb'
 import ChartCard from '@/components/widgets/ChartCard'
 
 export default {
   name: 'InfraSummary',
   components: {
+    Breadcrumb,
     ChartCard
   },
   data () {
     return {
       loading: true,
-      sections: ['zones', 'pods', 'clusters', 'hosts', 'storagepools', 'imagestores', 'systemvms', 'routers', 'cpusockets', 'managementservers', 'alerts'],
       routes: {},
+      sections: ['zones', 'pods', 'clusters', 'hosts', 'storagepools', 'imagestores', 'systemvms', 'routers', 'cpusockets', 'managementservers', 'alerts'],
+      sslFormVisible: false,
       stats: {}
     }
   },
@@ -99,6 +114,9 @@ export default {
       }).finally(f => {
         this.loading = false
       })
+    },
+    handleSslForm (e) {
+      console.log(e)
     }
   }
 }