diff --git a/tools/gui/gulp-tasks/bundles/bundle-css/index.js b/tools/gui/gulp-tasks/bundles/bundle-css/index.js
index 0c5c8d6..69c4c70 100644
--- a/tools/gui/gulp-tasks/bundles/bundle-css/index.js
+++ b/tools/gui/gulp-tasks/bundles/bundle-css/index.js
@@ -1,6 +1,7 @@
 import gulp from 'gulp';
 import concat from 'gulp-concat';
 import BundleResources from '../helpers/bundleResources';
+import { reload } from '../../dev-server';
 
 const GUI_BASE = '../../web/gui/src/main/webapp/';
 const bundleFiles = [
@@ -11,10 +12,18 @@
     'app/view/**/*.css',
 ];
 
-const task = gulp.task('bundle-css', function () {
-    return gulp.src(BundleResources(GUI_BASE, bundleFiles))
-        .pipe(concat('onos.css'))
-        .pipe(gulp.dest(GUI_BASE + '/dist/'));
-});
+const task = () => {
 
-export default task;
\ No newline at end of file
+    gulp.task('bundle-css', function () {
+        return gulp.src(BundleResources(GUI_BASE, bundleFiles))
+            .pipe(concat('onos.css'))
+            .pipe(gulp.dest(GUI_BASE + '/dist/'))
+            .on('end', () => { reload(); });
+    });
+
+    gulp.task('watch-css', () => {
+        gulp.watch([GUI_BASE + 'app/**/*.css'], ['bundle-css']);
+    });
+}
+
+export default task();
\ No newline at end of file
diff --git a/tools/gui/gulp-tasks/dev-server/index.js b/tools/gui/gulp-tasks/dev-server/index.js
index 119c3f2..135ee9f 100644
--- a/tools/gui/gulp-tasks/dev-server/index.js
+++ b/tools/gui/gulp-tasks/dev-server/index.js
@@ -42,6 +42,7 @@
             ws: true,
             middleware: [
                 proxy(['**/*.js', '!/onos/ui/onos.js'], { target: 'http://localhost:8189' }),
+                proxy(['**/*.css'], { target: 'http://localhost:8189' }),
                 proxy('**/*.js.map', {
                     target: 'http://localhost:8189',
                     changeOrigin: true,
diff --git a/tools/gui/gulpfile.babel.js b/tools/gui/gulpfile.babel.js
index 24327e0..51aead1 100644
--- a/tools/gui/gulpfile.babel.js
+++ b/tools/gui/gulpfile.babel.js
@@ -3,4 +3,4 @@
 
 gulp.task('build', ['bower', 'bundle-css', 'bundle-js']);
 gulp.task('tests', ['bower', 'test']);
-gulp.task('default', ['bundle-js', 'serve', 'watch-js']);
\ No newline at end of file
+gulp.task('default', ['bundle-js', 'bundle-css', 'serve', 'watch-js', 'watch-css']);
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
index 8ae6c2e..03138c1 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
@@ -258,7 +258,7 @@
 
 #ov-topo2 svg .node.host text {
     stroke: none;
-    font: 9pt sans-serif;
+    font-size: 13px;
     fill: #846;
 }
 
@@ -266,6 +266,7 @@
     stroke: #a3a596;
     fill: #e0dfd6;
 }
+
 #ov-topo2 svg .node.host.selected .hostIcon > circle {
     stroke-width: 2.0;
     stroke: #009fdb;
@@ -275,6 +276,10 @@
     fill: #3c3a3a;
 }
 
+#ov-topo2 svg .node.host rect {
+    fill: #ffffff;
+}
+
 /* --- Topo Links --- */
 
 #ov-topo2 svg .link {
@@ -633,7 +638,7 @@
 
 .dark #ov-topo2 svg .node.host text {
     stroke: none;
-    font: 9pt sans-serif;
+    font-size: 13px;
     fill: #ad5781;
 }
 
@@ -641,6 +646,11 @@
     stroke: #a3a596;
     fill: #8f8272;
 }
+
+.dark #ov-topo2 svg .node.host rect {
+    fill: #525660;
+}
+
 .dark #ov-topo2 svg .node.host.selected .hostIcon > circle {
     stroke-width: 2.0;
     stroke: #009fdb;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
index bd04c7b..4247f64 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
@@ -27,6 +27,7 @@
     var hostIconDim = 15,
         hostIconDimMin = 8,
         hostIconDimMax = 15,
+        labelPadding = 20,
         remappedDeviceTypes = {};
 
     function createHostCollection(data, region) {
@@ -90,6 +91,20 @@
 
                     return labels[idx];
                 },
+                updateLabel: function () {
+                    var node = this.el,
+                        label = this.trimLabel(this.label()),
+                        labelWidth;
+
+                    node.select('text').text(label);
+                    labelWidth = !_.isEmpty(this.label()) ? this.computeLabelWidth(node) + (labelPadding * 2) : 0;
+
+                    node.select('rect')
+                        .transition()
+                        .attr({
+                            width: labelWidth,
+                        });
+                },
                 setScale: function () {
 
                     if (!this.el) return;
@@ -114,13 +129,21 @@
                     var node = d3.select(el),
                         icon = this.icon(),
                         textDy = 5,
-                        textDx = (hostIconDim * 2) + 20;
+                        textDx = (hostIconDim * 2);
 
                     this.el = node;
 
                     var g = node.append('g')
                         .attr('class', 'svgIcon hostIcon');
 
+                    // Add Label background to host
+
+                    var rect = g.append('rect').attr({
+                        width: 0,
+                        height: hostIconDim * 2,
+                        y: - hostIconDim,
+                    });
+
                     g.append('circle').attr('r', hostIconDim);
 
                     var glyphSize = hostIconDim * 1.5;
@@ -138,11 +161,14 @@
                         .text(labelText)
                         .attr('dy', textDy)
                         .attr('dx', textDx)
-                        .attr('text-anchor', 'middle');
+                        .attr('text-anchor', 'left');
 
                     this.setScale();
                     this.setUpEvents();
                     this.setVisibility();
+
+                    var labelWidth = !_.isEmpty(this.label()) ? this.computeLabelWidth(node) + (labelPadding * 2) : 0;
+                    rect.attr({ width: labelWidth });
                 },
             });