diff --git a/new-docs/pyret-docs.rkt b/new-docs/pyret-docs.rkt
index 92251108c..31df1dfff 100644
--- a/new-docs/pyret-docs.rkt
+++ b/new-docs/pyret-docs.rkt
@@ -365,6 +365,21 @@
 (define (append-gen-docs . desc)
   "")
 
+(define (section-number-css here-html)
+  (define p (page-section-prefix here-html))
+  (if (not p)
+      ""
+      (let ([pd (string-append p ".")])
+        (string-append
+          ".container { counter-reset: h2c 0; }\n"
+          ".container h1::before { content: \"" p " \"; }\n"
+          ".container h2 { counter-increment: h2c; counter-reset: h3c 0; }\n"
+          ".container h2::before { content: \"" pd "\" counter(h2c) \" \"; }\n"
+          ".container h3 { counter-increment: h3c; counter-reset: h4c 0; }\n"
+          ".container h3::before { content: \"" pd "\" counter(h2c) \".\" counter(h3c) \" \"; }\n"
+          ".container h4 { counter-increment: h4c; }\n"
+          ".container h4::before { content: \"" pd "\" counter(h2c) \".\" counter(h3c) \".\" counter(h4c) \" \"; }\n"))))
+
 (define (add-paras info)
      ; (printf "### add-paras ~s\n" info)
      ; (printf "### first info = ~s\n" (car info))
diff --git a/new-docs/styles.css b/new-docs/styles.css
index f8200793f..8c41f2f56 100644
--- a/new-docs/styles.css
+++ b/new-docs/styles.css
@@ -1,5 +1,3 @@
-/* CSS used by the Pollenized Pyret docs */
-
 li.indent2 {
   text-indent: 2em;
 }
@@ -17,7 +15,6 @@ ul.toclist {
 }
 
 .pyretexpr {
-  /* color: cornflowerblue; */
 }
 
 .uncolored-code {
@@ -25,10 +22,8 @@ ul.toclist {
 }
 
 .pyret-display {
-  /* border-top: 0.055em solid black; */
   border-top: 1px solid #99b;
   font-style: monospace;
-  /* background-color: #f2f2f2; */
   background-color: hsl(216, 78%, 95%);
 }
 
@@ -37,9 +32,6 @@ ul.toclist {
 }
 
 .function {
-  /* font-family: monospace; */
-  /* background-color: #6bccdf; */
-  /* background-color: #ffeeee; */
 }
 
 .good-ex {
@@ -51,7 +43,6 @@ ul.toclist {
 }
 
 .margin-note {
-  /* background-color: #fbfb88; */
   background-color: hsl(60, 29%, 94%);
   float: right;
   width: 25%;
@@ -150,7 +141,6 @@ ul.glossary {
   list-style-type: none;
 }
 
-
 .repl-example  {
   margin-left: 1.5em;
   background-color: hsl(0,0%,95%);
@@ -195,15 +185,176 @@ ul.glossary {
    display: inline-block;
 }
 
+:root {
+  --primary-50: #317CCF;
+  --bg-grey: #f8f8f8;
+}
+
+.page-body {
+  display: flex;
+}
+
+.sidebar {
+  display: flex;
+  width: 300px;
+  flex-shrink: 0;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  position: sticky;
+  top: 90px;
+  height: calc(100vh - 90px);
+  overflow-y: auto;
+  border-right: 1px solid #ddd;
+  box-sizing: border-box;
+  background-color: var(--bg-grey);
+}
+
+.sidebar-nav {
+  width: 100%;
+}
+
+.sidebar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.sidebar-item.has-children > .sidebar-list {
+  display: none;
+}
+
+.sidebar-item.has-children.open > .sidebar-list {
+  display: block;
+}
+
+.sidebar-item {
+  width: 100%;
+}
+
+.sidebar-item-row {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 16px;
+  border-left: 2px solid #E8E8E8;
+  box-sizing: border-box;
+  width: 100%;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.sidebar-nav > .sidebar-list > .sidebar-item > .sidebar-item-row {
+  border-left: none;
+}
+
+.sidebar-item-row.active {
+  border-left-color: var(--primary-50);
+}
+
+.sidebar-item-row:hover .sidebar-link {
+  color: #888;
+}
+
+.sidebar-section-heading .sidebar-link {
+  font-weight: 500;
+}
+
+.sidebar-list .sidebar-list > .sidebar-item > .sidebar-item-row .sidebar-link {
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.sidebar-list .sidebar-list .sidebar-list > .sidebar-item > .sidebar-item-row .sidebar-link {
+  font-size: 14px;
+  font-family: Roboto, sans-serif;
+  color: #000;
+}
+
+.sidebar-list .sidebar-list {
+  width: auto;
+  margin-right: 16px;
+}
+
+.sidebar-nav > .sidebar-list > .sidebar-item > .sidebar-list {
+  margin-left: 16px;
+}
+
+.sidebar-list .sidebar-list > .sidebar-item > .sidebar-item-row {
+  padding-left: 12px;
+}
+
+.sidebar-list .sidebar-list .sidebar-list > .sidebar-item > .sidebar-item-row {
+  padding-left: 24px;
+}
+
+.sidebar-link {
+  flex: 1;
+  text-decoration: none;
+  color: #040506;
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 150%;
+  user-select: none;
+}
+
+.sidebar-item-row.active .sidebar-link {
+  color: var(--primary-50);
+}
+
+.sidebar-item-row .sidebar-link.clicking,
+.sidebar-item-row:hover .sidebar-link.clicking {
+  color: var(--primary-50);
+}
+
+.sidebar-item-row:has(.sidebar-link.clicking) {
+  border-left-color: var(--primary-50);
+}
+
+.sidebar-chevron {
+  background: none;
+  border: none;
+  padding: 0 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.sidebar-chevron-icon {
+  font-size: 24px;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  line-height: 1;
+  user-select: none;
+  display: inline-block;
+  transform: rotate(90deg);
+  transition: transform 0.15s ease;
+}
+
+.sidebar-item.has-children.open > .sidebar-item-row .sidebar-chevron .sidebar-chevron-icon {
+  transform: rotate(-90deg);
+}
+
+.sidebar-list .sidebar-list > .sidebar-item > .sidebar-item-row .sidebar-chevron .sidebar-chevron-icon {
+  font-size: 15px;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 15;
+}
+
+.sidebar-item-row.active .sidebar-chevron {
+  color: var(--primary-50);
+}
+
 .container {
   width: 100%;
+  min-width: 0;
+  padding: 24px 0 0 24px;
+  box-sizing: border-box;
 }
 
 @media (min-width: 800px) {
-  .container {
-    max-width: 72ch;
-    margin: 0 auto;
-  }
   h1,h2,h3,h4,h5,h6 {
     margin-left: -1em;
   }
@@ -246,7 +397,7 @@ h3 {
   font-size: 20px;
 }
 
-h4 { 
+h4 {
   margin-top: 1em;
   font-size: 20px;
 }
@@ -263,16 +414,75 @@ h4 {
   display: none;
 }
 
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  height: 90px;
+  padding: 24px 60px 24px 0;
+  display: flex;
+  align-items: center;
+}
+
+.topbar-logo {
+  margin-left: 24px;
+  height: 42px;
+  width: auto;
+}
+
+.searchform {
+  display: flex;
+  padding: 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  width: 526px;
+  border-radius: 4px;
+  border: 1px solid #D8D8D8;
+  background: #FFF;
+  margin-left: 70px;
+}
+
+.search-icon {
+  font-size: 24px;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  flex-shrink: 0;
+  color: #666;
+  line-height: 1;
+  user-select: none;
+}
+
 .searchbox {
-  width: 16em;
-  margin-top: 1em;
-  margin-left: 1em;
-  padding: 0px;
-  background-color: #eee;
-  border: 1px solid #ddd;
-  vertical-align: middle;
+  flex: 1;
+  height: 24px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  color: #333;
+  padding: 0;
 }
 
 .searchbox::placeholder {
-  text-align: center;
+  color: #999;
+}
+
+.topbar-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-left: auto;
+}
+
+.topbar-link {
+  text-decoration: none;
+  color: #040506;
+  white-space: nowrap;
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
 }
diff --git a/new-docs/template.html.p b/new-docs/template.html.p
index e39c3847f..40be0c9de 100644
--- a/new-docs/template.html.p
+++ b/new-docs/template.html.p
@@ -3,6 +3,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
   <script src="◊(prefix-dir (point-to-project-root here) (symbol->string './pollenboots/codemirror.js))"></script>
@@ -17,24 +18,90 @@
   <link rel="stylesheet" type="text/css" href="◊(prefix-dir (point-to-project-root here) (symbol->string './pollenboots/codemirror.css))" title="default"/>
   <link rel="stylesheet" type="text/css" href="◊(prefix-dir (point-to-project-root here) (symbol->string './pollenboots/pyret.css))" title="default"/>
   <link rel="stylesheet" type="text/css" href="◊(prefix-dir (point-to-project-root here) (symbol->string './styles.css))" title="default"/>
+  <style>
+◊(let* ([here-str (if (symbol? here) (symbol->string here) here)]
+        [here-html (regexp-replace "\\.poly\\.pm$" (from-project-root here-str) ".html")])
+   (section-number-css here-html))
+  </style>
   <head>
     <title>◊(doc-title doc)</title>
   </head>
   <body>
-    <form class="searchform" id="searchformid"><input class="searchbox" id="searchbox" type="text" tabindex="1" placeholder="...search manuals..." title="Enter a search string to search the manuals" onkeypress="return DoSearchKey(event, this, &quot;9.1&quot;, &quot;&quot;);"/></form>
-    <div class="container">
-    ◊(->html doc)
+    <div class="topbar">
+      <a href="◊(prefix-dir (point-to-project-root here) (symbol->string './index.html))"><img class="topbar-logo" src="◊(prefix-dir (point-to-project-root here) (symbol->string './assets/Pyret.png))" alt="Pyret logo"/></a>
+      <form class="searchform" id="searchformid">
+        <span class="material-symbols-rounded search-icon">search</span>
+        <input class="searchbox" id="searchbox" type="text" tabindex="1" placeholder="Search..." title="Enter a search string to search the manuals" onkeypress="return DoSearchKey(event, this, &quot;9.1&quot;, &quot;&quot;);"/>
+      </form>
+      <nav class="topbar-links">
+        <a class="topbar-link" href="#">Testing and Assertions</a>
+        <a class="topbar-link" href="#">Release Notes</a>
+        <a class="topbar-link" href="#">Discussion List</a>
+      </nav>
+    </div>
     ◊(define top-dir (point-to-project-root here))
-    ◊(define prev-page (prefix-dir top-dir (previous here)))
-    ◊(define next-page (prefix-dir top-dir (next here)))
-    <hr/>
-    <!-- The current page is ◊|here|. -->
-    ◊when/splice[prev-page]{
-    <a class="floatleft" href="◊prev-page">⏴⏴⏴</a>
-    }
-    ◊when/splice[next-page]{
-    <a class="floatright" href="◊next-page">⏵⏵⏵</a>
-    }
+    <div class="page-body">
+      <div class="sidebar">
+        ◊(->html (make-sidebar here top-dir))
+      </div>
+      <div class="container">
+      ◊(->html doc)
+      ◊(define prev-page (prefix-dir top-dir (previous here)))
+      ◊(define next-page (prefix-dir top-dir (next here)))
+      <hr/>
+      ◊when/splice[prev-page]{
+      <a class="floatleft" href="◊prev-page">⏴⏴⏴</a>
+      }
+      ◊when/splice[next-page]{
+      <a class="floatright" href="◊next-page">⏵⏵⏵</a>
+      }
+      </div>
     </div>
+  <script>
+    const closeItem = (li) => {
+      li.classList.remove('open');
+      const chevron = li.querySelector('.sidebar-item-row .sidebar-chevron');
+      if (chevron) chevron.setAttribute('aria-expanded', 'false');
+    };
+
+    document.querySelectorAll('.sidebar-chevron').forEach(btn => {
+      btn.addEventListener('click', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        const li = btn.closest('.sidebar-item.has-children');
+        const wasOpen = li.classList.contains('open');
+        const parentUl = li.parentElement;
+
+        if (parentUl.classList.contains('sidebar-accordion') && !wasOpen) {
+          [...parentUl.children].forEach(sibling => {
+            if (sibling !== li && sibling.classList.contains('has-children')) {
+              closeItem(sibling);
+            }
+          });
+        }
+
+        const nowOpen = !wasOpen;
+        li.classList.toggle('open', nowOpen);
+        btn.setAttribute('aria-expanded', nowOpen ? 'true' : 'false');
+
+        if (nowOpen) {
+          if (li.classList.contains('sidebar-pyret-concepts')) {
+            const cs = document.querySelector('.sidebar-current-section');
+            if (cs && cs.classList.contains('has-children')) closeItem(cs);
+          } else if (li.classList.contains('sidebar-current-section')) {
+            const pc = document.querySelector('.sidebar-pyret-concepts');
+            if (pc) closeItem(pc);
+          }
+        }
+      });
+    });
+
+    document.querySelectorAll('.sidebar-link').forEach(link => {
+      link.addEventListener('mousedown', () => {
+        link.classList.add('clicking');
+        setTimeout(() => link.classList.remove('clicking'), 300);
+      });
+    });
+  </script>
   </body>
 </html>