diff --git a/src/components/misc/keyboard-shortcuts.vue b/src/components/misc/keyboard-shortcuts.vue
index 359ed6df..05659dc9 100644
--- a/src/components/misc/keyboard-shortcuts.vue
+++ b/src/components/misc/keyboard-shortcuts.vue
@@ -7,10 +7,6 @@
 						<p class="card-header-title">Available Keyboard Shortcuts</p>
 					</header>
 					<div class="card-content content">
-						<p class="info">
-							The available keyboard shortcuts depend on the current page. Not all shortcuts are available
-							everywhere.
-						</p>
 						<p>
 							<strong>Toggle The Menu</strong>
 							<span class="shortcuts">
@@ -19,7 +15,13 @@
 								<span>e</span>
 							</span>
 						</p>
-						<p v-if="$route.name === 'list.kanban'">
+						<h3>Kanban</h3>
+						<div class="message is-primary" v-if="$route.name === 'list.kanban'">
+							<div class="message-body">
+								These shortcuts work on the current page.
+							</div>
+						</div>
+						<p>
 							<strong>Mark a task as done</strong>
 							<span class="shortcuts">
 								<span>ctrl</span>
@@ -27,39 +29,42 @@
 								<span>click</span>
 							</span>
 						</p>
-						<template
-							v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
-							<p>
-								<strong>Assign this task to a user</strong>
-								<span class="shortcuts">
-									<span>a</span>
-								</span>
-							</p>
-							<p>
-								<strong>Add labels to this task</strong>
-								<span class="shortcuts">
-									<span>l</span>
-								</span>
-							</p>
-							<p>
-								<strong>Change the due date of this task</strong>
-								<span class="shortcuts">
-									<span>d</span>
-								</span>
-							</p>
-							<p>
-								<strong>Add an attachment to this task</strong>
-								<span class="shortcuts">
-									<span>f</span>
-								</span>
-							</p>
-							<p>
-								<strong>Modify related tasks of this task</strong>
-								<span class="shortcuts">
-									<span>r</span>
-								</span>
-							</p>
-						</template>
+						<h3>Task Page</h3>
+						<div class="message is-primary" v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
+							<div class="message-body">
+								These shortcuts work on the current page.
+							</div>
+						</div>
+						<p>
+							<strong>Assign this task to a user</strong>
+							<span class="shortcuts">
+								<span>a</span>
+							</span>
+						</p>
+						<p>
+							<strong>Add labels to this task</strong>
+							<span class="shortcuts">
+								<span>l</span>
+							</span>
+						</p>
+						<p>
+							<strong>Change the due date of this task</strong>
+							<span class="shortcuts">
+								<span>d</span>
+							</span>
+						</p>
+						<p>
+							<strong>Add an attachment to this task</strong>
+							<span class="shortcuts">
+								<span>f</span>
+							</span>
+						</p>
+						<p>
+							<strong>Modify related tasks of this task</strong>
+							<span class="shortcuts">
+								<span>r</span>
+							</span>
+						</p>
 					</div>
 				</div>
 			</div>
diff --git a/src/styles/components/keyboard-shortcuts.scss b/src/styles/components/keyboard-shortcuts.scss
index 574e585a..2fabb3a1 100644
--- a/src/styles/components/keyboard-shortcuts.scss
+++ b/src/styles/components/keyboard-shortcuts.scss
@@ -40,5 +40,9 @@
         }
       }
     }
+
+    .message-body {
+      padding: .5rem .75rem;
+    }
   }
 }