diff --git a/components/article/author.vue b/components/article/author.vue
new file mode 100644
index 0000000..c7a4b6c
--- /dev/null
+++ b/components/article/author.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="flex flex-col gap-2 justify-center items-center">
+        <p class="text-gray-400 text-xs font-semibold uppercase">Written by</p>
+        <div class="flex items-center gap-4 ring-white/20 ring-1 rounded py-1 px-2">
+            <nuxt-img :preload="true" format="webp" :src="avatar" alt="Author avatar" class="size-12 rounded" />
+            <div class="flex flex-col justify-center pr-1">
+                <h2 class="text font-bold text-gray-50">{{ name }}</h2>
+                <p class="text-gray-500 text-sm">{{ handle }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+    avatar?: string;
+    name: string;
+    handle?: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 39adf6c..c5fe725 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -119,7 +119,7 @@ export default defineNuxtConfig({
         ]),
     ),
     image: {
-        domains: ["images.pexels.com"],
+        domains: ["images.pexels.com", "cpluspatch.com"],
     },
     sitemap: {
         sources: [...getRouteRenderingPaths(), "/"],
diff --git a/package.json b/package.json
index b88134c..776d32c 100644
--- a/package.json
+++ b/package.json
@@ -1,65 +1,71 @@
 {
-  "name": "@versia/blog",
-  "private": true,
-  "type": "module",
-  "description": "The source code for Versia's blog.",
-  "author": {
-    "email": "contact@cpluspatch.com",
-    "name": "Jesse Wierzbinski",
-    "url": "https://cpluspatch.com"
-  },
-  "bugs": {
-    "url": "https://github.com/versia-pub/blog/issues"
-  },
-  "license": "AGPL-3.0-only",
-  "maintainers": [
-    {
-      "email": "contact@cpluspatch.com",
-      "name": "Jesse Wierzbinski",
-      "url": "https://cpluspatch.com"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/versia-pub/blog.git"
-  },
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "lint": "bunx @biomejs/biome check .",
-    "typecheck": "bunx tsc -p ."
-  },
-  "dependencies": {
-    "@hackmd/markdown-it-task-lists": "^2.1.4",
-    "@nuxt/fonts": "^0.10.3",
-    "@nuxt/icon": "^1.10.3",
-    "@nuxt/image": "^1.9.0",
-    "@nuxtjs/seo": "^2.0.3",
-    "@nuxtjs/tailwindcss": "^6.13.1",
-    "@shikijs/markdown-it": "^1.27.2",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
-    "@vueuse/nuxt": "^12.4.0",
-    "markdown-it": "^14.1.0",
-    "markdown-it-anchor": "^9.2.0",
-    "markdown-it-container": "^4.0.0",
-    "markdown-it-toc-done-right": "^4.2.0",
-    "nuxt": "^3.15.2",
-    "nuxt-security": "^2.1.5",
-    "sharp": "^0.33.5",
-    "shiki": "^1.27.2",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@iconify-json/tabler": "^1.2.14",
-    "@types/bun": "^1.1.17",
-    "@types/markdown-it-container": "^2.0.10",
-    "tailwindcss": "^3.4.17"
-  },
-  "trustedDependencies": ["@biomejs/biome", "@parcel/watcher", "esbuild", "sharp", "vue-demi"]
+    "name": "@versia/blog",
+    "private": true,
+    "type": "module",
+    "description": "The source code for Versia's blog.",
+    "author": {
+        "email": "contact@cpluspatch.com",
+        "name": "Jesse Wierzbinski",
+        "url": "https://cpluspatch.com"
+    },
+    "bugs": {
+        "url": "https://github.com/versia-pub/blog/issues"
+    },
+    "license": "AGPL-3.0-only",
+    "maintainers": [
+        {
+            "email": "contact@cpluspatch.com",
+            "name": "Jesse Wierzbinski",
+            "url": "https://cpluspatch.com"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/versia-pub/blog.git"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "lint": "bunx @biomejs/biome check .",
+        "typecheck": "bunx tsc -p ."
+    },
+    "dependencies": {
+        "@hackmd/markdown-it-task-lists": "^2.1.4",
+        "@nuxt/fonts": "^0.10.3",
+        "@nuxt/icon": "^1.10.3",
+        "@nuxt/image": "^1.9.0",
+        "@nuxtjs/seo": "^2.0.3",
+        "@nuxtjs/tailwindcss": "^6.13.1",
+        "@shikijs/markdown-it": "^1.27.2",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "@vueuse/nuxt": "^12.4.0",
+        "markdown-it": "^14.1.0",
+        "markdown-it-anchor": "^9.2.0",
+        "markdown-it-container": "^4.0.0",
+        "markdown-it-toc-done-right": "^4.2.0",
+        "nuxt": "^3.15.2",
+        "nuxt-security": "^2.1.5",
+        "sharp": "^0.33.5",
+        "shiki": "^1.27.2",
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^1.9.4",
+        "@iconify-json/tabler": "^1.2.14",
+        "@types/bun": "^1.1.17",
+        "@types/markdown-it-container": "^2.0.10",
+        "tailwindcss": "^3.4.17"
+    },
+    "trustedDependencies": [
+        "@biomejs/biome",
+        "@parcel/watcher",
+        "esbuild",
+        "sharp",
+        "vue-demi"
+    ]
 }
diff --git a/pages/articles/[...path].vue b/pages/articles/[...path].vue
index 7f9c930..0660c9e 100644
--- a/pages/articles/[...path].vue
+++ b/pages/articles/[...path].vue
@@ -3,10 +3,12 @@
         <Title v-if="post.title" :created_at="post.created_at" :title="post.title" />
         <Image v-if="post.image" :image="post.image.url" :width="post.image.width" :height="post.image.height" :caption="post.image.credit" />
         <Content :body="body" />
+        <Author v-if="post.author" :avatar="post.author.image" :name="post.author.name" :handle="post.author.handle" class="mt-10" />
     </div>
 </template>
 
 <script lang="ts" setup>
+import Author from "~/components/article/author.vue";
 import Content from "~/components/article/content.vue";
 import Image from "~/components/article/image.vue";
 import Title from "~/components/article/title.vue";