diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee
index 23940ff8..6499f9f0 100644
--- a/assets/javascripts/app/app.coffee
+++ b/assets/javascripts/app/app.coffee
@@ -133,6 +133,15 @@
     window.location = '/'
     return
 
+  showTip: (tip) ->
+    return if @isSingleDoc()
+    tips = @settings.get('tips') || []
+    if tips.indexOf(tip) is -1
+      tips.push(tip)
+      @settings.set('tips', tips)
+      new app.views.Tip(tip)
+    return
+
   showLoading: ->
     document.body.classList.remove '_noscript'
     document.body.classList.add '_loading'
diff --git a/assets/javascripts/app/shortcuts.coffee b/assets/javascripts/app/shortcuts.coffee
index c406dbbb..47af04c6 100644
--- a/assets/javascripts/app/shortcuts.coffee
+++ b/assets/javascripts/app/shortcuts.coffee
@@ -15,6 +15,10 @@ class app.Shortcuts
     $.off document, 'keypress', @onKeypress
     return
 
+  showTip: ->
+    app.showTip('KeyNav')
+    @showTip = null
+
   onKeydown: (event) =>
     result = if event.ctrlKey or event.metaKey
       @handleKeydownSuperEvent event unless event.altKey or event.shiftKey
@@ -62,11 +66,13 @@ class app.Shortcuts
         @trigger 'left' unless event.target.value
       when 38
         @trigger 'up'
+        @showTip?()
         false
       when 39
         @trigger 'right' unless event.target.value
       when 40
         @trigger 'down'
+        @showTip?()
         false
 
   handleKeydownSuperEvent: (event) ->
diff --git a/assets/javascripts/templates/tip_tmpl.coffee b/assets/javascripts/templates/tip_tmpl.coffee
new file mode 100644
index 00000000..4c7675bc
--- /dev/null
+++ b/assets/javascripts/templates/tip_tmpl.coffee
@@ -0,0 +1,10 @@
+app.templates.tipKeyNav = """
+  <p class="_notif-text">
+    <strong>ProTip</strong>
+    <span class="_notif-info">(click to dismiss)</span>
+  <p class="_notif-text">
+    Hit <code class="_label">&darr;</code> <code class="_label">&uarr;</code> <code class="_label">&larr;</code> <code class="_label">&rarr;</code> to navigate the sidebar.<br>
+    Hit <code class="_label">alt &darr;</code> <code class="_label">alt &uarr;</code> or <code class="_label">space</code> <code class="_label">shift space</code> to scroll the page.
+  <p class="_notif-text">
+    <a href="/help#shortcuts" class="_notif-link">See all keyboard shortcuts</a>
+"""
diff --git a/assets/javascripts/views/misc/tip.coffee b/assets/javascripts/views/misc/tip.coffee
new file mode 100644
index 00000000..6fec52a2
--- /dev/null
+++ b/assets/javascripts/views/misc/tip.coffee
@@ -0,0 +1,11 @@
+#= require views/misc/notif
+
+class app.views.Tip extends app.views.Notif
+  @className: '_notif _notif-tip'
+
+  @defautOptions:
+    autoHide: false
+
+  render: ->
+    @html @tmpl("tip#{@type}")
+    return
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index d9cf8cae..06fee0c7 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -5,7 +5,7 @@
   right: 1rem;
   width: 25rem;
   max-width: 90%;
-  padding: .75rem 1rem;
+  padding: .625rem 1rem;
   font-size: .75rem;
   color: $notifColor;
   background: $notifBackground;
@@ -25,6 +25,12 @@
 }
 
 ._notif-text { margin-bottom: 0; }
+._notif-text + ._notif-text { margin-top: .25rem; }
+
+._notif-info {
+  float: right;
+  color: $textColorLight;
+}
 
 ._notif-link,
 ._notif-link:hover {
@@ -91,3 +97,9 @@
   margin: .5em 0;
   padding-left: 1rem;
 }
+
+._notif-tip {
+  color: $textColor;
+  background: rgba($tipBackground, .95);
+  border: 1px solid $tipBorder;
+}
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index 453bfcb6..918a1745 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/assets/stylesheets/global/_variables.scss
@@ -73,6 +73,9 @@ $notifBackground: rgba(#333, .85);
 $notifColor: #fff;
 $notifColorLight: #bbb;
 
+$tipBackground: #fffdcd;
+$tipBorder: #e7dca9;
+
 $mediumScreen: '(max-width: 800px)';
 
 $contentZ: 1;
diff --git a/assets/stylesheets/global/variables-dark.scss b/assets/stylesheets/global/variables-dark.scss
index 53a589b1..d2d94256 100644
--- a/assets/stylesheets/global/variables-dark.scss
+++ b/assets/stylesheets/global/variables-dark.scss
@@ -73,6 +73,9 @@ $notifBackground: rgba(#000, .85);
 $notifColor: #fff;
 $notifColorLight: #bbb;
 
+$tipBackground: #3d4449;
+$tipBorder: #566166;
+
 $mediumScreen: '(max-width: 800px)';
 
 $contentZ: 1;