diff --git a/Base/res/ladybird/about-pages/settings.html b/Base/res/ladybird/about-pages/settings.html
index 2ca639d532..b807f30003 100644
--- a/Base/res/ladybird/about-pages/settings.html
+++ b/Base/res/ladybird/about-pages/settings.html
@@ -59,7 +59,8 @@
             .inline-container input[type="number"],
             .inline-container input[type="text"],
             .inline-container input[type="url"],
-            .inline-container select {
+            .inline-container select,
+            .inline-container textarea {
                 width: 50%;
             }
 
@@ -117,6 +118,10 @@
                 border: 1px solid var(--border-color);
             }
 
+            textarea {
+                resize: vertical;
+            }
+
             input[type="number"].success,
             input[type="text"].success,
             input[type="url"].success {
@@ -281,19 +286,6 @@
                 width: 100%;
             }
 
-            .config-row {
-                display: grid;
-                grid-template-columns: minmax(0, 1fr) auto;
-                gap: 20px;
-                align-items: center;
-            }
-
-            .config-row + .config-row {
-                border-top: 1px solid var(--border-color);
-                padding-top: 16px;
-                margin-top: 16px;
-            }
-
             .config-name {
                 font-family: monospace;
                 font-size: 13px;
@@ -307,32 +299,6 @@
                 font-size: 14px;
             }
 
-            .config-control {
-                min-width: 180px;
-            }
-
-            .config-control input[type="text"],
-            .config-control input[type="number"],
-            .config-control textarea {
-                width: 100%;
-            }
-
-            .config-control textarea {
-                min-width: 280px;
-                resize: vertical;
-            }
-
-            @media (max-width: 600px) {
-                .config-row {
-                    grid-template-columns: minmax(0, 1fr);
-                    align-items: stretch;
-                }
-
-                .config-control {
-                    min-width: 0;
-                }
-            }
-
             .tab-bar {
                 display: flex;
                 gap: 4px;
@@ -598,7 +564,7 @@
                     <div class="card-group">
                         <input id="config-filter" type="search" placeholder="Filter configuration keys" />
                     </div>
-                    <div id="config-list"></div>
+                    <div class="card-group" id="config-list"></div>
                 </div>
             </div>
         </div>
diff --git a/Base/res/ladybird/about-pages/settings/advanced.js b/Base/res/ladybird/about-pages/settings/advanced.js
index 8c15bbefa1..45f036e902 100644
--- a/Base/res/ladybird/about-pages/settings/advanced.js
+++ b/Base/res/ladybird/about-pages/settings/advanced.js
@@ -9,23 +9,22 @@ function sendConfigVariableValue(variable, value) {
 }
 
 function createControl(variable) {
-    const control = document.createElement("div");
-    control.classList.add("config-control");
+    const type = variable.type === "array" && variable.elementType === "string" ? "textarea" : "input";
+    const input = document.createElement(type);
+    input.id = variable.name;
 
     if (variable.type === "boolean") {
-        const input = document.createElement("input");
         input.type = "checkbox";
-        input.toggleAttribute("switch", true);
+        input.switch = true;
         input.checked = !!variable.value;
         input.addEventListener("change", () => {
             sendConfigVariableValue(variable, input.checked);
         });
-        control.append(input);
-        return control;
+
+        return input;
     }
 
-    if (variable.type === "array" && variable.elementType === "string") {
-        const input = document.createElement("textarea");
+    if (type === "textarea") {
         input.rows = 3;
         input.value = Array.isArray(variable.value) ? variable.value.join("\n") : "";
         input.addEventListener("change", () => {
@@ -36,11 +35,10 @@ function createControl(variable) {
 
             sendConfigVariableValue(variable, value);
         });
-        control.append(input);
-        return control;
+
+        return input;
     }
 
-    const input = document.createElement("input");
     input.value = variable.value ?? "";
 
     if (variable.type === "number") {
@@ -59,31 +57,34 @@ function createControl(variable) {
         });
     }
 
-    control.append(input);
-    return control;
+    return input;
 }
 
 function createRow(variable) {
     const row = document.createElement("div");
+    row.classList.add("card-group");
+    row.classList.add("card-separator");
     row.classList.add("config-row");
+    row.classList.add("inline-container");
     row.dataset.filterText = `${variable.name} ${variable.title} ${variable.description}`.toLowerCase();
 
-    const details = document.createElement("div");
-
-    const name = document.createElement("div");
+    const name = document.createElement("p");
     name.classList.add("config-name");
     name.textContent = variable.name;
 
-    const title = document.createElement("div");
+    const title = document.createElement("p");
     title.classList.add("config-title");
     title.textContent = variable.title;
 
     const description = document.createElement("p");
-    description.classList.add("config-description", "description");
+    description.classList.add("description");
     description.textContent = variable.description;
 
-    details.append(name, title, description);
-    row.append(details, createControl(variable));
+    const label = document.createElement("label");
+    label.htmlFor = variable.name;
+    label.append(name, title, description);
+
+    row.append(label, createControl(variable));
     return row;
 }