diff --git a/src/components/misc/keyboard-shortcuts.vue b/src/components/misc/keyboard-shortcuts.vue
deleted file mode 100644
index 150dcc5fd..000000000
--- a/src/components/misc/keyboard-shortcuts.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-	<modal @close="close()">
-				<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
-					<div class="message is-primary">
-						<div class="message-body">
-							{{ $t('keyboardShortcuts.allPages') }}
-						</div>
-					</div>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.toggleMenu') }}</strong>
-						<shortcut :keys="['ctrl', 'e']"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.quickSearch') }}</strong>
-						<shortcut :keys="['ctrl', 'k']"/>
-					</p>
-					
-					<h3>{{ $t('list.kanban.title') }}</h3>
-					<div class="message is-primary" v-if="$route.name === 'list.kanban'">
-						<div class="message-body">
-							{{ $t('keyboardShortcuts.currentPageOnly') }}
-						</div>
-					</div>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.task.done') }}</strong>
-						<shortcut :keys="['ctrl', 'click']"/>
-					</p>
-					
-					<h3>{{ $t('keyboardShortcuts.list.title') }}</h3>
-					<div class="message is-primary" v-if="isListPage">
-						<div class="message-body">
-							{{ $t('keyboardShortcuts.currentPageOnly') }}
-						</div>
-					</div>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.list.switchToListView') }}</strong>
-						<shortcut :keys="['g', 'l']" :combination="$t('keyboardShortcuts.then')"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.list.switchToGanttView') }}</strong>
-						<shortcut :keys="['g', 'g']" :combination="$t('keyboardShortcuts.then')"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.list.switchToTableView') }}</strong>
-						<shortcut :keys="['g', 't']" :combination="$t('keyboardShortcuts.then')"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.list.switchToKanbanView') }}</strong>
-						<shortcut :keys="['g', 'k']" :combination="$t('keyboardShortcuts.then')"/>
-					</p>
-					
-					<h3>{{ $t('keyboardShortcuts.task.title') }}</h3>
-					<div
-						class="message is-primary"
-						v-if="isTaskPage">
-						<div class="message-body">
-							{{ $t('keyboardShortcuts.currentPageOnly') }}
-						</div>
-					</div>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.task.assign') }}</strong>
-						<shortcut :keys="['a']"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.task.labels') }}</strong>
-						<shortcut :keys="['l']"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.task.dueDate') }}</strong>
-						<shortcut :keys="['d']"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.task.attachment') }}</strong>
-						<shortcut :keys="['f']"/>
-					</p>
-					<p>
-						<strong>{{ $t('keyboardShortcuts.task.related') }}</strong>
-						<shortcut :keys="['r']"/>
-					</p>
-				</card>
-	</modal>
-</template>
-
-<script>
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
-import Shortcut from '@/components/misc/shortcut.vue'
-
-export default {
-	name: 'keyboard-shortcuts',
-	components: {Shortcut},
-	computed: {
-		isTaskPage() {
-			return [
-					'task.detail',
-					'task.list.detail',
-					'task.gantt.detail',
-					'task.kanban.detail',
-					'task.detail',
-				].includes(this.$route.name)
-		},
-		isListPage() {
-			return this.$route.name.startsWith('list.')
-		},
-	},
-	methods: {
-		close() {
-			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		},
-	},
-}
-</script>
\ No newline at end of file
diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
new file mode 100644
index 000000000..8baa308a1
--- /dev/null
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -0,0 +1,47 @@
+<template>
+	<modal @close="close()">
+		<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
+			<template v-for="s in shortcuts">
+				<h3>{{ $t(s.title) }}</h3>
+
+				<div class="message is-primary" v-if="s.available($route) === null">
+					<div class="message-body">
+						{{ $t('keyboardShortcuts.allPages') }}
+					</div>
+				</div>
+				<div class="message is-primary" v-if="s.available($route)">
+					<div class="message-body">
+						{{ $t('keyboardShortcuts.currentPageOnly') }}
+					</div>
+				</div>
+
+				<p v-for="sc in s.shortcuts">
+					<strong>{{ $t(sc.title) }}</strong>
+					<shortcut :keys="sc.keys"
+							  :combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
+				</p>
+			</template>
+		</card>
+	</modal>
+</template>
+
+<script>
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import Shortcut from '@/components/misc/shortcut.vue'
+import {KEYBOARD_SHORTCUTS} from './shortcuts'
+
+export default {
+	name: 'keyboard-shortcuts',
+	components: {Shortcut},
+	data() {
+		return {
+			shortcuts: KEYBOARD_SHORTCUTS,
+		}
+	},
+	methods: {
+		close() {
+			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+		},
+	},
+}
+</script>
\ No newline at end of file
diff --git a/src/components/misc/keyboard-shortcuts/shortcuts.js b/src/components/misc/keyboard-shortcuts/shortcuts.js
new file mode 100644
index 000000000..87ae7d91d
--- /dev/null
+++ b/src/components/misc/keyboard-shortcuts/shortcuts.js
@@ -0,0 +1,84 @@
+export const KEYBOARD_SHORTCUTS = [
+	{
+		title: 'keyboardShortcuts.general',
+		available: (route) => null,
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.toggleMenu',
+				keys: ['ctrl', 'e'],
+			},
+			{
+				title: 'keyboardShortcuts.quickSearch',
+				keys: ['ctrl', 'k'],
+			},
+		],
+	},
+	{
+		title: 'list.kanban.title',
+		available: (route) => route.name === 'list.kanban',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.done',
+				keys: ['ctrl', 'click'],
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.list.title',
+		available: (route) => route.name.startsWith('list.'),
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.list.switchToListView',
+				keys: ['g', 'l'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.list.switchToGanttView',
+				keys: ['g', 'g'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.list.switchToTableView',
+				keys: ['g', 't'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.list.switchToKanbanView',
+				keys: ['g', 'k'],
+				combination: 'then',
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.task.title',
+		available: (route) => [
+			'task.detail',
+			'task.list.detail',
+			'task.gantt.detail',
+			'task.kanban.detail',
+			'task.detail',
+		].includes(route.name),
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.assign',
+				keys: ['a'],
+			},
+			{
+				title: 'keyboardShortcuts.task.labels',
+				keys: ['l'],
+			},
+			{
+				title: 'keyboardShortcuts.task.dueDate',
+				keys: ['d'],
+			},
+			{
+				title: 'keyboardShortcuts.task.attachment',
+				keys: ['f'],
+			},
+			{
+				title: 'keyboardShortcuts.task.related',
+				keys: ['r'],
+			},
+		],
+	},
+]
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 11d93d598..872434266 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -743,6 +743,7 @@
   },
   "keyboardShortcuts": {
     "title": "Keyboard Shortcuts",
+    "general": "General",
     "allPages": "These shortcuts work on all pages.",
     "currentPageOnly": "These shortcuts work only on the current page.",
     "toggleMenu": "Toggle The Menu",