app/posts/[slug]/page.tsx

@@ -29,8 +29,9 @@ export default async function Post({ params }: PageProps) {
   const postData: PostData = await getPostData(slug);
 
   return (
-    <div className="mx-auto max-w-5xl">
-      <Window title={postData.title} showProgress>
+    <div className="mx-auto max-w-6xl">
+      <div className="lg:flex lg:gap-4 lg:items-start">
+        <Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
           <article>
             <div className="mb-4 text-gray-500 flex flex-col gap-1">
               <span>
@@ -50,15 +51,14 @@ export default async function Post({ params }: PageProps) {
               </div>
             )}
 
-          {/* Mobile TOC — shown above article, hidden on lg+ */}
+            {/* Mobile TOC — inline above article, hidden on lg+ */}
             {postData.headings.length > 0 && (
-            <div className="lg:hidden mb-6">
+              <div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
                 <TableOfContents headings={postData.headings} />
               </div>
             )}
 
-          <div className="lg:flex lg:gap-8 lg:items-start">
-            <div className="prose lg:prose-lg max-w-none flex-1 min-w-0">
+            <div className="prose lg:prose-lg max-w-none">
               <MDXRemote
                 source={postData.content}
                 options={{
@@ -77,16 +77,18 @@ export default async function Post({ params }: PageProps) {
                 }}
               />
             </div>
+          </article>
+        </Window>
 
-            {/* Desktop TOC sidebar — hidden on mobile */}
+        {/* Desktop TOC — separate Aero Window, sticky on the right */}
         {postData.headings.length > 0 && (
-              <div className="hidden lg:block w-52 flex-shrink-0">
+          <div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
+            <Window title="Contents">
               <TableOfContents headings={postData.headings} />
+            </Window>
           </div>
         )}
       </div>
-        </article>
-      </Window>
 
       <div className="mt-8 text-center">
         <Link

components/table-of-contents.tsx

@@ -35,7 +35,7 @@ export default function TableOfContents({ headings }: TableOfContentsProps) {
   if (headings.length === 0) return null;
 
   return (
-    <nav className="bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4 lg:sticky lg:top-8">
+    <nav>
       <p className="text-xs font-bold uppercase tracking-widest text-blue-800 mb-3">
         Contents
       </p>