diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css
index 347837a..d2d6f56 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.css
@@ -30,16 +30,58 @@
     fill: none;
 }
 
-svg.embeddedIcon g.icon rect {
-    stroke: none;
-    fill: none;
+.ctrl-btns div svg.embeddedIcon g.icon use {
+    fill: #e0dfd6;
 }
 
-svg.embeddedIcon g.icon .glyph {
-    stroke: none;
-    fill-rule: evenodd;
+.ctrl-btns div.active svg.embeddedIcon g.icon use {
+    fill: #939598;
+}
+.ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
 }
 
-svg.embeddedIcon .icon.appInactive .glyph {
-    fill: none !important;
+.ctrl-btns div.current-view svg.embeddedIcon g.icon rect {
+    fill: #518ecc;
 }
+.ctrl-btns div.current-view svg.embeddedIcon g.icon use {
+    fill: white;
+}
+
+svg.embeddedIcon .icon.active .glyph {
+    fill: #04bf34;
+}
+
+svg.embeddedIcon .icon.inactive .glyph {
+    fill: #c0242b;
+}
+
+svg.embeddedIcon .icon.active-rect .glyph {
+    fill:#939598;
+}
+
+svg.embeddedIcon .icon.active-sort .glyph {
+    fill:#333333;
+}
+
+svg.embeddedIcon g.icon.active-rect:hover use {
+    fill: #ce5b58;
+}
+
+svg.embeddedIcon g.icon.active-type .glyph {
+    fill: #3c3a3a;
+}
+
+svg.embeddedIcon g.icon.active-close:hover use {
+    fill: #ce5b58;
+}
+
+svg.embeddedIcon g.icon.active-close .glyph {
+    fill: #333333;
+}
+
+svg.embeddedIcon g.icon.details-icon .glyph {
+    fill: #0071bd;;
+}
+
+
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html
index 5be4c19..2243dc2 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.component.html
@@ -13,6 +13,7 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
+<div class="tooltip">
 <svg class="embeddedIcon" [attr.width]="iconSize" [attr.height]="iconSize" viewBox="0 0 50 50" (mouseover)="toolTipDisp = toolTip" (mouseout)="toolTipDisp = undefined">
     <g class="icon" [ngClass]="classes">
         <rect width="50" height="50" rx="5"></rect>
@@ -20,4 +21,8 @@
     </g>
 </svg>
 <!-- I'm fixing class as light as view encapsulation changes how the hirerarchy of css is handled -->
-<p id="tooltip" class="light" *ngIf="toolTip" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none' }">{{ toolTipDisp }}</p>
+
+<!-- <p id="tooltip" class="light" *ngIf="toolTip" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none'}">{{ toolTipDisp }}</p> -->
+
+    <span class="tooltiptext" [ngStyle]="{ 'display': toolTipDisp ? 'inline-block':'none'}">{{toolTipDisp}}</span>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css
index 3e6f601..ca6e32e 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/icon.theme.css
@@ -18,28 +18,15 @@
  ONOS GUI -- Icon Service (theme) -- CSS file
  */
 
-.light div.close-btn svg.embeddedIcon g.icon .glyph {
+div.close-btn svg.embeddedIcon g.icon .glyph {
     fill: #333333;
 }
 
 /* Sortable table headers */
-.light div.tableColSort svg.embeddedIcon .icon .glyph {
+div.tableColSort svg.embeddedIcon .icon .glyph {
     fill: #353333;
 }
 
-/* active / inactive (check/xmark) icons */
-.light svg.embeddedIcon .icon.active .glyph {
-    fill: #04bf34;
-}
-
-.light svg.embeddedIcon .icon.inactive .glyph {
-    fill: #c0242b;
-}
-
-.light table svg.embeddedIcon .icon .glyph {
-    fill: #3c3a3a;
-}
-
 /* --- Control Buttons --- */
 
 /* INACTIVE */
@@ -50,9 +37,10 @@
 
 
 /* ACTIVE */
-svg.embeddedIcon g.icon.active use {
+.ctrl-btns div.active svg.embeddedIcon g.icon use {
     fill: #939598;
 }
+
 svg.embeddedIcon g.icon.active:hover use {
     fill: #ce5b58;
 }
@@ -82,25 +70,25 @@
 
 /* ========== DARK Theme ========== */
 
-.dark div.close-btn svg.embeddedIcon g.icon .glyph {
+ div.close-btn svg.embeddedIcon g.icon .glyph {
     fill: #8d8d8d;
 }
 
-.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+ div.tableColSort svg.embeddedIcon .icon .glyph {
     fill: #888888;
 }
 
-.dark svg.embeddedIcon .icon.active .glyph {
+ /*svg.embeddedIcon .icon.active .glyph {
     fill: #04bf34;
 }
-
-.dark svg.embeddedIcon .icon.inactive .glyph {
+ svg.embeddedIcon .icon.inactive .glyph {
     fill: #c0242b;
-}
+}*/
 
-.dark table svg.embeddedIcon .icon .glyph {
+ table svg.embeddedIcon .icon .glyph {
     fill: #9999aa;
 }
+
 /*
 svg.embeddedIcon g.icon .glyph {
     fill: #007dc4;
@@ -109,4 +97,12 @@
 svg.embeddedIcon:hover g.icon .glyph {
     fill: #20b2ff;
 }
-*/
\ No newline at end of file
+*/
+
+svg.embeddedIcon g.icon.devIcon_SWITCH .glyph {
+    fill: #0071bd;;
+}
+
+svg.embeddedIcon g.icon.hostIcon_endstation .glyph {
+    fill: #0071bd;;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
index 74a5443..890f1f8 100644
--- a/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
+++ b/web/gui2/src/main/webapp/app/fw/svg/icon/tooltip.css
@@ -25,6 +25,37 @@
     padding: 5px;
     position: absolute;
     z-index: 5000;
-    display: none;
+    display: inline-block;
     pointer-events: none;
+    top: 40px;
+    right: auto;
+    /* width: 240px; */
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    display: inline-block;
+    visibility: hidden;
+    background-color: #dbeffc;
+    color: #3c3a3a;
+    border-color: #c7c7c0;
+    text-align: center;
+    border-radius: 6px;
+    font-size: 80%;
+    padding: 5px;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 5000;
+    top: 42px;
+    right: 10%;
+    white-space: nowrap;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
 }