diff --git a/web/gui2-fw-lib/src/app/app.component.html b/web/gui2-fw-lib/src/app/app.component.html
index 2cc727e..9d66610 100644
--- a/web/gui2-fw-lib/src/app/app.component.html
+++ b/web/gui2-fw-lib/src/app/app.component.html
@@ -44,6 +44,5 @@
   If you change anything in the library, you will have to build it again before
   it is picked up in this app.
 </p>
-<onos-quickhelp></onos-quickhelp>
-<onos-loading [running]="loadingRunning"></onos-loading>
-<button (click)="toggleLoadingRunning()">Toggle loading image</button>
+<onos-quickhelp #qh></onos-quickhelp>
+<button (click)="qh.ks.quickHelpShown = true">Toggle quick help shown</button>
diff --git a/web/gui2-fw-lib/src/app/app.component.ts b/web/gui2-fw-lib/src/app/app.component.ts
index a5a5450..5e934d4 100644
--- a/web/gui2-fw-lib/src/app/app.component.ts
+++ b/web/gui2-fw-lib/src/app/app.component.ts
@@ -15,7 +15,7 @@
  */
 
 import {Component} from '@angular/core';
-import {FnService, LogService} from 'gui2-fw-lib';
+import {FnService, KeysService, LogService} from 'gui2-fw-lib';
 
 @Component({
   selector: 'app-root',
@@ -23,16 +23,78 @@
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'Test app for GUI Framework Library';
-  loadingRunning: boolean = false;
+    title = 'Test app for GUI Framework Library';
+    loadingRunning: boolean = false;
 
-  constructor(
-    protected fs: FnService
-  ) {
-    this.title = this.fs.cap(this.title);
-  }
+    constructor(
+        protected fs: FnService,
+        protected ks: KeysService,
+        protected log: LogService
+    ) {
+        this.title = this.fs.cap(this.title);
+        this.bindCommands();
+        this.log.debug('AppComponent constructed');
+    }
 
-    toggleLoadingRunning() {
-        this.loadingRunning = !this.loadingRunning;
+    bindCommands(additional?: any) {
+
+        const am = this.actionMap();
+        const add = this.fs.isO(additional);
+
+        this.ks.keyBindings(am);
+
+        this.ks.gestureNotes([
+            ['click', 'Select the item and show details'],
+            ['shift-click', 'Toggle selection state'],
+            ['drag', 'Reposition (and pin) device / host'],
+            ['cmd-scroll', 'Zoom in / out'],
+            ['cmd-drag', 'Pan'],
+        ]);
+    }
+
+
+    showKeyStroke(letter: string, token?: string) {
+        this.log.debug('Key pressed', letter);
+    }
+
+    actionMap() {
+        return {
+            A: [() => {this.showKeyStroke('A'); }, 'Monitor all traffic'],
+            B: [(token) => {this.showKeyStroke('B', token); }, 'Toggle background'],
+            D: [(token) => {this.showKeyStroke('D', token); }, 'Toggle details panel'],
+            E: [() => {this.showKeyStroke('E'); }, 'Equalize mastership roles'],
+            H: [() => {this.showKeyStroke('H'); }, 'Toggle host visibility'],
+            I: [(token) => {this.showKeyStroke('I', token); }, 'Toggle ONOS Instance Panel'],
+            G: [() => {this.showKeyStroke('G'); }, 'Show map selection dialog'],
+            L: [() => {this.showKeyStroke('L'); }, 'Cycle device labels'],
+            M: [() => {this.showKeyStroke('M'); }, 'Toggle offline visibility'],
+            O: [() => {this.showKeyStroke('O'); }, 'Toggle the Summary Panel'],
+            P: [(token) => {this.showKeyStroke('P', token); }, 'Toggle Port Highlighting'],
+            Q: [() => {this.showKeyStroke('Q'); }, 'Cycle grid display'],
+            R: [() => {this.showKeyStroke('R'); }, 'Reset pan / zoom'],
+            U: [() => {this.showKeyStroke('U'); }, 'Unpin or freeze nodes'],
+            X: [() => {this.showKeyStroke('X'); }, 'Reset Node Location'],
+            dot: [() => {this.showKeyStroke('.'); }, 'Toggle Toolbar'],
+            0: [() => {this.showKeyStroke('0'); }, 'Cancel traffic monitoring'],
+            'shift-L': [() => {this.showKeyStroke('shift-L'); }, 'Cycle host labels'],
+
+            esc: [() => {this.showKeyStroke('Esc'); }, 'Cancel commands'],
+
+            // TODO update after adding in Background Service
+            // topology overlay selections
+            // F1: function () { t2tbs.fnKey(0); },
+            // F2: function () { t2tbs.fnKey(1); },
+            // F3: function () { t2tbs.fnKey(2); },
+            // F4: function () { t2tbs.fnKey(3); },
+            // F5: function () { t2tbs.fnKey(4); },
+            //
+            // _keyListener: t2tbs.keyListener.bind(t2tbs),
+
+            _helpFormat: [
+                ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B'],
+                ['X', 'Z', 'N', 'L', 'shift-L', 'U', 'R', 'E', 'dot'],
+                [], // this column reserved for overlay actions
+            ],
+        };
     }
 }