diff --git a/src/components/Button.vue b/src/components/Button.vue
index b04cdf3f..aa31d24d 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
-type Type =
-  | 'default'
+interface Props {
+  type?: | 'default'
   | 'primary'
   | 'secondary'
   | 'info'
   | 'success'
   | 'warning'
   | 'error'
-type Size = 'small' | 'medium' | 'large'
-
-interface Props {
-  type?: Type
-  size?: Size
+  size?: 'small' | 'medium' | 'large'
   /** @description enable frosted glass effect */
   frosted?: boolean
 }
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 9d4ddb05..5dd5d7d0 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -97,7 +97,7 @@ function changeThemeColor(color: string) {
 <template>
   <div class="fixed w-full h-full top-0 left-0 bg-black bg-opacity-30" z="9998" @click="close" />
 
-  <div id="settings-window" z="9999" overflow-hidden>
+  <div id="settings-window">
     <div relative overflow-y-scroll overflow-x-hidden h-full p-8>
       <header
         flex justify-between items-center w-full h-80px
@@ -264,9 +264,13 @@ function changeThemeColor(color: string) {
 
 <style lang="scss" scoped>
 #settings-window {
-  --at-apply: fixed top-1/5 left-1/2 w-1/2 h-1/2 max-w-800px
+  --at-apply: fixed md:top-1/5 top-0 left-1/2
+    lg:1/2 md:w-2/3 w-full
+    md:h-1/2 h-full
+
+    max-w-800px
     transform -translate-x-1/2
-    rounded-$bew-radius
+    rounded-$bew-radius z-9999 overflow-hidden
     bg-$bew-content-solid-1;
   box-shadow: var(--bew-shadow-3);
 
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index f7f5e132..0ecedad1 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -4,7 +4,7 @@ import AnimeTimeTable from './components/AnimeTimeTable.vue'
 import AnimeCard from './components/AnimeCard.vue'
 import AnimeCardSkeleton from './components/AnimeCardSkeleton.vue'
 import type { AnimeItem, PopularAnime } from './types'
-import { getUserID, numFormatter, removeHttpFromUrl } from '~/utils'
+import { getUserID, numFormatter, openLinkToNewTab, removeHttpFromUrl } from '~/utils'
 
 const animeWatchList = reactive<AnimeItem[]>([])
 const recommendAnimeList = reactive<AnimeItem[]>([])
@@ -113,15 +113,18 @@ function getPopularAnimeList() {
       </section> -->
 
       <!-- Your Watchlist -->
-      <section v-if="getUserID()" mb-8>
-        <div flex justify-between items-end mb-6>
+      <section v-if="getUserID()" mb-8 mt-4>
+        <div flex justify-between items-center mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
             {{ $t('anime.your_watch_list') }}
           </h3>
-          <a
-            :href="`https://space.bilibili.com/${getUserID() ?? 0}/bangumi`"
-            target="_blank"
-          >{{ $t('common.view_all') }}</a>
+          <Button
+            size="small"
+            shadow="$bew-shadow-1"
+            @click="openLinkToNewTab(`https://space.bilibili.com/${getUserID() ?? 0}/bangumi`)"
+          >
+            {{ $t('common.view_all') }}
+          </Button>
         </div>
 
         <HorizontalScrollView w="[calc(100%+1.5rem)]">
@@ -160,15 +163,17 @@ function getPopularAnimeList() {
 
       <!-- Popular Anime -->
       <section mb-8>
-        <div flex justify-between items-end mb-6>
+        <div flex justify-between items-center mb-6>
           <h3 text="3xl $bew-text-1" font="bold">
             {{ $t('anime.popular_anime') }}
           </h3>
-          <a
-            href="https://www.bilibili.com/v/popular/rank/bangumi"
-            target="_blank"
-            un-text="$bew-theme-color"
-          >{{ $t('common.view_all') }}</a>
+          <Button
+            size="small"
+            shadow="$bew-shadow-1"
+            @click="openLinkToNewTab(`https://www.bilibili.com/v/popular/rank/bangumi`)"
+          >
+            {{ $t('common.view_all') }}
+          </Button>
         </div>
 
         <HorizontalScrollView w="[calc(100%+1.5rem)]">