diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index 89e4f59..80f94f6 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -19,14 +19,14 @@ renderer.code = function (code, lang, escaped) {
 
 // add captions to images
 renderer.image = function (href, title, text) {
-  const html = `<figure><img src="${href}" title="${title}" alt="${text}" /></figure>`;
+  const html = `<img src="${href}" title="${title}" alt="${text}" />`;
   if (title) {
-    return `<figure>
+    return `<figure class="not-prose markdown-image">
       ${html}
       <figcaption>${title}</figcaption>
       </figure>`;
   }
-  return html;
+  return `<figure class="not-prose markdown-image">${html}</figure>`;
 };
 
 const parseMarkdown = (content: string, options = {}): string => {
diff --git a/app/styles/index.css b/app/styles/index.css
index 6744b43..0487443 100644
--- a/app/styles/index.css
+++ b/app/styles/index.css
@@ -235,3 +235,15 @@ label select {
     @apply pr-0;
   }
 }
+
+.prose figure.markdown-image {
+  @apply flex items-center flex-col my-8;
+}
+
+.prose figure.markdown-image > img {
+  @apply mb-0;
+}
+
+.prose figure.markdown-image > figcaption {
+  @apply text-secondary-light dark:text-secondary-dark text-xs mt-0 text-center;
+}