diff --git a/package.json b/package.json
index 32a3a0f..3568c3e 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "ngx-clipboard": "^14.0.1",
     "ngx-perfect-scrollbar": "^10.1.1",
     "rxjs": "~6.6.0",
+    "simple-keyboard": "^3.3.22",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"
   },
diff --git a/src/renderer/app/layout/layout.routing.ts b/src/renderer/app/layout/layout.routing.ts
index bae84a6..8aca6df 100644
--- a/src/renderer/app/layout/layout.routing.ts
+++ b/src/renderer/app/layout/layout.routing.ts
@@ -52,6 +52,10 @@ const LAYOUT_ROUTES: Routes = [
           {
             path: 'progressbar',
             loadChildren: () => import('../pages/component/progressbar/progressbar.module').then(m => m.ProgressbarComponentModule)
+          },
+          {
+            path: 'keyboard',
+            loadChildren: () => import('../pages/component/keyboard/keyboard.module').then(m => m.KeyboardModule)
           }
         ]
       },
diff --git a/src/renderer/app/layout/navigation/navigation.component.html b/src/renderer/app/layout/navigation/navigation.component.html
index 227ea29..c0c3cc9 100644
--- a/src/renderer/app/layout/navigation/navigation.component.html
+++ b/src/renderer/app/layout/navigation/navigation.component.html
@@ -34,6 +34,9 @@
         <li routerLinkActive="navigation__active">
           <a [routerLink]="['/component/progressbar']"><i class="fa fa-pagelines"></i> Progressbar</a>
         </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/keyboard']"><i class="fa fa-keyboard-o"></i> Keyboard</a>
+        </li>
       </ul>
     </li>
     <li routerLinkActive="navigation__sub--active" class="navigation__sub">
diff --git a/src/renderer/app/pages/component/keyboard/keyboard.component.html b/src/renderer/app/pages/component/keyboard/keyboard.component.html
new file mode 100644
index 0000000..41bb0bd
--- /dev/null
+++ b/src/renderer/app/pages/component/keyboard/keyboard.component.html
@@ -0,0 +1,19 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Keyboard</h1>
+    <small>This template is built using <code>simple-keyboard</code> and provides some usage examples</small>
+  </header>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Keyboard</h4>
+        <div class="form-group">
+          <input type="text" class="form-control form-control-lg" (input)="onInputChange($event)" value="{{value}}"
+                 placeholder="Tap on the virtual keyboard to start">
+          <i class="form-group__bar"></i>
+        </div>
+        <div class="simple-keyboard"></div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/renderer/app/pages/component/keyboard/keyboard.component.ts b/src/renderer/app/pages/component/keyboard/keyboard.component.ts
new file mode 100644
index 0000000..8582da5
--- /dev/null
+++ b/src/renderer/app/pages/component/keyboard/keyboard.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import Keyboard from 'simple-keyboard';
+
+@Component({
+  selector: 'app-root',
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './keyboard.component.html',
+  styleUrls: [
+    '../../../../../../node_modules/simple-keyboard/build/css/index.css'
+  ]
+})
+export class KeyboardComponent implements OnInit {
+  value = '';
+  keyboard: Keyboard;
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+  // eslint-disable-next-line @angular-eslint/use-lifecycle-interface
+  ngAfterViewInit() {
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button)
+    });
+  }
+
+  onChange = (input: string) => {
+    this.value = input;
+  };
+  onKeyPress = (button: string) => {
+    if (button === '{shift}' || button === '{lock}') {
+      this.handleShift();
+    }
+  };
+  onInputChange = (event: any) => {
+    this.keyboard.setInput(event.target.value);
+  };
+  handleShift = () => {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === 'default' ? 'shift' : 'default';
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  };
+}
diff --git a/src/renderer/app/pages/component/keyboard/keyboard.module.ts b/src/renderer/app/pages/component/keyboard/keyboard.module.ts
new file mode 100644
index 0000000..5abf472
--- /dev/null
+++ b/src/renderer/app/pages/component/keyboard/keyboard.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { KeyboardComponent } from '@renderer/app/pages/component/keyboard/keyboard.component';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+const KEYBOARD_ROUTES = [
+  {path: '', component: KeyboardComponent}
+];
+
+@NgModule({
+  declarations: [
+    KeyboardComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(KEYBOARD_ROUTES)
+  ],
+  providers: []
+})
+export class KeyboardModule {
+}
diff --git a/yarn.lock b/yarn.lock
index 0110797..d2ed52f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8942,6 +8942,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha1-oUEMLt2PB3sItOJTyOrPyvBXRhw=
 
+simple-keyboard@^3.3.22:
+  version "3.3.22"
+  resolved "https://registry.yarnpkg.com/simple-keyboard/-/simple-keyboard-3.3.22.tgz#33aab849cc15779b9ea174d7a75a178471929d89"
+  integrity sha512-dXuqORS0XbmkzAIB9lRhyDq3lbq3FManY6RgBKteC6sCirvNLT5TgMSX0v4eDLxBaBRbE/J5nV1ixQgFpzuNsw==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/slash/download/slash-3.0.0.tgz?cache=0&sync_timestamp=1618384496016&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslash%2Fdownload%2Fslash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"