diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index 15e6ea5..8ade5c1 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -5,7 +5,9 @@
     </svg> -->
     <div class="svg-div">
       <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" />
+        <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" attr.xlink:href="../../assets/image/icon/icon_{{host.hostType | lowercase}}.svg" />
+        <image *ngIf="host.hostType === 'HOST'" x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice"
+          attr.xlink:href="../../assets/image/logo/logo_{{host.osType | lowercase}}.svg"></image>
       </svg>
     </div>
     <h3>{{host.name}} <span>{{host.address}}</span></h3>
diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html
index 50ae00f..a938f97 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -6,7 +6,8 @@
               </svg> -->
     <div class="svg-div">
       <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" />
+        <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" attr.xlink:href="../../assets/image/icon/icon_{{service.serviceType | lowercase}}.svg" />
+        <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" attr.xlink:href="../../assets/image/logo/logo_{{service.key | lowercase}}.svg" />
       </svg>
     </div>
     <h3>