diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx
index 1776d3129ef37..0874f3d7655ec 100644
--- a/src/components/docPage/index.tsx
+++ b/src/components/docPage/index.tsx
@@ -70,14 +70,15 @@ export function DocPage({
         <main className="main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto">
           <div
             className={[
-              'mx-auto lg:mx-0 pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
+              'mx-auto pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
               'prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1',
               'prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)]',
               'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)]',
               'prose-img:my-2',
               'prose-strong:text-[var(--gray-12)]',
-              fullWidth ? 'max-w-none w-full' : 'w-[75ch] xl:max-w-[calc(100%-250px)]',
+              fullWidth ? 'max-w-none w-full' : 'w-full',
             ].join(' ')}
+            id="doc-content"
           >
             <div className="mb-4">
               <Banner />
@@ -112,17 +113,50 @@ export function DocPage({
               {hasGithub && <GitHubCTA />}
             </div>
           </div>
-
-          {hasToc && (
-            <aside className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]">
-              <div className="sidebar">
-                <SidebarTableOfContents />
-                <PlatformSdkDetail />
-              </div>
-            </aside>
-          )}
         </main>
+        {hasToc && (
+          <aside
+            data-layout-anchor="right"
+            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden toc:block w-[250px]"
+          >
+            <div className="sidebar">
+              <SidebarTableOfContents />
+              <PlatformSdkDetail />
+            </div>
+          </aside>
+        )}
       </section>
+      <style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); }`}</style>
+      <style>{`
+        @media (min-width: 2057px) {
+          :root {
+            --doc-content-w: 1200px;
+            --toc-w: 250px;
+            --gap: 24px;
+          }
+          /* Cap content width and center (reinforced at this breakpoint) */
+          #doc-content {
+            max-width: var(--doc-content-w);
+            padding-left: 5rem; /* increase from px-6 (24px) to 5rem (80px) */
+            padding-right: 5rem;
+          }
+          /* Cancel default push so content can center */
+          [data-layout-anchor="left"] + .main-content {
+            margin-left: 0 !important;
+            width: 100% !important;
+          }
+          /* Anchor sidebars to content edges */
+          [data-layout-anchor="left"] {
+            left: calc(50% - (var(--doc-content-w) / 2) - var(--gap) - var(--sidebar-width));
+          }
+          [data-layout-anchor="right"] {
+            position: fixed !important;
+            left: calc(50% + (var(--doc-content-w) / 2) + var(--gap));
+            width: var(--toc-w);
+          }
+        }
+      `}</style>
+
       <Mermaid />
       <ReaderDepthTracker />
     </div>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index cd4b767843ac7..159229a5f2681 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -32,7 +32,7 @@ export function Header({
     <header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
       {/* define a header-height variable for consumption by other components */}
       <style>{':root { --header-height: 80px; }'}</style>
-      <nav className="mx-auto px-6 lg:px-8 py-2 flex items-center">
+      <nav className="nav-inner mx-auto px-3 py-2 flex items-center">
         {pathname !== '/' && (
           <button className="lg:hidden mr-3">
             <label
@@ -53,7 +53,7 @@ export function Header({
         <Link
           href="/"
           title="Sentry error monitoring"
-          className="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
+          className="logo-slot flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
         >
           <div className="h-full pb-[6px]">
             <Image
@@ -91,6 +91,32 @@ export function Header({
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />
         </div>
       </nav>
+      <style>{`
+        /* Align header width with content + sidebars at wide screens */
+        @media (min-width: 2057px) {
+          header .nav-inner {
+            /* total layout width = sidebar + gap + content + gap + toc */
+            max-width: calc(
+              var(--sidebar-width, 300px)
+              + var(--gap, 24px)
+              + var(--doc-content-w, 1200px)
+              + var(--gap, 24px)
+              + var(--toc-w, 250px)
+            );
+            margin-left: auto;
+            margin-right: auto;
+            /* center, then compensate if sidebar != toc */
+            transform: translateX(calc((var(--toc-w, 250px) - var(--sidebar-width, 300px)) / 2));
+            /* restore small internal padding (≈ Tailwind px-3) */
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+          }
+          /* Ensure the left logo area equals sidebar width */
+          header .nav-inner .logo-slot {
+            width: var(--sidebar-width, 300px);
+          }
+        }
+      `}</style>
     </header>
   );
 }
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index dcb5b3a008976..b684f288e186e 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -81,7 +81,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
       });
 
   return (
-    <aside className={`${styles.sidebar} py-3`}>
+    <aside className={`${styles.sidebar} py-3`} data-layout-anchor="left">
       <input type="checkbox" id={sidebarToggleId} className="hidden" />
       <style>{':root { --sidebar-width: 300px; }'}</style>
       <div className="md:flex flex-col items-stretch overflow-auto">
diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
index 2c0b5c169833b..3a6850e7d3d31 100644
--- a/src/components/sidebar/style.module.scss
+++ b/src/components/sidebar/style.module.scss
@@ -2,12 +2,15 @@
   .sidebar.sidebar {
     --sidebar-item-bg-hover: var(--gray-a4);
     --sidebar-item-color: var(--accent);
+    /* Keep a darker background in dark mode */
+    background-color: var(--gray-1);
   }
 }
 .sidebar {
   --sidebar-item-bg-hover: var(--accent-purple-light);
   --sidebar-item-color: var(--accent-purple);
-  background-color: var(--gray-1);
+  /* Light mode: use pure white background */
+  background-color: #ffffff;
   top: var(--header-height);
   bottom: 0;
   flex-direction: column;
@@ -20,6 +23,32 @@
   height: 100vh;
   overflow-y: auto;
 
+  /* Minimal, accessible scrollbar styling */
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-a6) transparent;
+
+  /* WebKit (Chrome, Edge, Safari) */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a6);
+    border-radius: 9999px;
+    border: 2px solid transparent; /* creates inner padding for a lighter feel */
+    background-clip: content-box;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a7);
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--gray-a8);
+  }
+
   @media only screen and (min-width: 768px) {
     position: fixed;
     left: 0;
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 21af6fcb48220..0b04d59b3ed7f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -58,6 +58,7 @@ export default {
       },
       screens: {
         'lg-xl': {min: '1130px'},
+        toc: '1490px',
       },
     },
   },