diff --git a/scripts/js/footer.js b/scripts/js/footer.js
index c3b1382d..d7ec6fc3 100644
--- a/scripts/js/footer.js
+++ b/scripts/js/footer.js
@@ -642,23 +642,24 @@ $("#pihole-disable-custom").on("click", e => {
 });
 
 function initSettingsLevel() {
-  const elem = $("#expert-settings");
+  // Apply expert settings level
+  applyExpertSettings();
+
+  const expertSettingsElement = document.getElementById("expert-settings");
 
   // Skip init if element is not present (e.g. on login page)
-  if (elem.length === 0) {
-    applyExpertSettings();
-    return;
-  }
+  if (!expertSettingsElement) return;
 
   // Restore settings level from local storage (if available) or default to "false"
-  if (localStorage.getItem("expert_settings") === null) {
+  const storedExpertSettings = localStorage.getItem("expert_settings");
+  if (storedExpertSettings === null) {
     localStorage.setItem("expert_settings", "false");
   }
 
-  elem.prop("checked", localStorage.getItem("expert_settings") === "true");
+  expertSettingsElement.checked = storedExpertSettings === "true";
 
   // Init the settings level toggle
-  elem.bootstrapToggle({
+  $(expertSettingsElement).bootstrapToggle({
     on: "Expert",
     off: "Basic",
     size: "small",
@@ -668,26 +669,23 @@ function initSettingsLevel() {
   });
 
   // Add handler for settings level toggle
-  elem.on("change", function () {
-    localStorage.setItem("expert_settings", $(this).prop("checked") ? "true" : "false");
+  $(expertSettingsElement).on("change", event => {
+    localStorage.setItem("expert_settings", event.currentTarget.checked ? "true" : "false");
     applyExpertSettings();
   });
-
-  // Apply settings level
-  applyExpertSettings();
 }
 
+// Apply expert settings level, this will hide/show elements with the class
+// "settings-level-expert" depending on the current settings level
+// If "expert_settings" is not set, we default to !"true"
 function applyExpertSettings() {
-  // Apply settings level, this will hide/show elements with the class
-  // "settings-level-basic" or "settings-level-expert" depending on the
-  // current settings level
-  // If "expert_settings" is not set, we default to !"true" (basic settings)
+  const expertSettingsNodes = document.querySelectorAll(".settings-level-expert");
+  if (expertSettingsNodes.length === 0) return;
+
   if (localStorage.getItem("expert_settings") === "true") {
-    $(".settings-level-basic").show();
-    $(".settings-level-expert").show();
+    for (const element of expertSettingsNodes) element.classList.remove("d-none");
   } else {
-    $(".settings-level-basic").show();
-    $(".settings-level-expert").hide();
+    for (const element of expertSettingsNodes) element.classList.add("d-none");
 
     // If we left with an empty page (no visible boxes) after switching from
     // Expert to Basic settings, redirect to admin/settings/system instead
@@ -696,9 +694,8 @@ function applyExpertSettings() {
     //    settings page as well, even when the button has "only modified"
     //    functionality there), and
     //  - there are no visible boxes (the page is empty)
-    if ($(".settings-selector").length > 0 && $(".box:visible").length === 0) {
-      const webhome = document.body.dataset.webhome;
-      globalThis.location.href = webhome + "settings/system";
+    if (document.querySelector(".settings-selector") && $(".box:visible").length === 0) {
+      globalThis.location.href = `${document.body.dataset.webhome}settings/system`;
     }
   }
 }
diff --git a/settings-api.lp b/settings-api.lp
index eef5b24d..1f67a938 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -14,7 +14,7 @@ PageTitle = "Web Interface - API Settings"
 mg.include('scripts/lua/settings_header.lp','r')
 ?>
 <div class="row">
-    <div class="col-md-6 settings-level-basic">
+    <div class="col-md-6">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="webserver.interface.theme webserver.interface.boxed">Theme settings</h3>
@@ -166,7 +166,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
diff --git a/settings-dhcp.lp b/settings-dhcp.lp
index 6a9d29b3..470e24ea 100644
--- a/settings-dhcp.lp
+++ b/settings-dhcp.lp
@@ -15,7 +15,7 @@ mg.include('scripts/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <!-- DHCP Settings Box -->
-    <div class="col-md-6 settings-level-basic">
+    <div class="col-md-6">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="dhcp.active dhcp.start dhcp.end dhcp.router dhcp.ipv6">DHCP Settings</h3>
@@ -221,7 +221,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
diff --git a/settings-dns.lp b/settings-dns.lp
index 519f4a7f..ad3cc7f5 100644
--- a/settings-dns.lp
+++ b/settings-dns.lp
@@ -234,7 +234,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
diff --git a/settings-privacy.lp b/settings-privacy.lp
index 4f2827a0..d59d6d17 100644
--- a/settings-privacy.lp
+++ b/settings-privacy.lp
@@ -14,7 +14,7 @@ PageTitle = "Privacy Settings"
 mg.include('scripts/lua/settings_header.lp','r')
 ?>
 <div class="row">
-    <div class="col-md-6 settings-level-basic">
+    <div class="col-md-6">
         <div class="row">
             <div class="col-md-12">
                 <div class="box box-warning">
@@ -99,7 +99,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 4ceebe96..1da12ba4 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1251,14 +1251,6 @@ table.dataTable tbody > tr > .selected {
   display: none;
 }
 
-.settings-level-basic {
-  display: none;
-}
-
-.settings-level-expert {
-  display: none;
-}
-
 .main-footer {
   padding-bottom: 0px;
 }
@@ -1497,6 +1489,10 @@ table.dataTable tbody > tr > .selected {
   padding-top: 1rem !important;
 }
 
+.d-none {
+  display: none !important;
+}
+
 .password_background {
   background-image: repeating-linear-gradient(
     45deg,