diff --git a/templates/assets/css/main.css b/templates/assets/css/main.css
index 465fd779..fdc902a6 100644
--- a/templates/assets/css/main.css
+++ b/templates/assets/css/main.css
@@ -11627,7 +11627,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 #bber .timeline ul li.item {
     position: relative;
-    width: 32%;
+    width: 30%;
     border: var(--style-border-always);
     border-radius: 12px;
     padding: 1rem 1rem 0.5rem;
@@ -11723,7 +11723,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 
 /* 每条动态 */
 #bber div.bber-content {
-    display: flex;
+    /*display: flex;*/
     flex-direction: initial;
     flex-wrap: wrap;
     border-radius: 12px;
@@ -11910,7 +11910,7 @@ figure.gallery-group:hover .gallery-group-name::after {
 }
 
 /* 内容 */
-#bber .bber-content .datacont {
+#bber .bber-content p {
     order: 0;
     font-size: 0.8rem;
     font-weight: bold;
@@ -11922,6 +11922,7 @@ figure.gallery-group:hover .gallery-group-name::after {
     display: flex;
     flex-direction: column;
     text-align: justify;
+    overflow-wrap: break-word;
 }
 
 /* 设备 */
diff --git a/templates/moments.html b/templates/moments.html
index c2411941..94893fe9 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -31,14 +31,16 @@
                 <!--                <script data-pjax="" defer="" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>-->
                 <!--                <script data-pjax="" defer="" src="https://cdn.zhheo.com/public/aplayer/Meting2.min.js"></script>-->
                 <!--                <link href="https://cdn.zhheo.com/public/aplayer/APlayer.min.css" rel="stylesheet external nofollow">-->
+
                 <div id="bber">
                     <section class="timeline page-1">
-                        <ul class="list" id="waterfall">
-                            <li class="item" th:each="moment : ${moments.items}" th:with="content=${moment.spec.content}">
-                                <div class="bber-content">
-                                    <p class="datacont" th:if="${not #strings.isEmpty(content.html)}" th:utext="${content.html}"></p>
-                                </div>
-                                <th:block th:each="momentItem : ${content.medium}" th:if="${not #lists.isEmpty(content.medium)}">
+                        <ul class="list show" id="waterfall">
+                            <li class="item" th:each="moment : ${moments.items}"
+                                th:with="content=${moment.spec.content}">
+                                <div class="bber-content" th:if="${not #strings.isEmpty(content.html)}"
+                                     th:utext="${content.html}"></div>
+                                <th:block th:each="momentItem : ${content.medium}"
+                                          th:if="${not #lists.isEmpty(content.medium)}">
 
                                     <div class="bber-content-img" th:if="${momentItem.type.name == 'PHOTO'}">
                                         <img class="bber-content-image-self entered loaded"
@@ -66,6 +68,15 @@
                         </ul>
                     </section>
                     <!--  分页还没写 -->
+                    <div th:if="${moments.hasPrevious() || moments.hasNext()}">
+                        <a th:href="@{${moments.prevUrl}}">
+                            <span>上一页</span>
+                        </a>
+                        <span th:text="${moments.page}"></span>
+                        <a th:href="@{${moments.nextUrl}}">
+                            <span>下一页</span>
+                        </a>
+                    </div>
                 </div>
                 <script>heo.reflashEssayWaterFall();</script>
                 <hr/>