diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index d0a59da..0be614d 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -1,55 +1,72 @@
 <div class="ui-g-12 detail-view-box">
 
-  <h3>{{host.name}} <span>{{host.address}}</span></h3>
+  <div class="detail-img">
+    <!-- <svg width="200" height="200" viewBox="20 40 140 100">
+          <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
+        </svg> -->
+    <svg width="140" height="140" viewBox="15 35 140 100">
+      <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
+    </svg>
+  </div>
 
-  <p-tabView>
-    <p-tabPanel header="General">
+  <div class="detail-content">
 
-      <ul class="key-value">
+    <h3>{{host.name}} <span>{{host.address}}</span></h3>
 
-        <li *ngIf="host.address">
-          IP Address
-          <span class="meta-value">{{host.address}}</span>
-        </li>
+    <p-tabView>
+      <p-tabPanel header="General">
 
-        <li *ngIf="host.deviceType">
-          Type
-          <span class="meta-value">{{host.deviceType}}</span>
-        </li>
-        <li *ngIf="host.deviceVendor">
-          Vendor
-          <span class="meta-value">{{host.deviceVendor}}</span>
-        </li>
-        <li *ngIf="host.model">
-          Model
-          <span class="meta-value">{{host.model}}</span>
-        </li>
+        <ul class="key-value">
 
-        <li *ngIf="host.osType">
-          OS
-          <span class="meta-value">{{host.osType}}</span>
-        </li>
+          <li *ngIf="host.address">
+            IP Address
+            <span class="meta-value">{{host.address}}</span>
+          </li>
 
-        <li *ngIf="host.mac">
-          Mac Address
-          <span class="meta-value">{{host.mac}}</span>
-        </li>
+          <li *ngIf="host.deviceType">
+            Type
+            <span class="meta-value">{{host.deviceType}}</span>
+          </li>
+          <li *ngIf="host.deviceVendor">
+            Vendor
+            <span class="meta-value">{{host.deviceVendor}}</span>
+          </li>
+          <li *ngIf="host.model">
+            Model
+            <span class="meta-value">{{host.model}}</span>
+          </li>
 
-      </ul>
+          <li *ngIf="host.osType">
+            OS
+            <span class="meta-value">{{host.osType}}</span>
+          </li>
 
-    </p-tabPanel>
+          <li *ngIf="host.mac">
+            Mac Address
+            <span class="meta-value">{{host.mac}}</span>
+          </li>
 
-    <p-tabPanel header="Metadata" *ngIf="host.meta">
-      <ul class="key-value">
-        <li *ngFor="let key of host.meta | objectKeys">
-          {{key | stringPrettify}}
-          <span class="meta-value">{{host.meta[key]}}</span>
-        </li>
-      </ul>
-    </p-tabPanel>
+        </ul>
 
-    <p-tabPanel header="Ports" *ngIf="host.portList">
-      <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
-    </p-tabPanel>
-  </p-tabView>
-</div>
\ No newline at end of file
+      </p-tabPanel>
+
+      <p-tabPanel header="Metadata" *ngIf="host.meta">
+        <ul>
+          <li *ngFor="let key of host.meta | objectKeys">
+            {{key | stringPrettify}}
+
+            <ul class="key-value">
+              <li *ngFor="let skey of host.meta[key] | objectKeys">
+                {{skey | stringPrettify}}
+                <span class="meta-value">{{host.meta[key][skey]}}</span>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </p-tabPanel>
+
+      <p-tabPanel header="Ports" *ngIf="host.portList">
+        <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
+      </p-tabPanel>
+    </p-tabView>
+  </div>
\ No newline at end of file
diff --git a/src/commons/component/node-detail.component.html b/src/commons/component/node-detail.component.html
index 81158bf..b9268cb 100644
--- a/src/commons/component/node-detail.component.html
+++ b/src/commons/component/node-detail.component.html
@@ -1,31 +1,21 @@
 <div class="ui-g">
-  <div class="detail-img">
-    <!-- <svg width="200" height="200" viewBox="20 40 140 100">
-      <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
-    </svg> -->
-    <svg width="140" height="140" viewBox="15 35 140 100">
-      <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
-    </svg>
-  </div>
-  <div class="detail-content">
 
-    <ng-container [ngSwitch]="node.group">
-
-      <ng-container *ngSwitchCase="'zone'">
-        <app-zone-detail [zone]="node.target"></app-zone-detail>
-      </ng-container>
-
-      <ng-container *ngSwitchCase="'host'">
-        <app-host-detail [host]="node.target"></app-host-detail>
-      </ng-container>
-
-      <ng-container *ngSwitchCase="'service'">
-        <app-service-detail [service]="node.target"></app-service-detail>
-      </ng-container>
-
-      <ng-container *ngSwitchDefault>
-      </ng-container>
+  <ng-container [ngSwitch]="node.group">
 
+    <ng-container *ngSwitchCase="'zone'">
+      <app-zone-detail [zone]="node.target"></app-zone-detail>
     </ng-container>
-  </div>
+
+    <ng-container *ngSwitchCase="'host'">
+      <app-host-detail [host]="node.target"></app-host-detail>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'service'">
+      <app-service-detail [service]="node.target"></app-service-detail>
+    </ng-container>
+
+    <ng-container *ngSwitchDefault>
+    </ng-container>
+
+  </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html
index 85a0ba5..d9e0cab 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -1,5 +1,14 @@
 <div class="ui-g-12 detail-view-box">
 
+  <div class="detail-img">
+    <!-- <svg width="200" height="200" viewBox="20 40 140 100">
+              <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
+            </svg> -->
+    <svg width="140" height="140" viewBox="15 35 140 100">
+      <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
+    </svg>
+  </div>
+
   <h3>
     {{service.name}} {{service.port.host.address}}
   </h3>
@@ -29,10 +38,16 @@
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="service.meta">
-      <ul class="key-value">
+      <ul>
         <li *ngFor="let key of service.meta | objectKeys">
           {{key | stringPrettify}}
-          <span class="meta-value">{{service.meta[key]}}</span>
+
+          <ul class="key-value">
+            <li *ngFor="let skey of service.meta[key] | objectKeys">
+              {{skey | stringPrettify}}
+              <span class="meta-value">{{service.meta[key][skey]}}</span>
+            </li>
+          </ul>
         </li>
       </ul>
     </p-tabPanel>
diff --git a/src/commons/component/zone-detail.component.html b/src/commons/component/zone-detail.component.html
index 0c301fd..e07089d 100644
--- a/src/commons/component/zone-detail.component.html
+++ b/src/commons/component/zone-detail.component.html
@@ -1,4 +1,14 @@
 <div id="detail-view-box">
+
+  <div class="detail-img">
+    <!-- <svg width="200" height="200" viewBox="20 40 140 100">
+              <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
+            </svg> -->
+    <svg width="140" height="140" viewBox="15 35 140 100">
+      <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
+    </svg>
+  </div>
+
   <h3>
     {{zone.network}}
   </h3>