diff --git a/packages/site/docs/api/expect.mdx b/packages/site/docs/api/expect.mdx
index 450ab10..39d2d85 100644
--- a/packages/site/docs/api/expect.mdx
+++ b/packages/site/docs/api/expect.mdx
@@ -42,7 +42,7 @@ import toMatchObject from "@lest/docs/matchers/symmetric/toMatchObject.json";
 import toMatch from "@lest/docs/matchers/symmetric/toMatch.json";
 import toThrow from "@lest/docs/matchers/symmetric/toThrow.json";
 
-<FunctionRenderer {...expect}>
+<FunctionRenderer {...expect} headingLevel="h2">
 
 ```lua
 test("returns hello world", function()
diff --git a/packages/site/src/components/FunctionRenderer/FunctionRenderer.tsx b/packages/site/src/components/FunctionRenderer/FunctionRenderer.tsx
index 12a154e..6895612 100644
--- a/packages/site/src/components/FunctionRenderer/FunctionRenderer.tsx
+++ b/packages/site/src/components/FunctionRenderer/FunctionRenderer.tsx
@@ -18,18 +18,16 @@ export const FunctionRenderer: React.FC<FunctionRendererProps> = ({
 	returns = [],
 	headingLevel = "h3",
 	children,
-}) => {
-	return (
-		<section>
-			<Heading as={headingLevel} id={name}>
-				<code>
-					{name}({parameters.length > 0 && renderParameterSignature(parameters)})
-					{returns.length > 0 && `: ${renderReturnSignature(returns)}`}
-				</code>
-			</Heading>
-			<Aliases aliases={aliases} />
-			<Description text={description} />
-			{children}
-		</section>
-	);
-};
+}) => (
+	<section>
+		<Heading as={headingLevel} id={name}>
+			<code>
+				{name}({parameters.length > 0 && renderParameterSignature(parameters)})
+				{returns.length > 0 && `: ${renderReturnSignature(returns)}`}
+			</code>
+		</Heading>
+		<Aliases aliases={aliases} />
+		<Description text={description} />
+		{children}
+	</section>
+);
diff --git a/packages/site/src/theme/DocItem/index.tsx b/packages/site/src/theme/DocItem/index.tsx
new file mode 100644
index 0000000..b403ded
--- /dev/null
+++ b/packages/site/src/theme/DocItem/index.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { HtmlClassNameProvider } from "@docusaurus/theme-common";
+import { DocProvider } from "@docusaurus/theme-common/internal";
+import DocItemMetadata from "@theme/DocItem/Metadata";
+import DocItemLayout from "@theme/DocItem/Layout";
+import type { Props } from "@theme/DocItem";
+import type { TOCItem } from "@docusaurus/mdx-loader";
+
+const getLevelFromTag = (tag: string): number | undefined => {
+	const match = tag.match(/^H(?<level>\d)$/);
+
+	if (match?.groups) {
+		return Number(match.groups.level);
+	}
+};
+
+const transformHeading = (heading: Element): TOCItem => {
+	const isCode = heading.getElementsByTagName("code").length > 0;
+	const value = isCode ? `<code>${heading.textContent}</code>` : heading.textContent ?? "";
+
+	return {
+		value,
+		id: heading.id,
+		level: getLevelFromTag(heading.tagName) ?? 2,
+	};
+};
+
+export default function DocItem({ content: DocContent }: Props) {
+	const docHtmlClassName = `docs-doc-id-${DocContent.metadata.unversionedId}`;
+	const [toc, setToc] = useState<TOCItem[]>([]);
+
+	useEffect(() => {
+		const headings = document.querySelectorAll("h2, h3, h4, h5, h6");
+
+		setToc(Array.from(headings).map(transformHeading));
+	}, [DocContent]);
+
+	return (
+		<DocProvider content={{ ...DocContent, toc } as never}>
+			<HtmlClassNameProvider className={docHtmlClassName}>
+				<DocItemMetadata />
+				<DocItemLayout>
+					<DocContent />
+				</DocItemLayout>
+			</HtmlClassNameProvider>
+		</DocProvider>
+	);
+}