diff --git a/frontend/src/js/controllers/theme-controller.js b/frontend/src/js/controllers/theme-controller.js
index 12264b067..f8221a753 100644
--- a/frontend/src/js/controllers/theme-controller.js
+++ b/frontend/src/js/controllers/theme-controller.js
@@ -2,7 +2,6 @@ import * as ThemeColors from "../elements/theme-colors";
 import * as ChartController from "./chart-controller";
 import * as Misc from "../misc";
 import Config from "../config";
-import * as UI from "../ui";
 import tinycolor from "tinycolor2";
 import * as BackgroundFilter from "../elements/custom-background-filter";
 
@@ -89,14 +88,14 @@ export function apply(themeName, isPreview = false) {
   let name = "serika_dark";
   if (themeName !== "custom") {
     name = themeName;
-    UI.swapElements(
+    Misc.swapElements(
       $('.pageSettings [tabContent="custom"]'),
       $('.pageSettings [tabContent="preset"]'),
       250
     );
   } else {
     //is custom
-    UI.swapElements(
+    Misc.swapElements(
       $('.pageSettings [tabContent="preset"]'),
       $('.pageSettings [tabContent="custom"]'),
       250
diff --git a/frontend/src/js/elements/account-button.js b/frontend/src/js/elements/account-button.js
index d9b6668c5..5fa498ee4 100644
--- a/frontend/src/js/elements/account-button.js
+++ b/frontend/src/js/elements/account-button.js
@@ -1,4 +1,4 @@
-import * as UI from "../ui";
+import * as Misc from "./../misc";
 
 export function loading(truefalse) {
   if (truefalse) {
@@ -14,13 +14,13 @@ export function loading(truefalse) {
 
 export function update() {
   if (firebase.auth().currentUser != null) {
-    UI.swapElements(
+    Misc.swapElements(
       $("#menu .icon-button.login"),
       $("#menu .icon-button.account"),
       250
     );
   } else {
-    UI.swapElements(
+    Misc.swapElements(
       $("#menu .icon-button.account"),
       $("#menu .icon-button.login"),
       250
diff --git a/frontend/src/js/misc.js b/frontend/src/js/misc.js
index 57bc8bdaa..1ddd6aac7 100644
--- a/frontend/src/js/misc.js
+++ b/frontend/src/js/misc.js
@@ -814,3 +814,67 @@ export const trailingComposeChars = /[\u02B0-\u02FF`´^¨~]+$|⎄.*$/;
 export function convertRemToPixels(rem) {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 }
+
+export function swapElements(
+  el1,
+  el2,
+  totalDuration,
+  callback = function () {
+    return;
+  },
+  middleCallback = function () {
+    return;
+  }
+) {
+  if (
+    (el1.hasClass("hidden") && !el2.hasClass("hidden")) ||
+    (!el1.hasClass("hidden") && el2.hasClass("hidden"))
+  ) {
+    //one of them is hidden and the other is visible
+    if (el1.hasClass("hidden")) {
+      callback();
+      return false;
+    }
+    $(el1)
+      .removeClass("hidden")
+      .css("opacity", 1)
+      .animate(
+        {
+          opacity: 0,
+        },
+        totalDuration / 2,
+        () => {
+          middleCallback();
+          $(el1).addClass("hidden");
+          $(el2)
+            .removeClass("hidden")
+            .css("opacity", 0)
+            .animate(
+              {
+                opacity: 1,
+              },
+              totalDuration / 2,
+              () => {
+                callback();
+              }
+            );
+        }
+      );
+  } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) {
+    //both are hidden, only fade in the second
+    $(el2)
+      .removeClass("hidden")
+      .css("opacity", 0)
+      .animate(
+        {
+          opacity: 1,
+        },
+        totalDuration,
+        () => {
+          callback();
+        }
+      );
+  } else {
+    callback();
+  }
+}
diff --git a/frontend/src/js/pages/account.js b/frontend/src/js/pages/account.js
index 1ad49d108..c3e9ea09f 100644
--- a/frontend/src/js/pages/account.js
+++ b/frontend/src/js/pages/account.js
@@ -1048,7 +1048,7 @@ export function update() {
       SignOutButton.show();
     }, 125);
     Focus.set(false);
-    UI.swapElements(
+    Misc.swapElements(
       $(".pageAccount .preloader"),
       $(".pageAccount .content"),
       250
diff --git a/frontend/src/js/pages/loading.js b/frontend/src/js/pages/loading.js
index ace0fea86..49abc2bbd 100644
--- a/frontend/src/js/pages/loading.js
+++ b/frontend/src/js/pages/loading.js
@@ -1,4 +1,4 @@
-import * as UI from "../ui";
+import * as Misc from "./../misc";
 
 export function updateBar(percentage, fast) {
   const speed = fast ? 100 : 1000;
@@ -18,7 +18,7 @@ export function updateText(text) {
 
 export function showBar() {
   return new Promise((resolve, _reject) => {
-    UI.swapElements(
+    Misc.swapElements(
       $(".pageLoading .icon"),
       $(".pageLoading .barWrapper"),
       125,
@@ -26,7 +26,7 @@ export function showBar() {
         resolve();
       }
     );
-    UI.swapElements(
+    Misc.swapElements(
       $(".pageAccount .icon"),
       $(".pageAccount .barWrapper"),
       125,
diff --git a/frontend/src/js/settings/theme-picker.js b/frontend/src/js/settings/theme-picker.js
index 7b10dd479..1ba9c45bb 100644
--- a/frontend/src/js/settings/theme-picker.js
+++ b/frontend/src/js/settings/theme-picker.js
@@ -176,7 +176,7 @@ export function updateActiveTab() {
       "active"
     );
 
-    // UI.swapElements(
+    // Misc.swapElements(
     //   $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
     //   $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
     //   250
@@ -186,7 +186,7 @@ export function updateActiveTab() {
       "active"
     );
 
-    // UI.swapElements(
+    // Misc.swapElements(
     //   $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
     //   $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
     //   250
@@ -203,7 +203,7 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
     UpdateConfig.setCustomTheme(false);
     // ThemeController.set(Config.theme);
     // applyCustomThemeColors();
-    // UI.swapElements(
+    // Misc.swapElements(
     //   $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
     //   $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
     //   250
@@ -212,7 +212,7 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
     UpdateConfig.setCustomTheme(true);
     // ThemeController.set("custom");
     // applyCustomThemeColors();
-    // UI.swapElements(
+    // Misc.swapElements(
     //   $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
     //   $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
     //   250
diff --git a/frontend/src/js/test/result.js b/frontend/src/js/test/result.js
index 6f7e638e2..cb5c19fbb 100644
--- a/frontend/src/js/test/result.js
+++ b/frontend/src/js/test/result.js
@@ -4,7 +4,6 @@ import * as Misc from "../misc";
 import * as TestStats from "./test-stats";
 import * as Keymap from "../elements/keymap";
 import * as ChartController from "../controllers/chart-controller";
-import * as UI from "../ui";
 import * as ThemeColors from "../elements/theme-colors";
 import * as DB from "../db";
 import * as TodayTracker from "./today-tracker";
@@ -667,7 +666,7 @@ export function update(
       .stop()
       .animate({ scrollTop: 0 }, 250);
 
-  UI.swapElements(
+  Misc.swapElements(
     $("#typingTest"),
     $("#result"),
     250,
diff --git a/frontend/src/js/test/test-config.js b/frontend/src/js/test/test-config.js
index 437621c11..edd87c4d6 100644
--- a/frontend/src/js/test/test-config.js
+++ b/frontend/src/js/test/test-config.js
@@ -5,7 +5,7 @@ import * as ManualRestart from "./manual-restart-tracker";
 import * as TestLogic from "./test-logic";
 import * as QuoteSearchPopup from "../popups/quote-search-popup";
 import * as CustomTextPopup from "../popups/custom-text-popup";
-import * as UI from "../ui";
+import * as Misc from "./../misc";
 
 // export function show() {
 //   $("#top .config").removeClass("hidden").css("opacity", 1);
@@ -155,7 +155,7 @@ export function update(previous, current) {
     return;
   }
 
-  UI.swapElements(
+  Misc.swapElements(
     $("#top .config ." + submenu[previous]),
     $("#top .config ." + submenu[current]),
     animTime
diff --git a/frontend/src/js/ui.js b/frontend/src/js/ui.js
index 45449f654..8691ec168 100644
--- a/frontend/src/js/ui.js
+++ b/frontend/src/js/ui.js
@@ -15,6 +15,7 @@ import * as Account from "./pages/account";
 import * as Leaderboards from "./elements/leaderboards";
 import * as Funbox from "./test/funbox";
 import * as About from "./pages/about";
+import * as Misc from "./misc";
 
 export let pageTransition = true;
 let activePage = "pageLoading";
@@ -53,70 +54,6 @@ export function updateKeytips() {
   }
 }
 
-export function swapElements(
-  el1,
-  el2,
-  totalDuration,
-  callback = function () {
-    return;
-  },
-  middleCallback = function () {
-    return;
-  }
-) {
-  if (
-    (el1.hasClass("hidden") && !el2.hasClass("hidden")) ||
-    (!el1.hasClass("hidden") && el2.hasClass("hidden"))
-  ) {
-    //one of them is hidden and the other is visible
-    if (el1.hasClass("hidden")) {
-      callback();
-      return false;
-    }
-    $(el1)
-      .removeClass("hidden")
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        totalDuration / 2,
-        () => {
-          middleCallback();
-          $(el1).addClass("hidden");
-          $(el2)
-            .removeClass("hidden")
-            .css("opacity", 0)
-            .animate(
-              {
-                opacity: 1,
-              },
-              totalDuration / 2,
-              () => {
-                callback();
-              }
-            );
-        }
-      );
-  } else if (el1.hasClass("hidden") && el2.hasClass("hidden")) {
-    //both are hidden, only fade in the second
-    $(el2)
-      .removeClass("hidden")
-      .css("opacity", 0)
-      .animate(
-        {
-          opacity: 1,
-        },
-        totalDuration,
-        () => {
-          callback();
-        }
-      );
-  } else {
-    callback();
-  }
-}
-
 export function changePage(page, norestart = false) {
   if (pageTransition) {
     console.log(`change page ${page} stopped`);
@@ -157,7 +94,7 @@ export function changePage(page, norestart = false) {
   $("#wordsInput").focusout();
   if (page == "test" || page == "") {
     setPageTransition(true);
-    swapElements(
+    Misc.swapElements(
       activePageElement,
       $(".page.pageTest"),
       250,
@@ -182,7 +119,7 @@ export function changePage(page, norestart = false) {
   } else if (page == "about") {
     setPageTransition(true);
     TestLogic.restart();
-    swapElements(activePageElement, $(".page.pageAbout"), 250, () => {
+    Misc.swapElements(activePageElement, $(".page.pageAbout"), 250, () => {
       setPageTransition(false);
       history.pushState("about", null, "about");
       $(".page.pageAbout").addClass("active");
@@ -195,7 +132,7 @@ export function changePage(page, norestart = false) {
   } else if (page == "settings") {
     setPageTransition(true);
     TestLogic.restart();
-    swapElements(activePageElement, $(".page.pageSettings"), 250, () => {
+    Misc.swapElements(activePageElement, $(".page.pageSettings"), 250, () => {
       setPageTransition(false);
       history.pushState("settings", null, "settings");
       $(".page.pageSettings").addClass("active");
@@ -217,7 +154,7 @@ export function changePage(page, norestart = false) {
     } else {
       setPageTransition(true);
       TestLogic.restart();
-      swapElements(activePageElement, $(".page.pageAccount"), 250, () => {
+      Misc.swapElements(activePageElement, $(".page.pageAccount"), 250, () => {
         setPageTransition(false);
         history.pushState("account", null, "account");
         $(".page.pageAccount").addClass("active");
@@ -233,7 +170,7 @@ export function changePage(page, norestart = false) {
     } else {
       setPageTransition(true);
       TestLogic.restart();
-      swapElements(activePageElement, $(".page.pageLogin"), 250, () => {
+      Misc.swapElements(activePageElement, $(".page.pageLogin"), 250, () => {
         setPageTransition(false);
         history.pushState("login", null, "login");
         $(".page.pageLogin").addClass("active");