diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index e4a30b1..fc08f68 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -31,6 +31,7 @@
 #device-details-panel.floatpanel {
     -moz-border-radius: 0;
     border-radius: 0;
+    z-index: 0;
 }
 
 .light #device-details-panel.floatpanel {
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 0e16dec..1f2a8ca 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -55,14 +55,17 @@
             'Enabled', 'ID', 'Speed', 'Type', 'Egress Links', 'Name'
         ];
 
+    function closePanel() {
+        if (detailsPanel.isVisible()) {
+            $scope.selId = null;
+            detailsPanel.hide();
+        }
+    }
+
     function addCloseBtn(div) {
         is.loadEmbeddedIcon(div, 'plus', 30);
         div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
-
-        div.on('click', function () {
-            $scope.selId = null;
-            detailsPanel.hide();
-        });
+        div.on('click', closePanel);
     }
 
     function setUpPanel() {
@@ -247,8 +250,8 @@
             $log.log('OvDeviceCtrl has been created');
         }])
 
-    .directive('deviceDetailsPanel', ['$rootScope', '$window',
-    function ($rootScope, $window) {
+    .directive('deviceDetailsPanel', ['$rootScope', '$window', 'KeyService',
+    function ($rootScope, $window, ks) {
         return function (scope) {
             var unbindWatch;
 
@@ -262,6 +265,16 @@
 
             createDetailsPane();
 
+            // create key bindings to handle panel
+            ks.keyBindings({
+                esc: [closePanel, 'Close the details panel'],
+                _helpFormat: ['esc']
+            });
+            ks.gestureNotes([
+                ['click', 'Select a row to show device details'],
+                ['scroll down', 'See more devices']
+            ]);
+
             scope.$watch('panelData', function () {
                 if (!fs.isEmptyObject(scope.panelData)) {
                     populateDetails(scope.panelData);
@@ -285,6 +298,7 @@
 
             scope.$on('$destroy', function () {
                 unbindWatch();
+                ks.unbindKeys();
                 ps.destroyPanel(pName);
             });
         };