diff --git a/src/background/index.ts b/src/background/index.ts
index 34ef7780..5e938e3d 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -1,5 +1,6 @@
 import type { Tabs } from 'webextension-polyfill'
 import browser from 'webextension-polyfill'
+
 // import { onMessage, sendMessage } from 'webext-bridge'
 import { resetCss } from './resetWebsiteStyle'
 import { setupAllMsgLstnrs } from './messageListeners'
@@ -57,15 +58,9 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
     || /https?:\/\/www.bilibili.com\/?$/.test(`${tab.url}`)
     || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(`${tab.url}`)
     || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(`${tab.url}`)
+    || true
     // || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(`${tab.url}`)
   ) {
-    browser.scripting.insertCSS({
-      css: resetCss,
-      target: {
-        tabId,
-      },
-    })
-
     if (changInfo.status === 'loading') {
       // browser.scripting.insertCSS({
       //   css: `
@@ -81,6 +76,13 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
       //   },
       // })
 
+      browser.scripting.insertCSS({
+        css: resetCss,
+        target: {
+          tabId,
+        },
+      })
+
       // If it not a macOS, we will inject CSS to design the scrollbar
       if (!navigator.userAgent.includes('Mac OS X')) {
         browser.scripting.insertCSS({
diff --git a/src/background/resetWebsiteStyle.ts b/src/background/resetWebsiteStyle.ts
index 9e96629c..26894e0e 100644
--- a/src/background/resetWebsiteStyle.ts
+++ b/src/background/resetWebsiteStyle.ts
@@ -3,66 +3,41 @@ export const resetCss = `
   * this stylesheet is used to reset the styles of the bilibili default style
   */
 
-:root {
-  --bew-bg: hsl(220, 14%, 96%);
+// :root {
+//   --bew-bg: hsl(220, 14%, 96%);
+// }
 
-  // --band_blue: var(--bew-theme-color);
-  // --text1: var(--bew-text-1);
-  // --text2: var(--bew-text-2);
-  // --text3: var(--bew-text-3);
-  // --bg1: var(--bew-content-1);
-  // --bg2: var(--bew-content-1);
-  // --bg3: var(--bew-content-1);
-  // --line-light: var(--bew-fill-2);
-  // --line_regular: var(--bew-fill-3);
-  // --line_bold: var(--bew-fill-4);
-}
-
-:root.dark {
-  --bew-bg: hsl(230 12% 6%);
-}
+// :root.dark {
+//   --bew-bg: hsl(230 12% 6%);
+// }
 
 html,
 body {
   font-size: 14px !important;
   min-width: unset !important;
+  filter: none !important;
 }
 
-html, body {
-  background-color: var(--bew-bg);
-}
-a,
-a:hover {
-  color: unset;
-}
+// html, body {
+//   background-color: var(--bew-bg);
+// }
 
-/*
-// button {
-//   border: unset;
-//   background: unset;
+// /* hide the original home page */
+// .login-tip {
+//   display: none;
+// }
 
-//   &:focus,
-//   &:active {
-//     background: currentColor;
-//   }
-// }*/
-
-/* hide the original home page */
-.login-tip {
-  display: none;
-}
-
-body > #i_cecream,
-#i_cecream *,
-#app,
-.international-footer {
-  position: absolute;
-  top: 200vh;
-  visibility: hidden !important;
-  width: 0;
-  height: 0;
-  overflow: hidden !important;
-  pointer-events: none !important;
-  display: none;
-}
+// body > #i_cecream,
+// #i_cecream *,
+// /* #app, */
+// .international-footer {
+//   position: absolute;
+//   top: 200vh;
+//   visibility: hidden !important;
+//   width: 0;
+//   height: 0;
+//   overflow: hidden !important;
+//   pointer-events: none !important;
+//   display: none;
+// }
 `
diff --git a/src/components/Button.vue b/src/components/Button.vue
index fea14801..0d4769b7 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -14,6 +14,7 @@ interface Props {
   color?: string
   textColor?: string
   strong?: boolean
+  round?: boolean
 }
 
 // const props = withDefaults(defineProps<Props>(), {})
@@ -37,7 +38,7 @@ function handleClick(evt: MouseEvent) {
       ${strong ? 'b-button--strong' : ''}
       ${color || textColor ? 'b-button--custom-color' : ''}
     `"
-    :style="{ backgroundColor: color, color: textColor }"
+    :style="{ 'backgroundColor': color, 'color': textColor, '--b-radius': round ? '50px' : '' }"
     @click="handleClick"
   >
     <slot name="left" />
@@ -59,7 +60,7 @@ function handleClick(evt: MouseEvent) {
   --at-apply: bg-$b-color hover:bg-$b-color-hover
     rounded-$b-radius p-$b-padding transform-gpu active:scale-95
     duration-300 flex items-center gap-2 text-size-$b-font-size
-    text-$b-text-color;
+    text-$b-text-color lh-1.5em;
 
     & svg {
       --at-apply: text-size-$b-icon-size
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 5f0367dc..6a38ebad 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -160,6 +160,7 @@ function handleKeyDown() {
         @keyup.enter="navigateToSearchResultPage(keyword)"
         @keyup.up="handleKeyUp"
         @keyup.down="handleKeyDown"
+        @keydown.stop="() => {}"
       >
       <button
         p-2
@@ -174,7 +175,7 @@ function handleKeyDown() {
         style="--un-drop-shadow: drop-shadow(0 0 6px var(--bew-theme-color)) "
         @click="navigateToSearchResultPage(keyword)"
       >
-        <tabler:search />
+        <tabler:search block align-middle />
       </button>
     </div>
 
@@ -205,7 +206,7 @@ function handleKeyDown() {
             pointer-events-auto
             cursor-pointer
             text="base $bew-text-2"
-            leading-0
+            leading-0 p-0
             @click.stop="handleDelete(item.value)"
           >
             <ic-baseline-clear />
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index cc38fb19..2dbad6fa 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -59,20 +59,20 @@ label {
 input[type="range"] {
   &::-webkit-slider-thumb {
     --at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
-      border-2 border-$bew-border-color cursor-pointer;
+      ring-$bew-border-color ring-2 cursor-pointer duration-300;
   }
 
   &::-webkit-slider-thumb:hover {
-    --at-apply: border-$bew-theme-color;
+    --at-apply: ring-$bew-theme-color;
   }
 
   &::-moz-range-thumb {
     --at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
-      border-2 border-$bew-border-color cursor-pointer;
+      ring-$bew-border-color ring-2 cursor-pointer duration-300;
   }
 
   &::-moz-range-thumb:hover {
-    --at-apply: border-$bew-theme-color;
+    --at-apply: ring-$bew-theme-color;
   }
 }
 </style>
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 74a31129..f37e1767 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -200,7 +200,7 @@ function getNewMomentsCount() {
         opacity="100"
         pointer-events-none
         z--1
-        :style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,.8), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
+        :style="{ background: settings.wallpaper ? 'linear-gradient(rgba(0,0,0,4), transparent)' : `linear-gradient(var(--bew-bg), transparent)` }"
       />
     </Transition>
 
@@ -209,7 +209,9 @@ function getNewMomentsCount() {
       @mouseenter.self="showLogoMenuDropdown()"
       @mouseleave.self="closeLogoMenuDropdown()"
     >
-      <div ref="logo" class="logo">
+      <a
+        ref="logo" class="logo" href="//www.bilibili.com"
+      >
         <svg
           t="1645466458357"
           class="icon"
@@ -226,14 +228,14 @@ function getNewMomentsCount() {
           />
         </svg>
 
-        <tabler:chevron-down
+        <!-- <tabler:chevron-down
           w="!4"
           h="!4"
           m="l-4"
           icon="stroke-4"
           :style="{ color: settings.wallpaper && showTopbarMask ? 'white' : 'var(--bew-text-1)' }"
-        />
-      </div>
+        /> -->
+      </a>
       <Transition name="slide-in">
         <TopbarChannelsPop
           v-if="showChannelsPop"
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 0baf31a6..3a8eb603 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -1,6 +1,5 @@
 // import { onMessage } from 'webext-bridge'
 import { createApp } from 'vue'
-import type { App as AppType } from 'vue'
 import App from './views/App.vue'
 import { setupApp } from '~/logic/common-setup'
 import { i18n } from '~/utils/i18n'
@@ -63,7 +62,16 @@ function injectApp() {
     setupApp(app)
     app.use(i18n).mount(root)
   }
-  else {
+  else if (
+    // video page
+    /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)
+    // watch later playlist
+    || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl)
+    // favorite playlist
+    || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl)
+    // search page
+    || /https?:\/\/search.bilibili.com\.*/.test(currentUrl)
+  ) {
     // const originalPageContent = document.querySelector('#i_cecream')
     // if (originalPageContent)
     //   originalPageContent.innerHTML = ''
@@ -77,6 +85,12 @@ function injectApp() {
     styleEl.setAttribute('rel', 'stylesheet')
     styleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
     shadowDOM.appendChild(styleEl)
+
+    const newStyleEl = document.createElement('link')
+    newStyleEl.setAttribute('rel', 'stylesheet')
+    newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css'))
+    document.body.appendChild(newStyleEl)
+
     shadowDOM.appendChild(root)
 
     // inject svg icons
@@ -90,5 +104,3 @@ function injectApp() {
     app.use(i18n).mount(root)
   }
 }
-
-export default app as AppType
diff --git a/src/contentScripts/views/Anime/components/AnimeCard.vue b/src/contentScripts/views/Anime/components/AnimeCard.vue
index cbe5e951..e34426ad 100644
--- a/src/contentScripts/views/Anime/components/AnimeCard.vue
+++ b/src/contentScripts/views/Anime/components/AnimeCard.vue
@@ -72,7 +72,7 @@ defineProps<{
         <img
           :src="`${removeHttpFromUrl(cover)}@466w_622h.webp`"
           :alt="title"
-          rounded="$bew-radius" aspect="12/16"
+          rounded="$bew-radius" aspect="12/16" max-w-full w-full
         >
 
         <!-- image after hovering -->
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 2e27484a..47192c8a 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -11,14 +11,15 @@ import History from './History/History.vue'
 import WatchLater from './WatchLater/WatchLater.vue'
 import Favorites from './Favorites/Favorites.vue'
 import Video from './Video/Video.vue'
-import { accessKey, activatedPage, settings } from '~/logic'
+import { accessKey, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
 import { getUserID, hexToRGBA, smoothScrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
+const activatedPage = ref<AppPage>(AppPage.Home)
 const { locale } = useI18n()
-const [showSettings, toggle] = useToggle(false)
+const [showSettings, toggleSettings] = useToggle(false)
 const isDark = useDark({
   onChanged: (isDark: boolean) => {
     if (isDark) {
@@ -101,15 +102,6 @@ watch(() => accessKey.value, () => {
     accessKey.value = ''
 })
 
-watch(() => settings.value.wallpaper, () => {
-  setAppWallpaper()
-})
-
-watch(() => settings.value.searchPageWallpaper, () => {
-  if (activatedPage.value === AppPage.Search)
-    setAppWallpaper()
-})
-
 watch(() => settings.value.wallpaperMaskOpacity, () => {
   setAppWallpaperMaskingOpacity()
 })
@@ -121,10 +113,8 @@ watch(() => settings.value.searchPageWallpaperMaskOpacity, () => {
 watch(() => activatedPage.value, (newValue, oldValue) => {
   // If u have set the `individuallySetSearchPageWallpaper`, reapply the wallpaper when the new page is search page
   // or when switching from a search page to another page, since search page has its own wallpaper.
-  if (settings.value.individuallySetSearchPageWallpaper && (newValue === AppPage.Search || oldValue === AppPage.Search)) {
-    setAppWallpaper()
+  if (settings.value.individuallySetSearchPageWallpaper && (newValue === AppPage.Search || oldValue === AppPage.Search))
     setAppWallpaperMaskingOpacity()
-  }
 })
 
 onMounted(() => {
@@ -153,14 +143,14 @@ onMounted(() => {
   }
 
   if (!isBilibiliHomePage.value) {
-    const originalTopBar: HTMLElement = document.querySelector('#biliMainHeader') as HTMLElement
-    originalTopBar!.style.visibility = 'hidden'
+    const originalTopBar: HTMLElement = document.querySelector('#biliMainHeader, #bili-header-container') as HTMLElement
+    if (originalTopBar)
+      originalTopBar.style.visibility = 'hidden'
   }
 
   setAppAppearance()
   setAppLanguage()
   setAppThemeColor()
-  setAppWallpaper()
   setAppWallpaperMaskingOpacity()
 })
 
@@ -210,9 +200,9 @@ function setAppAppearance() {
   else
     mainAppRef.value?.classList.remove('dark')
 
-  // Override Bilibili Evolved background color
-  document.body.style.setProperty('background-color', 'unset', 'important')
-  document.documentElement.style.setProperty('background-color', 'var(--bew-bg)', 'important')
+  // // Override Bilibili Evolved background color
+  // document.body.style.setProperty('background-color', 'unset', 'important')
+  // document.documentElement.style.setProperty('background-color', 'var(--bew-bg)', 'important')
 }
 
 function setAppThemeColor() {
@@ -222,19 +212,10 @@ function setAppThemeColor() {
     for (let i = 0; i < 9; i++)
       bewlyElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
   }
-}
 
-function setAppWallpaper() {
-  nextTick(() => {
-    if (settings.value.individuallySetSearchPageWallpaper && activatedPage.value === AppPage.Search)
-      document.documentElement.style.backgroundImage = `url(${settings.value.searchPageWallpaper})`
-    else
-      document.documentElement.style.backgroundImage = `url(${settings.value.wallpaper})`
-
-    document.documentElement.style.backgroundSize = 'cover'
-    document.documentElement.style.backgroundPosition = 'center'
-    document.documentElement.style.transition = 'backgroundImage .5s ease-in-out'
-  })
+  document.body.style.setProperty('--bew-theme-color', settings.value.themeColor)
+  for (let i = 0; i < 9; i++)
+    document.body.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
 }
 
 function setAppWallpaperMaskingOpacity() {
@@ -257,23 +238,47 @@ function handleBackToTop() {
 </script>
 
 <template>
-  <!-- background mask -->
-  <div
-    v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (activatedPage !== AppPage.Search && settings.enableWallpaperMasking)"
-    pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" z--1
-    :style="{
-      backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
-    }"
-  />
-  <div
-    v-else-if="settings.individuallySetSearchPageWallpaper && activatedPage === AppPage.Search && settings.searchPageEnableWallpaperMasking"
-    pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask" z--1
-    :style="{
-      backdropFilter: `blur(${settings.searchPageWallpaperBlurIntensity}px)`,
-    }"
-  />
+  <template v-if="isBilibiliHomePage">
+    <template v-if="activatedPage === AppPage.Search">
+      <!-- background -->
+      <div
+        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-homepage-bg"
+        :style="{ backgroundImage: `url(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaper : settings.wallpaper})` }"
+      />
+      <!-- background mask -->
+      <transition name="fade">
+        <div
+          v-if="(!settings.individuallySetSearchPageWallpaper && settings.enableWallpaperMasking) || (settings.searchPageEnableWallpaperMasking)"
+          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask"
+          :style="{
+            backdropFilter: `blur(${settings.individuallySetSearchPageWallpaper ? settings.searchPageWallpaperBlurIntensity : settings.wallpaperBlurIntensity}px)`,
+          }"
+        />
+      </transition>
+    </template>
+    <template v-else>
+      <!-- background -->
+      <div
+        pos="absolute top-0 left-0" w-full h-full duration-300 bg="cover center $bew-bg"
+        :style="{ backgroundImage: `url(${settings.wallpaper})` }"
+      />
+      <!-- background mask -->
+      <transition name="fade">
+        <div
+          v-if="settings.enableWallpaperMasking"
+          pos="absolute top-0 left-0" w-full h-full pointer-events-none bg="$bew-bg-mask"
+          :style="{
+            backdropFilter: `blur(${settings.wallpaperBlurIntensity}px)`,
+          }"
+        />
+      </transition>
+    </template>
+  </template>
 
-  <div ref="mainAppRef" text="$bew-text-1" transition="opacity duration-300" h-100vh overflow-y-scroll :style="{ opacity: mainAppOpacity }">
+  <div
+    ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-scroll z-60
+    :style="{ opacity: mainAppOpacity, height: isBilibiliHomePage ? '100vh' : '0' }"
+  >
     <div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
       <Transition name="topbar">
         <Topbar
@@ -305,7 +310,7 @@ function handleBackToTop() {
             <Tooltip :content="$t('dock.search')" :placement="tooltipPlacement">
               <button
                 class="dock-item"
-                :class="{ active: activatedPage === AppPage.Search && !isVideoPage }"
+                :class="{ active: activatedPage === AppPage.Search }"
                 @click="changeActivatePage(AppPage.Search)"
               >
                 <tabler:search />
@@ -315,7 +320,7 @@ function handleBackToTop() {
             <Tooltip :content="$t('dock.home')" :placement="tooltipPlacement">
               <button
                 class="dock-item"
-                :class="{ active: activatedPage === AppPage.Home && !isVideoPage }"
+                :class="{ active: activatedPage === AppPage.Home }"
                 @click="changeActivatePage(AppPage.Home)"
               >
                 <tabler:home />
@@ -325,7 +330,7 @@ function handleBackToTop() {
             <Tooltip :content="$t('dock.anime')" :placement="tooltipPlacement">
               <button
                 class="dock-item"
-                :class="{ active: activatedPage === AppPage.Anime && !isVideoPage }"
+                :class="{ active: activatedPage === AppPage.Anime }"
                 @click="changeActivatePage(AppPage.Anime)"
               >
                 <tabler:device-tv />
@@ -335,7 +340,7 @@ function handleBackToTop() {
             <Tooltip :content="$t('dock.history')" :placement="tooltipPlacement">
               <button
                 class="dock-item"
-                :class="{ active: activatedPage === AppPage.History && !isVideoPage }"
+                :class="{ active: activatedPage === AppPage.History }"
                 @click="changeActivatePage(AppPage.History)"
               >
                 <tabler:clock />
@@ -355,7 +360,7 @@ function handleBackToTop() {
             <Tooltip :content="$t('dock.watch_later')" :placement="tooltipPlacement">
               <button
                 class="dock-item"
-                :class="{ active: activatedPage === AppPage.WatchLater && !isVideoPage }"
+                :class="{ active: activatedPage === AppPage.WatchLater }"
                 @click="changeActivatePage(AppPage.WatchLater)"
               >
                 <iconoir:playlist-play />
@@ -383,21 +388,37 @@ function handleBackToTop() {
             </Tooltip>
 
             <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
-              <button class="dock-item" @click="toggle()">
+              <button class="dock-item" @click="toggleSettings()">
                 <tabler:settings />
               </button>
             </Tooltip>
           </div>
         </aside>
+        <aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-10>
+          <div flex="~ gap-2 col">
+            <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
+              <Button size="small" round shadow="$bew-shadow-1" w-45px h-45px @click="toggleDark()">
+                <tabler:moon-stars v-if="isDark" text-xl shrink-0 lh-0 />
+                <tabler:sun v-else text-xl shrink-0 lh-0 />
+              </Button>
+            </Tooltip>
+            <Tooltip :content="$t('dock.settings')" placement="left">
+              <Button size="small" round shadow="$bew-shadow-1" w-45px h-45px @click="toggleSettings">
+                <tabler:settings text-xl shrink-0 lh-0 />
+              </Button>
+            </Tooltip>
+          </div>
+        </aside>
 
         <main
+          v-if="isBilibiliHomePage"
           p="t-80px" m-auto
           relative
           :w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
         >
           <!-- control button group -->
           <div
-            v-if="isBilibiliHomePage && activatedPage !== AppPage.Search"
+            v-if="activatedPage !== AppPage.Search"
             pos="fixed right-24 bottom-4" z-4
           >
             <!-- refresh button -->
@@ -420,9 +441,8 @@ function handleBackToTop() {
             </Button>
           </div>
 
-          <Transition v-if="isBilibiliHomePage" name="fade">
+          <Transition name="fade">
             <Component :is="pages[activatedPage]" :key="dynamicComponentKey" absolute w-full />
-            <!-- <Video v-else /> -->
           </Transition>
         </main>
       </div>
@@ -444,6 +464,10 @@ function handleBackToTop() {
 }
 
 .dock-wrap {
+  svg {
+    --at-apply: block align-middle;
+  }
+
   &.left {
     --at-apply: left-2;
   }
diff --git a/src/logic/storage.ts b/src/logic/storage.ts
index df9b14eb..2943a2aa 100644
--- a/src/logic/storage.ts
+++ b/src/logic/storage.ts
@@ -1,10 +1,8 @@
 import { useStorageLocal } from '~/composables/useStorageLocal'
-import { AppPage } from '~/enums/appEnums'
 import type { Settings } from '~/models/models'
 
 export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo')
 export const accessKey = useStorageLocal('accessKey', '')
-export const activatedPage = useStorageLocal('activatedPage', ref<AppPage>(AppPage.Home))
 
 export const settings = useStorageLocal('settings', ref<Settings>({
   language: '',
diff --git a/src/manifest.ts b/src/manifest.ts
index 7658db95..1646a163 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -39,7 +39,7 @@ export async function getManifest() {
     host_permissions: ['*://*.bilibili.com/*', '*://*.mcbbs.net/*'],
     content_scripts: [
       {
-        matches: ['http://www.bilibili.com/*', 'https://www.bilibili.com/*'],
+        matches: ['*://www.bilibili.com/*', '*://search.bilibili.com/*'],
         js: ['./dist/contentScripts/index.global.js'],
         run_at: 'document_start',
         match_about_blank: true,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e80fe26c..1102dc3b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,4 +1,5 @@
-import '@unocss/reset/tailwind.css'
+// import '@unocss/reset/tailwind.css'
 import './variables.scss'
 import './main.scss'
+import './reset.scss'
 import 'uno.css'
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a984a381..3616f6c1 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -8,8 +8,12 @@
   color-scheme: dark;
 }
 
-html, body {
-  font-size: 14px!important;
+html,
+body {
+  // font-size: 14px !important;
+  // min-width: unset !important;
+  // filter: none !important;
+  background-color: var(--bew-bg) !important;
 }
 
 ::-webkit-scrollbar {
@@ -26,7 +30,7 @@ html > ::-webkit-scrollbar-track {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgba(120, 120, 122, .6);
+  background-color: rgba(120, 120, 122, 0.6);
   border-radius: 20px;
 }
 
@@ -34,22 +38,6 @@ html > ::-webkit-scrollbar-track {
   background: transparent;
 }
 
-// html,
-// body,
-// #app {
-//   margin: 0;
-//   padding: 0;
-// }
-
-// html {
-//   filter: none !important;
-// }
-
-// body {
-//   background: var(--bew-bg) !important;
-//   color: var(--bew-text-1);
-// }
-
 .keep-two-lines {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -59,6 +47,25 @@ html > ::-webkit-scrollbar-track {
   -webkit-line-clamp: 2;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   --at-apply: color-$bew-text-1;
-}
\ No newline at end of file
+}
+
+// adjust watcher later playlist container
+.playlist-container {
+  padding: 0 70px;
+}
+
+// video page
+.video-container-v1 {
+  padding: 0 70px;
+}
+
+.card-loaded {
+  background-color: var(--bew-elevated-solid-1);
+}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 00000000..e7699af7
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,463 @@
+// copy from @unocss/reset/tailwind.css
+*,
+::before,
+::after {
+  // box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  // margin: 0; /* 2 */
+  // padding: 0; /* 3 */
+}
+
+button {
+  border: unset;
+}
+
+:host {
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+  */
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box; /* 1 */
+    // border-width: 0; /* 2 */
+    // border-style: solid; /* 2 */
+    // border-color: #e5e7eb; /* 2 */
+  }
+
+  // /*
+  // 1. Use a consistent sensible line-height in all browsers.
+  // 2. Prevent adjustments of font size after orientation changes in iOS.
+  // 3. Use a more readable tab size.
+  // 4. Use the user's configured `sans` font-family by default.
+  // */
+
+  // html {
+  //   line-height: 1.5; /* 1 */
+  //   -webkit-text-size-adjust: 100%; /* 2 */
+  //   -moz-tab-size: 4; /* 3 */
+  //   tab-size: 4; /* 3 */
+  //   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+  //     'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+  //     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  //     'Noto Color Emoji'; /* 4 */
+  // }
+
+  // /*
+  // 1. Remove the margin in all browsers.
+  // 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+  // */
+
+  // body {
+  //   margin: 0; /* 1 */
+  //   line-height: inherit; /* 2 */
+  // }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Ensure horizontal rules are visible by default.
+  */
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+  */
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+  */
+
+  // h1,
+  // h2,
+  // h3,
+  // h4,
+  // h5,
+  // h6 {
+  //   font-size: inherit;
+  //   font-weight: inherit;
+  // }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+  */
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+  */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured `mono` font family by default.
+  2. Correct the odd `em` font sizing in all browsers.
+  */
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+  */
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+  */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+  */
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  // /*
+  // 1. Change the font styles in all browsers.
+  // 2. Remove the margin in Firefox and Safari.
+  // 3. Remove default padding in all browsers.
+  // */
+
+  // button,
+  // input,
+  // optgroup,
+  // select,
+  // textarea {
+  //   font-family: inherit; /* 1 */
+  //   font-feature-settings: inherit; /* 1 */
+  //   font-variation-settings: inherit; /* 1 */
+  //   font-size: 100%; /* 1 */
+  //   font-weight: inherit; /* 1 */
+  //   line-height: inherit; /* 1 */
+  //   color: inherit; /* 1 */
+  //   // margin: 0; /* 2 */
+  //   // padding: 0; /* 3 */
+  // }
+
+  // button {
+  //   border: unset;
+  // }
+
+  /*
+  Remove the inheritance of text transform in Edge and Firefox.
+  */
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  // /*
+  // 1. Correct the inability to style clickable types in iOS and Safari.
+  // 2. Remove default button styles.
+  // */
+
+  // button,
+  // [type='button'],
+  // [type='reset'],
+  // [type='submit'] {
+  //   -webkit-appearance: button; /* 1 */
+  //   background-color: transparent; /* 2 */
+  //   background-image: none; /* 2 */
+  // }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+  */
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  */
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+  */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+  */
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  1. Correct the odd appearance in Chrome and Safari.
+  2. Correct the outline style in Safari.
+  */
+
+  [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+  */
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Correct the inability to style clickable types in iOS and Safari.
+  2. Change font properties to `inherit` in Safari.
+  */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+  */
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Removes the default spacing and border for appropriate elements.
+  */
+
+  // blockquote,
+  // dl,
+  // dd,
+  // h1,
+  // h2,
+  // h3,
+  // h4,
+  // h5,
+  // h6,
+  // hr,
+  // figure,
+  // p,
+  // pre {
+  //   margin: 0;
+  // }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  // ol,
+  // ul,
+  // menu {
+  //   list-style: none;
+  //   margin: 0;
+  //   padding: 0;
+  // }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+  */
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  2. Set the default placeholder color to the user's configured gray 400 color.
+  */
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1; /* 1 */
+    color: #9ca3af; /* 2 */
+  }
+
+  /*
+  Set the default cursor for buttons.
+  */
+
+  button,
+  [role='button'] {
+    cursor: pointer;
+  }
+
+  /*
+  Make sure disabled buttons don't get the pointer cursor.
+  */
+  :disabled {
+    cursor: default;
+  }
+
+  /*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+     This can trigger a poorly considered lint error in some tools but is included by design.
+  */
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  // /*
+  // Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  // */
+
+  // img,
+  // video {
+  //   max-width: 100%;
+  //   height: auto;
+  // }
+
+  /* Make elements with the HTML hidden attribute stay hidden by default */
+  [hidden] {
+    display: none;
+  }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3c4d284e..7d0076f9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -81,7 +81,8 @@
   --bew-text-4: hsl(215 19% 72%);
   // #endregion
 
-  --bew-bg: hsl(220 14% 96%);
+  --bew-bg: hsl(0 0% 100%);
+  --bew-homepage-bg: hsl(220 14% 96%);
   --bew-bg-mask-opacity: 0;
   --bew-bg-mask: hsl(220 14% 96% / var(--bew-bg-mask-opacity));
 
@@ -122,6 +123,7 @@
   --bew-text-4: hsl(215 19% 25%);
 
   --bew-bg: hsl(230 12% 6%);
+  --bew-homepage-bg: hsl(230 12% 6%);
   --bew-bg-mask: hsl(230 12% 6% / var(--bew-bg-mask-opacity));
 
   --bew-content-1: hsl(230 12% 13% / var(--bew-content-opacity));
@@ -143,14 +145,302 @@
 }
 
 :root {
-  --band_blue: var(--bew-theme-color);
+  // --band_blue: var(--bew-theme-color);
+  // --text1: var(--bew-text-1);
+  // --text2: var(--bew-text-2);
+  // --text3: var(--bew-text-3);
+  // --bg1: var(--bew-content-1);
+  // --bg2: var(--bew-content-1);
+  // --bg3: var(--bew-content-1);
+  // --line-light: var(--bew-fill-2);
+  // --line_regular: var(--bew-fill-3);
+  // --line_bold: var(--bew-fill-4);
+
+  // --v_brand_pink: var(--bew-theme-color, #ff6699);
+  // --v_brand_pink_thin: var(--bew-theme-color-20, #ffecf1);
+  // --v_brand_blue: var(--bew-theme-color, #00aeec);
+  // --v_brand_blue_thin: var(--bew-theme-color-20, #dff6fd);
+  // --v_stress_red: var(--stress_red, #f85a54);
+  // --v_stress_red_thin: var(--stress_red_thin, #feecea);
+  // --v_success_green: var(--success_green, #2ac864);
+  // --v_success_green_thin: var(--success_green_thin, #e4f8ea);
+  // --v_operate_orange: var(--operate_orange, #ff7f24);
+  // --v_operate_orange_thin: var(--operate_orange_thin, #fff0e3);
+  // --v_pay_yellow: var(--pay_yellow, #ffb027);
+  // --v_pay_yellow_thin: var(--pay_yellow_thin, #fff6e4);
+  // --v_bg1: var(--bew-content-solid-1);
+  // --v_bg2: var(--bew-content-solid-1);
+  // --v_bg3: var(--bew-content-solid-1);
+  // --v_bg1_float: var(--bew-elevated-solid-1, #ffffff);
+  // --v_bg2_float: var(--bew-elevated-solid-2, #f1f2f3);
+  // --v_text_white: var(--text_white, #ffffff);
+  // --v_text1: var(--bew-text-1);
+  // --v_text2: var(--bew-text-2);
+  // --v_text3: var(--bew-text-3);
+  // --v_text4: var(--bew-text-4);
+  // --v_text_link: var(--bew-theme-color);
+  // --v_text_notice: var(--text_notice, #e58900);
+  // --v_line_light: var(--bew-fill-1);
+  // --v_line_regular: var(--bew-fill-2);
+  // --v_line_bold: var(--bew-fill-3);
+  // --v_graph_white: var(--graph_white, #ffffff);
+  // --v_graph_bg_thin: var(--graph_bg_thin, #f6f7f8);
+  // --v_graph_bg_regular: var(--graph_bg_regular, #f1f2f3);
+  // --v_graph_bg_thick: var(--graph_bg_thick, #e3e5e7);
+  // --v_graph_weak: var(--graph_weak, #c9ccd0);
+  // --v_graph_medium: var(--graph_medium, #9499a0);
+  // --v_graph_icon: var(--graph_icon, #61666d);
+  // --v_shadow: var(--shadow, #000000);
+  // --v_brand_pink_hover: var(--brand_pink_hover, #ff8cb0);
+  // --v_brand_pink_active: var(--brand_pink_active, #e84b85);
+  // --v_brand_pink_disabled: var(--brand_pink_disabled, #ffb3ca);
+  // --v_brand_blue_hover: var(--brand_blue_hover, #40c5f1);
+  // --v_brand_blue_active: var(--brand_blue_active, #008ac5);
+  // --v_brand_blue_disabled: var(--brand_blue_disabled, #80daf6);
+  // --v_stress_red_hover: var(--stress_red_hover, #fa857f);
+  // --v_stress_red_active: var(--stress_red_active, #e23d3d);
+  // --v_stress_red_disabled: var(--stress_red_disabled, #fcafaa);
+  // --v_text_hover: var(--text_hover, #797f87);
+  // --v_text_active: var(--text_active, #61666d);
+  // --v_text_disabled: var(--text_disabled, #c9ccd0);
+  // --v_line_border: var(--line_border, #c9ccd0);
+  // --v_line_bolder_hover: var(--line_bolder_hover, #e3e5e7);
+  // --v_line_bolder_active: var(--line_bolder_active, #aeb3b9);
+  // --v_line_bolder_disabled: var(--line_bolder_disabled, #f1f2f3);
+}
+
+:root.dark,
+.dark body {
+  --brand_pink: var(--bew-theme-color);
+  --brand_pink_thin: var(--bew-theme-color-20);
+  --brand_blue: var(--bew-theme-color);
+  --brand_blue_thin: var(--bew-theme-color-20);
+  --stress_red: var(--Re5);
+  --stress_red_thin: var(--Re1);
+  --success_green: var(--Gr5);
+  --success_green_thin: var(--Gr1);
+  --operate_orange: var(--Or5);
+  --operate_orange_thin: var(--Or1);
+  --pay_yellow: var(--Ye5);
+  --pay_yellow_thin: var(--Ye1);
+  --bg1: var(--bew-bg);
+  --bg2: var(--bew-content-solid-1);
+  --bg3: var(--bew-content-solid-1);
+  --bg1_float: var(--bew-elevated-solid-1);
+  --bg2_float: var(--bew-elevated-solid-2);
+  --text_white: var(--Wh0_u);
   --text1: var(--bew-text-1);
   --text2: var(--bew-text-2);
   --text3: var(--bew-text-3);
-  --bg1: var(--bew-content-1);
-  --bg2: var(--bew-content-1);
-  --bg3: var(--bew-content-1);
-  --line-light: var(--bew-fill-2);
-  --line_regular: var(--bew-fill-3);
-  --line_bold: var(--bew-fill-4);
+  --text4: var(--bew-text-4);
+  --text_link: var(--bew-theme-color);
+  --text_notice: var(--Ye6);
+  --line_light: var(--bew-fill-1);
+  --line_regular: var(--bew-fill-2);
+  --line_bold: var(--bew-fill-3);
+  --graph_white: var(--bew-content-solid-1);
+  --graph_bg_thin: var(--bew-content-solid-1);
+  --graph_bg_regular: var(--bew-content-solid-1);
+  --graph_bg_thick: var(--bew-content-solid-1);
+  --graph_weak: var(--Ga3);
+  --graph_medium: var(--Ga5);
+  --graph_icon: var(--Ga7);
+  --shadow: var(--Ba0);
+
+  --bpx-primary-color: var(--bew-theme-color);
+  --bpx-fn-color: var(--bew-theme-color);
+  --bpx-fn-hover-color: var(--bew-theme-color);
+
+  --v_brand_blue: var(--brand_blue);
+  --v_brand_blue_thin: var(--brand_blue_thin);
+}
+
+:root.dark {
+  --Ga0: #0d0d0e;
+  --Ga0_s: #1e2022;
+  --Ga0_t: #1e2022;
+  --Ga1: #000000;
+  --Ga1_s: #232527;
+  --Ga1_t: #232527;
+  --Ga1_e: #232527;
+  --Ga2: #2f3134;
+  --Ga2_t: #2f3134;
+  --Ga3: #46494d;
+  --Ga3_t: #46494d;
+  --Ga4: #5e6267;
+  --Ga4_t: #5e6267;
+  --Ga5: #757a81;
+  --Ga5_t: #757a81;
+  --Ga6: #8b9097;
+  --Ga6_t: #8b9097;
+  --Ga7: #a2a7ae;
+  --Ga7_t: #a2a7ae;
+  --Ga8: #b9bdc2;
+  --Ga8_t: #b9bdc2;
+  --Ga9: #d0d3d7;
+  --Ga9_t: #d0d3d7;
+  --Ga10: #e7e9eb;
+  --Ga10_t: #e7e9eb;
+  --Ga11: #242628;
+  --Ga12: #1f2022;
+  --Wh0: #17181a;
+  --Wh0_t: #17181a;
+  --Ba0: #000000;
+  --Ba0_s: #ffffff;
+  --Ba0_t: #000000;
+  --Pi0: #26161c;
+  --Pi1: #2f1a22;
+  --Pi2: #472030;
+  --Pi3: #76304b;
+  --Pi4: #a73e65;
+  --Pi5: #d44e7d;
+  --Pi5_t: #d44e7d;
+  --Pi6: #dc6d94;
+  --Pi7: #e38caa;
+  --Pi8: #ebabc1;
+  --Pi9: #f2cad8;
+  --Pi10: #fae9ef;
+  --Ma0: #261525;
+  --Ma1: #2e182d;
+  --Ma2: #461c43;
+  --Ma3: #72296c;
+  --Ma4: #a13396;
+  --Ma5: #cb41bb;
+  --Ma6: #d462c7;
+  --Ma7: #dd83d3;
+  --Ma8: #e6a4de;
+  --Ma9: #efc5ea;
+  --Ma10: #f8e6f6;
+  --Re0: #261314;
+  --Re1: #2e1617;
+  --Re2: #471a1c;
+  --Re3: #742728;
+  --Re4: #a63131;
+  --Re5: #d1403e;
+  --Re6: #d9615f;
+  --Re7: #e18281;
+  --Re8: #e9a3a2;
+  --Re9: #f1c5c4;
+  --Re10: #f9e5e5;
+  --Or0: #28180f;
+  --Or1: #301b10;
+  --Or2: #4a230e;
+  --Or3: #783610;
+  --Or4: #a9490d;
+  --Or5: #d66011;
+  --Or6: #dd7c3a;
+  --Or7: #e49764;
+  --Or8: #ebb38d;
+  --Or9: #f2ceb6;
+  --Or10: #faeadf;
+  --Ye0: #2a1e0f;
+  --Ye1: #342410;
+  --Ye2: #4d300b;
+  --Ye3: #7c4c08;
+  --Ye4: #ad6800;
+  --Ye5: #db8700;
+  --Ye6: #e19c2c;
+  --Ye7: #e7b158;
+  --Ye8: #eec584;
+  --Ye9: #f4dab1;
+  --Ye10: #faefdd;
+  --Ly0: #2a2310;
+  --Ly1: #332a11;
+  --Ly2: #49390c;
+  --Ly3: #745909;
+  --Ly4: #a27c00;
+  --Ly5: #cca000;
+  --Ly6: #d5b02c;
+  --Ly7: #dec158;
+  --Ly8: #e7d184;
+  --Ly9: #efe2b1;
+  --Ly10: #f8f2dd;
+  --Lg0: #19220f;
+  --Lg1: #1e2911;
+  --Lg2: #273c0e;
+  --Lg3: #3c600f;
+  --Lg4: #50840b;
+  --Lg5: #67a70e;
+  --Lg6: #81b638;
+  --Lg7: #9cc562;
+  --Lg8: #b6d58b;
+  --Lg9: #d0e4b5;
+  --Lg10: #ebf3df;
+  --Gr0: #102017;
+  --Gr1: #11271b;
+  --Gr2: #123923;
+  --Gr3: #175c34;
+  --Gr4: #198042;
+  --Gr5: #1fa251;
+  --Gr6: #46b26f;
+  --Gr7: #6dc28d;
+  --Gr8: #93d2ab;
+  --Gr9: #bae2c9;
+  --Gr10: #e1f3e8;
+  --Cy0: #0c1f20;
+  --Cy1: #0d2627;
+  --Cy2: #093739;
+  --Cy3: #085b5c;
+  --Cy4: #028080;
+  --Cy5: #03a29f;
+  --Cy6: #2fb2b0;
+  --Cy7: #5ac2c0;
+  --Cy8: #86d2d1;
+  --Cy9: #b2e2e1;
+  --Cy10: #ddf3f3;
+  --Lb0: #0a1b23;
+  --Lb1: #0b202a;
+  --Lb2: #082d40;
+  --Lb3: #064a69;
+  --Lb4: #006996;
+  --Lb5: #0087bd;
+  --Lb6: #2c9cc8;
+  --Lb7: #58b1d4;
+  --Lb8: #84c5df;
+  --Lb9: #b1dbeb;
+  --Lb10: #ddeff6;
+  --Bl0: #151826;
+  --Bl1: #181c2f;
+  --Bl2: #1f2748;
+  --Bl3: #2e3c76;
+  --Bl4: #3b53a8;
+  --Bl5: #4b6bd4;
+  --Bl6: #6a85db;
+  --Bl7: #899ee3;
+  --Bl8: #a9b8ea;
+  --Bl9: #c8d2f2;
+  --Bl10: #e7ebf9;
+  --Pu0: #1d1628;
+  --Pu1: #221a31;
+  --Pu2: #31214c;
+  --Pu3: #4e317d;
+  --Pu4: #6d3fb1;
+  --Pu5: #8c50e0;
+  --Pu6: #a06ee5;
+  --Pu7: #b48deb;
+  --Pu8: #c8abf0;
+  --Pu9: #dbc9f5;
+  --Pu10: #f0e8fb;
+  --Br0: #211d1b;
+  --Br1: #282320;
+  --Br2: #382f2a;
+  --Br3: #59483f;
+  --Br4: #7a6154;
+  --Br5: #9a7c6a;
+  --Br6: #ac9384;
+  --Br7: #bda99e;
+  --Br8: #cebfb7;
+  --Br9: #e0d7d1;
+  --Br10: #f2eeeb;
+  --Si0: #212325;
+  --Si1: #27292c;
+  --Si2: #36393f;
+  --Si3: #535962;
+  --Si4: #6f7987;
+  --Si5: #8c99aa;
+  --Si6: #a0abb9;
+  --Si7: #b4bcc7;
+  --Si8: #c8ced6;
+  --Si9: #dce0e5;
+  --Si10: #f0f2f4;
 }
diff --git a/vite.config.ts b/vite.config.ts
index 163ad122..88ea5ccc 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 
-import { dirname, relative } from 'path'
+import { dirname, relative } from 'node:path'
 import type { UserConfig } from 'vite'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'