diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
index 26c1643..e6ef7b6 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
@@ -35,6 +35,7 @@
 
 #quickhelp div.help table {
     vertical-align: top;
+    width: 100%;
 }
 
 #quickhelp div.help p {
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
index d387284..5c1476a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
@@ -20,140 +20,54 @@
         <table class="qhrow">
             <tr>
                 <td class="key">&#92;</td>
-                <td class="desc">Afficher/cacher l'aide rapide</td>
+                <td class="desc">{{lionFn("qh_hint_show_hide_qh")}}</td>
             </tr>
             <tr>
                 <td class="key">/</td>
-                <td class="desc">Afficher/cacher l'aide rapide</td>
+                <td class="desc">{{lionFn("qh_hint_show_hide_qh")}}</td>
             </tr>
             <tr>
                 <td class="key">Esc</td>
-                <td class="desc">ignorer la boîte de dialogue ou annuler les
-                    sélections
-                </td>
+                <td class="desc">{{lionFn("qh_hint_esc")}}</td>
             </tr>
             <tr>
                 <td class="key">T</td>
-                <td class="desc">basculer de thème</td>
+                <td class="desc">{{lionFn("qh_hint_t")}}</td>
             </tr>
         </table>
         <hr class="qhrowsep">
         <table class="qhrow">
-            <tr>
-                <td class="key">I</td>
-                <td class="desc">Basculer au panneau de instance
-                    ONOS
-                </td>
-                <td class="key">O</td>
-                <td class="desc">Baculer au panneau récapitulatif
-                    ONOS
-                </td>
-                <td class="key">D</td>
-                <td class="desc">Basculer le panneau de détails</td>
-            </tr>
-            <tr>
-                <td class="key">H</td>
-                <td class="desc">Basculer la visibilité de l'hôte
-                </td>
-                <td class="key">M</td>
-                <td class="desc">Basculer la visibilité hors-ligne
-                </td>
-                <td class="key">P</td>
-                <td class="desc">Basculer le port mis en évidence
-                </td>
-            </tr>
-            <tr>
-                <td class="key">Dash</td>
-                <td class="desc">Montrer les mauvais liens</td>
-                <td class="key">B</td>
-                <td class="desc">Basculer la carte géo de fond</td>
-                <td class="key">G</td>
-                <td class="desc">Sélectionner la carte géo de fond
-                </td>
-            </tr>
-            <tr>
-                <td class="key">S</td>
-                <td class="desc">Toggle sprite layer</td>
-                <td class="key" y="0">X</td>
-                <td class="desc" y="0" x="33.53125">réinitialiser la
-                    carte des noeuds
-                </td>
-                <td class="key">Z</td>
-                <td class="desc">Basculer la vue oblique
-                    (expérimental)
-                </td>
-            </tr>
-            <tr>
-                <td class="key">N</td>
-                <td class="desc">cycle couche de noeuds</td>
-                <td class="key">L</td>
-                <td class="desc">Parcourir étiquettes appareils</td>
-                <td class="key">Shift-l</td>
-                <td class="desc">Parcourir étiquettes hôte</td>
-            </tr>
-            <tr>
-                <td class="key">U</td>
-                <td class="desc">survoler avec la souris</td>
-                <td class="key">R</td>
-                <td class="desc">réinitialiser le zoom et le
-                    panoramique
-                </td>
-                <td class="key">E</td>
-                <td class="desc">Egaliser les rôles de maîtrises
-                </td>
-            </tr>
-            <tr>
-                <td class="key">Dot</td>
-                <td class="desc">Basculer a la barre d'outils</td>
-                <td class="key">0</td>
-                <td class="desc">Annuler la surveillance du trafic
-                </td>
-                <td class="key">A</td>
-                <td class="desc">Surveiller tout le trafic</td>
-            </tr>
-            <tr>
-                <td class="key">F</td>
-                <td class="desc">Afficher les flux de liaison de périphérique
-                </td>
-                <td class="key">V</td>
-                <td class="desc">Show all related intents</td>
-                <td class="key">L-arrow</td>
-                <td class="desc">Show previous related intent</td>
-            </tr>
-            <tr>
-                <td class="key">R-arrow</td>
-                <td class="desc">Show next related intent</td>
-                <td class="key">W</td>
-                <td class="desc">Monitor traffic of selected intent</td>
+            <tr *ngFor="let vk of viewKeys; i as index">
+                <ng-container *ngFor="let vkrow of vk">
+                    <td class="key">{{vkrow.keystroke}}</td>
+                    <td class="desc">{{vkrow.text}}</td>
+                </ng-container>
             </tr>
         </table>
-        <hr>
+        <hr class="qhrowsep">
         <div class="qhrow">
             <table class="qh-r4-c0">
                 <tr>
-                    <td class="key">cliquer</td>
+                    <td class="key">{{lionFn("click")}}</td>
                     <td class="desc">Sélectionner l'article et montrer les
                         détails
                     </td>
                 </tr>
                 <tr>
-                    <td class="key">Cliquer sur MAJ</td>
-                    <td class="desc">Basculer l'état de sélection</td>
+                    <td class="key">{{lionFn("shift-click")}}</td>
+                    <td class="desc">{{lionFn("qh_gest_shift_click")}}</td>
                 </tr>
                 <tr>
-                    <td class="key">Glisser</td>
-                    <td class="desc">Repositionner (et épingler) le périphérique
-                        / l'hôte
-                    </td>
+                    <td class="key">{{lionFn("drag")}}</td>
+                    <td class="desc">{{lionFn("qh_gest_drag")}}</td>
                 </tr>
                 <tr>
-                    <td class="key">cmd défiler</td>
-                    <td class="desc">Zoom avant/arrière</td>
+                    <td class="key">{{lionFn("drag")}}</td>
+                    <td class="desc">{{lionFn("qh_gest_cmd_scroll")}}</td>
                 </tr>
                 <tr>
-                    <td class="key" y="48">cmd-glisser</td>
-                    <td class="desc" y="48" x="74.84375">Pan
-                </tr>
+                    <td class="key" y="48">{{lionFn("scroll")}}</td>
+                    <td class="desc" y="48" x="74.84375">{{lionFn("qh_gest_cmd_drag")}}</tr>
             </table>
         </div>
     </div>
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
index da60a1b..5dfb73c 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
@@ -26,7 +26,19 @@
 class MockFnService {}
 
 class MockKeysService {
+    keyHandler: {
+        viewKeys: any[],
+        globalKeys: any[]
+    };
 
+    mockViewKeys: Object[];
+    constructor() {
+        this.mockViewKeys = [];
+        this.keyHandler = {
+            viewKeys: this.mockViewKeys,
+            globalKeys: this.mockViewKeys
+        };
+    }
 }
 
 /**
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
index 6789e14..261f49c 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
@@ -13,13 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {LogService} from '../../log.service';
 import {FnService} from '../../util/fn.service';
 import {KeysService} from '../../util/keys.service';
 import {LionService} from '../../util/lion.service';
 
+export interface KeyEntry {
+    keystroke: string;
+    text: string;
+}
 
 @Component({
     selector: 'onos-quickhelp',
@@ -38,9 +42,23 @@
         ])
     ]
 })
-export class QuickhelpComponent {
+export class QuickhelpComponent implements OnInit {
     lionFn; // Function
 
+    dialogKeys: Object;
+    globalKeys: Object[];
+    maskedKeys: Object;
+    viewGestures: Object;
+    viewKeys: KeyEntry[][];
+
+    private static extractKeyEntry(viewKeyObj: Object, log: LogService): KeyEntry {
+        const subParts = Object.values(viewKeyObj[1]);
+        return <KeyEntry>{
+            keystroke: <string>viewKeyObj[0],
+            text: <string>subParts[1]
+        };
+    }
+
     constructor(
         private log: LogService,
         private fs: FnService,
@@ -53,10 +71,24 @@
         } else {
             this.doLion();
         }
+        this.globalKeys = [];
+        this.viewKeys = [[], [], [], [], [], [], [], [], []];
 
-        this.log.debug('Quickhelp component constructed');
+        this.log.debug('QuickhelpComponent constructed');
     }
 
+    ngOnInit(): void {
+        Object.entries(this.ks.keyHandler.viewKeys)
+            .filter((vk) => vk[0] !== '_helpFormat' && vk[0] !== '9')
+            .forEach((vk, idx) => {
+                const ke = QuickhelpComponent.extractKeyEntry(vk, this.log);
+                this.viewKeys[Math.floor(idx / 3)][idx % 3] = ke;
+            });
+        this.log.debug('QuickhelpComponent initialized');
+        this.log.debug('view keys retrieved', this.ks.keyHandler.globalKeys);
+    }
+
+
     /**
      * Read the LION bundle for Toolbar and set up the lionFn
      */
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
+            ],
+        };
     }
 }