diff --git a/public/css/style.scss b/public/css/style.scss
index 4218ee2e8..331a94475 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -3079,17 +3079,35 @@ key {
   &.matrix {
     .r1,
     .r2,
-    .r3,
+    .r3 {
+      display: flex;
+      justify-content: left;
+      margin-left: 5.51rem;
+    }
+
+    .r1 {
+      margin-left: 5.8rem;
+    }
+
     .r4 {
       display: flex;
       justify-content: left;
-      margin-left: 4.51rem;
+      margin-left: 3.26rem;
     }
     .r5 {
-      grid-template-columns: 6.9fr 4.6fr 6.9fr;
+      grid-template-columns: 4fr 6fr 5fr;
+      margin-left: 1.25rem;
     }
 
-    .row {
+    .r1 {
+      :nth-child(12) {
+        opacity: 0;
+      }
+    }
+
+    .r1,
+    .r2,
+    .r3 {
       :nth-child(13) {
         opacity: 0;
       }
@@ -3153,13 +3171,30 @@ key {
     .r4 {
       display: flex;
       justify-content: left;
-      margin-left: 4.51rem;
+      margin-left: 7.8rem;
     }
+
+    .r4 {
+      margin-left: 5.5rem;
+    }
+
     .r5 {
       grid-template-columns: 6fr 2fr 1fr 2fr 6fr;
     }
 
-    .row {
+    #KeySpace2 {
+      opacity: 1;
+    }
+
+    .r1 {
+      :nth-child(12) {
+        opacity: 0;
+      }
+    }
+
+    .r1,
+    .r2,
+    .r3 {
       :nth-child(13) {
         opacity: 0;
       }
diff --git a/public/index.html b/public/index.html
index 2a4040673..819ffb838 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1090,10 +1090,10 @@
                 <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>
+                <div class="keymap-split-spacer"></div>
                 <div class="keymap-key" id="KeyM">
                   <span class="letter">m</span>
                 </div>
diff --git a/public/js/layouts.js b/public/js/layouts.js
index 824f27544..6c738d87b 100644
--- a/public/js/layouts.js
+++ b/public/js/layouts.js
@@ -50,6 +50,16 @@ const layouts = {
             " "
         ],
     },
+    colemak_dh_matrix: {
+        keymapShowTopRow: false,
+        keys: [
+            "`~", "1!", "2@", "3#", "4$", "5%", "6^", "7&", "8*", "9(", "0)", "-_", "=+",
+            "qQ", "wW", "fF", "pP", "bB", "jJ", "lL", "uU", "yY", ";:", "[{", "]}", "\\|",
+            "aA", "rR", "sS", "tT", "gG", "mM", "nN", "eE", "iI", "oO", "'\"",
+            "\\|", "zZ", "xX", "cC", "dD", "vV", "kK", "hH", ",<", ".>", "/?",
+            " "
+        ],
+    },
     colemak_dh_iso: {
         keymapShowTopRow: false,
         iso: true,