diff --git a/web/gui/src/main/webapp/network.js b/web/gui/src/main/webapp/network.js
index b43f32d..2af2e2b 100644
--- a/web/gui/src/main/webapp/network.js
+++ b/web/gui/src/main/webapp/network.js
@@ -87,7 +87,12 @@
             padLR: 8,
             padTB: 6,
             marginLR: 3,
-            marginTB: 2
+            marginTB: 2,
+            port: {
+                gap: 2,
+                width: 12,
+                height: 12
+            }
         },
         icons: {
             w: 32,
@@ -113,7 +118,8 @@
         selected = {},
         highlighted = null,
         hovered = null,
-        viewMode = 'showAll';
+        viewMode = 'showAll',
+        portLabelsOn = false;
 
 
     function debug(what) {
@@ -128,10 +134,13 @@
         return urlData().jsonUrl;
     }
 
+    function safeId(id) {
+        return id.replace(/[^a-z0-9]/gi, '_');
+    }
+
     function detailJsonUrl(id) {
         var u = urlData(),
-            encId = config.useLiveData ? encodeURIComponent(id)
-                : id.replace(/[^a-z0-9]/gi, '_');
+            encId = config.useLiveData ? encodeURIComponent(id) : safeId(id);
         return u.detailPrefix + encId + u.detailSuffix;
     }
 
@@ -303,7 +312,9 @@
     }
 
     function togglePorts() {
-        console.log('Toggle Ports - context = ' + contextLabel());
+        portLabelsOn = !portLabelsOn;
+        var portVis = portLabelsOn ? 'visible' : 'hidden';
+        d3.selectAll('.port').style('visibility', portVis);
     }
 
     function unpin() {
@@ -347,7 +358,7 @@
                 ix = Math.random() * 0.6 * nw + 0.2 * nw,
                 iy = ypc * nh,
                 node = {
-                    id: n.id,
+                    id: safeId(n.id),
                     labels: n.labels,
                     class: 'device',
                     icon: 'device',
@@ -369,7 +380,7 @@
                 ix = Math.random() * 0.6 * nw + 0.2 * nw,
                 iy = ypc * nh,
                 node = {
-                    id: n.id,
+                    id: safeId(n.id),
                     labels: n.labels,
                     class: 'host',
                     icon: 'host',
@@ -390,7 +401,7 @@
         network.data.links.forEach(function(lnk) {
             var src = network.lookup[lnk.src],
                 dst = network.lookup[lnk.dst],
-                id = src.id + "~" + dst.id;
+                id = src.id + "-" + dst.id;
 
             var link = {
                 class: 'infra',
@@ -398,7 +409,9 @@
                 type: lnk.type,
                 width: lnk.linkWidth,
                 source: src,
+                srcPort: lnk.srcPort,
                 target: dst,
+                tgtPort: lnk.dstPort,
                 strength: config.force.linkStrength.infra
             };
             network.links.push(link);
@@ -408,7 +421,7 @@
         network.data.hosts.forEach(function(n) {
             var src = network.lookup[n.id],
                 dst = network.lookup[n.cp.device],
-                id = src.id + "~" + dst.id;
+                id = src.id + "-" + dst.id;
 
             var link = {
                 class: 'host',
@@ -490,13 +503,6 @@
 //        });
 
 
-        // add links to the display
-        network.link = network.svg.append('g').selectAll('.link')
-            .data(network.force.links(), function(d) {return d.id})
-            .enter().append('line')
-            .attr('class', function(d) {return 'link ' + d.class});
-
-
         // TODO: move drag behavior into separate method.
         // == define node drag behavior...
         network.draggedThreshold = d3.scale.linear()
@@ -551,6 +557,53 @@
             }
         });
 
+        // ...............................................................
+
+        // add links to the display
+        network.link = network.svg.append('g').attr('id', 'links')
+            .selectAll('.link')
+            .data(network.force.links(), function(d) {return d.id})
+            .enter().append('line')
+            .attr('class', function(d) {return 'link ' + d.class});
+
+        network.linkSrcPort = network.svg.append('g')
+            .attr({
+                id: 'srcPorts',
+                class: 'portLayer'
+            });
+        network.linkTgtPort = network.svg.append('g')
+            .attr({
+                id: 'tgtPorts',
+                class: 'portLayer'
+            });
+
+        var portVis = portLabelsOn ? 'visible' : 'hidden';
+
+        network.link.filter('.infra').each(function(d, i) {
+            network.linkSrcPort.append('rect').attr({
+                id: 'srcPort-' + d.id,
+                class: 'port',
+                width: 12,
+                height: 12,
+                x: i * 20,
+                y: 0
+            })
+            .style('visibility', portVis)
+                .append('text').text(d.srcPort);
+
+            network.linkTgtPort.append('rect').attr({
+                id: 'tgtPort-' + d.id,
+                class: 'port',
+                width: 12,
+                height: 12,
+                x: i * 20,
+                y: 20
+            })
+            .style('visibility', portVis);
+
+        });
+
+        // ...............................................................
 
         // add nodes to the display
         network.node = network.svg.selectAll('.node')
@@ -659,14 +712,18 @@
 
         // this function is scheduled to happen soon after the given thread ends
         setTimeout(function() {
+            var lab = config.labels,
+                portGap = lab.port.gap,
+                midW = portGap + lab.port.width/ 2,
+                midH = portGap + lab.port.height / 2;
+
             // post process the device nodes, to pad their size to fit the
             // label text and attach the icon to the right location.
             network.node.filter('.device').each(function(d) {
                 // for every node, recompute size, padding, etc. so text fits
                 var node = d3.select(this),
                     text = node.select('text'),
-                    box = adjustRectToFitText(node),
-                    lab = config.labels;
+                    box = adjustRectToFitText(node);
 
                 // now make the computed adjustment
                 node.select('rect')
@@ -676,7 +733,13 @@
                     .attr('x', box.x + config.icons.xoff)
                     .attr('y', box.y + config.icons.yoff);
 
-                var bounds = boundsFromBox(box);
+                var bounds = boundsFromBox(box),
+                    portBounds = {
+                        x1: bounds.x1 - midW,
+                        x2: bounds.x2 + midW,
+                        y1: bounds.y1 - midH,
+                        y2: bounds.y2 + midH
+                    };
 
                 // todo: clean up extent and edge work..
                 d.extent = {
@@ -693,6 +756,21 @@
                     bottom : new geo.LineSegment(bounds.x1, bounds.y2, bounds.x2, bounds.y2)
                 };
 
+                d.portEdge = {
+                    left   : new geo.LineSegment(
+                        portBounds.x1, portBounds.y1, portBounds.x1, portBounds.y2
+                    ),
+                    right  : new geo.LineSegment(
+                        portBounds.x2, portBounds.y1, portBounds.x2, portBounds.y2
+                    ),
+                    top    : new geo.LineSegment(
+                        portBounds.x1, portBounds.y1, portBounds.x2, portBounds.y1
+                    ),
+                    bottom : new geo.LineSegment(
+                        portBounds.x1, portBounds.y2, portBounds.x2, portBounds.y2
+                    )
+                };
+
             });
 
             network.numTicks = 0;
@@ -840,39 +918,71 @@
             preventCollisions();
         }
 
+        var portHalfW = config.labels.port.width / 2,
+            portHalfH = config.labels.port.height / 2;
+
         // clip visualization of links at bounds of nodes...
         network.link.each(function(d) {
-                var xs = d.source.x,
-                    ys = d.source.y,
-                    xt = d.target.x,
-                    yt = d.target.y,
-                    line = new geo.LineSegment(xs, ys, xt, yt),
-                    e, ix;
+            var xs = d.source.x,
+                ys = d.source.y,
+                xt = d.target.x,
+                yt = d.target.y,
+                line = new geo.LineSegment(xs, ys, xt, yt),
+                e, ix,
+                exs, eys, ext, eyt,
+                pxs, pys, pxt, pyt;
 
+            if (d.class === 'host') {
+                // no adjustment for source end of link, since hosts are dots
+                exs = xs;
+                eys = ys;
+
+            } else {
                 for (e in d.source.edge) {
                     ix = line.intersect(d.source.edge[e].offset(xs, ys));
                     if (ix.in1 && ix.in2) {
-                        xs = ix.x;
-                        ys = ix.y;
+                        exs = ix.x;
+                        eys = ix.y;
+
+                        // also pick off the port label intersection
+                        ix = line.intersect(d.source.portEdge[e].offset(xs, ys));
+                        pxs = ix.x;
+                        pys = ix.y;
                         break;
                     }
                 }
+            }
 
-                for (e in d.target.edge) {
-                    ix = line.intersect(d.target.edge[e].offset(xt, yt));
-                    if (ix.in1 && ix.in2) {
-                        xt = ix.x;
-                        yt = ix.y;
-                        break;
-                    }
+            for (e in d.target.edge) {
+                ix = line.intersect(d.target.edge[e].offset(xt, yt));
+                if (ix.in1 && ix.in2) {
+                    ext = ix.x;
+                    eyt = ix.y;
+
+                    // also pick off the port label intersection
+                    ix = line.intersect(d.target.portEdge[e].offset(xt, yt));
+                    pxt = ix.x;
+                    pyt = ix.y;
+                    break;
                 }
+            }
 
-                d3.select(this)
-                    .attr('x1', xs)
-                    .attr('y1', ys)
-                    .attr('x2', xt)
-                    .attr('y2', yt);
-            });
+            // adjust the endpoints of the link's line to match rectangles
+            d3.select(this)
+                .attr('x1', exs)
+                .attr('y1', eys)
+                .attr('x2', ext)
+                .attr('y2', eyt);
+
+            d3.select('#srcPort-' + d.id)
+                .attr('x', pxs - portHalfW)
+                .attr('y', pys - portHalfH);
+
+            d3.select('#tgtPort-' + d.id)
+                .attr('x', pxt - portHalfW)
+                .attr('y', pyt - portHalfH);
+
+        });
 
         // position each node by translating the node (group) by x,y
         network.node
diff --git a/web/gui/src/main/webapp/onos.css b/web/gui/src/main/webapp/onos.css
index bffcc01..15dd6b4 100644
--- a/web/gui/src/main/webapp/onos.css
+++ b/web/gui/src/main/webapp/onos.css
@@ -106,6 +106,12 @@
     Xstroke-dasharray: 3,3;
 }
 
+svg g.portLayer rect.port {
+    stroke-width: 1;
+    stroke: black;
+    fill: white;
+}
+
 svg .node.device rect {
     stroke-width: 1.5px;