diff --git a/src/front-end/css/general.css b/src/front-end/css/general.css
index 49c5a6c6..7b917bb2 100644
--- a/src/front-end/css/general.css
+++ b/src/front-end/css/general.css
@@ -288,6 +288,7 @@ sup {
     right: 0;
     bottom: 0;
     background-color: rgba(225,225,225,1);
+    color: black;
     z-index: 2;
     cursor: pointer;
     border-width: 3px;
@@ -297,6 +298,12 @@ sup {
 
     padding: 10px;
 }
+#help-overlay kbd {
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+    background-color: white;
+}
 #help-title {
     text-align: center;
 }
\ No newline at end of file
diff --git a/src/front-end/js/book.js b/src/front-end/js/book.js
index 2422a045..67741b70 100644
--- a/src/front-end/js/book.js
+++ b/src/front-end/js/book.js
@@ -668,14 +668,16 @@ aria-label="Show hidden lines"></button>';
             document.getElementById("help-overlay").style.display = "none";
         }
 
-        if (e.shiftKey) {
-            switch (e.key) {
-                case '?':
-                    e.preventDefault();
-                    showHelp();
-                    break;
-            }
+        // Usually needs the Shift key to be pressed
+        switch (e.key) {
+            case '?':
+                e.preventDefault();
+                showHelp();
+                break;
+        }
 
+        // Rest of the keys are only active when the Shift key is not pressed
+        if (e.shiftKey) {
             return;
         }