diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index cc26360..d6a517f 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -149,6 +149,10 @@
             rx: 4
         },
         host: {
+            badge: {
+                dx: 14,
+                dy: -14
+            },
             radius: {
                 noGlyph: 9,
                 withGlyph: 14
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index c8df20e..0319b9b 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -452,7 +452,7 @@
 }
 
 #ov-topo svg .node .badge.badgeInfo circle {
-    fill: #ccf;
+    fill: #99d;
 }
 
 #ov-topo svg .node .badge.badgeWarn circle {
@@ -464,7 +464,7 @@
 }
 
 #ov-topo svg .node .badge use {
-    fill: white;
+    fill: white !important;
 }
 
 #ov-topo svg .node .badge.badgeInfo use {
@@ -472,7 +472,7 @@
 }
 
 #ov-topo svg .node .badge text {
-    fill: white;
+    fill: white !important;
 }
 
 #ov-topo svg .node .badge.badgeInfo text {
diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index 168e9ce..5bf2eb4 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -200,7 +200,6 @@
         };
     }
 
-
     function updateDeviceRendering(d) {
         var label = trimLabel(deviceLabel(d)),
             noLabel = !label,
@@ -237,76 +236,50 @@
 
         // handle badge, if defined
         if (bdg) {
-            node.select('g.badge').remove();
-
-            bsel = node.append('g')
-                .classed('badge', true)
-                .classed(badgeStatus(bdg), true)
-                .attr('transform', sus.translate(dx + dim, dy));
-
-            bsel.append('circle')
-                .attr('r', bcr);
-
-            if (bdg.txt) {
-                bsel.append('text')
-                    .attr('dy', badgeConfig.yoff)
-                    .attr('text-anchor', 'middle')
-                    .text(bdg.txt);
-            } else if (bdg.gid) {
-                bsel.append('use')
-                    .attr({
-                        width: bcgd * 2,
-                        height: bcgd * 2,
-                        transform: sus.translate(-bcgd, -bcgd),
-                        'xlink:href': '#' + bdg.gid
-                    });
-
-            }
+            renderBadge(node, bdg, { dx: dx + dim, dy: dy });
         }
     }
 
     function updateHostRendering(d) {
         var node = d.el,
-            dim = icfg.host.radius.withGlyph,
-            box, dx, dy, bsel,
-            bdg = d.badge,
-            bcr = badgeConfig.radius,
-            bcgd = badgeConfig.gdelta;
-
+            bdg = d.badge;
 
         updateHostLabel(d);
-        
-        // TODO: fine-tune dx, dy for badge placement relative to host Circle.
-            dx = -dim/2;
-            dy = -dim/2;
 
         // handle badge, if defined
         if (bdg) {
-            node.select('g.badge').remove();
+            renderBadge(node, bdg, icfg.host.badge);
+        }
+    }
 
-            bsel = node.append('g')
-                .classed('badge', true)
-                .classed(badgeStatus(bdg), true)
-                .attr('transform', sus.translate(dx + dim, dy));
+    function renderBadge(node, bdg, boff) {
+        var bsel,
+            bcr = badgeConfig.radius,
+            bcgd = badgeConfig.gdelta;
 
-            bsel.append('circle')
-                .attr('r', bcr);
+        node.select('g.badge').remove();
 
-            if (bdg.txt) {
-                bsel.append('text')
-                    .attr('dy', badgeConfig.yoff)
-                    .attr('text-anchor', 'middle')
-                    .text(bdg.txt);
-            } else if (bdg.gid) {
-                bsel.append('use')
-                    .attr({
-                        width: bcgd * 2,
-                        height: bcgd * 2,
-                        transform: sus.translate(-bcgd, -bcgd),
-                        'xlink:href': '#' + bdg.gid
-                    });
+        bsel = node.append('g')
+            .classed('badge', true)
+            .classed(badgeStatus(bdg), true)
+            .attr('transform', sus.translate(boff.dx, boff.dy));
 
-            }
+        bsel.append('circle')
+            .attr('r', bcr);
+
+        if (bdg.txt) {
+            bsel.append('text')
+                .attr('dy', badgeConfig.yoff)
+                .attr('text-anchor', 'middle')
+                .text(bdg.txt);
+        } else if (bdg.gid) {
+            bsel.append('use')
+                .attr({
+                    width: bcgd * 2,
+                    height: bcgd * 2,
+                    transform: sus.translate(-bcgd, -bcgd),
+                    'xlink:href': '#' + bdg.gid
+                });
         }
     }
 
diff --git a/web/gui/src/test/_karma/ev/badges/ev_10_addHost_02.json b/web/gui/src/test/_karma/ev/badges/ev_10_addHost_02.json
new file mode 100644
index 0000000..db17014
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/badges/ev_10_addHost_02.json
@@ -0,0 +1,21 @@
+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:97/-1",
+    "ingress": "0E:2A:69:30:13:97/-1/0-of:0000000000000002/3",
+    "egress": "of:0000000000000002/3-0E:2A:69:30:13:97/-1/0",
+    "cp": {
+      "device": "of:0000000000000002",
+      "port": 3
+    },
+    "labels": [
+      "192.168.0.2",
+      "0E:2A:69:30:13:97"
+    ],
+    "metaUi": {
+      "x": 340,
+      "y": 100
+    },
+    "props": {}
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/badges/ev_11_addHost_03.json b/web/gui/src/test/_karma/ev/badges/ev_11_addHost_03.json
new file mode 100644
index 0000000..5038df1
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/badges/ev_11_addHost_03.json
@@ -0,0 +1,21 @@
+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:a8/-1",
+    "ingress": "0E:2A:69:30:13:a8/-1/0-of:0000000000000002/4",
+    "egress": "of:0000000000000002/4-0E:2A:69:30:13:a8/-1/0",
+    "cp": {
+      "device": "of:0000000000000002",
+      "port": 4
+    },
+    "labels": [
+      "192.168.0.3",
+      "0E:2A:69:30:13:a8"
+    ],
+    "metaUi": {
+      "x": 480,
+      "y": 90
+    },
+    "props": {}
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/badges/ev_11_showHighlights_clear.json b/web/gui/src/test/_karma/ev/badges/ev_12_showHighlights_clear.json
similarity index 100%
rename from web/gui/src/test/_karma/ev/badges/ev_11_showHighlights_clear.json
rename to web/gui/src/test/_karma/ev/badges/ev_12_showHighlights_clear.json
diff --git a/web/gui/src/test/_karma/ev/badges/ev_10_showHighlights_stuff.json b/web/gui/src/test/_karma/ev/badges/ev_13_showHighlights_devices.json
similarity index 100%
rename from web/gui/src/test/_karma/ev/badges/ev_10_showHighlights_stuff.json
rename to web/gui/src/test/_karma/ev/badges/ev_13_showHighlights_devices.json
diff --git a/web/gui/src/test/_karma/ev/badges/ev_14_showHighlights_hosts.json b/web/gui/src/test/_karma/ev/badges/ev_14_showHighlights_hosts.json
new file mode 100644
index 0000000..a935496
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/badges/ev_14_showHighlights_hosts.json
@@ -0,0 +1,32 @@
+{
+  "event": "showHighlights",
+  "payload": {
+    "devices": [],
+    "hosts": [
+      {
+        "id": "0E:2A:69:30:13:86/-1",
+        "badge": {
+          "status": "e",
+          "txt": "99",
+          "msg": "cadbury's flake"
+        }
+      },
+      {
+        "id": "0E:2A:69:30:13:97/-1",
+        "badge": {
+          "status": "i",
+          "gid": "xMark",
+          "msg": "x marks the spot"
+        }
+      },
+      {
+        "id": "0E:2A:69:30:13:a8/-1",
+        "badge": {
+          "status": "w",
+          "gid": "crown"
+        }
+      }
+    ],
+    "links": []
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/badges/ev_11_showHighlights_clear.json b/web/gui/src/test/_karma/ev/badges/ev_15_showHighlights_clear.json
similarity index 100%
copy from web/gui/src/test/_karma/ev/badges/ev_11_showHighlights_clear.json
copy to web/gui/src/test/_karma/ev/badges/ev_15_showHighlights_clear.json
diff --git a/web/gui/src/test/_karma/ev/badges/ev_9_addHost_01.json b/web/gui/src/test/_karma/ev/badges/ev_9_addHost_01.json
new file mode 100644
index 0000000..9604606
--- /dev/null
+++ b/web/gui/src/test/_karma/ev/badges/ev_9_addHost_01.json
@@ -0,0 +1,21 @@
+{
+  "event": "addHost",
+  "payload": {
+    "id": "0E:2A:69:30:13:86/-1",
+    "ingress": "0E:2A:69:30:13:86/-1/0-of:0000000000000001/2",
+    "egress": "of:0000000000000001/2-0E:2A:69:30:13:86/-1/0",
+    "cp": {
+      "device": "of:0000000000000001",
+      "port": 2
+    },
+    "labels": [
+      "192.168.0.1",
+      "0E:2A:69:30:13:86"
+    ],
+    "metaUi": {
+      "x": 210,
+      "y": 100
+    },
+    "props": {}
+  }
+}
diff --git a/web/gui/src/test/_karma/ev/badges/ev_9_showHighlights_clear.json b/web/gui/src/test/_karma/ev/badges/ev_9_showHighlights_clear.json
deleted file mode 100644
index 615efd2..0000000
--- a/web/gui/src/test/_karma/ev/badges/ev_9_showHighlights_clear.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "event": "showHighlights",
-  "payload": {
-    "devices": [],
-    "hosts": [],
-    "links": []
-  }
-}
diff --git a/web/gui/src/test/_karma/ev/badges/scenario.json b/web/gui/src/test/_karma/ev/badges/scenario.json
index ae093d6..c5bad4f 100644
--- a/web/gui/src/test/_karma/ev/badges/scenario.json
+++ b/web/gui/src/test/_karma/ev/badges/scenario.json
@@ -1,12 +1,12 @@
 {
   "comments": [
-    "Demo of adding badges to devices"
+    "Demo of adding badges to devices and hosts"
   ],
   "title": "Demo adding badges",
   "params": {
-    "lastAuto": 9
+    "lastAuto": 12
   },
   "description": [
-    "Demonstrate the device badging feature."
+    "Demonstrate the device/host badging feature."
   ]
 }