diff --git a/_doc/.gitignore b/_doc/.gitignore
new file mode 100644
index 0000000..b844b14
--- /dev/null
+++ b/_doc/.gitignore
@@ -0,0 +1 @@
+Gemfile.lock
diff --git a/_doc/_layouts/default.html b/_doc/_layouts/default.html
index ec3bc0e..c4fbb78 100644
--- a/_doc/_layouts/default.html
+++ b/_doc/_layouts/default.html
@@ -40,6 +40,15 @@
       --table-head:  #f6f8fa;
       --blockquote:  #57606a;
       --blockquote-border: #d0d7de;
+      /* ── Sidebar ── */
+      --sidebar-bg:            #f6f8fa;
+      --sidebar-link:          #1f2328;
+      --sidebar-link-hover-bg: #eaeef2;
+      --sidebar-active-bg:     #dbeafe;
+      --sidebar-active:        #0550ae;
+      /* ── TOC ── */
+      --toc-link:   #57606a;
+      --toc-active: #0969da;
     }
 
     /* ── Auto dark mode: follows OS preference (no explicit user choice) ── */
@@ -66,6 +75,13 @@
         --table-head:  #161b22;
         --blockquote:  #8b949e;
         --blockquote-border: #3d444d;
+        --sidebar-bg:            #161b22;
+        --sidebar-link:          #c9d1d9;
+        --sidebar-link-hover-bg: #21262d;
+        --sidebar-active-bg:     #1c2d3f;
+        --sidebar-active:        #58a6ff;
+        --toc-link:   #8b949e;
+        --toc-active: #58a6ff;
       }
     }
 
@@ -92,6 +108,13 @@
       --table-head:  #161b22;
       --blockquote:  #8b949e;
       --blockquote-border: #3d444d;
+      --sidebar-bg:            #161b22;
+      --sidebar-link:          #c9d1d9;
+      --sidebar-link-hover-bg: #21262d;
+      --sidebar-active-bg:     #1c2d3f;
+      --sidebar-active:        #58a6ff;
+      --toc-link:   #8b949e;
+      --toc-active: #58a6ff;
     }
 
     /* ── Explicit light override ── */
@@ -112,7 +135,7 @@
       transition: background 0.2s, color 0.2s;
     }
 
-    /* ── Header / nav ── */
+    /* ── Header ── */
     header {
       background: var(--header-bg);
       padding: 0 1.5rem;
@@ -122,10 +145,16 @@
       height: 3.25rem;
       position: sticky;
       top: 0;
-      z-index: 100;
+      z-index: 200;
       border-bottom: 1px solid rgba(255,255,255,.08);
     }
 
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
     .site-title {
       color: var(--header-text);
       text-decoration: none;
@@ -135,18 +164,19 @@
     }
     .site-title:hover { color: #fff; }
 
-    nav {
-      display: flex;
-      align-items: center;
-      gap: 1.25rem;
-    }
-
-    nav a {
+    /* ── Hamburger button (shown on mobile) ── */
+    #sidebar-toggle {
+      background: none;
+      border: none;
       color: var(--nav-link);
-      text-decoration: none;
-      font-size: 0.875rem;
+      cursor: pointer;
+      padding: 0.25rem;
+      display: none;
+      line-height: 1;
+      border-radius: 4px;
     }
-    nav a:hover { color: var(--nav-hover); }
+    #sidebar-toggle:hover { color: var(--nav-hover); }
+    #sidebar-toggle svg { display: block; }
 
     /* ── Theme toggle button ── */
     #theme-toggle {
@@ -170,11 +200,131 @@
     .icon-light { display: none; }
     .icon-dark  { display: none; }
 
-    /* ── Main content ── */
-    main {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 2rem 1.5rem 4rem;
+    /* ── Page body: three-column grid ── */
+    .page-body {
+      display: grid;
+      grid-template-columns: 260px 1fr 220px;
+      align-items: start;
+    }
+
+    /* ── Left sidebar ── */
+    .sidebar {
+      background: var(--sidebar-bg);
+      border-right: 1px solid var(--border);
+      position: sticky;
+      top: 3.25rem;
+      height: calc(100vh - 3.25rem);
+      overflow-y: auto;
+      padding: 1.25rem 0 2rem;
+      transition: transform 0.25s ease;
+    }
+
+    .sidebar-section-title {
+      font-size: 0.6875rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      color: var(--text-muted);
+      padding: 0 1rem 0.5rem;
+    }
+
+    .sidebar-nav ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .sidebar-nav li a {
+      display: block;
+      padding: 0.375rem 0.75rem 0.375rem 1rem;
+      color: var(--sidebar-link);
+      text-decoration: none;
+      font-size: 0.875rem;
+      border-radius: 4px;
+      margin: 0.0625rem 0.5rem;
+      transition: background 0.12s, color 0.12s;
+    }
+
+    .sidebar-nav li a:hover {
+      background: var(--sidebar-link-hover-bg);
+      color: var(--text);
+      text-decoration: none;
+    }
+
+    .sidebar-nav li a.active {
+      background: var(--sidebar-active-bg);
+      color: var(--sidebar-active);
+      font-weight: 600;
+    }
+
+    /* ── Sidebar overlay (mobile backdrop) ── */
+    .sidebar-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.45);
+      z-index: 150;
+    }
+    .sidebar-overlay.open { display: block; }
+
+    /* ── Main content area ── */
+    .content-area {
+      min-width: 0;
+      padding: 2rem 2rem 4rem;
+    }
+
+    /* ── TOC sidebar (right) ── */
+    .toc-sidebar {
+      position: sticky;
+      top: calc(3.25rem + 1.5rem);
+      max-height: calc(100vh - 3.25rem - 3rem);
+      overflow-y: auto;
+      padding: 0 0.75rem 1rem;
+      border-left: 1px solid var(--border);
+    }
+
+    .toc-sidebar-title {
+      font-size: 0.6875rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      color: var(--text-muted);
+      margin: 1.25rem 0 0.5rem;
+    }
+
+    #toc-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    #toc-list li { margin: 0; }
+
+    #toc-list a {
+      display: block;
+      padding: 0.2rem 0 0.2rem 0.625rem;
+      border-left: 2px solid transparent;
+      color: var(--toc-link);
+      text-decoration: none;
+      font-size: 0.8125rem;
+      line-height: 1.45;
+      transition: color 0.12s, border-color 0.12s;
+    }
+
+    #toc-list a:hover {
+      color: var(--link);
+      text-decoration: none;
+    }
+
+    #toc-list a.active {
+      color: var(--toc-active);
+      border-left-color: var(--toc-active);
+      font-weight: 500;
+    }
+
+    #toc-list .toc-h3 {
+      padding-left: 1.25rem;
+      font-size: 0.775rem;
     }
 
     /* ── Typography ── */
@@ -273,22 +423,49 @@
     footer a { color: var(--text-muted); }
     footer a:hover { color: var(--link); }
 
-    /* ── Responsive ── */
-    @media (max-width: 600px) {
+    /* ── Responsive: hide TOC on medium screens ── */
+    @media (max-width: 1100px) {
+      .page-body { grid-template-columns: 260px 1fr; }
+      .toc-sidebar { display: none; }
+    }
+
+    /* ── Responsive: collapse sidebar on small screens ── */
+    @media (max-width: 768px) {
+      .page-body { grid-template-columns: 1fr; }
+
+      .sidebar {
+        position: fixed;
+        top: 3.25rem;
+        left: 0;
+        width: 260px;
+        height: calc(100vh - 3.25rem);
+        z-index: 160;
+        transform: translateX(-100%);
+      }
+      .sidebar.open { transform: translateX(0); }
+
+      #sidebar-toggle { display: flex; }
+
       header { padding: 0 1rem; }
-      main   { padding: 1.25rem 1rem 3rem; }
-      nav a  { display: none; }
+      .content-area { padding: 1.25rem 1rem 3rem; }
     }
   </style>
 </head>
 <body>
   <header>
-    <a class="site-title" href="{{ '/' | relative_url }}">
-      {{ site.github.repository_name | default: site.repository | default: 'apps' }}
-    </a>
+    <div class="header-left">
+      <button id="sidebar-toggle" aria-label="Toggle navigation" aria-expanded="false">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <rect x="2" y="4" width="16" height="2" rx="1"/>
+          <rect x="2" y="9" width="16" height="2" rx="1"/>
+          <rect x="2" y="14" width="16" height="2" rx="1"/>
+        </svg>
+      </button>
+      <a class="site-title" href="{{ '/' | relative_url }}">
+        {{ site.github.repository_name | default: site.repository | default: 'apps' }}
+      </a>
+    </div>
     <nav>
-      <a href="{{ '/index' | relative_url }}">Home</a>
-      <a href="{{ '/downloads' | relative_url }}">Downloads</a>
       <button id="theme-toggle" aria-label="Toggle color theme" title="Toggle light / dark mode">
         <span class="icon-auto" aria-hidden="true">&#9680; Auto</span>
         <span class="icon-light" aria-hidden="true">&#9728;&#xFE0F; Light</span>
@@ -297,9 +474,39 @@
     </nav>
   </header>
 
-  <main>
-    {{ content }}
-  </main>
+  <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
+  <div class="page-body">
+
+    <aside class="sidebar" id="sidebar" aria-label="Site navigation">
+      <div class="sidebar-section-title">Navigation</div>
+      <nav class="sidebar-nav">
+        <ul>
+          {% assign nav_pages = site.pages | where_exp: 'p', 'p.name contains ".md"' | sort: 'nav_order' %}
+          {% for p in nav_pages %}
+            <li>
+              {% comment %}Pages should define a title in front matter for best display{% endcomment %}
+              <a href="{{ p.url | relative_url }}"{% if p.url == page.url %} class="active"{% endif %}>
+                {{ p.title | default: p.name | remove: '.md' | replace: '-', ' ' | capitalize }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </nav>
+    </aside>
+
+    <div class="content-area">
+      <article id="main-content">
+        {{ content }}
+      </article>
+    </div>
+
+    <aside class="toc-sidebar" id="toc-sidebar" aria-label="Table of contents">
+      <div class="toc-sidebar-title">On this page</div>
+      <ul id="toc-list"></ul>
+    </aside>
+
+  </div>
 
   <footer>
     <a href="https://github.com/{{ site.github.repository_nwo | default: site.repository | default: 'klibio/apps' }}">
@@ -312,11 +519,10 @@
   (function () {
     'use strict';
 
+    /* ── Theme toggle ── */
     var STORAGE_KEY = 'theme-preference';
     var html = document.documentElement;
     var btn  = document.getElementById('theme-toggle');
-
-    /* Cycle order: auto → light → dark → auto … */
     var CYCLE = ['auto', 'light', 'dark'];
 
     function currentPref() {
@@ -341,7 +547,6 @@
       btn.querySelector('.icon-dark').style.display  = pref === 'dark'  ? 'inline' : 'none';
     }
 
-    /* Initialise button label (theme already applied by inline head script) */
     updateButton(currentPref());
 
     btn.addEventListener('click', function () {
@@ -349,10 +554,84 @@
       applyPref(next);
     });
 
-    /* Re-evaluate when OS theme changes and user is in 'auto' mode */
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
       if (currentPref() === 'auto') { updateButton('auto'); }
     });
+
+    /* ── Sidebar toggle (mobile) ── */
+    var sidebarToggle  = document.getElementById('sidebar-toggle');
+    var sidebar        = document.getElementById('sidebar');
+    var sidebarOverlay = document.getElementById('sidebar-overlay');
+
+    function openSidebar() {
+      sidebar.classList.add('open');
+      sidebarOverlay.classList.add('open');
+      sidebarToggle.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeSidebar() {
+      sidebar.classList.remove('open');
+      sidebarOverlay.classList.remove('open');
+      sidebarToggle.setAttribute('aria-expanded', 'false');
+    }
+
+    sidebarToggle.addEventListener('click', function () {
+      sidebar.classList.contains('open') ? closeSidebar() : openSidebar();
+    });
+
+    sidebarOverlay.addEventListener('click', closeSidebar);
+
+    /* ── TOC generation ── */
+    var tocList    = document.getElementById('toc-list');
+    var tocSidebar = document.getElementById('toc-sidebar');
+    var article    = document.getElementById('main-content');
+    var headings   = article ? Array.from(article.querySelectorAll('h2, h3')) : [];
+
+    if (headings.length > 0) {
+      headings.forEach(function (h) {
+        /* Ensure heading has an id (kramdown adds them, but guard anyway) */
+        if (!h.id) {
+          h.id = h.textContent.trim()
+            .toLowerCase()
+            .replace(/[^\w\s-]/g, '')
+            .replace(/\s+/g, '-');
+        }
+        var li = document.createElement('li');
+        var a  = document.createElement('a');
+        a.href        = '#' + h.id;
+        a.textContent = h.textContent;
+        if (h.tagName === 'H3') { a.classList.add('toc-h3'); }
+        li.appendChild(a);
+        tocList.appendChild(li);
+      });
+    } else {
+      tocSidebar.style.display = 'none';
+    }
+
+    /* ── TOC active-link on scroll (IntersectionObserver) ── */
+    if (headings.length > 0) {
+      var tocLinks = Array.from(tocList.querySelectorAll('a'));
+      var activeHeading = null;
+
+      var observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            activeHeading = entry.target;
+          }
+        });
+        if (activeHeading) {
+          tocLinks.forEach(function (a) { a.classList.remove('active'); });
+          var activeLink = tocList.querySelector('a[href="#' + activeHeading.id + '"]');
+          if (activeLink) { activeLink.classList.add('active'); }
+        }
+      }, {
+        rootMargin: '-52px 0px -70% 0px', /* 52px = header height (3.25rem × 16px) */
+        threshold: 0
+      });
+
+      headings.forEach(function (h) { observer.observe(h); });
+    }
+
   }());
   </script>
 </body>
diff --git a/_doc/downloads.md b/_doc/downloads.md
index ae95a31..1cf5933 100644
--- a/_doc/downloads.md
+++ b/_doc/downloads.md
@@ -1,5 +1,6 @@
 ---
 title: Downloads
+nav_order: 2
 ---
 # Latest Build Artifacts
 
diff --git a/_doc/index.md b/_doc/index.md
index fbd644b..7f785d7 100644
--- a/_doc/index.md
+++ b/_doc/index.md
@@ -1,3 +1,7 @@
+---
+title: Home
+nav_order: 1
+---
 # io.klib.apps
 
 OSGi application bundles for [klib.io](https://klib.io)