diff --git a/package.json b/package.json
index 2ceba959..ee68371c 100644
--- a/package.json
+++ b/package.json
@@ -53,10 +53,11 @@
     "sharp": "^0.33.5",
     "surge": "^0.24.6",
     "svelte": "^5.23.2",
+    "svelte-toc": "^0.6.0",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",
     "vitest": "^3.0.9",
-    "yaml": "^2.6.1"
+    "yaml": "^2.7.1"
   },
   "packageManager": "pnpm@10.8.1",
   "engines": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32a706df..f22009ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,6 +101,9 @@ importers:
       svelte:
         specifier: ^5.23.2
         version: 5.25.6
+      svelte-toc:
+        specifier: ^0.6.0
+        version: 0.6.0
       tsx:
         specifier: ^4.19.2
         version: 4.19.3
@@ -111,7 +114,7 @@ importers:
         specifier: ^3.0.9
         version: 3.1.1(@types/debug@4.1.12)(@types/node@22.14.1)(jiti@2.4.2)(sass@1.86.3)(tsx@4.19.3)(yaml@2.7.1)
       yaml:
-        specifier: ^2.6.1
+        specifier: ^2.7.1
         version: 2.7.1
 
 packages:
@@ -3021,6 +3024,9 @@ packages:
     resolution: {integrity: sha512-tfJpTBlTyrAgmEVp21cyagcszFXNBZA6Ba9SkngRHHtKtfbJdJXQ7G1udW6HTLaUkzWDB7aheiyG+NSkZy/0PQ==}
     hasBin: true
 
+  svelte-toc@0.6.0:
+    resolution: {integrity: sha512-w3PeCuIse/tCrKI5N8duIcdjCZ8d4x6pxs1gBZSaT9PqdCYS8uUuLLOr2ZONr3rWiHOgQTx7UMMXglPoJpZCJA==}
+
   svelte2tsx@0.7.34:
     resolution: {integrity: sha512-WTMhpNhFf8/h3SMtR5dkdSy2qfveomkhYei/QW9gSPccb0/b82tjHvLop6vT303ZkGswU/da1s6XvrLgthQPCw==}
     peerDependencies:
@@ -3031,6 +3037,10 @@ packages:
     resolution: {integrity: sha512-RGkaeAXDuJdvhA1fdSM5GgD++vYfJYijZL0uN6kM2s/TRJ663jktBhZlF0qjzAJGR/34PtaeT3G8MKJY1EKeqg==}
     engines: {node: '>=18'}
 
+  svelte@5.27.1:
+    resolution: {integrity: sha512-DxbUsdR1MZcnEgvJEbQ9IiaqAAIXT3lv7JhkW8K5AJO08+gxnRnoNrYJUCAdR3PCt+oODGOldmYDnqoLsNlvpQ==}
+    engines: {node: '>=18'}
+
   svgo@3.3.2:
     resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
     engines: {node: '>=14.0.0'}
@@ -7143,6 +7153,10 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  svelte-toc@0.6.0:
+    dependencies:
+      svelte: 5.27.1
+
   svelte2tsx@0.7.34(svelte@5.25.6)(typescript@5.8.3):
     dependencies:
       dedent-js: 1.0.1
@@ -7167,6 +7181,23 @@ snapshots:
       magic-string: 0.30.17
       zimmerframe: 1.1.2
 
+  svelte@5.27.1:
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1)
+      '@types/estree': 1.0.7
+      acorn: 8.14.1
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 1.4.6
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.17
+      zimmerframe: 1.1.2
+
   svgo@3.3.2:
     dependencies:
       '@trysound/sax': 0.2.0
diff --git a/src/components/TableOfContents.svelte b/src/components/TableOfContents.svelte
new file mode 100644
index 00000000..55252528
--- /dev/null
+++ b/src/components/TableOfContents.svelte
@@ -0,0 +1,48 @@
+<script>
+  import Toc from "svelte-toc";
+  import "@styles/_utils.scss";
+</script>
+
+<Toc
+  --toc-font-size="inherit"
+  --toc-padding="1rem"
+  --toc-z-index="10"
+  --toc-width="auto"
+  --toc-mobile-btn-border-radius="0.25em"
+  --toc-mobile-btn-color="var(--text)"
+  --toc-mobile-btn-bg="var(--surface0)"
+  --toc-mobile-bg="var(--surface0)"
+  --toc-desktop-sticky-top="0"
+  --toc-li-color="var(--subtext1)"
+  --toc-li-hover-bg="color-mix(in oklab, transparent, currentcolor 8%)"
+  --toc-li-hover-color="var(--text)"
+  --toc-li-border-radius="0.5em"
+  --toc-li-padding="0.35em 0.6em"
+  --toc-active-border-radius="0.5em"
+  --toc-active-bg="color-mix(in oklab, color-mix(in oklab, var(--base), currentcolor 25%), #000 25%)"
+  --toc-active-color="var(--accent-color)"
+  breakpoint="1000"
+  blurParams={{ duration: 0 }}>
+</Toc>
+
+<style>
+  :global {
+    aside.toc {
+      & > nav {
+        border-radius: 1em;
+        & > h2 {
+          padding-inline: 0.1em;
+          padding-block: 0.5em 0.4em;
+        }
+        & > ol {
+          & > li {
+            font-size: 90% !important;
+          }
+        }
+      }
+      &.mobile {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
index a693eebe..01183d96 100644
--- a/src/pages/blog/[id].astro
+++ b/src/pages/blog/[id].astro
@@ -5,6 +5,7 @@ import { Icon } from "astro-icon/components";
 import Default from "@layouts/Default.astro";
 import PageIntro from "@components/PageIntro.astro";
 import ProfilePicture from "@components/ProfilePicture.svelte";
+import TableOfContents from "@components/TableOfContents.svelte";
 import { formattedDatePosted } from "./_logic/[id]";
 import { formattedAuthors } from "./_logic/[id]";
 
@@ -36,39 +37,44 @@ const { Content, remarkPluginFrontmatter } = await render(post);
       sizes={`(max-width: 720px) 800px, (max-width: 1080px) 1600px, ${post.data.hero.image.width}px`}
     />
   </figure>
-  <article class="blog-container" role="main" style=`--accent-color: var(--${post.data.accentColor});`>
-    <PageIntro title={post.data.title}>
-      <p class="article-summary">{post.data.summary}</p>
-      <footer class="article-meta">
-        <div class="article-author-profiles">
-          {post.data.authors.map((author) => <ProfilePicture username={author.github} size={64} wxh={56} />)}
-        </div>
-        <div>
-          <p class="article-author-info">
-            Authored by
-            <Fragment set:html={formattedAuthors(post.data.authors)} />
-          </p>
-          <p class="article-pubdate">Published on: {formattedDatePosted(post.data.datePosted)}</p>
-          <p>{remarkPluginFrontmatter.minutesRead}</p>
-        </div>
-      </footer>
-    </PageIntro>
-    <div class="article-content">
-      <Content />
+  <div class="main-wrapper" style=`--accent-color: var(--${post.data.accentColor});`>
+    <div class="layout-sidebar-start">
+      <TableOfContents client:load />
     </div>
-    <footer class="article-credit">
-      <p>
-        Hero image by <a href={post.data.hero.source}>{post.data.hero.author}</a> modified with <a
-          href="https://github.com/ozwaldorf/lutgen-rs">lutgen-rs</a
-        >.
-      </p>
-      <p>
-        Want to keep up-to-date? Subscribe to our <a href="/rss.xml"
-          >RSS Feed <Icon class="rss-icon" name="ph:rss-bold" width={24} height={24} /></a
-        >
-      </p>
-    </footer>
-  </article>
+    <article class="layout-main blog-container" role="main">
+      <PageIntro title={post.data.title}>
+        <p class="article-summary">{post.data.summary}</p>
+        <footer class="article-meta">
+          <div class="article-author-profiles">
+            {post.data.authors.map((author) => <ProfilePicture username={author.github} size={64} wxh={56} />)}
+          </div>
+          <div>
+            <p class="article-author-info">
+              Authored by
+              <Fragment set:html={formattedAuthors(post.data.authors)} />
+            </p>
+            <p class="article-pubdate">Published on: {formattedDatePosted(post.data.datePosted)}</p>
+            <p>{remarkPluginFrontmatter.minutesRead}</p>
+          </div>
+        </footer>
+      </PageIntro>
+      <main class="article-content">
+        <Content />
+      </main>
+      <footer class="article-credit">
+        <p>
+          Hero image by <a href={post.data.hero.source}>{post.data.hero.author}</a> modified with <a
+            href="https://github.com/ozwaldorf/lutgen-rs">lutgen-rs</a
+          >.
+        </p>
+        <p>
+          Want to keep up-to-date? Subscribe to our <a href="/rss.xml"
+            >RSS Feed <Icon class="rss-icon" name="ph:rss-bold" width={24} height={24} /></a
+          >
+        </p>
+      </footer>
+    </article>
+  </div>
 </Default>
 
 <style lang="scss">
@@ -94,6 +100,39 @@ const { Content, remarkPluginFrontmatter } = await render(post);
     }
   }
 
+  .main-wrapper {
+    display: grid;
+    grid-template-columns: minmax(25ch, 1fr) 2fr auto;
+    gap: var(--space-md);
+    grid-template-areas: "sidebar-start main sidebar-end";
+  }
+
+  .layout-sidebar-start {
+    grid-area: sidebar-start;
+  }
+
+  .layout-main {
+    grid-area: main;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .layout-sidebar-end {
+    grid-area: sidebar-end;
+  }
+
+  .layout-sidebar-start,
+  .layout-sidebar-end {
+    margin-block: var(--space-xs) var(--space-xs);
+  }
+
+  @media (max-width: 1000px) {
+    .main-wrapper {
+      grid-template-columns: auto;
+      gap: 0;
+    }
+  }
+
   .blog-container {
     max-width: 69ch;
     margin-inline: auto;