diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index b8ba1bb..b78b4d5 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -1,5 +1,15 @@
 {{ define "main" }}
   <div class="mx-auto flex max-w-[90rem]">
     {{ partial "sidebar.html" . }}
+    {{ partial "toc.html" . }}
+    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+        {{ partial "breadcrumb.html" . }}
+        <div class="content">
+          <h1>{{ .Title }}</h1>
+          {{ .Content }}
+        </div>
+      </main>
+    </article>
   </div>
 {{ end }}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
new file mode 100644
index 0000000..b78b4d5
--- /dev/null
+++ b/layouts/docs/single.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+  <div class="mx-auto flex max-w-[90rem]">
+    {{ partial "sidebar.html" . }}
+    {{ partial "toc.html" . }}
+    <article class="w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+        {{ partial "breadcrumb.html" . }}
+        <div class="content">
+          <h1>{{ .Title }}</h1>
+          {{ .Content }}
+        </div>
+      </main>
+    </article>
+  </div>
+{{ end }}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 0000000..12a4a0b
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,55 @@
+{{/* Table of Contents */}}
+{{/* TODO: toc should be able to get disabled through page frontmatter */}}
+{{/* TODO: toc bottom part should be able to hide */}}
+<div class="order-last w-64 shrink-0 xl:block print:hidden px-4" aria-label="table of contents">
+  <div class="sticky top-16 overflow-y-auto pr-4 pt-6 text-sm [hyphens:auto] max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))] ltr:-mr-4 rtl:-ml-4">
+    {{ with .Fragments.Headings }}
+      <p class="mb-4 font-semibold tracking-tight">On This Page</p>
+      {{ range . }}
+        <ul>
+          {{ with .Headings }}
+            {{ template "side-toc-subheading" (dict "headings" . "level" 0) }}
+          {{ end }}
+        </ul>
+      {{ end }}
+    {{ end }}
+
+    {{ $borderClass := "mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]" }}
+    {{ if not .Fragments.Headings }}
+      {{ $borderClass = "" }}
+    {{ end }}
+
+
+    <div class="{{ $borderClass }} sticky bottom-0 flex flex-col items-start gap-2 pb-8 dark:border-neutral-800 contrast-more:border-t contrast-more:border-neutral-400 contrast-more:shadow-none contrast-more:dark:border-neutral-400">
+      <a class="text-xs font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 contrast-more:text-gray-800 contrast-more:dark:text-gray-50" href="{{ .Params.editURL }}">Edit this page on GitHub →</a>
+    </div>
+  </div>
+</div>
+
+{{/* TOC subheading component.
+  This is a recursive component that renders a list of headings.
+*/}}
+{{- define "side-toc-subheading" -}}
+  {{ $headings := .headings }}
+  {{ $level := .level }}
+  {{ if ge $level 6 }}
+    {{ return }}
+  {{ end }}
+
+  {{ $padding := (mul $level 4) }}
+  {{ $class := cond (eq $level 0) "font-semibold" (printf "ltr:pl-%d rtl:pr-%d" $padding $padding) }}
+
+  {{ range $headings }}
+    {{ if .Title }}
+      <li class="my-2 scroll-my-6 scroll-py-6">
+        <a class="{{ $class }} inline-block text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 contrast-more:text-gray-900 contrast-more:underline contrast-more:dark:text-gray-50 w-full break-words" href="#{{ anchorize .ID }}">
+          {{ .Title }}
+        </a>
+      </li>
+    {{ end }}
+    {{ with .Headings }}
+      {{ template "side-toc-subheading" (dict "headings" . "level" (add $level 1)) }}
+    {{ end }}
+
+  {{ end }}
+{{- end -}}