diff --git a/public/index.html b/public/index.html
index ad772202c..acc6637ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1654,6 +1654,7 @@
 <script src="js/chartjs-plugin-trendline.js?v=46"></script>
 <script src="js/chartjs-plugin-annotation.js"></script>
 <script src="js/html2canvas.min.js"></script>
+<script src="js/misc.js?v=46"></script>
 <script src="js/words.js?v=46"></script>
 <script src="js/layouts.js?v=46"></script>
 <script src="js/db.js?v=46"></script>
diff --git a/public/js/commandline.js b/public/js/commandline.js
index 99578ec7a..c733842ad 100644
--- a/public/js/commandline.js
+++ b/public/js/commandline.js
@@ -687,17 +687,8 @@ function updateCommandsTagsList() {
   }
 }
 
-let themesList;
-
-$.getJSON("themes/list.json", function (data) {
-  commandsThemes.list = [];
-  themesList = data.sort(function (a, b) {
-    (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
-    if (nameA < nameB) return -1;
-    if (nameA > nameB) return 1;
-    return 0;
-  });
-  data.forEach((theme) => {
+getThemesList().then((themes) => {
+  themes.forEach((theme) => {
     commandsThemes.list.push({
       id: "changeTheme" + capitalizeFirstLetter(theme.name),
       display: theme.name.replace(/_/g, " "),
@@ -711,32 +702,13 @@ $.getJSON("themes/list.json", function (data) {
   });
 });
 
-let funboxList;
-
-$.getJSON("funbox/list.json", function (data) {
-  funboxList = data.sort(function (a, b) {
-    (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
-    if (nameA < nameB) return -1;
-    if (nameA > nameB) return 1;
-    return 0;
-  });
-});
-
 let commandsFonts = {
   title: "Change font...",
   list: [],
 };
 
-let fontsList;
-
-$.getJSON("js/fonts.json", function (data) {
-  fontsList = data.sort(function (a, b) {
-    (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
-    if (nameA < nameB) return -1;
-    if (nameA > nameB) return 1;
-    return 0;
-  });
-  data.forEach((font) => {
+getFontsList().then((fonts) => {
+  fonts.forEach((font) => {
     commandsFonts.list.push({
       id: "changeFont" + font.name.replace(/ /g, "_"),
       display: font.display !== undefined ? font.display : font.name,
diff --git a/public/js/misc.js b/public/js/misc.js
new file mode 100644
index 000000000..44213ea22
--- /dev/null
+++ b/public/js/misc.js
@@ -0,0 +1,50 @@
+let themesList = null;
+async function getThemesList() {
+  if (themesList == null) {
+    return $.getJSON("themes/list.json", function (data) {
+      themesList = data.sort(function (a, b) {
+        (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
+      return themesList;
+    });
+  } else {
+    return themesList;
+  }
+}
+
+let funboxList = null;
+async function getFunboxList() {
+  if (funboxList == null) {
+    return $.getJSON("funbox/list.json", function (data) {
+      funboxList = data.sort(function (a, b) {
+        (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
+      return funboxList;
+    });
+  } else {
+    return funboxList;
+  }
+}
+
+let fontsList = null;
+async function getFontsList() {
+  if (fontsList == null) {
+    return $.getJSON("js/fonts.json", function (data) {
+      fontsList = data.sort(function (a, b) {
+        (nameA = a.name.toLowerCase()), (nameB = b.name.toLowerCase());
+        if (nameA < nameB) return -1;
+        if (nameA > nameB) return 1;
+        return 0;
+      });
+      return fontsList;
+    });
+  } else {
+    return fontsList;
+  }
+}
diff --git a/public/js/script.js b/public/js/script.js
index 2c2ffd2b2..a7c60bed2 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -230,19 +230,19 @@ function activateFunbox(funbox, mode) {
     }
 
     if (funbox === "simon_says") {
-      setActiveKeymapModeButton();
+      settingsGroups.keymapMode.updateButton();
       restartTest();
     }
   } else if (mode === "script") {
     if (funbox === "tts") {
       $("#funBoxTheme").attr("href", `funbox/simon_says.css`);
       config.keymapMode = "off";
-      setActiveKeymapModeButton();
+      settingsGroups.keymapMode.updateButton();
       restartTest();
     } else if (funbox === "layoutfluid") {
       config.keymapMode = "on";
       changeKeymapMode("next");
-      setActiveKeymapModeButton();
+      settingsGroups.keymapMode.updateButton();
       changeLayout("qwerty");
       setActiveLayoutButton();
       changeKeymapLayout("qwerty");
diff --git a/public/js/settings.js b/public/js/settings.js
index 9a899ebef..9a99fc466 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -161,14 +161,18 @@ settingsGroups.timerOpacity = new SettingsGroup(
 settingsGroups.timerColor = new SettingsGroup("timerColor", setTimerColor);
 settingsGroups.fontFamily = new SettingsGroup("fontFamily", setFontFamily);
 
-function updateSettingsPage() {
+fillSettingsPage();
+
+async function fillSettingsPage() {
   let themesEl = $(".pageSettings .section.themes .buttons").empty();
-  themesList.forEach((theme) => {
-    themesEl.append(
-      `<div class="theme button" theme='${theme.name}' style="color:${
-        theme.textColor
-      };background:${theme.bgColor}">${theme.name.replace(/_/g, " ")}</div>`
-    );
+  getThemesList().then((themes) => {
+    themes.forEach((theme) => {
+      themesEl.append(
+        `<div class="theme button" theme='${theme.name}' style="color:${
+          theme.textColor
+        };background:${theme.bgColor}">${theme.name.replace(/_/g, " ")}</div>`
+      );
+    });
   });
 
   let langEl = $(".pageSettings .section.language .buttons").empty();
@@ -211,37 +215,43 @@ function updateSettingsPage() {
 
   let funboxEl = $(".pageSettings .section.funbox .buttons").empty();
   funboxEl.append(`<div class="funbox button" funbox='none'>none</div>`);
-  funboxList.forEach((funbox) => {
-    if (funbox.name === "mirror") {
-      funboxEl.append(
-        `<div class="funbox button" funbox='${funbox.name}' type="${
-          funbox.type
-        }" style="transform:scaleX(-1);">${funbox.name.replace(
-          /_/g,
-          " "
-        )}</div>`
-      );
-    } else {
-      funboxEl.append(
-        `<div class="funbox button" funbox='${funbox.name}' type="${
-          funbox.type
-        }">${funbox.name.replace(/_/g, " ")}</div>`
-      );
-    }
+  getFunboxList().then((funboxModes) => {
+    funboxModes.forEach((funbox) => {
+      if (funbox.name === "mirror") {
+        funboxEl.append(
+          `<div class="funbox button" funbox='${funbox.name}' type="${
+            funbox.type
+          }" style="transform:scaleX(-1);">${funbox.name.replace(
+            /_/g,
+            " "
+          )}</div>`
+        );
+      } else {
+        funboxEl.append(
+          `<div class="funbox button" funbox='${funbox.name}' type="${
+            funbox.type
+          }">${funbox.name.replace(/_/g, " ")}</div>`
+        );
+      }
+    });
   });
 
   let fontsEl = $(".pageSettings .section.fontFamily .buttons").empty();
-  fontsList.forEach((font) => {
-    fontsEl.append(
-      `<div class="button" style="font-family:${
-        font.display !== undefined ? font.display : font.name
-      }" fontFamily="${font.name.replace(/ /g, "_")}" tabindex="0"
-      onclick="this.blur();">${
-        font.display !== undefined ? font.display : font.name
-      }</div>`
-    );
+  getFontsList().then((fonts) => {
+    fonts.forEach((font) => {
+      fontsEl.append(
+        `<div class="button" style="font-family:${
+          font.display !== undefined ? font.display : font.name
+        }" fontFamily="${font.name.replace(/ /g, "_")}" tabindex="0"
+        onclick="this.blur();">${
+          font.display !== undefined ? font.display : font.name
+        }</div>`
+      );
+    });
   });
+}
 
+function updateSettingsPage() {
   Object.keys(settingsGroups).forEach((group) => {
     settingsGroups[group].updateButton();
   });
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 6032e3a54..379281f12 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -52,7 +52,7 @@ let config = {
 };
 
 //cookies
-function saveConfigToCookie() {
+async function saveConfigToCookie() {
   // showNotification('saving to cookie',1000);
   if (config.freedomMode === null) config.freedomMode = false;
   let d = new Date();
@@ -66,7 +66,7 @@ function saveConfigToCookie() {
   saveConfigToDB();
 }
 
-function saveConfigToDB() {
+async function saveConfigToDB() {
   if (firebase.auth().currentUser !== null) {
     // showNotification('saving to db',1000);
     accountIconLoading(true);