diff --git a/src/components/common/MarkdownRender.tsx b/src/components/common/MarkdownRender.tsx
index bac1c7a8..dadaab8e 100644
--- a/src/components/common/MarkdownRender.tsx
+++ b/src/components/common/MarkdownRender.tsx
@@ -5,6 +5,7 @@ import remark from 'remark';
 import slug from 'remark-slug';
 import prismPlugin from '../../lib/remark/prismPlugin';
 import prismThemes from '../../lib/styles/prismThemes';
+import imgCaptionPlugin from '../../lib/remark/imgCaptionPlugin';
 import breaks from 'remark-breaks';
 import Typography from './Typography';
 import embedPlugin from '../../lib/remark/embedPlugin';
@@ -64,8 +65,21 @@ const MarkdownRenderBlock = styled.div`
     max-width: 100%;
     height: auto;
     display: block;
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+    margin: auto;
+  }
+
+  figure {
+    margin: 3rem 0 3rem 0;
+  }
+
+  figure > figcaption {
+    text-align: center;
+    line-height: 2;
+    font-size: 0.875rem;
+    opacity: 0.8;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   iframe {
@@ -161,6 +175,8 @@ function filter(html: string) {
       'img',
       'del',
       'input',
+      'figure',
+      'figcaption',
 
       ...katexWhitelist.tags,
     ],
@@ -237,6 +253,7 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
         .use(slug)
         .use(prismPlugin)
         .use(embedPlugin)
+        .use(imgCaptionPlugin)
         .use(remark2rehype, { allowDangerousHTML: true })
         .use(raw)
         .use(math)
diff --git a/src/components/common/Typography.tsx b/src/components/common/Typography.tsx
index 5d4e1cd3..87a1f04a 100644
--- a/src/components/common/Typography.tsx
+++ b/src/components/common/Typography.tsx
@@ -60,16 +60,6 @@ const TypographyBlock = styled.div`
     margin-bottom: 2rem;
   }
 
-  p {
-    img {
-      display: block;
-      margin: 0 auto;
-      max-width: 100%;
-      margin-top: 3rem;
-      margin-bottom: 3rem;
-    }
-  }
-
   h1 {
     font-size: 2.5rem;
   }
diff --git a/src/lib/remark/imgCaptionPlugin.ts b/src/lib/remark/imgCaptionPlugin.ts
new file mode 100644
index 00000000..8dd76abd
--- /dev/null
+++ b/src/lib/remark/imgCaptionPlugin.ts
@@ -0,0 +1,21 @@
+import visit from 'unist-util-visit';
+
+export default function imgCaptionPlugin() {
+  function transformer(tree: any) {
+    const visitor = (node: any) => {
+      try {
+        const figcaptionEle =
+          node && node.alt ? `<figcaption>${node.alt}</figcaption>` : '';
+
+        node.type = 'html';
+        node.value = `<figure><img src="${node.url}"/>${figcaptionEle}</figure>`;
+      } catch (err) {
+        console.log(err);
+      }
+    };
+
+    visit(tree, 'image', visitor);
+  }
+
+  return transformer;
+}