diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index e9b690d6..baeeecc3 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import type { Ref } from 'vue'
-import { grantAccessKey, revokeAccessKey } from '~/utils/index'
+import { grantAccessKey, revokeAccessKey } from '~/utils/authProvider'
 import { accessKey, settings } from '~/logic'
 
 const emit = defineEmits(['close'])
diff --git a/src/components/Topbar/Topbar.vue b/src/components/Topbar/Topbar.vue
index 4f9505ea..97d3a946 100644
--- a/src/components/Topbar/Topbar.vue
+++ b/src/components/Topbar/Topbar.vue
@@ -3,7 +3,7 @@ import type { Ref, UnwrapNestedRefs } from 'vue'
 import { Transition, onMounted, watch } from 'vue'
 import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 import { updateInterval } from './notify'
-import { getUserID } from '~/utils'
+import { getUserID } from '~/utils/main'
 
 interface Props {
   showSearchBar: boolean
diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index fb54a971..2dc0b090 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -2,7 +2,8 @@
 import type { Ref } from 'vue'
 import { TransitionGroup, onMounted, reactive, ref, watch } from 'vue'
 import type { FavoriteCategory, FavoriteResource } from './types'
-import { calcCurrentTime, getUserID, removeHttpFromUrl } from '~/utils'
+import { getUserID, removeHttpFromUrl } from '~/utils/main'
+import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const favoriteCategories = reactive<Array<FavoriteCategory>>([])
 const favoriteResources = reactive<Array<FavoriteResource>>([])
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index ee6bb718..e5e739cb 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -5,7 +5,8 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { useDateFormat } from '@vueuse/core'
 import type { HistoryItem } from './types'
 import { HistoryType } from './types'
-import { calcCurrentTime, removeHttpFromUrl } from '~/utils'
+import { removeHttpFromUrl } from '~/utils/main'
+import { calcCurrentTime } from '~/utils/dataFormatter'
 const { t } = useI18n()
 
 const historys = reactive<Array<HistoryItem>>([])
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index 5d77bfca..afb6a593 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -5,7 +5,8 @@ import { onMounted, reactive, ref, watch } from 'vue'
 import { isNewArticle, isNewVideo, setLastestOffsetID } from './notify'
 import { MomentType } from './types'
 import type { MomentItem } from './types'
-import { calcTimeSince, getUserID } from '~/utils'
+import { getUserID } from '~/utils/main'
+import { calcTimeSince } from '~/utils/dataFormatter'
 const { t } = useI18n()
 
 const moments = reactive<Array<MomentItem>>([]) as UnwrapNestedRefs<
diff --git a/src/components/Topbar/TopbarMorePop.vue b/src/components/Topbar/TopbarMorePop.vue
index 6c6d9506..76966ed0 100644
--- a/src/components/Topbar/TopbarMorePop.vue
+++ b/src/components/Topbar/TopbarMorePop.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { getUserID } from '~/utils'
+import { getUserID } from '~/utils/main'
 
 const { t } = useI18n()
 
diff --git a/src/components/Topbar/TopbarUserPanelPop.vue b/src/components/Topbar/TopbarUserPanelPop.vue
index dc9cf06b..98022286 100644
--- a/src/components/Topbar/TopbarUserPanelPop.vue
+++ b/src/components/Topbar/TopbarUserPanelPop.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { revokeAccessKey } from '../../utils/index'
-import { getCSRF, getUserID, numFormatter } from '~/utils'
+import { revokeAccessKey } from '~/utils/authProvider'
+import { getCSRF, getUserID } from '~/utils/main'
+import { numFormatter } from '~/utils/dataFormatter'
 export default defineComponent({
   props: {
     userInfo: {
diff --git a/src/components/Topbar/notify.ts b/src/components/Topbar/notify.ts
index 4afc45e3..90b4127a 100644
--- a/src/components/Topbar/notify.ts
+++ b/src/components/Topbar/notify.ts
@@ -1,5 +1,5 @@
 import { MomentType } from './types'
-import { getCookie, getUserID, setCookie } from '~/utils'
+import { getCookie, getUserID, setCookie } from '~/utils/main'
 
 /** Update the time interval of topbar notifications and moments counts */
 export const updateInterval = 1000 * 60 * 5 // Updated every 5 minutes
diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index 6d357050..011f0d39 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -1,13 +1,6 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
-// import { accessKey, language } from '~/logic/index'
-import {
-  calcCurrentTime,
-  calcTimeSince,
-  numFormatter,
-  removeHttpFromUrl,
-} from '~/utils'
-// import { LanguageType } from '~/enums/appEnums'
+import { removeHttpFromUrl } from '~/utils/main'
+import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 
 const props = defineProps<{
   duration: number
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 0243175a..33ebfaf1 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -3,7 +3,8 @@ import { createApp } from 'vue'
 import type { App as AppType } from 'vue'
 import App from './views/App.vue'
 import { setupApp } from '~/logic/common-setup'
-import { SVG_ICONS, i18n } from '~/utils'
+import { i18n } from '~/utils/i18n'
+import { SVG_ICONS } from '~/utils/svgIcons'
 
 let app: AppType | null = null;
 
diff --git a/src/contentScripts/views/Anime/Anime.vue b/src/contentScripts/views/Anime/Anime.vue
index 0ecedad1..3468d183 100644
--- a/src/contentScripts/views/Anime/Anime.vue
+++ b/src/contentScripts/views/Anime/Anime.vue
@@ -4,7 +4,8 @@ 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, openLinkToNewTab, removeHttpFromUrl } from '~/utils'
+import { getUserID, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
+import { numFormatter } from '~/utils/dataFormatter'
 
 const animeWatchList = reactive<AnimeItem[]>([])
 const recommendAnimeList = reactive<AnimeItem[]>([])
diff --git a/src/contentScripts/views/Anime/components/AnimeCard.vue b/src/contentScripts/views/Anime/components/AnimeCard.vue
index 53f75e9b..4d91b5e4 100644
--- a/src/contentScripts/views/Anime/components/AnimeCard.vue
+++ b/src/contentScripts/views/Anime/components/AnimeCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { removeHttpFromUrl } from '~/utils'
+import { removeHttpFromUrl } from '~/utils/main'
 
 defineProps<{
   url: string
diff --git a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
index b6e9b4f2..7b3548c3 100644
--- a/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
+++ b/src/contentScripts/views/Anime/components/AnimeTimeTable.vue
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import browser from 'webextension-polyfill'
 import type { AnimeTimeTableItem } from '../types'
-import { removeHttpFromUrl } from '~/utils'
+import { removeHttpFromUrl } from '~/utils/main'
 
 const { t } = useI18n()
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 81bad950..93900981 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -12,7 +12,7 @@ import Video from './Video/Video.vue'
 import { activatedPage, settings } from '~/logic'
 import '~/styles/index.ts'
 import { AppPage, LanguageType } from '~/enums/appEnums'
-import { hexToRGBA } from '~/utils'
+import { hexToRGBA } from '~/utils/main'
 
 const { locale } = useI18n()
 const [showSettings, toggle] = useToggle(false)
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index cb60ebcd..1f10b262 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -2,7 +2,8 @@
 import type { Ref } from 'vue'
 import { TransitionGroup, onMounted, reactive, ref, watch } from 'vue'
 import type { FavoriteCategory, FavoriteResource } from './types'
-import { calcCurrentTime, getUserID, removeHttpFromUrl } from '~/utils'
+import { getUserID, removeHttpFromUrl } from '~/utils/main'
+import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const favoriteCategories = reactive<Array<FavoriteCategory>>([])
 const favoriteResources = reactive<Array<FavoriteResource>>([])
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 81f389ef..09f71601 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -3,12 +3,8 @@ import { useDateFormat } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { HistoryType } from './types'
 import type { HistoryItem } from './types'
-import {
-  calcCurrentTime,
-  getCSRF,
-  openLinkToNewTab,
-  removeHttpFromUrl,
-} from '~/utils'
+import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
+import { calcCurrentTime } from '~/utils/dataFormatter'
 
 const { t } = useI18n()
 
diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue
index 70ba23ea..f0d78ce9 100644
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -2,7 +2,8 @@
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { useDateFormat } from '@vueuse/core'
 import type { Comment, UserCardInfo, VideoInfo } from './types'
-import { calcTimeSince, getCSRF, numFormatter, removeHttpFromUrl } from '~/utils'
+import { getCSRF, removeHttpFromUrl } from '~/utils/main'
+import { calcTimeSince, numFormatter } from '~/utils/dataFormatter'
 
 const videoContent = ref() as Ref<HTMLElement>
 // const commentContent = ref() as Ref<HTMLElement>
diff --git a/src/utils/index.ts b/src/utils/index.ts
deleted file mode 100644
index 45189e68..00000000
--- a/src/utils/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './authProvider'
-export * from './svgIcons'
-export * from './i18n'
-export * from './dataFormatter'
-export * from './main'