diff --git a/website/src/components/docs/components/headers/Header1.tsx b/website/src/components/docs/components/headers/Header1.tsx
new file mode 100644
index 00000000..f08e8f1e
--- /dev/null
+++ b/website/src/components/docs/components/headers/Header1.tsx
@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+
+import { useNodeText } from '../../../../util/node.util';
+import useAnchor from './hooks/useAnchor';
+
+import type { ReactNode } from 'react';
+
+interface Header1Props {
+  children?: ReactNode;
+}
+
+const Header1 = ({ children }: Header1Props) => {
+  const textContent = useNodeText(children);
+  const anchor = useAnchor(textContent);
+
+  return (
+    <Typography variant="h1" id={anchor}>
+      {children}
+    </Typography>
+  );
+};
+
+export default Header1;
diff --git a/website/src/pages/docs/[doc].tsx b/website/src/pages/docs/[doc].tsx
index f79da48e..cee256f9 100644
--- a/website/src/pages/docs/[doc].tsx
+++ b/website/src/pages/docs/[doc].tsx
@@ -8,6 +8,7 @@ import remarkGfm from 'remark-gfm';
 import Anchor from '../../components/docs/components/Anchor';
 import Blockquote from '../../components/docs/components/Blockquote';
 import CodeTabs from '../../components/docs/components/CodeTabs';
+import Header1 from '../../components/docs/components/headers/Header1';
 import Header2 from '../../components/docs/components/headers/Header2';
 import Header3 from '../../components/docs/components/headers/Header3';
 import Header4 from '../../components/docs/components/headers/Header4';
@@ -103,10 +104,11 @@ const Docs = ({
       <StyledDocsView className={theme.palette.mode}>
         <StyledDocsContentWrapper>
           <DocsContent>
-            <Typography variant="h1">{title}</Typography>
+            <Header1>{title}</Header1>
             <MDXRemote
               {...source}
               components={{
+                h1: Header1,
                 h2: Header2,
                 h3: Header3,
                 h4: Header4,