diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte
new file mode 100644
index 0000000..b3fb33a
--- /dev/null
+++ b/src/lib/components/util/ArticleNav.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { pharosInstance } from "$lib/parser";
+  import TocToggle from "$components/util/TocToggle.svelte";
+  import { EyeOutline, BookOutline } from "flowbite-svelte-icons";
+  import { Button } from "flowbite-svelte";
+  import { onMount } from "svelte";
+  import { ndkInstance } from "$lib/ndk";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
+
+  let {
+    rootId,
+    publicationType
+  } = $props<{
+    rootId: any
+    publicationType: string
+  }>();
+
+  let index: null|NDKEvent = $state(null);
+
+  onMount(async () => {
+    index = await $ndkInstance.fetchEvent({ ids: [rootId] });
+  });
+
+  let metadata = $state($pharosInstance.getIndexMetadata());
+</script>
+
+<nav class="Navbar navbar-leather sticky top-[76px] w-full px-2 sm:px-4 py-2.5 z-10">
+  <div class="mx-auto flex flex-wrap justify-between items-center container">
+    <div class="actions">
+      <Button class='btn-leather !w-auto' outline={true}  >
+        <EyeOutline class="!fill-none inline mr-1"  /> Details
+      </Button>
+      {#if publicationType === 'blog'}
+        <Button class='btn-leather !w-auto' outline={true} >
+          <BookOutline class="!fill-none inline mr-1"  /> Table of Contents
+        </Button>
+      {:else}
+        <TocToggle rootId={rootId} />
+      {/if}
+    </div>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index dbd673f..75aa31d 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -3,13 +3,18 @@
   import { TextPlaceholder } from "flowbite-svelte";
   import type { PageData } from "./$types";
   import { onDestroy } from "svelte";
+  import ArticleNav from "$components/util/ArticleNav.svelte";
 
   let { data }: { data: PageData } = $props();
 
   onDestroy(() => data.parser.reset());
 </script>
 
-<main>
+{#key data}
+  <ArticleNav publicationType={data.publicationType} rootId={data.parser.getRootIndexId()}  />
+{/key}
+
+<main class={data.publicationType}>
   {#await data.waitable}
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}