diff --git a/frontend/src/js/controllers/input-controller.js b/frontend/src/js/controllers/input-controller.js
index 146651b5a..4f68d3e8a 100644
--- a/frontend/src/js/controllers/input-controller.js
+++ b/frontend/src/js/controllers/input-controller.js
@@ -124,7 +124,7 @@ function handleSpace() {
         .toString()
         .toUpperCase()
     );
-    Settings.groups.layout?.updateButton();
+    Settings.groups.layout?.updateInput();
   }
   dontInsertSpace = true;
 
diff --git a/frontend/src/js/elements/commandline-lists.js b/frontend/src/js/elements/commandline-lists.js
index 487b55bc9..932cdaca8 100644
--- a/frontend/src/js/elements/commandline-lists.js
+++ b/frontend/src/js/elements/commandline-lists.js
@@ -192,7 +192,7 @@ Misc.getFontsList().then((fonts) => {
     },
     exec: (name) => {
       UpdateConfig.setFontFamily(name.replace(/\s/g, "_"));
-      // Settings.groups.fontFamily.updateButton();
+      // Settings.groups.fontFamily.updateInput();
     },
   });
 });
diff --git a/frontend/src/js/pages/settings.js b/frontend/src/js/pages/settings.js
index ff9016e66..4276dc639 100644
--- a/frontend/src/js/pages/settings.js
+++ b/frontend/src/js/pages/settings.js
@@ -22,37 +22,48 @@ async function initGroups() {
   await UpdateConfig.loadPromise;
   groups.smoothCaret = new SettingsGroup(
     "smoothCaret",
-    UpdateConfig.setSmoothCaret
+    UpdateConfig.setSmoothCaret,
+    "button"
   );
   groups.difficulty = new SettingsGroup(
     "difficulty",
-    UpdateConfig.setDifficulty
+    UpdateConfig.setDifficulty,
+    "button"
+  );
+  groups.quickTab = new SettingsGroup(
+    "quickTab",
+    UpdateConfig.setQuickTabMode,
+    "button"
   );
-  groups.quickTab = new SettingsGroup("quickTab", UpdateConfig.setQuickTabMode);
   groups.showLiveWpm = new SettingsGroup(
     "showLiveWpm",
     UpdateConfig.setShowLiveWpm,
+    "button",
     () => {
-      groups.keymapMode.updateButton();
+      groups.keymapMode.updateInput();
     }
   );
   groups.showLiveAcc = new SettingsGroup(
     "showLiveAcc",
-    UpdateConfig.setShowLiveAcc
+    UpdateConfig.setShowLiveAcc,
+    "button"
   );
   groups.showLiveBurst = new SettingsGroup(
     "showLiveBurst",
-    UpdateConfig.setShowLiveBurst
+    UpdateConfig.setShowLiveBurst,
+    "button"
   );
   groups.showTimerProgress = new SettingsGroup(
     "showTimerProgress",
-    UpdateConfig.setShowTimerProgress
+    UpdateConfig.setShowTimerProgress,
+    "button"
   );
   groups.keymapMode = new SettingsGroup(
     "keymapMode",
     UpdateConfig.setKeymapMode,
+    "button",
     () => {
-      groups.showLiveWpm.updateButton();
+      groups.showLiveWpm.updateInput();
     },
     () => {
       if (Config.keymapMode === "off") {
@@ -68,19 +79,23 @@ async function initGroups() {
   );
   groups.keymapMatrix = new SettingsGroup(
     "keymapStyle",
-    UpdateConfig.setKeymapStyle
+    UpdateConfig.setKeymapStyle,
+    "button"
   );
   groups.keymapLayout = new SettingsGroup(
     "keymapLayout",
-    UpdateConfig.setKeymapLayout
+    UpdateConfig.setKeymapLayout,
+    "select"
   );
   groups.keymapLegendStyle = new SettingsGroup(
     "keymapLegendStyle",
-    UpdateConfig.setKeymapLegendStyle
+    UpdateConfig.setKeymapLegendStyle,
+    "button"
   );
   groups.showKeyTips = new SettingsGroup(
     "showKeyTips",
     UpdateConfig.setKeyTips,
+    "button",
     null,
     () => {
       if (Config.showKeyTips) {
@@ -93,96 +108,128 @@ async function initGroups() {
   groups.freedomMode = new SettingsGroup(
     "freedomMode",
     UpdateConfig.setFreedomMode,
+    "button",
     () => {
-      groups.confidenceMode.updateButton();
+      groups.confidenceMode.updateInput();
     }
   );
   groups.strictSpace = new SettingsGroup(
     "strictSpace",
-    UpdateConfig.setStrictSpace
+    UpdateConfig.setStrictSpace,
+    "button"
   );
   groups.oppositeShiftMode = new SettingsGroup(
     "oppositeShiftMode",
-    UpdateConfig.setOppositeShiftMode
+    UpdateConfig.setOppositeShiftMode,
+    "button"
   );
   groups.confidenceMode = new SettingsGroup(
     "confidenceMode",
     UpdateConfig.setConfidenceMode,
+    "button",
     () => {
-      groups.freedomMode.updateButton();
-      groups.stopOnError.updateButton();
+      groups.freedomMode.updateInput();
+      groups.stopOnError.updateInput();
     }
   );
   groups.indicateTypos = new SettingsGroup(
     "indicateTypos",
-    UpdateConfig.setIndicateTypos
+    UpdateConfig.setIndicateTypos,
+    "button"
   );
   groups.hideExtraLetters = new SettingsGroup(
     "hideExtraLetters",
-    UpdateConfig.setHideExtraLetters
+    UpdateConfig.setHideExtraLetters,
+    "button"
+  );
+  groups.blindMode = new SettingsGroup(
+    "blindMode",
+    UpdateConfig.setBlindMode,
+    "button"
+  );
+  groups.quickEnd = new SettingsGroup(
+    "quickEnd",
+    UpdateConfig.setQuickEnd,
+    "button"
   );
-  groups.blindMode = new SettingsGroup("blindMode", UpdateConfig.setBlindMode);
-  groups.quickEnd = new SettingsGroup("quickEnd", UpdateConfig.setQuickEnd);
   groups.repeatQuotes = new SettingsGroup(
     "repeatQuotes",
-    UpdateConfig.setRepeatQuotes
+    UpdateConfig.setRepeatQuotes,
+    "button"
+  );
+  groups.enableAds = new SettingsGroup(
+    "enableAds",
+    UpdateConfig.setEnableAds,
+    "button"
   );
-  groups.enableAds = new SettingsGroup("enableAds", UpdateConfig.setEnableAds);
   groups.alwaysShowWordsHistory = new SettingsGroup(
     "alwaysShowWordsHistory",
-    UpdateConfig.setAlwaysShowWordsHistory
+    UpdateConfig.setAlwaysShowWordsHistory,
+    "button"
   );
   groups.britishEnglish = new SettingsGroup(
     "britishEnglish",
-    UpdateConfig.setBritishEnglish
+    UpdateConfig.setBritishEnglish,
+    "button"
   );
   groups.singleListCommandLine = new SettingsGroup(
     "singleListCommandLine",
-    UpdateConfig.setSingleListCommandLine
+    UpdateConfig.setSingleListCommandLine,
+    "button"
   );
   groups.capsLockWarning = new SettingsGroup(
     "capsLockWarning",
-    UpdateConfig.setCapsLockWarning
+    UpdateConfig.setCapsLockWarning,
+    "button"
   );
   groups.flipTestColors = new SettingsGroup(
     "flipTestColors",
-    UpdateConfig.setFlipTestColors
+    UpdateConfig.setFlipTestColors,
+    "button"
   );
   groups.swapEscAndTab = new SettingsGroup(
     "swapEscAndTab",
-    UpdateConfig.setSwapEscAndTab
+    UpdateConfig.setSwapEscAndTab,
+    "button"
   );
   groups.showOutOfFocusWarning = new SettingsGroup(
     "showOutOfFocusWarning",
-    UpdateConfig.setShowOutOfFocusWarning
+    UpdateConfig.setShowOutOfFocusWarning,
+    "button"
   );
   groups.colorfulMode = new SettingsGroup(
     "colorfulMode",
-    UpdateConfig.setColorfulMode
+    UpdateConfig.setColorfulMode,
+    "button"
   );
   groups.startGraphsAtZero = new SettingsGroup(
     "startGraphsAtZero",
-    UpdateConfig.setStartGraphsAtZero
+    UpdateConfig.setStartGraphsAtZero,
+    "button"
   );
   groups.randomTheme = new SettingsGroup(
     "randomTheme",
-    UpdateConfig.setRandomTheme
+    UpdateConfig.setRandomTheme,
+    "button"
   );
   groups.stopOnError = new SettingsGroup(
     "stopOnError",
     UpdateConfig.setStopOnError,
+    "button",
     () => {
-      groups.confidenceMode.updateButton();
+      groups.confidenceMode.updateInput();
     }
   );
   groups.soundVolume = new SettingsGroup(
     "soundVolume",
     UpdateConfig.setSoundVolume,
+    "button",
     () => {}
   );
   groups.playSoundOnError = new SettingsGroup(
     "playSoundOnError",
     UpdateConfig.setPlaySoundOnError,
+    "button",
     () => {
       if (Config.playSoundOnError) Sound.playError();
     }
@@ -190,6 +237,7 @@ async function initGroups() {
   groups.playSoundOnClick = new SettingsGroup(
     "playSoundOnClick",
     UpdateConfig.setPlaySoundOnClick,
+    "button",
     () => {
       if (Config.playSoundOnClick !== "off")
         Sound.playClick(Config.playSoundOnClick);
@@ -197,52 +245,86 @@ async function initGroups() {
   );
   groups.showAllLines = new SettingsGroup(
     "showAllLines",
-    UpdateConfig.setShowAllLines
+    UpdateConfig.setShowAllLines,
+    "button"
+  );
+  groups.paceCaret = new SettingsGroup(
+    "paceCaret",
+    UpdateConfig.setPaceCaret,
+    "button"
   );
-  groups.paceCaret = new SettingsGroup("paceCaret", UpdateConfig.setPaceCaret);
   groups.repeatedPace = new SettingsGroup(
     "repeatedPace",
-    UpdateConfig.setRepeatedPace
+    UpdateConfig.setRepeatedPace,
+    "button"
+  );
+  groups.minWpm = new SettingsGroup("minWpm", UpdateConfig.setMinWpm, "button");
+  groups.minAcc = new SettingsGroup("minAcc", UpdateConfig.setMinAcc, "button");
+  groups.minBurst = new SettingsGroup(
+    "minBurst",
+    UpdateConfig.setMinBurst,
+    "button"
   );
-  groups.minWpm = new SettingsGroup("minWpm", UpdateConfig.setMinWpm);
-  groups.minAcc = new SettingsGroup("minAcc", UpdateConfig.setMinAcc);
-  groups.minBurst = new SettingsGroup("minBurst", UpdateConfig.setMinBurst);
   groups.smoothLineScroll = new SettingsGroup(
     "smoothLineScroll",
-    UpdateConfig.setSmoothLineScroll
+    UpdateConfig.setSmoothLineScroll,
+    "button"
+  );
+  groups.lazyMode = new SettingsGroup(
+    "lazyMode",
+    UpdateConfig.setLazyMode,
+    "button"
+  );
+  groups.layout = new SettingsGroup("layout", UpdateConfig.setLayout, "select");
+  groups.language = new SettingsGroup(
+    "language",
+    UpdateConfig.setLanguage,
+    "select"
+  );
+  groups.fontSize = new SettingsGroup(
+    "fontSize",
+    UpdateConfig.setFontSize,
+    "button"
+  );
+  groups.pageWidth = new SettingsGroup(
+    "pageWidth",
+    UpdateConfig.setPageWidth,
+    "button"
   );
-  groups.lazyMode = new SettingsGroup("lazyMode", UpdateConfig.setLazyMode);
-  groups.layout = new SettingsGroup("layout", UpdateConfig.setLayout);
-  groups.language = new SettingsGroup("language", UpdateConfig.setLanguage);
-  groups.fontSize = new SettingsGroup("fontSize", UpdateConfig.setFontSize);
-  groups.pageWidth = new SettingsGroup("pageWidth", UpdateConfig.setPageWidth);
   groups.caretStyle = new SettingsGroup(
     "caretStyle",
-    UpdateConfig.setCaretStyle
+    UpdateConfig.setCaretStyle,
+    "button"
   );
   groups.paceCaretStyle = new SettingsGroup(
     "paceCaretStyle",
-    UpdateConfig.setPaceCaretStyle
+    UpdateConfig.setPaceCaretStyle,
+    "button"
   );
   groups.timerStyle = new SettingsGroup(
     "timerStyle",
-    UpdateConfig.setTimerStyle
+    UpdateConfig.setTimerStyle,
+    "button"
   );
   groups.highlighteMode = new SettingsGroup(
     "highlightMode",
-    UpdateConfig.setHighlightMode
+    UpdateConfig.setHighlightMode,
+    "button"
   );
   groups.timerOpacity = new SettingsGroup(
     "timerOpacity",
-    UpdateConfig.setTimerOpacity
+    UpdateConfig.setTimerOpacity,
+    "button"
   );
   groups.timerColor = new SettingsGroup(
     "timerColor",
-    UpdateConfig.setTimerColor
+    UpdateConfig.setTimerColor,
+    "button"
   );
   groups.fontFamily = new SettingsGroup(
     "fontFamily",
     UpdateConfig.setFontFamily,
+    "button",
     null,
     () => {
       let customButton = $(
@@ -260,15 +342,18 @@ async function initGroups() {
   );
   groups.alwaysShowDecimalPlaces = new SettingsGroup(
     "alwaysShowDecimalPlaces",
-    UpdateConfig.setAlwaysShowDecimalPlaces
+    UpdateConfig.setAlwaysShowDecimalPlaces,
+    "button"
   );
   groups.alwaysShowCPM = new SettingsGroup(
     "alwaysShowCPM",
-    UpdateConfig.setAlwaysShowCPM
+    UpdateConfig.setAlwaysShowCPM,
+    "button"
   );
   groups.customBackgroundSize = new SettingsGroup(
     "customBackgroundSize",
-    UpdateConfig.setCustomBackgroundSize
+    UpdateConfig.setCustomBackgroundSize,
+    "button"
   );
   // groups.customLayoutfluid = new SettingsGroup(
   //   "customLayoutfluid",
@@ -280,8 +365,9 @@ export function reset() {
   $(".pageSettings .section.themes .favThemes.buttons").empty();
   $(".pageSettings .section.themes .allThemes.buttons").empty();
   $(".pageSettings .section.languageGroups .buttons").empty();
-  $(".pageSettings .section.layout .buttons").empty();
-  $(".pageSettings .section.keymapLayout .buttons").empty();
+  $(".pageSettings .section.layout select").empty().select2("destroy");
+  $(".pageSettings .section.keymapLayout select").empty().select2("destroy");
+  $(".pageSettings .section.language select").empty().select2("destroy");
   $(".pageSettings .section.funbox .buttons").empty();
   $(".pageSettings .section.fontFamily .buttons").empty();
 }
@@ -291,43 +377,42 @@ export async function fillSettingsPage() {
   await UpdateConfig.loadPromise;
   ThemePicker.refreshButtons();
 
-  let langGroupsEl = $(
-    ".pageSettings .section.languageGroups .buttons"
-  ).empty();
-  let currentLanguageGroup = await Misc.findCurrentGroup(Config.language);
+  let languageEl = $(".pageSettings .section.language select").empty();
   Misc.getLanguageGroups().then((groups) => {
     groups.forEach((group) => {
-      langGroupsEl.append(
-        `<div class="languageGroup button${
-          currentLanguageGroup === group.name ? " active" : ""
-        }" group='${group.name}'>${group.name}</div>`
-      );
+      let append = `<optgroup label="${group.name}">`;
+      group.languages.forEach((language) => {
+        append += `<option value="${language}">${language.replace(
+          /_/g,
+          " "
+        )}</option>`;
+      });
+      append += `</optgroup>`;
+      languageEl.append(append);
     });
   });
+  languageEl.select2();
 
-  let layoutEl = $(".pageSettings .section.layout .buttons").empty();
+  let layoutEl = $(".pageSettings .section.layout select").empty();
   Object.keys(layouts).forEach((layout) => {
     layoutEl.append(
-      `<div class="layout button" layout='${layout}'>${
+      `<option value='${layout}'>${
         layout === "default" ? "off" : layout.replace(/_/g, " ")
-      }</div>`
+      }</option>`
     );
   });
+  layoutEl.select2();
 
-  let keymapEl = $(".pageSettings .section.keymapLayout .buttons").empty();
-  keymapEl.append(
-    `<div class="layout button" keymapLayout='overrideSync'>emulator sync</div>`
-  );
+  let keymapEl = $(".pageSettings .section.keymapLayout select").empty();
+  keymapEl.append(`<option value='overrideSync'>emulator sync</option>`);
   Object.keys(layouts).forEach((layout) => {
     if (layout.toString() != "default") {
       keymapEl.append(
-        `<div class="layout button" keymapLayout='${layout}'>${layout.replace(
-          /_/g,
-          " "
-        )}</div>`
+        `<option value='${layout}'>${layout.replace(/_/g, " ")}</option>`
       );
     }
   });
+  keymapEl.select2();
 
   let funboxEl = $(".pageSettings .section.funbox .buttons").empty();
   funboxEl.append(`<div class="funbox button" funbox='none'>none</div>`);
@@ -553,7 +638,7 @@ export function showAccountSection() {
 
 export function update() {
   Object.keys(groups).forEach((group) => {
-    groups[group].updateButton();
+    groups[group].updateInput();
   });
 
   refreshTagsSettingsSection();
diff --git a/frontend/src/js/settings/settings-group.js b/frontend/src/js/settings/settings-group.js
index 43363973e..d82473957 100644
--- a/frontend/src/js/settings/settings-group.js
+++ b/frontend/src/js/settings/settings-group.js
@@ -3,65 +3,71 @@ import Config from "../config";
 export default class SettingsGroup {
   constructor(
     configName,
-    toggleFunction,
+    configFunction,
+    mode,
     setCallback = null,
     updateCallback = null
   ) {
     this.configName = configName;
     this.configValue = Config[configName];
-    this.onOff = typeof this.configValue === "boolean";
-    this.toggleFunction = toggleFunction;
+    this.mode = mode;
+    this.configFunction = configFunction;
     this.setCallback = setCallback;
     this.updateCallback = updateCallback;
 
-    this.updateButton();
+    this.updateInput();
 
-    $(document).on(
-      "click",
-      `.pageSettings .section.${this.configName} .button`,
-      (e) => {
-        let target = $(e.currentTarget);
-        if (target.hasClass("disabled") || target.hasClass("no-auto-handle"))
-          return;
-        if (this.onOff) {
-          if (target.hasClass("on")) {
-            this.setValue(true);
-          } else {
-            this.setValue(false);
-          }
-          this.updateButton();
-          if (this.setCallback !== null) this.setCallback();
-        } else {
-          const value = target.attr(configName);
+    if (this.mode === "select") {
+      $(document).on(
+        "change",
+        `.pageSettings .section.${this.configName} select`,
+        (e) => {
+          const target = $(e.currentTarget);
+          if (target.hasClass("disabled") || target.hasClass("no-auto-handle"))
+            return;
+          this.setValue(target.val());
+        }
+      );
+    } else if (this.mode === "button") {
+      $(document).on(
+        "click",
+        `.pageSettings .section.${this.configName} .button`,
+        (e) => {
+          let target = $(e.currentTarget);
+          if (target.hasClass("disabled") || target.hasClass("no-auto-handle"))
+            return;
+          let value = target.attr(configName);
           const params = target.attr("params");
           if (!value && !params) return;
+          if (value === "true") value = true;
+          if (value === "false") value = false;
           this.setValue(value, params);
         }
-      }
-    );
+      );
+    }
   }
 
   setValue(value, params = undefined) {
     if (params === undefined) {
-      this.toggleFunction(value);
+      this.configFunction(value);
     } else {
-      this.toggleFunction(value, ...params);
+      this.configFunction(value, ...params);
     }
-    this.updateButton();
+    console.log(`${this.configName} set to ${value}`);
+    this.updateInput();
     if (this.setCallback !== null) this.setCallback();
   }
 
-  updateButton() {
+  updateInput() {
     this.configValue = Config[this.configName];
     $(`.pageSettings .section.${this.configName} .button`).removeClass(
       "active"
     );
-    if (this.onOff) {
-      const onOffString = this.configValue ? "on" : "off";
-      $(
-        `.pageSettings .section.${this.configName} .buttons .button.${onOffString}`
-      ).addClass("active");
-    } else {
+    if (this.mode === "select") {
+      $(`.pageSettings .section.${this.configName} select`)
+        .val(this.configValue)
+        .trigger("change.select2");
+    } else if (this.mode === "button") {
       $(
         `.pageSettings .section.${this.configName} .button[${this.configName}='${this.configValue}']`
       ).addClass("active");
diff --git a/frontend/src/js/test/funbox.js b/frontend/src/js/test/funbox.js
index 04b87cf95..69cbc821a 100644
--- a/frontend/src/js/test/funbox.js
+++ b/frontend/src/js/test/funbox.js
@@ -155,7 +155,7 @@ export async function activate(funbox) {
 
     if (funbox === "simon_says") {
       UpdateConfig.setKeymapMode("next", true);
-      Settings.groups.keymapMode?.updateButton();
+      Settings.groups.keymapMode?.updateInput();
       TestLogic.restart(undefined, true);
     }
 
@@ -172,11 +172,11 @@ export async function activate(funbox) {
       $("#funBoxTheme").attr("href", `funbox/simon_says.css`);
       UpdateConfig.setKeymapMode("off", true);
       UpdateConfig.setHighlightMode("letter", true);
-      Settings.groups.keymapMode?.updateButton();
+      Settings.groups.keymapMode?.updateInput();
       TestLogic.restart(undefined, true);
     } else if (funbox === "layoutfluid") {
       // UpdateConfig.setKeymapMode("next");
-      Settings.groups.keymapMode?.updateButton();
+      Settings.groups.keymapMode?.updateInput();
       // UpdateConfig.setSavedLayout(Config.layout);
       UpdateConfig.setLayout(
         Config.customLayoutfluid
@@ -184,14 +184,14 @@ export async function activate(funbox) {
           : "qwerty",
         true
       );
-      Settings.groups.layout?.updateButton();
+      Settings.groups.layout?.updateInput();
       UpdateConfig.setKeymapLayout(
         Config.customLayoutfluid
           ? Config.customLayoutfluid.split("#")[0]
           : "qwerty",
         true
       );
-      Settings.groups.keymapLayout?.updateButton();
+      Settings.groups.keymapLayout?.updateInput();
       TestLogic.restart(undefined, true);
     } else if (funbox === "memory") {
       UpdateConfig.setMode("words", true);
@@ -214,7 +214,7 @@ export async function activate(funbox) {
   // if (funbox !== "layoutfluid" || mode !== "script") {
   //   if (Config.layout !== Config.savedLayout) {
   //     UpdateConfig.setLayout(Config.savedLayout);
-  //     Settings.groups.layout.updateButton();
+  //     Settings.groups.layout.updateInput();
   //   }
   // }
   TestUI.updateModesNotice();
diff --git a/frontend/static/index.html b/frontend/static/index.html
index 3fc8633b6..38d9f3435 100644
--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@@ -2047,10 +2047,20 @@
                   page. This function disables tab navigation on the website.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    quickTab="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    quickTab="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2094,29 +2104,24 @@
                   focus on raw speed. If enabled, quick end is recommended.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    blindMode="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    blindMode="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     ⠀
                   </div>
                 </div>
               </div>
-              <!-- <div class="section readAheadMode">
-                <h1>read ahead mode</h1>
-                <div class="text">
-                  When enabled, the active and immediately following test words
-                  will be hidden. Helps you practice reading ahead.
-                </div>
-                <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
-                    off
-                  </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
-                    on
-                  </div>
-                </div>
-              </div> -->
               <div class="section alwaysShowWordsHistory">
                 <h1>always show words history</h1>
                 <div class="text">
@@ -2124,10 +2129,19 @@
                   end of the test. Can cause slight lag with a lot of words.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    alwaysShowWordsHistory="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    alwaysShowWordsHistory="true"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2314,25 +2328,30 @@
                 <div>
                   <div class="buttons">
                     <div
-                      class="button off active"
+                      class="button"
+                      britishEnglish="false"
                       tabindex="0"
                       onclick="this.blur();"
                     >
                       off
                     </div>
-                    <div class="button on" tabindex="0" onclick="this.blur();">
+                    <div
+                      class="button"
+                      britishEnglish="true"
+                      tabindex="0"
+                      onclick="this.blur();"
+                    >
                       on
                     </div>
                   </div>
                 </div>
               </div>
-              <div class="section languageGroups fullWidth">
-                <h1>language groups</h1>
-                <div class="buttons"></div>
-              </div>
-              <div class="section language fullWidth">
+              <div class="section language">
                 <h1>language</h1>
-                <div class="buttons"></div>
+                <div class="text">
+                  Change in which language you want to type.
+                </div>
+                <select></select>
               </div>
               <div class="section funbox fullWidth">
                 <h1>funbox</h1>
@@ -2375,10 +2394,20 @@
                   Allows you to delete any word, even if it was typed correctly.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    freedomMode="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    freedomMode="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2390,10 +2419,20 @@
                   character when this mode is enabled.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    strictSpace="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    strictSpace="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2521,10 +2560,20 @@
                   last incorrect entry with a space.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    quickEnd="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    quickEnd="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2571,10 +2620,20 @@
                   when you press a key and nothing happens.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    hideExtraLetters="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    hideExtraLetters="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2585,10 +2644,20 @@
                   Swap the behavior of tab and escape keys.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    swapEscAndTab="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    swapEscAndTab="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2599,22 +2668,34 @@
                   Replaces accented letters with their normal equivalents.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    lazyMode="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    lazyMode="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
               </div>
-              <div class="section layout fullWidth">
+              <div class="section layout">
                 <h1>layout emulator</h1>
                 <div class="text">
                   With this setting you can emulate other layouts. This setting
                   is best kept off, as it can break things like dead keys and
                   alt layers.
                 </div>
-                <div class="buttons"></div>
+                <select></select>
+                <!-- <div class="buttons">
+                </div> -->
               </div>
               <div class="sectionSpacer"></div>
             </div>
@@ -2735,10 +2816,20 @@
                   space too early.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    playSoundOnError="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    playSoundOnError="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2757,10 +2848,20 @@
                   The caret will move smoothly between letters and words.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    smoothCaret="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    smoothCaret="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -2882,10 +2983,20 @@
                   does not override the pace caret if it's already enabled.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    repeatedPace="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    repeatedPace="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3102,10 +3213,20 @@
                   When enabled, the line transition will be animated.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    smoothLineScroll="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    smoothLineScroll="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3119,10 +3240,20 @@
                   timer text and live wpm to not be visible.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showAllLines="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showAllLines="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3134,10 +3265,20 @@
                   without the need to hover over the stats.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    alwaysShowDecimalPlaces="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    alwaysShowDecimalPlaces="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3149,10 +3290,20 @@
                   default words per minute calculation.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    alwaysShowCPM="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    alwaysShowCPM="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3164,10 +3315,20 @@
                   data is. Turning this off may exaggerate the value changes.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    startGraphsAtZero="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    startGraphsAtZero="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3318,6 +3479,13 @@
                   </div>
                 </div>
               </div>
+              <div class="section keymapLayout">
+                <h1>keymap layout</h1>
+                <div class="text">
+                  Controls which layout is displayed on the keymap.
+                </div>
+                <select></select>
+              </div>
               <div class="section keymapStyle fullWidth">
                 <h1>keymap style</h1>
                 <!-- <div class="text">Displays the keymap in a different style.</div> -->
@@ -3393,10 +3561,6 @@
                   </div>
                 </div>
               </div>
-              <div class="section keymapLayout fullWidth">
-                <h1>keymap layout</h1>
-                <div class="buttons"></div>
-              </div>
               <div class="sectionSpacer"></div>
             </div>
 
@@ -3415,10 +3579,20 @@
                   be brighter than the already typed text.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    flipTestColors="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    flipTestColors="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3430,10 +3604,20 @@
                   of the text color, making the website more colorful.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    colorfulMode="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     off
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    colorfulMode="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     on
                   </div>
                 </div>
@@ -3830,10 +4014,20 @@
                   second.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showLiveWpm="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showLiveWpm="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3842,10 +4036,20 @@
                 <h1>live accuracy</h1>
                 <div class="text">Displays live accuracy during the test.</div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showLiveAcc="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showLiveAcc="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3857,10 +4061,20 @@
                   typed.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showLiveBurst="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showLiveBurst="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3872,10 +4086,20 @@
                   words/custom tests.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showTimerProgress="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showTimerProgress="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3886,10 +4110,20 @@
                   Shows the keybind tips at the bottom of the page.
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showKeyTips="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showKeyTips="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3901,10 +4135,20 @@
                   focus' (not being able to type).
                 </div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showOutOfFocusWarning="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    showOutOfFocusWarning="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3913,10 +4157,20 @@
                 <h1>caps lock warning</h1>
                 <div class="text">Displays a warning when caps lock is on.</div>
                 <div class="buttons">
-                  <div class="button off" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    capsLockWarning="false"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     hide
                   </div>
-                  <div class="button on" tabindex="0" onclick="this.blur();">
+                  <div
+                    class="button"
+                    capsLockWarning="true"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
                     show
                   </div>
                 </div>
@@ -3938,7 +4192,7 @@
                 <div class="text">Import or export the settings as JSON.</div>
                 <div class="buttons">
                   <div
-                    class="button off"
+                    class="button"
                     id="importSettingsButton"
                     tabindex="0"
                     onclick="this.blur();"
@@ -3946,7 +4200,7 @@
                     import
                   </div>
                   <div
-                    class="button off"
+                    class="button"
                     id="exportSettingsButton"
                     tabindex="0"
                     onclick="this.blur();"
@@ -4000,7 +4254,7 @@
                 </div>
                 <div class="buttons">
                   <div
-                    class="button off danger"
+                    class="button danger"
                     id="resetSettingsButton"
                     tabindex="0"
                     onclick="this.blur();"
@@ -4017,7 +4271,7 @@
                 </div>
                 <div class="buttons">
                   <div
-                    class="button off danger"
+                    class="button danger"
                     id="resetPersonalBestsButton"
                     tabindex="0"
                     onclick="this.blur();"
@@ -4034,7 +4288,7 @@
                 </div>
                 <div class="buttons">
                   <div
-                    class="button off danger"
+                    class="button danger"
                     id="updateAccountName"
                     tabindex="0"
                     onclick="this.blur();"
@@ -4097,36 +4351,6 @@
                   </div>
                 </div>
               </div>
-              <!-- <div class="section updateAccountEmail needsAccount hidden">
-                <h1>update account email</h1>
-                <div class="text">
-                  In case you misspell it or get a new address.
-                </div>
-                <div class="buttons">
-                  <div
-                    class="button off danger"
-                    id="updateAccountEmail"
-                    tabindex="0"
-                    onclick="this.blur();"
-                  >
-                    update email
-                  </div>
-                </div>
-              </div>
-              <div class="section updateAccountPassword needsAccount hidden">
-                <h1>update account password</h1>
-                <div class="text">Change the password you use to sign in.</div>
-                <div class="buttons">
-                  <div
-                    class="button off danger"
-                    id="updateAccountPassword"
-                    tabindex="0"
-                    onclick="this.blur();"
-                  >
-                    update password
-                  </div>
-                </div>
-              </div> -->
               <div class="section deleteAccount needsAccount hidden">
                 <h1>delete account</h1>
                 <div class="text">
@@ -4134,7 +4358,7 @@
                 </div>
                 <div class="buttons">
                   <div
-                    class="button off danger"
+                    class="button danger"
                     id="deleteAccount"
                     tabindex="0"
                     onclick="this.blur();"