diff --git a/docs/src/app/docs/[[...slug]]/page.tsx b/docs/src/app/docs/[[...slug]]/page.tsx
index 3dc81f56..c042d664 100644
--- a/docs/src/app/docs/[[...slug]]/page.tsx
+++ b/docs/src/app/docs/[[...slug]]/page.tsx
@@ -48,10 +48,8 @@ const PostLayout: PageComponent = async ({ params }) => {
           </div>
         </div>
       </nav>
-      <article className="w-full min-w-0 md:py-8">
-        <div className="w-full min-w-0 max-w-6xl px-6 py-4 md:px-12 flex flex-col">
-          <Content components={tocHeadingMdxComponents} />
-        </div>
+      <article className="w-full min-w-0 p-6 md:px-12 md:pb-12 xl:pt-12 flex flex-col">
+        <Content components={tocHeadingMdxComponents} />
       </article>
     </TocProvider>
   );
diff --git a/docs/src/components/Heading.tsx b/docs/src/components/Heading.tsx
index dbaf876f..e3447134 100644
--- a/docs/src/components/Heading.tsx
+++ b/docs/src/components/Heading.tsx
@@ -17,7 +17,7 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ id, varia
       {id && (
         <a
           href={`#${id}`}
-          className="ml-2 hidden text-slate-400 group-hover:inline group-focus:inline group-active:inline dark:text-slate-600"
+          className="ml-2 hidden text-comment group-hover:inline group-focus:inline group-active:inline"
           aria-label="Permalink for this section"
         >
           #