diff --git a/app/components/content/ProseH2.vue b/app/components/content/ProseH2.vue
new file mode 100644
index 0000000..3fe8c07
--- /dev/null
+++ b/app/components/content/ProseH2.vue
@@ -0,0 +1,23 @@
+<template>
+  <h2
+    :id="id"
+  >
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+      class="font-semibold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
+
+<script lang="ts" setup>
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue
new file mode 100644
index 0000000..0fc4c24
--- /dev/null
+++ b/app/components/content/ProseH3.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="text-base text-neutral-700 dark:text-neutral-300">
+    <slot />
+  </h3>
+</template>
diff --git a/app/components/content/ProseP.vue b/app/components/content/ProseP.vue
new file mode 100644
index 0000000..52e9e2a
--- /dev/null
+++ b/app/components/content/ProseP.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="text-neutral-700 dark:text-neutral-300">
+    <slot />
+  </p>
+</template>
diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue
index c48f121..25ae4f3 100644
--- a/app/pages/writings/[slug].vue
+++ b/app/pages/writings/[slug].vue
@@ -24,7 +24,7 @@ useHead({
   <main v-if="post">
     <div class="flex">
       <NuxtLink
-        class="flex items-center gap-2 mb-4 group text-sm hover:text-black dark:hover:text-white duration-300"
+        class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
         to="/writings"
       >
         <UIcon