diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml
index 05ca5ea5..bdc9a92f 100644
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -30,6 +30,15 @@ settings:
   menu_home: 首页
   menu_about: 关于
 
+  # Settings group
+  group_common: 通用
+  group_color: 颜色
+  group_wallpaper: 背景图片
+  group_logo: LOGO
+  group_search_bar: 搜索栏
+  group_recommendation_mode: 推荐模式
+  group_search_page_mode: 搜索页模式
+
   # General settings
   select_language: 界面语文
   select_language_opt:
@@ -38,18 +47,8 @@ settings:
     mandarin_tw: 官話
     jyut: 廣東話
   startup_page: 启动页
-  recommendation_mode: 推荐模式
-  recommendation_mode_desc: >
-    如果您想使用 app 端的推荐算法，请先授权 BewlyBewly 使用 access key。
-  authorize_app: 授权 BewlyBewly 使用 access key
-  authorize_app_desc: |
-    授权使用后能在首页推送 bilibili App 端算法的推荐视频，授权 key 有效期约为一个月，过后记得重新授权获取 access key。
-  authorize_app_more_info_access_key: 关于 access key 
   topbar_visibility: 顶栏可见性
   topbar_visibility_desc: 用于兼容 Bilibili Evolved 自定义顶栏
-  btn:
-    authorize: 授权
-    revoke: 取消授权
   chk_box:
     show: 显示
     hidden: 隐藏
@@ -98,6 +97,19 @@ settings:
   bg_blurs_when_the_search_bar_is_focused: 当搜索栏聚焦时背景模糊
   choose_search_bar_focused_character: 选择搜索栏聚焦时出现的人物
   individually_set_search_page_wallpaper: 单独设置搜索页背景
+
+  # Home settings
+  recommendation_mode: 推荐模式
+  recommendation_mode_desc: >
+    如果您想使用 app 端的推荐算法，请先授权 BewlyBewly 使用 access key。
+  authorize_app: 授权 BewlyBewly 使用 access key
+  authorize_app_desc: |
+    授权使用后能在首页推送 bilibili App 端算法的推荐视频，授权 key 有效期约为一个月，过后记得重新授权获取 access key。
+  authorize_app_more_info_access_key: 关于 access key
+  btn:
+    authorize: 授权
+    revoke: 取消授权
+
 auth:
   err_tip: 授权 access key 失败
   plz_login_first: 请先登录 bilibili
diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml
index c71b0ae7..f414139c 100644
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -30,6 +30,15 @@ settings:
   menu_search_page: 搜尋頁
   menu_about: 關於
 
+  # Settings group
+  group_common: 通用
+  group_color: 顏色
+  group_wallpaper: 背景圖片
+  group_logo: LOGO
+  group_search_bar: 搜尋欄
+  group_recommendation_mode: 推薦模式
+  group_search_page_mode: 搜尋頁模式
+
   # General settings
   select_language: 介面語文
   select_language_opt:
@@ -38,18 +47,8 @@ settings:
     mandarin_tw: 官話
     jyut: 廣東話
   startup_page: 起始頁面
-  recommendation_mode: 推薦模式
-  recommendation_mode_desc: >
-    如果您想要使用手機端的推薦演算法，請先授權 BewlyBewly 使用 access key。
-  authorize_app: 授權 BewlyBewly 使用 access key
-  authorize_app_desc: |
-    授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得 access key。
-  authorize_app_more_info_access_key: 關於 access key
   topbar_visibility: 頂欄可視性
   topbar_visibility_desc: 用於相容 Bilibili Evolved 自訂頂欄
-  btn:
-    authorize: 授權
-    revoke: 解除授權
   chk_box:
     show: 顯示
     hidden: 隱藏
@@ -99,6 +98,18 @@ settings:
   choose_search_bar_focused_character: 選擇搜尋欄聚焦時出現的人物
   individually_set_search_page_wallpaper: 單獨設定搜尋頁背景
 
+  # Home settings
+  recommendation_mode: 推薦模式
+  recommendation_mode_desc: >
+    如果您想要使用手機端的推薦演算法，請先授權 BewlyBewly 使用 access key。
+  authorize_app: 授權 BewlyBewly 使用 access key
+  authorize_app_desc: |
+    授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得 access key。
+  authorize_app_more_info_access_key: 關於 access key
+  btn:
+    authorize: 授權
+    revoke: 解除授權
+
 auth:
   err_tip: 無法授權 access key
   plz_login_first: 請先登入 bilibili
diff --git a/src/_locales/en.yml b/src/_locales/en.yml
index ce3c3f7e..8c752a13 100644
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -30,6 +30,15 @@ settings:
   menu_home: Home
   menu_about: About
 
+  # Settings group
+  group_common: Common
+  group_color: Color
+  group_wallpaper: Wallpaper
+  group_logo: LOGO
+  group_search_bar: Search Bar
+  group_recommendation_mode: Recommendation Mode
+  group_search_page_mode: Search Page Mode
+
   # General settings
   select_language: Language
   select_language_opt:
@@ -38,19 +47,8 @@ settings:
     mandarin_tw: Mandarin - Traditional Chinese
     jyut: Cantonese
   startup_page: Startup page
-  recommendation_mode: Recommendation mode
-  recommendation_mode_desc: >
-    If you want to use the recommendation algorithm on the app, please ensure that you authorize the BewlyBewly to use the access key first.
-  authorize_app: Authorize the BewlyBewly to use the access key
-  authorize_app_desc: >
-    After authentication, you will receive the video recommendations based on the bilibili app recommendation algorithm.
-    The access key is valid for about one month. After that, remember to re-authorize the BewlyBewly to use the access key.
-  authorize_app_more_info_access_key: More information about the access key 
   topbar_visibility: Topbar visibility
   topbar_visibility_desc: Compatible with Bilibili Evolved customize topbar
-  btn:
-    authorize: Authorize
-    revoke: Revoke
   chk_box:
     show: Show
     hidden: Hidden
@@ -82,8 +80,8 @@ settings:
   choose_ur_wallpaper: Choose your wallpaper
   image_url: Image URL
   image_url_hint: |-
-   URL examples: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg
-   https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg
+    URL examples: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg
+    https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg
   enable_wallpaper_masking: Enable wallpaper masking
   wallpaper_mask_opacity: Wallpaper masking opacity
   wallpaper_blur_intensity: Wallpaper blur intensity
@@ -99,6 +97,20 @@ settings:
   bg_blurs_when_the_search_bar_is_focused: Background blurs when the search bar is focused
   choose_search_bar_focused_character: Choose the character that appears when the search bar is focused
   individually_set_search_page_wallpaper: Individually set search page wallpaper
+
+  # Home settings
+  recommendation_mode: Recommendation mode
+  recommendation_mode_desc: >
+    If you want to use the recommendation algorithm on the app, please ensure that you authorize the BewlyBewly to use the access key first.
+  authorize_app: Authorize the BewlyBewly to use the access key
+  authorize_app_desc: >
+    After authentication, you will receive the video recommendations based on the bilibili app recommendation algorithm.
+    The access key is valid for about one month. After that, remember to re-authorize the BewlyBewly to use the access key.
+  authorize_app_more_info_access_key: More information about the access key
+  btn:
+    authorize: Authorize
+    revoke: Revoke
+
 auth:
   err_tip: Failed to grant access key
   plz_login_first: Please login to bilibili first
@@ -236,4 +248,3 @@ watch_later:
   remove_watched_videos_confirm: |-
     Remove watched videos?
     This operation cannot be reversed. Are you sure you want to remove watched videos?
-  
diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml
index c4b66e41..b4bd3b37 100644
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -30,6 +30,15 @@ settings:
   menu_search_page: 搵嘢頁
   menu_about: 關於
 
+  # Settings group
+  group_common: 通用
+  group_color: 顏色
+  group_wallpaper: 背景圖片
+  group_logo: LOGO
+  group_search_bar: 搜尋欄
+  group_recommendation_mode: 推介模式
+  group_search_page_mode: 搵嘢頁模式
+
   # General settings
   select_language: 介面語文
   select_language_opt:
@@ -38,18 +47,8 @@ settings:
     mandarin_tw: 官話
     jyut: 廣東話
   startup_page: 開始頁面
-  recommendation_mode: 推介模式
-  recommendation_mode_desc: >
-    若然你想用手機版嘅推介演算法，就要俾 BewlyBewly 批准使用存取 access key。
-  authorize_app: 授權 BewlyBewly 使用 access key
-  authorize_app_desc: |
-    授咗權嘅話，你就會收到基於 bilibili 手機版推介演算法所推介嘅內容，兼且授權 key 只有約一個月有效期，到期後記得要重新授權嚟取得存取 access key。
-  authorize_app_more_info_access_key: 關於 access key
   topbar_visibility: 頂欄可視性
   topbar_visibility_desc: 用於兼容 Bilibili Evolved 客製化頂欄
-  btn:
-    authorize: 授權
-    revoke: 解除授權
   chk_box:
     show: 擺出嚟
     hidden: 收埋
@@ -81,8 +80,8 @@ settings:
   choose_ur_wallpaper: 揀張背景
   image_url: 圖片 URL
   image_url_hint: |-
-   URL 示例: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg
-   https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg
+    URL 示例: https://pic.imgdb.cn/item/638e1d63b1fccdcd36103811.jpg
+    https://pic.imgdb.cn/item/638e1d7ab1fccdcd36106346.jpg
   enable_wallpaper_masking: 使用背景遮蔽效果
   wallpaper_mask_opacity: 背景遮蔽透明度調節
   wallpaper_blur_intensity: 背景模糊強度調節
@@ -98,10 +97,23 @@ settings:
   bg_blurs_when_the_search_bar_is_focused: 搜尋欄聚焦嗰陣校矇背景
   choose_search_bar_focused_character: 揀個喺搜尋欄聚焦嗰陣出現嘅人物
   individually_set_search_page_wallpaper: 單獨設定搵嘢頁背景
+
+  # Home settings
+  recommendation_mode: 推介模式
+  recommendation_mode_desc: >
+    若然你想用手機版嘅推介演算法，就要俾 BewlyBewly 批准使用存取 access key。
+  authorize_app: 授權 BewlyBewly 使用 access key
+  authorize_app_desc: |
+    授咗權嘅話，你就會收到基於 bilibili 手機版推介演算法所推介嘅內容，兼且授權 key 只有約一個月有效期，到期後記得要重新授權嚟取得存取 access key。
+  authorize_app_more_info_access_key: 關於 access key
+  btn:
+    authorize: 授權
+    revoke: 解除授權
+
 auth:
   err_tip: 無法授權 access key
   plz_login_first: 唔該登入 bilibili 先
-  receive_verified_url_err: 好似神神哋，試吓 refresh 個 page 之後試多次 
+  receive_verified_url_err: 好似神神哋，試吓 refresh 個 page 之後試多次
   failed_to_get_accesskey: 攞唔度 access key
 topbar:
   sign_in: 登入
@@ -236,4 +248,4 @@ watch_later:
   remove_watched_videos: 剷走睇過啲片
   remove_watched_videos_confirm: |-
     係咪要剷走你睇過啲片呀？
-    噉做冇得返轉頭噃，你確定要剷走你睇過啲片？
\ No newline at end of file
+    噉做冇得返轉頭噃，你確定要剷走你睇過啲片？
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 5745f74a..44dd257a 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -84,7 +84,7 @@ function setCurrentTitle() {
   <div class="fixed w-full h-full top-0 left-0" z="9998" opacity-60 :style="{ backgroundColor: isHomePage ? '' : 'var(--bew-bg)' }" @click="handleClose" />
 
   <div
-    id="settings-window" pos="fixed top-1/2 left-1/2" w="85%" h="80%"
+    id="settings-window" pos="fixed top-1/2 left-1/2" w="90%" h="90%"
     max-w-900px max-h-800px transform="~ translate-x--1/2 translate-y--1/2"
     z-9999 flex justify-between items-center
   >
@@ -140,7 +140,7 @@ function setCurrentTitle() {
         </div>
       </header>
 
-      <main relative h-full py-8 p="x-12" overflow-y-scroll>
+      <main relative h-full py-8 p="x-12" overflow-y-overlay>
         <!-- <header
           flex justify-between items-center w-full h-60px
           pos="fixed top-0 left-0"
@@ -158,7 +158,7 @@ function setCurrentTitle() {
           </div>
         </header> -->
 
-        <div h-60px />
+        <div h-80px mt--8 />
 
         <Component :is="settingsMenu[activatedMenuItem]" />
       </main>
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 84bc1a25..fa1c9bd7 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -79,119 +79,124 @@ function changeWallpaper(url: string) {
 </script>
 
 <template>
-  <SettingsItem :title="$t('settings.theme')">
-    <Select v-model="settings.theme" w-full :options="themeOptions" />
-  </SettingsItem>
-  <SettingsItem :title="$t('settings.theme_color')">
-    <div flex="~ gap-2 wrap" justify-end>
+  <SettingsItemGroup :title="$t('settings.group_color')">
+    <SettingsItem :title="$t('settings.theme')">
+      <Select v-model="settings.theme" w-full :options="themeOptions" />
+    </SettingsItem>
+    <SettingsItem :title="$t('settings.theme_color')">
+      <div flex="~ gap-2 wrap" justify-end>
+        <div
+          v-for="color in themeColorOptions" :key="color"
+          w-20px h-20px rounded-8 cursor-pointer transition duration-300
+          :style="{
+            background: color,
+            transform: color === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
+            border: color === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
+          }"
+          @click="changeThemeColor(color)"
+        />
+      </div>
+    </SettingsItem>
+    <SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
       <div
-        v-for="color in themeColorOptions" :key="color"
-        w-20px h-20px rounded-8 cursor-pointer transition duration-300
+        w-20px h-20px rounded-8 cursor-pointer
         :style="{
-          background: color,
-          transform: color === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
-          border: color === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
+          background: bilibiliEvolvedThemeColor,
+          transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
+          border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
         }"
-        @click="changeThemeColor(color)"
+        @click="changeThemeColor(bilibiliEvolvedThemeColor)"
       />
-    </div>
-  </SettingsItem>
-  <SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
-    <div
-      w-20px h-20px rounded-8 cursor-pointer
-      :style="{
-        background: bilibiliEvolvedThemeColor,
-        transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
-        border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
-      }"
-      @click="changeThemeColor(bilibiliEvolvedThemeColor)"
-    />
-  </SettingsItem>
-  <SettingsItem :title="$t('settings.adapt_to_other_page_styles')" :desc="$t('settings.adapt_to_other_page_styles_desc')">
-    <Radio v-model="settings.adaptToOtherPageStyles" />
-  </SettingsItem>
-  <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
-    <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
-      <div
-        flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
-        :style="{
-          background: settings.wallpaperMode === 'buildIn' ? 'var(--bew-theme-color)' : '',
-          color: settings.wallpaperMode === 'buildIn' ? 'white' : '',
-        }"
-        @click="settings.wallpaperMode = 'buildIn'"
-      >
-        {{ $t('settings.wallpaper_mode_opt.build_in') }}
-      </div>
-      <div
-        flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
-        :style="{
-          background: settings.wallpaperMode === 'byUrl' ? 'var(--bew-theme-color)' : '',
-          color: settings.wallpaperMode === 'byUrl' ? 'white' : '',
-        }"
-        @click="settings.wallpaperMode = 'byUrl'"
-      >
-        {{ $t('settings.wallpaper_mode_opt.by_url') }}
-      </div>
-    </div>
-  </SettingsItem>
+    </SettingsItem>
+    <SettingsItem :title="$t('settings.adapt_to_other_page_styles')" :desc="$t('settings.adapt_to_other_page_styles_desc')">
+      <Radio v-model="settings.adaptToOtherPageStyles" />
+    </SettingsItem>
+  </SettingsItemGroup>
 
-  <SettingsItem v-if="settings.wallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
-    <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
-      <picture
-        aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-        un-border="4 transparent" cursor-pointer
-        grid place-items-center
-        :class="{ 'selected-wallpaper': settings.wallpaper === '' }"
-        @click="changeWallpaper('')"
-      >
-        <tabler:photo-off text="3xl $bew-text-3" />
-      </picture>
-      <Tooltip v-for="item in wallpapers" :key="item.url" placement="top" :content="item.name" aspect-video>
+  <SettingsItemGroup :title="$t('settings.group_wallpaper')">
+    <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
+      <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+        <div
+          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+          :style="{
+            background: settings.wallpaperMode === 'buildIn' ? 'var(--bew-theme-color)' : '',
+            color: settings.wallpaperMode === 'buildIn' ? 'white' : '',
+          }"
+          @click="settings.wallpaperMode = 'buildIn'"
+        >
+          {{ $t('settings.wallpaper_mode_opt.build_in') }}
+        </div>
+        <div
+          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+          :style="{
+            background: settings.wallpaperMode === 'byUrl' ? 'var(--bew-theme-color)' : '',
+            color: settings.wallpaperMode === 'byUrl' ? 'white' : '',
+          }"
+          @click="settings.wallpaperMode = 'byUrl'"
+        >
+          {{ $t('settings.wallpaper_mode_opt.by_url') }}
+        </div>
+      </div>
+    </SettingsItem>
+
+    <SettingsItem v-if="settings.wallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
+      <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
         <picture
           aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" w-full
-          :class="{ 'selected-wallpaper': settings.wallpaper === item.url }"
-          @click="changeWallpaper(item.url)"
+          un-border="4 transparent" cursor-pointer
+          grid place-items-center
+          :class="{ 'selected-wallpaper': settings.wallpaper === '' }"
+          @click="changeWallpaper('')"
         >
-          <img :src="item.thumbnail" alt="" w-full h-full object-cover>
+          <tabler:photo-off text="3xl $bew-text-3" />
         </picture>
-      </Tooltip>
-    </div>
-  </SettingsItem>
-  <SettingsItem v-else :title="$t('settings.image_url')" next-line>
-    <div flex items-center gap-4>
-      <picture
-        aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-        un-border="4 transparent" cursor-pointer shrink-0
-        w="xl:1/4 lg:1/3 md:1/2"
-      >
-        <img v-if="settings.wallpaper" :src="settings.wallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
-      </picture>
-      <div>
-        <Input v-model="settings.wallpaper" w-full />
-        <p color="sm $bew-text-3" mt-2>
-          {{ $t('settings.image_url_hint') }}
-        </p>
+        <Tooltip v-for="item in wallpapers" :key="item.url" placement="top" :content="item.name" aspect-video>
+          <picture
+            aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+            un-border="4 transparent" w-full
+            :class="{ 'selected-wallpaper': settings.wallpaper === item.url }"
+            @click="changeWallpaper(item.url)"
+          >
+            <img :src="item.thumbnail" alt="" w-full h-full object-cover>
+          </picture>
+        </Tooltip>
       </div>
-    </div>
-  </SettingsItem>
+    </SettingsItem>
+    <SettingsItem v-else :title="$t('settings.image_url')" next-line>
+      <div flex items-center gap-4>
+        <picture
+          aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+          un-border="4 transparent" cursor-pointer shrink-0
+          w="xl:1/4 lg:1/3 md:1/2"
+        >
+          <img v-if="settings.wallpaper" :src="settings.wallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
+        </picture>
+        <div>
+          <Input v-model="settings.wallpaper" w-full />
+          <p color="sm $bew-text-3" mt-2>
+            {{ $t('settings.image_url_hint') }}
+          </p>
+        </div>
+      </div>
+    </SettingsItem>
 
-  <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
-    <template #desc>
-      <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-    </template>
+    <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
+      <template #desc>
+        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+      </template>
 
-    <Radio v-model="settings.enableWallpaperMasking" />
-  </SettingsItem>
-  <SettingsItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
-    <Slider v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
-  </SettingsItem>
-  <SettingsItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
-    <template #desc>
-      <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-    </template>
-    <Slider v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
-  </SettingsItem>
+      <Radio v-model="settings.enableWallpaperMasking" />
+    </SettingsItem>
+    <SettingsItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
+      <Slider v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
+    </SettingsItem>
+    <SettingsItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
+      <template #desc>
+        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+      </template>
+      <Slider v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
+    </SettingsItem>
+  </SettingsItemGroup>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index cb53a741..8babac16 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -59,41 +59,43 @@ watch(() => settings.value.language, (newValue, oldValue) => {
 </script>
 
 <template>
-  <SettingsItem :title="$t('settings.select_language')">
-    <Select
-      v-model="settings.language"
-      :options="langOptions"
-      w="full"
-    />
-  </SettingsItem>
+  <SettingsItemGroup :title="$t('settings.group_common')">
+    <SettingsItem :title="$t('settings.select_language')">
+      <Select
+        v-model="settings.language"
+        :options="langOptions"
+        w="full"
+      />
+    </SettingsItem>
 
-  <SettingsItem :title="$t('settings.startup_page')">
-    <Select
-      v-model="settings.startupPage"
-      :options="pageOptions"
-      w="full"
-    />
-  </SettingsItem>
+    <SettingsItem :title="$t('settings.startup_page')">
+      <Select
+        v-model="settings.startupPage"
+        :options="pageOptions"
+        w="full"
+      />
+    </SettingsItem>
 
-  <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
-    <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
-  </SettingsItem>
+    <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
+      <Radio v-model="settings.isShowTopbar" :label="settings.isShowTopbar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
+    </SettingsItem>
 
-  <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
-    <Select
-      v-model="settings.dockPosition"
-      :options="dockPositions"
-      w="full"
-    />
-  </SettingsItem>
+    <SettingsItem :title="$t('settings.dock_position')" :desc="$t('settings.dock_position_desc')">
+      <Select
+        v-model="settings.dockPosition"
+        :options="dockPositions"
+        w="full"
+      />
+    </SettingsItem>
 
-  <SettingsItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
-    <Radio v-model="settings.enableHorizontalScrolling" />
-  </SettingsItem>
+    <SettingsItem :title="$t('settings.enable_horizontal_scrolling')" :desc="$t('settings.enable_horizontal_scrolling_desc')">
+      <Radio v-model="settings.enableHorizontalScrolling" />
+    </SettingsItem>
 
-  <!-- <SettingsItem title="Open link in current tab">
-    <Radio v-model="settings.openLinkInCurrentTab" />
-  </SettingsItem> -->
+    <!-- <SettingsItem title="Open link in current tab">
+      <Radio v-model="settings.openLinkInCurrentTab" />
+    </SettingsItem> -->
+  </SettingsItemGroup>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index fa2764db..6ffe563f 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -18,70 +18,74 @@ function handleRevoke() {
 </script>
 
 <template>
-  <SettingsItem :title="$t('settings.recommendation_mode')" :desc="$t('settings.recommendation_mode_desc')">
-    <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
-      <div
-        flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
-        :style="{
-          background: settings.recommendationMode === 'web' ? 'var(--bew-theme-color)' : '',
-          color: settings.recommendationMode === 'web' ? 'white' : '',
-        }"
-        @click="settings.recommendationMode = 'web'"
-      >
-        Web
+  <SettingsItemGroup :title="$t('settings.group_recommendation_mode')">
+    <SettingsItem :title="$t('settings.recommendation_mode')" :desc="$t('settings.recommendation_mode_desc')">
+      <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+        <div
+          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+          :style="{
+            background: settings.recommendationMode === 'web' ? 'var(--bew-theme-color)' : '',
+            color: settings.recommendationMode === 'web' ? 'white' : '',
+          }"
+          @click="settings.recommendationMode = 'web'"
+        >
+          Web
+        </div>
+        <div
+          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+          :style="{
+            background: settings.recommendationMode === 'app' ? 'var(--bew-theme-color)' : '',
+            color: settings.recommendationMode === 'app' ? 'white' : '',
+          }"
+          @click="settings.recommendationMode = 'app'"
+        >
+          App
+        </div>
       </div>
-      <div
-        flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
-        :style="{
-          background: settings.recommendationMode === 'app' ? 'var(--bew-theme-color)' : '',
-          color: settings.recommendationMode === 'app' ? 'white' : '',
-        }"
-        @click="settings.recommendationMode = 'app'"
-      >
-        App
+    </SettingsItem>
+
+    <SettingsItem v-if="settings.recommendationMode === 'app'" :title="$t('settings.authorize_app')">
+      <template #desc>
+        {{ $t('settings.authorize_app_desc') }}
+        <br>
+        <a
+          href="https://github.com/indefined/UserScripts/tree/master/bilibiliHome#%E6%8E%88%E6%9D%83%E8%AF%B4%E6%98%8E" target="_blank" color="$bew-theme-color"
+        >{{ $t('settings.authorize_app_more_info_access_key') }}</a>
+      </template>
+
+      <div w-full>
+        <button
+          v-if="!accessKey"
+          ref="authorizeBtn"
+          bg="$bew-theme-color" text-white lh-35px rounded="$bew-radius" w-full
+          @click="handleAuthorize"
+        >
+          {{ $t('settings.btn.authorize') }}
+        </button>
+        <button
+          v-else
+          un-border="2px solid $bew-error-color" text="$bew-error-color" lh-35px rounded="$bew-radius" w-full
+          @click="handleRevoke"
+        >
+          <span>{{ $t('settings.btn.revoke') }}</span>
+        </button>
       </div>
-    </div>
-  </SettingsItem>
+    </SettingsItem>
+  </SettingsItemGroup>
 
-  <SettingsItem v-if="settings.recommendationMode === 'app'" :title="$t('settings.authorize_app')">
-    <template #desc>
-      {{ $t('settings.authorize_app_desc') }}
-      <br>
-      <a
-        href="https://github.com/indefined/UserScripts/tree/master/bilibiliHome#%E6%8E%88%E6%9D%83%E8%AF%B4%E6%98%8E" target="_blank" color="$bew-theme-color"
-      >{{ $t('settings.authorize_app_more_info_access_key') }}</a>
-    </template>
-
-    <div w-full>
-      <button
-        v-if="!accessKey"
-        ref="authorizeBtn"
-        bg="$bew-theme-color" text-white lh-35px rounded="$bew-radius" w-full
-        @click="handleAuthorize"
-      >
-        {{ $t('settings.btn.authorize') }}
-      </button>
-      <button
-        v-else
-        un-border="2px solid $bew-error-color" text="$bew-error-color" lh-35px rounded="$bew-radius" w-full
-        @click="handleRevoke"
-      >
-        <span>{{ $t('settings.btn.revoke') }}</span>
-      </button>
-    </div>
-  </SettingsItem>
-
-  <SettingsItem title="Use search page mode on homepage">
-    <Radio v-model="settings.useSearchPageModeOnHomePage" />
-  </SettingsItem>
-  <SettingsItem title="Settings shared with the search page">
-    <template #desc>
-      <span color="$bew-warning-color">Those settings are used in common with the search page</span>
-    </template>
-    <Button type="secondary" block center>
-      Open Settings...
-    </Button>
-  </SettingsItem>
+  <SettingsItemGroup :title="$t('settings.group_search_page_mode')">
+    <SettingsItem title="Use search page mode on homepage">
+      <Radio v-model="settings.useSearchPageModeOnHomePage" />
+    </SettingsItem>
+    <SettingsItem title="Settings shared with the search page">
+      <template #desc>
+        <span color="$bew-warning-color">Those settings are used in common with the search page</span>
+      </template>
+      <Button type="secondary" block center>
+        Open Settings...
+      </Button>
+    </SettingsItem>
+  </SettingsItemGroup>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index ec055a5a..ca315228 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -51,186 +51,192 @@ function changeWallpaper(url: string) {
 </script>
 
 <template>
-  <SettingsItem :title="$t('settings.logo_color')">
-    <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
-      <div
-        flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
-        :style="{
-          background: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'var(--bew-theme-color)' : '',
-          color: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'white' : '',
-        }"
-        @click="settings.searchPageLogoColor = 'themeColor'"
-      >
-        {{ $t('settings.logo_color_opt.theme_color') }}
-      </div>
-      <div
-        flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
-        :style="{
-          background: settings.searchPageLogoColor === 'white' ? 'var(--bew-theme-color)' : '',
-          color: settings.searchPageLogoColor === 'white' ? 'white' : '',
-        }"
-        @click="settings.searchPageLogoColor = 'white'"
-      >
-        {{ $t('settings.logo_color_opt.white') }}
-      </div>
-    </div>
-  </SettingsItem>
-
-  <SettingsItem :title="$t('settings.enable_logo_glowing_effect')">
-    <Radio v-model="settings.searchPageLogoGlow" />
-  </SettingsItem>
-
-  <SettingsItem :title="$t('settings.logo_visibility')">
-    <Radio v-model="settings.searchPageShowLogo" />
-  </SettingsItem>
-
-  <SettingsItem :title="$t('settings.bg_darkens_when_the_search_bar_is_focused')">
-    <Radio v-model="settings.searchPageDarkenOnSearchFocus" />
-  </SettingsItem>
-
-  <SettingsItem :title="$t('settings.bg_blurs_when_the_search_bar_is_focused')">
-    <template #desc>
-      <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-    </template>
-
-    <Radio v-model="settings.searchPageBlurredOnSearchFocus" />
-  </SettingsItem>
-
-  <SettingsItem :title="$t('settings.choose_search_bar_focused_character')" next-line>
-    <div grid="~ xl:cols-8 lg:cols-6 cols-5 gap-4">
-      <picture
-        aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-        un-border="4 transparent" cursor-pointer
-        grid place-items-center
-        :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === '' }"
-        @click="changeSearchBarFocusCharacter('')"
-      >
-        <tabler:photo-off text="3xl $bew-text-3" />
-      </picture>
-      <Tooltip v-for="item in searchBarFocusCharacters" :key="item.url" placement="top" :content="item.name" aspect-square>
-        <picture
-          aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" w-full
-          :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === item.url }"
-          @click="changeSearchBarFocusCharacter(item.url)"
-        >
-          <img :src="item.url" alt="" w-full h-full object-contain>
-        </picture>
-      </Tooltip>
-    </div>
-    <!-- <div flex items-center gap-4>
-      <div>
-        <picture
-          aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" cursor-pointer shrink-0
-          w="xl:1/8 lg:1/6 md:1/5" p--4
-        >
-          <img
-            v-if="settings.searchPageSearchBarFocusCharacter" :src="settings.searchPageSearchBarFocusCharacter" alt="" w-full h-full object-contain
-            onerror="this.style.display='none'; this.onerror=null;"
-          >
-        </picture>
-      </div>
-      <div>
-        <Input v-model="settings.searchPageSearchBarFocusCharacter" w-full />
-        <p color="sm $bew-text-3" mt-2>
-          {{ $t('settings.image_url_hint') }}
-        </p>
-      </div>
-    </div> -->
-  </SettingsItem>
-
-  <SettingsItem :title="$t('settings.individually_set_search_page_wallpaper')">
-    <template #desc>
-      <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-    </template>
-
-    <Radio v-model="settings.individuallySetSearchPageWallpaper" />
-  </SettingsItem>
-  <template v-if="settings.individuallySetSearchPageWallpaper">
-    <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
+  <SettingsItemGroup :title="$t('settings.group_logo')">
+    <SettingsItem :title="$t('settings.logo_color')">
       <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
         <div
-          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+          flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
           :style="{
-            background: settings.searchPageWallpaperMode === 'buildIn' ? 'var(--bew-theme-color)' : '',
-            color: settings.searchPageWallpaperMode === 'buildIn' ? 'white' : '',
+            background: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'var(--bew-theme-color)' : '',
+            color: settings.searchPageLogoColor === 'themeColor' || !settings.searchPageLogoColor ? 'white' : '',
           }"
-          @click="settings.searchPageWallpaperMode = 'buildIn'"
+          @click="settings.searchPageLogoColor = 'themeColor'"
         >
-          {{ $t('settings.wallpaper_mode_opt.build_in') }}
+          {{ $t('settings.logo_color_opt.theme_color') }}
         </div>
         <div
-          flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+          flex="1 ~" items-center justify-center py-1 cursor-pointer text-center rounded="$bew-radius"
           :style="{
-            background: settings.searchPageWallpaperMode === 'byUrl' ? 'var(--bew-theme-color)' : '',
-            color: settings.searchPageWallpaperMode === 'byUrl' ? 'white' : '',
+            background: settings.searchPageLogoColor === 'white' ? 'var(--bew-theme-color)' : '',
+            color: settings.searchPageLogoColor === 'white' ? 'white' : '',
           }"
-          @click="settings.searchPageWallpaperMode = 'byUrl'"
+          @click="settings.searchPageLogoColor = 'white'"
         >
-          {{ $t('settings.wallpaper_mode_opt.by_url') }}
+          {{ $t('settings.logo_color_opt.white') }}
         </div>
       </div>
     </SettingsItem>
 
-    <SettingsItem v-if="settings.searchPageWallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
-      <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
+    <SettingsItem :title="$t('settings.enable_logo_glowing_effect')">
+      <Radio v-model="settings.searchPageLogoGlow" />
+    </SettingsItem>
+
+    <SettingsItem :title="$t('settings.logo_visibility')">
+      <Radio v-model="settings.searchPageShowLogo" />
+    </SettingsItem>
+  </SettingsItemGroup>
+
+  <SettingsItemGroup :title="$t('settings.group_search_bar')">
+    <SettingsItem :title="$t('settings.bg_darkens_when_the_search_bar_is_focused')">
+      <Radio v-model="settings.searchPageDarkenOnSearchFocus" />
+    </SettingsItem>
+
+    <SettingsItem :title="$t('settings.bg_blurs_when_the_search_bar_is_focused')">
+      <template #desc>
+        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+      </template>
+
+      <Radio v-model="settings.searchPageBlurredOnSearchFocus" />
+    </SettingsItem>
+
+    <SettingsItem :title="$t('settings.choose_search_bar_focused_character')" next-line>
+      <div grid="~ xl:cols-8 lg:cols-6 cols-5 gap-4">
         <picture
-          aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+          aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
           un-border="4 transparent" cursor-pointer
           grid place-items-center
-          :class="{ 'selected-wallpaper': settings.searchPageWallpaper === '' }"
-          @click="changeWallpaper('')"
+          :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === '' }"
+          @click="changeSearchBarFocusCharacter('')"
         >
           <tabler:photo-off text="3xl $bew-text-3" />
         </picture>
-        <Tooltip v-for="item in wallpapers" :key="item.url" placement="top" :content="item.name" aspect-video>
+        <Tooltip v-for="item in searchBarFocusCharacters" :key="item.url" placement="top" :content="item.name" aspect-square>
           <picture
-            aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+            aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
             un-border="4 transparent" w-full
-            :class="{ 'selected-wallpaper': settings.searchPageWallpaper === item.url }"
-            @click="changeWallpaper(item.url)"
+            :class="{ 'selected-wallpaper': settings.searchPageSearchBarFocusCharacter === item.url }"
+            @click="changeSearchBarFocusCharacter(item.url)"
           >
-            <img :src="item.thumbnail" alt="" w-full h-full object-cover>
+            <img :src="item.url" alt="" w-full h-full object-contain>
           </picture>
         </Tooltip>
       </div>
-    </SettingsItem>
-    <SettingsItem v-else :title="$t('settings.image_url')" next-line>
-      <div flex items-center gap-4>
-        <picture
-          aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-          un-border="4 transparent" cursor-pointer shrink-0
-          w="xl:1/4 lg:1/3 md:1/2"
-        >
-          <img v-if="settings.searchPageWallpaper" :src="settings.searchPageWallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
-        </picture>
+      <!-- <div flex items-center gap-4>
         <div>
-          <Input v-model="settings.searchPageWallpaper" w-full />
+          <picture
+            aspect-square bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+            un-border="4 transparent" cursor-pointer shrink-0
+            w="xl:1/8 lg:1/6 md:1/5" p--4
+          >
+            <img
+              v-if="settings.searchPageSearchBarFocusCharacter" :src="settings.searchPageSearchBarFocusCharacter" alt="" w-full h-full object-contain
+              onerror="this.style.display='none'; this.onerror=null;"
+            >
+          </picture>
+        </div>
+        <div>
+          <Input v-model="settings.searchPageSearchBarFocusCharacter" w-full />
           <p color="sm $bew-text-3" mt-2>
             {{ $t('settings.image_url_hint') }}
           </p>
         </div>
-      </div>
+      </div> -->
     </SettingsItem>
+  </SettingsItemGroup>
 
-    <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
+  <SettingsItemGroup :title="$t('settings.group_wallpaper')">
+    <SettingsItem :title="$t('settings.individually_set_search_page_wallpaper')">
       <template #desc>
         <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
       </template>
 
-      <Radio v-model="settings.searchPageEnableWallpaperMasking" />
+      <Radio v-model="settings.individuallySetSearchPageWallpaper" />
     </SettingsItem>
-    <SettingsItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
-      <Slider v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
-    </SettingsItem>
-    <SettingsItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
-      <template #desc>
-        <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
-      </template>
-      <Slider v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
-    </SettingsItem>
-  </template>
+    <template v-if="settings.individuallySetSearchPageWallpaper">
+      <SettingsItem :title="$t('settings.wallpaper_mode')" :desc="$t('settings.wallpaper_mode_desc')">
+        <div w-full flex rounded="$bew-radius" bg="$bew-fill-1" p-1>
+          <div
+            flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+            :style="{
+              background: settings.searchPageWallpaperMode === 'buildIn' ? 'var(--bew-theme-color)' : '',
+              color: settings.searchPageWallpaperMode === 'buildIn' ? 'white' : '',
+            }"
+            @click="settings.searchPageWallpaperMode = 'buildIn'"
+          >
+            {{ $t('settings.wallpaper_mode_opt.build_in') }}
+          </div>
+          <div
+            flex-1 py-1 cursor-pointer text-center rounded="$bew-radius"
+            :style="{
+              background: settings.searchPageWallpaperMode === 'byUrl' ? 'var(--bew-theme-color)' : '',
+              color: settings.searchPageWallpaperMode === 'byUrl' ? 'white' : '',
+            }"
+            @click="settings.searchPageWallpaperMode = 'byUrl'"
+          >
+            {{ $t('settings.wallpaper_mode_opt.by_url') }}
+          </div>
+        </div>
+      </SettingsItem>
+
+      <SettingsItem v-if="settings.searchPageWallpaperMode === 'buildIn'" :title="$t('settings.choose_ur_wallpaper')" next-line>
+        <div grid="~ xl:cols-4 lg:cols-3 cols-2  gap-4">
+          <picture
+            aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+            un-border="4 transparent" cursor-pointer
+            grid place-items-center
+            :class="{ 'selected-wallpaper': settings.searchPageWallpaper === '' }"
+            @click="changeWallpaper('')"
+          >
+            <tabler:photo-off text="3xl $bew-text-3" />
+          </picture>
+          <Tooltip v-for="item in wallpapers" :key="item.url" placement="top" :content="item.name" aspect-video>
+            <picture
+              aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+              un-border="4 transparent" w-full
+              :class="{ 'selected-wallpaper': settings.searchPageWallpaper === item.url }"
+              @click="changeWallpaper(item.url)"
+            >
+              <img :src="item.thumbnail" alt="" w-full h-full object-cover>
+            </picture>
+          </Tooltip>
+        </div>
+      </SettingsItem>
+      <SettingsItem v-else :title="$t('settings.image_url')" next-line>
+        <div flex items-center gap-4>
+          <picture
+            aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+            un-border="4 transparent" cursor-pointer shrink-0
+            w="xl:1/4 lg:1/3 md:1/2"
+          >
+            <img v-if="settings.searchPageWallpaper" :src="settings.searchPageWallpaper" alt="" w-full h-full object-cover onerror="this.style.display='none'; this.onerror=null;">
+          </picture>
+          <div>
+            <Input v-model="settings.searchPageWallpaper" w-full />
+            <p color="sm $bew-text-3" mt-2>
+              {{ $t('settings.image_url_hint') }}
+            </p>
+          </div>
+        </div>
+      </SettingsItem>
+
+      <SettingsItem :title="$t('settings.enable_wallpaper_masking')">
+        <template #desc>
+          <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+        </template>
+
+        <Radio v-model="settings.searchPageEnableWallpaperMasking" />
+      </SettingsItem>
+      <SettingsItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
+        <Slider v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
+      </SettingsItem>
+      <SettingsItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
+        <template #desc>
+          <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
+        </template>
+        <Slider v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
+      </SettingsItem>
+    </template>
+  </SettingsItemGroup>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Settings/components/SettingsItem.vue b/src/components/Settings/components/SettingsItem.vue
index b686b707..f2621d55 100644
--- a/src/components/Settings/components/SettingsItem.vue
+++ b/src/components/Settings/components/SettingsItem.vue
@@ -7,8 +7,8 @@ defineProps<{
 </script>
 
 <template>
-  <div>
-    <div flex="~ gap-4" justify-betwee items-center py-2 text-base>
+  <div class="b-settings-item">
+    <div flex="~ gap-4" justify-betwee items-center text-base>
       <div :w="nextLine ? 'full' : '5/7'">
         {{ title }}
         <br>
@@ -23,7 +23,10 @@ defineProps<{
         <slot />
       </div>
     </div>
-    <slot v-if="nextLine" />
+
+    <div v-if="nextLine" mt-2>
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -31,4 +34,8 @@ defineProps<{
 :deep(.right-content > *) {
   --at-apply: float-right clear-both;
 }
+
+.b-settings-item + .b-settings-item {
+  --at-apply: mt-4
+}
 </style>
diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue
index a85d8034..03000c26 100644
--- a/src/components/Settings/components/SettingsItemGroup.vue
+++ b/src/components/Settings/components/SettingsItemGroup.vue
@@ -7,7 +7,7 @@ defineProps<{
 
 <template>
   <div class="b-settings-item-group" mb-6>
-    <p text="base $bew-text-1" font-semibold>
+    <p text="base $bew-text-1">
       {{ title }}
     </p>
     <p v-if="desc" text="sm $bew-text-2">
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/RecommendContent.vue
index 08a6f3d4..2b1db248 100644
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/src/contentScripts/views/Home/components/RecommendContent.vue
@@ -170,8 +170,8 @@ function jumpToLoginPage() {
           :duration-str="video.cover_right_text"
           :title="video.title"
           :cover="video.cover"
-          :author="video.mask.avatar.text"
-          :author-face="video.mask.avatar.cover"
+          :author="'avatar' in video.mask ? video.mask.avatar.text : ''"
+          :author-face="'avatar' in video.mask ? video.mask.avatar.cover : ''"
           :mid="video.mask.avatar.up_id"
           :capsule-text="video.desc.split('·')[1]"
           :bvid="video.bvid"