diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index b20ebba9..2fc16223 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -42,17 +42,27 @@ const userInfo = reactive<UserInfo | NonNullable<unknown>>({}) as UnwrapNestedRe
 const hideTopBar = ref<boolean>(false)
 const hoveringTopBar = ref<boolean>(false)
 
-const showChannelsPop = ref<boolean>(false)
-const showUserPanelPop = ref<boolean>(false)
-const showNotificationsPop = ref<boolean>(false)
-const showMomentsPop = ref<boolean>(false)
-const showFavoritesPop = ref<boolean>(false)
-const showUploadPop = ref<boolean>(false)
-const showHistoryPop = ref<boolean>(false)
-const showWatchLaterPop = ref<boolean>(false)
-const showMorePop = ref<boolean>(false)
+// const showChannelsPop = ref<boolean>(false)
+// const showUserPanelPop = ref<boolean>(false)
+// const showNotificationsPop = ref<boolean>(false)
+// const showMomentsPop = ref<boolean>(false)
+// const showFavoritesPop = ref<boolean>(false)
+// const showHistoryPop = ref<boolean>(false)
+// const showWatchLaterPop = ref<boolean>(false)
+// const showUploadPop = ref<boolean>(false)
+// const showMorePop = ref<boolean>(false)
 
-const momentsPopKey = ref<string>(`momentsPop[${Number(new Date())}]`)
+const popupVisible = reactive({
+  channels: false,
+  userPanel: false,
+  notifications: false,
+  moments: false,
+  favorites: false,
+  history: false,
+  watchLater: false,
+  upload: false,
+  more: false,
+})
 
 const isLogin = ref<boolean>(false)
 const unReadMessage = reactive<UnReadMessage | NonNullable<unknown>>(
@@ -71,48 +81,114 @@ const momentsPopRef = ref()
 const scrollTop = ref<number>(0)
 const oldScrollTop = ref<number>(0)
 
+function closeAllTopBarPopup(exceptionKey?: keyof typeof popupVisible) {
+  Object.keys(popupVisible).forEach((key) => {
+    if (key !== exceptionKey)
+      popupVisible[key as keyof typeof popupVisible] = false
+  })
+}
+
+// Channels
+const channels = useDelayedHover({
+  beforeEnter: () => closeAllTopBarPopup('channels'),
+  enter: () => {
+    logo.value.classList.add('activated')
+    popupVisible.channels = true
+  },
+  leave: () => {
+    logo.value.classList.remove('activated')
+    popupVisible.channels = false
+  },
+})
+
 // Avatar
 const avatar = useDelayedHover({
-  enter: () => openUserPanel(),
-  leave: () => closeUserPanel(),
+  beforeEnter: () => closeAllTopBarPopup('userPanel'),
+  enter: () => {
+    popupVisible.userPanel = true
+    avatarImg.value.classList.add('hover')
+    avatarShadow.value.classList.add('hover')
+  },
+  beforeLeave: () => {
+    popupVisible.userPanel = false
+    avatarImg.value.classList.remove('hover')
+    avatarShadow.value.classList.remove('hover')
+  },
+  leave: () => {
+    popupVisible.userPanel = false
+    avatarImg.value.classList.remove('hover')
+    avatarShadow.value.classList.remove('hover')
+  },
 })
+
 // Notifications
 const notifications = useDelayedHover({
-  enter: () => showNotificationsPop.value = true,
-  leave: () => showNotificationsPop.value = false,
+  beforeEnter: () => closeAllTopBarPopup('notifications'),
+  enter: () => {
+    popupVisible.notifications = true
+  },
+  leave: () => {
+    popupVisible.notifications = false
+  },
 })
 // Moments
 const moments = useDelayedHover({
+  beforeEnter: () => closeAllTopBarPopup('moments'),
   enter: () => {
-    showMomentsPop.value = true
+    popupVisible.moments = true
     momentsPopRef.value && momentsPopRef.value.checkIfHasNewMomentsThenUpdateMoments()
   },
-  leave: () => showMomentsPop.value = false,
+  leave: () => {
+    popupVisible.moments = false
+  },
 })
 // Favorites
 const favorites = useDelayedHover({
-  enter: () => showFavoritesPop.value = true,
-  leave: () => showFavoritesPop.value = false,
-})
-// Upload
-const upload = useDelayedHover({
-  enter: () => showUploadPop.value = true,
-  leave: () => showUploadPop.value = false,
+  beforeEnter: () => closeAllTopBarPopup('favorites'),
+  enter: () => {
+    popupVisible.favorites = true
+  },
+  leave: () => {
+    popupVisible.favorites = false
+  },
 })
 // History
 const history = useDelayedHover({
-  enter: () => showHistoryPop.value = true,
-  leave: () => showHistoryPop.value = false,
+  beforeEnter: () => closeAllTopBarPopup('history'),
+  enter: () => {
+    popupVisible.history = true
+  },
+  leave: () => {
+    popupVisible.history = false
+  },
 })
 // Watch Later
 const watchLater = useDelayedHover({
-  enter: () => showWatchLaterPop.value = true,
-  leave: () => showWatchLaterPop.value = false,
+  beforeEnter: () => closeAllTopBarPopup('watchLater'),
+  enter: () => {
+    popupVisible.watchLater = true
+  },
+  leave: () => {
+    popupVisible.watchLater = false
+  },
+})
+// Upload
+const upload = useDelayedHover({
+  beforeEnter: () => closeAllTopBarPopup('upload'),
+  enter: () => {
+    popupVisible.upload = true
+  },
+  leave: () => {
+    popupVisible.upload = false
+  },
 })
 // More
 const more = useDelayedHover({
-  enter: () => showMorePop.value = true,
-  leave: () => showMorePop.value = false,
+  beforeEnter: () => closeAllTopBarPopup(),
+  enter: () => {
+    popupVisible.more = true
+  },
+  leave: () => popupVisible.more = false,
 })
 
 watch(() => settings.value.autoHideTopBar, (newVal) => {
@@ -121,7 +197,7 @@ watch(() => settings.value.autoHideTopBar, (newVal) => {
 })
 
 watch(
-  showNotificationsPop,
+  () => popupVisible.notifications,
   (newVal, oldVal) => {
     if (newVal === oldVal)
       return
@@ -132,7 +208,7 @@ watch(
 )
 
 watch(
-  showMomentsPop,
+  () => popupVisible.moments,
   async (newVal, oldVal) => {
     if (newVal === oldVal)
       return
@@ -142,7 +218,7 @@ watch(
   },
 )
 
-watch(showFavoritesPop, (newVal, oldVal) => {
+watch(() => popupVisible.favorites, (newVal, oldVal) => {
   if (newVal === oldVal)
     return
   if (newVal) {
@@ -203,28 +279,6 @@ function handleScroll() {
   oldScrollTop.value = scrollTop.value
 }
 
-function showLogoMenuDropdown() {
-  logo.value.classList.add('activated')
-  showChannelsPop.value = true
-}
-
-function closeLogoMenuDropdown() {
-  logo.value.classList.remove('activated')
-  showChannelsPop.value = false
-}
-
-function openUserPanel() {
-  showUserPanelPop.value = true
-  avatarImg.value.classList.add('hover')
-  avatarShadow.value.classList.add('hover')
-}
-
-function closeUserPanel() {
-  showUserPanelPop.value = false
-  avatarImg.value.classList.remove('hover')
-  avatarShadow.value.classList.remove('hover')
-}
-
 async function getUserInfo() {
   try {
     const res = await browser.runtime
@@ -251,7 +305,7 @@ async function getUnreadMessageCount() {
   if (!isLogin.value)
     return
 
-  unReadMessageCount.value = 0
+  let result = 0
 
   try {
     let res
@@ -263,7 +317,7 @@ async function getUnreadMessageCount() {
       Object.entries(unReadMessage).forEach(([key, value]) => {
         if (key !== 'up') {
           if (typeof value === 'number')
-            unReadMessageCount.value += value
+            result += value
         }
       })
     }
@@ -274,31 +328,34 @@ async function getUnreadMessageCount() {
     if (res.code === 0) {
       Object.assign(unReadDm, res.data)
       if (typeof unReadDm.follow_unread === 'number')
-        unReadMessageCount.value += unReadDm.follow_unread
+        result += unReadDm.follow_unread
     }
   }
   catch (error) {
-    unReadMessageCount.value = 0
     console.error(error)
   }
+  finally {
+    unReadMessageCount.value = result
+  }
 }
 
 async function getTopBarNewMomentsCount() {
   if (!isLogin)
     return
 
-  newMomentsCount.value = 0
+  let result = 0
 
   try {
     const res = await browser.runtime.sendMessage({
       contentScriptQuery: 'getTopBarNewMomentsCount',
     })
-
-    if (typeof res.data.update_info.item.count === 'number')
-      newMomentsCount.value = res.data.update_info.item.count
+    if (res.code === 0) {
+      if (typeof res.data.update_info.item.count === 'number')
+        result = res.data.update_info.item.count
+    }
   }
-  catch {
-    newMomentsCount.value = 0
+  finally {
+    newMomentsCount.value = result
   }
 }
 
@@ -349,13 +406,12 @@ defineExpose({
 
       <div shrink-0 flex="inline xl:1 justify-center">
         <div
+          ref="channels"
           z-1 relative w-fit mr-auto
-          @mouseenter.self="showLogoMenuDropdown()"
-          @mouseleave.self="closeLogoMenuDropdown()"
         >
           <Transition name="slide-out">
             <a
-              v-if="showLogo"
+              v-show="showLogo"
               ref="logo" href="//www.bilibili.com"
               class="group logo"
               style="backdrop-filter: var(--bew-filter-glass-1)"
@@ -385,7 +441,7 @@ defineExpose({
 
           <Transition name="slide-in">
             <ChannelsPop
-              v-show="showChannelsPop"
+              v-show="popupVisible.channels"
               class="bew-popover"
               pos="!left-0 !top-70px"
               transform="!translate-x-0"
@@ -467,7 +523,7 @@ defineExpose({
               />
               <Transition name="slide-in">
                 <UserPanelPop
-                  v-if="showUserPanelPop"
+                  v-if="popupVisible.userPanel"
                   :user-info="userInfo"
                   after:h="!0"
                   class="bew-popover"
@@ -496,7 +552,7 @@ defineExpose({
               <div
                 ref="notifications"
                 class="right-side-item"
-                :class="{ active: showNotificationsPop }"
+                :class="{ active: popupVisible.notifications }"
               >
                 <template v-if="unReadMessageCount > 0">
                   <div
@@ -520,7 +576,7 @@ defineExpose({
 
                 <Transition name="slide-in">
                   <NotificationsPop
-                    v-if="showNotificationsPop"
+                    v-if="popupVisible.notifications"
                     class="bew-popover"
                   />
                 </Transition>
@@ -530,7 +586,7 @@ defineExpose({
               <div
                 ref="moments"
                 class="right-side-item"
-                :class="{ active: showMomentsPop }"
+                :class="{ active: popupVisible.moments }"
               >
                 <template v-if="newMomentsCount > 0">
                   <div
@@ -553,7 +609,7 @@ defineExpose({
                 </a>
 
                 <Transition name="slide-in">
-                  <MomentsPop v-show="showMomentsPop" :key="momentsPopKey" ref="momentsPopRef" class="bew-popover" />
+                  <MomentsPop v-show="popupVisible.moments" ref="momentsPopRef" class="bew-popover" />
                 </Transition>
               </div>
 
@@ -561,7 +617,7 @@ defineExpose({
               <div
                 ref="favorites"
                 class="right-side-item"
-                :class="{ active: showFavoritesPop }"
+                :class="{ active: popupVisible.favorites }"
               >
                 <a
                   :href="`https://space.bilibili.com/${mid}/favlist`"
@@ -574,7 +630,7 @@ defineExpose({
                 <Transition name="slide-in">
                   <KeepAlive>
                     <FavoritesPop
-                      v-if="showFavoritesPop"
+                      v-if="popupVisible.favorites"
                       ref="favoritesPopRef"
                       class="bew-popover"
                     />
@@ -586,7 +642,7 @@ defineExpose({
               <div
                 ref="history"
                 class="right-side-item"
-                :class="{ active: showHistoryPop }"
+                :class="{ active: popupVisible.history }"
               >
                 <a
                   href="https://www.bilibili.com/account/history"
@@ -597,7 +653,7 @@ defineExpose({
                 </a>
 
                 <Transition name="slide-in">
-                  <HistoryPop v-if="showHistoryPop" class="bew-popover" />
+                  <HistoryPop v-if="popupVisible.history" class="bew-popover" />
                 </Transition>
               </div>
 
@@ -605,7 +661,7 @@ defineExpose({
               <div
                 ref="watchLater"
                 class="right-side-item"
-                :class="{ active: showWatchLaterPop }"
+                :class="{ active: popupVisible.watchLater }"
               >
                 <a
                   href="https://www.bilibili.com/watchlater/#/list"
@@ -616,7 +672,7 @@ defineExpose({
                 </a>
 
                 <Transition name="slide-in">
-                  <WatchLaterPop v-if="showWatchLaterPop" class="bew-popover" />
+                  <WatchLaterPop v-if="popupVisible.watchLater" class="bew-popover" />
                 </Transition>
               </div>
 
@@ -636,7 +692,7 @@ defineExpose({
             <div
               ref="more"
               class="right-side-item"
-              :class="{ active: showMorePop }"
+              :class="{ active: popupVisible.more }"
               display="lg:!none flex"
             >
               <a title="More">
@@ -644,7 +700,7 @@ defineExpose({
               </a>
 
               <Transition name="slide-in">
-                <MorePop v-show="showMorePop" class="bew-popover" />
+                <MorePop v-show="popupVisible.more" class="bew-popover" />
               </Transition>
             </div>
 
@@ -677,7 +733,7 @@ defineExpose({
 
               <Transition name="slide-in">
                 <UploadPop
-                  v-if="showUploadPop"
+                  v-if="popupVisible.upload"
                   class="bew-popover"
                   pos="!left-auto !right-0"
                   transform="!translate-x-0"
@@ -732,7 +788,7 @@ defineExpose({
     overflow-visible
     after:content-empty
     after:opacity-100 after:w-full after:h-100px
-    after:absolute after:-top-30px after:left-1/2 after:-z-1
+    after:absolute after:top--30px after:left-1/2 after:-z-1
     after:transform after:-translate-x-1/2;
 }
 
@@ -759,8 +815,8 @@ defineExpose({
     --at-apply: relative text-$bew-text-1 flex items-center;
 
     &:not(.avatar) a {
-      --at-apply:text-xl flex items-center p-2 rounded-40px
-        duration-300;
+      --at-apply: text-xl flex items-center p-2 rounded-40px duration-300 relative z-5;
+      // --at-apply: after:content-empty after:absolute after:w-120% after:h-120% after:z-0 after:bg-yellow;
     }
 
     &.active a, &:not(.upload) a:hover {
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index 9acc3ec9..3277e43e 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -10,7 +10,7 @@ const list = reactive([
     name: t('topbar.noti_dropdown.replys'),
     url: 'https://message.bilibili.com/#/reply',
     unreadCount: 0,
-    icon: 'i-mingcute:share-forward-line',
+    icon: 'i-mingcute:chat-3-line',
   },
   {
     name: t('topbar.noti_dropdown.mentions'),
diff --git a/src/composables/useDelayedHover.ts b/src/composables/useDelayedHover.ts
index 63a2e83a..3c1b91a3 100644
--- a/src/composables/useDelayedHover.ts
+++ b/src/composables/useDelayedHover.ts
@@ -1,22 +1,41 @@
-export function useDelayedHover({ delay = 200, enter, leave }: { delay?: number, enter: Function, leave: Function }) {
+export function useDelayedHover({ enterDelay = 250, leaveDelay = 310, beforeEnter, enter, beforeLeave, leave }:
+{ enterDelay?: number, leaveDelay?: number, beforeEnter?: Function, enter: Function, beforeLeave?: Function, leave: Function }) {
   const el = ref<HTMLElement>()
 
-  let timer: any | undefined
+  let enterTimer: any | undefined
+  let leaveTimer: any | undefined
+
   function handleMouseEnter() {
-    if (timer) {
-      clearTimeout(timer)
-      timer = undefined
+    if (beforeEnter)
+      beforeEnter()
+
+    if (enterTimer) {
+      clearTimeout(enterTimer)
+      enterTimer = undefined
     }
-    timer = setTimeout(() => {
+    if (leaveTimer) {
+      clearTimeout(leaveTimer)
+      leaveTimer = undefined
+    }
+    enterTimer = setTimeout(() => {
       enter()
-    }, delay)
+    }, enterDelay)
   }
   function handleMouseLeave() {
-    if (timer) {
-      leave()
-      clearTimeout(timer)
-      timer = undefined
+    if (beforeLeave)
+      beforeLeave()
+
+    if (enterTimer) {
+      clearTimeout(enterTimer)
+      enterTimer = undefined
     }
+    if (leaveTimer) {
+      clearTimeout(leaveTimer)
+      leaveTimer = undefined
+    }
+    leaveTimer = setTimeout(() => {
+      leave()
+    }, leaveDelay)
   }
 
   watch(el, (el, _, onCleanup) => {
diff --git a/src/styles/adaptedStyles/notificationsPage.scss b/src/styles/adaptedStyles/notificationsPage.scss
index 8cad20b6..db17b533 100644
--- a/src/styles/adaptedStyles/notificationsPage.scss
+++ b/src/styles/adaptedStyles/notificationsPage.scss
@@ -33,7 +33,11 @@
 
   #link-message-container {
     z-index: 1;
+  }
 
+  // #region theme color adaption part
+  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
+  :not(fdjslfds) {
     .space-left {
       .item:hover a,
       .item.active a,
@@ -53,7 +57,18 @@
     .line-1 .like-item:hover,
     .space-right .space-right-top .title a:hover,
     .button-box .item > button.active,
-    .operate-btn {
+    .operate-btn,
+    .action-menu .menu-list a:hover,
+    .bp-popup-panel .title-ctnr .popup-title,
+    .bl-button--ghost,
+    .action-button.del-button:hover svg *,
+    .love-card .action-button:hover > svg *,
+    .content .input-section .row .emoji-btn:hover svg *,
+    .content .input-section .row .emoji-btn.active svg *,
+    .reply-card .action-button:not(.del-button):hover > svg *,
+    .at-card .action-button:not(.del-button):hover > svg *,
+    .action-button.active svg *,
+    .bili-im .left .title .back-link:hover {
       color: var(--bew-theme-color);
     }
 
@@ -64,7 +79,8 @@
       color: var(--bew-theme-color) !important;
     }
 
-    .send-btn.active {
+    .send-btn.active,
+    .bl-button--ghost:hover {
       color: white;
     }
 
@@ -75,11 +91,7 @@
     .css-o1815x .border,
     .css-o1815x .dot,
     .action-button:hover .border,
-    .action-button > .action-icon.active .border,
-    .content .input-section .row .emoji-btn:hover svg,
-    .content .input-section .row .emoji-btn.active svg,
-    .action-button:hover svg,
-    .action-button.active svg {
+    .action-button > .action-icon.active .border {
       fill: var(--bew-theme-color) !important;
     }
 
@@ -88,7 +100,9 @@
     .medal-system,
     .medal-master,
     .send-btn.active,
-    .operate-btn {
+    .operate-btn,
+    .bl-button--ghost,
+    .bl-button--ghost:hover {
       border-color: var(--bew-theme-color);
     }
 
@@ -98,6 +112,10 @@
       border-color: var(--bew-theme-color) !important;
     }
 
+    .tab-list .tab-item.active::before {
+      border-top-color: var(--bew-theme-color);
+    }
+
     .medal-admin,
     .medal-system,
     .medal-master,
@@ -105,7 +123,9 @@
     .tab-list .tab-item.active::after,
     .content .btnrow .btn.save,
     .send-button,
-    .notify-number {
+    .notify-number,
+    .bl-button--primary,
+    .bl-button--ghost:hover {
       background-color: var(--bew-theme-color);
     }
 
@@ -114,7 +134,8 @@
       background-color: var(--bew-theme-color) !important;
     }
 
-    .send-btn.active:hover {
+    .send-btn.active:hover,
+    .bl-button--primary:hover {
       background-color: var(--bew-theme-color-80);
     }
 
@@ -126,190 +147,210 @@
       filter: var(--bew-filter-icon-glow);
     }
   }
+  // #endregion
 
+  // #region dark mode adaption part
   &.dark {
     // remove background in dark mode
     #message-navbar + .container::after {
       display: none;
     }
 
-    #link-message-container {
-      .space-left {
-        .title,
-        .item a {
-          color: var(--bew-text-1);
-        }
-
-        .side-bar .icon {
-          filter: contrast(0) brightness(2);
-        }
-      }
-
-      .loading .progress {
-        background-color: transparent;
-        filter: contrast(0) brightness(2);
-      }
-
-      .space-right .space-right-top .title,
-      .space-right .line-2,
-      .line-1 .name-field,
+    .space-left {
       .title,
-      .config,
-      .radio-selector,
-      .header .tab,
-      .bili-im .list-item .name,
-      .bili-im .list-item .last-word,
-      .bili-im .message .message-content:not(.is-img),
-      .bili-im
-        .msg-notify
-        .cover-container
-        .table-container
-        .modules
-        .module
-        .detail,
-      .bili-im .core-style,
-      .detail .content,
-      .follow-btn.active,
-      .bp-emoji-box .emoji.kaomoji,
-      .bp-emoji-box2 .emoji.kaomoji,
-      .reply-textarea,
-      .ar-recommend-item__info--title {
+      .item a {
         color: var(--bew-text-1);
       }
 
-      .line-1,
-      .text-box,
-      .bottom,
-      .tip,
-      .bili-im .msg-notify .content,
-      .follow-btn.inactive,
-      .notify-wrapper .notify-text,
-      .msg-time .time,
-      .send-btn:not(.active),
-      .orginal-reply,
-      .content .input-section .row .emoji-btn,
-      .content .btnrow .btn.save.disabled,
-      .content .btnrow .btn.clear,
-      .msg-push-new__leave-message--text {
-        color: var(--bew-text-2);
-      }
-
-      .line-3,
-      .line-3 *,
-      .bili-im
-        .msg-notify
-        .cover-container
-        .table-container
-        .modules
-        .module
-        .mtitle,
-      .content .btnrow .btn.clear:hover {
-        color: var(--bew-text-3);
-      }
-
-      .divider,
-      .at-item:not(:last-child)::after,
-      .love-item:not(:last-child)::after,
-      .header,
-      .bili-im .left,
-      .bili-im .left .title,
-      .bili-im .right .title,
-      .bili-im .send-box,
-      .liked-user:not(:last-child)::after,
-      .follow-btn.active,
-      .divided-line,
-      .static-popup,
-      .send-btn:not(.active),
-      .content .input-section,
-      .content .input-section .row .emoji-btn,
-      .content .btnrow .btn.clear,
-      .reply-textarea {
-        border-color: var(--bew-border-color);
-      }
-
-      .orginal-reply {
-        border-color: var(--bew-text-2);
-      }
-
-      .space-right .space-right-top .title,
-      .card,
-      .config {
-        box-shadow: unset;
-      }
-
-      .config .config-item:not(:first-child)::before,
-      .bili-im .msg-notify hr,
-      .divider-last::before, .divider-last::after,
-      .header::after,
-      .split-line {
-        background-color: var(--bew-border-color);
-      }
-
-      .bili-im .left,
-      .bili-im .msg-notify,
-      .bili-im .msg-push-new,
-      .bili-im .message .message-content:not(.is-img),
-      .bili-im .send-box,
-      .follow-btn.inactive,
-      .follow-btn.active,
-      .notify-wrapper .notify-text,
-      .bp-emoji-box .pagination,
-      .bp-emoji-box2 .pagination,
-      .send-btn:not(.active),
-      .toggle,
-      .content .btnrow .btn.save.disabled,
-      .reply-textarea,
-      .list-item.top {
-        background-color: var(--bew-fill-1);
-      }
-
-      .bili-im .list-item.active,
-      .bili-im .list-item:hover,
-      .bp-emoji-box .emoji-cover.selected,
-      .bp-emoji-box .emoji:hover,
-      .bp-emoji-box2 .emoji-cover.selected,
-      .bp-emoji-box2 .emoji:hover {
-        background-color: var(--bew-fill-2);
-      }
-
-      .msg-push-new__leave-message {
-        background-color: var(--bew-fill-3);
-      }
-
-      .space-left,
-      .space-right,
-      .emoji-list .emoji {
-        background-color: transparent;
-      }
-
-      .link-progress-tv {
-        background-color: transparent !important;
-      }
-
-      .space-right-top .title,
-      .card,
-      .config,
-      .bili-im,
-      .bili-im .message-list {
-        background-color: var(--bew-content-solid-1);
-      }
-
-      .static-popup {
-        background-color: var(--bew-elevated-solid-1);
-      }
-
-      .follow-btn.inactive,
-      .content .btnrow .btn.save.disabled {
-        opacity: 0.6;
-      }
-
-      .action-button > .action-icon .border {
-        fill: var(--bew-text-3);
-      }
-
-      .link-progress-tv {
-        filter: invert(1) brightness(2);
+      .side-bar .icon {
+        filter: contrast(0) brightness(2);
       }
     }
+
+    .loading .progress {
+      background-color: transparent;
+      filter: contrast(0) brightness(2);
+    }
+
+    .space-right .space-right-top .title,
+    .space-right .line-2,
+    .line-1 .name-field,
+    .title,
+    .config,
+    .radio-selector,
+    .header .tab,
+    .bili-im .list-item .name,
+    .bili-im .list-item .last-word,
+    .bili-im .message .message-content:not(.is-img),
+    .bili-im
+      .msg-notify
+      .cover-container
+      .table-container
+      .modules
+      .module
+      .detail,
+    .bili-im .core-style,
+    .detail .content,
+    .follow-btn.active,
+    .bp-emoji-box .emoji.kaomoji,
+    .bp-emoji-box2 .emoji.kaomoji,
+    .reply-textarea,
+    .ar-recommend-item__info--title,
+    .action-menu .menu-list a,
+    .bp-popup-panel .content-text,
+    .tab-list,
+    .group-helper-msg-list .name {
+      color: var(--bew-text-1);
+    }
+
+    .line-1,
+    .text-box,
+    .bottom,
+    .tip,
+    .bili-im .msg-notify .content,
+    .follow-btn.inactive,
+    .notify-wrapper .notify-text,
+    .msg-time .time,
+    .send-btn:not(.active),
+    .orginal-reply,
+    .content .input-section .row .emoji-btn,
+    .content .btnrow .btn.save.disabled,
+    .content .btnrow .btn.clear,
+    .msg-push-new__leave-message--text,
+    .bp-icon-font.icon-close:before {
+      color: var(--bew-text-2);
+    }
+
+    .line-3,
+    .line-3 *,
+    .bili-im
+      .msg-notify
+      .cover-container
+      .table-container
+      .modules
+      .module
+      .mtitle,
+    .content .btnrow .btn.clear:hover {
+      color: var(--bew-text-3);
+    }
+
+    .divider,
+    .at-item:not(:last-child)::after,
+    .love-item:not(:last-child)::after,
+    .header,
+    .bili-im .left,
+    .bili-im .left .title,
+    .bili-im .right .title,
+    .bili-im .send-box,
+    .liked-user:not(:last-child)::after,
+    .follow-btn.active,
+    .divided-line,
+    .static-popup,
+    .send-btn:not(.active),
+    .content .input-section,
+    .content .input-section .row .emoji-btn,
+    .content .btnrow .btn.clear,
+    .reply-textarea,
+    .action-menu .menu-list {
+      border-color: var(--bew-border-color);
+    }
+
+    .action-menu .menu-list:before {
+      border-right-color: var(--bew-border-color);
+      border-top-color: var(--bew-border-color);
+    }
+
+    .orginal-reply {
+      border-color: var(--bew-text-2);
+    }
+
+    .space-right .space-right-top .title,
+    .card,
+    .config {
+      box-shadow: unset;
+    }
+
+    .config .config-item:not(:first-child)::before,
+    .bili-im .msg-notify hr,
+    .divider-last::before,
+    .divider-last::after,
+    .header::after,
+    .split-line {
+      background-color: var(--bew-border-color);
+    }
+
+    .bili-im .left,
+    .bili-im .msg-notify,
+    .bili-im .msg-push-new,
+    .bili-im .message .message-content:not(.is-img),
+    .bili-im .send-box,
+    .follow-btn.inactive,
+    .follow-btn.active,
+    .notify-wrapper .notify-text,
+    .bp-emoji-box .pagination,
+    .bp-emoji-box2 .pagination,
+    .send-btn:not(.active),
+    .toggle,
+    .content .btnrow .btn.save.disabled,
+    .reply-textarea,
+    .list-item.top {
+      background-color: var(--bew-fill-1);
+    }
+
+    .bili-im .list-item.active,
+    .bili-im .list-item:hover,
+    .bp-emoji-box .emoji-cover.selected,
+    .bp-emoji-box .emoji:hover,
+    .bp-emoji-box2 .emoji-cover.selected,
+    .bp-emoji-box2 .emoji:hover,
+    .action-menu .menu-list a:hover {
+      background-color: var(--bew-fill-2);
+    }
+
+    .msg-push-new__leave-message {
+      background-color: var(--bew-fill-3);
+    }
+
+    .space-left,
+    .space-right,
+    .emoji-list .emoji {
+      background-color: transparent;
+    }
+
+    .link-progress-tv {
+      background-color: transparent !important;
+    }
+
+    .space-right-top .title,
+    .card,
+    .config,
+    .bili-im,
+    .bili-im .message-list {
+      background-color: var(--bew-content-solid-1);
+    }
+
+    .static-popup,
+    .action-menu .menu-list,
+    .action-menu .menu-list:before,
+    .bp-popup-panel,
+    .group-helper-msg-list,
+    .tab-list .tab-item.active::before,
+    .group-helper-msg-list::after {
+      background-color: var(--bew-elevated-solid-1);
+    }
+
+    .follow-btn.inactive,
+    .content .btnrow .btn.save.disabled {
+      opacity: 0.6;
+    }
+
+    .action-button > .action-icon .border {
+      fill: var(--bew-text-3);
+    }
+
+    .link-progress-tv {
+      filter: invert(1) brightness(2);
+    }
   }
+  // #endregion
 }
diff --git a/src/styles/adaptedStyles/videoPage.scss b/src/styles/adaptedStyles/videoPage.scss
index 68a5c155..4aebf97b 100644
--- a/src/styles/adaptedStyles/videoPage.scss
+++ b/src/styles/adaptedStyles/videoPage.scss
@@ -8,6 +8,10 @@
     border-radius: 0 0 8px 8px;
   }
 
+  .collection-m-exp {
+    position: relative;
+  }
+
   // #region theme color adaption part
   .note-list .list-note-operation,
   .note-pc .note-container .note-header .note-operation,
@@ -30,7 +34,13 @@
     .capture-bar
     .bar-right
     .copy-link:hover,
-  .note-up .up-desc-container .desc-top .attention-btn-container:hover {
+  .note-up .up-desc-container .desc-top .attention-btn-container:hover,
+  .report-dialog
+    .vui_dialog--footer
+    .report-dialog-footer
+    .button-wrap
+    .comfirm-report:hover,
+  .collection-m-exp .bottom .btn:hover {
     background-color: var(--bew-theme-color-80);
   }
 
@@ -38,6 +48,16 @@
     background-color: var(--bew-theme-color-80) !important;
   }
 
+  .follow-dialog-wrap-exp
+    .follow-dialog-window
+    .content
+    .group-list
+    .add-group
+    .input-group
+    .submitGroup {
+    background-color: var(--bew-theme-color-10);
+  }
+
   .note-detail .note-operation .tab-action-item.is-active .tab-icon {
     color: var(--bew-theme-color);
   }
diff --git a/src/styles/adaptedStyles/watchLaterPage.scss b/src/styles/adaptedStyles/watchLaterPage.scss
index 4acbe321..8f6098f0 100644
--- a/src/styles/adaptedStyles/watchLaterPage.scss
+++ b/src/styles/adaptedStyles/watchLaterPage.scss
@@ -2,13 +2,20 @@
   // #region theme color adaption part
   // Increase the priority of the style inside by writing a non-existent selector in :not()
   :not(fdjslfds) {
-    .watch-later-list header .s-btn {
+    .watch-later-list header .s-btn,
+    .bili-dialog .con .btn-box .btn-submit,
+    .bili-dialog .con .btn-box .btn-cancel:hover {
       border-color: var(--bew-theme-color);
     }
 
+    .bili-dialog .con .btn-box .btn-submit:hover {
+      border-color: var(--bew-theme-color-80);
+    }
+
     .watch-later-list header .s-btn,
     .watch-later-list .list-box .av-item .av-about .t:hover,
-    .watch-later-list .list-box .av-item .av-about .info .user:hover {
+    .watch-later-list .list-box .av-item .av-about .info .user:hover,
+    .bili-dialog .con .btn-box .btn-cancel:hover {
       color: var(--bew-theme-color);
     }
 
@@ -16,30 +23,48 @@
       color: white;
     }
 
-    .watch-later-list header .s-btn:hover {
+    .watch-later-list header .s-btn:hover,
+    .bili-dialog .con .btn-box .btn-submit {
       background-color: var(--bew-theme-color);
     }
+
+    .bili-dialog .con .btn-box .btn-submit:hover {
+      background-color: var(--bew-theme-color-80);
+    }
+
+    .bili-dialog .con .btn-box .btn-cancel {
+      background-color: transparent;
+    }
   }
   // #endregion
 
   // #region dark mode adaption part
   &.dark {
     .watch-later-list .list-box .av-item .key,
-    .watch-later-list .list-box .av-item .av-about .t {
+    .watch-later-list .list-box .av-item .av-about .t,
+    .bili-dialog .con header,
+    .bili-dialog .con .txt {
       color: var(--bew-text-1);
     }
 
-    .watch-later-list .list-box .av-item .av-about .info .user {
+    .watch-later-list .list-box .av-item .av-about .info .user,
+    .bili-dialog .con .btn-box .btn-cancel {
       color: var(--bew-text-2);
     }
 
-    .watch-later-list .list-box .av-item .av-about {
+    .watch-later-list .list-box .av-item .av-about,
+    .bili-dialog .con header,
+    .bili-dialog .con .btn-box .btn-cancel {
       border-color: var(--bew-border-color);
     }
 
     .watch-later-list header .s-btn {
       background-color: transparent;
     }
+
+    .bili-dialog .con {
+      background-color: var(--bew-elevated-solid-1);
+    }
   }
   // #endregion
 }