diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index 587fcf6..052ef61 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -21,40 +21,25 @@
 /* --- Base SVG Layer --- */
 
 .light #ov-topo svg {
-    background-color: #fff;
-}
-.dark #ov-topo svg {
-    background-color: #2b2b2b;
+    background-color: #f4f4f4;
 }
 
 /* --- "No Devices" Layer --- */
 
 .light #ov-topo svg .noDevsBird {
-    fill: #ecd;
-}
-.dark #ov-topo svg .noDevsBird {
-    fill: #683434;
+    fill: #db7773;
 }
 
 .light #ov-topo svg #topo-noDevsLayer text {
-    fill: #dde;
-}
-.dark #ov-topo svg #topo-noDevsLayer text {
-    fill: #3b3b4f;
+    fill: #7e9aa8;
 }
 
 /* --- Topo Map --- */
 
-#ov-topo svg #topo-map {
-    stroke-width: 2px;
-    fill: transparent;
-}
-
 .light #ov-topo svg #topo-map {
-    stroke: #ddd;
-}
-.dark #ov-topo svg #topo-map {
-    stroke: #444;
+    stroke-width: 2px;
+    stroke: #f4f4f4;
+    fill: #e5e5e6;
 }
 
 /* --- general topo-panel styling --- */
@@ -62,30 +47,18 @@
 .light .topo-p svg .glyph {
     fill: #222;
 }
-.dark .topo-p svg .glyph {
-    fill: #ddd;
-}
 
 .light .topo-p svg .glyph.overlay {
     fill: #fff;
 }
-.dark .topo-p svg .glyph.overlay {
-    fill: #222;
-}
 
 .light .topo-p h2 {
     color: black;
 }
-.dark .topo-p h2 {
-    color: #ddd;
-}
 
 .light .topo-p h3 {
     color: black;
 }
-.dark .topo-p h3 {
-    color: #ddd;
-}
 
 .topo-p td.label {
     /* works for both light and dark themes ... */
@@ -98,85 +71,70 @@
     background-color: #ccc;
     color: #ccc;
 }
-.dark .topo-p hr {
-    background-color: #888;
-    color: #888;
-}
 
 /* --- Topo Instance Panel --- */
 
 #topo-p-instance svg rect {
-    stroke-width: 3.5;
+    stroke-width: 0;
 }
 #topo-p-instance .online svg rect {
     opacity: 1;
 }
 .light #topo-p-instance svg rect {
-    fill: #ccc;
-    stroke: #aaa;
+    fill: #fbfbfb;
 }
+/* body of an instance */
 .light #topo-p-instance .online svg rect {
-    fill: #9cf;
-    stroke: #555;
-}
-.dark #topo-p-instance svg rect {
-    fill: #666;
-    stroke: #222;
-}
-.dark #topo-p-instance .online svg rect {
-    fill: #9cf;
-    stroke: #999;
+    fill: #fbfbfb;
 }
 
 
 #topo-p-instance svg .glyph {
-    fill: #888;
-    fill-rule: evenodd;
+    fill: #fff;
 }
 #topo-p-instance .online svg .glyph {
-    fill: #000;
+    fill: #fff;
 }
 
 
+/* offline */
 #topo-p-instance svg .badgeIcon {
-    fill-rule: evenodd;
     opacity: 0.4;
 }
 .light #topo-p-instance svg .badgeIcon {
-    fill: #777;
-}
-.dark #topo-p-instance svg .badgeIcon {
-    fill: #555;
+    fill: #939598;
 }
 
+/* online */
 #topo-p-instance .online svg .badgeIcon {
     opacity: 1.0;
 }
 .light #topo-p-instance .online svg .badgeIcon {
-    fill: #fff;
+    fill: #939598;
 }
-.dark #topo-p-instance .online svg .badgeIcon {
-    fill: #fff;
+.light #topo-p-instance .online svg .badgeIcon.bird {
+    fill: #ffffff;
+}
+
+#topo-p-instance svg .readyBadge {
+    visibility: hidden;
+}
+#topo-p-instance .ready svg .readyBadge {
+    visibility: visible;
 }
 
 #topo-p-instance svg text {
-    text-anchor: middle;
-    opacity: 0.3;
+    text-anchor: left;
+    opacity: 0.5;
 }
 #topo-p-instance .online svg text {
     opacity: 1.0;
 }
 .light #topo-p-instance svg text {
-    fill: #444;
+    fill: #3c3a3a;
 }
 .light #topo-p-instance .online svg text {
-    fill: #eee;
-}
-.dark #topo-p-instance svg text {
-    fill: #aaa;
-}
-.dark #topo-p-instance .online svg text {
-    fill: #ccc;
+    fill: #3c3a3a;
 }
 
 #topo-p-instance .onosInst.mastership {
@@ -188,15 +146,10 @@
 .light #topo-p-instance .onosInst.mastership.affinity svg rect {
     filter: url(#blue-glow);
 }
-.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
-    filter: url(#yellow-glow);
-}
+
 .light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
     filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
 }
-.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
 
 /* --- Topo Nodes --- */
 
@@ -213,19 +166,19 @@
     fill: #f90;
     filter: url(#blue-glow);
 }
-.dark #ov-topo svg .node.selected rect,
-.dark #ov-topo svg .node.selected circle {
-    fill: #f90;
-    filter: url(#yellow-glow);
-}
+/*.dark #ov-topo svg .node.selected rect,*/
+/*.dark #ov-topo svg .node.selected circle {*/
+    /*fill: #f90;*/
+    /*filter: url(#yellow-glow);*/
+/*}*/
 .light.firefox #ov-topo svg .node.selected rect,
 .light.firefox #ov-topo svg .node.selected circle {
     filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
 }
-.dark.firefox #ov-topo svg .node.selected rect,
-.dark.firefox #ov-topo svg .node.selected circle {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
+/*.dark.firefox #ov-topo svg .node.selected rect,*/
+/*.dark.firefox #ov-topo svg .node.selected circle {*/
+    /*filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");*/
+/*}*/
 
 /* Device Nodes */
 
@@ -239,17 +192,11 @@
 .light #ov-topo svg .node.device.fixed rect {
     stroke: #aaa;
 }
-.dark #ov-topo svg .node.device.fixed rect {
-    stroke: #999;
-}
 
 /* note: device is offline without the 'online' class */
 .light #ov-topo svg .node.device {
     fill: #777;
 }
-.dark #ov-topo svg .node.device {
-    fill: #555;
-}
 
 .light #ov-topo svg .node.device rect {
     stroke: #666;
@@ -261,14 +208,10 @@
 .light #ov-topo svg .node.device.online {
     fill: #6e7fa3;
 }
-.dark #ov-topo svg .node.device.online {
-    fill: #4E5C7F;
-}
 
 /* note: device is offline without the 'online' class */
 #ov-topo svg .node.device text {
     fill: #bbb;
-    font: 10pt sans-serif;
 }
 
 #ov-topo svg .node.device.online text {
@@ -340,25 +283,15 @@
 .light #ov-topo svg .node.host text {
     fill: #846;
 }
-.dark #ov-topo svg .node.host text {
-    fill: #BB809D;
-}
 
 .light svg .node.host circle {
     stroke: #000;
     fill: #edb;
 }
-.dark svg .node.host circle {
-    stroke: #eee;
-    fill: #B2A180;
-}
 
 .light svg .node.host .svgIcon {
     fill: #444;
 }
-.dark svg .node.host .svgIcon {
-    fill: #222;
-}
 
 /* --- Topo Links --- */
 
@@ -374,25 +307,25 @@
 .light #ov-topo svg .link.enhanced {
     filter: url(#blue-glow);
 }
-.dark #ov-topo svg .link.selected,
-.dark #ov-topo svg .link.enhanced {
-    filter: url(#yellow-glow);
-}
+/*.dark #ov-topo svg .link.selected,*/
+/*.dark #ov-topo svg .link.enhanced {*/
+    /*filter: url(#yellow-glow);*/
+/*}*/
 .light.firefox #ov-topo svg .link.selected,
 .light.firefox #ov-topo svg .link.enhanced {
     filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
 }
-.dark.firefox #ov-topo svg .link.selected,
-.dark.firefox #ov-topo svg .link.enhanced {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+/*.dark.firefox #ov-topo svg .link.selected,*/
+/*.dark.firefox #ov-topo svg .link.enhanced {*/
+    /*filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");*/
 
-}
+/*}*/
 
 #ov-topo svg .link.inactive {
     opacity: .5;
     stroke-dasharray: 8 4;
 }
-/* FIXME: Review for not-permitted links */
+/* TODO: Review for not-permitted links */
 #ov-topo svg .link.not-permitted {
     stroke: rgb(255,0,0);
     stroke-width: 5.0;
@@ -405,9 +338,6 @@
 .light #ov-topo svg .link.secondary {
     stroke: rgba(0,153,51,0.5);
 }
-.dark #ov-topo svg .link.secondary {
-    stroke: rgba(121,231,158,0.5);
-}
 
 /* Port traffic color visualization for Kbps, Mbps, and Gbps */
 
@@ -415,37 +345,21 @@
     stroke: rgb(0,153,51);
     stroke-width: 5.0;
 }
-.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
-    stroke: rgb(98, 153, 118);
-    stroke-width: 5.0;
-}
 
 .light #ov-topo svg .link.secondary.port-traffic-Mbps {
     stroke: rgb(128,145,27);
     stroke-width: 6.5;
 }
-.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
-    stroke: rgb(91, 109, 54);
-    stroke-width: 6.5;
-}
 
 .light #ov-topo svg .link.secondary.port-traffic-Gbps {
     stroke: rgb(255, 137, 3);
     stroke-width: 8.0;
 }
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
-    stroke: rgb(174, 119, 55);
-    stroke-width: 8.0;
-}
 
 .light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
     stroke: rgb(183, 30, 21);
     stroke-width: 8.0;
 }
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
-    stroke: rgb(127, 40, 39);
-    stroke-width: 8.0;
-}
 
 
 
@@ -470,9 +384,6 @@
 .light #ov-topo svg .link.primary {
     stroke: #ffA300;
 }
-.dark #ov-topo svg .link.primary {
-    stroke: #D58E0F;
-}
 
 #ov-topo svg .link.secondary.optical {
     stroke-width: 4px;
@@ -480,9 +391,6 @@
 .light #ov-topo svg .link.secondary.optical {
     stroke: rgba(128,64,255,0.5);
 }
-.dark #ov-topo svg .link.secondary.optical {
-    stroke: rgba(164,139,215,0.5);
-}
 
 #ov-topo svg .link.primary.optical {
     stroke-width: 6px;
@@ -490,9 +398,6 @@
 .light #ov-topo svg .link.primary.optical {
     stroke: #74f;
 }
-.dark #ov-topo svg .link.primary.optical {
-    stroke: #7352CD;
-}
 
 /* Link Labels */
 #ov-topo svg .linkLabel rect {
@@ -501,16 +406,10 @@
 .light #ov-topo svg .linkLabel rect {
     fill: #eee;
 }
-.dark #ov-topo svg .linkLabel rect {
-    fill: #555;
-}
 
 .light #ov-topo svg .linkLabel text {
     fill: #444;
 }
-.dark #ov-topo svg .linkLabel text {
-    fill: #eee;
-}
 
 /* Port Labels */
 
@@ -520,16 +419,10 @@
 .light #ov-topo svg .portLabel rect {
     fill: #eee;
 }
-.dark #ov-topo svg .portLabel rect {
-    fill: #222;
-}
 
 .light #ov-topo svg .portLabel text {
     fill: #444;
 }
-.dark #ov-topo svg .portLabel text {
-    fill: #eee;
-}
 
 /* Number of Links Labels */
 
@@ -537,9 +430,6 @@
 .light #ov-topo text.numLinkText {
     fill: #444;
 }
-.dark #ov-topo text.numLinkText {
-    fill: #eee;
-}
 
 /* ------------------------------------------------- */
 /* Sprite Layer */
@@ -548,60 +438,31 @@
     stroke: #fda;
     fill: none;
 }
-.dark #ov-topo svg #topo-sprites .gold1 use {
-    stroke: #541;
-    fill: none;
-}
 .light #ov-topo svg #topo-sprites .gold1 text {
     fill: #eda;
 }
-.dark #ov-topo svg #topo-sprites .gold1 text {
-    fill: #543;
-}
 
 .light #ov-topo svg #topo-sprites .blue1 use {
     stroke: #bbd;
     fill: none;
 }
-.dark #ov-topo svg #topo-sprites .blue1 use {
-    stroke: #445;
-    fill: none;
-}
 .light #ov-topo svg #topo-sprites .blue1 text {
     fill: #cce;
 }
-.dark #ov-topo svg #topo-sprites .blue1 text {
-    fill: #446;
-}
 
 .light #ov-topo svg #topo-sprites .gray1 use {
     stroke: #ccc;
     fill: none;
 }
-.dark #ov-topo svg #topo-sprites .gray1 use {
-    stroke: #333;
-    fill: none;
-}
 .light #ov-topo svg #topo-sprites .gray1 text {
     fill: #ddd;
 }
-.dark #ov-topo svg #topo-sprites .gray1 text {
-    fill: #444;
-}
 
 /* fills */
 .light #ov-topo svg #topo-sprites use.fill-gray2 {
     fill: #eee;
 }
-.dark #ov-topo svg #topo-sprites use.fill-gray2 {
-    fill: #444;
-}
 
 .light #ov-topo svg #topo-sprites use.fill-blue2 {
     fill: #bce;
 }
-.dark #ov-topo svg #topo-sprites use.fill-blue2 {
-    fill: #447;
-}
-
-/* -- MISC -- */