diff --git a/layout/common/article.jsx b/layout/common/article.jsx
index 02e4d4c..bea3ca0 100644
--- a/layout/common/article.jsx
+++ b/layout/common/article.jsx
@@ -4,6 +4,7 @@ const { toMomentLocale } = require('hexo/lib/plugins/helper/date');
 const Share = require('./share');
 const Donates = require('./donates');
 const Comment = require('./comment');
+const Related = require('./related');
 const ArticleLicensing = require('hexo-component-inferno/lib/view/misc/article_licensing');
 
 /**
@@ -92,20 +93,25 @@ module.exports = class extends Component {
                     {!index && article && article.licenses && Object.keys(article.licenses)
                         ? <ArticleLicensing.Cacheable page={page} config={config} helper={helper} /> : null}
                     {/* Tags */}
-                    {!index && page.tags && page.tags.length ? <div class="article-tags is-size-7 mb-4">
-                        <span class="mr-2">#</span>
-                        {page.tags.map(tag => {
-                            return <a class="link-muted mr-2" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;
+                    <hr style="height:1px;margin:1rem 0"/>
+                    <div className="level is-mobile is-flex">
+                    {page.tags && page.tags.length ? <div class="article-tags is-size-7 is-uppercase">
+                        <i class="fas fa-tags has-text-grey"></i>&nbsp;
+                        {page.tags.map((tag, index) => {
+                            return <a class="link-muted" rel="tag" href={url_for(tag.path)}>{tag.name}{index !== page.tags.length-1? ', ':''}</a>;
                         })}
                     </div> : null}
                     {/* "Read more" button */}
-                    {index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a> : null}
+                    {index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}><i class="fas fa-book-reader has-text-grey"></i>&nbsp;&nbsp;{__('article.more')}</a> : null}
+                    </div>
                     {/* Share button */}
                     {!index ? <Share config={config} page={page} helper={helper} /> : null}
                 </article>
             </div>
             {/* Donate button */}
-            {!index ? <Donates config={config} helper={helper} /> : null}
+            {/* {!index ? <Donates config={config} helper={helper} /> : null} */}
+            {/* Related Post*/}
+            {!index ? <Related config={config} page={page} helper={helper}/> :null}
             {/* Post navigation */}
             {!index && (page.prev || page.next) ? <nav class="post-navigation mt-4 level is-mobile">
                 {page.prev ? <div class="level-start">
diff --git a/layout/common/related.jsx b/layout/common/related.jsx
new file mode 100644
index 0000000..6617565
--- /dev/null
+++ b/layout/common/related.jsx
@@ -0,0 +1,23 @@
+const logger = require('hexo-log')();
+const { Component } = require('inferno');
+const view = require('hexo-component-inferno/lib/core/view');
+
+
+module.exports = class extends Component {
+    render() {
+        const { config, helper, page } = this.props;
+        const { __, popular_posts } = helper;
+        let relatedText = popular_posts( {} , page )
+        if (!relatedText || relatedText.length == 0) {
+            return null;
+        }
+        return <div class="card">
+            <div class="card-content">
+                <h2>相关文章</h2>
+                <span
+            dangerouslySetInnerHTML={{__html:(relatedText) }}>
+            </span>
+            </div>
+        </div>;
+    }
+};
\ No newline at end of file
diff --git a/source/css/style.styl b/source/css/style.styl
index b9cd775..e02e3ab 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,3 +1,4 @@
+
 // Base CSS framework
 @import '../../include/style/base'
 // Helper classes & mixins
@@ -16,4 +17,5 @@
 @import '../../include/style/donate'
 @import '../../include/style/plugin'
 @import '../../include/style/responsive'
-@import 'xry'
+
+@import 'xry'
\ No newline at end of file