diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index b53e270..382cf83 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -58,7 +58,7 @@
   </svg>
 </div>
 
-<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="bottom">
+<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right">
   <div *ngIf="selectedNode">
     <app-node-detail [node]="selectedNode"></app-node-detail>
   </div>
diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index f3df8bd..d0eac6a 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -1,7 +1,6 @@
-<div class="ui-g-12">
+<div class="ui-g-12 detail-view-box">
 
-  <span>{{host.name}}</span>
-  <span>{{host.address}}</span>
+  <h3>{{host.name}} <span>{{host.address}}</span></h3>
 
   <p-tabView>
     <p-tabPanel header="General">
diff --git a/src/commons/component/host-detail.component.scss b/src/commons/component/host-detail.component.scss
index f29b56b..0048296 100644
--- a/src/commons/component/host-detail.component.scss
+++ b/src/commons/component/host-detail.component.scss
@@ -1,20 +1,36 @@
-.key-value {
+.detail-view-box {
+  width: 70%;
+  h3{
+    padding: 20px 0 20px 5px;
+    // padding: 5px;
+    // height: 60px;
+    // span{
+    //   font-size: 0.7em;
+    //   color: #757575;
+    // }
+  }
+  .key-value {
     list-style-type: none;
-    margin: 28px 0 0 0;
+    margin: 0;
     padding: 0;
     box-sizing: border-box;
-    width: 500px;
+    width: 100%;
     li {
     padding: 8px 14px;
     border-bottom: 1px solid #d8dae2;
     position: relative;
     font-weight: bold;
-    width: 180px;
+    width: 100%;
       .meta-value {
         font-weight: 100;
-        position: absolute;
-        width: 300px;
-        right: 40px;
+        position: relative;
+        width: 70%;
+        left: 10px;
       }
     }
+  }
+}
+
+.tab-border-bottom .ui-widget-header {
+    border: 0 !important;
 }
\ 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 ff946a4..81158bf 100644
--- a/src/commons/component/node-detail.component.html
+++ b/src/commons/component/node-detail.component.html
@@ -1,8 +1,10 @@
 <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 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">
diff --git a/src/commons/component/node-detail.component.scss b/src/commons/component/node-detail.component.scss
index fd09d2b..829bab1 100644
--- a/src/commons/component/node-detail.component.scss
+++ b/src/commons/component/node-detail.component.scss
@@ -1,8 +1,17 @@
 .detail-img {
-  display: inline;
+  position: absolute;
+  top: 0px;
+  left: 0px;
   width: 140px;
   padding: 10px;
 }
 .detail-content {
-  display: inline;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  margin: 0 0 0 150px
+  // display: inline;
+  //width: 100%;
+  //margin-left: 150px;
 }
\ 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 7797809..d7bd865 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -1,8 +1,8 @@
-<div class="ui-g-12">
+<div class="ui-g-12 detail-view-box">
 
-  <span>
+  <h3>
     {{service.name}} {{service.port.host.address}}
-  </span>
+  </h3>
 
   <p-tabView>
     <p-tabPanel header="General">
diff --git a/src/commons/component/service-detail.component.scss b/src/commons/component/service-detail.component.scss
index f29b56b..3bd608c 100644
--- a/src/commons/component/service-detail.component.scss
+++ b/src/commons/component/service-detail.component.scss
@@ -1,20 +1,52 @@
-.key-value {
+.detail-view-box {
+  width: 70%;
+  h3{
+    padding: 20px 0 20px 5px;
+    // padding: 5px;
+    // height: 60px;
+  }
+  .key-value {
     list-style-type: none;
-    margin: 28px 0 0 0;
+    margin: 0;
     padding: 0;
     box-sizing: border-box;
-    width: 500px;
+    width: 100%;
     li {
     padding: 8px 14px;
     border-bottom: 1px solid #d8dae2;
     position: relative;
     font-weight: bold;
-    width: 180px;
+    width: 100%;
       .meta-value {
         font-weight: 100;
-        position: absolute;
-        width: 300px;
-        right: 40px;
+        position: relative;
+        width: 70%;
+        left: 10px;
       }
     }
-}
\ No newline at end of file
+  }
+}
+
+.tab-border-bottom .ui-widget-header {
+    border: 0 !important;
+}
+// .key-value {
+//     list-style-type: none;
+//     margin: 28px 0 0 0;
+//     padding: 0;
+//     box-sizing: border-box;
+//     width: 500px;
+//     li {
+//     padding: 8px 14px;
+//     border-bottom: 1px solid #d8dae2;
+//     position: relative;
+//     font-weight: bold;
+//     width: 180px;
+//       .meta-value {
+//         font-weight: 100;
+//         position: absolute;
+//         width: 300px;
+//         right: 40px;
+//       }
+//     }
+// }
\ No newline at end of file
diff --git a/src/commons/component/zone-detail.component.html b/src/commons/component/zone-detail.component.html
index 2207cf3..e52742b 100644
--- a/src/commons/component/zone-detail.component.html
+++ b/src/commons/component/zone-detail.component.html
@@ -1,9 +1,9 @@
-<div class="ui-g-12">
-  <span>
+<div class="ui-g-12 detail-view-box">
+  <h3>
     {{zone.network}}
-  </span>
+  </h3>
 
-  <p-tabView>
+  <p-tabView class="tab-border-bottom">
     <p-tabPanel header="General">
 
       <ul class="key-value">
diff --git a/src/commons/component/zone-detail.component.scss b/src/commons/component/zone-detail.component.scss
index e69de29..6fc7320 100644
--- a/src/commons/component/zone-detail.component.scss
+++ b/src/commons/component/zone-detail.component.scss
@@ -0,0 +1,32 @@
+.detail-view-box {
+  width: 70%;
+  h3{
+    padding: 20px 0 20px 5px;
+    // padding: 5px;
+    // height: 60px;
+  }
+  .key-value {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    width: 100%;
+    li {
+    padding: 8px 14px;
+    border-bottom: 1px solid #d8dae2;
+    position: relative;
+    font-weight: bold;
+    width: 100%;
+      .meta-value {
+        font-weight: 100;
+        position: relative;
+        width: 70%;
+        left: 10px;
+      }
+    }
+  }
+}
+
+.tab-border-bottom .ui-widget-header {
+    border: 0 !important;
+}
\ No newline at end of file