diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 5722cbd..71b08f0 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -165,14 +165,15 @@ const year = new Date().getFullYear();
     display: inline-block;
     width: 1px;
     height: 18px;
-    background: var(--ghost-border-color);
-    margin: 0 var(--space-2);
+    background: rgba(0, 0, 0, 0.15);
+    margin: 0 18px;
     transform: scaleX(0.5);
     transform-origin: center;
   }
   .nav-logout-form { display: inline-flex; }
 
   .nav-link {
+    position: relative;
     font-family: var(--font-sans);
     font-size: var(--text-label-md);
     font-weight: 500;
@@ -183,17 +184,26 @@ const year = new Date().getFullYear();
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
     border-bottom: none;
-    transition: color var(--duration-fast) var(--ease-standard),
-                background var(--duration-fast) var(--ease-standard);
+    transition: color var(--duration-fast) var(--ease-standard);
   }
   .nav-link:hover {
     color: var(--on-surface);
-    background: var(--surface-container-low);
     border-bottom: none;
   }
   .nav-link.active {
     color: var(--on-surface);
-    background: var(--surface-container);
+  }
+  /* 4px terracotta dot under the active link, 22px below its baseline. */
+  .nav-link.active::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: -22px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--pigment-terracotta);
+    transform: translateX(-50%);
   }
 
   /* ── User zone ──────────────────────────────────────────────────── */