diff --git a/apps/ui/src/styles.css b/apps/ui/src/styles.css
index f2063e9..6a81cee 100644
--- a/apps/ui/src/styles.css
+++ b/apps/ui/src/styles.css
@@ -401,17 +401,27 @@ a:hover { color: var(--brand-strong); }
 .nav {
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
+  gap: 0.15rem;
 }
-.nav-section {
+.nav > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+.nav > div + div {
   margin-top: var(--space-4);
-  margin-bottom: var(--space-1);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--line);
+}
+.nav-section {
+  margin: 0 0 var(--space-2);
   padding: 0 var(--space-3);
-  font-size: 0.68rem;
+  font-size: 0.7rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--muted);
+  color: var(--ink);
+  opacity: 0.72;
 }
 .nav-section:first-child { margin-top: 0; }
 .nav a {
@@ -457,7 +467,7 @@ a:hover { color: var(--brand-strong); }
 .page-sections-layout,
 .settings-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 10.5rem;
+  grid-template-columns: minmax(0, 1fr) 11.5rem;
   gap: var(--space-6);
   align-items: start;
 }
@@ -475,19 +485,22 @@ a:hover { color: var(--brand-strong); }
   position: sticky;
   top: var(--space-6);
   align-self: start;
-  padding: var(--space-3) 0 var(--space-3) var(--space-3);
+  padding: var(--space-3) 0 var(--space-3) var(--space-4);
   border-left: 1px solid var(--line);
   /* Avoid backdrop-filter here — sticky + blur is expensive while scrolling (esp. WebView). */
   background: var(--bg);
 }
 .page-section-nav-label {
-  font-size: 0.72rem;
+  font-size: 0.68rem;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: var(--ink-soft);
-  margin-bottom: var(--space-2);
+  color: var(--ink);
+  opacity: 0.72;
+  margin-bottom: var(--space-3);
   padding-left: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--line);
 }
 .page-section-nav-list {
   list-style: none;
@@ -495,7 +508,7 @@ a:hover { color: var(--brand-strong); }
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.35rem;
 }
 .page-section-nav-link {
   display: block;
@@ -503,11 +516,12 @@ a:hover { color: var(--brand-strong); }
   text-align: left;
   border: none;
   background: transparent;
-  color: var(--ink-soft);
+  color: var(--muted);
   font: inherit;
-  font-size: 0.86rem;
-  font-weight: 600;
-  padding: 0.4rem 0.55rem;
+  font-size: 0.88rem;
+  font-weight: 500;
+  line-height: 1.35;
+  padding: 0.5rem 0.65rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
   border-left: 2px solid transparent;
@@ -521,6 +535,7 @@ a:hover { color: var(--brand-strong); }
   color: var(--brand-strong);
   background: var(--brand-tint);
   border-left-color: var(--brand);
+  font-weight: 700;
 }
 
 @media (max-width: 900px) {
@@ -556,6 +571,7 @@ a:hover { color: var(--brand-strong); }
     border-bottom: 2px solid transparent;
     margin-left: 0;
     padding: 0.45rem 0.7rem;
+    font-weight: 600;
   }
   .page-section-nav-link.on {
     border-left-color: transparent;