diff --git a/src/lib/components/publications/Publication.svelte b/src/lib/components/publications/Publication.svelte
index 171d625..fd2f105 100644
--- a/src/lib/components/publications/Publication.svelte
+++ b/src/lib/components/publications/Publication.svelte
@@ -119,6 +119,7 @@
   let hasInitialized = $state(false);
   let highlightModeActive = $state(false);
   let publicationDeleted = $state(false);
+  let sidebarTop = $state(162); // Default to 162px (100px navbar + 62px ArticleNav)
 
   let observer: IntersectionObserver;
 
@@ -420,6 +421,20 @@
   });
 
   onMount(() => {
+    // Measure the actual navbar and ArticleNav heights to position sidebars correctly
+    const navbar = document.getElementById("navi");
+    const articleNav = document.querySelector("nav.navbar-leather");
+    
+    if (navbar && articleNav) {
+      const navbarRect = navbar.getBoundingClientRect();
+      const articleNavRect = articleNav.getBoundingClientRect();
+      sidebarTop = articleNavRect.bottom;
+    } else if (navbar) {
+      // Fallback: if ArticleNav not found, use navbar height + estimated ArticleNav height
+      const navbarRect = navbar.getBoundingClientRect();
+      sidebarTop = navbarRect.bottom + 62; // Estimated ArticleNav height
+    }
+
     // Set current columns depending on the publication type
     const isBlog = publicationType === "blog";
     publicationColumnVisibility.update((v) => ({
@@ -725,7 +740,8 @@
 >
   {#if $publicationColumnVisibility.discussion}
     <Sidebar
-      class="z-10 ml-4 fixed top-[162px] h-[calc(100vh-165px)] overflow-y-auto"
+      class="z-10 ml-4 fixed overflow-y-auto"
+      style="top: {sidebarTop}px; height: calc(100vh - {sidebarTop + 3}px);"
       classes={{
         div: "bg-transparent",
       }}
@@ -796,9 +812,10 @@
   
   <!-- Drawer -->
   <div
-    class="fixed top-[162px] left-0 h-[calc(100vh-162px)] w-fit min-w-[280px] max-w-[min(98vw,500px)] z-[110] dark:bg-primary-900 bg-primary-50 rounded-r-lg shadow-xl transition-transform duration-300 ease-in-out {$publicationColumnVisibility.toc
+    class="fixed left-0 w-fit min-w-[280px] max-w-[min(98vw,500px)] z-[110] dark:bg-primary-900 bg-primary-50 rounded-r-lg shadow-xl transition-transform duration-300 ease-in-out {$publicationColumnVisibility.toc
       ? 'translate-x-0'
       : '-translate-x-full'}"
+    style="top: {sidebarTop}px; height: calc(100vh - {sidebarTop}px);"
   >
     <div class="h-full flex flex-col overflow-hidden">
       <div class="flex-shrink-0 p-2 border-b border-gray-200 dark:border-gray-700">
diff --git a/src/lib/components/util/ArticleNav.svelte b/src/lib/components/util/ArticleNav.svelte
index 2d8183e..34d395d 100644
--- a/src/lib/components/util/ArticleNav.svelte
+++ b/src/lib/components/util/ArticleNav.svelte
@@ -36,6 +36,7 @@
 
   let lastScrollY = $state(0);
   let isVisible = $state(true);
+  let navbarTop = $state(100); // Default to 100px
 
   // Function to toggle column visibility
   function toggleColumn(column: "toc" | "blog" | "inner" | "discussion") {
@@ -149,6 +150,13 @@
 
   let unsubscribe: () => void;
   onMount(() => {
+    // Measure the actual navbar height to position ArticleNav correctly
+    const navbar = document.getElementById("navi");
+    if (navbar) {
+      const rect = navbar.getBoundingClientRect();
+      navbarTop = rect.bottom;
+    }
+    
     window.addEventListener("scroll", handleScroll);
     unsubscribe = publicationColumnVisibility.subscribe(() => {
       isVisible = true; // show navbar when store changes
@@ -162,9 +170,10 @@
 </script>
 
 <nav
-  class="Navbar navbar-leather col-span-2 flex fixed top-[100px] sm:top-[92px] w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10 transition-transform duration-300 {isVisible
+  class="Navbar navbar-leather col-span-2 flex fixed w-full min-h-[70px] px-2 sm:px-4 py-2.5 z-10 transition-transform duration-300 {isVisible
     ? 'translate-y-0'
     : '-translate-y-full'}"
+  style="top: {navbarTop}px;"
 >
   <div class="mx-auto flex space-x-2 container">
     <div class="flex items-center space-x-2 md:min-w-52 min-w-8">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c4e1886..440c3ec 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,6 +13,8 @@
 
   setContext("ndk", data.ndk);
 
+  let contentTop = $state(100); // Default to 100px
+
   // Get standard metadata for OpenGraph tags
   let title = "Library of Alexandria";
   let currentUrl = page.url.href;
@@ -27,6 +29,13 @@
     const rect = document.body.getBoundingClientRect();
     // document.body.style.height = `${rect.height}px`;
 
+    // Measure the actual navbar height to position content correctly
+    const navbar = document.getElementById("navi");
+    if (navbar) {
+      const navbarRect = navbar.getBoundingClientRect();
+      contentTop = navbarRect.bottom;
+    }
+
     // AI-NOTE:  Restore authentication state from localStorage on page load
     // This function automatically restores the user's login state when the page is refreshed,
     // preventing the user from being logged out unexpectedly. It handles extension, npub, and Amber logins.
@@ -183,7 +192,7 @@
 <div class="min-h-screen flex flex-col">
   <ANavbar />
 
-  <div class="flex flex-1 flex-col w-full mt-[100px] self-center">
+  <div class="flex flex-1 flex-col w-full self-center" style="margin-top: {contentTop}px;">
     {@render children()}
   </div>