diff --git a/public/css/style.scss b/public/css/style.scss
index eef39414f..9eca6808c 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -2411,7 +2411,8 @@ key {
   }
 }
 
-.hidden-key {
+.hidden-key,
+.hide-key {
   opacity: 0;
 }
 
@@ -2440,3 +2441,14 @@ key {
   display: grid;
   grid-template-columns: 4fr 7.5fr 4fr;
 }
+
+.matrix {
+  display: flex;
+  justify-content: left;
+  margin-left: 4.51rem;
+}
+
+.matrixSpace {
+  grid-template-columns: 6.75fr 1.9fr 6.75fr;
+  //grid-template-columns: 6.90fr 4.60fr 6.90fr; // wider spacebar
+}
diff --git a/public/index.html b/public/index.html
index 5c203fad0..0ffac5300 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1812,6 +1812,28 @@
                 </div>
               </div>
             </div>
+            <div class="section keymapStyle">
+              <h1>keymap style</h1>
+              <div class="text">Displays the keymap in a different style.</div>
+              <div class="buttons">
+                <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>
             <div class="section keymapLayout">
               <h1>keymap layout</h1>
               <div class="buttons"></div>
diff --git a/public/js/settings.js b/public/js/settings.js
index 061d76d2c..6406a92ed 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -93,12 +93,18 @@ settingsGroups.keymapMode = new SettingsGroup(
   },
   () => {
     if (config.keymapMode === "off") {
+      $(".pageSettings .section.keymapStyle").addClass("hidden");
       $(".pageSettings .section.keymapLayout").addClass("hidden");
     } else {
+      $(".pageSettings .section.keymapStyle").removeClass("hidden");
       $(".pageSettings .section.keymapLayout").removeClass("hidden");
     }
   }
 );
+settingsGroups.keymapMatrix = new SettingsGroup(
+  "keymapStyle",
+  changeKeymapStyle
+);
 settingsGroups.keymapLayout = new SettingsGroup(
   "keymapLayout",
   changeKeymapLayout
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index a3d11dcfc..c4fe90e92 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -40,6 +40,7 @@ let defaultConfig = {
   stopOnError: false,
   showAllLines: false,
   keymapMode: "off",
+  keymapStyle: "staggered",
   keymapLayout: "qwerty",
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
@@ -147,6 +148,7 @@ function applyConfig(configObj) {
     setTimerColor(configObj.timerColor, true);
     setTimerOpacity(configObj.timerOpacity, true);
     changeKeymapMode(configObj.keymapMode, true);
+    changeKeymapStyle(configObj.keymapStyle, true);
     changeKeymapLayout(configObj.keymapLayout, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothLineScroll(configObj.smoothLineScroll, true);
@@ -791,6 +793,25 @@ function changeKeymapMode(mode, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+function changeKeymapStyle(style, nosave) {
+  if (style === "staggered") {
+    $(".r1, .r2, .r3, .r4").removeClass("matrix");
+    $(".r5").removeClass("matrixSpace");
+    $("#KeyLeftBracket").removeClass("hide-key");
+    $("#KeyRightBracket").removeClass("hide-key");
+    $("#KeyQuote").removeClass("hide-key");
+  }
+  if (style === "matrix") {
+    $(".r1, .r2, .r3, .r4").addClass("matrix");
+    $(".r5").addClass("matrixSpace");
+    $("#KeyLeftBracket").addClass("hide-key");
+    $("#KeyRightBracket").addClass("hide-key");
+    $("#KeyQuote").addClass("hide-key");
+  }
+  config.keymapStyle = style;
+  if (!nosave) saveConfigToCookie();
+}
+
 function changeKeymapLayout(layout, nosave) {
   if (layout == null || layout == undefined) {
     layout = "qwerty";