diff --git a/app/(main)/blog/[[...slug]]/page.tsx b/app/(main)/blog/[[...slug]]/page.tsx
index c7e92065..24890eb3 100644
--- a/app/(main)/blog/[[...slug]]/page.tsx
+++ b/app/(main)/blog/[[...slug]]/page.tsx
@@ -82,10 +82,10 @@ export default async function BlogPage({ params }: BlogPageProps) {
     notFound();
   }
 
-  const toc = await getTableOfContents(blog.content);
+  const toc = await getTableOfContents(blog.body);
 
   return (
-    <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_150px]">
+    <main className="relative py-6 lg:grid lg:grid-cols-[1fr_200px] lg:gap-10 lg:py-8">
       <div className="mx-auto w-full min-w-0">
         <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
           <div className="overflow-hidden text-ellipsis whitespace-nowrap">Blog</div>
@@ -154,7 +154,7 @@ export default async function BlogPage({ params }: BlogPageProps) {
         <DocsPager doc={blog} />
       </div>
       {blog.toc && (
-        <div className="hidden text-sm xl:block">
+        <div className="hidden text-sm lg:block">
           <div className="sticky top-[6.25rem] -mt-10 pt-4">
             <ScrollArea className="pb-10">
               <div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
diff --git a/app/(main)/docs/[[...slug]]/page.tsx b/app/(main)/docs/[[...slug]]/page.tsx
index a397194e..928a5c2c 100644
--- a/app/(main)/docs/[[...slug]]/page.tsx
+++ b/app/(main)/docs/[[...slug]]/page.tsx
@@ -73,93 +73,101 @@ export default async function DocPage({ params }: DocPageProps) {
     notFound();
   }
 
-  const toc = await getTableOfContents(doc.content);
+  const toc = await getTableOfContents(doc.body);
 
   return (
-    <main id="main-content" className="relative py-6 lg:gap-10 lg:py-8 xl:grid">
+    <>
       <DocJsonLd doc={doc} />
-      <div className="docs-content mx-auto w-full min-w-0">
-        <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
-          <ChevronRightIcon className="h-4 w-4" />
-          <NavMenu title={doc.title} />
-        </div>
-        <div className="space-y-2">
-          <h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{doc.title}</h1>
-          {doc.description && (
-            <p className="w-full text-balance text-muted-foreground">{doc.description}</p>
-          )}
-          <div
-            className={cn("flex items-center space-x-2 text-sm text-muted-foreground", {
-              invisible: !doc.labels?.length,
-            })}
-          >
-            {doc.labels?.map((label) => {
-              return (
-                <span key={label} className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}>
-                  {label}
-                </span>
-              );
-            })}
+      <main
+        id="main-content"
+        className="relative py-6 lg:grid lg:grid-cols-[1fr_200px] lg:gap-10 lg:py-8"
+      >
+        <div className="docs-content mx-auto w-full min-w-0">
+          <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
+            <ChevronRightIcon className="h-4 w-4" />
+            <NavMenu title={doc.title} />
           </div>
-        </div>
-        {doc.links ? (
-          <div className="flex items-center space-x-2 pt-4">
-            {doc.links?.doc && (
-              <Link
-                href={doc.links.doc}
-                target="_blank"
-                rel="noreferrer"
-                className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
-              >
-                Docs
-                <ExternalLinkIcon className="h-3 w-3" />
-              </Link>
+          <div className="space-y-2">
+            <h1 className={cn("scroll-m-20 text-4xl font-bold tracking-tight")}>{doc.title}</h1>
+            {doc.description && (
+              <p className="w-full text-balance text-muted-foreground">{doc.description}</p>
             )}
-            {doc.links?.api && (
+            <div
+              className={cn("flex items-center space-x-2 text-sm text-muted-foreground", {
+                invisible: !doc.labels?.length,
+              })}
+            >
+              {doc.labels?.map((label) => {
+                return (
+                  <span
+                    key={label}
+                    className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
+                  >
+                    {label}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+          {doc.links ? (
+            <div className="flex items-center space-x-2 pt-4">
+              {doc.links?.doc && (
+                <Link
+                  href={doc.links.doc}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
+                >
+                  Docs
+                  <ExternalLinkIcon className="h-3 w-3" />
+                </Link>
+              )}
+              {doc.links?.api && (
+                <Link
+                  href={doc.links.api}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
+                >
+                  API Reference
+                  <ExternalLinkIcon className="h-3 w-3" />
+                </Link>
+              )}
+            </div>
+          ) : null}
+          <DocDemoLinks docSlug={doc.slugAsParams} />
+          <div className="relative w-fit overflow-y-hidden">
+            <CarbonAds />
+          </div>
+          <div className="pb-12">
+            <Mdx code={doc.body} filePath={getMdxFilePath(doc)} />
+
+            <div className="my-3 text-right">
               <Link
-                href={doc.links.api}
+                href={`https://github.com/codse/animata/edit/main/${getMdxFilePath(doc)}`}
                 target="_blank"
                 rel="noreferrer"
-                className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
+                className="text-sm text-secondary-foreground underline"
               >
-                API Reference
-                <ExternalLinkIcon className="h-3 w-3" />
+                Edit this page on GitHub
               </Link>
-            )}
-          </div>
-        ) : null}
-        <DocDemoLinks docSlug={doc.slugAsParams} />
-        <div className="relative w-fit overflow-y-hidden">
-          <CarbonAds />
-        </div>
-        <div className="pb-12">
-          <Mdx code={doc.body} filePath={getMdxFilePath(doc)} />
-
-          <div className="my-3 text-right">
-            <Link
-              href={`https://github.com/codse/animata/edit/main/${getMdxFilePath(doc)}`}
-              target="_blank"
-              rel="noreferrer"
-              className="text-sm text-secondary-foreground underline"
-            >
-              Edit this page on GitHub
-            </Link>
+            </div>
           </div>
+          <DocsPager doc={doc} />
         </div>
-        <DocsPager doc={doc} />
-      </div>
-      {doc.toc && (
-        <div className="hidden text-sm xl:block">
-          <div className="sticky top-[6.25rem] -mt-10 pt-4">
-            <ScrollArea className="pb-10">
-              <div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
-                <DashboardTableOfContents toc={toc} />
-              </div>
-            </ScrollArea>
+        {doc.toc && (
+          <div className="hidden text-sm lg:block">
+            <div className="sticky top-[6.25rem] -mt-10 pt-4">
+              <ScrollArea className="pb-10">
+                <div className="sticky top-[6.25rem] -mt-10 h-[calc(100vh-6.25rem)] py-12">
+                  <DashboardTableOfContents toc={toc} />
+                </div>
+              </ScrollArea>
+            </div>
           </div>
-        </div>
-      )}
-    </main>
+        )}
+      </main>
+    </>
   );
 }
diff --git a/components/sidebar-nav.tsx b/components/sidebar-nav.tsx
index 918de92f..dcc2c87f 100644
--- a/components/sidebar-nav.tsx
+++ b/components/sidebar-nav.tsx
@@ -340,7 +340,7 @@ interface DocsSidebarNavItemsProps {
 
 export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProps) {
   return items?.length ? (
-    <div className="grid auto-rows-max grid-flow-row gap-0.5 text-sm">
+    <div className="grid auto-rows-max grid-flow-row gap-0.5 text-sm font-normal text-foreground">
       {items.map((item) => {
         const itemKey = item.href ?? item.title;
 
@@ -353,9 +353,7 @@ export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProp
               className={cn(
                 "group flex w-full items-center rounded-md border border-transparent px-2 py-1 capitalize hover:underline",
                 item.disabled && "cursor-not-allowed opacity-60",
-                pathname === item.href
-                  ? "bg-muted font-normal text-foreground"
-                  : "text-muted-foreground",
+                pathname === item.href ? "bg-muted" : undefined,
               )}
               target={item.external ? "_blank" : ""}
               rel={item.external ? "noreferrer" : ""}
@@ -374,7 +372,7 @@ export function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProp
           <span
             key={itemKey}
             className={cn(
-              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
+              "flex w-full cursor-not-allowed items-center rounded-md p-2 hover:underline",
               item.disabled && "cursor-not-allowed opacity-60",
             )}
           >
diff --git a/styles/docs.css b/styles/docs.css
index 218a2583..9c3f59a0 100644
--- a/styles/docs.css
+++ b/styles/docs.css
@@ -13,6 +13,11 @@
   font-feature-settings: "ss02", "ss09";
 }
 
+.docs-shell aside {
+  font-family: var(--font-sans);
+  font-weight: 400;
+}
+
 .docs-sidebar-scroller {
   scrollbar-width: thin;
   scrollbar-color: hsl(var(--border)) transparent;