diff --git a/package.json b/package.json
index 8edeff972..8ed132dd6 100644
--- a/package.json
+++ b/package.json
@@ -49,5 +49,8 @@
   },
   "resolutions": {
     "set-value": "^2.0.1"
+  },
+  "dependencies": {
+    "jq": "^1.7.2"
   }
 }
diff --git a/webapp/components/Editor/MenuBar.vue b/webapp/components/Editor/MenuBar.vue
index 3756e1ae2..88f3c0297 100644
--- a/webapp/components/Editor/MenuBar.vue
+++ b/webapp/components/Editor/MenuBar.vue
@@ -59,6 +59,19 @@
         :onClick="commands.horizontal_rule"
         icon="minus"
       />
+
+      <menu-bar-button
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+        :isActive="isActive.horizontal_rule()"
+        :onClick="commands.horizontal_rule"
+        icon="question-circle"
+        class="legend-button"
+      />
+
+      <menu-legend>
+      </menu-legend>
+
     </div>
   </editor-menu-bar>
 </template>
@@ -66,11 +79,19 @@
 <script>
 import { EditorMenuBar } from 'tiptap'
 import MenuBarButton from './MenuBarButton'
+import MenuLegend from './MenuLegend.vue'
 
 export default {
+  data() {
+    return {
+      hover: false
+    }
+  },
   components: {
     EditorMenuBar,
     MenuBarButton,
+    MenuLegend,
+    
   },
   props: {
     editor: Object,
@@ -78,3 +99,14 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+  .legend-button{
+    color: #70677e;
+    position:relative;
+
+    .base-icon {
+      font-size: 1.2rem;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/webapp/components/Editor/MenuLegend.vue b/webapp/components/Editor/MenuLegend.vue
new file mode 100644
index 000000000..81020e957
--- /dev/null
+++ b/webapp/components/Editor/MenuLegend.vue
@@ -0,0 +1,61 @@
+<template>
+    <ds-card class="legend">
+        <div class="legend-container">
+            <div class="legend-header">Keyboard shortcuts and markdown code</div>
+            <div class="legend-table" v-for="item in legenditems" :key="item.name">
+                <base-button size="small" circle :ghost="!isActive" @click="onClick" :icon="item.iconname">
+                    <span v-if="item.label">{{ item.label }}</span>
+                </base-button>
+                <span>{{item.name}}</span>
+                <span>{{item.shortcut}}</span>
+            </div>
+        </div>
+    </ds-card>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            legenditems: [
+                {iconname:'bold',name:'bold',shortcut:'Ctrl+b'},
+                {iconname:'italic',name:'italic',shortcut:'Ctrl+i'},
+                {iconname:'underline',name:'underline',shortcut:'Ctrl+u'},
+                {iconname:'link',name:'link',shortcut:''},
+                {iconname:'paragraph',name:'paragraph',shortcut:''},
+                {label:'H3',name:'heading 3',shortcut:'### + space'},
+                {label:'H4',name:'heading 4',shortcut:'#### + space'},
+                {iconname:'list-ul',name:'unordered list',shortcut:'* + space'},
+                {iconname:'list-ol',name:'ordered list',shortcut:'1. + space'},
+                {iconname:'quote-right',name:'quote',shortcut:'> + space'},
+                {iconname:'minus',name:'ruler',shortcut:'---'},
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.legend{
+    z-index: 1;
+    position: absolute;
+    width: 400px;
+    top: 0;
+    right:0;
+    padding: 0.5em;
+    border: 1px solid #e5e3e8;
+}
+.legend-container{
+    display: flex;
+    flex-direction: column;
+}
+.legend-header{
+    margin-bottom: 0.5em;
+}
+.legend-table{
+    display:grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    border-bottom: 0.5px solid grey;
+    padding: 0.2em;
+}
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 15394a334..47725d7ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1717,6 +1717,13 @@ binary-extensions@^1.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.0.tgz#9523e001306a32444b907423f1de2164222f6ab1"
   integrity sha512-EgmjVLMn22z7eGGv3kcnHwSnJXmFHjISTY9E/S5lIcTD3Oxw05QTcBLNkJFzcb3cNueUdF/IN4U+d78V0zO8Hw==
 
+bindings@^1.2.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
+  dependencies:
+    file-uri-to-path "1.0.0"
+
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -2298,6 +2305,14 @@ constants-browserify@~1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
+contextify@0.1.x:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/contextify/-/contextify-0.1.15.tgz#3d34681d14a5ccbbe609c9ee11eda206b8cf266f"
+  integrity sha1-PTRoHRSlzLvmCcnuEe2iBrjPJm8=
+  dependencies:
+    bindings "^1.2.1"
+    nan "^2.1.0"
+
 convert-source-map@^1.1.0, convert-source-map@^1.3.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -2435,6 +2450,23 @@ crypto-browserify@^3.0.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+cssom@0.2.x:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.2.5.tgz#2682709b5902e7212df529116ff788cd5b254894"
+  integrity sha1-JoJwm1kC5yEt9SkRb/eIzVslSJQ=
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@>=0.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
 cucumber-expressions@^5.0.13:
   version "5.0.18"
   resolved "https://registry.yarnpkg.com/cucumber-expressions/-/cucumber-expressions-5.0.18.tgz#6c70779efd3aebc5e9e7853938b1110322429596"
@@ -3120,6 +3152,11 @@ figures@^3.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-uri-to-path@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -3461,6 +3498,11 @@ htmlescape@^1.1.0:
   resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"
   integrity sha1-OgPtwiFLyjtmQko+eVk0lQnLA1E=
 
+htmlparser@1.x:
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/htmlparser/-/htmlparser-1.7.7.tgz#19e7b3997ff6fbac99ae5a7d2766489efe7e2d0e"
+  integrity sha1-GeezmX/2+6yZrlp9J2ZInv5+LQ4=
+
 http-proxy-agent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.0.tgz#6b74d332e1934a1107b97e97de4a00e267c790fe"
@@ -3891,6 +3933,14 @@ jest-regex-util@^25.2.6:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
   integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
 
+jq@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/jq/-/jq-1.7.2.tgz#f8332cc78a72c9b8f1664a57d439e5255532554c"
+  integrity sha1-+DMsx4pyybjxZkpX1DnlJVUyVUw=
+  dependencies:
+    jsdom "0.2.x"
+    xmlhttprequest "1.3.x"
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -3919,6 +3969,18 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsdom@0.2.x:
+  version "0.2.19"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-0.2.19.tgz#c0811df73901289ea6a0c825c7bb0c09c8c88629"
+  integrity sha1-wIEd9zkBKJ6moMglx7sMCcjIhik=
+  dependencies:
+    cssom "0.2.x"
+    cssstyle ">=0.2.3"
+    htmlparser "1.x"
+    request "2.x"
+  optionalDependencies:
+    contextify "0.1.x"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -4447,6 +4509,11 @@ mz@^2.4.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
+nan@^2.1.0:
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
+  integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
+
 nan@^2.9.2:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.1.tgz#a15bee3790bde247e8f38f1d446edcdaeb05f2dd"
@@ -5226,6 +5293,32 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
+request@2.x:
+  version "2.88.2"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
+  integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
 require-from-string@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
@@ -6221,6 +6314,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+xmlhttprequest@1.3.x:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.3.0.tgz#f6888d76176a9e4217694aa168a02c366e5d454a"
+  integrity sha1-9oiNdhdqnkIXaUqhaKAsNm5dRUo=
+
 xregexp@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.2.4.tgz#02a4aea056d65a42632c02f0233eab8e4d7e57ed"