diff --git a/site/src/components/typography/H2Markdown.astro b/site/src/components/typography/H2Markdown.astro
index 528ea769..97ebf28a 100644
--- a/site/src/components/typography/H2Markdown.astro
+++ b/site/src/components/typography/H2Markdown.astro
@@ -1,8 +1,8 @@
 ---
 import H4 from './H4.astro';
-const props = Astro.props;
+const { class: className, ...props } = Astro.props;
 ---
 
-<H4 as="h2" {...props}>
+<H4 as="h2" class:list={['mt-18 [&+h3]:mt-6', className]} {...props}>
   <slot />
 </H4>
diff --git a/site/src/components/typography/H3Markdown.astro b/site/src/components/typography/H3Markdown.astro
index 016c521a..4bdb7f54 100644
--- a/site/src/components/typography/H3Markdown.astro
+++ b/site/src/components/typography/H3Markdown.astro
@@ -1,8 +1,8 @@
 ---
 import H5 from './H5.astro';
-const props = Astro.props;
+const { class: className, ...props } = Astro.props;
 ---
 
-<H5 as="h3" {...props}>
+<H5 as="h3" class:list={['mt-12', className]} {...props}>
   <slot />
 </H5>
diff --git a/site/src/components/typography/H5.astro b/site/src/components/typography/H5.astro
index 929b1e77..1774a208 100644
--- a/site/src/components/typography/H5.astro
+++ b/site/src/components/typography/H5.astro
@@ -12,7 +12,10 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(
+    clsx('text-md font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'),
+    className,
+  )}
   {...props}
 >
   <slot />