diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 48e54f8..e917ff1 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -39,19 +39,19 @@
   }
 </script>
 
+{#if $publicationColumnVisibility.details}
+  <div class="flex flex-col space-y-4 max-w-xl flex-grow-1 p-2 bg-highlight">
+    <Details event={indexEvent} />
+  </div>
+{/if}
 
-{#if showTocButton && !showToc}
-  <Button
-    class="btn-leather fixed top-20 left-4 h-6 w-6"
-    outline={true}
-    on:click={(ev) => {
-      showToc = true;
-      ev.stopPropagation();
-    }}
-  >
-    <BookOutline />
-  </Button>
-  <Tooltip>Show Table of Contents</Tooltip>
+{#if isDefaultVisible()}
+  <div class="flex flex-col space-y-4 overflow-auto 
+          {publicationType === 'blog' ? 'max-w-xl flex-grow-1' : 'max-w-2xl flex-grow-2' }
+          {currentBlog !== null ? 'discreet' : ''}
+  ">
+    <Preview {rootId} {publicationType} index={0} onBlogUpdate={loadBlog} />
+  </div>
 {/if}
 
 {#if currentBlog !== null && $publicationColumnVisibility.inner }
@@ -62,6 +62,12 @@
   {/key}
 {/if}
 
+{#if $publicationColumnVisibility.social }
+  <div class="flex flex-col space-y-4 max-w-xl overflow-auto flex-grow-1 bg-highlight">
+      <p>Social column</p>
+  </div>
+{/if}
+
 <style>
   :global(.sidebar-group-leather) {
     max-height: calc(100vh - 8rem);
diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte
index 31e6b52..5049c7e 100644
--- a/src/lib/components/util/ArticleNav.svelte
+++ b/src/lib/components/util/ArticleNav.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
   import { pharosInstance } from "$lib/parser";
   import TocToggle from "$components/util/TocToggle.svelte";
-  import { EyeOutline, BookOutline } from "flowbite-svelte-icons";
+  import { EyeOutline, BookOutline, AlignCenterOutline, BookOpenOutline, GlobeOutline, ShareAllOutline, PenOutline } from "flowbite-svelte-icons";
   import { Button } from "flowbite-svelte";
   import { onMount } from "svelte";
   import { publicationColumnVisibility } from "$lib/stores";
   import InlineProfile from "$components/util/InlineProfile.svelte";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
 
   let {
     rootId,
     publicationType
   } = $props<{
-    rootId: any
+    rootId: any,
     publicationType: string
   }>();
 
@@ -20,7 +21,7 @@
   });
 
   // Function to toggle column visibility
-  function toggleColumn(column: 'details'|'blog') {
+  function toggleColumn(column: 'details'|'blog'|'inner'|'social') {
     publicationColumnVisibility.update(store => {
       store[column] = !store[column]; // Toggle true/false
       if (window.innerWidth < 1140) {
@@ -33,21 +34,22 @@
 </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} onclick={() => toggleColumn('details')} >-->
-<!--        <EyeOutline class="!fill-none inline mr-1"  /> Details-->
-<!--      </Button>-->
+  <div class="mx-auto flex flex-wrap justify-center space-x-2 container">
+      <Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('details')} >
+        <EyeOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Details</span>
+      </Button>
       {#if publicationType === 'blog'}
         <Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('blog')} >
           <BookOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Table of Contents</span>
         </Button>
+        <Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('inner')} >
+          <BookOpenOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Content</span>
+        </Button>
       {:else}
         <TocToggle rootId={rootId} />
       {/if}
-    </div>
-    <div class="publisher">
-<!--      <InlineProfile />-->
-    </div>
+      <Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('social')} >
+        <GlobeOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Social</span>
+      </Button>
   </div>
 </nav>
\ No newline at end of file
diff --git a/src/lib/components/util/CardActions.svelte b/src/lib/components/util/CardActions.svelte
index c1c4f62..177c8ee 100644
--- a/src/lib/components/util/CardActions.svelte
+++ b/src/lib/components/util/CardActions.svelte
@@ -11,6 +11,7 @@
   import { standardRelays } from "$lib/consts";
   import { neventEncode, naddrEncode } from "$lib/utils";
   import InlineProfile from "$components/util/InlineProfile.svelte";
+    import Details from "./Details.svelte";
 
   let { event } = $props();
 
@@ -134,53 +135,6 @@
   </Modal>
   <!-- Event details -->
   <Modal class='modal-leather' title='Publication details' bind:open={detailsModalOpen} autoclose outsideclose size='sm'>
-    <div class="flex flex-row space-x-4">
-      {#if image}
-      <div class="flex col">
-        <img class="max-w-48" src={image} alt="Publication cover" />
-      </div>
-      {/if}
-      <div class="flex flex-col col space-y-5  justify-center  align-middle">
-        <h1 class="text-3xl font-bold mt-5">{title}</h1>
-        <h2 class="text-base font-bold">by
-          {#if originalAuthor !== null}
-            <InlineProfile pubkey={originalAuthor} title={author} />
-          {:else}
-            {author}
-          {/if}
-        </h2>
-        <h4 class='text-base font-thin mt-2'>Version: {version}</h4>
-      </div>
-    </div>
-
-    {#if summary}
-      <div class="flex flex-row ">
-        <p class='text-base text-primary-900 dark:text-highlight'>{summary}</p>
-      </div>
-    {/if}
-
-    <div class="flex flex-row ">
-      <h4 class='text-base font-normal mt-2'>Index author: <InlineProfile pubkey={event.pubkey} /></h4>
-    </div>
-
-    <div class="flex flex-col pb-4 space-y-1">
-      {#if source !== null}
-        <h5 class="text-sm">Source: <a class="underline" href={source} target="_blank">{source}</a></h5>
-      {/if}
-      {#if type !== null}
-        <h5 class="text-sm">Publication type: {type}</h5>
-      {/if}
-      {#if language !== null}
-        <h5 class="text-sm">Language: {language}</h5>
-      {/if}
-      {#if publisher !== null}
-        <h5 class="text-sm">Published by: {publisher}</h5>
-      {/if}
-      {#if identifier !== null}
-        <h5 class="text-sm">{identifier}</h5>
-      {/if}
-
-    </div>
-
+    <Details event={event} />
   </Modal>
 </div>