diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index 4a1e3038..b8b51149 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useBewlyImage } from '~/composables/useImage'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 3e6da56f..a5a70454 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue'
 import { onKeyStroke } from '@vueuse/core'
 import Button from '~/components/Button.vue'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const props = withDefaults(defineProps<{
   title?: string
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index a67a4adc..d941d00c 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -6,6 +6,7 @@ import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import type { DockItem } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
+import { useDark } from '~/composables/useDark'
 
 defineProps<{ activatedPage: AppPage }>()
 
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 767286be..0bb6b4cc 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
+import { useDark } from '~/composables/useDark'
 import Button from '~/components/Button.vue'
 
 const emit = defineEmits(['settings-visibility-change'])
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 2c8a4f32..df73e46a 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -7,7 +7,9 @@ import {
   getSearchHistory,
   removeSearchHistory,
 } from './searchHistoryProvider'
+import { useApiClient } from '~/composables/api'
 import { findLeafActiveElement } from '~/utils/element'
+import { useBewlyImage } from '~/composables/useImage'
 
 defineProps<{
   darkenOnFocus?: boolean
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 224bac93..5dc4236b 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -8,6 +8,7 @@ import Radio from '~/components/Radio.vue'
 import Select from '~/components/Select.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
+import { useBewlyImage } from '~/composables/useImage'
 
 const { wallpapers, getBewlyImage } = useBewlyImage()
 
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index 7c81751c..54a78865 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -6,6 +6,7 @@ import Input from '~/components/Input.vue'
 import Radio from '~/components/Radio.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
+import { useBewlyImage } from '~/composables/useImage'
 
 const { searchBarCharacters, wallpapers, getBewlyImage } = useBewlyImage()
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index fc047449..d86752fb 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -17,6 +17,9 @@ import WatchLaterPop from './components/WatchLaterPop.vue'
 import { getUserID, isHomePage } from '~/utils/main'
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
+import { useBewlyApp } from '~/composables/useAppProvider'
+import { useApiClient } from '~/composables/api'
+import { useDelayedHover } from '~/composables/useDelayedHover'
 
 // import { useTopBarStore } from '~/stores/topBarStore'
 
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index 027b7982..9a2e4dc1 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -6,6 +6,7 @@ import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/u
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
+import { useApiClient } from '~/composables/api'
 
 const api = useApiClient()
 
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index aceccb8c..239d0ac1 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -10,6 +10,7 @@ import type { List as HistoryItem, HistoryResult } from '~/models/history/histor
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Progress from '~/components/Progress.vue'
+import { useApiClient } from '~/composables/api'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 67c696d3..436c4a7e 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -7,6 +7,7 @@ import type { TopBarMomentResult } from '~/models/moment/topBarMoment'
 import type { TopBarLiveMomentResult } from '~/models/moment/topBarLiveMoment'
 import { getCSRF, isHomePage, smoothScrollToTop } from '~/utils/main'
 import Tooltip from '~/components/Tooltip.vue'
+import { useApiClient } from '~/composables/api'
 
 type MomentType = 'video' | 'live' | 'article'
 interface MomentTab { type: MomentType, name: any }
diff --git a/src/components/TopBar/components/NotificationsPop.vue b/src/components/TopBar/components/NotificationsPop.vue
index e3704526..ade4efae 100644
--- a/src/components/TopBar/components/NotificationsPop.vue
+++ b/src/components/TopBar/components/NotificationsPop.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { isHomePage } from '~/utils/main'
+import { useApiClient } from '~/composables/api'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/components/TopBar/components/UserPanelPop.vue b/src/components/TopBar/components/UserPanelPop.vue
index a1d556c1..6c7e9bc8 100644
--- a/src/components/TopBar/components/UserPanelPop.vue
+++ b/src/components/TopBar/components/UserPanelPop.vue
@@ -4,6 +4,7 @@ import type { UserInfo, UserStat } from '../types'
 import { revokeAccessKey } from '~/utils/authProvider'
 import { getCSRF, getUserID, isHomePage } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
+import { useApiClient } from '~/composables/api'
 
 defineProps<{
   userInfo: UserInfo
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 0641650a..d3738999 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -6,6 +6,7 @@ import { isHomePage, removeHttpFromUrl } from '~/utils/main'
 import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import Progress from '~/components/Progress.vue'
+import { useApiClient } from '~/composables/api'
 
 const api = useApiClient()
 const watchLaterList = reactive<VideoItem[]>([])
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 12def56e..8cdecd3e 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -6,6 +6,7 @@ import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormat
 import type { VideoPreviewResult } from '~/models/video/videoPreview'
 import { settings } from '~/logic'
 import Button from '~/components/Button.vue'
+import { useApiClient } from '~/composables/api'
 
 interface Props {
   id: number
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 2478608b..fea7a5ac 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -9,6 +9,7 @@ import { injectCSS, isHomePage } from '~/utils/main'
 import { settings } from '~/logic'
 
 import { runWhenIdle } from '~/utils/lazyLoad'
+import { useDark } from '~/composables/useDark'
 
 const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
 
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 89fc783b..65fae0bd 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -10,6 +10,8 @@ import Empty from '~/components/Empty.vue'
 import HorizontalScrollView from '~/components/HorizontalScrollView.vue'
 import LongCoverCard from '~/components/LongCoverCard/LongCoverCard.vue'
 import LongCoverCardSkeleton from '~/components/LongCoverCard/LongCoverCardSkeleton.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const api = useApiClient()
 const animeWatchList = reactive<WatchListItem[]>([])
diff --git a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
index 90f14206..50cffd1e 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -5,6 +5,7 @@ import browser from 'webextension-polyfill'
 import { removeHttpFromUrl } from '~/utils/main'
 import type { Result as TimetableItem, TimetableResult } from '~/models/anime/timeTable'
 import HorizontalScrollView from '~/components/HorizontalScrollView.vue'
+import { useApiClient } from '~/composables/api'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index ea4aa916..2c53c480 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -11,6 +11,7 @@ import RightSideButtons from '~/components/RightSideButtons/RightSideButtons.vue
 import Settings from '~/components/Settings/Settings.vue'
 import TopBar from '~/components/TopBar/TopBar.vue'
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
+import { useDark } from '~/composables/useDark'
 import { AppPage, LanguageType } from '~/enums/appEnums'
 import { accessKey, settings } from '~/logic'
 import { getUserID, hexToRGBA, isHomePage, smoothScrollToTop } from '~/utils/main'
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 0a776170..3d8d6e9a 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -13,6 +13,8 @@ import Loading from '~/components/Loading.vue'
 import Select from '~/components/Select.vue'
 import Tooltip from '~/components/Tooltip.vue'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index e90621cf..cd6b7e4e 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -9,6 +9,8 @@ import type { List as HistoryItem, HistoryResult } from '~/models/history/histor
 import type { List as HistorySearchItem, HistorySearchResult } from '~/models/video/historySearch'
 import Empty from '~/components/Empty.vue'
 import Progress from '~/components/Progress.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index ec650255..f3528d36 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -9,6 +9,8 @@ import type { HomeTab } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
 import Logo from '~/components/Logo.vue'
 import SearchBar from '~/components/SearchBar/SearchBar.vue'
+import { useBewlyImage } from '~/composables/useImage'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const mainStore = useMainStore()
 const { handleBackToTop, scrollbarRef } = useBewlyApp()
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 99e5fdcd..0e2d6b36 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -7,6 +7,8 @@ import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 2e7b97de..1175ffee 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -16,6 +16,8 @@ import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 3fd99815..28404843 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -11,6 +11,8 @@ import LongCoverCardSkeleton from '~/components/LongCoverCard/LongCoverCardSkele
 import OverlayScrollbarsComponent from '~/components/OverlayScrollbarsComponent'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
+import { useBewlyApp } from '~/composables/useAppProvider'
+import { useApiClient } from '~/composables/api'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 1df350dc..3fe89fb6 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -7,6 +7,8 @@ import Empty from '~/components/Empty.vue'
 import Loading from '~/components/Loading.vue'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 12a0ade7..8176ac0a 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -5,6 +5,8 @@ import type { TrendingResult, List as VideoItem } from '~/models/video/trending'
 import Loading from '~/components/Loading.vue'
 import VideoCard from '~/components/VideoCard/VideoCard.vue'
 import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue
index 14c78ced..5a119be0 100644
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -4,6 +4,7 @@ import { useDateFormat } from '@vueuse/core'
 import type { Comment, UserCardInfo, VideoInfo } from './types'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcTimeSince, numFormatter } from '~/utils/dataFormatter'
+import { useApiClient } from '~/composables/api'
 
 const api = useApiClient()
 const videoContent = ref() as Ref<HTMLElement>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index c41077e9..90beccdb 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -7,6 +7,8 @@ import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLa
 import Button from '~/components/Button.vue'
 import Empty from '~/components/Empty.vue'
 import Progress from '~/components/Progress.vue'
+import { useApiClient } from '~/composables/api'
+import { useBewlyApp } from '~/composables/useAppProvider'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/vite.config.ts b/vite.config.ts
index a29ea7b3..71cf0d40 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,7 +33,6 @@ export const sharedConfig: UserConfig = {
           ],
         },
       ],
-      dirs: [r('src/composables')],
       dts: r('src/auto-imports.d.ts'),
     }),