diff --git a/frontend/src/assets/global.css b/frontend/src/assets/global.css
index 1eaff1765..77be29063 100644
--- a/frontend/src/assets/global.css
+++ b/frontend/src/assets/global.css
@@ -65,7 +65,12 @@ body {
  *************************/
 .vditor {
   min-height: 200px;
-} 
+}
+
+.vditor-toolbar--pin {
+  top: var(--header-height) !important;
+}
+
 /* .vditor {
   --textarea-background-color: transparent;
   border: none !important;
diff --git a/frontend/src/components/ReactionsGroup.vue b/frontend/src/components/ReactionsGroup.vue
index be996796d..2398c22be 100644
--- a/frontend/src/components/ReactionsGroup.vue
+++ b/frontend/src/components/ReactionsGroup.vue
@@ -4,7 +4,7 @@
       <div class="reactions-viewer-item-container" @click="openPanel" @mouseenter="cancelHide"
         @mouseleave="scheduleHide">
         <template v-if="displayedReactions.length">
-          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ iconMap[r.type] }}</div>
+          <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">{{ reactionEmojiMap[r.type] }}</div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
         <div v-else class="reactions-viewer-item placeholder">
@@ -24,7 +24,7 @@
     <div v-if="panelVisible" class="reactions-panel" @mouseenter="cancelHide" @mouseleave="scheduleHide">
       <div v-for="t in panelTypes" :key="t" class="reaction-option" @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }">
-        {{ iconMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
       </div>
     </div>
   </div>
@@ -34,6 +34,7 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { API_BASE_URL, toast } from '../main'
 import { getToken, authState } from '../utils/auth'
+import { reactionEmojiMap } from '../utils/reactions'
 
 let cachedTypes = null
 const fetchTypes = async () => {
@@ -54,32 +55,6 @@ const fetchTypes = async () => {
   return cachedTypes
 }
 
-const iconMap = {
-  LIKE: '❤️',
-  DISLIKE: '👎',
-  RECOMMEND: '👏',
-  ANGRY: '😡',
-  FLUSHED: '😳',
-  STAR_STRUCK: '🤩',
-  ROFL: '🤣',
-  HOLDING_BACK_TEARS: '🥹',
-  MIND_BLOWN: '🤯',
-  POOP: '💩',
-  CLOWN: '🤡',
-  SKULL: '☠️',
-  FIRE: '🔥',
-  EYES: '👀',
-  FROWN: '☹️',
-  HOT: '🥵',
-  EAGLE: '🦅',
-  SPIDER: '🕷️',
-  BAT: '🦇',
-  CHINA: '🇨🇳',
-  USA: '🇺🇸',
-  JAPAN: '🇯🇵',
-  KOREA: '🇰🇷'
-}
-
 export default {
   name: 'ReactionsGroup',
   props: {
@@ -202,7 +177,7 @@ export default {
     }
 
     return {
-      iconMap,
+      reactionEmojiMap,
       counts,
       totalCount,
       likeCount,
diff --git a/frontend/src/utils/reactions.js b/frontend/src/utils/reactions.js
new file mode 100644
index 000000000..7fa967de7
--- /dev/null
+++ b/frontend/src/utils/reactions.js
@@ -0,0 +1,25 @@
+export const reactionEmojiMap = {
+  LIKE: '❤️',
+  DISLIKE: '👎',
+  RECOMMEND: '👏',
+  ANGRY: '😡',
+  FLUSHED: '😳',
+  STAR_STRUCK: '🤩',
+  ROFL: '🤣',
+  HOLDING_BACK_TEARS: '🥹',
+  MIND_BLOWN: '🤯',
+  POOP: '💩',
+  CLOWN: '🤡',
+  SKULL: '☠️',
+  FIRE: '🔥',
+  EYES: '👀',
+  FROWN: '☹️',
+  HOT: '🥵',
+  EAGLE: '🦅',
+  SPIDER: '🕷️',
+  BAT: '🦇',
+  CHINA: '🇨🇳',
+  USA: '🇺🇸',
+  JAPAN: '🇯🇵',
+  KOREA: '🇰🇷'
+}
diff --git a/frontend/src/views/AboutPageView.vue b/frontend/src/views/AboutPageView.vue
index f36ba3489..669218787 100644
--- a/frontend/src/views/AboutPageView.vue
+++ b/frontend/src/views/AboutPageView.vue
@@ -75,13 +75,11 @@ export default {
   max-width: var(--page-max-width);
   background-color: var(--background-color);
   margin: 0 auto;
-  height: 100%;
-  overflow-y: auto;
 }
 
 .about-tabs {
   position: sticky;
-  top: 1px;
+  top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;
diff --git a/frontend/src/views/HomePageView.vue b/frontend/src/views/HomePageView.vue
index bbae20c0b..bd5a3ab13 100644
--- a/frontend/src/views/HomePageView.vue
+++ b/frontend/src/views/HomePageView.vue
@@ -433,7 +433,7 @@ export default {
 
 .topic-container {
   position: sticky;
-  top: 1px;
+  top: calc(var(--header-height) + 1px);
   z-index: 10;
   background-color: var(--background-color-blur);
   display: flex;
diff --git a/frontend/src/views/MessagePageView.vue b/frontend/src/views/MessagePageView.vue
index 03b79d59f..af15a4c2d 100644
--- a/frontend/src/views/MessagePageView.vue
+++ b/frontend/src/views/MessagePageView.vue
@@ -299,11 +299,12 @@ import BaseTimeline from '../components/BaseTimeline.vue'
 import BasePlaceholder from '../components/BasePlaceholder.vue'
 import NotificationContainer from '../components/NotificationContainer.vue'
 import { getToken, authState } from '../utils/auth'
-import { markNotificationsRead, fetchUnreadCount } from '../utils/notification'
+import { markNotificationsRead, fetchUnreadCount, notificationState } from '../utils/notification'
 import { toast } from '../main'
 import { stripMarkdownLength } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import { hatch } from 'ldrs'
+import { reactionEmojiMap } from '../utils/reactions'
 hatch.register()
 
 export default {
@@ -322,28 +323,42 @@ export default {
 
     const markRead = async id => {
       if (!id) return
+      const n = notifications.value.find(n => n.id === id)
+      if (!n || n.read) return
+      n.read = true
+      if (notificationState.unreadCount > 0) notificationState.unreadCount--
       const ok = await markNotificationsRead([id])
-      if (ok) {
-        const n = notifications.value.find(n => n.id === id)
-        if (n) n.read = true
-        await fetchUnreadCount()
+      if (!ok) {
+        n.read = false
+        notificationState.unreadCount++
+      } else {
+        fetchUnreadCount()
       }
     }
 
     const markAllRead = async () => {
       // 除了 REGISTER_REQUEST 类型消息
-      const idsToMark = notifications.value.filter(n => n.type !== 'REGISTER_REQUEST').map(n => n.id)
+      const idsToMark = notifications.value
+        .filter(n => n.type !== 'REGISTER_REQUEST' && !n.read)
+        .map(n => n.id)
+      if (idsToMark.length === 0) return
+      notifications.value.forEach(n => {
+        if (n.type !== 'REGISTER_REQUEST') n.read = true
+      })
+      notificationState.unreadCount = notifications.value.filter(n => !n.read).length
       const ok = await markNotificationsRead(idsToMark)
-      if (ok) {
+      if (!ok) {
         notifications.value.forEach(n => {
-          if (n.type !== 'REGISTER_REQUEST') n.read = true
+          if (idsToMark.includes(n.id)) n.read = false
         })
         await fetchUnreadCount()
-        if (authState.role === 'ADMIN') {
-          toast.success('已读所有消息（注册请求除外）')
-        } else {
-          toast.success('已读所有消息')
-        }
+        return
+      }
+      fetchUnreadCount()
+      if (authState.role === 'ADMIN') {
+        toast.success('已读所有消息（注册请求除外）')
+      } else {
+        toast.success('已读所有消息')
       }
     }
 
@@ -364,32 +379,6 @@ export default {
       MENTION: 'fas fa-at'
     }
 
-    const reactionEmojiMap = {
-      LIKE: '❤️',
-      DISLIKE: '👎',
-      RECOMMEND: '👏',
-      ANGRY: '😡',
-      FLUSHED: '😳',
-      STAR_STRUCK: '🤩',
-      ROFL: '🤣',
-      HOLDING_BACK_TEARS: '🥹',
-      MIND_BLOWN: '🤯',
-      POOP: '💩',
-      CLOWN: '🤡',
-      SKULL: '☠️',
-      FIRE: '🔥',
-      EYES: '👀',
-      FROWN: '☹️',
-      HOT: '🥵',
-      EAGLE: '🦅',
-      SPIDER: '🕷️',
-      BAT: '🦇',
-      CHINA: '🇨🇳',
-      USA: '🇺🇸',
-      JAPAN: '🇯🇵',
-      KOREA: '🇰🇷'
-    }
-
     const fetchNotifications = async () => {
       try {
         const token = getToken()
@@ -628,6 +617,7 @@ export default {
 
 .message-page {
   background-color: var(--background-color);
+  overflow-x: hidden;
 }
 
 .message-page-header {
@@ -769,9 +759,5 @@ export default {
   .has_read_button {
     display: none;
   }
-
-  .message-page {
-    overflow-x: hidden;
-  }
 }
 </style>
diff --git a/frontend/src/views/NewPostPageView.vue b/frontend/src/views/NewPostPageView.vue
index a784ed202..93f9b4211 100644
--- a/frontend/src/views/NewPostPageView.vue
+++ b/frontend/src/views/NewPostPageView.vue
@@ -261,10 +261,8 @@ export default {
   display: flex;
   justify-content: center;
   background-color: var(--background-color);
-  height: 100%;
   padding-right: 20px;
   padding-left: 20px;
-  overflow-y: auto;
 }
 
 .new-post-form {
diff --git a/frontend/src/views/ProfileView.vue b/frontend/src/views/ProfileView.vue
index 4470100dd..672e8d463 100644
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -497,9 +497,6 @@ export default {
 
 .profile-page {
   background-color: var(--background-color);
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden; 
 }
 
 .profile-page-header {
@@ -639,7 +636,7 @@ export default {
 
 .profile-tabs {
   position: sticky;
-  top: 1px;
+  top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;