diff --git a/frontend/src/scripts/controllers/theme-controller.ts b/frontend/src/scripts/controllers/theme-controller.ts
index 5f8b599eb..c605da94e 100644
--- a/frontend/src/scripts/controllers/theme-controller.ts
+++ b/frontend/src/scripts/controllers/theme-controller.ts
@@ -102,18 +102,8 @@ function apply(themeName: string, isCustom: boolean, isPreview = false): void {
   let name = "serika_dark";
   if (!isCustom) {
     name = themeName;
-    Misc.swapElements(
-      $('.pageSettings [tabContent="custom"]'),
-      $('.pageSettings [tabContent="preset"]'),
-      250
-    );
   } else {
     name = "custom";
-    Misc.swapElements(
-      $('.pageSettings [tabContent="preset"]'),
-      $('.pageSettings [tabContent="custom"]'),
-      250
-    );
   }
 
   ThemeColors.reset();
diff --git a/frontend/src/scripts/settings/theme-picker.ts b/frontend/src/scripts/settings/theme-picker.ts
index 523cb8bc7..6dde4c535 100644
--- a/frontend/src/scripts/settings/theme-picker.ts
+++ b/frontend/src/scripts/settings/theme-picker.ts
@@ -252,12 +252,22 @@ export function updateActiveTab(forced = false): void {
       $customTabButton.addClass("active");
       refreshButtons();
     }
+    Misc.swapElements(
+      $('.pageSettings [tabContent="preset"]'),
+      $('.pageSettings [tabContent="custom"]'),
+      250
+    );
   } else {
     $customTabButton.removeClass("active");
     if (!$presetTabButton.hasClass("active") || forced) {
       $presetTabButton.addClass("active");
       refreshButtons();
     }
+    Misc.swapElements(
+      $('.pageSettings [tabContent="custom"]'),
+      $('.pageSettings [tabContent="preset"]'),
+      250
+    );
   }
 }