diff --git a/src/app/core/debug/debug.html b/src/app/core/debug/debug.html
new file mode 100644
index 0000000..2590708
--- /dev/null
+++ b/src/app/core/debug/debug.html
@@ -0,0 +1,38 @@
+<!--
+Copyright 2017-present Open Networking Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<table class="table table-condensed">
+    <thead>
+        <tr>
+            <th>Debug Settings:</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Global</td>
+            <td class="text-right">
+                <i class="fa fa-check text-success" ng-show="vm.debugStatus.global"></i>
+                <i class="fa fa-remove text-danger" ng-hide="vm.debugStatus.global"></i>
+            </td>
+        </tr>
+        <tr>
+            <td>Events</td>
+            <td class="text-right">
+                <i class="fa fa-check text-success" ng-show="vm.debugStatus.events"></i>
+                <i class="fa fa-remove text-danger" ng-hide="vm.debugStatus.events"></i>
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/src/app/core/debug/debug.service.spec.ts b/src/app/core/debug/debug.service.spec.ts
new file mode 100644
index 0000000..0d27fa6
--- /dev/null
+++ b/src/app/core/debug/debug.service.spec.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as angular from 'angular';
+import 'angular-mocks';
+import {XosDebugService, IXosDebugService} from './debug.service';
+
+const MockShortcut = {};
+
+describe('The XOS Debug service', () => {
+  let service, $log, $scope, XosKeyboardShortcut;
+
+  beforeEach(() => {
+    angular.module('testDebug', [])
+      .service('XosDebug', XosDebugService)
+      .value('XosKeyboardShortcut', MockShortcut);
+
+    angular.mock.module('testDebug');
+  });
+
+  beforeEach(angular.mock.inject((
+    XosDebug: IXosDebugService,
+    _$log_: ng.ILogService,
+    _$rootScope_: ng.IScope,
+    _XosKeyboardShortcut_: any
+  ) => {
+    service = XosDebug;
+    $log = _$log_;
+    $scope = _$rootScope_;
+    XosKeyboardShortcut = _XosKeyboardShortcut_;
+    spyOn(window.localStorage, 'setItem');
+    spyOn($scope, '$broadcast');
+  }));
+
+  it('should read the debug status from localStorage', () => {
+    spyOn(window.localStorage, 'getItem')
+      .and.returnValue('true');
+    service = new XosDebugService($log, $scope, XosKeyboardShortcut);
+    expect(service.status.global).toBeTruthy();
+    expect(service.status.events).toBeTruthy();
+  });
+
+  it('should disable the global debug status', () => {
+    spyOn(window.localStorage, 'getItem')
+      .and.returnValue('true');
+    service.toggleGlobalDebug();
+    expect(window.localStorage.setItem).toHaveBeenCalledWith('debug', 'false');
+    expect(service.status.global).toBeFalsy();
+    expect($scope.$broadcast).toHaveBeenCalledWith('xos.debug.status', service.status);
+  });
+  it('should enable the global debug status', () => {
+    spyOn(window.localStorage, 'getItem')
+      .and.returnValue('false');
+    service.toggleGlobalDebug();
+    expect(window.localStorage.setItem).toHaveBeenCalledWith('debug', 'true');
+    expect(service.status.global).toBeTruthy();
+    expect($scope.$broadcast).toHaveBeenCalledWith('xos.debug.status', service.status);
+  });
+});
diff --git a/src/app/core/debug/debug.service.ts b/src/app/core/debug/debug.service.ts
new file mode 100644
index 0000000..3c6c2c8
--- /dev/null
+++ b/src/app/core/debug/debug.service.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {IXosKeyboardShortcutService} from '../services/keyboard-shortcut';
+
+export interface IXosDebugStatus {
+  global: boolean;
+  events: boolean;
+}
+
+export interface IXosDebugService {
+  status: IXosDebugStatus;
+  setupShortcuts(): void;
+  toggleGlobalDebug(): void;
+  toggleEventDebug(): void;
+}
+
+export class XosDebugService implements IXosDebugService {
+
+  static $inject = ['$log', '$rootScope', 'XosKeyboardShortcut'];
+
+  public status: IXosDebugStatus = {
+    global: false,
+    events: false
+  };
+
+  constructor (
+    private $log: ng.ILogService,
+    private $scope: ng.IScope,
+    private XosKeyboardShortcut: IXosKeyboardShortcutService
+  ) {
+    const debug = window.localStorage.getItem('debug');
+    this.status.global = (debug === 'true');
+
+    const debugEvent = window.localStorage.getItem('debug-event');
+    this.status.events = (debugEvent === 'true');
+  }
+
+  public setupShortcuts(): void {
+    this.XosKeyboardShortcut.registerKeyBinding({
+      key: 'D',
+      cb: () => this.toggleGlobalDebug(),
+      description: 'Toggle debug messages in browser console'
+    }, 'global');
+
+    this.XosKeyboardShortcut.registerKeyBinding({
+      key: 'E',
+      cb: () => this.toggleEventDebug(),
+      description: 'Toggle debug messages for WS events in browser console'
+    }, 'global');
+  }
+
+  public toggleGlobalDebug(): void {
+    if (window.localStorage.getItem('debug') === 'true') {
+      this.$log.info(`[XosDebug] Disabling debug`);
+      window.localStorage.setItem('debug', 'false');
+      this.status.global = false;
+    }
+    else {
+      window.localStorage.setItem('debug', 'true');
+      this.$log.info(`[XosDebug] Enabling debug`);
+      this.status.global = true;
+    }
+    this.$scope.$broadcast('xos.debug.status', this.status);
+  }
+
+  public toggleEventDebug(): void {
+    if (window.localStorage.getItem('debug-event') === 'true') {
+      this.$log.info(`[XosDebug] Disabling debug for WS events`);
+      window.localStorage.setItem('debug-event', 'false');
+      this.status.events = false;
+    }
+    else {
+      window.localStorage.setItem('debug-event', 'true');
+      this.$log.info(`[XosDebug] Enabling debug for WS events`);
+      this.status.events = true;
+    }
+    this.$scope.$broadcast('xos.debug.status', this.status);
+  }
+}
diff --git a/src/app/core/debug/debug.ts b/src/app/core/debug/debug.ts
new file mode 100644
index 0000000..fe5d178
--- /dev/null
+++ b/src/app/core/debug/debug.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {IXosDebugStatus, IXosDebugService} from './debug.service';
+
+class XosDebugComponentController {
+  static $inject = ['$scope', 'XosDebug'];
+  public debugStatus: IXosDebugStatus;
+
+  constructor(
+    private $scope: ng.IScope,
+    private XosDebug: IXosDebugService
+  ) {
+    this.debugStatus = this.XosDebug.status;
+
+    this.$scope.$on('xos.debug.status', (e, status: IXosDebugStatus) => {
+      this.debugStatus = status;
+      this.$scope.$apply();
+    });
+  }
+}
+
+export const xosDebugComponent: angular.IComponentOptions = {
+  template: require('./debug.html'),
+  controllerAs: 'vm',
+  controller: XosDebugComponentController
+};
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 6c70d3a..0172223 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -43,6 +43,8 @@
 import {XosDebouncer} from './services/helpers/debounce.helper';
 import {ArrayToListFilter} from './table/array-to-list.filter';
 import {xosLoader} from './loader/loader';
+import {xosDebugComponent} from './debug/debug';
+import {XosDebugService} from './debug/debug.service';
 
 export const xosCore = 'xosCore';
 
@@ -63,6 +65,7 @@
   .service('XosKeyboardShortcut', XosKeyboardShortcut)
   .service('XosComponentInjector', XosComponentInjector)
   .service('XosDebouncer', XosDebouncer)
+  .service('XosDebug', XosDebugService)
   .directive('xosLinkWrapper', xosLinkWrapper)
   .component('xosHeader', xosHeader)
   .component('xosFooter', xosFooter)
@@ -77,5 +80,6 @@
   .component('xosValidation', xosValidation)
   .component('xosSidePanel', xosSidePanel)
   .component('xosKeyBindingPanel', xosKeyBindingPanel)
+  .component('xosDebug', xosDebugComponent)
   .filter('pagination', PaginationFilter)
   .filter('arrayToList', ArrayToListFilter);
diff --git a/src/app/core/key-binding/key-binding-panel.html b/src/app/core/key-binding/key-binding-panel.html
index fbb32d0..df26318 100644
--- a/src/app/core/key-binding/key-binding-panel.html
+++ b/src/app/core/key-binding/key-binding-panel.html
@@ -23,21 +23,32 @@
 </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>
+        <table class="table table-condensed">
+            <thead>
+                <tr>
+                    <th>{{k | capitalize}}:</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr ng-repeat="binding in v" ng-if="binding.description">
+                    <td>
+                        <code class="text-center">
+                            <span ng-repeat="m in binding.modifiers">
+                                {{m}} +
+                            </span>
+                            {{binding.label.toLowerCase() || binding.key.toLowerCase()}}
+                        </code>
+                    </td>
+                    <td class="text-right">
+                        <p>{{binding.description}}</p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </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.label.toLowerCase() || binding.key.toLowerCase()}}
-                </code>
-            </div>
-            <div class="col-xs-7">
-                <p>{{binding.description}}</p>
-            </div>
-        </div>
+</div>
+<div class="row">
+    <div class="col-xs-12">
+        <xos-debug></xos-debug>
     </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
index 556f6dd..ca4738d 100644
--- a/src/app/core/key-binding/key-binding-panel.scss
+++ b/src/app/core/key-binding/key-binding-panel.scss
@@ -22,4 +22,11 @@
   code {
     background: $background-light-color;
   }
+
+  > .row:last-child {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
 }
\ 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
index af3e810..c77f6b6 100644
--- a/src/app/core/key-binding/key-binding-panel.ts
+++ b/src/app/core/key-binding/key-binding-panel.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright 2017-present Open Networking Foundation
 
@@ -15,13 +14,13 @@
  * limitations under the License.
  */
 
-
 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
diff --git a/src/app/core/side-panel/side-panel.html b/src/app/core/side-panel/side-panel.html
index 238cebb..1f52843 100644
--- a/src/app/core/side-panel/side-panel.html
+++ b/src/app/core/side-panel/side-panel.html
@@ -22,8 +22,8 @@
             <i class="fa fa-remove" ng-click="vm.close()"></i>
         </div>
     </div>
-    <div class="row">
-        <div class="col-xs-12" id="side-panel-container">
+    <div class="row full-height">
+        <div class="col-xs-12 full-height" id="side-panel-container">
 
         </div>
     </div>
diff --git a/src/app/core/side-panel/side-panel.scss b/src/app/core/side-panel/side-panel.scss
index 56f7190..a6c718b 100644
--- a/src/app/core/side-panel/side-panel.scss
+++ b/src/app/core/side-panel/side-panel.scss
@@ -21,6 +21,12 @@
 $side-panel-width: 400px;
 
 xos-side-panel {
+  .full-height {
+    height: 97%;
+    & > .full-height {
+      height: 100%;
+    }
+  }
   .xos-side-panel {
     width: $side-panel-width;
     height: 100%;
diff --git a/src/app/datasources/websocket/global.ts b/src/app/datasources/websocket/global.ts
index 3b07eca..aeb92b4 100644
--- a/src/app/datasources/websocket/global.ts
+++ b/src/app/datasources/websocket/global.ts
@@ -53,7 +53,6 @@
 
     this.socket = io(this.AppConfig.websocketClient);
     this.socket.on('event', (data: IWSEvent): void => {
-        this.$log.debug(`[WebSocket] Received Event for: ${data.model} [${data.msg.pk}]`);
 
         if (data.msg.changed_fields.length === 0 || _.intersection(data.msg.changed_fields, ignoredFields).length === data.msg.changed_fields.length) {
           // NOTE means that the only updated fields does not change anything in the UI, so don't send events around
@@ -61,6 +60,8 @@
           return;
         }
 
+        this.$log.info(`[WebSocket] Received Event for: ${data.model} [${data.msg.pk}]`);
+
         this._events.next(data);
 
         // NOTE update observers of parent classes
diff --git a/src/app/views/crud/crud.html b/src/app/views/crud/crud.html
index 27e93e5..b650520 100644
--- a/src/app/views/crud/crud.html
+++ b/src/app/views/crud/crud.html
@@ -53,7 +53,7 @@
                 <xos-form ng-model="vm.relatedModels.manytoone[r.model][r.on_field].model" config="vm.relatedModels.manytoone[r.model][r.on_field].formConfig"></xos-form>
             </div>
         </uib-tab>
-        <uib-tab classes="{{vm.relatedModels.onetomany[r.model][r.on_field].class}}" ng-if="vm.relatedModels.onetomany[r.model]" ng-repeat="r in vm.related.onetomany" heading="{{r.model}} {{vm.getHumanReadableOnField(r)}}">
+        <uib-tab ng-if="vm.relatedModels.onetomany[r.model]" ng-repeat="r in vm.related.onetomany" classes="{{vm.relatedModels.onetomany[r.model][r.on_field].class}}" heading="{{r.model}} {{vm.getHumanReadableOnField(r)}}">
             <div class="panel-body">
                 <xos-table config="vm.relatedModels.onetomany[r.model][r.on_field].tableConfig" data="vm.relatedModels.onetomany[r.model][r.on_field].model"></xos-table>
             </div>
diff --git a/src/decorators.ts b/src/decorators.ts
index 39f5a66..5c1c804 100644
--- a/src/decorators.ts
+++ b/src/decorators.ts
@@ -15,14 +15,18 @@
  * limitations under the License.
  */
 
-
 export default function XosLogDecorator($provide: ng.auto.IProvideService) {
   $provide.decorator('$log', function($delegate: any) {
     const isLogEnabled = () => {
-      // NOTE to enable debug, in the broser console set: localStorage.debug = 'true'
-      // NOTE to disable debug, in the broser console set: localStorage.debug = 'false'
+      // NOTE to enable debug, in the browser console set: localStorage.debug = 'true'
+      // NOTE to disable debug, in the browser console set: localStorage.debug = 'false'
       return window.localStorage.getItem('debug') === 'true';
     };
+
+    const isEventLogEnabled = () => {
+      return window.localStorage.getItem('debug-event') === 'true';
+    };
+
     // Save the original $log.debug()
     let logFn = $delegate.log;
     let infoFn = $delegate.info;
@@ -33,10 +37,21 @@
     // create the replacement function
     const replacement = (fn) => {
       return function(){
-        if (!isLogEnabled()) {
+        // TODO
+        // Provide more structure a way to group log message and hide/show them
+        // eg: the first parameter is the group name
+
+        const msg = arguments[0];
+        if (!isLogEnabled() && msg.indexOf('WebSocket') === 0) {
           return;
         }
 
+        if (!isEventLogEnabled() && msg.indexOf('WebSocket') > 0) {
+          return;
+        }
+
+        // TODO toggle events notifications
+
         let args    = [].slice.call(arguments);
         let now     = new Date();
 
diff --git a/src/index.ts b/src/index.ts
index 937b482..2a287d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -46,6 +46,7 @@
 import {IXosKeyboardShortcutService} from './app/core/services/keyboard-shortcut';
 import {IXosModelDiscovererService} from './app/datasources/helpers/model-discoverer.service';
 import {xosServiceGraph} from './app/service-graph/index';
+import {IXosDebugService} from './app/core/debug/debug.service';
 
 export interface IXosAppConfig {
   apiEndpoint: string;
@@ -100,7 +101,8 @@
     XosModelDiscoverer: IXosModelDiscovererService,
     AuthService: IXosAuthService,
     XosKeyboardShortcut: IXosKeyboardShortcutService,
-    PageTitle: IXosPageTitleService // NOTE this service is not used, but needs to be loaded somewhere
+    PageTitle: IXosPageTitleService, // NOTE this service is not used, but needs to be loaded somewhere
+    XosDebug: IXosDebugService
   ) => {
     // handle style configs
     $rootScope['favicon'] = `./app/images/brand/${StyleConfig.favicon}`;
@@ -136,21 +138,6 @@
 
     // register keyboard shortcut
     XosKeyboardShortcut.setup();
-
-    XosKeyboardShortcut.registerKeyBinding({
-      key: 'D',
-      cb: () => {
-        if (window.localStorage.getItem('debug') === 'true') {
-          $log.info(`[XosKeyboardShortcut] Disabling debug`);
-          window.localStorage.setItem('debug', 'false');
-        }
-        else {
-          window.localStorage.setItem('debug', 'true');
-          $log.info(`[XosKeyboardShortcut] Enabling debug`);
-        }
-      },
-      description: 'Toggle debug messages in browser console'
-    }, 'global');
-
+    XosDebug.setupShortcuts();
   });