diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss
index 697505256..f49503b81 100644
--- a/frontend/src/styles/settings.scss
+++ b/frontend/src/styles/settings.scss
@@ -130,11 +130,28 @@
     }
 
     & .customThemeEdit {
-      grid-row: 3;
+      // grid-row: 3;
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: stretch;
-      gap: 0.5rem 1rem;
+      gap: 1rem;
+      // grid-template-columns: 1fr 1fr 1fr 1fr;
+      // justify-items: stretch;
+      // gap: 0.5rem 1rem;
+
+      .customThemeInputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        gap: 1rem;
+      }
+
+      .customThemeButtons {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      .inputAndButton {
+        grid-template-columns: 1fr auto;
+      }
 
       input {
         width: 100%;
@@ -147,11 +164,18 @@
 
       & p {
         grid-area: unset;
-        grid-column: 1 / span 4;
+        grid-column: span 4;
       }
 
       & .spacer {
-        grid-column: 3 / 5;
+        grid-column: span 4;
+      }
+
+      & .buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-column: 1/5;
+        gap: 0.5rem;
       }
     }
 
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 56da31473..09c83ff79 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -11,10 +11,12 @@ import * as ConfigEvent from "../observables/config-event";
 
 export function show(): void {
   $("#testConfig").removeClass("invisible");
+  $("#mobileTestConfig").removeClass("invisible");
 }
 
 export function hide(): void {
   $("#testConfig").addClass("invisible");
+  $("#mobileTestConfig").addClass("invisible");
 }
 
 export async function update(
diff --git a/frontend/static/html/pages/settings.html b/frontend/static/html/pages/settings.html
index 0e28b9e25..e04692b8c 100644
--- a/frontend/static/html/pages/settings.html
+++ b/frontend/static/html/pages/settings.html
@@ -2125,208 +2125,203 @@
         <div tabContent="custom" class="tabContent customTheme hidden">
           <div class="allCustomThemes buttons"></div>
           <div class="customThemeEdit">
-            <label class="colorText">background</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--bg-color-txt"
-              />
-              <label
-                for="--bg-color"
-                class="button"
-                style="
-                  color: var(--text-color);
-                  background: var(--sub-alt-color);
-                "
-              >
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--bg-color"
-              />
-            </div>
-            <label class="colorText">main</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--main-color-txt"
-              />
-              <label for="--main-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--main-color"
-              />
-            </div>
-            <label class="colorText">caret</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--caret-color-txt"
-              />
-              <label for="--caret-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--caret-color"
-              />
-            </div>
-            <label class="colorText">sub</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--sub-color-txt"
-              />
-              <label for="--sub-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--sub-color"
-              />
-            </div>
-            <label class="colorText">sub alt</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--sub-alt-color-txt"
-              />
-              <label for="--sub-alt-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--sub-alt-color"
-              />
-            </div>
-            <label class="colorText">text</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--text-color-txt"
-              />
-              <label for="--text-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--text-color"
-              />
-            </div>
+            <div class="customThemeInputs">
+              <label class="colorText">background</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--bg-color-txt"
+                />
+                <label
+                  for="--bg-color"
+                  class="button"
+                  style="
+                    color: var(--text-color);
+                    background: var(--sub-alt-color);
+                  "
+                >
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--bg-color"
+                />
+              </div>
+              <label class="colorText">main</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--main-color-txt"
+                />
+                <label for="--main-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--main-color"
+                />
+              </div>
+              <label class="colorText">caret</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--caret-color-txt"
+                />
+                <label for="--caret-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--caret-color"
+                />
+              </div>
+              <label class="colorText">sub</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--sub-color-txt"
+                />
+                <label for="--sub-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--sub-color"
+                />
+              </div>
+              <label class="colorText">sub alt</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--sub-alt-color-txt"
+                />
+                <label for="--sub-alt-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--sub-alt-color"
+                />
+              </div>
+              <label class="colorText">text</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--text-color-txt"
+                />
+                <label for="--text-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--text-color"
+                />
+              </div>
 
-            <span class="spacer"></span>
+              <span class="spacer"></span>
 
-            <label class="colorText">error</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--error-color-txt"
-              />
-              <label for="--error-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--error-color"
-              />
-            </div>
-            <label class="colorText">extra error</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--error-extra-color-txt"
-              />
-              <label for="--error-extra-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--error-extra-color"
-              />
-            </div>
+              <label class="colorText">error</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--error-color-txt"
+                />
+                <label for="--error-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--error-color"
+                />
+              </div>
+              <label class="colorText">extra error</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--error-extra-color-txt"
+                />
+                <label for="--error-extra-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--error-extra-color"
+                />
+              </div>
 
-            <p>colorful mode</p>
+              <p>colorful mode</p>
 
-            <label class="colorText">error</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--colorful-error-color-txt"
-              />
-              <label for="--colorful-error-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--colorful-error-color"
-              />
-            </div>
+              <label class="colorText">error</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--colorful-error-color-txt"
+                />
+                <label for="--colorful-error-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--colorful-error-color"
+                />
+              </div>
 
-            <label class="colorText">extra error</label>
-            <div class="colorPicker inputAndButton">
-              <input
-                type="text"
-                value="#000000"
-                class="input"
-                id="--colorful-error-extra-color-txt"
-              />
-              <label for="--colorful-error-extra-color" class="button">
-                <i class="fas fa-fw fa-palette"></i>
-              </label>
-              <input
-                type="color"
-                class="color"
-                value="#000000"
-                id="--colorful-error-extra-color"
-              />
+              <label class="colorText">extra error</label>
+              <div class="colorPicker inputAndButton">
+                <input
+                  type="text"
+                  value="#000000"
+                  class="input"
+                  id="--colorful-error-extra-color-txt"
+                />
+                <label for="--colorful-error-extra-color" class="button">
+                  <i class="fas fa-fw fa-palette"></i>
+                </label>
+                <input
+                  type="color"
+                  class="color"
+                  value="#000000"
+                  id="--colorful-error-extra-color"
+                />
+              </div>
             </div>
-            <div
-              style="
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                grid-column: 1/5;
-                gap: 0.5rem;
-              "
-            >
+            <div class="customThemeButtons">
               <div class="button" id="loadCustomColorsFromPreset">
                 load from preset
               </div>