diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 4a49946..c907c38 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { NavLink, Outlet } from "react-router-dom";
 
 const SUB_NAV = [
@@ -16,7 +17,15 @@ export default function Settings() {
       <div className="row align-items-stretch">
         <div className="col-12 col-md-3 col-lg-2 mb-3 mb-md-0">
           <div className="card h-100">
-            <div className="list-group list-group-flush">
+            {/* Tabler's default list-group-item padding (1.25rem) is sized for
+                standalone list cards, not a nav sidebar — at that padding the
+                first item's text sits ~12px below where the content column's
+                own heading/button row starts, even though the two boxes
+                themselves are top-aligned. Tightening just this list-group's
+                own padding (via its own CSS variable, verified pixel-for-pixel
+                against the real markup) brings the two back to the same
+                visual line instead of only the same box height. */}
+            <div className="list-group list-group-flush" style={{ "--tblr-list-group-item-padding-y": "0.5rem" } as CSSProperties}>
               {SUB_NAV.map((item) => (
                 <NavLink
                   key={item.to}