diff --git a/src/lib/components/post/PostContent.svelte b/src/lib/components/post/PostContent.svelte
index 25923c6..be2341e 100644
--- a/src/lib/components/post/PostContent.svelte
+++ b/src/lib/components/post/PostContent.svelte
@@ -59,15 +59,25 @@
 {#if hasValidContent}
   <hr class="my-6 border-[var(--button-bg)]" />
 
-  <div class="w-full grid grid-cols-1 lg:grid-cols-[1fr_250px] gap-8">
-    <!-- Post Content -->
-    <article class="prose dark:prose-invert w-full lg:mx-auto lg:text-left">
-      {@html post.content}
-    </article>
-
-    <!-- TOC (desktop + mobile handled in PostTOC) -->
+  <div class="w-full">
     {#if tocNodes.length > 0}
-      <PostTOC {tocNodes} {activeId} />
+      <!-- Layout with TOC: Grid with content and sidebar -->
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_250px] gap-8">
+        <!-- Post Content -->
+        <article class="prose dark:prose-invert w-full max-w-none">
+          {@html post.content}
+        </article>
+
+        <!-- TOC (desktop + mobile handled in PostTOC) -->
+        <PostTOC {tocNodes} {activeId} />
+      </div>
+    {:else}
+      <!-- Layout without TOC: 10vw margins on desktop, centered on mobile -->
+      <div class="lg:mx-[10vw] mx-auto max-w-4xl lg:max-w-none">
+        <article class="prose dark:prose-invert w-full">
+          {@html post.content}
+        </article>
+      </div>
     {/if}
   </div>
 
@@ -75,19 +85,21 @@
 {:else}
   <!-- Loading state -->
   <hr class="my-6 border-[var(--button-bg)]" />
-  <article class="prose dark:prose-invert w-full text-center">
-    <div class="flex justify-center items-center min-h-[200px]">
-      <div class="text-center">
-        <div class="animate-pulse space-y-4">
-          <div class="h-4 bg-card rounded w-3/4 mx-auto"></div>
-          <div class="h-4 bg-card rounded w-1/2 mx-auto"></div>
-          <div class="h-4 bg-card rounded w-5/6 mx-auto"></div>
-          <div class="h-4 bg-card rounded w-2/3 mx-auto"></div>
+  <div class="lg:mx-[10vw] mx-auto max-w-4xl lg:max-w-none">
+    <article class="prose dark:prose-invert w-full text-center">
+      <div class="flex justify-center items-center min-h-[200px]">
+        <div class="text-center">
+          <div class="animate-pulse space-y-4">
+            <div class="h-4 bg-card rounded w-3/4 mx-auto"></div>
+            <div class="h-4 bg-card rounded w-1/2 mx-auto"></div>
+            <div class="h-4 bg-card rounded w-5/6 mx-auto"></div>
+            <div class="h-4 bg-card rounded w-2/3 mx-auto"></div>
+          </div>
+          <p class="mt-6 text-sm opacity-60">Loading post content...</p>
         </div>
-        <p class="mt-6 text-sm opacity-60">Loading post content...</p>
       </div>
-    </div>
-  </article>
+    </article>
+  </div>
   <hr class="my-6 border-[var(--button-bg)]" />
 {/if}
 
@@ -109,4 +121,4 @@
     background-color: var(--button-bg);
     opacity: 0.6;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/lib/components/post/ToCUI.svelte b/src/lib/components/post/ToCUI.svelte
index 00d24f1..8258bc0 100644
--- a/src/lib/components/post/ToCUI.svelte
+++ b/src/lib/components/post/ToCUI.svelte
@@ -11,7 +11,7 @@
   let tocOpen = false;
   const closeDrawer = () => (tocOpen = false);
 
-  // Scroll progress for desktop
+  // Scroll progress for desktop and mobile
   let scrollProgress = 0;
   const updateScrollProgress = () => {
     const scrollTop = window.scrollY;
@@ -57,7 +57,7 @@
   });
 </script>
 
-<!-- Desktop Sticky Sidebar -->
+<!-- Desktop Sticky Sidebar - Only render if there are headings -->
 {#if tocNodes.length > 0}
   <aside class="hidden lg:block">
     <div class="sticky top-8">
@@ -72,7 +72,7 @@
         }}
       />
 
-      <!-- Scroll Progress Bar -->
+      <!-- Desktop Scroll Progress Bar -->
       <div class="w-full h-1 bg-button mt-2 rounded overflow-hidden">
         <div
           class="h-full bg-primary transition-all duration-100 ease-linear"
@@ -81,9 +81,19 @@
       </div>
     </div>
   </aside>
+{:else}
+  <!-- Render nothing for desktop when no headings - allows content to take full width -->
 {/if}
 
-<!-- Mobile TOC Drawer -->
+<!-- Mobile Vertical Progress Bar - Always show -->
+<div class="fixed left-1 top-16 bottom-16 w-1 bg-button rounded z-30 lg:hidden">
+  <div
+    class="w-full bg-primary transition-all duration-100 ease-linear rounded"
+    style="height: {scrollProgress}%"
+  ></div>
+</div>
+
+<!-- Mobile TOC Elements - Only show if there are headings -->
 {#if tocNodes.length > 0}
   <!-- Floating TOC Button -->
   {#if showTOCButton}
@@ -201,4 +211,4 @@
       transform: none;
     }
   }
-</style>
+</style>
\ No newline at end of file