diff --git a/public/index.html b/public/index.html
index 2c299c81c..4355f0df0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1248,7 +1248,7 @@
               <h1>keymap style</h1>
               <div class="text">Displays the keymap in a different style.</div>
               <div class="buttons">
-                <div class="button" keymapStyle="off" tabindex="0" onclick="this.blur();">off</div>
+                <div class="button" keymapStyle="staggered" tabindex="0" onclick="this.blur();">staggered</div>
                 <div class="button" keymapStyle="matrix" tabindex="0" onclick="this.blur();">matrix</div>
               </div>
           </div>
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index a93db361a..c4fe90e92 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -40,7 +40,7 @@ let defaultConfig = {
   stopOnError: false,
   showAllLines: false,
   keymapMode: "off",
-  keymapStyle: "off",
+  keymapStyle: "staggered",
   keymapLayout: "qwerty",
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
@@ -794,7 +794,7 @@ function changeKeymapMode(mode, nosave) {
 }
 
 function changeKeymapStyle(style, nosave) {
-  if (style === "off") {
+  if (style === "staggered") {
     $(".r1, .r2, .r3, .r4").removeClass("matrix");
     $(".r5").removeClass("matrixSpace");
     $("#KeyLeftBracket").removeClass("hide-key");
@@ -806,7 +806,7 @@ function changeKeymapStyle(style, nosave) {
     $(".r5").addClass("matrixSpace");
     $("#KeyLeftBracket").addClass("hide-key");
     $("#KeyRightBracket").addClass("hide-key");
-    $("#KeyQuote").addClass("hide-key"); 
+    $("#KeyQuote").addClass("hide-key");
   }
   config.keymapStyle = style;
   if (!nosave) saveConfigToCookie();