3 files changed, 37 insertions, 2 deletions
diff --git a/client/components/main/keyboardShortcuts.styl b/client/components/main/keyboardShortcuts.styl
new file mode 100644
index 00000000..42e0637b
--- /dev/null
+++ b/client/components/main/keyboardShortcuts.styl
@@ -0,0 +1,25 @@
+.shortcuts-list
+  .shortcuts-list-item
+    border-bottom: 1px solid darken(white, 25%)
+    padding: 10px 5px
+
+    &:last-child
+      border-bottom: none
+
+    .shortcuts-list-item-keys
+      margin-top: 5px
+      float: right
+
+      kbd
+        padding: 5px 8px
+        margin: 5px
+        font-size: 18px
+        font-weight: bold
+        background: white
+        border-radius: 3px
+        border: 1px solid darken(white, 10%)
+        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
+
+    .shortcuts-list-item-action
+      font-size: 1.4em
+      margin: 5px
diff --git a/client/components/main/keyboardShortcuts.tpl.jade b/client/components/main/keyboardShortcuts.tpl.jade
index 321c2b0a..d10068ed 100644
--- a/client/components/main/keyboardShortcuts.tpl.jade
+++ b/client/components/main/keyboardShortcuts.tpl.jade
@@ -1,4 +1,11 @@
-.wrapper
+.wrapper.shortcuts-list
   h2
     i.fa.fa-keyboard-o
     | Keyboard shortcuts
+
+  each mapping
+    .shortcuts-list-item
+      .shortcuts-list-item-keys
+        each keys
+          kbd= this
+      .shortcuts-list-item-action= action
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 9a831a40..e9367b11 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -39,7 +39,7 @@ body
   overflow-y: auto
 
   .modal-content
-    width: 660px
+    width: 500px
     min-height: 160px
     margin: 42px auto
     padding: 12px
@@ -47,6 +47,9 @@ body
     background: darken(white, 13%)
     z-index: 110
 
+    h2
+      margin-bottom: 25px
+
     .modal-close-btn
       display: block
       float: right