diff --git a/src/components/MdxComponents.tsx b/src/components/MdxComponents.tsx
index 2350f93a7..a7cccaea8 100644
--- a/src/components/MdxComponents.tsx
+++ b/src/components/MdxComponents.tsx
@@ -53,6 +53,15 @@ const MdxComponents = (version?: string) => {
     h3: (props: any) => {
       return <Heading level="3" id={props.id} props={props} />;
     },
+    h4: (props: any) => {
+      return <Heading level="4" id={props.id} props={props} />;
+    },
+    h5: (props: any) => {
+      return <Heading level="5" id={props.id} props={props} />;
+    },
+    h6: (props: any) => {
+      return <Heading level="6" id={props.id} props={props} />;
+    },
     img: (props: any) => {
       return <img className="rounded-xl" {...props} />;
     },
diff --git a/src/components/mdx/Heading.tsx b/src/components/mdx/Heading.tsx
index 10b41e022..86a420bcf 100644
--- a/src/components/mdx/Heading.tsx
+++ b/src/components/mdx/Heading.tsx
@@ -58,13 +58,13 @@ function Anchor({id, children}: {id: string; children: ReactNode}) {
 }
 
 interface HeadingProps {
-	level?: '2' | '3';
+	level?: '2' | '3' | '4' | '5' | '6';
 	id: string;
 	props: any;
 }
 
 export function Heading({level = '2', id, props}: HeadingProps) {
-	let Component = `h${level}` as 'h2' | 'h3';
+	let Component = `h${level}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 	return (
 		<Component {...props}>
 			<Anchor id={id}>{props.children}</Anchor>