diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.css b/web/gui/src/main/webapp/app/fw/layer/panel.css
index f83d595..1075b74 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.css
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.css
@@ -26,21 +26,21 @@
     width: 200px;
     right: -220px;
     opacity: 0;
-    background-color: rgba(255,255,255,0.8);
 
     padding: 10px;
-    color: black;
     font-size: 10pt;
 
     -moz-border-radius: 6px;
     border-radius: 6px;
-    box-shadow: 0px 2px 12px #777;
 }
 
-/* TODO: light/dark themes */
 .light .floatpanel {
-
+    background-color: rgba(255,255,255,0.8);
+    color: black;
+    box-shadow: 0 2px 12px #777;
 }
 .dark .floatpanel {
-
+    background-color: rgba(50,50,50,0.8);
+    color: #ccc;
+    box-shadow: 0 2px 12px #000;
 }
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.js b/web/gui/src/main/webapp/app/fw/layer/panel.js
index 2209487..1665626 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.js
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.js
@@ -25,7 +25,6 @@
     var defaultSettings = {
         edge: 'right',
         width: 200,
-        height: 80,
         margin: 20,
         xtnTime: 750
     };
@@ -87,7 +86,9 @@
         // has to be called after el is set
         p.el.style(p.settings.edge, pxHide(p));
         panelWidth(p.settings.width);
-        panelHeight(p.settings.height);
+        if (p.settings.height) {
+            panelHeight(p.settings.height);
+        }
 
         panels[id] = p;
 
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 626ddf7..785df8c 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -18,6 +18,8 @@
  ONOS GUI -- Topology View -- CSS file
  */
 
+/* --- Topo Map --- */
+
 .light #ov-topo svg {
     background-color: #fff;
     /* For Debugging the placement of the SVG layer... */
@@ -39,3 +41,80 @@
 .dark #ov-topo svg #topo-map {
     stroke: #444;
 }
+
+
+/* --- Topo Panels --- */
+
+#topo-p-summary {
+    /* Base css from panel.css */
+    
+}
+
+#topo-p-summary svg {
+    display: inline-block;
+    width: 42px;
+    height: 42px;
+}
+
+#topo-p-summary svg .glyphIcon {
+    stroke: none;
+    fill-rule: evenodd;
+}
+.light #topo-p-summary svg .glyphIcon {
+    fill: black;
+}
+.dark #topo-p-summary svg .glyphIcon {
+    fill: #ddd;
+}
+
+#topo-p-summary h2 {
+    position: absolute;
+    margin: 0 4px;
+    top: 20px;
+    left: 50px;
+}
+.light #topo-p-summary h2 {
+    color: black;
+}
+.dark #topo-p-summary h2 {
+    color: #ddd;
+}
+
+#topo-p-summary h3 {
+    margin: 0 4px;
+    top: 20px;
+    left: 50px;
+}
+.light #topo-p-summary h3 {
+    color: black;
+}
+.dark #topo-p-summary h3 {
+    color: #ddd;
+}
+
+#topo-p-summary p, table {
+    margin: 4px 4px;
+}
+
+#topo-p-summary td.label {
+    font-style: italic;
+    padding-right: 12px;
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+
+#topo-p-summary td.value {
+}
+
+#topo-p-summary hr {
+    height: 1px;
+    border: 0;
+}
+.light #topo-p-summary hr {
+    background-color: #ccc;
+    color: #ccc;
+}
+.dark #topo-p-summary hr {
+    background-color: #888;
+    color: #888;
+}
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 05ddb66..2edc13e 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -28,7 +28,7 @@
     ];
 
     // references to injected services etc.
-    var $log, fs, ks, zs, gs, ms, tes, tfs, tps;
+    var $log, fs, ks, zs, gs, ms, tfs;
 
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, forceG;
@@ -137,11 +137,6 @@
         tfs.initForce(forceG, svg.attr('width'), svg.attr('height'));
     }
 
-    function setUpPanels() {
-        tps.initPanels();
-    }
-
-
     // --- Controller Definition -----------------------------------------
 
     angular.module('ovTopo', moduleDependencies)
@@ -153,7 +148,7 @@
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
 
         function ($scope, _$log_, $loc, $timeout, _fs_, mast,
-                  _ks_, _zs_, _gs_, _ms_, _tes_, _tfs_, _tps_) {
+                  _ks_, _zs_, _gs_, _ms_, tes, _tfs_, tps) {
             var self = this;
             $log = _$log_;
             fs = _fs_;
@@ -161,9 +156,7 @@
             zs = _zs_;
             gs = _gs_;
             ms = _ms_;
-            tes = _tes_;
             tfs = _tfs_;
-            tps = _tps_;
 
             self.notifyResize = function () {
                 svgResized(fs.windowSize(mast.mastHeight()));
@@ -173,7 +166,7 @@
             $scope.$on('$destroy', function () {
                 $log.log('OvTopoCtrl is saying Buh-Bye!');
                 tes.closeSock();
-                ps.destroyPanel('topo-p-summary');
+                tps.destroyPanels();
             });
 
             // svg layer and initialization of components
@@ -190,9 +183,8 @@
             setUpZoom();
             setUpMap();
             setUpForce();
-            setUpPanels();
 
-            // open up a connection to the server...
+            tps.initPanels();
             tes.openSock();
 
             $log.log('OvTopoCtrl has been created');
diff --git a/web/gui/src/main/webapp/app/view/topo/topoPanel.js b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
index e513b1f..d05dc3e 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoPanel.js
@@ -25,6 +25,14 @@
     // injected refs
     var $log, ps;
 
+    // constants
+    var idSum = 'topo-p-summary',
+        idDet = 'topo-p-detail',
+        idIns = 'topo-p-instance',
+        panelOpts = {
+            width: 260
+        };
+
     // internal state
     var settings;
 
@@ -45,6 +53,54 @@
 
     // ==========================
 
+    function addSep(tbody) {
+        tbody.append('tr').append('td').attr('colspan', 2).append('hr');
+    }
+
+    function addProp(tbody, label, value) {
+        var tr = tbody.append('tr');
+
+        function addCell(cls, txt) {
+            tr.append('td').attr('class', cls).text(txt);
+        }
+        addCell('label', label + ' :');
+        addCell('value', value);
+    }
+
+    function populateSummary(data) {
+        summaryPanel.empty();
+
+        var svg = summaryPanel.append('svg').attr({
+                width: 40,
+                height: 40
+            }).style('background-color', 'goldenrod'),
+            iid = '#' + (data.type || 'unknown');
+
+        var title = summaryPanel.append('h2'),
+            table = summaryPanel.append('table'),
+            tbody = table.append('tbody');
+
+        // append glyph iid to SVG  // black fill
+        // append glyph bird to SVG // white fill
+
+        title.text(data.id);
+
+        data.propOrder.forEach(function(p) {
+            if (p === '-') {
+                addSep(tbody);
+            } else {
+                addProp(tbody, p, data.props[p]);
+            }
+        });
+    }
+
+    function showSummaryPanel() {
+        summaryPanel.show();
+
+    }
+
+    // ==========================
+
     angular.module('ovTopo')
     .factory('TopoPanelService',
         ['$log', 'PanelService',
@@ -54,20 +110,24 @@
             ps = _ps_;
 
             function initPanels() {
-                summaryPanel = ps.createPanel('topo-p-summary');
+                summaryPanel = ps.createPanel(idSum, panelOpts);
                 // TODO: set up detail and instance panels..
             }
 
-            function showSummary(payload) {
-                summaryPanel.empty();
-                summaryPanel.append('h2').text(payload.id);
-                // TODO: complete the formatting...
+            function destroyPanels() {
+                ps.destroyPanel(idSum);
+                summaryPanel = null;
+                // TODO: destroy detail and instance panels..
+            }
 
-                summaryPanel.show();
+            function showSummary(payload) {
+                populateSummary(payload);
+                showSummaryPanel();
             }
 
             return {
                 initPanels: initPanels,
+                destroyPanels: destroyPanels,
                 showSummary: showSummary
             };
         }]);
diff --git a/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js b/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js
index 1d33e4f..41a9ff9 100644
--- a/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/layer/panel-spec.js
@@ -72,7 +72,6 @@
         expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', {
             edge: 'right',
             width: 200,
-            height: 80,
             margin: 20,
             xtnTime: 750
         });
@@ -120,7 +119,6 @@
         expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', {
             edge: 'left',
             width: 250,
-            height: 80,
             margin: 20,
             xtnTime: 750
         });
diff --git a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
index 4564d1e..6018370 100644
--- a/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
+++ b/web/gui/src/main/webapp/tests/app/view/topo/topoPanel-spec.js
@@ -34,7 +34,7 @@
 
     it('should define api functions', function () {
         expect(fs.areFunctions(tps, [
-            'initPanels'
+            'initPanels', 'destroyPanels', 'showSummary'
         ])).toBeTruthy();
     });