diff --git a/src/main/java/xin/wenjing/halo/entity/Settings.java b/src/main/java/xin/wenjing/halo/entity/Settings.java
index 8e93495..6060d92 100644
--- a/src/main/java/xin/wenjing/halo/entity/Settings.java
+++ b/src/main/java/xin/wenjing/halo/entity/Settings.java
@@ -20,5 +20,4 @@ public class Settings {
     private boolean enableLatex;
     private boolean enableCustomCss;
     private String customCss;
-
 }
diff --git a/src/main/java/xin/wenjing/halo/service/ArtalkRouter.java b/src/main/java/xin/wenjing/halo/service/ArtalkRouter.java
index 17319f9..70b78c8 100644
--- a/src/main/java/xin/wenjing/halo/service/ArtalkRouter.java
+++ b/src/main/java/xin/wenjing/halo/service/ArtalkRouter.java
@@ -1,11 +1,41 @@
 package xin.wenjing.halo.service;
 
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.reactive.function.server.RouterFunction;
+import org.springframework.web.reactive.function.server.RouterFunctions;
+import org.springframework.web.reactive.function.server.ServerRequest;
+import org.springframework.web.reactive.function.server.ServerResponse;
+import reactor.core.publisher.Mono;
+import run.halo.app.theme.TemplateNameResolver;
+import java.util.HashMap;
+import java.util.List;
+
 /**
  * 功能描述
  * 提供所有评论展示的路由
  * @author: dreamChaser
  * @date: 2024年06月05日 14:54
  */
+@Slf4j
+@Configuration(proxyBeanMethods = false)
+@RequiredArgsConstructor
 public class ArtalkRouter {
 
+
+    private final TemplateNameResolver templateNameResolver;
+
+    @Bean
+    RouterFunction<ServerResponse> momentRouterFunction() {
+        return RouterFunctions.route().GET("/new_comment",this::renderMomentPage).build();
+    }
+
+    Mono<ServerResponse> renderMomentPage(ServerRequest request) {
+        var model = new HashMap<String, Object>();
+        model.put("new_comment", List.of());
+        return templateNameResolver.resolveTemplateNameOrDefault(request.exchange(), "new_comment")
+            .flatMap(templateName -> ServerResponse.ok().render(templateName, model));
+    }
 }
diff --git a/src/main/resources/static/new_comment.css b/src/main/resources/static/new_comment.css
new file mode 100644
index 0000000..8738747
--- /dev/null
+++ b/src/main/resources/static/new_comment.css
@@ -0,0 +1,326 @@
+@charset "UTF-8";
+:root {
+    --style-border: 1px solid #e3e8f7;
+    --style-border-always: 1px solid #e3e8f7;
+    --heo-radius-full: 50px;
+    --heo-vip: #e5a80d;
+    --heo-shadow-border: 0 8px 16px -4px #2c2d300c;
+}
+*{
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    height: 100%;
+    font-size: 20px;
+}
+
+body {
+    position: relative;
+    min-height: 100%;
+    color: #18171d;
+    font-size: 16px;
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
+    line-height: 2;
+    -webkit-tap-highlight-color: transparent;
+    margin: 0px;
+}
+
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    position: relative;
+    margin: 1rem 0px 0.7rem;
+    color: #1f2d3d;
+    font-weight: 700;
+}
+
+h1 code,
+h2 code,
+h3 code,
+h4 code,
+h5 code,
+h6 code {
+    font-size: inherit !important;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+
+.layout {
+    display: flex;
+    margin: 0px auto;
+    padding: 2rem 15px;
+    max-width: 1200px;
+}
+
+@media screen and (max-width: 900px) {
+    .layout {
+        -webkit-box-orient: vertical;
+        flex-direction: column;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .layout {
+        padding: 1rem 5px;
+    }
+}
+
+@media screen and (min-width: 2000px) {
+    .layout {
+        max-width: 1500px;
+    }
+}
+
+
+@media screen and (min-width: 2000px) {
+    .layout.hide-aside {
+        max-width: 1300px;
+    }
+}
+
+.layout.hide-aside > div {
+    width: 100% !important;
+}
+
+
+/* 最小网页大小 */
+#page {
+    min-height: calc(100vh - 464px);
+}
+
+/* 滚动条 */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 6px
+}
+
+::-webkit-scrollbar-thumb {
+    background: #f2b94b23;
+    border-radius: 8px;
+    cursor: pointer;
+    border: 2px solid #18171d
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #f2b94b23;
+    opacity: 1;
+    display: block!important
+}
+
+::-webkit-scrollbar-track {
+    background-color: #18171d
+}
+/* 网页最大宽度 */
+.layout.hide-aside {
+    max-width: 1400px;
+}
+/* 一行内容 */
+
+.author-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 1rem;
+}
+
+/* 一行内容，纵向组件 */
+
+.author-content-item-group.column {
+    display: flex;
+    flex-direction: column;
+    width: 49%;
+    justify-content: space-between;
+}
+
+/* 一行内容，横向组件 */
+
+.author-content-item {
+    width: 49%;
+    border-radius: 24px;
+    border: var(--style-border-always);
+    box-shadow: var(--heo-shadow-border);
+    position: relative;
+    padding: 1rem 2rem;
+    overflow: hidden;
+    opacity: 0.9;
+}
+
+.author-content-item.single {
+    width: 100%;
+}
+
+.author-content-item .author-content-item-title {
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 1;
+}
+
+.author-content-item .author-content-item-tips {
+    opacity: 0.8;
+    font-size: 0.6rem;
+    margin-bottom: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+    .author-content-item {
+        width: 100% !important;
+        margin-top: 1rem;
+        padding: 1rem;
+    }
+
+    .author-content-item-group.column {
+        width: 100% !important;
+    }
+
+    .author-content {
+        margin-top: 0rem;
+    }
+}
+
+.author-content-item.single.reward .author-content-item .author-content-item-title {
+    color: #FF3842;
+}
+
+#comments-page {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    min-height: 100px;
+    width: 100%;
+    margin: 1.5rem auto 0;
+}
+
+#comments-page .comment-card {
+    position: relative;
+    width: calc(100% / 4 - 9px);
+    border-radius: 12px;
+    border: 1px solid #e3e8f7;
+    padding: 14px;
+    cursor: pointer;
+    transition: .3s;
+    overflow: hidden;
+    box-shadow: 0 8px 16px -4px #2c2d300c;
+    background: #f8f6f5
+}
+
+span.isBlogger {
+    background: #425AEF;
+    color: white;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 1;
+    display: inline-flex;
+    padding: 3px 4px 4px 4.5px;
+    border-radius: 3px;
+    margin-left: 5px;
+    letter-spacing: 1px;
+}
+
+@media screen and (max-width: 900px) {
+    #comments-page .comment-card {
+        width: calc(100% / 2 - 6px)
+    }
+}
+
+@media screen and (max-width: 768px) {
+    #comments-page .comment-card {
+        width: 100%
+    }
+}
+
+#comments-page .comment-card:hover {
+    border-color: #425AEF;
+}
+
+#comments-page .comment-card:hover .comment-article {
+    opacity: 1;
+    top: 0
+}
+
+#comments-page .comment-card .comment-info {
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    margin-bottom: 8px;
+    border-bottom: 1px dashed #97bcfb
+}
+
+#comments-page .comment-card .comment-info img {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 50%;
+    margin: 0 !important
+}
+
+#comments-page .comment-card .comment-info .comment-information {
+    display: flex;
+    flex-direction: column;
+    margin-left: 12px;
+    line-height: 1.5
+}
+
+#comments-page .comment-card .comment-info .comment-information .comment-user {
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 15px
+}
+
+#comments-page .comment-card .comment-info .comment-information .comment-author::after {
+    content: "\f3a5";
+    font-family: "Font Awesome 6 Free" !important;
+    padding-left: 6px;
+    padding-top: 5px;
+    font-size: 14px;
+    color: #fdc22d
+}
+
+#comments-page .comment-card .comment-info .comment-information .comment-time {
+    opacity: .8;
+    font-size: 15px
+}
+
+#comments-page .comment-card .comment-info .comment-content {
+    margin: 8px 5px 0
+}
+
+.comment-article,
+.comment-content {
+    transition: .3s;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-height: 1.7;
+    font-weight: 400
+}
+
+.comment-article {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    background: #425AEF;
+    color: #fff;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    opacity: 0;
+    text-align: center
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/new_comment.html b/src/main/resources/templates/new_comment.html
new file mode 100644
index 0000000..2547a7c
--- /dev/null
+++ b/src/main/resources/templates/new_comment.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+    <title>最新评论</title>
+    <link rel="stylesheet" href="/plugins/plugin-artalk/assets/static/new_comment.css" />
+</head>
+
+<body>
+    <main class="layout hide-aside" id="content-inner">
+        <div id="page">
+            <div id="about-page">
+                <div class="author-content">
+                    <div class="author-content-item single" id="about-newcomment">
+                        <div class="author-content-item-tips">最近评论</div>
+                        <span class="author-content-item-title">[[${rewardTopTitle}]]</span>
+                        <div class="author-content-item-description">
+                            打造开放共享友好的交流氛围
+                        </div>
+                        <div id="comments-page">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    </div>
+    <script type="text/javascript" data-pjax>
+        comments();
+        async function comments() {
+            fetch("/apis/halo.wenjing.xin/v1alpha1/artalk/listAllComments").then(res => res.json()).then(d => {
+                const artalk = d.data.map(function (e) {
+                    return {
+                        'comment': changeContents(e.content_marked),
+                        'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
+                        'nick': e.nick,
+                        'url': e.page_key,
+                        'barrageBlogger': e.email_encrypted,
+                        'id': 'atk-comment-' + e.id,
+                        'created': e.date,
+                    }
+                })
+                renderer(artalk)
+            }).catch((err) => { console.log(err); })
+        }
+        function renderer(data) {
+            let html = "";
+            data.forEach(item => {
+                const a = new Date(item.created),
+                        c = `${a.getFullYear().toString().slice(-2)}-${a.getMonth() + 1}-${a.getDate()} ${a.getHours()}:${a.getMinutes()}:${a.getSeconds()}`;
+                html += `<div class="comment-card" title="${item.comment}">
+                                <div class="comment-info no-lightbox">
+                                    <img src="${item.avatar}" alt='${item.nick}'/>
+                                    <div class="comment-information">
+                                            <span class="comment-user">${item.nick}</span>
+                                            <span class="comment-time">${c}</span>
+                                    </div>
+                                </div>
+                                <div class="comment-content">${item.comment}</div>
+                            </div>`
+            })
+            document.getElementById('comments-page').innerHTML = html
+        }
+        function changeContents(content) {
+            if (content === '') return content
+            content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
+            content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
+            content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
+            content = content.replace(/<[^>]+>/g, "") // remove html tag
+
+            if (content.length > 150) {
+                content = content.substring(0, 150) + '...'
+            }
+            return content
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file