diff --git a/src/lib/components/publications/TableOfContents.svelte b/src/lib/components/publications/TableOfContents.svelte
index 15f441e..a49fd1c 100644
--- a/src/lib/components/publications/TableOfContents.svelte
+++ b/src/lib/components/publications/TableOfContents.svelte
@@ -1,6 +1,7 @@
 <script lang='ts'>
   import type { TableOfContents } from '$lib/components/publications/table_of_contents.svelte';
   import { getContext } from 'svelte';
+  import { Card } from 'flowbite-svelte';
 
   let { rootAddress } = $props<{ rootAddress: string }>();
 
@@ -12,4 +13,8 @@
   // Each rendered `<h>` should receive an entry in the ToC.
 </script>
 
-<!-- TODO: Add contents. -->
+<Card class='flex flex-col space-y-2'>
+  {#each toc as entry}
+    <a href={entry.href}>{entry.title}</a>
+  {/each}
+</Card>
diff --git a/src/lib/components/publications/table_of_contents.svelte.ts b/src/lib/components/publications/table_of_contents.svelte.ts
index 3efddd1..4b6cc7a 100644
--- a/src/lib/components/publications/table_of_contents.svelte.ts
+++ b/src/lib/components/publications/table_of_contents.svelte.ts
@@ -132,4 +132,25 @@ export class TableOfContents {
         }
       });
   }
+
+  /**
+   * Iterates over all ToC entries in depth-first order.
+   */
+  *[Symbol.iterator](): IterableIterator<TocEntry> {
+    function* traverse(entry: TocEntry | null): IterableIterator<TocEntry> {
+      if (!entry) {
+        return;
+      }
+
+      yield entry;
+
+      if (entry.children) {
+        for (const child of entry.children) {
+          yield* traverse(child);
+        }
+      }
+    }
+
+    yield* traverse(this.#tocRoot);
+  }
 }