diff --git a/src/components/Topbar/MomentsDropdown.vue b/src/components/Topbar/MomentsDropdown.vue
index 067c0f3f..8d5366a8 100644
--- a/src/components/Topbar/MomentsDropdown.vue
+++ b/src/components/Topbar/MomentsDropdown.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { language } from '~/logic'
-import { getUserID, calcTimeSince } from '~/utils'
-import { MomentItem, MomentType, LanguageType } from '~/types'
+import { calcTimeSince, getUserID } from '~/utils'
+import type { MomentItem } from '~/types'
+import { LanguageType, MomentType } from '~/types'
 
 export default defineComponent({
   data() {
@@ -38,7 +39,8 @@ export default defineComponent({
   },
   watch: {
     selectedTab(newVal: number, oldVal: number) {
-      if (newVal === oldVal) return
+      if (newVal === oldVal)
+        return
 
       this.scrollToTop(this.$refs.momentsWrap as HTMLElement, 300)
       this.moments = []
@@ -73,7 +75,8 @@ export default defineComponent({
   methods: {
     onClickTab(tabId: number) {
       // Prevent changing tab when loading, cuz it will cause a bug
-      if (this.isLoading) return
+      if (this.isLoading)
+        return
 
       this.selectedTab = tabId
       this.momentTabs.forEach((tab) => {
@@ -225,7 +228,8 @@ export default defineComponent({
      */
     scrollToTop(element: HTMLElement, duration: number) {
     // cancel if already on top
-      if (element.scrollTop === 0) return
+      if (element.scrollTop === 0)
+        return
 
       const cosParameter = element.scrollTop / 2
       let scrollCount = 0
@@ -235,7 +239,8 @@ export default defineComponent({
         if (oldTimestamp !== 0) {
           // if duration is 0 scrollCount will be Infinity
           scrollCount += Math.PI * (newTimestamp - oldTimestamp) / duration
-          if (scrollCount >= Math.PI) return element.scrollTop = 0
+          if (scrollCount >= Math.PI)
+            return element.scrollTop = 0
           element.scrollTop = cosParameter + cosParameter * Math.cos(scrollCount)
         }
         oldTimestamp = newTimestamp
@@ -289,10 +294,10 @@ export default defineComponent({
     <!-- moments wrapper -->
     <div ref="momentsWrap" h="430px" overflow="y-scroll" p="x-4">
       <!-- loading -->
-      <loading v-if="isLoading && moments.length === 0" h="full" flex="~" items="center"></loading>
+      <loading v-if="isLoading && moments.length === 0" h="full" flex="~" items="center" />
 
       <!-- empty -->
-      <empty v-if="!isLoading && moments.length === 0" w="full" h="full"></empty>
+      <empty v-if="!isLoading && moments.length === 0" w="full" h="full" />
 
       <!-- moments -->
       <transition-group name="list">
@@ -322,13 +327,13 @@ export default defineComponent({
             bg="$bew-theme-color"
             pos="absolute -top-10px -left-10px"
             style="box-shadow: 0 0 4px var(--bew-theme-color)"
-          ></div>
+          />
 
           <a
-            :href="moment.type === MomentType.Video ? 'https://space.bilibili.com/' + moment.uid : moment.url"
+            :href="moment.type === MomentType.Video ? `https://space.bilibili.com/${moment.uid}` : moment.url"
             target="_blank"
           >
-            <img :src="moment.face + '@60w_60h_1c'" rounded="$bew-radius" w="40px" h="40px" m="r-4" />
+            <img :src="`${moment.face}@60w_60h_1c`" rounded="$bew-radius" w="40px" h="40px" m="r-4">
           </a>
 
           <div flex="~" justify="between" w="full">
@@ -337,7 +342,7 @@ export default defineComponent({
               <div v-if="moment.type !== MomentType.Bangumi" text="$bew-text-2 sm" m="y-2">
                 <!-- Videos and articles -->
                 <div v-if="selectedTab === 0 || selectedTab === 2">
-                  {{ calcTimeSince(new Date(moment.ctime * 1000)) }}{{ language === LanguageType.English ? ' ' + $t('common.ago') : $t('common.ago') }}
+                  {{ calcTimeSince(new Date(moment.ctime * 1000)) }}{{ language === LanguageType.English ? ` ${$t('common.ago')}` : $t('common.ago') }}
                 </div>
                 <!-- Live -->
                 <div v-else-if="selectedTab === 1" text="$bew-theme-color" font="bold" flex="~" items="center">
@@ -346,13 +351,13 @@ export default defineComponent({
               </div>
 
             </div>
-            <img :src="moment.cover + '@128w_72h_1c'" w="82px" h="46px" m="l-4" rounded="$bew-radius" />
+            <img :src="`${moment.cover}@128w_72h_1c`" w="82px" h="46px" m="l-4" rounded="$bew-radius">
           </div>
         </a>
       </transition-group>
 
       <!-- loading -->
-      <loading v-if="isLoading && moments.length !== 0" m="-t-4"></loading>
+      <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
     </div>
   </div>
 </template>
diff --git a/src/contentScripts/views/Home/RecommendContent.vue b/src/contentScripts/views/Home/RecommendContent.vue
index a4a9d1b6..7ed6fb57 100644
--- a/src/contentScripts/views/Home/RecommendContent.vue
+++ b/src/contentScripts/views/Home/RecommendContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { accessKey, language } from '~/logic/index'
-import { numFormatter, calcTimeSince, calcCurrentTime } from '~/utils'
+import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils'
 import { LanguageType } from '~/types'
 
 export default defineComponent({
@@ -24,7 +24,7 @@ export default defineComponent({
       this.getRecommendVideos()
     }, 2000)
 
-    window.onscroll = async() => {
+    window.onscroll = async () => {
       if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
         if (!this.isLoading)
           return
@@ -162,7 +162,7 @@ export default defineComponent({
                 video.param,
                 video.mid,
                 video.tid,
-                video.tag.tag_id
+                video.tag.tag_id,
               )"
             >
               {{ $t('common.undo') }}
@@ -170,27 +170,27 @@ export default defineComponent({
           </div>
         </template>
         <template v-else>
-          <a :href="'/video/av' + video.uri.split('/')[3]" target="_blank">
+          <a :href="`/video/av${video.uri.split('/')[3]}`" target="_blank">
             <div class="thumbnail">
               <div class="duration">{{ calcCurrentTime(video.duration) }}</div>
               <div
                 class="overflow-hidden w-full relative rounded-$bew-radius z-1"
                 style="aspect-ratio: 16/9"
               >
-                <img class="cover" :src="video.cover.replace('http:', '') + '@672w_378h_1c'" loading="lazy" />
+                <img class="cover" :src="`${video.cover.replace('http:', '')}@672w_378h_1c`" loading="lazy">
               </div>
-              <img class="cover-shadow" :src="video.cover.replace('http:', '') + '@672w_378h_1c'" loading="lazy" />
+              <img class="cover-shadow" :src="`${video.cover.replace('http:', '')}@672w_378h_1c`" loading="lazy">
             </div>
           </a>
           <div class="detail">
             <div class="flex">
               <a class="avatar" cursor="pointer" @click="gotoChannel(video.mid)">
                 <img
-                  :src="(video.face + '').replace('http:', '') + '@60w_60h_1c'"
+                  :src="`${(`${video.face}`).replace('http:', '')}@60w_60h_1c`"
                   width="48"
                   height="48"
                   loading="lazy"
-                />
+                >
               </a>
             </div>
             <div class="meta">
@@ -223,7 +223,7 @@ export default defineComponent({
                     h="full"
                     z="30"
                     @click="video.openControl = false"
-                  ></div>
+                  />
 
                   <div
                     pos="absolute top-9 right-0"
@@ -265,13 +265,13 @@ export default defineComponent({
                 {{ video.name }}
               </div>
               <div class="video-info">
-                {{ numFormatter(video.play) }}{{ language === LanguageType.English ?
-                  ' ' + $t('common.view', video.play) :
-                  $t('common.view', video.play) }}
+                {{ numFormatter(video.play) }}{{ language === LanguageType.English
+                  ? ` ${$t('common.view', video.play)}`
+                  : $t('common.view', video.play) }}
                 <span class="text-xs font-light">•</span>
-                {{ calcTimeSince(new Date(video.ctime * 1000)) }}{{ language === LanguageType.English ?
-                  ' ' + $t('common.ago') :
-                  $t('common.ago') }}
+                {{ calcTimeSince(new Date(video.ctime * 1000)) }}{{ language === LanguageType.English
+                  ? ` ${$t('common.ago')}`
+                  : $t('common.ago') }}
               </div>
             </div>
           </div>
@@ -280,7 +280,7 @@ export default defineComponent({
     </transition-group>
   </div>
 
-  <loading v-if="isLoading"></loading>
+  <loading v-if="isLoading" />
 
   <div
     v-if="!isLoading"
@@ -336,13 +336,12 @@ export default defineComponent({
 
   .cover-shadow {
     @apply absolute top-0 left-0 w-full h-full filter -z-1
-      pointer-events-none duration-600 rounded-$bew-radius
-      opacity-80;
+      pointer-events-none duration-600 rounded-$bew-radius opacity-70;
     aspect-ratio: 16/9;
   }
 
   &:hover .cover-shadow {
-    @apply blur-lg transform;
+    @apply blur-2xl transform;
   }
 
   .thumbnail {