diff --git a/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.css b/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.css
index 9e4e761..c492e20 100644
--- a/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.css
+++ b/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.css
@@ -1,16 +1,35 @@
 /* css for sample app view */
 
-#ov-sample p {
-    margin: 0 30px;
-    padding: 10px;
-    border: 2px solid;
+#ov-sample h2 {
+    display: inline-block;
 }
 
-.light #ov-sample p {
-    color: darkblue;
-    border-color: #88c;
+/* Panel Styling */
+#item-details-panel.floatpanel {
+    position: absolute;
+    top: 115px;
 }
-.dark #ov-sample p {
-    color: #aac;
-    border-color: #448;
+
+.light #item-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #item-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+#item-details-panel h3 {
+    margin: 0;
+    font-size: large;
+}
+
+#item-details-panel h4 {
+    margin: 0;
+}
+
+#item-details-panel td {
+    padding: 5px;
+}
+#item-details-panel td.label {
+    font-style: italic;
+    opacity: 0.8;
 }
\ No newline at end of file
diff --git a/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.html b/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.html
index de67585..03a7383 100644
--- a/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.html
+++ b/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.html
@@ -15,9 +15,9 @@
         <div class="table-header" onos-sortable-header>
             <table>
                 <tr>
-                    <td colId="id" sortable> Item ID </td>
-                    <td colId="label" sortable> Label </td>
-                    <td colId="code" sortable> Code </td>
+                    <td colId="id" sortable>Item ID </td>
+                    <td colId="label" sortable>Label </td>
+                    <td colId="code" sortable>Code </td>
                 </tr>
             </table>
         </div>
diff --git a/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.js b/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.js
index 37b8988..2d4aed4 100644
--- a/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.js
+++ b/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sample/sample.js
@@ -3,27 +3,44 @@
     'use strict';
 
     // injected refs
-    var $log, $scope, fs, mast, ps, wss;
-
-    // internal state
-    var selRow,
-        detailsPanel,
-        pStartY, pHeight,
-        wSize;
+    var $log, $scope, fs, wss, ps;
 
     // constants
-    var topPadding = 20,
-
-        detailsReq = 'sampleDetailsRequest',
+    var detailsReq = 'sampleDetailsRequest',
         detailsResp = 'sampleDetailsResponse',
         pName = 'item-details-panel',
 
-        propOrder = [ 'id', 'label', 'code'],
-        friendlyProps = [ 'Item ID', 'Item Label', 'Special Code' ];
+        propOrder = ['id', 'label', 'code'],
+        friendlyProps = ['Item ID', 'Item Label', 'Special Code'];
 
 
+    function addProp(tbody, index, value) {
+        var tr = tbody.append('tr');
+
+        function addCell(cls, txt) {
+            tr.append('td').attr('class', cls).html(txt);
+        }
+        addCell('label', friendlyProps[index] + ' :');
+        addCell('value', value);
+    }
+
+    function populatePanel(panel) {
+        var title = panel.append('h3'),
+            tbody = panel.append('table').append('tbody');
+
+        title.text('Item Details');
+
+        propOrder.forEach(function (prop, i) {
+            addProp(tbody, i, $scope.panelDetails[prop]);
+        });
+
+        panel.append('hr');
+        panel.append('h4').text('Comments');
+        panel.append('p').text($scope.panelDetails.comment);
+    }
+
     function respDetailsCb(data) {
-        $scope.panelData = data.details;
+        $scope.panelDetails = data.details;
         $scope.$apply();
     }
 
@@ -39,34 +56,84 @@
                 wss = _wss_;
 
                 var handlers = {};
+                $scope.panelDetails = {};
 
-                $scope.panelData = [];
+                // details response handler
+                handlers[detailsResp] = respDetailsCb;
+                wss.bindHandlers(handlers);
 
+                // custom selection callback
                 function selCb($event, row) {
-                    selRow = angular.element($event.currentTarget);
                     if ($scope.selId) {
                         wss.sendEvent(detailsReq, { id: row.id });
                     } else {
-                        $log.debug('need to hide details panel');
-                        //detailsPanel.hide()
+                        $scope.hidePanel();
                     }
                     $log.debug('Got a click on:', row);
                 }
 
+                // TableBuilderService creating a table for us
                 tbs.buildTable({
                     scope: $scope,
                     tag: 'sample',
                     selCb: selCb
                 });
 
-                // details response handler
-                handlers[detailsResp] = respDetailsCb;
-                wss.bindHandlers(handlers);
-
+                // cleanup
                 $scope.$on('$destroy', function () {
-                    wss.unbindHandlerse(handlers);
+                    wss.unbindHandlers(handlers);
                 });
 
                 $log.log('OvSampleCtrl has been created');
-            }]);
+            }])
+
+        .directive('itemDetailsPanel', ['PanelService', 'KeyService',
+            function (_ps_, ks) {
+            return {
+                restrict: 'E',
+                link: function (scope, element, attrs) {
+                    ps = _ps_;
+                    // insert details panel with PanelService
+                    // create the panel
+                    var panel = ps.createPanel(pName, {
+                        width: 200,
+                        margin: 20,
+                        hideMargin: 0
+                    });
+                    panel.hide();
+                    scope.hidePanel = function () { panel.hide(); };
+
+                    function closePanel() {
+                        if (panel.isVisible()) {
+                            $scope.selId = null;
+                            panel.hide();
+                        }
+                    }
+
+                    // create key bindings to handle panel
+                    ks.keyBindings({
+                        esc: [closePanel, 'Close the details panel'],
+                        _helpFormat: ['esc']
+                    });
+                    ks.gestureNotes([
+                        ['click', 'Select a row to show item details']
+                    ]);
+
+                    // update the panel's contents when the data is changed
+                    scope.$watch('panelDetails', function () {
+                        if (!fs.isEmptyObject(scope.panelDetails)) {
+                            panel.empty();
+                            populatePanel(panel);
+                            panel.show();
+                        }
+                    });
+
+                    // cleanup on destroyed scope
+                    scope.$on('$destroy', function () {
+                        ks.unbindKeys();
+                        ps.destroyPanel(pName);
+                    });
+                }
+            };
+        }]);
 }());
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 1f2a8ca..d376fe9 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -185,6 +185,7 @@
             position: 'absolute',
             top: pStartY + 'px'
         });
+        $scope.hidePanel = function () { detailsPanel.hide(); };
         detailsPanel.hide();
     }
 
@@ -207,7 +208,7 @@
             ns = _ns_;
             var params = $location.search(),
                 handlers = {};
-            $scope.panelData = [];
+            $scope.panelData = {};
             $scope.flowTip = 'Show flow view for selected device';
             $scope.portTip = 'Show port view for selected device';
             $scope.groupTip = 'Show group view for selected device';
@@ -226,7 +227,7 @@
                 if ($scope.selId) {
                     wss.sendEvent(detailsReq, { id: row.id });
                 } else {
-                    detailsPanel.hide();
+                    $scope.hidePanel();
                 }
                 $log.debug('Got a click on:', row);
             }