diff --git a/public/css/style.scss b/public/css/style.scss
index 9eca6808c..d5ae8c587 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -1904,7 +1904,8 @@ key {
     &.layout,
     &.keymapLayout,
     &.fontFamily,
-    &.funbox {
+    &.funbox,
+    &.keymapStyle {
       grid-template-columns: 2fr 1fr;
       grid-template-areas:
         "title tabs"
@@ -2385,10 +2386,15 @@ key {
     }
   }
 
-  &#KeySpace {
+  &#KeySpace,
+  &#KeySpace2 {
     width: 100%;
   }
 
+  &#KeySpace2 {
+    opacity: 0;
+  }
+
   &.flash {
     animation-name: flashKey;
     animation-duration: 1s;
@@ -2416,6 +2422,14 @@ key {
   opacity: 0;
 }
 
+.keymap {
+  .keymap-split-spacer,
+  .keymap-stagger-split-spacer,
+  .keymap-matrix-split-spacer {
+    display: none;
+  }
+}
+
 .r1 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
@@ -2439,16 +2453,118 @@ key {
 
 .r5 {
   display: grid;
-  grid-template-columns: 4fr 7.5fr 4fr;
+  grid-template-columns: 4fr 5.5fr 4fr;
+  // &.matrixSpace {
+  //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
+  //   grid-template-columns: 6.9fr 4.6fr 6.9fr; // wider spacebar
+  // }
+  // &.splitSpace {
+  //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
+  //   grid-template-columns: 4fr 7.5fr 4fr;
+  // }
 }
 
-.matrix {
-  display: flex;
-  justify-content: left;
-  margin-left: 4.51rem;
-}
+// .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
+.keymap {
+  &.matrix {
+    .r1,
+    .r2,
+    .r3,
+    .r4 {
+      display: flex;
+      justify-content: left;
+      margin-left: 4.51rem;
+    }
+    .r5 {
+      grid-template-columns: 6.9fr 4.6fr 6.9fr;
+    }
+
+    #KeyLeftBracket {
+      opacity: 0;
+    }
+    #KeyRightBracket {
+      opacity: 0;
+    }
+    #KeyQuote {
+      opacity: 0;
+    }
+  }
+  &.split {
+    .keymap-split-spacer {
+      display: block;
+    }
+    .keymap-stagger-split-spacer {
+      display: block;
+    }
+    .r1 {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
+      opacity: 0;
+    }
+
+    .r2 {
+      display: grid;
+      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
+    }
+
+    .r3 {
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
+    }
+
+    .r4 {
+      display: grid;
+      grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.5fr;
+    }
+    .r5 {
+      grid-template-columns: 5fr 3.5fr 1fr 3.5fr 5fr;
+    }
+    #KeySpace2 {
+      opacity: 1;
+    }
+  }
+  &.split_matrix {
+    .keymap-split-spacer {
+      display: block;
+      width: 2rem;
+      height: 2rem;
+    }
+    .keymap-stagger-split-spacer {
+      display: none;
+    }
+    .keymap-matrix-split-spacer {
+      display: block;
+      width: 2rem;
+      height: 2rem;
+    }
+    .r1,
+    .r2,
+    .r3,
+    .r4 {
+      display: flex;
+      justify-content: left;
+      margin-left: 4.51rem;
+    }
+    .r5 {
+      grid-template-columns: 6fr 2fr 1fr 2fr 6fr;
+    }
+
+    #KeyLeftBracket {
+      opacity: 0;
+    }
+    #KeyRightBracket {
+      opacity: 0;
+    }
+    #KeyQuote {
+      opacity: 0;
+    }
+    #KeySpace2 {
+      opacity: 1;
+    }
+  }
 }
diff --git a/public/index.html b/public/index.html
index 0ffac5300..30525b43f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1001,6 +1001,8 @@
             <div class="keymap-key inactive hidden-key" id="Key6">
               <span class="letter">6</span>
             </div>
+              <div class="keymap-split-spacer"></div>
+
             <div class="keymap-key inactive hidden-key" id="Key7">
               <span class="letter">7</span>
             </div>
@@ -1042,9 +1044,11 @@
               <div class="keymap-key" id="KeyT">
                 <span class="letter">t</span>
               </div>
+              <div class="keymap-matrix-split-spacer"></div>
               <div class="keymap-key" id="KeyY">
                 <span class="letter">y</span>
               </div>
+              <div class="keymap-stagger-split-spacer"></div>
               <div class="keymap-key" id="KeyU">
                 <span class="letter">u</span>
               </div>
@@ -1087,6 +1091,7 @@
               <div class="keymap-key" id="KeyG">
                 <span class="letter">g</span>
               </div>
+              <div class="keymap-split-spacer"></div>
               <div class="keymap-key" id="KeyH">
                 <span class="letter">h</span>
               </div>
@@ -1129,6 +1134,7 @@
               <div class="keymap-key" id="KeyB">
                 <span class="letter">b</span>
               </div>
+              <div class="keymap-split-spacer"></div>
               <div class="keymap-key" id="KeyN">
                 <span class="letter">n</span>
               </div>
@@ -1152,7 +1158,11 @@
               <div class="keymap-key hidden-key">
                 <span class="letter"></span>
               </div>
-              <div class="keymap-key" id="KeySpace">
+              <div class="keymap-key key-split-space" id="KeySpace">
+                <span class="letter"></span>
+              </div>
+              <div class="keymap-split-spacer"></div>
+              <div class="keymap-key key-split-space" id="KeySpace2">
                 <span class="letter"></span>
               </div>
               <div class="keymap-key hidden-key">
@@ -1814,7 +1824,7 @@
             </div>
             <div class="section keymapStyle">
               <h1>keymap style</h1>
-              <div class="text">Displays the keymap in a different style.</div>
+              <!-- <div class="text">Displays the keymap in a different style.</div> -->
               <div class="buttons">
                 <div
                   class="button"
@@ -1832,6 +1842,22 @@
                 >
                   matrix
                 </div>
+                <div
+                  class="button"
+                  keymapStyle="split"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  split
+                </div>
+                <div
+                  class="button"
+                  keymapStyle="split_matrix"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  split matrix
+                </div>
               </div>
             </div>
             <div class="section keymapLayout">
diff --git a/public/js/script.js b/public/js/script.js
index 380b641a6..72da1eb8e 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1011,6 +1011,10 @@ function flashPressedKeymapKey(key, correct) {
       key = `#Key${key.toUpperCase()}`;
   }
 
+  if (key == "#KeySpace") {
+    key = ".key-split-space";
+  }
+
   try {
     if (correct) {
       $(key)
@@ -1102,6 +1106,9 @@ function updateHighlightedKeymapKey() {
   }
 
   $(highlightKey).addClass("active-key");
+  if (highlightKey === "#KeySpace") {
+    $("#KeySpace2").addClass("active-key");
+  }
 }
 
 function updateCaretPosition() {
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index c4fe90e92..23dc39118 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -794,20 +794,43 @@ function changeKeymapMode(mode, nosave) {
 }
 
 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");
-  }
+  $(".keymap").removeClass("matrix");
+  $(".keymap").removeClass("split");
+  $(".keymap").removeClass("split_matrix");
+
   if (style === "matrix") {
-    $(".r1, .r2, .r3, .r4").addClass("matrix");
-    $(".r5").addClass("matrixSpace");
-    $("#KeyLeftBracket").addClass("hide-key");
-    $("#KeyRightBracket").addClass("hide-key");
-    $("#KeyQuote").addClass("hide-key");
+    $(".keymap").addClass("matrix");
+  } else if (style === "split") {
+    $(".keymap").addClass("split");
+  } else if (style === "split_matrix") {
+    $(".keymap").addClass("split_matrix");
   }
+  // if (style === "staggered") {
+  //   $(".keymap .keymap-split-spacer").addClass("hidden");
+  //   $(".keymap .r1, .r2, .r3, .r4").removeClass("matrix");
+  //   $(".keymap .r5").removeClass("matrixSpace");
+  //   $(".keymap #KeyLeftBracket").removeClass("hide-key");
+  //   $(".keymap #KeyRightBracket").removeClass("hide-key");
+  //   $(".keymap #KeyQuote").removeClass("hide-key");
+  // }
+  // if (style === "split") {
+  //   $(".keymap .keymap-split-spacer").removeClass("hidden");
+  //   $(".keymap .r1, .keymap .r2, .keymap .r3, .keymap .r4").removeClass(
+  //     "matrix"
+  //   );
+  //   $(".keymap .r5").removeClass("splitSpace");
+  //   $(".keymap #KeyLeftBracket").removeClass("hide-key");
+  //   $(".keymap #KeyRightBracket").removeClass("hide-key");
+  //   $(".keymap #KeyQuote").removeClass("hide-key");
+  // }
+  // if (style === "matrix") {
+  //   $(".keymap .keymap-split-spacer").addClass("hidden");
+  //   $(".keymap .r1, .keymap .r2, .keymap .r3, .keymap .r4").addClass("matrix");
+  //   $(".keymap .r5").addClass("matrixSpace");
+  //   $(".keymap #KeyLeftBracket").addClass("hide-key");
+  //   $(".keymap #KeyRightBracket").addClass("hide-key");
+  //   $(".keymap #KeyQuote").addClass("hide-key");
+  // }
   config.keymapStyle = style;
   if (!nosave) saveConfigToCookie();
 }