diff --git a/src/lib/components/TableOfContents.svelte b/src/lib/components/TableOfContents.svelte
new file mode 100644
index 0000000..9e606fb
--- /dev/null
+++ b/src/lib/components/TableOfContents.svelte
@@ -0,0 +1,16 @@
+<script lang='ts'>
+  import type { PublicationTree } from '$lib/data_structures/publication_tree';
+  import type { TocEntry } from '$lib/data_structures/table_of_contents';
+  import { getContext } from 'svelte';
+
+  let { rootAddress } = $props<{ rootAddress: string }>();
+
+  let toc = $state<TocEntry[]>([]);
+
+	const publicationTree = getContext('publicationTree') as PublicationTree;
+
+  // TODO: Build the table of contents.
+  // Base hrefs on d-tags for events within the publication.
+</script>
+
+<!-- TODO: Add contents. -->
diff --git a/src/lib/components/Toc.svelte b/src/lib/components/Toc.svelte
deleted file mode 100644
index 9d433b5..0000000
--- a/src/lib/components/Toc.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { NDKEvent } from '@nostr-dev-kit/ndk';
- 	import {nip19} from 'nostr-tools';
-	export let notes: NDKEvent[] = [];
-    // check if notes is empty
-    if (notes.length === 0) {
-        console.debug('notes is empty');
-    }
-</script>
-
-<div class="toc">
-	<h2>Table of contents</h2>
-	<ul>
-		{#each notes as note}
-			<li><a href="#{nip19.noteEncode(note.id)}">{note.getMatchingTags('title')[0][1]}</a></li>
-		{/each}
-	</ul>
-</div>
-
-<style>
-	.toc h2 {
-		text-align: center;
-	}
-</style>