diff --git a/frontend/src/pages/docs.astro b/frontend/src/pages/docs.astro
index c64dfc0..51b99b3 100644
--- a/frontend/src/pages/docs.astro
+++ b/frontend/src/pages/docs.astro
@@ -9,10 +9,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       <p class="lead">
         Technical guides for deploying, configuring, and extending Likwid.
       </p>
+      <nav class="page-nav" aria-label="On this page">
+        <a class="ui-pill ui-pill-core" href="#getting-started">Getting started</a>
+        <a class="ui-pill ui-pill-core" href="#administration">Administration</a>
+        <a class="ui-pill ui-pill-core" href="#governance">Governance</a>
+        <a class="ui-pill ui-pill-core" href="#plugins">Plugins</a>
+        <a class="ui-pill ui-pill-core" href="#api">API</a>
+        <a class="ui-pill ui-pill-core" href="#security">Security</a>
+        <a class="ui-pill ui-pill-core" href="#contribute">Contribute</a>
+      </nav>
     </header>
 
     <section class="docs-sections">
-      <div class="doc-category">
+      <div class="doc-category" id="getting-started">
         <div class="category-header">
           <div class="category-icon">🚀</div>
           <h2>Getting Started</h2>
@@ -37,7 +46,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         </div>
       </div>
 
-      <div class="doc-category">
+      <div class="doc-category" id="administration">
         <div class="category-header">
           <div class="category-icon">⚙️</div>
           <h2>Administration</h2>
@@ -62,7 +71,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         </div>
       </div>
 
-      <div class="doc-category">
+      <div class="doc-category" id="governance">
         <div class="category-header">
           <div class="category-icon">🗳️</div>
           <h2>Governance Features</h2>
@@ -87,7 +96,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         </div>
       </div>
 
-      <div class="doc-category">
+      <div class="doc-category" id="plugins">
         <div class="category-header">
           <div class="category-icon">🔌</div>
           <h2>Plugin Development</h2>
@@ -112,7 +121,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         </div>
       </div>
 
-      <div class="doc-category">
+      <div class="doc-category" id="api">
         <div class="category-header">
           <div class="category-icon">📡</div>
           <h2>API Reference</h2>
@@ -137,7 +146,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         </div>
       </div>
 
-      <div class="doc-category">
+      <div class="doc-category" id="security">
         <div class="category-header">
           <div class="category-icon">🔒</div>
           <h2>Security</h2>
@@ -174,7 +183,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
     </section>
 
-    <section class="docs-contribute">
+    <section class="docs-contribute" id="contribute">
       <h2>Contributing to Documentation</h2>
       <p>
         Found an error? Want to add a section? Documentation contributions are welcome.
@@ -204,6 +213,18 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     border-bottom: 1px solid var(--color-border);
   }
 
+  .page-nav {
+    margin-top: 2rem;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  [id] {
+    scroll-margin-top: 6rem;
+  }
+
   .page-header h1 {
     font-size: 2.5rem;
     font-weight: 700;