diff --git a/scripts/js/settings-dns.js b/scripts/js/settings-dns.js
index 6b23a9ff..1b08f03f 100644
--- a/scripts/js/settings-dns.js
+++ b/scripts/js/settings-dns.js
@@ -94,6 +94,16 @@ function fillDNSupstreams(value, servers) {
   // Initialize textfield
   updateDNSserversTextfield(value.value, customServers);
 
+  // Expand the box if there are custom servers
+  // Not using the AdminLTE API so that the expansion is not animated
+  // Otherwise, we could use `$(customBox).boxWidget("expand")`
+  if (customServers > 0) {
+    const customBox = document.getElementById("custom-servers-box");
+    customBox.classList.remove("collapsed-box");
+    customBox.querySelector(".btn-box-tool > i").classList.replace("fa-plus", "fa-minus");
+    customBox.querySelector(".box-body").style = "";
+  }
+
   // Hide the loading animation
   $("#dns-upstreams-overlay").hide();
 
diff --git a/settings-dns.lp b/settings-dns.lp
index 21a9cad1..66b31666 100644
--- a/settings-dns.lp
+++ b/settings-dns.lp
@@ -36,7 +36,7 @@ mg.include('scripts/lua/settings_header.lp','r')
                         <p>ECS (Extended Client Subnet) defines a mechanism for recursive resolvers to send partial client IP address information to authoritative DNS name servers. Content Delivery Networks (CDNs) and latency-sensitive services use this to give geo-located responses when responding to name lookups coming through public DNS resolvers. <em>Note that ECS may result in reduced privacy.</em></p>
                     </div>
                     <div class="col-sm-12">
-                        <div class="box collapsed-box">
+                        <div class="box collapsed-box" id="custom-servers-box">
                             <div class="box-header with-border pointer" data-widget="collapse">
                                 <h3 class="box-title">Custom DNS servers <span id="custom-servers-title"></span></h3>
                                 <div class="box-tools pull-right">