diff --git a/src/components/docs-breadcrumbs.jsx b/src/components/docs-breadcrumbs.jsx
index 47b3eb3c..ead1de30 100644
--- a/src/components/docs-breadcrumbs.jsx
+++ b/src/components/docs-breadcrumbs.jsx
@@ -34,7 +34,7 @@ export default function DocsBreadcrumbs({ routes }) {
 	const currentPath = router.pathname;
 	const breadcrumbLinks = generateBreadcrumbs(routes, currentPath);
 
-	if (breadcrumbLinks.length === 0 || currentPath === "/docs") {
+	if (breadcrumbLinks.length === 0) {
 		return;
 	}
 
@@ -42,6 +42,10 @@ export default function DocsBreadcrumbs({ routes }) {
 	homeRoute.title = "Docs";
 	breadcrumbLinks.unshift(homeRoute);
 
+	if (currentPath === "/docs") {
+		breadcrumbLinks.shift(0);
+	}
+
 	return (
 		<div className="mt-4 mb-7 md:mt-2 md:mb-10">
 			<div className="flex flex-wrap items-center gap-2 text-sm">
diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx
index b536f77e..3a2a6886 100644
--- a/src/components/docs-layout.jsx
+++ b/src/components/docs-layout.jsx
@@ -58,14 +58,14 @@ export default function DocumentPage({ children, metadata }) {
 					/>
 				</DisclosurePanel>
 			</Disclosure>
-			<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 overflow-scroll md:grid">
-				<nav className="sticky top-[84px] hidden h-min w-60 overflow-y-auto p-6 md:block">
+			<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid">
+				<nav className="sticky top-[84px] hidden h-[calc(100vh-84px)] w-60 overflow-y-auto p-6 md:block">
 					<DocsNav routes={routes} />
 				</nav>
-				<nav className="sticky top-[84px] order-last hidden h-min w-[240px] overflow-y-auto p-6 lg:block">
+				<nav className="sticky top-[84px] order-last hidden h-[calc(100vh-84px)] w-[240px] overflow-y-auto p-6 lg:block">
 					<OnThisPageNav>{children}</OnThisPageNav>
 				</nav>
-				<article className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-24">
+				<article className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-8">
 					<DocsBreadcrumbs routes={flatRoutes} />
 					{metadata?.title && (
 						<h1 className="article-title break-words">{metadata.title}</h1>
diff --git a/src/components/on-this-page-nav.jsx b/src/components/on-this-page-nav.jsx
index 2c5d8784..b804fd2d 100644
--- a/src/components/on-this-page-nav.jsx
+++ b/src/components/on-this-page-nav.jsx
@@ -47,8 +47,8 @@ export default function OnThisPageNav({ children }) {
 
 	return (
 		<>
-			<h2 className="font-semibold">On This Page</h2>
-			{headings.length > 0 ? (
+			<h2 className="py-2 font-semibold">On This Page</h2>
+			{headings.length > 0 && (
 				<ul className="mt-4 text-sm text-gray-400">
 					{headings.map((heading) => (
 						<li
@@ -68,8 +68,6 @@ export default function OnThisPageNav({ children }) {
 						</li>
 					))}
 				</ul>
-			) : (
-				<p>Loading...</p>
 			)}
 		</>
 	);