diff --git a/src/components/BackToTopAndRefreshButtons.vue b/src/components/BackToTopAndRefreshButtons.vue
index 02d8b328..8310fb13 100644
--- a/src/components/BackToTopAndRefreshButtons.vue
+++ b/src/components/BackToTopAndRefreshButtons.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import Button from '~/components/Button.vue'
+
 defineProps<{ showRefreshButton: boolean }>()
 const emit = defineEmits(['refresh', 'back-to-top'])
 </script>
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index 35d2164e..3e6da56f 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { onKeyStroke } from '@vueuse/core'
+import Button from '~/components/Button.vue'
 
 const props = withDefaults(defineProps<{
   title?: string
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index bde1ce31..a67a4adc 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 078b24b1..767286be 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
+import Button from '~/components/Button.vue'
 
 const emit = defineEmits(['settings-visibility-change'])
 const { isDark, toggleDark } = useDark()
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 6cb413af..303298e3 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
+import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 
 import type { MenuItem } from './types'
 import { MenuType } from './types'
diff --git a/src/components/Settings/components/About.vue b/src/components/Settings/components/About.vue
index 81bbe768..584eb49e 100644
--- a/src/components/Settings/components/About.vue
+++ b/src/components/Settings/components/About.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import browser from 'webextension-polyfill'
 import { version } from '../../../../package.json'
+import Button from '~/components/Button.vue'
+import Dialog from '~/components/Dialog.vue'
 import { settings } from '~/logic'
+import Tooltip from '~/components/Tooltip.vue'
 
 const importSettingsRef = ref<HTMLElement>()
 const dialogVisible = reactive({
diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 08bc866e..224bac93 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -1,6 +1,13 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 import { settings } from '~/logic'
+import Input from '~/components/Input.vue'
+import Radio from '~/components/Radio.vue'
+import Select from '~/components/Select.vue'
+import Slider from '~/components/Slider.vue'
+import Tooltip from '~/components/Tooltip.vue'
 
 const { wallpapers, getBewlyImage } = useBewlyImage()
 
diff --git a/src/components/Settings/components/Compatibility.vue b/src/components/Settings/components/Compatibility.vue
index 5b77c998..ae820d48 100644
--- a/src/components/Settings/components/Compatibility.vue
+++ b/src/components/Settings/components/Compatibility.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 import { settings } from '~/logic'
 import { isHomePage } from '~/utils/main'
+import Radio from '~/components/Radio.vue'
 
 watch(() => settings.value.useOriginalBilibiliHomepage, () => {
   if (isHomePage())
diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue
index bcd7cb25..b0e55ba4 100644
--- a/src/components/Settings/components/General.vue
+++ b/src/components/Settings/components/General.vue
@@ -2,8 +2,13 @@
 import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
 import { Icon } from '@iconify/vue'
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 import { settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
+import Button from '~/components/Button.vue'
+import Radio from '~/components/Radio.vue'
+import Select from '~/components/Select.vue'
 
 const mainStore = useMainStore()
 const { t, locale } = useI18n()
diff --git a/src/components/Settings/components/Home.vue b/src/components/Settings/components/Home.vue
index 77fb48ee..7e38b84a 100644
--- a/src/components/Settings/components/Home.vue
+++ b/src/components/Settings/components/Home.vue
@@ -4,9 +4,14 @@ import QRCodeVue from 'qrcode.vue'
 import { useToast } from 'vue-toastification'
 import draggable from 'vuedraggable'
 import SearchPage from './SearchPage.vue'
+import ChildSettingsDialog from './ChildSettingsDialog.vue'
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
 import { accessKey, settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
+import Button from '~/components/Button.vue'
+import Radio from '~/components/Radio.vue'
 
 const mainStore = useMainStore()
 const toast = useToast()
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index 121e99b4..7c81751c 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 import { settings } from '~/logic'
+import Input from '~/components/Input.vue'
+import Radio from '~/components/Radio.vue'
+import Slider from '~/components/Slider.vue'
+import Tooltip from '~/components/Tooltip.vue'
 
 const { searchBarCharacters, wallpapers, getBewlyImage } = useBewlyImage()
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 5ebde744..fc047449 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -2,13 +2,18 @@
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { onMounted, watch } from 'vue'
 import { useMouseInElement } from '@vueuse/core'
+import SearchBar from '../SearchBar/SearchBar.vue'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
-
-// import NotificationsPop from './components/NotificationsPop.vue'
-// import MomentsPop from './components/MomentsPop.vue'
-// import FavoritesPop from './components/FavoritesPop.vue'
-// import HistoryPop from './components/HistoryPop.vue'
+import ChannelsPop from './components/ChannelsPop.vue'
+import FavoritesPop from './components/FavoritesPop.vue'
+import HistoryPop from './components/HistoryPop.vue'
+import MomentsPop from './components/MomentsPop.vue'
+import MorePop from './components/MorePop.vue'
+import NotificationsPop from './components/NotificationsPop.vue'
+import UploadPop from './components/UploadPop.vue'
+import UserPanelPop from './components/UserPanelPop.vue'
+import WatchLaterPop from './components/WatchLaterPop.vue'
 import { getUserID, isHomePage } from '~/utils/main'
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
diff --git a/src/components/TopBar/components/FavoritesPop.vue b/src/components/TopBar/components/FavoritesPop.vue
index a9e7c549..027b7982 100644
--- a/src/components/TopBar/components/FavoritesPop.vue
+++ b/src/components/TopBar/components/FavoritesPop.vue
@@ -4,6 +4,8 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import type { FavoriteCategory, FavoriteResource } from '../types'
 import { getUserID, isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
+import Empty from '~/components/Empty.vue'
+import Loading from '~/components/Loading.vue'
 
 const api = useApiClient()
 
diff --git a/src/components/TopBar/components/HistoryPop.vue b/src/components/TopBar/components/HistoryPop.vue
index 57b766de..aceccb8c 100644
--- a/src/components/TopBar/components/HistoryPop.vue
+++ b/src/components/TopBar/components/HistoryPop.vue
@@ -7,6 +7,9 @@ import { isHomePage, removeHttpFromUrl, smoothScrollToTop } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { Business } from '~/models/history/history'
 import type { List as HistoryItem, HistoryResult } from '~/models/history/history'
+import Empty from '~/components/Empty.vue'
+import Loading from '~/components/Loading.vue'
+import Progress from '~/components/Progress.vue'
 
 const { t } = useI18n()
 const api = useApiClient()
@@ -380,7 +383,7 @@ function getHistoryList(type: Business, view_at = 0 as number) {
 
         <!-- loading -->
         <Transition name="fade">
-          <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
+          <Loading v-if="isLoading && historys.length !== 0" m="-t-4" />
         </Transition>
       </div>
     </main>
diff --git a/src/components/TopBar/components/MomentsPop.vue b/src/components/TopBar/components/MomentsPop.vue
index 35bdf92c..67c696d3 100644
--- a/src/components/TopBar/components/MomentsPop.vue
+++ b/src/components/TopBar/components/MomentsPop.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { onMounted, reactive, ref, watch } from 'vue'
-
-// import { isNewArticle, setLastOffsetID, setLastestOffsetID } from '../notify'
-
+import Empty from '~/components/Empty.vue'
+import Loading from '~/components/Loading.vue'
 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'
 
 type MomentType = 'video' | 'live' | 'article'
 interface MomentTab { type: MomentType, name: any }
@@ -431,7 +431,7 @@ defineExpose({
 
         <!-- loading -->
         <Transition name="fade">
-          <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
+          <Loading v-if="isLoading && moments.length !== 0" m="-t-4" />
         </Transition>
       </div>
     </main>
diff --git a/src/components/TopBar/components/WatchLaterPop.vue b/src/components/TopBar/components/WatchLaterPop.vue
index 862078c4..0641650a 100644
--- a/src/components/TopBar/components/WatchLaterPop.vue
+++ b/src/components/TopBar/components/WatchLaterPop.vue
@@ -3,6 +3,9 @@ import { onMounted, reactive, ref } from 'vue'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
 import { isHomePage, removeHttpFromUrl } from '~/utils/main'
+import Empty from '~/components/Empty.vue'
+import Loading from '~/components/Loading.vue'
+import Progress from '~/components/Progress.vue'
 
 const api = useApiClient()
 const watchLaterList = reactive<VideoItem[]>([])
@@ -191,7 +194,7 @@ function getAllWatchLaterList() {
 
         <!-- loading -->
         <Transition name="fade">
-          <loading v-if="isLoading && watchLaterList.length !== 0" m="-t-4" />
+          <Loading v-if="isLoading && watchLaterList.length !== 0" m="-t-4" />
         </Transition>
       </div>
     </main>
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index fb666a1b..12def56e 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import Tooltip from '../Tooltip.vue'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 import type { VideoPreviewResult } from '~/models/video/videoPreview'
 import { settings } from '~/logic'
+import Button from '~/components/Button.vue'
 
 interface Props {
   id: number
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 712b1911..89fc783b 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -5,6 +5,11 @@ import { numFormatter } from '~/utils/dataFormatter'
 import type { List as WatchListItem, WatchListResult } from '~/models/anime/watchList'
 import type { List as PopularAnimeItem, PopularAnimeResult } from '~/models/anime/popular'
 import type { ItemSubItem as RecommendationItem, RecommendationResult } from '~/models/anime/recommendation'
+import Button from '~/components/Button.vue'
+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'
 
 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 0075c01c..90f14206 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 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'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 88c5b392..ea4aa916 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -3,7 +3,13 @@ import { useDebounceFn, useThrottleFn, useToggle } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
-
+import AppBackground from '~/components/AppBackground.vue'
+import BackToTopAndRefreshButtons from '~/components/BackToTopAndRefreshButtons.vue'
+import Dock from '~/components/Dock/Dock.vue'
+import OverlayScrollbarsComponent from '~/components/OverlayScrollbarsComponent'
+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 { AppPage, LanguageType } from '~/enums/appEnums'
 import { accessKey, settings } from '~/logic'
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index b41a2226..0a776170 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -6,6 +6,13 @@ import emitter from '~/utils/mitt'
 import { settings } from '~/logic'
 import type { Media as FavoriteItem, FavoritesResult } from '~/models/video/favorite'
 import type { List as CategoryItem, FavoritesCategoryResult } from '~/models/video/favoriteCategory'
+import Button from '~/components/Button.vue'
+import Empty from '~/components/Empty.vue'
+import Input from '~/components/Input.vue'
+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'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 7e535b13..e90621cf 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
-
+import Button from '~/components/Button.vue'
 import { getCSRF, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import { Business } from '~/models/history/history'
 import type { List as HistoryItem, HistoryResult } from '~/models/history/history'
 import type { List as HistorySearchItem, HistorySearchResult } from '~/models/video/historySearch'
+import Empty from '~/components/Empty.vue'
+import Progress from '~/components/Progress.vue'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index c558d14c..ec650255 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -7,6 +7,8 @@ import { homePageGridLayout, settings } from '~/logic'
 import { delay } from '~/utils/main'
 import type { HomeTab } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
+import Logo from '~/components/Logo.vue'
+import SearchBar from '~/components/SearchBar/SearchBar.vue'
 
 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 8ee6cdf5..99e5fdcd 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { GridLayout } from '~/logic'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
+import Button from '~/components/Button.vue'
+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'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index ab76e28a..2e7b97de 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -10,6 +10,12 @@ import { accessKey, settings } from '~/logic'
 import { LanguageType } from '~/enums/appEnums'
 import { TVAppKey, getTvSign } from '~/utils/authProvider'
 import { isVerticalVideo } from '~/utils/uriParse'
+import Button from '~/components/Button.vue'
+import Dialog from '~/components/Dialog.vue'
+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'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/Ranking.vue b/src/contentScripts/views/Home/components/Ranking.vue
index 62dc9e7d..3fd99815 100644
--- a/src/contentScripts/views/Home/components/Ranking.vue
+++ b/src/contentScripts/views/Home/components/Ranking.vue
@@ -6,6 +6,11 @@ import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/ra
 import type { GridLayout } from '~/logic'
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
+import LongCoverCard from '~/components/LongCoverCard/LongCoverCard.vue'
+import LongCoverCardSkeleton from '~/components/LongCoverCard/LongCoverCardSkeleton.vue'
+import OverlayScrollbarsComponent from '~/components/OverlayScrollbarsComponent'
+import VideoCard from '~/components/VideoCard/VideoCard.vue'
+import VideoCardSkeleton from '~/components/VideoCard/VideoCardSkeleton.vue'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue
index 6f6be804..1df350dc 100644
--- a/src/contentScripts/views/Home/components/SubscribedSeries.vue
+++ b/src/contentScripts/views/Home/components/SubscribedSeries.vue
@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { GridLayout } from '~/logic'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
+import Button from '~/components/Button.vue'
+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'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 6d002a38..12a0ade7 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -2,6 +2,9 @@
 import type { Ref } from 'vue'
 import type { GridLayout } from '~/logic'
 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'
 
 const props = defineProps<{
   gridLayout: GridLayout
diff --git a/src/contentScripts/views/Search/Search.vue b/src/contentScripts/views/Search/Search.vue
index 00e810dd..d9954007 100644
--- a/src/contentScripts/views/Search/Search.vue
+++ b/src/contentScripts/views/Search/Search.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { settings } from '~/logic'
+import Logo from '~/components/Logo.vue'
+import SearchBar from '~/components/SearchBar/SearchBar.vue'
 </script>
 
 <template>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index e59ee26d..c41077e9 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -4,6 +4,9 @@ import { useI18n } from 'vue-i18n'
 import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
 import { calcCurrentTime } from '~/utils/dataFormatter'
 import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater'
+import Button from '~/components/Button.vue'
+import Empty from '~/components/Empty.vue'
+import Progress from '~/components/Progress.vue'
 
 const { t } = useI18n()
 const api = useApiClient()
diff --git a/src/popup/Popup.vue b/src/popup/Popup.vue
index e2e8becb..ab903bd7 100644
--- a/src/popup/Popup.vue
+++ b/src/popup/Popup.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { storageDemo } from '~/logic/storage'
+import Logo from '~/components/Logo.vue'
 
 function openOptionsPage() {
   browser.runtime.openOptionsPage()
diff --git a/vite.config.ts b/vite.config.ts
index f16a2b7b..a29ea7b3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -39,8 +39,6 @@ export const sharedConfig: UserConfig = {
 
     // https://github.com/antfu/unplugin-vue-components
     Components({
-      extensions: ['vue', 'ts'],
-      dirs: [r('src/components')],
       // generate `components.d.ts` for ts support with Volar
       dts: r('src/components.d.ts'),
       resolvers: [