diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 9331e333..10856c81 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -28,6 +28,9 @@ function toggleDark() {
           @click="togglePreferences('zenMode')"
         />
       </CommonTooltip>
+      <CommonTooltip :content="$t('magic_keys.dialog_header')">
+        <button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
+      </CommonTooltip>
       <CommonTooltip :content="$t('settings.about.sponsor_action')">
         <NuxtLink
           flex
@@ -92,5 +95,10 @@ function toggleDark() {
         GitHub
       </NuxtLink>
     </div>
+    <div>
+      <button hover:underline @click="toggleKeyboardShortcuts">
+        {{ $t('magic_keys.dialog_header') }}
+      </button>
+    </div>
   </footer>
 </template>