diff --git a/src/app/core/header/header.spec.ts b/src/app/core/header/header.spec.ts
index 0bd6877..c1d6062 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -42,6 +42,10 @@
   }
 };
 
+const MockXosKeyboardShortcut = {
+  registerKeyBinding: jasmine.createSpy('registerKeyBinding')
+};
+
 describe('header component', () => {
   beforeEach(() => {
     angular
@@ -52,6 +56,7 @@
       .value('toastrConfig', MockToastrConfig)
       .value('AuthService', MockAuth)
       .value('NavigationService', {})
+      .value('XosKeyboardShortcut', MockXosKeyboardShortcut)
       .value('StyleConfig', {
         logo: 'cord-logo.png',
       })
@@ -77,6 +82,17 @@
     expect(header.trim()).not.toBeNull();
   });
 
+  it('should register a keyboard shortcut', () => {
+    expect(MockXosKeyboardShortcut.registerKeyBinding).toHaveBeenCalled();
+    // expect(MockXosKeyboardShortcut.registerKeyBinding).toHaveBeenCalledWith({
+    //   key: 'f',
+    //   description: 'Select search box',
+    //   cb: () => {
+    //     $('.navbar-form input').focus();
+    //   },
+    // }, 'global');
+  });
+
   it('should print user email', () => {
     expect($('.profile-address', element).text()).toBe('test@xos.us');
   });
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index 1f01bf8..8926080 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -7,13 +7,14 @@
 import * as $ from 'jquery';
 import {IXosStyleConfig} from '../../../index';
 import {IXosSearchService, IXosSearchResult} from '../../datasources/helpers/search.service';
+import {IXosKeyboardShortcutService} from '../services/keyboard-shortcut';
 
 export interface INotification extends IWSEvent {
   viewed?: boolean;
 }
 
 class HeaderController {
-  static $inject = ['$scope', '$rootScope', '$state', 'AuthService', 'SynchronizerStore', 'toastr', 'toastrConfig', 'NavigationService', 'StyleConfig', 'SearchService'];
+  static $inject = ['$scope', '$rootScope', '$state', 'AuthService', 'SynchronizerStore', 'toastr', 'toastrConfig', 'NavigationService', 'StyleConfig', 'SearchService', 'XosKeyboardShortcut'];
   public notifications: INotification[] = [];
   public newNotifications: INotification[] = [];
   public version: string;
@@ -33,7 +34,8 @@
     private toastrConfig: ng.toastr.IToastrConfig,
     private NavigationService: IXosNavigationService,
     private StyleConfig: IXosStyleConfig,
-    private SearchService: IXosSearchService
+    private SearchService: IXosSearchService,
+    private XosKeyboardShortcut: IXosKeyboardShortcutService
   ) {
     this.version = require('../../../../package.json').version;
     angular.extend(this.toastrConfig, {
@@ -53,11 +55,13 @@
     };
 
     // listen for keypress
-    $(document).on('keyup', (e) => {
-      if (e.key === 'f') {
+    this.XosKeyboardShortcut.registerKeyBinding({
+      key: 'f',
+      description: 'Select search box',
+      cb: () => {
         $('.navbar-form input').focus();
-      }
-    });
+      },
+    }, 'global');
 
     // redirect to selected page
     this.routeSelected = (item: IXosSearchResult) => {
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 4b89ac8..a31aa96 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -19,6 +19,8 @@
 import {xosSidePanel} from './side-panel/side-panel';
 import {XosSidePanel} from './side-panel/side-panel.service';
 import {XosComponentInjector} from './services/helpers/component-injector.helpers';
+import {XosKeyboardShortcut} from './services/keyboard-shortcut';
+import {xosKeyBindingPanel} from './key-binding/key-binding-panel';
 
 export const xosCore = 'xosCore';
 
@@ -36,6 +38,7 @@
   .service('ConfigHelpers', ConfigHelpers)
   .service('ModelSetup', ModelSetup)
   .service('XosSidePanel', XosSidePanel)
+  .service('XosKeyboardShortcut', XosKeyboardShortcut)
   .service('XosComponentInjector', XosComponentInjector)
   .directive('xosLinkWrapper', xosLinkWrapper)
   .component('xosHeader', xosHeader)
@@ -47,4 +50,5 @@
   .component('xosField', xosField)
   .component('xosAlert', xosAlert)
   .component('xosValidation', xosValidation)
-  .component('xosSidePanel', xosSidePanel);
+  .component('xosSidePanel', xosSidePanel)
+  .component('xosKeyBindingPanel', xosKeyBindingPanel);
diff --git a/src/app/core/key-binding/key-binding-panel.html b/src/app/core/key-binding/key-binding-panel.html
new file mode 100644
index 0000000..7ce982a
--- /dev/null
+++ b/src/app/core/key-binding/key-binding-panel.html
@@ -0,0 +1,25 @@
+<div class="row">
+    <div class="col-xs-12">
+        <h3>Active Key Bindings</h3>
+    </div>
+</div>
+<div class="row" ng-repeat="(k, v) in vm.bindings">
+    <div class="col-xs-12" ng-if="v.length > 0">
+        <h5>{{k | capitalize}}</h5>
+    </div>
+    <div class="col-xs-12" ng-repeat="binding in v" ng-if="binding.description">
+        <div class="row">
+            <div class="col-xs-5">
+                <code class="text-center">
+                    <span ng-repeat="m in binding.modifiers">
+                        {{m}} +
+                    </span>
+                    {{binding.key}}
+                </code>
+            </div>
+            <div class="col-xs-7">
+                <p>{{binding.description}}</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/core/key-binding/key-binding-panel.scss b/src/app/core/key-binding/key-binding-panel.scss
new file mode 100644
index 0000000..0fde571
--- /dev/null
+++ b/src/app/core/key-binding/key-binding-panel.scss
@@ -0,0 +1,7 @@
+@import './../../style/vars.scss';
+
+xos-key-binding-panel {
+  code {
+    background: $background-light-color;
+  }
+}
\ No newline at end of file
diff --git a/src/app/core/key-binding/key-binding-panel.ts b/src/app/core/key-binding/key-binding-panel.ts
new file mode 100644
index 0000000..4ee31eb
--- /dev/null
+++ b/src/app/core/key-binding/key-binding-panel.ts
@@ -0,0 +1,19 @@
+import {IXosKeyboardShortcutService, IXosKeyboardShortcutMap} from '../services/keyboard-shortcut';
+import './key-binding-panel.scss';
+
+class XosKeyBindingPanelController {
+  static $inject = ['$scope', 'XosKeyboardShortcut'];
+  public bindings: IXosKeyboardShortcutMap;
+  constructor (
+    private $scope: ng.IScope,
+    private XosKeyboardShortcut: IXosKeyboardShortcutService
+  ) {
+    this.bindings = this.XosKeyboardShortcut.keyMapping;
+  }
+}
+
+export const xosKeyBindingPanel: angular.IComponentOptions = {
+  template: require('./key-binding-panel.html'),
+  controllerAs: 'vm',
+  controller: XosKeyBindingPanelController
+};
diff --git a/src/app/core/services/helpers/component-injector.helpers.ts b/src/app/core/services/helpers/component-injector.helpers.ts
index e70e257..908e4c7 100644
--- a/src/app/core/services/helpers/component-injector.helpers.ts
+++ b/src/app/core/services/helpers/component-injector.helpers.ts
@@ -16,7 +16,7 @@
 }
 
 export class XosComponentInjector implements IXosComponentInjectorService {
-  static $inject = ['$rootScope', '$compile', '$transitions', '$log'];
+  static $inject = ['$rootScope', '$compile', '$transitions', '$log', '$timeout'];
 
   public injectedComponents: IXosInjectedComponent[] = [];
 
@@ -24,7 +24,8 @@
     private $rootScope: ng.IRootScopeService,
     private $compile: ng.ICompileService,
     private $transitions: any,
-    private $log: ng.ILogService
+    private $log: ng.ILogService,
+    private $timeout: ng.ITimeoutService
   ) {
     $transitions.onFinish({ to: '**' }, (transtion) => {
       // wait for route transition to complete
@@ -79,6 +80,10 @@
     const componentTag = `<${componentTagName} ${attr}>${transclude || ''}</${componentTagName}>`;
     const element = this.$compile(componentTag)(scope);
 
+    this.$timeout(function() {
+      scope.$apply();
+    });
+
     targetEl.append(element);
 
     // store a reference for the element
diff --git a/src/app/core/services/keyboard-shortcut.ts b/src/app/core/services/keyboard-shortcut.ts
new file mode 100644
index 0000000..e649abf
--- /dev/null
+++ b/src/app/core/services/keyboard-shortcut.ts
@@ -0,0 +1,164 @@
+import * as $ from 'jquery';
+import * as _ from 'lodash';
+import {IXosSidePanelService} from '../side-panel/side-panel.service';
+
+export interface IXosKeyboardShortcutService {
+  keyMapping: IXosKeyboardShortcutMap;
+  registerKeyBinding(binding: IXosKeyboardShortcutBinding, target?: string);
+  setup(): void;
+}
+
+export interface IXosKeyboardShortcutMap {
+  global: IXosKeyboardShortcutBinding[];
+  view: IXosKeyboardShortcutBinding[];
+}
+
+export interface IXosKeyboardShortcutBinding {
+  key: string;
+  cb: any;
+  modifiers?: string[];
+  description?: string;
+  onInput?: boolean;
+}
+
+export class XosKeyboardShortcut implements IXosKeyboardShortcutService {
+  static $inject = ['$log', '$transitions', 'XosSidePanel'];
+  public keyMapping: IXosKeyboardShortcutMap = {
+    global: [],
+    view: []
+  };
+  public allowedModifiers: string[] = ['Meta', 'Alt', 'Shift', 'Control'];
+  public activeModifiers: string[] = [];
+
+  private toggleKeyBindingPanel = (): void => {
+    if (!this.isPanelOpen) {
+      this.XosSidePanel.injectComponent('xosKeyBindingPanel');
+      this.isPanelOpen = true;
+    }
+    else {
+      this.XosSidePanel.removeInjectedComponents();
+      this.isPanelOpen = false;
+    }
+  };
+
+  /* tslint:disable */
+  public baseBindings: IXosKeyboardShortcutBinding[] = [
+    {
+      key: '?',
+      description: 'Toggle Shortcut Panel',
+      cb: this.toggleKeyBindingPanel,
+    },
+    {
+      key: '/',
+      description: 'Toggle Shortcut Panel',
+      cb: this.toggleKeyBindingPanel,
+    },
+    {
+      key: 'Escape',
+      cb: (event) => {
+        // NOTE removing focus from input elements on Esc
+        event.target.blur();
+      },
+      onInput: true
+    }
+  ];
+  /* tslint:enable */
+
+  private isPanelOpen: boolean;
+
+  constructor(
+    private $log: ng.ILogService,
+    $transitions: any,
+    private XosSidePanel: IXosSidePanelService
+  ) {
+    this.keyMapping.global = this.keyMapping.global.concat(this.baseBindings);
+
+    $transitions.onStart({ to: '**' }, (transtion) => {
+      // delete view keys before that a new view is loaded
+        this.$log.info(`[XosKeyboardShortcut] Deleting view keys`);
+        this.keyMapping.view = [];
+    });
+  }
+
+
+  public setup(): void {
+    this.$log.info(`[XosKeyboardShortcut] Setup`);
+    $('body').on('keydown', (e) => {
+
+      let pressedKey = null;
+
+      if (e.key.length === 1 && e.key.match(/[a-z]/i) || String.fromCharCode(e.keyCode).toLowerCase().match(/[a-z]/i)) {
+        // alphabet letters found
+        pressedKey = String.fromCharCode(e.keyCode).toLowerCase();
+      }
+      else {
+        pressedKey = e.key;
+      }
+
+      if (this.allowedModifiers.indexOf(e.key) > -1) {
+        this.addActiveModifierKey(e.key);
+        return;
+      }
+
+      // NOTE e.key change if we are using some modifiers (eg: Alt) while getting the value from the keyCode works
+      const binding = this.findBindedShortcut(pressedKey);
+      if (angular.isDefined(binding) && angular.isFunction(binding.cb)) {
+        // NOTE disable binding if they come from an input or textarea
+        // if not different specified
+        const t = e.target.tagName.toLowerCase();
+        if ((t === 'input' || t === 'textarea') && !binding.onInput) {
+          return;
+        }
+        binding.cb(e);
+        e.preventDefault();
+      }
+    });
+
+    $('body').on('keyup', (e) => {
+      if (this.allowedModifiers.indexOf(e.key) > -1) {
+        this.removeActiveModifierKey(e.key);
+        return;
+      }
+    });
+  }
+
+  public registerKeyBinding(binding: IXosKeyboardShortcutBinding, target: string = 'view'): void {
+    // NOTE check for already taken binding (by key)
+    // NOTE check target is either 'view' or 'global'
+    this.$log.info(`[XosKeyboardShortcut] Registering binding for key: ${binding.key}`);
+    if (!_.find(this.keyMapping[target], {key: binding.key})) {
+      this.keyMapping[target].push(binding);
+    }
+  }
+
+  private addActiveModifierKey(key: string) {
+    if (this.activeModifiers.indexOf(key) === -1) {
+      this.activeModifiers.push(key);
+    }
+  }
+
+  private removeActiveModifierKey(key: string) {
+    _.remove(this.activeModifiers, k => k === key);
+  }
+
+  private findBindedShortcut(key: string): IXosKeyboardShortcutBinding {
+    // NOTE search for binding in the global map
+    let target =  _.find(this.keyMapping.global, {key: key});
+
+    // NOTE if it is not there look in the view map
+    if (!angular.isDefined(target)) {
+      target = _.find(this.keyMapping.view, {key: key});
+    }
+
+
+    if (target && target.modifiers) {
+      // if not all the modifier keys for that binding are pressed
+      if (_.difference(target.modifiers, this.activeModifiers).length > 0) {
+        // do not match
+        return;
+      };
+    }
+    return target;
+  }
+
+}
diff --git a/src/app/core/side-panel/side-panel.service.ts b/src/app/core/side-panel/side-panel.service.ts
index a7471f5..96e4162 100644
--- a/src/app/core/side-panel/side-panel.service.ts
+++ b/src/app/core/side-panel/side-panel.service.ts
@@ -5,10 +5,11 @@
   open(): void;
   close(): void;
   injectComponent(componentName: string, attributes?: any, transclude?: string): void;
+  removeInjectedComponents(): void;
 }
 
 export class XosSidePanel implements IXosSidePanelService {
-  static $inject = ['$rootScope', '$compile', 'XosComponentInjector'];
+  static $inject = ['$rootScope', '$compile', '$timeout', 'XosComponentInjector'];
   public sidePanelElName = 'xos-side-panel';
   public sidePanelElClass = '.xos-side-panel';
   public sidePanelEl: JQuery;
@@ -16,6 +17,7 @@
   constructor (
     private $rootScope: ng.IRootScopeService,
     private $compile: ng.ICompileService,
+    private $timeout: ng.ITimeoutService,
     private XosComponentInjector: IXosComponentInjectorService
   ) {
     this.sidePanelEl = $(`${this.sidePanelElName} > ${this.sidePanelElClass}`);
@@ -33,4 +35,11 @@
     this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
     this.open();
   }
+
+  public removeInjectedComponents() {
+    this.close();
+    this.$timeout(() => {
+      this.XosComponentInjector.removeInjectedComponents('#side-panel-container');
+    }, 500);
+  }
 }
diff --git a/src/app/template/directives/directives.ts b/src/app/template/directives/directives.ts
index 76b0907..625c101 100644
--- a/src/app/template/directives/directives.ts
+++ b/src/app/template/directives/directives.ts
@@ -5,18 +5,25 @@
 /* tslint:disable */
 
 import * as $ from 'jquery';
+import {IXosKeyboardShortcutService} from '../../core/services/keyboard-shortcut';
 
 /**
  * minimalizaSidebar - Directive for minimalize sidebar
  */
-export function minimalizaMenu($rootScope) {
+export function minimalizaMenu($rootScope, XosKeyboardShortcut: IXosKeyboardShortcutService) {
   return {
     restrict: 'EA',
     template: '<div class="left-nav-toggle"><a href ng-click="minimalize()"><i class="stroke-hamburgermenu"></i> </a>',
     controller: function ($scope, $element) {
       $scope.minimalize = function () {
         $("body").toggleClass("nav-toggle");
-      }
+      };
+
+      XosKeyboardShortcut.registerKeyBinding({
+        key: 'n',
+        description: 'Toggle Navigation',
+        cb: $scope.minimalize,
+      }, 'global');
     }
   };
 }
diff --git a/src/app/template/filters/capitalize.ts b/src/app/template/filters/capitalize.ts
new file mode 100644
index 0000000..8325eb7
--- /dev/null
+++ b/src/app/template/filters/capitalize.ts
@@ -0,0 +1,6 @@
+export function capitalize() {
+  return function(input: string) {
+    return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
+  };
+}
+
diff --git a/src/app/template/index.ts b/src/app/template/index.ts
index a407462..605b840 100644
--- a/src/app/template/index.ts
+++ b/src/app/template/index.ts
@@ -11,6 +11,7 @@
 import '../style/style.scss';
 import '../style/stroke-icons/style.css';
 import '../style/pe-icons/pe-icon-7-stroke.css';
+import {capitalize} from './filters/capitalize';
 
 
 (function () {
@@ -28,6 +29,7 @@
   ])
     .directive('minimalizaMenu', minimalizaMenu)
     // .directive('sparkline', sparkline)
-    .directive('panelTools', panelTools);
+    .directive('panelTools', panelTools)
+    .filter('capitalize', capitalize);
 })();