diff --git a/web/gui/src/main/java/org/onlab/onos/gui/TopologyResource.java b/web/gui/src/main/java/org/onlab/onos/gui/TopologyResource.java
index e8f147d..4b2e93c 100644
--- a/web/gui/src/main/java/org/onlab/onos/gui/TopologyResource.java
+++ b/web/gui/src/main/java/org/onlab/onos/gui/TopologyResource.java
@@ -94,14 +94,18 @@
         DeviceService deviceService = get(DeviceService.class);
         Device device = deviceService.getDevice(deviceId);
         Annotations annot = device.annotations();
+        int portCount = deviceService.getPorts(deviceId).size();
         ObjectNode r = json(deviceId.toString(),
+                            device.type().toString().toLowerCase(),
                             new Prop("Name", annot.value("name")),
                             new Prop("Vendor", device.manufacturer()),
                             new Prop("H/W Version", device.hwVersion()),
                             new Prop("S/W Version", device.swVersion()),
                             new Prop("S/W Version", device.serialNumber()),
+                            new Separator(),
                             new Prop("Latitude", annot.value("latitude")),
-                            new Prop("Longitude", annot.value("longitude")));
+                            new Prop("Longitude", annot.value("longitude")),
+                            new Prop("Ports", Integer.toString(portCount)));
         return Response.ok(r.toString()).build();
     }
 
@@ -110,18 +114,20 @@
         HostService hostService = get(HostService.class);
         Host host = hostService.getHost(hostId);
         Annotations annot = host.annotations();
-        ObjectNode r = json(hostId.toString(),
+        ObjectNode r = json(hostId.toString(), "host",
                             new Prop("MAC", host.mac().toString()),
                             new Prop("IP", host.ipAddresses().toString()),
+                            new Separator(),
                             new Prop("Latitude", annot.value("latitude")),
                             new Prop("Longitude", annot.value("longitude")));
         return Response.ok(r.toString()).build();
     }
 
     // Produces JSON property details.
-    private ObjectNode json(String id, Prop... props) {
+    private ObjectNode json(String id, String type, Prop... props) {
         ObjectMapper mapper = new ObjectMapper();
-        ObjectNode result = mapper.createObjectNode().put("id", id);
+        ObjectNode result = mapper.createObjectNode()
+                .put("id", id).put("type", type);
         ObjectNode pnode = mapper.createObjectNode();
         ArrayNode porder = mapper.createArrayNode();
         for (Prop p : props) {
@@ -273,13 +279,19 @@
     }
 
     // Auxiliary key/value carrier.
-    private final class Prop {
+    private class Prop {
         private final String key;
         private final String value;
 
-        private Prop(String key, String value) {
+        protected Prop(String key, String value) {
             this.key = key;
             this.value = value;
         }
     }
+
+    private class Separator extends Prop {
+        protected Separator() {
+            super("-", "");
+        }
+    }
 }
diff --git a/web/gui/src/main/webapp/img/onos-logo.png b/web/gui/src/main/webapp/img/onos-logo.png
index 5e0e5a8..b8e0651 100644
--- a/web/gui/src/main/webapp/img/onos-logo.png
+++ b/web/gui/src/main/webapp/img/onos-logo.png
Binary files differ
diff --git a/web/gui/src/main/webapp/img/roadm.png b/web/gui/src/main/webapp/img/roadm.png
new file mode 100644
index 0000000..75ff527
--- /dev/null
+++ b/web/gui/src/main/webapp/img/roadm.png
Binary files differ
diff --git a/web/gui/src/main/webapp/img/switch.png b/web/gui/src/main/webapp/img/switch.png
new file mode 100644
index 0000000..d608153
--- /dev/null
+++ b/web/gui/src/main/webapp/img/switch.png
Binary files differ
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 9e91669..337eca7 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -39,7 +39,7 @@
 <body>
     <div id="frame">
         <div id="mast">
-            <img id="logo" src="img/onos-logo.png" width="60" height="38">
+            <img id="logo" src="img/onos-logo.png">
             <span class="title">Open Network Operating System</span>
             <span id="displayModes" class="right">
                 <span id="showAll" class="radio active">All Layers</span>
diff --git a/web/gui/src/main/webapp/json/of_0000000000000001.json b/web/gui/src/main/webapp/json/of_0000000000000001.json
index c484812..719af80 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000001.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000001.json
@@ -1,13 +1,13 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000001",
-    "propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
+    "type": "roadm",
+    "propOrder": [ "name", "type", "-", "dpid", "latitude", "longitude", "allowed" ],
     "props": {
         "allowed": true,
         "latitude": 37.6,
         "longitude": 122.3,
         "name": "SFO-W10",
-        "dpid": "00:00:00:00:00:00:00:01",
-        "type": "Roadm"
+        "dpid": "00:00:00:00:00:00:00:01"
     }
 }
diff --git a/web/gui/src/main/webapp/json/of_0000000000000002.json b/web/gui/src/main/webapp/json/of_0000000000000002.json
index 049329d..a6b0e7c 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000002.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000002.json
@@ -1,6 +1,7 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000002",
+    "type": "switch",
     "propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
     "props": {
         "allowed": true,
diff --git a/web/gui/src/main/webapp/json/of_0000000000000003.json b/web/gui/src/main/webapp/json/of_0000000000000003.json
index 8561cf4..9fd2790 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000003.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000003.json
@@ -1,6 +1,7 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000003",
+    "type": "switch",
     "propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
     "props": {
         "allowed": true,
diff --git a/web/gui/src/main/webapp/json/of_0000000000000004.json b/web/gui/src/main/webapp/json/of_0000000000000004.json
index eb03114..f3f2132 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000004.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000004.json
@@ -1,6 +1,7 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000004",
+    "type": "switch",
     "propOrder": [ "name", "type", "dpid", "latitude", "longitude", "allowed" ],
     "props": {
         "allowed": true,
diff --git a/web/gui/src/main/webapp/json/of_0000000000000011.json b/web/gui/src/main/webapp/json/of_0000000000000011.json
index 0e73a57..5792dab 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000011.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000011.json
@@ -1,6 +1,7 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000011",
+    "type": "switch",
     "propOrder": [ "name", "type", "dpid", "optLink" ],
     "props": {
         "name": "SFO-pkt",
diff --git a/web/gui/src/main/webapp/json/of_0000000000000012.json b/web/gui/src/main/webapp/json/of_0000000000000012.json
index 2a00e0c..b65163e 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000012.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000012.json
@@ -1,6 +1,7 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000012",
+    "type": "switch",
     "propOrder": [ "name", "type", "dpid", "optLink" ],
     "props": {
         "name": "SJC-pkt",
diff --git a/web/gui/src/main/webapp/json/of_0000000000000013.json b/web/gui/src/main/webapp/json/of_0000000000000013.json
index b71738a..ba96b07 100644
--- a/web/gui/src/main/webapp/json/of_0000000000000013.json
+++ b/web/gui/src/main/webapp/json/of_0000000000000013.json
@@ -1,6 +1,7 @@
 {
     "comment": "sample device properties",
     "id": "of:0000000000000013",
+    "type": "switch",
     "propOrder": [ "name", "type", "dpid", "optLink" ],
     "props": {
         "name": "LAX-pkt",
diff --git a/web/gui/src/main/webapp/network.js b/web/gui/src/main/webapp/network.js
index 3c7507a..578aa3a 100644
--- a/web/gui/src/main/webapp/network.js
+++ b/web/gui/src/main/webapp/network.js
@@ -37,10 +37,10 @@
                 layering: true,
                 collisionPrevention: true
             },
-            XjsonUrl: 'rs/topology/graph',
-            XjsonPrefix: '',
-            jsonUrl: 'json/network.json',
-            jsonPrefix: 'json/',
+            jsonUrl: 'rs/topology/graph',
+            jsonPrefix: '',
+            XjsonUrl: 'json/network.json',
+            XjsonPrefix: 'json/',
             iconUrl: {
                 device: 'img/device.png',
                 host: 'img/host.png',
@@ -239,6 +239,9 @@
     function processKeyEvent() {
         var code = d3.event.keyCode;
         switch (code) {
+            case 71:    // G
+                cycleLayout();
+                break;
             case 76:    // L
                 cycleLabels();
                 break;
@@ -252,6 +255,11 @@
 
     }
 
+    function cycleLayout() {
+        config.options.layering = !config.options.layering;
+        network.force.resume();
+    }
+
     function cycleLabels() {
         console.log('Cycle Labels - context = ' + contextLabel());
     }
@@ -689,7 +697,8 @@
     }
 
     function iconUrl(d) {
-        return config.iconUrl[d.icon];
+        return 'img/' + d.type + '.png';
+//        return config.iconUrl[d.icon];
     }
 
     function translate(x, y) {
@@ -928,17 +937,29 @@
     function displayDetails(data, pane) {
         $('#flyout').empty();
 
-        pane.append('h2').text(data.id);
-
-        var table = pane.append("table"),
+        var title = pane.append("h2"),
+            table = pane.append("table"),
             tbody = table.append("tbody");
 
+        $('<img src="img/' + data.type + '.png">').appendTo(title);
+        $('<span>').attr('class', 'icon').text(data.id).appendTo(title);
+
+
         // TODO: consider using d3 data bind to TR/TD
 
         data.propOrder.forEach(function(p) {
-            addProp(tbody, p, data.props[p]);
+            if (p === '-') {
+                addSep(tbody);
+            } else {
+                addProp(tbody, p, data.props[p]);
+            }
         });
 
+        function addSep(tbody) {
+            var tr = tbody.append('tr');
+            $('<hr>').appendTo(tr.append('td').attr('colspan', 2));
+        }
+
         function addProp(tbody, label, value) {
             var tr = tbody.append('tr');
 
diff --git a/web/gui/src/main/webapp/onos.css b/web/gui/src/main/webapp/onos.css
index 06e5b63..3c1fb07 100644
--- a/web/gui/src/main/webapp/onos.css
+++ b/web/gui/src/main/webapp/onos.css
@@ -28,11 +28,17 @@
  * Classes
  */
 
+img#logo {
+    height: 38px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
 span.title {
-    color: #37b;
+    color: #369;
     font-size: 14pt;
     font-style: italic;
-    vertical-align: 10px;
+    vertical-align: 12px;
 }
 
 span.radio {
@@ -41,6 +47,8 @@
 }
 
 span.right {
+    padding-top: 8px;
+    padding-right: 16px;
     float: right;
 }
 
@@ -89,14 +97,13 @@
 }
 
 svg .link.host {
-    stroke: #6a6;
-    stroke-dasharray: 3,3;
+    stroke: #666;
+    stroke-width: 1px;
+    Xstroke-dasharray: 3,3;
 }
 
 svg .node.device rect {
-    stroke-width: 3.0px;
-    stroke: white;
-    stroke-dasharray: 2,2;
+    stroke-width: 1.5px;
 
     transition: opacity 250ms;
     -webkit-transition: opacity 250ms;
@@ -104,19 +111,21 @@
 }
 
 svg .node.device.fixed rect {
-    stroke-width: 0;
+    stroke-width: 1.5;
+    stroke: #ccc;
+    Xstroke-dasharray: 4,2;
 }
 
 svg .node.device.roadm rect {
-    fill: #229;
+    fill: #03c;
 }
 
 svg .node.device.switch rect {
-    fill: #55f;
+    fill: #06f;
 }
 
 svg .node.host circle {
-    fill: #898;
+    fill: #c96;
     stroke: #000;
 }
 
@@ -148,7 +157,7 @@
 svg .node.inactive circle,
 svg .node.inactive text,
 svg .node.inactive image {
-    opacity: .05;
+    opacity: .1;
 }
 
 svg .node.inactive.selected rect,
@@ -199,8 +208,9 @@
 #mast {
     height: 36px;
     padding: 4px;
-    background-color: #ccc;
+    background-color: #bbb;
     vertical-align: baseline;
+    box-shadow: 0px 2px 8px #777;
 }
 
 #frame {
@@ -214,19 +224,27 @@
     z-index: 100;
     display: block;
     top: 10%;
-    width: 300px;
-    height: 80%;
-    right: -320px;
+    width: 280px;
+    right: -300px;
     opacity: 0;
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(255,255,255,0.5);
+
     padding: 10px;
-    color: white;
+    color: black;
     font-size: 10pt;
+    box-shadow: 2px 2px 16px #777;
 }
 
 #flyout h2 {
     margin: 8px 4px;
-    color: yellow;
+    color: black;
+    vertical-align: middle;
+}
+
+#flyout h2 img {
+    height: 32px;
+    padding-right: 8px;
+    vertical-align: middle;
 }
 
 #flyout p, table {
@@ -235,7 +253,7 @@
 
 #flyout td.label {
     font-style: italic;
-    color: #ccf;
+    color: #777;
     padding-right: 12px;
 }
 
@@ -243,3 +261,10 @@
 
 }
 
+#flyout hr {
+    height: 1px;
+    color: #ccc;
+    background-color: #ccc;
+    border: 0;
+}
+