diff --git a/site/decodal-site/src/layouts/ManualLayout.astro b/site/decodal-site/src/layouts/ManualLayout.astro
index 0b74278..7064459 100644
--- a/site/decodal-site/src/layouts/ManualLayout.astro
+++ b/site/decodal-site/src/layouts/ManualLayout.astro
@@ -4,13 +4,14 @@ import '../style.css';
 
 const { title = 'Decodal', active = '', playground = false } = Astro.props;
 
-function renderNav(items) {
+function renderNav(items, prefix = []) {
   return `<ul class="nav-tree">${items
-    .map((item) => {
+    .map((item, index) => {
+      const number = [...prefix, index + 1];
       const href = `/docs/${item.slug}/`;
       const activeClass = active === item.slug ? ' class="active"' : '';
-      const children = item.children ? renderNav(item.children) : '';
-      return `<li><a${activeClass} href="${href}">${item.title}</a>${children}</li>`;
+      const children = item.children ? renderNav(item.children, number) : '';
+      return `<li><a${activeClass} href="${href}"><span class="nav-number">${number.join('.')}.</span>${item.title}</a>${children}</li>`;
     })
     .join('')}</ul>`;
 }
diff --git a/site/decodal-site/src/style.css b/site/decodal-site/src/style.css
index 0080ef7..836be15 100644
--- a/site/decodal-site/src/style.css
+++ b/site/decodal-site/src/style.css
@@ -80,18 +80,29 @@ a:hover {
 .nav-tree a {
   border-radius: 6px;
   color: #374151;
-  display: block;
+  display: flex;
   font-size: 14px;
+  gap: 6px;
   line-height: 1.35;
   padding: 4px 8px;
 }
 
+.nav-number {
+  color: #94a3b8;
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
 .nav-tree a.active {
   background: #dbeafe;
   color: #1d4ed8;
   font-weight: 600;
 }
 
+.nav-tree a.active .nav-number {
+  color: #2563eb;
+}
+
 main {
   min-width: 0;
   padding: 36px;