diff --git a/src/main/java/cc/ryanc/halo/web/controller/front/FrontCommentController.java b/src/main/java/cc/ryanc/halo/web/controller/front/FrontCommentController.java
index 8479bbec5..930e7d5a0 100644
--- a/src/main/java/cc/ryanc/halo/web/controller/front/FrontCommentController.java
+++ b/src/main/java/cc/ryanc/halo/web/controller/front/FrontCommentController.java
@@ -14,6 +14,7 @@ import cc.ryanc.halo.utils.OwoUtil;
 import cn.hutool.core.date.DateUtil;
 import cn.hutool.core.lang.Validator;
 import cn.hutool.core.util.URLUtil;
+import cn.hutool.crypto.SecureUtil;
 import cn.hutool.extra.servlet.ServletUtil;
 import cn.hutool.http.HtmlUtil;
 import lombok.extern.slf4j.Slf4j;
@@ -120,6 +121,9 @@ public class FrontCommentController {
             comment.setCommentAuthorIp(ServletUtil.getClientIP(request));
             comment.setIsAdmin(0);
             comment.setCommentAuthor(HtmlUtil.escape(comment.getCommentAuthor()));
+            if(StringUtils.isNotBlank(comment.getCommentAuthorEmail())) {
+                comment.setCommentAuthorAvatarMd5(SecureUtil.md5(comment.getCommentAuthorEmail()));
+            }
             if (comment.getCommentParent() > 0) {
                 lastComment = commentService.findCommentById(comment.getCommentParent()).get();
                 String lastContent = "<a href='#comment-id-" + lastComment.getCommentId() + "'>@" + lastComment.getCommentAuthor() + "</a>";
diff --git a/src/main/resources/templates/common/comment/_native_comment.ftl b/src/main/resources/templates/common/comment/_native_comment.ftl
index fb6138f96..b420c3cf4 100644
--- a/src/main/resources/templates/common/comment/_native_comment.ftl
+++ b/src/main/resources/templates/common/comment/_native_comment.ftl
@@ -1,220 +1,8 @@
 <@compress single_line=true>
-<link type="text/css" rel="stylesheet" href="/static/plugins/loaders/loaders.css">
 <link type="text/css" rel="stylesheet" href="/static/plugins/OwO/OwO.min.css">
+<link type="text/css" rel="stylesheet" href="/static/css/comment.css">
 <style>
-    .native-list-one-head a, .native-list-one-content a{
-        opacity: 1;!important;
-        -webkit-transition: all .15s linear;
-        -moz-transition: all .15s linear;
-        -o-transition: all .15s linear;
-        -ms-transition: all .15s linear;
-        transition: all .15s linear;
-        /* color: #424242; */
-        color: #7575d0;!important;
-    }
-    .native-comment {
-        padding: 10px;
-    }
-    .native-comment img{
-        display: inline-block;!important;
-        max-width: 100%;!important;
-        height: auto;!important;
-        margin: auto;!important;
-    }
-    .native-wrap {
-        border: 1px solid #f0f0f0!important;
-        padding: 10px!important;
-        position: relative!important;
-        margin-left: 58px!important;
-    }
-    input, textarea, button {
-        outline: none!important;
-    }
-    .comment-submit,.native-list-one-img,.native-list-one-footer-time,.native-list-one-footer-reback,.native-info,.native-nav,.ua,.native-message{
-        -webkit-user-select:none!important;
-        -moz-user-select:none!important;
-        -ms-user-select:none!important;
-        user-select:none!important;
-    }
-    .comment-header {
-        width: 100%!important;
-        line-height: 1.8!important;
-    }
-    .comment-input-who, .comment-input-email, .comment-input-website {
-        width: 33.33% !important;
-        padding: 10px 0 !important;
-        font-size: .9rem !important;
-        float: left !important;
-        border: none !important;
-        border-bottom: 1px dashed #dedede !important;
-    }
-    .comment-input:focus {
-        border-bottom: 1px dashed red !important;
-    }
-    .comment-input-content {
-        width: 100% !important;
-        min-height: 120px !important;
-        resize: vertical!important;
-        border: none!important;
-        font-size: .9rem !important;
-        padding: 10px 0!important;
-    }
-    .comment-OwO{
-        text-align: left!important;
-        vertical-align: middle!important;
-        padding-top: 10px!important;
-    }
-    .comment-footer {
-        text-align: right!important;
-        vertical-align: middle!important;
-        padding-top: 10px!important;
-    }
-    .comment-submit {
-        border-radius: 0 !important;
-        vertical-align: middle!important;
-        padding: 7px 14px!important;
-        font-size: .9rem!important;
-        cursor: pointer!important;
-        border: 1px solid #ededed!important;
-        background: #ededed!important;
-        color: #313131!important;
-        outline: none!important;
-        line-height: normal!important;
-        transition: all .3s ease-in-out!important;
-    }
-    .comment-submit:hover{
-        background-color: #fff !important;
-        border-radius: 1.9rem !important;
-        border-color: #859cff !important;
-        color: #859cff !important;
-    }
-    .native-list {
-        list-style: none!important;
-        margin-top: 0!important;
-        margin-bottom: 0!important;
-        padding: 0!important;
-    }
-    .native-list .native-list-one {
-        padding-top: 10px!important;
-        position: relative!important;
-        display: block!important;
-        transition: all .3s ease-in-out!important;
-		margin: 0 !important;
-    }
-    .native-list .native-list-one .native-list-one-img {
-        width: 2.5rem!important;
-        height: 2.5rem!important;
-        float: left!important;
-        border-radius: 50%!important;
-        margin-right: .7rem!important;
-        cursor: pointer!important;
-        -webkit-transition: 0.4s!important;
-        -webkit-transition: -webkit-transform 0.4s ease-out!important;
-        transition: transform 0.4s ease-out!important;
-        -moz-transition: -moz-transform 0.4s ease-out!important;
-    }
-    .native-list-one-img:hover{
-        transform: rotate(360deg)!important;
-    }
-    .native-list .native-list-one section {
-        overflow: hidden!important;
-        padding-bottom: 1rem!important;
-        border-bottom: 1px dashed #f5f5f5!important;
-    }
-    .native-list .native-list-one section .native-list-one-head {
-        line-height: 1.5!important;
-        margin-bottom: .5rem!important;
-        margin-top: 0!important;
-    }
-    .native-list-one-head-name {
-        font-size: .875rem!important;
-        font-weight: 700!important;
-        cursor: pointer!important;
-        text-decoration: none!important;
-        color: #555!important;
-    }
-    .native-list-one-head-admin{
-        padding: .1em 0.2em!important;
-        border-radius: 2px!important;
-        font-size: 70%!important;
-        font-weight: 700!important;
-        background-color: #87ceeb!important;
-        color: #fff!important;
-        display: inline!important;
-    }
-    .ua {
-        display: inline-block;
-        padding: .2rem .5rem!important;
-        background: #ededed!important;
-        color: #b3b1b1!important;
-        font-size: .75rem!important;
-        border-radius: .2rem!important;
-        margin-right: .3rem!important;
-    }
-    .native-list-one-content p {
-        font-size: 14px!important;
-        letter-spacing: 0!important;
-        margin: 0!important;
-        font-weight: 400!important;
-    }
-    .native-list-one-footer-time {
-        color: #b3b3b3!important;
-        font-size: .75rem!important;
-        margin-right: .875rem!important;
-    }
-    .native-list-one-footer-reback {
-        font-size: .8125rem!important;
-        color: #ef2f11!important;
-        cursor: pointer!important;
-    }
-    .native-info{
-        padding-top: 10px!important;
-        font-size: 12px!important;
-        color: #555!important;
-    }
-    .comment-avatar{
-        position: relative!important;
-        float: left!important;
-    }
-    .comment-avatar img{
-        border-radius: 100%!important;
-        -webkit-transition: 0.4s!important;
-        -webkit-transition: -webkit-transform 0.4s ease-out;
-        transition: transform 0.4s ease-out;
-        -moz-transition: -moz-transform 0.4s ease-out;
-        cursor: pointer;
-    }
-    .comment-avatar img:hover{
-        transform: rotate(360deg)!important;
-    }
-    .native-nav{
-        padding: 10px 0!important;;
-    }
-    .page-nav{
-        margin: 20px 0!important;;
-        padding: 0 10px!important;;
-        list-style: none!important;;
-        text-align: center!important;;
-    }
-    .page-nav li{
-        display: inline-block!important;
-        padding: 0 10px!important;
-    }
-    .page-nav li a{
-        text-decoration: #0a001f!important;
-    }
-    ${options.native_css?if_exists}
-    @media screen and (max-width: 560px) {
-        .comment-input-who, .comment-input-email, .comment-input-website {
-            width: 100% !important;
-        }
-        .ua{
-            display: none!important;
-        }
-        .native-list{
-            margin-left: 5px!important;
-        }
-    }
+${options.native_css?if_exists}
 </style>
 <div class="native-comment">
     <div class="comment-avatar">
@@ -375,7 +163,6 @@
                 'commentAuthorEmail': $('input[name=commentAuthorEmail]').val(),
                 'commentAuthorUrl': $('input[name=commentAuthorUrl]').val(),
                 'commentAgent': navigator.userAgent,
-                'commentAuthorAvatarMd5': md5($('input[name=commentAuthorEmail]').val()),
                 'commentParent': $('input[name=commentParent]').val()
             },
             success: function (data) {
@@ -423,4 +210,4 @@
         return '<span class="ua">'+browser+'</span><span class="ua">'+os+'</span>';
     }
 </script>
-</@compress>
\ No newline at end of file
+</@compress>