diff --git a/components/content/ProseH1.vue b/components/content/ProseH1.vue
index 504cd7b169a3e7415326ff175fcedcbfca4d7e90..25ea7b5a7043682391fc69ad403b2ff243e66c77 100644
--- a/components/content/ProseH1.vue
+++ b/components/content/ProseH1.vue
@@ -1,5 +1,6 @@
 <template>
-  <h1 class="text-h3 font-weight-bold" :id="id">
+  <span :id="id" class="anchor"></span>
+  <h1 class="text-h3 font-weight-bold my-6">
     <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
       <slot />
     </a>
@@ -21,4 +22,10 @@ const generate =
 a {
   color: inherit;
 }
+anchor {
+  display: block;
+  position: relative;
+  top: -64px;
+  visibility: hidden;
+}
 </style>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
index 964db2b72f24d40a020e4fee040e912b7e366fa8..6461c9ced25a8bffed38b5be9eebc5bb5402d7ee 100644
--- a/components/content/ProseH2.vue
+++ b/components/content/ProseH2.vue
@@ -1,5 +1,6 @@
 <template>
-  <h2 class="text-h4 font-weight-bold" :id="id">
+  <span :id="id" class="anchor"></span>
+  <h2 class="text-h4 font-weight-bold my-4">
     <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
       <slot />
     </a>
@@ -19,4 +20,10 @@ const generate =
 a {
   color: inherit;
 }
+.anchor {
+  display: block;
+  position: relative;
+  top: -64px;
+  visibility: hidden;
+}
 </style>
diff --git a/components/content/ProseH3.vue b/components/content/ProseH3.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5d1e79450e5a1b531fbeba0fdb767fdd428c56b9
--- /dev/null
+++ b/components/content/ProseH3.vue
@@ -0,0 +1,29 @@
+<template>
+  <span :id="id" class="anchor"></span>
+  <h3 class="text-h6 font-weight-bold my-3">
+    <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { useRuntimeConfig } from "#imports";
+defineProps<{ id?: string }>();
+const heading = 3;
+const { anchorLinks } = useRuntimeConfig().public.content;
+const generate =
+  anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
+</script>
+<style scoped>
+a {
+  color: inherit;
+}
+.anchor {
+  display: block;
+  position: relative;
+  top: -64px;
+  visibility: hidden;
+}
+</style>