diff --git a/apps/guide/src/components/H2.tsx b/apps/guide/src/components/H2.tsx
new file mode 100644
index 000000000..dba78917e
--- /dev/null
+++ b/apps/guide/src/components/H2.tsx
@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export default function H2({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h2 className={`group ${className}`} {...props}>
+			{children}
+		</h2>
+	);
+}
diff --git a/apps/guide/src/components/H3.tsx b/apps/guide/src/components/H3.tsx
new file mode 100644
index 000000000..0b43bed7d
--- /dev/null
+++ b/apps/guide/src/components/H3.tsx
@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export default function H3({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h3 className={`group ${className}`} {...props}>
+			{children}
+		</h3>
+	);
+}
diff --git a/apps/guide/src/components/H4.tsx b/apps/guide/src/components/H4.tsx
new file mode 100644
index 000000000..c915ebba4
--- /dev/null
+++ b/apps/guide/src/components/H4.tsx
@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export default function H4({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h4 className={`group ${className}`} {...props}>
+			{children}
+		</h4>
+	);
+}
diff --git a/apps/guide/src/components/Mdx.tsx b/apps/guide/src/components/Mdx.tsx
index 4ac68c60a..534e45f6e 100644
--- a/apps/guide/src/components/Mdx.tsx
+++ b/apps/guide/src/components/Mdx.tsx
@@ -3,6 +3,9 @@
 import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import H1 from './H1';
+import H2 from './H2';
+import H3 from './H3';
+import H4 from './H4';
 import { DocsLink } from '~/components/DocsLink';
 import { ResultingCode } from '~/components/ResultingCode';
 
@@ -20,6 +23,9 @@ export function Mdx({ code }: { code: string }) {
 				DocsLink,
 				ResultingCode,
 				h1: H1,
+				h2: H2,
+				h3: H3,
+				h4: H4,
 			}}
 		/>
 	);
diff --git a/unocss.config.ts b/unocss.config.ts
index d619a0f9b..d2bb14a5b 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -52,30 +52,24 @@ export default defineConfig({
 					'place-items': 'center',
 					'scroll-margin-top': '6.5rem',
 				},
-				'.level-h1': {
-					margin: '1rem 0',
-				},
 				h2: {
+					display: 'flex',
+					'place-items': 'center',
 					'margin-top': '1.25em',
 					'scroll-margin-top': '6.5rem',
 				},
-				'.level-h2': {
-					margin: '1.25em 0',
-				},
 				h3: {
+					display: 'flex',
+					'place-items': 'center',
 					'margin-top': '1.25em',
 					'scroll-margin-top': '6.5rem',
 				},
-				'.level-h3': {
-					margin: '1.25em 0',
-				},
 				h4: {
+					display: 'flex',
+					'place-items': 'center',
 					'margin-top': '1.25em',
 					'scroll-margin-top': '6.5rem',
 				},
-				'.level-h4': {
-					margin: '1.25em 0',
-				},
 				// eslint-disable-next-line id-length
 				p: {
 					margin: '.5em 0',