diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 86683f4..2db0f77 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -199,6 +199,7 @@
   logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
   Check more details on the Configuration Vocabulary page`,
   keywordsOfContentLogTips: 'Current storage of SkyWalking OAP server does not support this.',
+  instanceAttributes: 'Instance Attributes',
 };
 
 export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index c2d619a..eaf6922 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -197,6 +197,7 @@
   viewLogs: '查看日志',
   logsTagsTip: '只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。',
   keywordsOfContentLogTips: 'SkyWalking OAP服务器的当前存储不支持此操作',
+  instanceAttributes: '查看实例属性',
 };
 
 export default m;
diff --git a/src/components/rk-sidebox.vue b/src/components/rk-sidebox.vue
index c2ce741..b9f1383 100644
--- a/src/components/rk-sidebox.vue
+++ b/src/components/rk-sidebox.vue
@@ -16,7 +16,7 @@
   <div>
     <div class="rk-sidebox-backdrop" v-show="show" @click="handleHide"></div>
     <aside
-      class="rk-sidebox"
+      class="rk-sidebox flex-v"
       :style="
         show ? `width:${width};${right ? 'right:0' : 'left:0'}` : `width:${width};${right ? 'right' : 'left'}:-${width}`
       "
@@ -84,7 +84,7 @@
     background-color: #fff;
   }
   .rk-sidebox-inner {
-    padding: 35px 20px 20px;
+    padding: 20px;
   }
   .rk-sidebox-inner-fixed {
     height: 100%;
@@ -93,7 +93,6 @@
   }
   .rk-sidebox-title {
     font-size: 16px;
-    position: absolute;
     width: 100%;
     padding-left: 20px;
     line-height: 35px;
diff --git a/src/views/components/dashboard/tool-bar-btns.vue b/src/views/components/dashboard/tool-bar/tool-bar-btns.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-btns.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-btns.vue
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select-opt.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-endpoint-select-opt.vue
diff --git a/src/views/components/dashboard/tool-bar-endpoint-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-endpoint-select.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue
diff --git a/src/views/components/dashboard/tool-bar-select.vue b/src/views/components/dashboard/tool-bar/tool-bar-select.vue
similarity index 100%
rename from src/views/components/dashboard/tool-bar-select.vue
rename to src/views/components/dashboard/tool-bar/tool-bar-select.vue
diff --git a/src/views/components/dashboard/tool-bar.vue b/src/views/components/dashboard/tool-bar/tool-bar.vue
similarity index 70%
rename from src/views/components/dashboard/tool-bar.vue
rename to src/views/components/dashboard/tool-bar/tool-bar.vue
index fc6707a..ade76dc 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar/tool-bar.vue
@@ -21,9 +21,9 @@
       :dashboardType="dashboardType"
       :durationTime="durationTime"
       :rocketOption="rocketOption"
-    ></ToolBarBtns>
-    <div class="rk-dashboard-bar flex-h" v-if="compType !== dashboardType.DATABASE">
-      <div class="sm grey service-search" v-if="compType === dashboardType.SERVICE">
+    />
+    <div class="flex-h" v-if="compType === dashboardType.SERVICE">
+      <div class="sm grey service-search">
         <div>{{ this.$t('serviceGroup') }}</div>
         <input
           type="text"
@@ -32,7 +32,6 @@
         />
       </div>
       <ToolBarSelect
-        v-if="compType === dashboardType.SERVICE"
         @onChoose="selectService"
         :title="this.$t('currentService')"
         :current="stateDashboard.currentService"
@@ -40,7 +39,6 @@
         icon="package"
       />
       <ToolBarEndpointSelect
-        v-if="compType === dashboardType.SERVICE"
         @onChoose="selectEndpoint"
         :title="this.$t('currentEndpoint')"
         :current="stateDashboard.currentEndpoint"
@@ -49,40 +47,56 @@
         icon="code"
       />
       <ToolBarSelect
-        v-if="compType === dashboardType.SERVICE"
         @onChoose="selectInstance"
         :title="this.$t('currentInstance')"
         :current="stateDashboard.currentInstance"
         :data="stateDashboard.instances"
         icon="disk"
       />
-
-      <template v-if="compType === dashboardType.BROWSER">
-        <ToolBarSelect
-          @onChoose="selectService"
-          :title="this.$t('currentService')"
-          :current="stateDashboard.currentService"
-          :data="stateDashboard.services"
-          icon="package"
-        />
-        <ToolBarSelect
-          @onChoose="selectInstance"
-          :title="this.$t('currentVersion')"
-          :current="stateDashboard.currentInstance"
-          :data="stateDashboard.instances"
-          icon="disk"
-        />
-        <ToolBarEndpointSelect
-          @onChoose="selectEndpoint"
-          :title="this.$t('currentPage')"
-          :current="stateDashboard.currentEndpoint"
-          :data="stateDashboard.endpoints"
-          :currentService="stateDashboard.currentService"
-          icon="code"
-        />
-      </template>
+      <a class="rk-view-instance-attributes r" @click="() => (dialogAttributesVisible = true)">
+        <span class="vm">{{ this.$t('instanceAttributes') }}</span>
+      </a>
+      <rk-sidebox
+        width="50%"
+        :fixed="true"
+        :title="`${$t('instanceAttributes')} of ${stateDashboard.currentInstance.label}`"
+        :show.sync="dialogAttributesVisible"
+        class="instance-attributes-box"
+      >
+        <div
+          class="instance-attr"
+          v-for="(attr, index) in stateDashboard.currentInstance.attributes"
+          :key="attr.name + index"
+        >
+          {{ attr.name + ' : ' + attr.value }}
+        </div>
+      </rk-sidebox>
     </div>
-    <div class="rk-dashboard-bar flex-h" v-else>
+    <div class="flex-h" v-else-if="compType === dashboardType.BROWSER">
+      <ToolBarSelect
+        @onChoose="selectService"
+        :title="this.$t('currentService')"
+        :current="stateDashboard.currentService"
+        :data="stateDashboard.services"
+        icon="package"
+      />
+      <ToolBarSelect
+        @onChoose="selectInstance"
+        :title="this.$t('currentVersion')"
+        :current="stateDashboard.currentInstance"
+        :data="stateDashboard.instances"
+        icon="disk"
+      />
+      <ToolBarEndpointSelect
+        @onChoose="selectEndpoint"
+        :title="this.$t('currentPage')"
+        :current="stateDashboard.currentEndpoint"
+        :data="stateDashboard.endpoints"
+        :currentService="stateDashboard.currentService"
+        icon="code"
+      />
+    </div>
+    <div class="flex-h" v-else-if="compType === dashboardType.DATABASE">
       <ToolBarSelect
         @onChoose="SELECT_DATABASE"
         :title="this.$t('currentDatabase')"
@@ -100,7 +114,7 @@
   import ToolBarEndpointSelect from './tool-bar-endpoint-select.vue';
   import ToolBarBtns from './tool-bar-btns.vue';
   import { State, Action, Mutation } from 'vuex-class';
-  import { DASHBOARDTYPE } from './constant';
+  import { DASHBOARDTYPE } from '../constant';
 
   @Component({ components: { ToolBarSelect, ToolBarBtns, ToolBarEndpointSelect } })
   export default class ToolBar extends Vue {
@@ -119,6 +133,7 @@
     @Action('SELECT_INSTANCE') private SELECT_INSTANCE: any;
     @Action('MIXHANDLE_GET_OPTION') private MIXHANDLE_GET_OPTION: any;
     private dashboardType = DASHBOARDTYPE;
+    private dialogAttributesVisible = false;
     get lastKey() {
       const current = this.rocketComps.tree[this.rocketComps.group].children[this.rocketComps.current].children;
       if (!current.length) {
@@ -153,6 +168,13 @@
     flex-shrink: 0;
     color: #efefef;
     background-color: #333840;
+    .instance-attributes-box {
+      color: #252a2f;
+    }
+    .instance-attr {
+      padding: 20px 0 0 20px;
+      font-size: 13px;
+    }
     .service-search {
       padding: 0 5px;
       border-right: 2px solid #252a2f;
@@ -167,5 +189,11 @@
         padding: 0 2px;
       }
     }
+    .rk-view-instance-attributes {
+      background-color: #484b55;
+      border-radius: 4px;
+      margin-left: 5px;
+      padding: 5px 10px;
+    }
   }
 </style>
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index a98885c..ce3217e 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -80,8 +80,8 @@
   import { Component, Vue } from 'vue-property-decorator';
   import { Action, Getter, Mutation, State } from 'vuex-class';
   import TraceSelect from '../common/trace-select.vue';
-  import ToolBarSelect from '../dashboard/tool-bar-select.vue';
-  import ToolBarEndpointSelect from '../dashboard/tool-bar-endpoint-select.vue';
+  import ToolBarSelect from '../dashboard/tool-bar/tool-bar-select.vue';
+  import ToolBarEndpointSelect from '../dashboard/tool-bar/tool-bar-endpoint-select.vue';
   import LogConditions from './log-conditions.vue';
   import { State as logState } from '@/store/modules/log/index';
   import { State as optionState } from '@/store/modules/global/selectors';
diff --git a/src/views/containers/dashboard.vue b/src/views/containers/dashboard.vue
index ecaffbb..5f6d9ab 100644
--- a/src/views/containers/dashboard.vue
+++ b/src/views/containers/dashboard.vue
@@ -46,7 +46,7 @@
 <script lang="ts">
   import { Component, Vue, Watch } from 'vue-property-decorator';
   import { Action, Getter, State, Mutation } from 'vuex-class';
-  import ToolBar from '@/views/components/dashboard/tool-bar.vue';
+  import ToolBar from '@/views/components/dashboard/tool-bar/tool-bar.vue';
   import ToolGroup from '@/views/components/dashboard/tool-group.vue';
   import ToolNav from '@/views/components/dashboard/tool-nav.vue';
   import DashboardItem from '@/views/components/dashboard/dashboard-item.vue';
diff --git a/src/views/containers/topology/endpoint-dependency/index.vue b/src/views/containers/topology/endpoint-dependency/index.vue
index 249163a..1c38179 100644
--- a/src/views/containers/topology/endpoint-dependency/index.vue
+++ b/src/views/containers/topology/endpoint-dependency/index.vue
@@ -39,8 +39,8 @@
   import Vue from 'vue';
   import { Component, Watch, Prop } from 'vue-property-decorator';
   import { Action, Getter, State, Mutation } from 'vuex-class';
-  import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
-  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+  import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
+  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
   import TopoEndpointDependency from '@/views/components/topology/topo-endpoint-dependency.vue';
 
   @Component({
diff --git a/src/views/containers/topology/endpoint/index.vue b/src/views/containers/topology/endpoint/index.vue
index be3132d..bac00bf 100644
--- a/src/views/containers/topology/endpoint/index.vue
+++ b/src/views/containers/topology/endpoint/index.vue
@@ -63,8 +63,8 @@
   import { Component, Watch, Prop } from 'vue-property-decorator';
   import { Action, Getter, State, Mutation } from 'vuex-class';
   import EndpointsSurvey from './endpoints-survey.vue';
-  import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
-  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+  import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
+  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
   import { readFile } from '@/utils/readFile';
   import { saveFile } from '@/utils/saveFile';
   import { ObjectsType } from '../../../../constants/constant';
diff --git a/src/views/containers/topology/instance/index.vue b/src/views/containers/topology/instance/index.vue
index e632a73..b1223f5 100644
--- a/src/views/containers/topology/instance/index.vue
+++ b/src/views/containers/topology/instance/index.vue
@@ -61,8 +61,8 @@
 
 <script lang="ts">
   import InstancesSurvey from './instances-survey.vue';
-  import ToolBarSelect from '@/views/components/dashboard/tool-bar-select.vue';
-  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar-endpoint-select.vue';
+  import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
+  import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
   import Vue from 'vue';
   import { Component, PropSync, Watch, Prop } from 'vue-property-decorator';
   import { Action, Getter, State, Mutation } from 'vuex-class';