diff --git a/public/css/style.scss b/public/css/style.scss
index 21c54d4bf..1409adcb7 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -1740,12 +1740,13 @@ key {
   .tabContent {
     overflow: hidden;
     height: auto;
-    max-height: 0px;
+    // max-height: 0px;
+    // max-height: 100vh;
 
     // transition: max-height .5s ease-in-out;
-    &.reveal {
-      max-height: 100vh;
-    }
+    // &.reveal {
+    //   max-height: 100vh;
+    // }
 
     .text {
       align-self: center;
diff --git a/public/index.html b/public/index.html
index 3f91b4247..0f7fd647e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -996,7 +996,7 @@
             <button tab="custom" class="tab">custom</button>
           </div>
           <div class="tabContainer">
-            <div tabContent="custom" class="tabContent section customTheme">
+            <div tabContent="custom" class="tabContent section customTheme hidden">
               <label class="text">background</label>
               <span class="colorPicker">
                 <label for="--bg-color">#000000</label>
diff --git a/public/js/settings.js b/public/js/settings.js
index 6da64fbaa..2c14e94aa 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -758,13 +758,24 @@ $(".tab").click((e) => {
   if ($target.attr("tab") == "preset") {
     setCustomTheme(false);
     applyCustomThemeColors();
-    $('[tabContent="custom"]').removeClass("reveal");
-    $('[tabContent="preset"]').addClass("reveal");
+    // $('[tabContent="custom"]').removeClass("reveal");
+    // $('[tabContent="preset"]').addClass("reveal");
+    swapElements(
+      $('.pageSettings [tabContent="custom"]'),
+      $('.pageSettings [tabContent="preset"]'),
+      250
+    );
   } else {
     setCustomTheme(true);
     applyCustomThemeColors();
-    $('[tabContent="preset"]').removeClass("reveal");
-    $('[tabContent="custom"]').addClass("reveal");
+    swapElements(
+      $('.pageSettings [tabContent="preset"]'),
+      $('.pageSettings [tabContent="custom"]'),
+      250
+    );
+
+    // $('[tabContent="preset"]').removeClass("reveal");
+    // $('[tabContent="custom"]').addClass("reveal");
   }
 });