diff --git a/src/app/features/project-editor/components/project-editor-nav.component.html b/src/app/features/project-editor/components/project-editor-nav.component.html
index c25011e..5cc877b 100644
--- a/src/app/features/project-editor/components/project-editor-nav.component.html
+++ b/src/app/features/project-editor/components/project-editor-nav.component.html
@@ -3,6 +3,7 @@
     <a
       [routerLink]="['/edit', section.id] | langRoute"
       routerLinkActive="active"
+      [ariaCurrentWhenActive]="'page'"
       class="editor-nav-link"
     >{{ section.label | translate }}</a>
   }
diff --git a/src/app/features/project-editor/components/project-editor-nav.component.scss b/src/app/features/project-editor/components/project-editor-nav.component.scss
index 7162534..0b00703 100644
--- a/src/app/features/project-editor/components/project-editor-nav.component.scss
+++ b/src/app/features/project-editor/components/project-editor-nav.component.scss
@@ -1,30 +1,43 @@
 .editor-nav {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: var(--space-sm, 10px);
 }
 
-button,
 .editor-nav-link {
   min-height: 40px;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   border: 1px solid var(--border-color, #d3dad9);
-  background: #fff;
-  color: #1e3c38;
-  padding: 0 14px;
-  font-weight: 700;
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1e3c38);
+  padding: 0 var(--space-md, 14px);
+  font-weight: 600;
   cursor: pointer;
-}
-
-button.active,
-.editor-nav-link.active {
-  border-color: #497671;
-  background: #497671;
-  color: #fff;
-}
-
-.editor-nav-link {
   text-decoration: none;
   display: inline-block;
-  line-height: 40px;
+  line-height: 38px;
+  transition: background-color var(--transition-fast, 120ms ease),
+    border-color var(--transition-fast, 120ms ease),
+    color var(--transition-fast, 120ms ease);
+
+  &:hover {
+    border-color: var(--primary-color, #2f6e5d);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary-color, #2f6e5d);
+    outline-offset: 2px;
+  }
+
+  &.active {
+    border-color: var(--primary-color, #2f6e5d);
+    background: var(--primary-color, #2f6e5d);
+    color: var(--bg-primary, #fff);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-nav-link {
+    transition: none;
+  }
 }