From 387b937820cfdf34fccc2ae869c758c6d4279316 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Thu, 17 Oct 2024 11:41:30 +0700
Subject: [PATCH] refactor: remove barrel files (#1855)

---
 resources/assets/js/App.vue                   |  6 +--
 resources/assets/js/__tests__/UnitTestCase.ts | 21 ++++-----
 .../js/__tests__/factory/genreFactory.ts      |  2 +-
 .../js/__tests__/factory/songFactory.ts       |  2 +-
 resources/assets/js/__tests__/stubs.ts        |  2 +-
 resources/assets/js/app.ts                    | 10 +++--
 .../js/components/album/AlbumCard.spec.ts     |  8 ++--
 .../assets/js/components/album/AlbumCard.vue  | 13 ++++--
 .../components/album/AlbumContextMenu.spec.ts |  8 ++--
 .../js/components/album/AlbumContextMenu.vue  | 13 ++++--
 .../js/components/album/AlbumInfo.spec.ts     |  4 +-
 .../assets/js/components/album/AlbumInfo.vue  |  4 +-
 .../components/album/AlbumTrackList.spec.ts   |  2 +-
 .../js/components/album/AlbumTrackList.vue    |  2 +-
 .../album/AlbumTrackListItem.spec.ts          |  6 +--
 .../components/album/AlbumTrackListItem.vue   | 10 +++--
 .../js/components/artist/ArtistCard.spec.ts   |  8 ++--
 .../js/components/artist/ArtistCard.vue       | 12 +++--
 .../artist/ArtistContextMenu.spec.ts          | 10 +++--
 .../components/artist/ArtistContextMenu.vue   | 12 +++--
 .../js/components/artist/ArtistInfo.spec.ts   |  6 +--
 .../js/components/artist/ArtistInfo.vue       |  4 +-
 .../auth/ForgotPasswordForm.spec.ts           |  2 +-
 .../js/components/auth/ForgotPasswordForm.vue |  5 ++-
 .../js/components/auth/LoginForm.spec.ts      |  4 +-
 .../assets/js/components/auth/LoginForm.vue   |  6 +--
 .../components/auth/ResetPasswordForm.spec.ts |  2 +-
 .../js/components/auth/ResetPasswordForm.vue  |  9 ++--
 .../components/auth/sso/GoogleLoginButton.vue |  2 +-
 ...ation.spec.ts => AcceptInvitation.spec.ts} |  4 +-
 .../invitation/AcceptInvitation.vue           |  5 ++-
 .../koel-plus/ActivateLicenseForm.spec.ts     |  2 +-
 .../koel-plus/ActivateLicenseForm.vue         |  7 +--
 .../components/koel-plus/BtnUpgradeToPlus.vue |  2 +-
 .../koel-plus/KoelPlusModal.spec.ts           |  2 +-
 .../js/components/koel-plus/KoelPlusModal.vue |  2 +-
 .../js/components/layout/ModalWrapper.spec.ts |  4 +-
 .../js/components/layout/ModalWrapper.vue     |  3 +-
 .../app-footer/FooterExtraControls.spec.ts    |  4 +-
 .../layout/app-footer/FooterExtraControls.vue |  5 ++-
 .../app-footer/FooterPlaybackControls.spec.ts |  4 +-
 .../app-footer/FooterPlaybackControls.vue     |  4 +-
 .../layout/app-footer/FooterQueueButton.vue   |  8 ++--
 .../layout/app-footer/FooterSongInfo.vue      |  6 ++-
 .../layout/app-footer/index.spec.ts           |  5 ++-
 .../js/components/layout/app-footer/index.vue | 13 ++++--
 .../layout/main-wrapper/MainContent.spec.ts   |  5 ++-
 .../layout/main-wrapper/MainContent.vue       |  8 ++--
 .../side-sheet/AboutKoelButton.spec.ts        |  2 +-
 .../side-sheet/AboutKoelButton.vue            |  4 +-
 .../side-sheet/LogoutButton.spec.ts           |  2 +-
 .../main-wrapper/side-sheet/LogoutButton.vue  |  2 +-
 .../main-wrapper/side-sheet/SideSheet.spec.ts |  9 ++--
 .../main-wrapper/side-sheet/SideSheet.vue     | 11 +++--
 .../side-sheet/SideSheetTabHeader.spec.ts     |  4 +-
 .../side-sheet/SideSheetTabHeader.vue         |  2 +-
 .../main-wrapper/sidebar/HomeButton.spec.ts   |  2 +-
 .../main-wrapper/sidebar/HomeButton.vue       |  2 +-
 .../sidebar/PlaylistFolderSidebarItem.vue     |  7 +--
 .../sidebar/PlaylistSidebarItem.spec.ts       |  4 +-
 .../sidebar/PlaylistSidebarItem.vue           |  8 ++--
 .../main-wrapper/sidebar/Sidebar.spec.ts      |  6 +--
 .../layout/main-wrapper/sidebar/Sidebar.vue   |  8 +++-
 .../main-wrapper/sidebar/SidebarItem.spec.ts  |  4 +-
 .../main-wrapper/sidebar/SidebarItem.vue      |  4 +-
 .../sidebar/SidebarManageSection.spec.ts      |  2 +-
 .../sidebar/SidebarManageSection.vue          |  3 +-
 .../sidebar/SidebarPlaylistsSection.spec.ts   |  5 ++-
 .../sidebar/SidebarPlaylistsSection.vue       |  4 +-
 .../sidebar/SidebarYourLibrarySection.spec.ts |  2 +-
 .../sidebar/SidebarYourLibrarySection.vue     |  2 +-
 .../js/components/meta/AboutKoelModal.spec.ts |  6 +--
 .../js/components/meta/AboutKoelModal.vue     |  6 ++-
 .../js/components/meta/CreditsBlock.spec.ts   |  2 +-
 .../js/components/meta/CreditsBlock.vue       |  2 +-
 .../js/components/meta/SupportKoel.spec.ts    |  4 +-
 .../assets/js/components/meta/SupportKoel.vue |  4 +-
 .../CreatePlaylistContextMenu.spec.ts         |  9 ++--
 .../playlist/CreatePlaylistContextMenu.vue    |  6 +--
 .../CreatePlaylistContextMenuButton.vue       |  2 +-
 .../playlist/CreatePlaylistFolderForm.spec.ts |  6 +--
 .../playlist/CreatePlaylistFolderForm.vue     |  8 +++-
 .../playlist/CreatePlaylistForm.spec.ts       | 10 ++---
 .../playlist/CreatePlaylistForm.vue           | 14 ++++--
 .../playlist/EditPlaylistFolderForm.spec.ts   |  8 ++--
 .../playlist/EditPlaylistFolderForm.vue       |  9 +++-
 .../playlist/EditPlaylistForm.spec.ts         | 13 +++---
 .../components/playlist/EditPlaylistForm.vue  | 10 ++++-
 ...ts => InvitePlaylistCollaborators.spec.ts} |  2 +-
 .../playlist/InvitePlaylistCollaborators.vue  |  4 +-
 .../PlaylistCollaborationModal.spec.ts        |  2 +-
 .../playlist/PlaylistCollaborationModal.vue   |  4 +-
 .../playlist/PlaylistCollaboratorList.spec.ts |  2 +-
 .../playlist/PlaylistCollaboratorList.vue     |  8 ++--
 .../playlist/PlaylistCollaboratorListItem.vue |  2 +-
 .../playlist/PlaylistContextMenu.spec.ts      | 12 ++---
 .../playlist/PlaylistContextMenu.vue          | 13 ++++--
 .../PlaylistFolderContextMenu.spec.ts         | 13 +++---
 .../playlist/PlaylistFolderContextMenu.vue    | 11 +++--
 .../CreateSmartPlaylistForm.vue               | 21 +++++----
 .../smart-playlist/EditSmartPlaylistForm.vue  | 22 +++++-----
 .../smart-playlist/SmartPlaylistRuleGroup.vue |  2 +-
 .../components/podcast/AddPodcastForm.spec.ts |  4 +-
 .../js/components/podcast/AddPodcastForm.vue  |  8 +++-
 .../js/components/podcast/EpisodeItem.spec.ts |  6 +--
 .../js/components/podcast/EpisodeItem.vue     | 11 +++--
 .../components/podcast/EpisodePogress.spec.ts |  2 +-
 .../js/components/podcast/PodcastCard.vue     |  2 +-
 .../components/podcast/PodcastListSorter.vue  |  2 +-
 .../EditableProfileAvatar.vue                 |  6 +--
 .../profile-preferences/LastfmIntegration.vue |  9 ++--
 .../PreferencesForm.spec.ts                   |  8 ++--
 .../profile-preferences/PreferencesForm.vue   |  5 ++-
 .../profile-preferences/ProfileForm.spec.ts   |  8 ++--
 .../profile-preferences/ProfileForm.vue       |  9 ++--
 .../profile-preferences/QRLogin.spec.ts       |  4 +-
 .../profile-preferences/QRLogin.vue           |  4 +-
 .../SpotifyIntegration.spec.ts                |  6 +--
 .../SpotifyIntegration.vue                    |  3 +-
 .../profile-preferences/ThemeCard.spec.ts     |  6 +--
 .../profile-preferences/ThemeCard.vue         |  2 +-
 .../profile-preferences/ThemeList.spec.ts     |  6 +--
 .../profile-preferences/ThemeList.vue         |  2 +-
 .../screens/AlbumListScreen.spec.ts           | 10 +++--
 .../js/components/screens/AlbumListScreen.vue |  9 +++-
 .../js/components/screens/AlbumScreen.spec.ts | 10 +++--
 .../js/components/screens/AlbumScreen.vue     | 15 +++++--
 .../components/screens/AllSongsScreen.spec.ts | 14 +++---
 .../js/components/screens/AllSongsScreen.vue  | 22 +++++-----
 .../screens/ArtistListScreen.spec.ts          |  8 ++--
 .../components/screens/ArtistListScreen.vue   |  9 +++-
 .../components/screens/ArtistScreen.spec.ts   | 10 +++--
 .../js/components/screens/ArtistScreen.vue    | 15 +++++--
 .../js/components/screens/EpisodeScreen.vue   | 13 ++++--
 .../screens/FavoritesScreen.spec.ts           |  2 +-
 .../js/components/screens/FavoritesScreen.vue | 10 +++--
 .../screens/GenreListScreen.spec.ts           |  7 +--
 .../js/components/screens/GenreListScreen.vue |  8 ++--
 .../js/components/screens/GenreScreen.spec.ts |  7 +--
 .../js/components/screens/GenreScreen.vue     | 13 ++++--
 .../js/components/screens/HomeScreen.spec.ts  |  9 ++--
 .../js/components/screens/HomeScreen.vue      | 10 +++--
 .../components/screens/PlaylistScreen.spec.ts | 13 +++---
 .../js/components/screens/PlaylistScreen.vue  | 23 +++++-----
 .../components/screens/PodcastListScreen.vue  |  8 ++--
 .../js/components/screens/PodcastScreen.vue   | 12 +++--
 .../js/components/screens/ProfileScreen.vue   |  2 +-
 .../js/components/screens/QueueScreen.spec.ts |  7 +--
 .../js/components/screens/QueueScreen.vue     | 14 ++++--
 .../screens/RecentlyPlayedScreen.spec.ts      |  8 ++--
 .../screens/RecentlyPlayedScreen.vue          |  8 ++--
 .../components/screens/SettingsScreen.spec.ts |  6 +--
 .../js/components/screens/SettingsScreen.vue  | 11 +++--
 .../js/components/screens/UploadScreen.vue    |  8 ++--
 .../components/screens/UserListScreen.spec.ts |  6 +--
 .../js/components/screens/UserListScreen.vue  |  6 +--
 .../components/screens/VisualizerScreen.vue   |  5 ++-
 .../js/components/screens/YouTubeScreen.vue   |  7 +--
 .../screens/home/MostPlayedAlbums.spec.ts     |  2 +-
 .../screens/home/MostPlayedAlbums.vue         |  2 +-
 .../screens/home/MostPlayedArtists.spec.ts    |  2 +-
 .../screens/home/MostPlayedArtists.vue        |  3 +-
 .../screens/home/MostPlayedSongs.spec.ts      |  2 +-
 .../screens/home/MostPlayedSongs.vue          |  2 +-
 .../screens/home/RecentlyAddedAlbums.spec.ts  |  2 +-
 .../screens/home/RecentlyAddedAlbums.vue      |  2 +-
 .../screens/home/RecentlyAddedSongs.spec.ts   |  2 +-
 .../screens/home/RecentlyAddedSongs.vue       |  2 +-
 .../screens/home/RecentlyPlayedSongs.spec.ts  |  6 +--
 .../screens/home/RecentlyPlayedSongs.vue      |  2 +-
 .../screens/home/ViewAllRecentSongsButton.vue |  2 +-
 .../search/SearchExcerptsScreen.spec.ts       |  4 +-
 .../screens/search/SearchExcerptsScreen.vue   |  4 +-
 .../search/SearchSongResultsScreen.spec.ts    |  2 +-
 .../search/SearchSongResultsScreen.vue        |  8 ++--
 .../search/SongExcerptResultsBlock.vue        |  4 +-
 .../js/components/song/AddToMenu.spec.ts      |  9 ++--
 .../assets/js/components/song/AddToMenu.vue   |  7 +--
 .../js/components/song/EditSongForm.spec.ts   | 17 +++----
 .../js/components/song/EditSongForm.vue       | 17 ++++---
 .../song/PlayableContextMenu.spec.ts          | 15 ++++---
 .../components/song/PlayableContextMenu.vue   | 32 ++++++++------
 .../js/components/song/SongCard.spec.ts       |  4 +-
 .../assets/js/components/song/SongCard.vue    | 10 +++--
 .../js/components/song/SongLikeButton.spec.ts |  6 +--
 .../js/components/song/SongLikeButton.vue     |  2 +-
 .../js/components/song/SongList.spec.ts       |  6 +--
 .../assets/js/components/song/SongList.vue    | 11 +++--
 .../components/song/SongListControls.spec.ts  |  4 +-
 .../js/components/song/SongListControls.vue   |  4 +-
 .../js/components/song/SongListItem.spec.ts   |  4 +-
 .../js/components/song/SongListItem.vue       | 11 +++--
 .../js/components/song/SongListSorter.vue     |  7 +--
 .../js/components/song/SongThumbnail.spec.ts  | 10 ++---
 .../js/components/song/SongThumbnail.vue      |  5 ++-
 .../js/components/ui/AlbumArtOverlay.spec.ts  |  4 +-
 .../js/components/ui/AlbumArtOverlay.vue      |  4 +-
 .../js/components/ui/BtnScrollToTop.spec.ts   |  2 +-
 .../js/components/ui/BtnScrollToTop.vue       |  2 +-
 .../assets/js/components/ui/ContextMenu.vue   |  3 +-
 .../assets/js/components/ui/DialogBox.vue     |  1 +
 .../js/components/ui/FooterPlayButton.spec.ts | 14 +++---
 .../js/components/ui/FooterPlayButton.vue     | 13 ++++--
 .../js/components/ui/LyricsPane.spec.ts       |  4 +-
 .../assets/js/components/ui/LyricsPane.vue    |  7 +--
 .../assets/js/components/ui/Magnifier.spec.ts |  2 +-
 .../js/components/ui/PlaylistThumbnail.vue    | 11 +++--
 .../js/components/ui/ProfileAvatar.spec.ts    |  2 +-
 .../assets/js/components/ui/ProfileAvatar.vue |  3 +-
 .../js/components/ui/RepeatModeSwitch.spec.ts |  6 +--
 .../js/components/ui/RepeatModeSwitch.vue     |  4 +-
 .../js/components/ui/SearchForm.spec.ts       |  6 +--
 .../assets/js/components/ui/SearchForm.vue    |  5 ++-
 .../components/ui/SidebarMenuToggleButton.vue |  2 +-
 .../js/components/ui/ThumbnailStack.vue       |  2 +-
 .../js/components/ui/VolumeSlider.spec.ts     |  7 +--
 .../assets/js/components/ui/VolumeSlider.vue  |  6 ++-
 .../ui/album-artist/AlbumOrArtistCard.spec.ts |  2 +-
 .../ui/album-artist/AlbumOrArtistCard.vue     |  3 +-
 .../AlbumOrArtistThumbnail.spec.ts            |  9 ++--
 .../album-artist/AlbumOrArtistThumbnail.vue   | 19 +++++---
 .../js/components/ui/equalizer/Equalizer.vue  |  8 ++--
 .../js/components/ui/form/CheckBox.spec.ts    |  2 +-
 .../ui/message-toaster/MessageToaster.vue     |  3 +-
 .../js/components/ui/upload/DropZone.vue      |  2 +-
 .../components/ui/upload/UploadItem.spec.ts   |  6 +--
 .../js/components/ui/upload/UploadItem.vue    |  4 +-
 .../ui/youtube/YouTubeVideoItem.spec.ts       |  2 +-
 .../ui/youtube/YouTubeVideoItem.vue           |  4 +-
 .../ui/youtube/YouTubeVideoList.spec.ts       |  8 ++--
 .../ui/youtube/YouTubeVideoList.vue           |  4 +-
 .../js/components/user/AddUserForm.spec.ts    |  4 +-
 .../assets/js/components/user/AddUserForm.vue | 10 +++--
 .../js/components/user/EditUserForm.spec.ts   | 10 ++---
 .../js/components/user/EditUserForm.vue       | 11 +++--
 .../js/components/user/InviteUserForm.spec.ts |  4 +-
 .../js/components/user/InviteUserForm.vue     |  7 ++-
 .../assets/js/components/user/UserAvatar.vue  |  2 +-
 .../js/components/user/UserCard.spec.ts       | 10 ++---
 .../assets/js/components/user/UserCard.vue    | 12 +++--
 .../js/components/utils/AppInitializer.vue    | 10 +++--
 .../components/utils/GlobalEventListeners.vue | 12 +++--
 .../js/components/utils/HotkeyListener.vue    | 11 +++--
 resources/assets/js/composables/index.ts      | 25 -----------
 .../assets/js/composables/useAuthorization.ts |  2 +-
 .../assets/js/composables/useDialogBox.ts     |  3 +-
 .../assets/js/composables/useDragAndDrop.ts   | 10 ++++-
 .../composables/useEpisodeProgressTracking.ts |  4 +-
 .../assets/js/composables/useErrorHandler.ts  |  6 ++-
 .../assets/js/composables/useFloatingUi.ts    |  2 +-
 .../assets/js/composables/useKoelPlus.ts      |  2 +-
 .../assets/js/composables/useLocalStorage.ts  |  2 +-
 .../js/composables/useMessageToaster.ts       |  3 +-
 resources/assets/js/composables/useModal.ts   |  4 +-
 .../composables/useNewVersionNotification.ts  |  2 +-
 resources/assets/js/composables/useOverlay.ts |  2 +-
 .../js/composables/usePlayableMenuMethods.ts  |  7 +--
 .../js/composables/usePlaylistManagement.ts   |  8 ++--
 .../assets/js/composables/usePolicies.ts      |  5 ++-
 resources/assets/js/composables/useRouter.ts  |  2 +-
 .../js/composables/useSmartPlaylistForm.ts    |  2 +-
 .../assets/js/composables/useSongList.ts      | 12 +++--
 .../js/composables/useThirdPartyServices.ts   |  2 +-
 resources/assets/js/composables/useUpload.ts  | 15 ++++---
 resources/assets/js/config/events.ts          |  2 +-
 resources/assets/js/config/index.ts           |  7 ---
 resources/assets/js/config/routes.ts          |  9 ++--
 resources/assets/js/directives/index.ts       |  5 ---
 resources/assets/js/directives/tooltip.ts     |  2 +-
 resources/assets/js/remote/App.vue            |  9 ++--
 .../js/remote/components/PlayableDetails.vue  |  3 +-
 .../js/remote/components/RemoteFooter.spec.ts |  2 +-
 .../js/remote/components/RemoteFooter.vue     |  2 +-
 .../assets/js/remote/components/Scanner.vue   |  2 +-
 .../js/remote/components/VolumeControl.vue    |  2 +-
 resources/assets/js/router.ts                 |  3 +-
 resources/assets/js/services/audioService.ts  |  7 +--
 .../assets/js/services/authService.spec.ts    |  9 ++--
 resources/assets/js/services/authService.ts   |  6 +--
 .../js/services/downloadService.spec.ts       |  4 +-
 .../assets/js/services/downloadService.ts     |  6 +--
 resources/assets/js/services/http.ts          |  4 +-
 resources/assets/js/services/index.ts         | 15 -------
 .../js/services/invitationService.spec.ts     |  5 ++-
 .../assets/js/services/invitationService.ts   |  7 +--
 .../js/services/mediaInfoService.spec.ts      |  8 ++--
 .../assets/js/services/mediaInfoService.ts    |  7 ++-
 .../js/services/playbackService.spec.ts       | 24 +++++-----
 .../assets/js/services/playbackService.ts     | 29 ++++++------
 .../playlistCollaborationService.spec.ts      |  3 +-
 .../services/playlistCollaborationService.ts  |  3 +-
 .../assets/js/services/plusService.spec.ts    |  2 +-
 resources/assets/js/services/plusService.ts   |  2 +-
 .../assets/js/services/socketListener.ts      |  7 ++-
 resources/assets/js/services/socketService.ts |  4 +-
 resources/assets/js/services/uploadService.ts |  9 ++--
 .../assets/js/services/volumeManager.spec.ts  |  2 +-
 .../assets/js/services/youTubeService.spec.ts |  4 +-
 .../assets/js/services/youTubeService.ts      |  5 ++-
 resources/assets/js/stores/albumStore.spec.ts |  5 ++-
 resources/assets/js/stores/albumStore.ts      |  8 ++--
 .../assets/js/stores/artistStore.spec.ts      |  4 +-
 resources/assets/js/stores/artistStore.ts     |  6 ++-
 resources/assets/js/stores/commonStore.ts     | 10 ++++-
 resources/assets/js/stores/equalizerStore.ts  |  4 +-
 .../assets/js/stores/favoriteStore.spec.ts    |  6 +--
 resources/assets/js/stores/favoriteStore.ts   |  6 +--
 resources/assets/js/stores/genreStore.spec.ts |  2 +-
 resources/assets/js/stores/genreStore.ts      |  2 +-
 resources/assets/js/stores/index.ts           | 19 --------
 .../assets/js/stores/overviewStore.spec.ts    | 10 +++--
 resources/assets/js/stores/overviewStore.ts   |  6 +--
 .../assets/js/stores/playlistFolderStore.ts   |  2 +-
 .../assets/js/stores/playlistStore.spec.ts    |  7 +--
 resources/assets/js/stores/playlistStore.ts   |  7 ++-
 resources/assets/js/stores/podcastStore.ts    |  2 +-
 .../assets/js/stores/preferenceStore.spec.ts  |  6 +--
 resources/assets/js/stores/preferenceStore.ts |  2 +-
 resources/assets/js/stores/queueStore.spec.ts |  9 ++--
 resources/assets/js/stores/queueStore.ts      |  8 ++--
 .../js/stores/recentlyPlayedStore.spec.ts     |  7 +--
 .../assets/js/stores/recentlyPlayedStore.ts   |  4 +-
 .../assets/js/stores/searchStore.spec.ts      | 11 +++--
 resources/assets/js/stores/searchStore.ts     |  6 ++-
 .../assets/js/stores/settingStore.spec.ts     |  4 +-
 resources/assets/js/stores/settingStore.ts    |  2 +-
 resources/assets/js/stores/songStore.spec.ts  | 26 +++++------
 resources/assets/js/stores/songStore.ts       | 16 +++++--
 resources/assets/js/stores/themeStore.spec.ts |  3 +-
 resources/assets/js/stores/themeStore.ts      |  2 +-
 resources/assets/js/stores/userStore.spec.ts  |  6 +--
 resources/assets/js/stores/userStore.ts       |  6 +--
 resources/assets/js/stores/visualizerStore.ts |  2 +-
 resources/assets/js/utils/common.ts           | 43 ------------------
 resources/assets/js/utils/eventBus.ts         |  2 +-
 resources/assets/js/utils/formatters.spec.ts  |  4 +-
 resources/assets/js/utils/helpers.ts          | 44 +++++++++++++++++--
 resources/assets/js/utils/index.ts            | 11 -----
 .../asteroid/scripts/AudioAnalyzer.ts         |  2 +-
 resources/assets/js/visualizers/default.ts    |  4 +-
 .../assets/js/visualizers/fluid-cube/index.ts |  4 +-
 .../assets/js/visualizers/plane-mesh/index.ts |  2 +-
 .../assets/js/visualizers/waveform/index.ts   |  2 +-
 tests/Traits/CreatesApplication.php           |  2 +-
 344 files changed, 1294 insertions(+), 997 deletions(-)
 rename resources/assets/js/components/invitation/{AcceptInvivation.spec.ts => AcceptInvitation.spec.ts} (95%)
 rename resources/assets/js/components/playlist/{InvitePlaylistContributors.spec.ts => InvitePlaylistCollaborators.spec.ts} (90%)
 delete mode 100644 resources/assets/js/composables/index.ts
 delete mode 100644 resources/assets/js/config/index.ts
 delete mode 100644 resources/assets/js/directives/index.ts
 delete mode 100644 resources/assets/js/services/index.ts
 delete mode 100644 resources/assets/js/stores/index.ts
 delete mode 100644 resources/assets/js/utils/common.ts
 delete mode 100644 resources/assets/js/utils/index.ts

diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index dbc23eb3..022299dc 100644
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -37,10 +37,10 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, provide, ref, watch } from 'vue'
 import { useOnline } from '@vueuse/core'
-import { queueStore } from '@/stores'
-import { authService } from '@/services'
+import { queueStore } from '@/stores/queueStore'
+import { authService } from '@/services/authService'
 import { CurrentPlayableKey, DialogBoxKey, MessageToasterKey, OverlayKey } from '@/symbols'
-import { useRouter } from '@/composables'
+import { useRouter } from '@/composables/useRouter'
 
 import DialogBox from '@/components/ui/DialogBox.vue'
 import MessageToaster from '@/components/ui/message-toaster/MessageToaster.vue'
diff --git a/resources/assets/js/__tests__/UnitTestCase.ts b/resources/assets/js/__tests__/UnitTestCase.ts
index f26ae891..fef84265 100644
--- a/resources/assets/js/__tests__/UnitTestCase.ts
+++ b/resources/assets/js/__tests__/UnitTestCase.ts
@@ -1,19 +1,20 @@
 import isMobile from 'ismobilejs'
 import { isObject, mergeWith } from 'lodash'
 import type { RenderOptions } from '@testing-library/vue'
-import { cleanup, createEvent, fireEvent, render } from '@testing-library/vue'
-import { afterEach, beforeEach, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
-import { commonStore, userStore } from '@/stores'
-import { http } from '@/services'
-import factory from '@/__tests__/factory'
-import { DialogBoxKey, MessageToasterKey, OverlayKey, RouterKey } from '@/symbols'
-import { DialogBoxStub, MessageToasterStub, OverlayStub } from '@/__tests__/stubs'
-import { routes } from '@/config'
-import Router from '@/router'
 import userEvent from '@testing-library/user-event'
 import type { UserEvent } from '@testing-library/user-event/dist/types/setup/setup'
 import type { EventType } from '@testing-library/dom/types/events'
+import { cleanup, createEvent, fireEvent, render } from '@testing-library/vue'
+import { afterEach, beforeEach, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import factory from '@/__tests__/factory'
+import { DialogBoxStub, MessageToasterStub, OverlayStub } from '@/__tests__/stubs'
+import { commonStore } from '@/stores/commonStore'
+import { userStore } from '@/stores/userStore'
+import { http } from '@/services/http'
+import { DialogBoxKey, MessageToasterKey, OverlayKey, RouterKey } from '@/symbols'
+import { routes } from '@/config/routes'
+import Router from '@/router'
 
 // A deep-merge function that
 // - supports symbols as keys (_.merge doesn't)
diff --git a/resources/assets/js/__tests__/factory/genreFactory.ts b/resources/assets/js/__tests__/factory/genreFactory.ts
index 0f6ed697..1279d340 100644
--- a/resources/assets/js/__tests__/factory/genreFactory.ts
+++ b/resources/assets/js/__tests__/factory/genreFactory.ts
@@ -1,5 +1,5 @@
 import type { Faker } from '@faker-js/faker'
-import { genres } from '@/config'
+import { genres } from '@/config/genres'
 
 export default (faker: Faker): Genre => {
   return {
diff --git a/resources/assets/js/__tests__/factory/songFactory.ts b/resources/assets/js/__tests__/factory/songFactory.ts
index ed783497..1f6d496e 100644
--- a/resources/assets/js/__tests__/factory/songFactory.ts
+++ b/resources/assets/js/__tests__/factory/songFactory.ts
@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker'
-import { genres } from '@/config'
+import { genres } from '@/config/genres'
 
 const generate = (partOfCompilation = false): Song => {
   const artistId = faker.datatype.number({ min: 3 })
diff --git a/resources/assets/js/__tests__/stubs.ts b/resources/assets/js/__tests__/stubs.ts
index 63613972..0d1639bf 100644
--- a/resources/assets/js/__tests__/stubs.ts
+++ b/resources/assets/js/__tests__/stubs.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { ref } from 'vue'
-import { noop } from '@/utils'
+import { noop } from '@/utils/helpers'
 
 import type MessageToaster from '@/components/ui/message-toaster/MessageToaster.vue'
 import type DialogBox from '@/components/ui/DialogBox.vue'
diff --git a/resources/assets/js/app.ts b/resources/assets/js/app.ts
index e9ae5ab2..d2598503 100644
--- a/resources/assets/js/app.ts
+++ b/resources/assets/js/app.ts
@@ -1,8 +1,12 @@
-import { createApp } from 'vue'
-import { focus, hideBrokenIcon, newTab, overflowFade, tooltip } from '@/directives'
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { createApp } from 'vue'
+import { focus } from '@/directives/focus'
+import { tooltip } from '@/directives/tooltip'
+import { hideBrokenIcon } from '@/directives/hideBrokenIcon'
+import { overflowFade } from '@/directives/overflowFade'
+import { newTab } from '@/directives/newTab'
 import { RouterKey } from '@/symbols'
-import { routes } from '@/config'
+import { routes } from '@/config/routes'
 import Router from '@/router'
 import '@/../css/app.pcss'
 import App from './App.vue'
diff --git a/resources/assets/js/components/album/AlbumCard.spec.ts b/resources/assets/js/components/album/AlbumCard.spec.ts
index 75c16c1f..8b23b4eb 100644
--- a/resources/assets/js/components/album/AlbumCard.spec.ts
+++ b/resources/assets/js/components/album/AlbumCard.spec.ts
@@ -1,10 +1,12 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
-import { downloadService, playbackService } from '@/services'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, songStore } from '@/stores'
-import { eventBus } from '@/utils'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { eventBus } from '@/utils/eventBus'
 import AlbumCard from './AlbumCard.vue'
 
 let album: Album
diff --git a/resources/assets/js/components/album/AlbumCard.vue b/resources/assets/js/components/album/AlbumCard.vue
index 7f138958..4412ad11 100644
--- a/resources/assets/js/components/album/AlbumCard.vue
+++ b/resources/assets/js/components/album/AlbumCard.vue
@@ -32,10 +32,15 @@
 
 <script lang="ts" setup>
 import { computed, toRef, toRefs } from 'vue'
-import { eventBus } from '@/utils'
-import { albumStore, artistStore, commonStore, songStore } from '@/stores'
-import { downloadService, playbackService } from '@/services'
-import { useDraggable, useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { useDraggable } from '@/composables/useDragAndDrop'
+import { useRouter } from '@/composables/useRouter'
 
 import BaseCard from '@/components/ui/album-artist/AlbumOrArtistCard.vue'
 
diff --git a/resources/assets/js/components/album/AlbumContextMenu.spec.ts b/resources/assets/js/components/album/AlbumContextMenu.spec.ts
index 702acb21..a743631a 100644
--- a/resources/assets/js/components/album/AlbumContextMenu.spec.ts
+++ b/resources/assets/js/components/album/AlbumContextMenu.spec.ts
@@ -3,9 +3,11 @@ import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { eventBus } from '@/utils'
-import { downloadService, playbackService } from '@/services'
-import { commonStore, songStore } from '@/stores'
+import { eventBus } from '@/utils/eventBus'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
 import AlbumContextMenu from './AlbumContextMenu.vue'
 
 let album: Album
diff --git a/resources/assets/js/components/album/AlbumContextMenu.vue b/resources/assets/js/components/album/AlbumContextMenu.vue
index 8f66a9b0..572e86eb 100644
--- a/resources/assets/js/components/album/AlbumContextMenu.vue
+++ b/resources/assets/js/components/album/AlbumContextMenu.vue
@@ -16,10 +16,15 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef } from 'vue'
-import { albumStore, artistStore, commonStore, songStore } from '@/stores'
-import { downloadService, playbackService } from '@/services'
-import { useContextMenu, useRouter } from '@/composables'
-import { eventBus } from '@/utils'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { useContextMenu } from '@/composables/useContextMenu'
+import { useRouter } from '@/composables/useRouter'
+import { eventBus } from '@/utils/eventBus'
 
 const { go } = useRouter()
 const { base, ContextMenu, open, trigger } = useContextMenu()
diff --git a/resources/assets/js/components/album/AlbumInfo.spec.ts b/resources/assets/js/components/album/AlbumInfo.spec.ts
index 0e5354f1..488c803d 100644
--- a/resources/assets/js/components/album/AlbumInfo.spec.ts
+++ b/resources/assets/js/components/album/AlbumInfo.spec.ts
@@ -2,8 +2,8 @@ import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore } from '@/stores'
-import { mediaInfoService } from '@/services'
+import { commonStore } from '@/stores/commonStore'
+import { mediaInfoService } from '@/services/mediaInfoService'
 import AlbumInfoComponent from './AlbumInfo.vue'
 
 let album: Album
diff --git a/resources/assets/js/components/album/AlbumInfo.vue b/resources/assets/js/components/album/AlbumInfo.vue
index 84978d89..6204dd90 100644
--- a/resources/assets/js/components/album/AlbumInfo.vue
+++ b/resources/assets/js/components/album/AlbumInfo.vue
@@ -33,8 +33,8 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, toRefs, watch } from 'vue'
-import { mediaInfoService } from '@/services'
-import { useThirdPartyServices } from '@/composables'
+import { mediaInfoService } from '@/services/mediaInfoService'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
 
 import AlbumThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
 import AlbumArtistInfo from '@/components/ui/album-artist/AlbumOrArtistInfo.vue'
diff --git a/resources/assets/js/components/album/AlbumTrackList.spec.ts b/resources/assets/js/components/album/AlbumTrackList.spec.ts
index 5c784fe0..8dec3431 100644
--- a/resources/assets/js/components/album/AlbumTrackList.spec.ts
+++ b/resources/assets/js/components/album/AlbumTrackList.spec.ts
@@ -2,8 +2,8 @@ import { screen } from '@testing-library/vue'
 import factory from '@/__tests__/factory'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { songStore } from '@/stores/songStore'
 import AlbumTrackList from './AlbumTrackList.vue'
-import { songStore } from '@/stores'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/components/album/AlbumTrackList.vue b/resources/assets/js/components/album/AlbumTrackList.vue
index 73553a98..47628407 100644
--- a/resources/assets/js/components/album/AlbumTrackList.vue
+++ b/resources/assets/js/components/album/AlbumTrackList.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import { onMounted, provide, ref, toRefs } from 'vue'
-import { songStore } from '@/stores'
+import { songStore } from '@/stores/songStore'
 import { PlayablesKey } from '@/symbols'
 
 import TrackListItem from '@/components/album/AlbumTrackListItem.vue'
diff --git a/resources/assets/js/components/album/AlbumTrackListItem.spec.ts b/resources/assets/js/components/album/AlbumTrackListItem.spec.ts
index c1bbd510..9f58a75e 100644
--- a/resources/assets/js/components/album/AlbumTrackListItem.spec.ts
+++ b/resources/assets/js/components/album/AlbumTrackListItem.spec.ts
@@ -1,11 +1,11 @@
+import { ref } from 'vue'
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
-import { songStore } from '@/stores'
-import { playbackService } from '@/services'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
 import { PlayablesKey } from '@/symbols'
-import { ref } from 'vue'
 import AlbumTrackListItem from './AlbumTrackListItem.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/album/AlbumTrackListItem.vue b/resources/assets/js/components/album/AlbumTrackListItem.vue
index 71e24277..c5cdd269 100644
--- a/resources/assets/js/components/album/AlbumTrackListItem.vue
+++ b/resources/assets/js/components/album/AlbumTrackListItem.vue
@@ -15,10 +15,12 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { computed, defineAsyncComponent, toRefs } from 'vue'
-import { songStore } from '@/stores'
-import { authService, playbackService } from '@/services'
-import { useThirdPartyServices } from '@/composables'
-import { requireInjection, secondsToHis } from '@/utils'
+import { songStore } from '@/stores/songStore'
+import { authService } from '@/services/authService'
+import { playbackService } from '@/services/playbackService'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
+import { requireInjection } from '@/utils/helpers'
+import { secondsToHis } from '@/utils/formatters'
 import { PlayablesKey } from '@/symbols'
 
 const props = defineProps<{ album: Album, track: AlbumTrack }>()
diff --git a/resources/assets/js/components/artist/ArtistCard.spec.ts b/resources/assets/js/components/artist/ArtistCard.spec.ts
index c71c6af5..6e7834bf 100644
--- a/resources/assets/js/components/artist/ArtistCard.spec.ts
+++ b/resources/assets/js/components/artist/ArtistCard.spec.ts
@@ -1,11 +1,13 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
-import { downloadService, playbackService } from '@/services'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, songStore } from '@/stores'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { eventBus } from '@/utils/eventBus'
 import ArtistCard from './ArtistCard.vue'
-import { eventBus } from '@/utils'
 
 let artist: Artist
 
diff --git a/resources/assets/js/components/artist/ArtistCard.vue b/resources/assets/js/components/artist/ArtistCard.vue
index 7a5e8403..21c58083 100644
--- a/resources/assets/js/components/artist/ArtistCard.vue
+++ b/resources/assets/js/components/artist/ArtistCard.vue
@@ -24,10 +24,14 @@
 
 <script lang="ts" setup>
 import { computed, toRef, toRefs } from 'vue'
-import { eventBus } from '@/utils'
-import { artistStore, commonStore, songStore } from '@/stores'
-import { downloadService, playbackService } from '@/services'
-import { useDraggable, useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { useDraggable } from '@/composables/useDragAndDrop'
+import { useRouter } from '@/composables/useRouter'
 
 import BaseCard from '@/components/ui/album-artist/AlbumOrArtistCard.vue'
 
diff --git a/resources/assets/js/components/artist/ArtistContextMenu.spec.ts b/resources/assets/js/components/artist/ArtistContextMenu.spec.ts
index 72f09bad..e31741b8 100644
--- a/resources/assets/js/components/artist/ArtistContextMenu.spec.ts
+++ b/resources/assets/js/components/artist/ArtistContextMenu.spec.ts
@@ -1,11 +1,13 @@
 import Router from '@/router'
 import { expect, it } from 'vitest'
+import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { eventBus } from '@/utils'
-import { downloadService, playbackService } from '@/services'
-import { commonStore, songStore } from '@/stores'
-import { screen } from '@testing-library/vue'
+import { eventBus } from '@/utils/eventBus'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
 import ArtistContextMenu from './ArtistContextMenu.vue'
 
 let artist: Artist
diff --git a/resources/assets/js/components/artist/ArtistContextMenu.vue b/resources/assets/js/components/artist/ArtistContextMenu.vue
index 77a1f33d..26a1e4a9 100644
--- a/resources/assets/js/components/artist/ArtistContextMenu.vue
+++ b/resources/assets/js/components/artist/ArtistContextMenu.vue
@@ -17,10 +17,14 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef } from 'vue'
-import { artistStore, commonStore, songStore } from '@/stores'
-import { downloadService, playbackService } from '@/services'
-import { useContextMenu, useRouter } from '@/composables'
-import { eventBus } from '@/utils'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { useContextMenu } from '@/composables/useContextMenu'
+import { useRouter } from '@/composables/useRouter'
+import { eventBus } from '@/utils/eventBus'
 
 const { go } = useRouter()
 const { base, ContextMenu, open, trigger } = useContextMenu()
diff --git a/resources/assets/js/components/artist/ArtistInfo.spec.ts b/resources/assets/js/components/artist/ArtistInfo.spec.ts
index 38492c40..08b14b18 100644
--- a/resources/assets/js/components/artist/ArtistInfo.spec.ts
+++ b/resources/assets/js/components/artist/ArtistInfo.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
+import { screen } from '@testing-library/vue'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore } from '@/stores'
-import { screen } from '@testing-library/vue'
-import { mediaInfoService } from '@/services'
+import { commonStore } from '@/stores/commonStore'
+import { mediaInfoService } from '@/services/mediaInfoService'
 import ArtistInfoComponent from './ArtistInfo.vue'
 
 let artist: Artist
diff --git a/resources/assets/js/components/artist/ArtistInfo.vue b/resources/assets/js/components/artist/ArtistInfo.vue
index dde693d0..9d94603f 100644
--- a/resources/assets/js/components/artist/ArtistInfo.vue
+++ b/resources/assets/js/components/artist/ArtistInfo.vue
@@ -23,8 +23,8 @@
 
 <script lang="ts" setup>
 import { ref, toRefs, watch } from 'vue'
-import { mediaInfoService } from '@/services'
-import { useThirdPartyServices } from '@/composables'
+import { mediaInfoService } from '@/services/mediaInfoService'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
 
 import ArtistThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
 import AlbumArtistInfo from '@/components/ui/album-artist/AlbumOrArtistInfo.vue'
diff --git a/resources/assets/js/components/auth/ForgotPasswordForm.spec.ts b/resources/assets/js/components/auth/ForgotPasswordForm.spec.ts
index a2f55f1d..7927b0e2 100644
--- a/resources/assets/js/components/auth/ForgotPasswordForm.spec.ts
+++ b/resources/assets/js/components/auth/ForgotPasswordForm.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { authService } from '@/services'
+import { authService } from '@/services/authService'
 import ForgotPasswordForm from './ForgotPasswordForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/auth/ForgotPasswordForm.vue b/resources/assets/js/components/auth/ForgotPasswordForm.vue
index 23aa38a3..fc0eacc0 100644
--- a/resources/assets/js/components/auth/ForgotPasswordForm.vue
+++ b/resources/assets/js/components/auth/ForgotPasswordForm.vue
@@ -23,8 +23,9 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { authService } from '@/services'
-import { useErrorHandler, useMessageToaster } from '@/composables'
+import { authService } from '@/services/authService'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
diff --git a/resources/assets/js/components/auth/LoginForm.spec.ts b/resources/assets/js/components/auth/LoginForm.spec.ts
index c9c7d42d..72064410 100644
--- a/resources/assets/js/components/auth/LoginForm.spec.ts
+++ b/resources/assets/js/components/auth/LoginForm.spec.ts
@@ -2,8 +2,8 @@ import { screen, waitFor } from '@testing-library/vue'
 import type { Mock } from 'vitest'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { authService } from '@/services'
-import { logger } from '@/utils'
+import { authService } from '@/services/authService'
+import { logger } from '@/utils/logger'
 import LoginFrom from './LoginForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index b7d32d8d..953d57af 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -40,9 +40,9 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { authService } from '@/services'
-import { logger } from '@/utils'
-import { useMessageToaster } from '@/composables'
+import { authService } from '@/services/authService'
+import { logger } from '@/utils/logger'
+import { useMessageToaster } from '@/composables/useMessageToaster'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import PasswordField from '@/components/ui/form/PasswordField.vue'
diff --git a/resources/assets/js/components/auth/ResetPasswordForm.spec.ts b/resources/assets/js/components/auth/ResetPasswordForm.spec.ts
index 671a770d..17a93ee8 100644
--- a/resources/assets/js/components/auth/ResetPasswordForm.spec.ts
+++ b/resources/assets/js/components/auth/ResetPasswordForm.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { authService } from '@/services'
+import { authService } from '@/services/authService'
 import ResetPasswordForm from './ResetPasswordForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/auth/ResetPasswordForm.vue b/resources/assets/js/components/auth/ResetPasswordForm.vue
index 46e342d5..dcdf3c80 100644
--- a/resources/assets/js/components/auth/ResetPasswordForm.vue
+++ b/resources/assets/js/components/auth/ResetPasswordForm.vue
@@ -19,9 +19,12 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { authService } from '@/services'
-import { base64Decode, logger } from '@/utils'
-import { useErrorHandler, useMessageToaster, useRouter } from '@/composables'
+import { authService } from '@/services/authService'
+import { base64Decode } from '@/utils/crypto'
+import { logger } from '@/utils/logger'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useRouter } from '@/composables/useRouter'
 
 import PasswordField from '@/components/ui/form/PasswordField.vue'
 import Btn from '@/components/ui/form/Btn.vue'
diff --git a/resources/assets/js/components/auth/sso/GoogleLoginButton.vue b/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
index 6dc575f2..ccb5ebf2 100644
--- a/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
+++ b/resources/assets/js/components/auth/sso/GoogleLoginButton.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import googleLogo from '@/../img/logos/google.svg'
-import { openPopup } from '@/utils'
+import { openPopup } from '@/utils/helpers'
 
 const emit = defineEmits<{
   (e: 'success', data: any): void
diff --git a/resources/assets/js/components/invitation/AcceptInvivation.spec.ts b/resources/assets/js/components/invitation/AcceptInvitation.spec.ts
similarity index 95%
rename from resources/assets/js/components/invitation/AcceptInvivation.spec.ts
rename to resources/assets/js/components/invitation/AcceptInvitation.spec.ts
index 88a18b4b..613097bb 100644
--- a/resources/assets/js/components/invitation/AcceptInvivation.spec.ts
+++ b/resources/assets/js/components/invitation/AcceptInvitation.spec.ts
@@ -1,9 +1,9 @@
 import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import AcceptInvitation from './AcceptInvitation.vue'
-import { invitationService } from '@/services'
 import factory from '@/__tests__/factory'
+import { invitationService } from '@/services/invitationService'
+import AcceptInvitation from './AcceptInvitation.vue'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/components/invitation/AcceptInvitation.vue b/resources/assets/js/components/invitation/AcceptInvitation.vue
index 6c4db17e..a398614b 100644
--- a/resources/assets/js/components/invitation/AcceptInvitation.vue
+++ b/resources/assets/js/components/invitation/AcceptInvitation.vue
@@ -43,8 +43,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { invitationService } from '@/services'
-import { useErrorHandler, useRouter } from '@/composables'
+import { invitationService } from '@/services/invitationService'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useRouter } from '@/composables/useRouter'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import PasswordField from '@/components/ui/form/PasswordField.vue'
diff --git a/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts b/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts
index 51ee01d8..d57df2ec 100644
--- a/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts
+++ b/resources/assets/js/components/koel-plus/ActivateLicenseForm.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { plusService } from '@/services'
+import { plusService } from '@/services/plusService'
 import Form from './ActivateLicenseForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue b/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
index ac36b292..47beab43 100644
--- a/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
+++ b/resources/assets/js/components/koel-plus/ActivateLicenseForm.vue
@@ -15,12 +15,13 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { plusService } from '@/services'
-import { forceReloadWindow } from '@/utils'
-import { useDialogBox, useErrorHandler } from '@/composables'
+import { plusService } from '@/services/plusService'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
+import { forceReloadWindow } from '@/utils/helpers'
 
 const { showSuccessDialog } = useDialogBox()
 const licenseKey = ref('')
diff --git a/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue b/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
index 552506d6..15c84e36 100644
--- a/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
+++ b/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 
 import Btn from '@/components/ui/form/Btn.vue'
 
diff --git a/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts b/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts
index b3e7e3f4..78cf9e5f 100644
--- a/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts
+++ b/resources/assets/js/components/koel-plus/KoelPlusModal.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
-import { commonStore } from '@/stores'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { commonStore } from '@/stores/commonStore'
 import Modal from './KoelPlusModal.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/koel-plus/KoelPlusModal.vue b/resources/assets/js/components/koel-plus/KoelPlusModal.vue
index 044a6ba5..a790499d 100644
--- a/resources/assets/js/components/koel-plus/KoelPlusModal.vue
+++ b/resources/assets/js/components/koel-plus/KoelPlusModal.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { useKoelPlus } from '@/composables'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import ActivateLicenseForm from '@/components/koel-plus/ActivateLicenseForm.vue'
diff --git a/resources/assets/js/components/layout/ModalWrapper.spec.ts b/resources/assets/js/components/layout/ModalWrapper.spec.ts
index 48e102e4..478acae3 100644
--- a/resources/assets/js/components/layout/ModalWrapper.spec.ts
+++ b/resources/assets/js/components/layout/ModalWrapper.spec.ts
@@ -1,8 +1,8 @@
 import { it } from 'vitest'
 import { screen, waitFor } from '@testing-library/vue'
 import factory from '@/__tests__/factory'
-import { eventBus } from '@/utils'
-import type { Events } from '@/config'
+import { eventBus } from '@/utils/eventBus'
+import type { Events } from '@/config/events'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import ModalWrapper from './ModalWrapper.vue'
 
diff --git a/resources/assets/js/components/layout/ModalWrapper.vue b/resources/assets/js/components/layout/ModalWrapper.vue
index 227e4a08..a72ae4e1 100644
--- a/resources/assets/js/components/layout/ModalWrapper.vue
+++ b/resources/assets/js/components/layout/ModalWrapper.vue
@@ -10,7 +10,8 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, watch } from 'vue'
-import { arrayify, eventBus, provideReadonly } from '@/utils'
+import { arrayify, provideReadonly } from '@/utils/helpers'
+import { eventBus } from '@/utils/eventBus'
 import { ModalContextKey } from '@/symbols'
 
 const modalNameToComponentMap = {
diff --git a/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts b/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts
index dc5a83a9..00c1a17d 100644
--- a/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/FooterExtraControls.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
-import { eventBus } from '@/utils'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { eventBus } from '@/utils/eventBus'
 import FooterExtraControls from './FooterExtraControls.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
index 0e760b07..4b61d8fb 100644
--- a/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue
@@ -35,8 +35,9 @@
 import { faBolt, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons'
 import { AudioLinesIcon } from 'lucide-vue-next'
 import { computed, onMounted, ref } from 'vue'
-import { eventBus, isFullscreenSupported, isAudioContextSupported as useEqualizer } from '@/utils'
-import { useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { isFullscreenSupported, isAudioContextSupported as useEqualizer } from '@/utils/supports'
+import { useRouter } from '@/composables/useRouter'
 
 import VolumeSlider from '@/components/ui/VolumeSlider.vue'
 import FooterBtn from '@/components/layout/app-footer/FooterButton.vue'
diff --git a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
index 8e71c9c8..203fe197 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.spec.ts
@@ -1,10 +1,10 @@
 import { ref } from 'vue'
 import { expect, it } from 'vitest'
+import { screen } from '@testing-library/vue'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { CurrentPlayableKey } from '@/symbols'
-import { playbackService } from '@/services'
-import { screen } from '@testing-library/vue'
+import { playbackService } from '@/services/playbackService'
 import Component from './FooterPlaybackControls.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
index eb675daf..e1b59748 100644
--- a/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterPlaybackControls.vue
@@ -22,8 +22,8 @@
 <script lang="ts" setup>
 import { faStepBackward, faStepForward } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
-import { playbackService } from '@/services'
-import { requireInjection } from '@/utils'
+import { playbackService } from '@/services/playbackService'
+import { requireInjection } from '@/utils/helpers'
 import { CurrentPlayableKey } from '@/symbols'
 
 import RepeatModeSwitch from '@/components/ui/RepeatModeSwitch.vue'
diff --git a/resources/assets/js/components/layout/app-footer/FooterQueueButton.vue b/resources/assets/js/components/layout/app-footer/FooterQueueButton.vue
index 18b07616..bef0ae93 100644
--- a/resources/assets/js/components/layout/app-footer/FooterQueueButton.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterQueueButton.vue
@@ -16,9 +16,11 @@
 <script setup lang="ts">
 import { faListOl } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
-import { useDroppable, useMessageToaster, useRouter } from '@/composables'
-import { queueStore } from '@/stores'
-import { pluralize } from '@/utils'
+import { useDroppable } from '@/composables/useDragAndDrop'
+import { useRouter } from '@/composables/useRouter'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { queueStore } from '@/stores/queueStore'
+import { pluralize } from '@/utils/formatters'
 
 import FooterButton from '@/components/layout/app-footer/FooterButton.vue'
 
diff --git a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
index c836cab3..f8194300 100644
--- a/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
+++ b/resources/assets/js/components/layout/app-footer/FooterSongInfo.vue
@@ -20,9 +20,11 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { defaultCover, getPlayableProp, isSong, requireInjection } from '@/utils'
+import defaultCover from '@/../img/covers/default.svg'
+import { getPlayableProp, requireInjection } from '@/utils/helpers'
+import { isSong } from '@/utils/typeGuards'
 import { CurrentPlayableKey } from '@/symbols'
-import { useDraggable } from '@/composables'
+import { useDraggable } from '@/composables/useDragAndDrop'
 
 const { startDragging } = useDraggable('playables')
 
diff --git a/resources/assets/js/components/layout/app-footer/index.spec.ts b/resources/assets/js/components/layout/app-footer/index.spec.ts
index 46b4d29a..d01d903a 100644
--- a/resources/assets/js/components/layout/app-footer/index.spec.ts
+++ b/resources/assets/js/components/layout/app-footer/index.spec.ts
@@ -1,8 +1,9 @@
 import { waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playbackService, volumeManager } from '@/services'
-import { preferenceStore } from '@/stores'
+import { playbackService } from '@/services/playbackService'
+import { volumeManager } from '@/services/volumeManager'
+import { preferenceStore } from '@/stores/preferenceStore'
 import Component from './index.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/app-footer/index.vue b/resources/assets/js/components/layout/app-footer/index.vue
index 7c09e031..989ad91b 100644
--- a/resources/assets/js/components/layout/app-footer/index.vue
+++ b/resources/assets/js/components/layout/app-footer/index.vue
@@ -20,11 +20,16 @@
 <script lang="ts" setup>
 import { throttle } from 'lodash'
 import { computed, nextTick, ref, watch } from 'vue'
-import { eventBus, isAudioContextSupported, isSong, requireInjection } from '@/utils'
-import { CurrentPlayableKey } from '@/symbols'
-import { artistStore, preferenceStore } from '@/stores'
-import { audioService, playbackService } from '@/services'
 import { useFullscreen } from '@vueuse/core'
+import { eventBus } from '@/utils/eventBus'
+import { isSong } from '@/utils/typeGuards'
+import { isAudioContextSupported } from '@/utils/supports'
+import { requireInjection } from '@/utils/helpers'
+import { CurrentPlayableKey } from '@/symbols'
+import { artistStore } from '@/stores/artistStore'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { audioService } from '@/services/audioService'
+import { playbackService } from '@/services/playbackService'
 
 import AudioPlayer from '@/components/layout/app-footer/AudioPlayer.vue'
 import SongInfo from '@/components/layout/app-footer/FooterSongInfo.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts b/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
index 7003976a..478114c7 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.spec.ts
@@ -1,9 +1,10 @@
 import { ref } from 'vue'
 import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import { albumStore, preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { albumStore } from '@/stores/albumStore'
+import { preferenceStore } from '@/stores/preferenceStore'
 import { CurrentPlayableKey } from '@/symbols'
 import AlbumArtOverlay from '@/components/ui/AlbumArtOverlay.vue'
 import MainContent from './MainContent.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/MainContent.vue b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
index 2b2cd05a..60146e62 100644
--- a/resources/assets/js/components/layout/main-wrapper/MainContent.vue
+++ b/resources/assets/js/components/layout/main-wrapper/MainContent.vue
@@ -40,9 +40,11 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, ref, toRef } from 'vue'
-import { isSong, requireInjection } from '@/utils'
-import { preferenceStore } from '@/stores'
-import { useRouter, useThirdPartyServices } from '@/composables'
+import { isSong } from '@/utils/typeGuards'
+import { requireInjection } from '@/utils/helpers'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { useRouter } from '@/composables/useRouter'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
 import { CurrentPlayableKey } from '@/symbols'
 
 import HomeScreen from '@/components/screens/HomeScreen.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.spec.ts b/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.spec.ts
index 5bfee679..e6a85a46 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore } from '@/stores'
+import { commonStore } from '@/stores/commonStore'
 import AboutKoelButton from './AboutKoelButton.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue b/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue
index 82167d65..2ad8f8ce 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue
@@ -15,8 +15,8 @@
 
 <script lang="ts" setup>
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { eventBus } from '@/utils'
-import { useNewVersionNotification } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { useNewVersionNotification } from '@/composables/useNewVersionNotification'
 
 import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.spec.ts b/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.spec.ts
index d752b7a6..31867cee 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 import LogoutButton from './LogoutButton.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.vue b/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.vue
index d0f0977c..8f55221d 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/LogoutButton.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { faArrowRightFromBracket } from '@fortawesome/free-solid-svg-icons'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 
 import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.spec.ts b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.spec.ts
index 30c9e2b7..ef13a52b 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.spec.ts
@@ -4,11 +4,14 @@ import type { Mock } from 'vitest'
 import { expect, it } from 'vitest'
 import type { RenderResult } from '@testing-library/vue'
 import { screen, waitFor } from '@testing-library/vue'
-import factory from '@/__tests__/factory'
-import { albumStore, artistStore, commonStore, preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore } from '@/stores/preferenceStore'
 import { CurrentPlayableKey } from '@/symbols'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 import Component from './SideSheet.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue
index 3844a02e..597152a5 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheet.vue
@@ -75,9 +75,14 @@ import isMobile from 'ismobilejs'
 import { faBars } from '@fortawesome/free-solid-svg-icons'
 import type { Ref } from 'vue'
 import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'
-import { albumStore, artistStore, preferenceStore } from '@/stores'
-import { useErrorHandler, useThirdPartyServices } from '@/composables'
-import { eventBus, isSong, requireInjection } from '@/utils'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
+import { eventBus } from '@/utils/eventBus'
+import { isSong } from '@/utils/typeGuards'
+import { requireInjection } from '@/utils/helpers'
 import { CurrentPlayableKey } from '@/symbols'
 
 import ProfileAvatar from '@/components/ui/ProfileAvatar.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.spec.ts b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.spec.ts
index 4c7e9287..f9af199d 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore } from '@/stores'
 import { screen } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { commonStore } from '@/stores/commonStore'
 import Component from './SideSheetTabHeader.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.vue b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.vue
index 8ce6498c..a170fa45 100644
--- a/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.vue
+++ b/resources/assets/js/components/layout/main-wrapper/side-sheet/SideSheetTabHeader.vue
@@ -43,7 +43,7 @@ import { faCompactDisc, faFeather } from '@fortawesome/free-solid-svg-icons'
 import { MicVocalIcon } from 'lucide-vue-next'
 import { faYoutube } from '@fortawesome/free-brands-svg-icons'
 import { computed } from 'vue'
-import { useThirdPartyServices } from '@/composables'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
 
 import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.spec.ts
index b776efa6..aea3e8c3 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 import Component from './HomeButton.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.vue
index f7a9ee7f..00160a16 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/HomeButton.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { faHome } from '@fortawesome/free-solid-svg-icons'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 
 const onClick = () => eventBus.emit('TOGGLE_SIDEBAR')
 </script>
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue
index c4d59cdc..3aec475b 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue
@@ -43,9 +43,10 @@
 <script lang="ts" setup>
 import { faFolder, faFolderOpen } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRefs } from 'vue'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import { eventBus } from '@/utils'
-import { useDraggable, useDroppable } from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { eventBus } from '@/utils/eventBus'
+import { useDraggable, useDroppable } from '@/composables/useDragAndDrop'
 
 import PlaylistSidebarItem from './PlaylistSidebarItem.vue'
 import SidebarItem from './SidebarItem.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.spec.ts
index 605fc9cb..57aaf571 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
 import { fireEvent, screen } from '@testing-library/vue'
-import { eventBus } from '@/utils'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { eventBus } from '@/utils/eventBus'
 import PlaylistSidebarItem from './PlaylistSidebarItem.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
index 24a5c2c1..8fce1ff4 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistSidebarItem.vue
@@ -25,9 +25,11 @@
 import { faClockRotateLeft, faHeart, faUsers, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'
 import { ListMusicIcon } from 'lucide-vue-next'
 import { computed, ref, toRefs } from 'vue'
-import { eventBus } from '@/utils'
-import { favoriteStore } from '@/stores'
-import { useDraggable, useDroppable, usePlaylistManagement, useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { useRouter } from '@/composables/useRouter'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { useDraggable, useDroppable } from '@/composables/useDragAndDrop'
+import { usePlaylistManagement } from '@/composables/usePlaylistManagement'
 
 import SidebarItem from '@/components/layout/main-wrapper/sidebar/SidebarItem.vue'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.spec.ts
index ba468b2b..f069166c 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.spec.ts
@@ -1,8 +1,8 @@
 import { it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
-import { commonStore } from '@/stores'
-import { eventBus } from '@/utils'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { commonStore } from '@/stores/commonStore'
+import { eventBus } from '@/utils/eventBus'
 import Sidebar from './Sidebar.vue'
 
 const standardItems = [
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
index 54acd4e7..54828e84 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
@@ -39,8 +39,12 @@
 <script lang="ts" setup>
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, watch } from 'vue'
-import { eventBus } from '@/utils'
-import { useAuthorization, useKoelPlus, useLocalStorage, useRouter, useUpload } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useKoelPlus } from '@/composables/useKoelPlus'
+import { useLocalStorage } from '@/composables/useLocalStorage'
+import { useUpload } from '@/composables/useUpload'
+import { useRouter } from '@/composables/useRouter'
 
 import BtnUpgradeToPlus from '@/components/koel-plus/BtnUpgradeToPlus.vue'
 import HomeButton from '@/components/layout/main-wrapper/sidebar/HomeButton.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts
index 42253f80..d9d45b41 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
 import { faHome } from '@fortawesome/free-solid-svg-icons'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { eventBus } from '@/utils/eventBus'
 import Component from './SidebarItem.vue'
-import { eventBus } from '@/utils'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.vue
index b90fc8c0..e11d21d0 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.vue
@@ -24,8 +24,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useRouter } from '@/composables'
-import { eventBus } from '@/utils'
+import { useRouter } from '@/composables/useRouter'
+import { eventBus } from '@/utils/eventBus'
 
 const props = withDefaults(defineProps<{ href?: string | undefined, screen?: ScreenName | undefined }>(), {
   href: undefined,
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.spec.ts
index 8693129a..07f82778 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.spec.ts
@@ -1,5 +1,5 @@
-import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
+import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import SidebarManageSection from './SidebarManageSection.vue'
 
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue
index 5dcd5d26..e01ed99a 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarManageSection.vue
@@ -29,7 +29,8 @@
 
 <script lang="ts" setup>
 import { faTools, faUpload, faUsers } from '@fortawesome/free-solid-svg-icons'
-import { useAuthorization, useUpload } from '@/composables'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useUpload } from '@/composables/useUpload'
 
 import SidebarSection from '@/components/layout/main-wrapper/sidebar/SidebarSection.vue'
 import SidebarSectionHeader from '@/components/layout/main-wrapper/sidebar/SidebarSectionHeader.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts
index 9fe79437..e4fa75dd 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.spec.ts
@@ -1,8 +1,9 @@
 import { screen } from '@testing-library/vue'
 import { it } from 'vitest'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
 import SidebarPlaylistsSection from './SidebarPlaylistsSection.vue'
 import PlaylistSidebarItem from './PlaylistSidebarItem.vue'
 import PlaylistFolderSidebarItem from './PlaylistFolderSidebarItem.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue
index 93d3bf86..cca1eaaf 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue
@@ -16,7 +16,9 @@
 
 <script lang="ts" setup>
 import { computed, toRef } from 'vue'
-import { favoriteStore, playlistFolderStore, playlistStore } from '@/stores'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
 
 import PlaylistSidebarItem from './PlaylistSidebarItem.vue'
 import PlaylistFolderSidebarItem from './PlaylistFolderSidebarItem.vue'
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.spec.ts b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.spec.ts
index 775fdc81..26d4d368 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.spec.ts
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.spec.ts
@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 import SidebarYourLibrarySection from './SidebarYourLibrarySection.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.vue b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.vue
index 7059c1b4..ab52f326 100644
--- a/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.vue
+++ b/resources/assets/js/components/layout/main-wrapper/sidebar/SidebarYourLibrarySection.vue
@@ -47,7 +47,7 @@ import { faCompactDisc, faMusic, faPodcast } from '@fortawesome/free-solid-svg-i
 import { GuitarIcon, MicVocalIcon } from 'lucide-vue-next'
 import { unescape } from 'lodash'
 import { ref } from 'vue'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 
 import SidebarSection from '@/components/layout/main-wrapper/sidebar/SidebarSection.vue'
 import SidebarSectionHeader from '@/components/layout/main-wrapper/sidebar/SidebarSectionHeader.vue'
diff --git a/resources/assets/js/components/meta/AboutKoelModal.spec.ts b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
index 82d36f62..abfa33a4 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.spec.ts
+++ b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import { commonStore } from '@/stores'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
 import { screen, waitFor } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { commonStore } from '@/stores/commonStore'
+import { http } from '@/services/http'
 import AboutKoelModel from './AboutKoelModal.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 988b6eb3..647d2bb2 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -63,8 +63,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useAuthorization, useKoelPlus, useNewVersionNotification } from '@/composables'
-import { eventBus } from '@/utils'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useKoelPlus } from '@/composables/useKoelPlus'
+import { useNewVersionNotification } from '@/composables/useNewVersionNotification'
+import { eventBus } from '@/utils/eventBus'
 
 import SponsorList from '@/components/meta/SponsorList.vue'
 import Btn from '@/components/ui/form/Btn.vue'
diff --git a/resources/assets/js/components/meta/CreditsBlock.spec.ts b/resources/assets/js/components/meta/CreditsBlock.spec.ts
index 12c6e906..93ec7231 100644
--- a/resources/assets/js/components/meta/CreditsBlock.spec.ts
+++ b/resources/assets/js/components/meta/CreditsBlock.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
+import { http } from '@/services/http'
 import CreditsBlock from './CreditsBlock.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/meta/CreditsBlock.vue b/resources/assets/js/components/meta/CreditsBlock.vue
index 66bcb0af..d1ad4030 100644
--- a/resources/assets/js/components/meta/CreditsBlock.vue
+++ b/resources/assets/js/components/meta/CreditsBlock.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import { orderBy } from 'lodash'
 import { onMounted, ref } from 'vue'
-import { http } from '@/services'
+import { http } from '@/services/http'
 
 interface DemoCredits {
   name: string
diff --git a/resources/assets/js/components/meta/SupportKoel.spec.ts b/resources/assets/js/components/meta/SupportKoel.spec.ts
index 1bb13a6f..61abf785 100644
--- a/resources/assets/js/components/meta/SupportKoel.spec.ts
+++ b/resources/assets/js/components/meta/SupportKoel.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it, vi } from 'vitest'
 import { screen } from '@testing-library/vue'
-import { preferenceStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { http } from '@/services/http'
 import SupportKoel from './SupportKoel.vue'
-import { http } from '@/services'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/components/meta/SupportKoel.vue b/resources/assets/js/components/meta/SupportKoel.vue
index b0714b4a..5ea2c612 100644
--- a/resources/assets/js/components/meta/SupportKoel.vue
+++ b/resources/assets/js/components/meta/SupportKoel.vue
@@ -21,8 +21,8 @@
 <script lang="ts" setup>
 import isMobile from 'ismobilejs'
 import { ref, watch } from 'vue'
-import { preferenceStore } from '@/stores'
-import { useKoelPlus } from '@/composables'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 const delayUntilShow = 30 * 60 * 1000 // 30 minutes
 
diff --git a/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts b/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts
index 8dc38569..4334a8dd 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/CreatePlaylistContextMenu.spec.ts
@@ -1,10 +1,9 @@
 import { expect, it } from 'vitest'
 import { screen, waitFor } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
-import type { Events } from '@/config'
-
-import CreateNewPlaylistContextMenu from './CreatePlaylistContextMenu.vue'
+import { eventBus } from '@/utils/eventBus'
+import type { Events } from '@/config/events'
+import Component from './CreatePlaylistContextMenu.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -21,7 +20,7 @@ new class extends UnitTestCase {
   }
 
   private async renderComponent () {
-    this.render(CreateNewPlaylistContextMenu)
+    this.render(Component)
     eventBus.emit('CREATE_NEW_PLAYLIST_CONTEXT_MENU_REQUESTED', { top: 420, left: 42 })
     await this.tick(2)
   }
diff --git a/resources/assets/js/components/playlist/CreatePlaylistContextMenu.vue b/resources/assets/js/components/playlist/CreatePlaylistContextMenu.vue
index a2cd76d9..22d7997c 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistContextMenu.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistContextMenu.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useContextMenu } from '@/composables'
-import { eventBus } from '@/utils'
-import type { Events } from '@/config'
+import { useContextMenu } from '@/composables/useContextMenu'
+import { eventBus } from '@/utils/eventBus'
+import type { Events } from '@/config/events'
 
 const { base, ContextMenu, open, trigger } = useContextMenu()
 
diff --git a/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue b/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue
index 6648bb1c..3d2e03a9 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistContextMenuButton.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { faCirclePlus } from '@fortawesome/free-solid-svg-icons'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 
 const requestContextMenu = (e: MouseEvent) => {
   const { bottom, right } = (e.currentTarget as HTMLButtonElement).getBoundingClientRect()
diff --git a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts
index 335c8e04..df940311 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts
+++ b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playlistFolderStore } from '@/stores'
 import factory from '@/__tests__/factory'
-import CreatePlaylistFolderForm from './CreatePlaylistFolderForm.vue'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import Component from './CreatePlaylistFolderForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -11,7 +11,7 @@ new class extends UnitTestCase {
       const storeMock = this.mock(playlistFolderStore, 'store')
         .mockResolvedValue(factory('playlist-folder'))
 
-      this.render(CreatePlaylistFolderForm)
+      this.render(Component)
 
       await this.type(screen.getByPlaceholderText('Folder name'), 'My folder')
       await this.user.click(screen.getByRole('button', { name: 'Save' }))
diff --git a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
index ff65e3fa..cbe4f33b 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistFolderForm.vue
@@ -25,14 +25,18 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { playlistFolderStore } from '@/stores'
-import { useDialogBox, useErrorHandler, useMessageToaster, useOverlay } from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.spec.ts b/resources/assets/js/components/playlist/CreatePlaylistForm.spec.ts
index 3c0fe3d2..e98b52ab 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.spec.ts
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.spec.ts
@@ -1,11 +1,11 @@
 import { expect, it } from 'vitest'
+import { ref } from 'vue'
 import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playlistStore } from '@/stores'
 import factory from '@/__tests__/factory'
-import { ref } from 'vue'
+import { playlistStore } from '@/stores/playlistStore'
 import { ModalContextKey } from '@/symbols'
-import CreatePlaylistForm from './CreatePlaylistForm.vue'
+import Component from './CreatePlaylistForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -13,7 +13,7 @@ new class extends UnitTestCase {
       const folder = factory('playlist-folder')
       const storeMock = this.mock(playlistStore, 'store').mockResolvedValue(factory('playlist'))
 
-      this.render(CreatePlaylistForm, {
+      this.render(Component, {
         global: {
           provide: {
             [<symbol>ModalContextKey]: [ref({ folder })],
@@ -36,7 +36,7 @@ new class extends UnitTestCase {
       const folder = factory('playlist-folder')
       const storeMock = this.mock(playlistStore, 'store').mockResolvedValue(factory('playlist'))
 
-      this.render(CreatePlaylistForm, {
+      this.render(Component, {
         global: {
           provide: {
             [<symbol>ModalContextKey]: [ref({ folder, playables })],
diff --git a/resources/assets/js/components/playlist/CreatePlaylistForm.vue b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
index bca2aa97..a26bc3ae 100644
--- a/resources/assets/js/components/playlist/CreatePlaylistForm.vue
+++ b/resources/assets/js/components/playlist/CreatePlaylistForm.vue
@@ -34,9 +34,16 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef } from 'vue'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import { getPlayableCollectionContentType, pluralize } from '@/utils'
-import { useDialogBox, useErrorHandler, useMessageToaster, useModal, useOverlay, useRouter } from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { getPlayableCollectionContentType } from '@/utils/typeGuards'
+import { pluralize } from '@/utils/formatters'
+import { useRouter } from '@/composables/useRouter'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useModal } from '@/composables/useModal'
+import { useOverlay } from '@/composables/useOverlay'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
@@ -44,6 +51,7 @@ import FormRow from '@/components/ui/form/FormRow.vue'
 import SelectBox from '@/components/ui/form/SelectBox.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/playlist/EditPlaylistFolderForm.spec.ts b/resources/assets/js/components/playlist/EditPlaylistFolderForm.spec.ts
index 1bca97f9..5d81425e 100644
--- a/resources/assets/js/components/playlist/EditPlaylistFolderForm.spec.ts
+++ b/resources/assets/js/components/playlist/EditPlaylistFolderForm.spec.ts
@@ -1,18 +1,18 @@
 import { ref } from 'vue'
 import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playlistFolderStore } from '@/stores'
+import factory from '@/__tests__/factory'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
 import { ModalContextKey } from '@/symbols'
-import EditPlaylistFolderForm from './EditPlaylistFolderForm.vue'
+import Component from './EditPlaylistFolderForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
     it('submits', async () => {
       const folder = factory('playlist-folder', { name: 'My folder' })
       const renameMock = this.mock(playlistFolderStore, 'rename')
-      this.render(EditPlaylistFolderForm, {
+      this.render(Component, {
         global: {
           provide: {
             [<symbol>ModalContextKey]: [ref({ folder })],
diff --git a/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue b/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue
index 081b9028..1f4feb80 100644
--- a/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue
+++ b/resources/assets/js/components/playlist/EditPlaylistFolderForm.vue
@@ -19,14 +19,19 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { playlistFolderStore } from '@/stores'
-import { useDialogBox, useErrorHandler, useMessageToaster, useModal, useOverlay } from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
+import { useModal } from '@/composables/useModal'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/playlist/EditPlaylistForm.spec.ts b/resources/assets/js/components/playlist/EditPlaylistForm.spec.ts
index 4279fa66..f48878b4 100644
--- a/resources/assets/js/components/playlist/EditPlaylistForm.spec.ts
+++ b/resources/assets/js/components/playlist/EditPlaylistForm.spec.ts
@@ -1,11 +1,12 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playlistFolderStore, playlistStore } from '@/stores'
 import { ref } from 'vue'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
 import { screen, waitFor } from '@testing-library/vue'
 import { ModalContextKey } from '@/symbols'
-import EditPlaylistForm from './EditPlaylistForm.vue'
+import Component from './EditPlaylistForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -21,7 +22,7 @@ new class extends UnitTestCase {
 
       const updateMock = this.mock(playlistStore, 'update')
 
-      this.render(EditPlaylistForm, {
+      this.render(Component, {
         global: {
           provide: {
             [<symbol>ModalContextKey]: [ref({ playlist })],
diff --git a/resources/assets/js/components/playlist/EditPlaylistForm.vue b/resources/assets/js/components/playlist/EditPlaylistForm.vue
index 7c55070d..e5f289bc 100644
--- a/resources/assets/js/components/playlist/EditPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/EditPlaylistForm.vue
@@ -36,8 +36,13 @@
 
 <script lang="ts" setup>
 import { ref, toRef } from 'vue'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import { useDialogBox, useErrorHandler, useMessageToaster, useModal, useOverlay } from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
+import { useModal } from '@/composables/useModal'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
@@ -45,6 +50,7 @@ import FormRow from '@/components/ui/form/FormRow.vue'
 import SelectBox from '@/components/ui/form/SelectBox.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/playlist/InvitePlaylistContributors.spec.ts b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.spec.ts
similarity index 90%
rename from resources/assets/js/components/playlist/InvitePlaylistContributors.spec.ts
rename to resources/assets/js/components/playlist/InvitePlaylistCollaborators.spec.ts
index d126aa1e..391817d8 100644
--- a/resources/assets/js/components/playlist/InvitePlaylistContributors.spec.ts
+++ b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.spec.ts
@@ -2,7 +2,7 @@ import { expect, it } from 'vitest'
 import { screen, waitFor } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { playlistCollaborationService } from '@/services'
+import { playlistCollaborationService } from '@/services/playlistCollaborationService'
 import Component from './InvitePlaylistCollaborators.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
index 492f04d2..af3cc417 100644
--- a/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
+++ b/resources/assets/js/components/playlist/InvitePlaylistCollaborators.vue
@@ -12,10 +12,10 @@
 <script lang="ts" setup>
 import { faCheckCircle, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRefs } from 'vue'
-import { copyText } from '@/utils'
-import { playlistCollaborationService } from '@/services'
+import { playlistCollaborationService } from '@/services/playlistCollaborationService'
 
 import Btn from '@/components/ui/form/Btn.vue'
+import { copyText } from '@/utils/helpers'
 
 const props = defineProps<{ playlist: Playlist }>()
 const { playlist } = toRefs(props)
diff --git a/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts b/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts
index 4cbd2787..2e5b66b9 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistCollaborationModal.spec.ts
@@ -1,7 +1,7 @@
+import { ref } from 'vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { ref } from 'vue'
 import { ModalContextKey } from '@/symbols'
 import Modal from './PlaylistCollaborationModal.vue'
 
diff --git a/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue b/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
index b98b87ca..249793b2 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaborationModal.vue
@@ -35,13 +35,15 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useAuthorization, useModal } from '@/composables'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useModal } from '@/composables/useModal'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import InviteCollaborators from '@/components/playlist/InvitePlaylistCollaborators.vue'
 import CollaboratorList from '@/components/playlist/PlaylistCollaboratorList.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const playlist = useModal().getFromContext<Playlist>('playlist')
 const { currentUser } = useAuthorization()
 
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts b/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts
index 11db31bd..d58e2eab 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorList.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { playlistCollaborationService } from '@/services'
+import { playlistCollaborationService } from '@/services/playlistCollaborationService'
 import Component from './PlaylistCollaboratorList.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
index aef597ee..0c62bf86 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorList.vue
@@ -17,9 +17,11 @@
 import { sortBy } from 'lodash'
 import type { Ref } from 'vue'
 import { computed, onMounted, ref, toRefs } from 'vue'
-import { useAuthorization, useDialogBox, useErrorHandler } from '@/composables'
-import { playlistCollaborationService } from '@/services'
-import { eventBus } from '@/utils'
+import { playlistCollaborationService } from '@/services/playlistCollaborationService'
+import { eventBus } from '@/utils/eventBus'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import ListSkeleton from '@/components/ui/skeletons/PlaylistCollaboratorListSkeleton.vue'
 import ListItem from '@/components/playlist/PlaylistCollaboratorListItem.vue'
diff --git a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
index 495ac073..fce8a6ec 100644
--- a/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
+++ b/resources/assets/js/components/playlist/PlaylistCollaboratorListItem.vue
@@ -28,10 +28,10 @@
 <script lang="ts" setup>
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons'
 import { toRefs } from 'vue'
+import { useAuthorization } from '@/composables/useAuthorization'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import UserAvatar from '@/components/user/UserAvatar.vue'
-import { useAuthorization } from '@/composables'
 
 const props = defineProps<{
   collaborator: PlaylistCollaborator
diff --git a/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts b/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
index aff5dead..21b72b28 100644
--- a/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistContextMenu.spec.ts
@@ -1,12 +1,14 @@
-import Router from '@/router'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
 import factory from '@/__tests__/factory'
-import { screen, waitFor } from '@testing-library/vue'
-import { queueStore, songStore, userStore } from '@/stores'
-import { playbackService } from '@/services'
 import { MessageToasterStub } from '@/__tests__/stubs'
+import { screen, waitFor } from '@testing-library/vue'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { userStore } from '@/stores/userStore'
+import { playbackService } from '@/services/playbackService'
+import { eventBus } from '@/utils/eventBus'
+import Router from '@/router'
 import PlaylistContextMenu from './PlaylistContextMenu.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/playlist/PlaylistContextMenu.vue b/resources/assets/js/components/playlist/PlaylistContextMenu.vue
index 74f918f1..89e45e8c 100644
--- a/resources/assets/js/components/playlist/PlaylistContextMenu.vue
+++ b/resources/assets/js/components/playlist/PlaylistContextMenu.vue
@@ -17,10 +17,15 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { eventBus } from '@/utils'
-import { useContextMenu, useKoelPlus, useMessageToaster, usePolicies, useRouter } from '@/composables'
-import { playbackService } from '@/services'
-import { queueStore, songStore } from '@/stores'
+import { eventBus } from '@/utils/eventBus'
+import { useRouter } from '@/composables/useRouter'
+import { useContextMenu } from '@/composables/useContextMenu'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { usePolicies } from '@/composables/usePolicies'
+import { useKoelPlus } from '@/composables/useKoelPlus'
+import { playbackService } from '@/services/playbackService'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
 
 const { base, ContextMenu, open, trigger } = useContextMenu()
 const { go } = useRouter()
diff --git a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
index 576fbe46..3d547b5f 100644
--- a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
+++ b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.spec.ts
@@ -1,12 +1,13 @@
-import Router from '@/router'
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
-import factory from '@/__tests__/factory'
 import { screen, waitFor } from '@testing-library/vue'
-import { playlistStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
 import { MessageToasterStub } from '@/__tests__/stubs'
+import { playlistStore } from '@/stores/playlistStore'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
+import { eventBus } from '@/utils/eventBus'
+import Router from '@/router'
 import PlaylistFolderContextMenu from './PlaylistFolderContextMenu.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue
index 693fa79c..0f299817 100644
--- a/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue
+++ b/resources/assets/js/components/playlist/PlaylistFolderContextMenu.vue
@@ -17,10 +17,13 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { eventBus } from '@/utils'
-import { playlistStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
-import { useContextMenu, useMessageToaster, useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { playlistStore } from '@/stores/playlistStore'
+import { playbackService } from '@/services/playbackService'
+import { useRouter } from '@/composables/useRouter'
+import { useContextMenu } from '@/composables/useContextMenu'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { songStore } from '@/stores/songStore'
 
 const { base, ContextMenu, open, trigger } = useContextMenu()
 const { go } = useRouter()
diff --git a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
index 61a0c7e3..ede77f0c 100644
--- a/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue
@@ -53,17 +53,16 @@
 <script lang="ts" setup>
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { ref, toRef } from 'vue'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import {
-  useDialogBox,
-  useErrorHandler,
-  useKoelPlus,
-  useMessageToaster,
-  useModal,
-  useOverlay,
-  useRouter,
-  useSmartPlaylistForm,
-} from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useModal } from '@/composables/useModal'
+import { useOverlay } from '@/composables/useOverlay'
+import { useSmartPlaylistForm } from '@/composables/useSmartPlaylistForm'
+import { useRouter } from '@/composables/useRouter'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 import CheckBox from '@/components/ui/form/CheckBox.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
diff --git a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
index 4b192b3d..6fcadf37 100644
--- a/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/EditSmartPlaylistForm.vue
@@ -59,17 +59,17 @@
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { reactive, toRef } from 'vue'
 import { cloneDeep, isEqual } from 'lodash'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import { eventBus } from '@/utils'
-import {
-  useDialogBox,
-  useErrorHandler,
-  useKoelPlus,
-  useMessageToaster,
-  useModal,
-  useOverlay,
-  useSmartPlaylistForm,
-} from '@/composables'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { eventBus } from '@/utils/eventBus'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useModal } from '@/composables/useModal'
+import { useOverlay } from '@/composables/useOverlay'
+import { useSmartPlaylistForm } from '@/composables/useSmartPlaylistForm'
+import { useKoelPlus } from '@/composables/useKoelPlus'
+
 import CheckBox from '@/components/ui/form/CheckBox.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
index cb6cce21..e597bde8 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRuleGroup.vue
@@ -39,7 +39,7 @@
 <script lang="ts" setup>
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { defineAsyncComponent, reactive, toRefs } from 'vue'
-import { playlistStore } from '@/stores'
+import { playlistStore } from '@/stores/playlistStore'
 
 const props = defineProps<{ group: SmartPlaylistRuleGroup, isFirstGroup: boolean }>()
 const emit = defineEmits<{ (e: 'input', group: SmartPlaylistRuleGroup): void }>()
diff --git a/resources/assets/js/components/podcast/AddPodcastForm.spec.ts b/resources/assets/js/components/podcast/AddPodcastForm.spec.ts
index dd5b6d06..c1027e44 100644
--- a/resources/assets/js/components/podcast/AddPodcastForm.spec.ts
+++ b/resources/assets/js/components/podcast/AddPodcastForm.spec.ts
@@ -1,9 +1,9 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { podcastStore } from '@/stores'
-import Component from './AddPodcastForm.vue'
 import factory from '@/__tests__/factory'
+import { podcastStore } from '@/stores/podcastStore'
+import Component from './AddPodcastForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/components/podcast/AddPodcastForm.vue b/resources/assets/js/components/podcast/AddPodcastForm.vue
index 92eec18c..97195b8f 100644
--- a/resources/assets/js/components/podcast/AddPodcastForm.vue
+++ b/resources/assets/js/components/podcast/AddPodcastForm.vue
@@ -27,14 +27,18 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useDialogBox, useErrorHandler, useMessageToaster, useOverlay } from '@/composables'
-import { podcastStore } from '@/stores'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { podcastStore } from '@/stores/podcastStore'
 
 import TextInput from '@/components/ui/form/TextInput.vue'
 import Btn from '@/components/ui/form/Btn.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/podcast/EpisodeItem.spec.ts b/resources/assets/js/components/podcast/EpisodeItem.spec.ts
index d8d2ae9f..d089a255 100644
--- a/resources/assets/js/components/podcast/EpisodeItem.spec.ts
+++ b/resources/assets/js/components/podcast/EpisodeItem.spec.ts
@@ -1,10 +1,10 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import Component from './EpisodeItem.vue'
 import factory from '@/__tests__/factory'
-import { playbackService } from '@/services'
-import { preferenceStore } from '@/stores'
+import { playbackService } from '@/services/playbackService'
+import { preferenceStore } from '@/stores/preferenceStore'
+import Component from './EpisodeItem.vue'
 
 new class extends UnitTestCase {
   private renderComponent (episode: Episode, podcast?: Podcast) {
diff --git a/resources/assets/js/components/podcast/EpisodeItem.vue b/resources/assets/js/components/podcast/EpisodeItem.vue
index d3067c7e..71834421 100644
--- a/resources/assets/js/components/podcast/EpisodeItem.vue
+++ b/resources/assets/js/components/podcast/EpisodeItem.vue
@@ -54,11 +54,14 @@ import DOMPurify from 'dompurify'
 import { orderBy } from 'lodash'
 import { faBookmark, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, toRefs } from 'vue'
-import { eventBus, secondsToHumanReadable } from '@/utils'
-import { useDraggable } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { secondsToHumanReadable } from '@/utils/formatters'
+import { useDraggable } from '@/composables/useDragAndDrop'
 import { formatTimeAgo } from '@vueuse/core'
-import { playbackService } from '@/services'
-import { songStore as episodeStore, preferenceStore as preferences, queueStore } from '@/stores'
+import { playbackService } from '@/services/playbackService'
+import { songStore as episodeStore } from '@/stores/songStore'
+import { queueStore } from '@/stores/queueStore'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
 
 const props = defineProps<{ episode: Episode, podcast: Podcast }>()
 
diff --git a/resources/assets/js/components/podcast/EpisodePogress.spec.ts b/resources/assets/js/components/podcast/EpisodePogress.spec.ts
index ae7e8eac..91b9546c 100644
--- a/resources/assets/js/components/podcast/EpisodePogress.spec.ts
+++ b/resources/assets/js/components/podcast/EpisodePogress.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import Component from './EpisodeProgress.vue'
 import factory from '@/__tests__/factory'
+import Component from './EpisodeProgress.vue'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/components/podcast/PodcastCard.vue b/resources/assets/js/components/podcast/PodcastCard.vue
index d7a6359d..603e1232 100644
--- a/resources/assets/js/components/podcast/PodcastCard.vue
+++ b/resources/assets/js/components/podcast/PodcastCard.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 import { toRefs } from 'vue'
-import { useRouter } from '@/composables'
+import { useRouter } from '@/composables/useRouter'
 
 import BaseCard from '@/components/ui/album-artist/AlbumOrArtistCard.vue'
 
diff --git a/resources/assets/js/components/podcast/PodcastListSorter.vue b/resources/assets/js/components/podcast/PodcastListSorter.vue
index 190682b1..293acbdb 100644
--- a/resources/assets/js/components/podcast/PodcastListSorter.vue
+++ b/resources/assets/js/components/podcast/PodcastListSorter.vue
@@ -33,7 +33,7 @@
 import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons'
 import { OnClickOutside } from '@vueuse/components'
 import { computed, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
-import { useFloatingUi } from '@/composables'
+import { useFloatingUi } from '@/composables/useFloatingUi'
 
 const props = withDefaults(defineProps<{
   field?: PodcastListSortField
diff --git a/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue b/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
index 22c585b0..0444c044 100644
--- a/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
+++ b/resources/assets/js/components/profile-preferences/EditableProfileAvatar.vue
@@ -27,9 +27,9 @@
 import { faRefresh, faTimes, faUpload } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRefs } from 'vue'
 import { useFileDialog } from '@vueuse/core'
-import { userStore } from '@/stores'
-import { useFileReader } from '@/composables'
-import { gravatar } from '@/utils'
+import { userStore } from '@/stores/userStore'
+import { useFileReader } from '@/composables/useFileReader'
+import { gravatar } from '@/utils/helpers'
 
 import UserAvatar from '@/components/user/UserAvatar.vue'
 import ImageCropper from '@/components/utils/ImageCropper.vue'
diff --git a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
index 28ea28a5..c19d455d 100644
--- a/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
+++ b/resources/assets/js/components/profile-preferences/LastfmIntegration.vue
@@ -44,9 +44,12 @@
 <script lang="ts" setup>
 import { faLastfm } from '@fortawesome/free-brands-svg-icons'
 import { computed, defineAsyncComponent } from 'vue'
-import { authService, http } from '@/services'
-import { forceReloadWindow } from '@/utils'
-import { useAuthorization, useThirdPartyServices } from '@/composables'
+import { authService } from '@/services/authService'
+import { http } from '@/services/http'
+
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
+import { forceReloadWindow } from '@/utils/helpers'
 
 const Btn = defineAsyncComponent(() => import('@/components/ui/form/Btn.vue'))
 
diff --git a/resources/assets/js/components/profile-preferences/PreferencesForm.spec.ts b/resources/assets/js/components/profile-preferences/PreferencesForm.spec.ts
index 691d66f6..4afa3a80 100644
--- a/resources/assets/js/components/profile-preferences/PreferencesForm.spec.ts
+++ b/resources/assets/js/components/profile-preferences/PreferencesForm.spec.ts
@@ -1,20 +1,20 @@
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
-import { commonStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import PreferencesForm from './PreferencesForm.vue'
+import { commonStore } from '@/stores/commonStore'
+import Component from './PreferencesForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
     it('has "Transcode on mobile" option if supported', () => {
       commonStore.state.supports_transcoding = true
-      this.render(PreferencesForm)
+      this.render(Component)
       screen.getByTestId('transcode_on_mobile')
     })
 
     it('does not have "Transcode on mobile" option if not supported', async () => {
       commonStore.state.supports_transcoding = false
-      this.render(PreferencesForm)
+      this.render(Component)
       expect(screen.queryByTestId('transcode_on_mobile')).toBeNull()
     })
   }
diff --git a/resources/assets/js/components/profile-preferences/PreferencesForm.vue b/resources/assets/js/components/profile-preferences/PreferencesForm.vue
index e4100ef2..ab850484 100644
--- a/resources/assets/js/components/profile-preferences/PreferencesForm.vue
+++ b/resources/assets/js/components/profile-preferences/PreferencesForm.vue
@@ -54,8 +54,9 @@
 <script lang="ts" setup>
 import isMobile from 'ismobilejs'
 import { toRef } from 'vue'
-import { commonStore, preferenceStore as preferences } from '@/stores'
-import { useKoelPlus } from '@/composables'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 import CheckBox from '@/components/ui/form/CheckBox.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts b/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts
index d1725cc1..96ee0863 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.spec.ts
@@ -1,10 +1,10 @@
-import factory from 'factoria'
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { authService } from '@/services'
+import factory from '@/__tests__/factory'
 import { MessageToasterStub } from '@/__tests__/stubs'
-import ProfileForm from './ProfileForm.vue'
+import { authService } from '@/services/authService'
+import Component from './ProfileForm.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -35,6 +35,6 @@ new class extends UnitTestCase {
   }
 
   private renderComponent (user: User) {
-    return this.be(user).render(ProfileForm)
+    return this.be(user).render(Component)
   }
 }
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index 322b3ca3..251b0f49 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -72,9 +72,11 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import type { UpdateCurrentProfileData } from '@/services'
-import { authService } from '@/services'
-import { useAuthorization, useErrorHandler, useMessageToaster } from '@/composables'
+import type { UpdateCurrentProfileData } from '@/services/authService'
+import { authService } from '@/services/authService'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import PasswordField from '@/components/ui/form/PasswordField.vue'
@@ -85,6 +87,7 @@ import FormRow from '@/components/ui/form/FormRow.vue'
 
 const { toastSuccess } = useMessageToaster()
 const { currentUser } = useAuthorization()
+
 const profile = ref<UpdateCurrentProfileData>({} as UpdateCurrentProfileData)
 const isDemo = window.IS_DEMO
 
diff --git a/resources/assets/js/components/profile-preferences/QRLogin.spec.ts b/resources/assets/js/components/profile-preferences/QRLogin.spec.ts
index 4ba76650..d5762134 100644
--- a/resources/assets/js/components/profile-preferences/QRLogin.spec.ts
+++ b/resources/assets/js/components/profile-preferences/QRLogin.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it, vi } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { authService } from '@/services'
 import { screen } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { authService } from '@/services/authService'
 import Component from './QRLogin.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/profile-preferences/QRLogin.vue b/resources/assets/js/components/profile-preferences/QRLogin.vue
index bea07ee7..d62a176c 100644
--- a/resources/assets/js/components/profile-preferences/QRLogin.vue
+++ b/resources/assets/js/components/profile-preferences/QRLogin.vue
@@ -12,8 +12,8 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue'
 import { useQRCode } from '@vueuse/integrations/useQRCode'
-import { authService } from '@/services'
-import { base64Encode } from '@/utils'
+import { authService } from '@/services/authService'
+import { base64Encode } from '@/utils/crypto'
 
 const qrCodeData = ref('')
 const oneTimeToken = ref('')
diff --git a/resources/assets/js/components/profile-preferences/SpotifyIntegration.spec.ts b/resources/assets/js/components/profile-preferences/SpotifyIntegration.spec.ts
index 77a38fbc..3b42e199 100644
--- a/resources/assets/js/components/profile-preferences/SpotifyIntegration.spec.ts
+++ b/resources/assets/js/components/profile-preferences/SpotifyIntegration.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore } from '@/stores'
-import SpotifyIntegration from './SpotifyIntegration.vue'
+import { commonStore } from '@/stores/commonStore'
+import Component from './SpotifyIntegration.vue'
 
 new class extends UnitTestCase {
   protected test () {
@@ -16,7 +16,7 @@ new class extends UnitTestCase {
           this.be()
         }
 
-        expect(this.render(SpotifyIntegration).html()).toMatchSnapshot()
+        expect(this.render(Component).html()).toMatchSnapshot()
       },
     )
   }
diff --git a/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue b/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue
index af464092..83fb259a 100644
--- a/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue
+++ b/resources/assets/js/components/profile-preferences/SpotifyIntegration.vue
@@ -30,7 +30,8 @@
 
 <script lang="ts" setup>
 import { faSpotify } from '@fortawesome/free-brands-svg-icons'
-import { useAuthorization, useThirdPartyServices } from '@/composables'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
 
 const { isAdmin } = useAuthorization()
 const { useSpotify } = useThirdPartyServices()
diff --git a/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts b/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts
index 2a9d4b88..4587a281 100644
--- a/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts
+++ b/resources/assets/js/components/profile-preferences/ThemeCard.spec.ts
@@ -1,7 +1,7 @@
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
-import ThemeCard from './ThemeCard.vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import Component from './ThemeCard.vue'
 
 const theme: Theme = {
   id: 'sample',
@@ -22,7 +22,7 @@ new class extends UnitTestCase {
   }
 
   private renderComponent () {
-    return this.render(ThemeCard, {
+    return this.render(Component, {
       props: {
         theme,
       },
diff --git a/resources/assets/js/components/profile-preferences/ThemeCard.vue b/resources/assets/js/components/profile-preferences/ThemeCard.vue
index 61ed0ae4..914012b6 100644
--- a/resources/assets/js/components/profile-preferences/ThemeCard.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeCard.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import { toRefs } from 'vue'
-import { slugToTitle } from '@/utils'
+import { slugToTitle } from '@/utils/formatters'
 
 const props = defineProps<{ theme: Theme }>()
 defineEmits<{ (e: 'selected', theme: Theme): void }>()
diff --git a/resources/assets/js/components/profile-preferences/ThemeList.spec.ts b/resources/assets/js/components/profile-preferences/ThemeList.spec.ts
index 05c036ad..25eabb9a 100644
--- a/resources/assets/js/components/profile-preferences/ThemeList.spec.ts
+++ b/resources/assets/js/components/profile-preferences/ThemeList.spec.ts
@@ -1,14 +1,14 @@
 import { expect, it } from 'vitest'
-import { themeStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import themes from '@/themes'
-import ThemeList from './ThemeList.vue'
+import { themeStore } from '@/stores/themeStore'
+import Component from './ThemeList.vue'
 
 new class extends UnitTestCase {
   protected test () {
     it('displays all themes', () => {
       themeStore.init()
-      expect(this.render(ThemeList).getAllByTestId('theme-card').length).toEqual(themes.length)
+      expect(this.render(Component).getAllByTestId('theme-card').length).toEqual(themes.length)
     })
   }
 }
diff --git a/resources/assets/js/components/profile-preferences/ThemeList.vue b/resources/assets/js/components/profile-preferences/ThemeList.vue
index 16c56639..3f39e5d8 100644
--- a/resources/assets/js/components/profile-preferences/ThemeList.vue
+++ b/resources/assets/js/components/profile-preferences/ThemeList.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { toRef } from 'vue'
-import { themeStore } from '@/stores'
+import { themeStore } from '@/stores/themeStore'
 
 import ThemeCard from '@/components/profile-preferences/ThemeCard.vue'
 
diff --git a/resources/assets/js/components/screens/AlbumListScreen.spec.ts b/resources/assets/js/components/screens/AlbumListScreen.spec.ts
index 33e41c10..a04b06af 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.spec.ts
+++ b/resources/assets/js/components/screens/AlbumListScreen.spec.ts
@@ -1,8 +1,10 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { albumStore, commonStore, preferenceStore } from '@/stores'
 import { screen, waitFor } from '@testing-library/vue'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { albumStore } from '@/stores/albumStore'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore } from '@/stores/preferenceStore'
 import AlbumListScreen from './AlbumListScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/AlbumListScreen.vue b/resources/assets/js/components/screens/AlbumListScreen.vue
index e4723584..12e64f48 100644
--- a/resources/assets/js/components/screens/AlbumListScreen.vue
+++ b/resources/assets/js/components/screens/AlbumListScreen.vue
@@ -36,8 +36,13 @@
 <script lang="ts" setup>
 import { faCompactDisc } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRef, watch } from 'vue'
-import { albumStore, commonStore, preferenceStore as preferences } from '@/stores'
-import { useAuthorization, useErrorHandler, useInfiniteScroll, useRouter } from '@/composables'
+import { albumStore } from '@/stores/albumStore'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useInfiniteScroll } from '@/composables/useInfiniteScroll'
+import { useAuthorization } from '@/composables/useAuthorization'
 
 import AlbumCard from '@/components/album/AlbumCard.vue'
 import AlbumCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/AlbumScreen.spec.ts b/resources/assets/js/components/screens/AlbumScreen.spec.ts
index cfe6a454..e499c93c 100644
--- a/resources/assets/js/components/screens/AlbumScreen.spec.ts
+++ b/resources/assets/js/components/screens/AlbumScreen.spec.ts
@@ -1,11 +1,13 @@
-import Router from '@/router'
 import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { albumStore, commonStore, songStore } from '@/stores'
-import { downloadService } from '@/services'
-import { eventBus } from '@/utils'
+import { albumStore } from '@/stores/albumStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { eventBus } from '@/utils/eventBus'
+import Router from '@/router'
 import AlbumScreen from './AlbumScreen.vue'
 
 let album: Album
diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index 833c1bf9..236fdfdd 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -89,10 +89,17 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue'
-import { eventBus, pluralize } from '@/utils'
-import { albumStore, artistStore, commonStore, songStore } from '@/stores'
-import { downloadService } from '@/services'
-import { useErrorHandler, useRouter, useSongList, useSongListControls } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { pluralize } from '@/utils/formatters'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
+import { useRouter } from '@/composables/useRouter'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import AlbumThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
diff --git a/resources/assets/js/components/screens/AllSongsScreen.spec.ts b/resources/assets/js/components/screens/AllSongsScreen.spec.ts
index 15ef79b4..7e630fdb 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.spec.ts
+++ b/resources/assets/js/components/screens/AllSongsScreen.spec.ts
@@ -1,10 +1,12 @@
-import Router from '@/router'
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, queueStore, songStore } from '@/stores'
 import { screen, waitFor } from '@testing-library/vue'
-import { playbackService } from '@/services'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import Router from '@/router'
+import { commonStore } from '@/stores/commonStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
 import AllSongsScreen from './AllSongsScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/AllSongsScreen.vue b/resources/assets/js/components/screens/AllSongsScreen.vue
index 7c313fe6..366107cc 100644
--- a/resources/assets/js/components/screens/AllSongsScreen.vue
+++ b/resources/assets/js/components/screens/AllSongsScreen.vue
@@ -63,17 +63,17 @@
 <script lang="ts" setup>
 import { faVolumeOff } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRef, watch } from 'vue'
-import { pluralize, secondsToHumanReadable } from '@/utils'
-import { commonStore, queueStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
-import {
-  useErrorHandler,
-  useKoelPlus,
-  useLocalStorage,
-  useRouter,
-  useSongList,
-  useSongListControls,
-} from '@/composables'
+import { pluralize, secondsToHumanReadable } from '@/utils/formatters'
+import { commonStore } from '@/stores/commonStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useKoelPlus } from '@/composables/useKoelPlus'
+import { useLocalStorage } from '@/composables/useLocalStorage'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
diff --git a/resources/assets/js/components/screens/ArtistListScreen.spec.ts b/resources/assets/js/components/screens/ArtistListScreen.spec.ts
index 94e09c7c..1d13908c 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.spec.ts
+++ b/resources/assets/js/components/screens/ArtistListScreen.spec.ts
@@ -1,8 +1,10 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { artistStore, commonStore, preferenceStore } from '@/stores'
 import { screen, waitFor } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore } from '@/stores/preferenceStore'
 import ArtistListScreen from './ArtistListScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/ArtistListScreen.vue b/resources/assets/js/components/screens/ArtistListScreen.vue
index f3db6b95..4cdf71f1 100644
--- a/resources/assets/js/components/screens/ArtistListScreen.vue
+++ b/resources/assets/js/components/screens/ArtistListScreen.vue
@@ -36,8 +36,13 @@
 <script lang="ts" setup>
 import { faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRef, watch } from 'vue'
-import { artistStore, commonStore, preferenceStore as preferences } from '@/stores'
-import { useAuthorization, useErrorHandler, useInfiniteScroll, useRouter } from '@/composables'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useInfiniteScroll } from '@/composables/useInfiniteScroll'
+import { useAuthorization } from '@/composables/useAuthorization'
 
 import ArtistCard from '@/components/artist/ArtistCard.vue'
 import ArtistCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/ArtistScreen.spec.ts b/resources/assets/js/components/screens/ArtistScreen.spec.ts
index 4fb37ed1..f519c02a 100644
--- a/resources/assets/js/components/screens/ArtistScreen.spec.ts
+++ b/resources/assets/js/components/screens/ArtistScreen.spec.ts
@@ -1,11 +1,13 @@
-import Router from '@/router'
 import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { artistStore, commonStore, songStore } from '@/stores'
-import { downloadService } from '@/services'
-import { eventBus } from '@/utils'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { eventBus } from '@/utils/eventBus'
+import Router from '@/router'
 import ArtistScreen from './ArtistScreen.vue'
 
 let artist: Artist
diff --git a/resources/assets/js/components/screens/ArtistScreen.vue b/resources/assets/js/components/screens/ArtistScreen.vue
index 86a39691..e1d2558e 100644
--- a/resources/assets/js/components/screens/ArtistScreen.vue
+++ b/resources/assets/js/components/screens/ArtistScreen.vue
@@ -85,10 +85,17 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from 'vue'
-import { eventBus, pluralize } from '@/utils'
-import { albumStore, artistStore, songStore } from '@/stores'
-import { downloadService } from '@/services'
-import { useErrorHandler, useRouter, useSongList, useSongListControls, useThirdPartyServices } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { pluralize } from '@/utils/formatters'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
+import { useThirdPartyServices } from '@/composables/useThirdPartyServices'
+import { useRouter } from '@/composables/useRouter'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ArtistThumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
diff --git a/resources/assets/js/components/screens/EpisodeScreen.vue b/resources/assets/js/components/screens/EpisodeScreen.vue
index 12581295..4384e7a1 100644
--- a/resources/assets/js/components/screens/EpisodeScreen.vue
+++ b/resources/assets/js/components/screens/EpisodeScreen.vue
@@ -52,10 +52,15 @@
 import { faDownload, faExternalLink, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 import DOMPurify from 'dompurify'
 import { computed, ref, watch } from 'vue'
-import { songStore as episodeStore, podcastStore, preferenceStore as preferences, queueStore } from '@/stores'
-import { eventBus } from '@/utils'
-import { downloadService, playbackService } from '@/services'
-import { useErrorHandler, useRouter } from '@/composables'
+import { songStore as episodeStore } from '@/stores/songStore'
+import { queueStore } from '@/stores/queueStore'
+import { podcastStore } from '@/stores/podcastStore'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { eventBus } from '@/utils/eventBus'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import ScreenBase from '@/components/screens/ScreenBase.vue'
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
diff --git a/resources/assets/js/components/screens/FavoritesScreen.spec.ts b/resources/assets/js/components/screens/FavoritesScreen.spec.ts
index 42e2f744..ac54d679 100644
--- a/resources/assets/js/components/screens/FavoritesScreen.spec.ts
+++ b/resources/assets/js/components/screens/FavoritesScreen.spec.ts
@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { favoriteStore } from '@/stores'
+import { favoriteStore } from '@/stores/favoriteStore'
 import FavoritesScreen from './FavoritesScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/FavoritesScreen.vue b/resources/assets/js/components/screens/FavoritesScreen.vue
index 3cbe25dd..0d874cea 100644
--- a/resources/assets/js/components/screens/FavoritesScreen.vue
+++ b/resources/assets/js/components/screens/FavoritesScreen.vue
@@ -63,11 +63,13 @@
 <script lang="ts" setup>
 import { faHeartBroken } from '@fortawesome/free-solid-svg-icons'
 import { faHeart } from '@fortawesome/free-regular-svg-icons'
-import { pluralize } from '@/utils'
-import { favoriteStore } from '@/stores'
-import { downloadService } from '@/services'
-import { useRouter, useSongList, useSongListControls } from '@/composables'
 import { ref, toRef } from 'vue'
+import { pluralize } from '@/utils/formatters'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { downloadService } from '@/services/downloadService'
+import { useRouter } from '@/composables/useRouter'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/GenreListScreen.spec.ts b/resources/assets/js/components/screens/GenreListScreen.spec.ts
index c2deddb7..5ce6f27e 100644
--- a/resources/assets/js/components/screens/GenreListScreen.spec.ts
+++ b/resources/assets/js/components/screens/GenreListScreen.spec.ts
@@ -1,8 +1,9 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, genreStore } from '@/stores'
 import { screen, waitFor } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { commonStore } from '@/stores/commonStore'
+import { genreStore } from '@/stores/genreStore'
 import GenreListScreen from './GenreListScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/GenreListScreen.vue b/resources/assets/js/components/screens/GenreListScreen.vue
index 53220600..68d7c525 100644
--- a/resources/assets/js/components/screens/GenreListScreen.vue
+++ b/resources/assets/js/components/screens/GenreListScreen.vue
@@ -48,9 +48,11 @@
 import { GuitarIcon } from 'lucide-vue-next'
 import { maxBy, minBy } from 'lodash'
 import { computed, onMounted, ref } from 'vue'
-import { commonStore, genreStore } from '@/stores'
-import { pluralize } from '@/utils'
-import { useAuthorization, useErrorHandler } from '@/composables'
+import { commonStore } from '@/stores/commonStore'
+import { genreStore } from '@/stores/genreStore'
+import { pluralize } from '@/utils/formatters'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import GenreItemSkeleton from '@/components/ui/skeletons/GenreItemSkeleton.vue'
diff --git a/resources/assets/js/components/screens/GenreScreen.spec.ts b/resources/assets/js/components/screens/GenreScreen.spec.ts
index 40b4b94b..df918990 100644
--- a/resources/assets/js/components/screens/GenreScreen.spec.ts
+++ b/resources/assets/js/components/screens/GenreScreen.spec.ts
@@ -1,9 +1,10 @@
 import { expect, it } from 'vitest'
 import { screen, waitFor } from '@testing-library/vue'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { genreStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
+import factory from '@/__tests__/factory'
+import { genreStore } from '@/stores/genreStore'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
 import GenreScreen from './GenreScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/GenreScreen.vue b/resources/assets/js/components/screens/GenreScreen.vue
index 69f38a1e..ff52af7d 100644
--- a/resources/assets/js/components/screens/GenreScreen.vue
+++ b/resources/assets/js/components/screens/GenreScreen.vue
@@ -50,10 +50,15 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import { GuitarIcon } from 'lucide-vue-next'
-import { eventBus, pluralize, secondsToHumanReadable } from '@/utils'
-import { playbackService } from '@/services'
-import { genreStore, songStore } from '@/stores'
-import { useErrorHandler, useRouter, useSongList, useSongListControls } from '@/composables'
+import { pluralize, secondsToHumanReadable } from '@/utils/formatters'
+import { eventBus } from '@/utils/eventBus'
+import { playbackService } from '@/services/playbackService'
+import { genreStore } from '@/stores/genreStore'
+import { songStore } from '@/stores/songStore'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/HomeScreen.spec.ts b/resources/assets/js/components/screens/HomeScreen.spec.ts
index ee19f53b..3f22e3ff 100644
--- a/resources/assets/js/components/screens/HomeScreen.spec.ts
+++ b/resources/assets/js/components/screens/HomeScreen.spec.ts
@@ -1,9 +1,10 @@
+import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, overviewStore } from '@/stores'
-import type { Events } from '@/config'
-import { eventBus } from '@/utils'
-import { screen } from '@testing-library/vue'
+import { commonStore } from '@/stores/commonStore'
+import { overviewStore } from '@/stores/overviewStore'
+import type { Events } from '@/config/events'
+import { eventBus } from '@/utils/eventBus'
 import HomeScreen from './HomeScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/HomeScreen.vue b/resources/assets/js/components/screens/HomeScreen.vue
index 8f704745..670fa76c 100644
--- a/resources/assets/js/components/screens/HomeScreen.vue
+++ b/resources/assets/js/components/screens/HomeScreen.vue
@@ -37,9 +37,13 @@
 import { faVolumeOff } from '@fortawesome/free-solid-svg-icons'
 import { sample } from 'lodash'
 import { computed, ref } from 'vue'
-import { eventBus } from '@/utils'
-import { commonStore, overviewStore, userStore } from '@/stores'
-import { useAuthorization, useErrorHandler, useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { commonStore } from '@/stores/commonStore'
+import { overviewStore } from '@/stores/overviewStore'
+import { userStore } from '@/stores/userStore'
+import { useRouter } from '@/composables/useRouter'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import MostPlayedSongs from '@/components/screens/home/MostPlayedSongs.vue'
 import RecentlyPlayedSongs from '@/components/screens/home/RecentlyPlayedSongs.vue'
diff --git a/resources/assets/js/components/screens/PlaylistScreen.spec.ts b/resources/assets/js/components/screens/PlaylistScreen.spec.ts
index c79af672..998a154f 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.spec.ts
+++ b/resources/assets/js/components/screens/PlaylistScreen.spec.ts
@@ -1,10 +1,11 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { eventBus } from '@/utils'
 import { screen, waitFor } from '@testing-library/vue'
-import { playlistStore, songStore } from '@/stores'
-import { downloadService } from '@/services'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { eventBus } from '@/utils/eventBus'
+import { playlistStore } from '@/stores/playlistStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
 import PlaylistScreen from './PlaylistScreen.vue'
 
 let playlist: Playlist
diff --git a/resources/assets/js/components/screens/PlaylistScreen.vue b/resources/assets/js/components/screens/PlaylistScreen.vue
index 382f98a9..544c13d2 100644
--- a/resources/assets/js/components/screens/PlaylistScreen.vue
+++ b/resources/assets/js/components/screens/PlaylistScreen.vue
@@ -74,17 +74,18 @@
 import { faFile } from '@fortawesome/free-regular-svg-icons'
 import { differenceBy } from 'lodash'
 import { ref, watch } from 'vue'
-import { eventBus, pluralize } from '@/utils'
-import { playlistStore, songStore } from '@/stores'
-import { downloadService, playlistCollaborationService } from '@/services'
-import {
-  useAuthorization,
-  useErrorHandler,
-  usePlaylistManagement,
-  useRouter,
-  useSongList,
-  useSongListControls,
-} from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { pluralize } from '@/utils/formatters'
+import { playlistStore } from '@/stores/playlistStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { playlistCollaborationService } from '@/services/playlistCollaborationService'
+import { useRouter } from '@/composables/useRouter'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { usePlaylistManagement } from '@/composables/usePlaylistManagement'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/PodcastListScreen.vue b/resources/assets/js/components/screens/PodcastListScreen.vue
index 1e6e2dba..ca31744c 100644
--- a/resources/assets/js/components/screens/PodcastListScreen.vue
+++ b/resources/assets/js/components/screens/PodcastListScreen.vue
@@ -41,9 +41,11 @@
 import { faAdd, faPodcast } from '@fortawesome/free-solid-svg-icons'
 import { orderBy } from 'lodash'
 import { computed, reactive, ref } from 'vue'
-import { eventBus } from '@/utils'
-import { useErrorHandler, useFuzzySearch, useRouter } from '@/composables'
-import { podcastStore } from '@/stores'
+import { eventBus } from '@/utils/eventBus'
+import { podcastStore } from '@/stores/podcastStore'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useFuzzySearch } from '@/composables/useFuzzySearch'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import BtnGroup from '@/components/ui/form/BtnGroup.vue'
diff --git a/resources/assets/js/components/screens/PodcastScreen.vue b/resources/assets/js/components/screens/PodcastScreen.vue
index 1730f3e6..8ba36616 100644
--- a/resources/assets/js/components/screens/PodcastScreen.vue
+++ b/resources/assets/js/components/screens/PodcastScreen.vue
@@ -76,10 +76,14 @@ import DOMPurify from 'dompurify'
 import { orderBy } from 'lodash'
 import { faExternalLink, faPause, faPlay, faRotateRight, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
-import { useDialogBox, useErrorHandler, useRouter } from '@/composables'
-import { songStore as episodeStore, podcastStore, queueStore } from '@/stores'
-import { playbackService } from '@/services'
-import { isEpisode } from '@/utils'
+import { useRouter } from '@/composables/useRouter'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { songStore as episodeStore } from '@/stores/songStore'
+import { podcastStore } from '@/stores/podcastStore'
+import { queueStore } from '@/stores/queueStore'
+import { playbackService } from '@/services/playbackService'
+import { isEpisode } from '@/utils/typeGuards'
 
 import ScreenBase from '@/components/screens/ScreenBase.vue'
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
diff --git a/resources/assets/js/components/screens/ProfileScreen.vue b/resources/assets/js/components/screens/ProfileScreen.vue
index 15e5ecd1..f09c2497 100644
--- a/resources/assets/js/components/screens/ProfileScreen.vue
+++ b/resources/assets/js/components/screens/ProfileScreen.vue
@@ -79,7 +79,7 @@
 <script lang="ts" setup>
 import { QrCodeIcon } from 'lucide-vue-next'
 import { defineAsyncComponent, ref, watch } from 'vue'
-import { useLocalStorage } from '@/composables'
+import { useLocalStorage } from '@/composables/useLocalStorage'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenBase from '@/components/screens/ScreenBase.vue'
diff --git a/resources/assets/js/components/screens/QueueScreen.spec.ts b/resources/assets/js/components/screens/QueueScreen.spec.ts
index f3b4c3c4..fc8dee1b 100644
--- a/resources/assets/js/components/screens/QueueScreen.spec.ts
+++ b/resources/assets/js/components/screens/QueueScreen.spec.ts
@@ -1,9 +1,10 @@
+import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { commonStore, queueStore } from '@/stores'
-import { screen, waitFor } from '@testing-library/vue'
-import { playbackService } from '@/services'
+import { commonStore } from '@/stores/commonStore'
+import { queueStore } from '@/stores/queueStore'
+import { playbackService } from '@/services/playbackService'
 import Component from './QueueScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/QueueScreen.vue b/resources/assets/js/components/screens/QueueScreen.vue
index 7f970c68..2b737734 100644
--- a/resources/assets/js/components/screens/QueueScreen.vue
+++ b/resources/assets/js/components/screens/QueueScreen.vue
@@ -55,10 +55,16 @@
 <script lang="ts" setup>
 import { faCoffee } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref, toRef } from 'vue'
-import { pluralize } from '@/utils'
-import { commonStore, queueStore, songStore } from '@/stores'
-import { cache, playbackService } from '@/services'
-import { useErrorHandler, useRouter, useSongList, useSongListControls } from '@/composables'
+import { pluralize } from '@/utils/formatters'
+import { commonStore } from '@/stores/commonStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { cache } from '@/services/cache'
+import { playbackService } from '@/services/playbackService'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts b/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts
index 39580585..7900ff02 100644
--- a/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts
+++ b/resources/assets/js/components/screens/RecentlyPlayedScreen.spec.ts
@@ -1,8 +1,8 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { recentlyPlayedStore } from '@/stores'
 import { screen, waitFor } from '@testing-library/vue'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
 import RecentlyPlayedScreen from './RecentlyPlayedScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
index 4afefed5..284bd15c 100644
--- a/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
+++ b/resources/assets/js/components/screens/RecentlyPlayedScreen.vue
@@ -48,10 +48,12 @@
 
 <script lang="ts" setup>
 import { faClock } from '@fortawesome/free-regular-svg-icons'
-import { pluralize } from '@/utils'
-import { recentlyPlayedStore } from '@/stores'
-import { useRouter, useSongList, useSongListControls } from '@/composables'
 import { ref, toRef } from 'vue'
+import { pluralize } from '@/utils/formatters'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { useRouter } from '@/composables/useRouter'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/SettingsScreen.spec.ts b/resources/assets/js/components/screens/SettingsScreen.spec.ts
index 92a16138..0384b59d 100644
--- a/resources/assets/js/components/screens/SettingsScreen.spec.ts
+++ b/resources/assets/js/components/screens/SettingsScreen.spec.ts
@@ -1,9 +1,9 @@
-import Router from '@/router'
+import { screen, waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { settingStore } from '@/stores'
-import { screen, waitFor } from '@testing-library/vue'
+import { settingStore } from '@/stores/settingStore'
 import { DialogBoxStub } from '@/__tests__/stubs'
+import Router from '@/router'
 import SettingsScreen from './SettingsScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/SettingsScreen.vue b/resources/assets/js/components/screens/SettingsScreen.vue
index 5264a226..7fb5702f 100644
--- a/resources/assets/js/components/screens/SettingsScreen.vue
+++ b/resources/assets/js/components/screens/SettingsScreen.vue
@@ -40,15 +40,20 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { commonStore, settingStore } from '@/stores'
-import { forceReloadWindow } from '@/utils'
-import { useDialogBox, useErrorHandler, useMessageToaster, useOverlay, useRouter } from '@/composables'
+import { commonStore } from '@/stores/commonStore'
+import { settingStore } from '@/stores/settingStore'
+import { useRouter } from '@/composables/useRouter'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
 import ScreenBase from '@/components/screens/ScreenBase.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
+import { forceReloadWindow } from '@/utils/helpers'
 
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/screens/UploadScreen.vue b/resources/assets/js/components/screens/UploadScreen.vue
index bf1d6cec..f8ca3312 100644
--- a/resources/assets/js/components/screens/UploadScreen.vue
+++ b/resources/assets/js/components/screens/UploadScreen.vue
@@ -68,10 +68,10 @@
 import { faRotateRight, faTrashCan, faUpload, faWarning } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, ref, toRef } from 'vue'
 
-import { isDirectoryReadingSupported as canDropFolders } from '@/utils'
-import { acceptedMediaTypes } from '@/config'
-import { uploadService } from '@/services'
-import { useUpload } from '@/composables'
+import { isDirectoryReadingSupported as canDropFolders } from '@/utils/supports'
+import { acceptedMediaTypes } from '@/config/acceptedMediaTypes'
+import { uploadService } from '@/services/uploadService'
+import { useUpload } from '@/composables/useUpload'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/UserListScreen.spec.ts b/resources/assets/js/components/screens/UserListScreen.spec.ts
index 4a141be6..c8b76108 100644
--- a/resources/assets/js/components/screens/UserListScreen.spec.ts
+++ b/resources/assets/js/components/screens/UserListScreen.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
+import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { screen } from '@testing-library/vue'
-import { http } from '@/services'
-import { eventBus } from '@/utils'
+import { http } from '@/services/http'
+import { eventBus } from '@/utils/eventBus'
 import Btn from '@/components/ui/form/Btn.vue'
 import BtnGroup from '@/components/ui/form/BtnGroup.vue'
 import UserListScreen from './UserListScreen.vue'
diff --git a/resources/assets/js/components/screens/UserListScreen.vue b/resources/assets/js/components/screens/UserListScreen.vue
index 72ef9ffe..f520b186 100644
--- a/resources/assets/js/components/screens/UserListScreen.vue
+++ b/resources/assets/js/components/screens/UserListScreen.vue
@@ -46,9 +46,9 @@
 <script lang="ts" setup>
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, onMounted, toRef } from 'vue'
-import { userStore } from '@/stores'
-import { eventBus } from '@/utils'
-import { useAuthorization } from '@/composables'
+import { userStore } from '@/stores/userStore'
+import { eventBus } from '@/utils/eventBus'
+import { useAuthorization } from '@/composables/useAuthorization'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import UserCard from '@/components/user/UserCard.vue'
diff --git a/resources/assets/js/components/screens/VisualizerScreen.vue b/resources/assets/js/components/screens/VisualizerScreen.vue
index aa83605a..da998a93 100644
--- a/resources/assets/js/components/screens/VisualizerScreen.vue
+++ b/resources/assets/js/components/screens/VisualizerScreen.vue
@@ -33,8 +33,9 @@
 import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useFullscreen } from '@vueuse/core'
-import { logger } from '@/utils'
-import { preferenceStore as preferences, visualizerStore } from '@/stores'
+import { logger } from '@/utils/logger'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { visualizerStore } from '@/stores/visualizerStore'
 
 import SelectBox from '@/components/ui/form/SelectBox.vue'
 
diff --git a/resources/assets/js/components/screens/YouTubeScreen.vue b/resources/assets/js/components/screens/YouTubeScreen.vue
index 47b595be..0a782db4 100644
--- a/resources/assets/js/components/screens/YouTubeScreen.vue
+++ b/resources/assets/js/components/screens/YouTubeScreen.vue
@@ -17,13 +17,14 @@
 </template>
 
 <script lang="ts" setup>
-import { unescape } from 'lodash'
 import { faYoutube } from '@fortawesome/free-brands-svg-icons'
+import { unescape } from 'lodash'
 import createYouTubePlayer from 'youtube-player'
 import { ref, watch } from 'vue'
 import type { YouTubePlayer } from 'youtube-player/dist/types'
-import { eventBus, requireInjection, use } from '@/utils'
-import { playbackService } from '@/services'
+import { eventBus } from '@/utils/eventBus'
+import { requireInjection, use } from '@/utils/helpers'
+import { playbackService } from '@/services/playbackService'
 import { CurrentPlayableKey } from '@/symbols'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
diff --git a/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts b/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts
index 936cb8af..753d4e8c 100644
--- a/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts
+++ b/resources/assets/js/components/screens/home/MostPlayedAlbums.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import { overviewStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
+import { overviewStore } from '@/stores/overviewStore'
 import MostPlayedAlbums from './MostPlayedAlbums.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/home/MostPlayedAlbums.vue b/resources/assets/js/components/screens/home/MostPlayedAlbums.vue
index eef5e93a..cc0eee50 100644
--- a/resources/assets/js/components/screens/home/MostPlayedAlbums.vue
+++ b/resources/assets/js/components/screens/home/MostPlayedAlbums.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { toRef, toRefs } from 'vue'
-import { overviewStore } from '@/stores'
+import { overviewStore } from '@/stores/overviewStore'
 
 import AlbumCard from '@/components/album/AlbumCard.vue'
 import AlbumCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts b/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts
index 17545a82..c885e736 100644
--- a/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts
+++ b/resources/assets/js/components/screens/home/MostPlayedArtists.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import { overviewStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
+import { overviewStore } from '@/stores/overviewStore'
 import MostPlayedArtists from './MostPlayedArtists.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/home/MostPlayedArtists.vue b/resources/assets/js/components/screens/home/MostPlayedArtists.vue
index 48f18ce6..709379a7 100644
--- a/resources/assets/js/components/screens/home/MostPlayedArtists.vue
+++ b/resources/assets/js/components/screens/home/MostPlayedArtists.vue
@@ -20,7 +20,8 @@
 
 <script lang="ts" setup>
 import { toRef, toRefs } from 'vue'
-import { overviewStore } from '@/stores'
+import { overviewStore } from '@/stores/overviewStore'
+
 import ArtistCard from '@/components/artist/ArtistCard.vue'
 import ArtistCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
 import HomeScreenSection from '@/components/screens/home/HomeScreenBlock.vue'
diff --git a/resources/assets/js/components/screens/home/MostPlayedSongs.spec.ts b/resources/assets/js/components/screens/home/MostPlayedSongs.spec.ts
index 4870b210..7457df18 100644
--- a/resources/assets/js/components/screens/home/MostPlayedSongs.spec.ts
+++ b/resources/assets/js/components/screens/home/MostPlayedSongs.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import { overviewStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
+import { overviewStore } from '@/stores/overviewStore'
 import MostPlayedSongs from './MostPlayedSongs.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/home/MostPlayedSongs.vue b/resources/assets/js/components/screens/home/MostPlayedSongs.vue
index 8fda0273..bec1ac94 100644
--- a/resources/assets/js/components/screens/home/MostPlayedSongs.vue
+++ b/resources/assets/js/components/screens/home/MostPlayedSongs.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { toRef, toRefs } from 'vue'
-import { overviewStore } from '@/stores'
+import { overviewStore } from '@/stores/overviewStore'
 
 import SongCard from '@/components/song/SongCard.vue'
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts
index a3910836..cfd077f1 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts
+++ b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import { overviewStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
+import { overviewStore } from '@/stores/overviewStore'
 import RecentlyAddedAlbums from './RecentlyAddedAlbums.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue
index 158fe606..f7fea7fd 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue
+++ b/resources/assets/js/components/screens/home/RecentlyAddedAlbums.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { toRef, toRefs } from 'vue'
-import { overviewStore } from '@/stores'
+import { overviewStore } from '@/stores/overviewStore'
 
 import AlbumCard from '@/components/album/AlbumCard.vue'
 import AlbumCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedSongs.spec.ts b/resources/assets/js/components/screens/home/RecentlyAddedSongs.spec.ts
index 7483588f..edc3ed26 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedSongs.spec.ts
+++ b/resources/assets/js/components/screens/home/RecentlyAddedSongs.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
-import { overviewStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
+import { overviewStore } from '@/stores/overviewStore'
 import RecentlyAddedSongs from './RecentlyAddedSongs.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue b/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue
index f5baa4f4..312e1eac 100644
--- a/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue
+++ b/resources/assets/js/components/screens/home/RecentlyAddedSongs.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { toRef, toRefs } from 'vue'
-import { overviewStore } from '@/stores'
+import { overviewStore } from '@/stores/overviewStore'
 
 import SongCard from '@/components/song/SongCard.vue'
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/home/RecentlyPlayedSongs.spec.ts b/resources/assets/js/components/screens/home/RecentlyPlayedSongs.spec.ts
index 29a75ce0..816bdfe3 100644
--- a/resources/assets/js/components/screens/home/RecentlyPlayedSongs.spec.ts
+++ b/resources/assets/js/components/screens/home/RecentlyPlayedSongs.spec.ts
@@ -1,9 +1,9 @@
-import Router from '@/router'
+import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { overviewStore } from '@/stores'
-import { screen } from '@testing-library/vue'
+import { overviewStore } from '@/stores/overviewStore'
+import Router from '@/router'
 import RecentlyPlayedSongs from './RecentlyPlayedSongs.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue b/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue
index f05ebe41..0c8692fc 100644
--- a/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue
+++ b/resources/assets/js/components/screens/home/RecentlyPlayedSongs.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import { toRef, toRefs } from 'vue'
-import { overviewStore } from '@/stores'
+import { overviewStore } from '@/stores/overviewStore'
 
 import SongCard from '@/components/song/SongCard.vue'
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
diff --git a/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue b/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue
index a76a7c0c..fecaff1d 100644
--- a/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue
+++ b/resources/assets/js/components/screens/home/ViewAllRecentSongsButton.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from '@/composables'
+import { useRouter } from '@/composables/useRouter'
 
 import Btn from '@/components/ui/form/Btn.vue'
 
diff --git a/resources/assets/js/components/screens/search/SearchExcerptsScreen.spec.ts b/resources/assets/js/components/screens/search/SearchExcerptsScreen.spec.ts
index 1be80451..799f8335 100644
--- a/resources/assets/js/components/screens/search/SearchExcerptsScreen.spec.ts
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.spec.ts
@@ -1,8 +1,8 @@
 import { waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { searchStore } from '@/stores'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
+import { searchStore } from '@/stores/searchStore'
 import SearchExceptsScreen from './SearchExcerptsScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
index f9ab1de3..7728c428 100644
--- a/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
@@ -28,8 +28,8 @@
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { intersectionBy } from 'lodash'
 import { ref, toRef } from 'vue'
-import { eventBus } from '@/utils'
-import { searchStore } from '@/stores'
+import { eventBus } from '@/utils/eventBus'
+import { searchStore } from '@/stores/searchStore'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
diff --git a/resources/assets/js/components/screens/search/SearchSongResultsScreen.spec.ts b/resources/assets/js/components/screens/search/SearchSongResultsScreen.spec.ts
index 0362dbb8..38fda98d 100644
--- a/resources/assets/js/components/screens/search/SearchSongResultsScreen.spec.ts
+++ b/resources/assets/js/components/screens/search/SearchSongResultsScreen.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
-import { searchStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { searchStore } from '@/stores/searchStore'
 import SearchSongResultsScreen from './SearchSongResultsScreen.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue b/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
index b518e085..9730b5fc 100644
--- a/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
+++ b/resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
@@ -39,9 +39,11 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, toRef } from 'vue'
-import { searchStore } from '@/stores'
-import { useRouter, useSongList, useSongListControls } from '@/composables'
-import { pluralize } from '@/utils'
+import { searchStore } from '@/stores/searchStore'
+import { useSongList } from '@/composables/useSongList'
+import { useSongListControls } from '@/composables/useSongListControls'
+import { useRouter } from '@/composables/useRouter'
+import { pluralize } from '@/utils/formatters'
 
 import ScreenHeader from '@/components/ui/ScreenHeader.vue'
 import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
diff --git a/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue b/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue
index 74c8e8f9..166f42c6 100644
--- a/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue
+++ b/resources/assets/js/components/screens/search/SongExcerptResultsBlock.vue
@@ -33,8 +33,8 @@
 
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
-import { useRouter } from '@/composables'
-import { getPlayableCollectionContentType } from '@/utils'
+import { useRouter } from '@/composables/useRouter'
+import { getPlayableCollectionContentType } from '@/utils/typeGuards'
 
 import SongCardSkeleton from '@/components/ui/skeletons/SongCardSkeleton.vue'
 import ExcerptResultBlock from '@/components/screens/search/ExcerptResultBlock.vue'
diff --git a/resources/assets/js/components/song/AddToMenu.spec.ts b/resources/assets/js/components/song/AddToMenu.spec.ts
index 3991a448..175d7e21 100644
--- a/resources/assets/js/components/song/AddToMenu.spec.ts
+++ b/resources/assets/js/components/song/AddToMenu.spec.ts
@@ -1,10 +1,13 @@
 import { clone } from 'lodash'
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import { favoriteStore, playlistStore, queueStore } from '@/stores'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { arrayify, eventBus } from '@/utils'
+import factory from '@/__tests__/factory'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { queueStore } from '@/stores/queueStore'
+import { eventBus } from '@/utils/eventBus'
+import { arrayify } from '@/utils/helpers'
 import Btn from '@/components/ui/form/Btn.vue'
 import AddToMenu from './AddToMenu.vue'
 
diff --git a/resources/assets/js/components/song/AddToMenu.vue b/resources/assets/js/components/song/AddToMenu.vue
index 254386c6..cbebdbf6 100644
--- a/resources/assets/js/components/song/AddToMenu.vue
+++ b/resources/assets/js/components/song/AddToMenu.vue
@@ -58,9 +58,10 @@
 
 <script lang="ts" setup>
 import { computed, toRef, toRefs, watch } from 'vue'
-import { pluralize } from '@/utils'
-import { playlistStore, queueStore } from '@/stores'
-import { usePlayableMenuMethods } from '@/composables'
+import { pluralize } from '@/utils/formatters'
+import { playlistStore } from '@/stores/playlistStore'
+import { queueStore } from '@/stores/queueStore'
+import { usePlayableMenuMethods } from '@/composables/usePlayableMenuMethods'
 
 import Btn from '@/components/ui/form/Btn.vue'
 
diff --git a/resources/assets/js/components/song/EditSongForm.spec.ts b/resources/assets/js/components/song/EditSongForm.spec.ts
index e0989106..1a791ab9 100644
--- a/resources/assets/js/components/song/EditSongForm.spec.ts
+++ b/resources/assets/js/components/song/EditSongForm.spec.ts
@@ -1,12 +1,13 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { arrayify, eventBus } from '@/utils'
-import { ModalContextKey } from '@/symbols'
-import { ref } from 'vue'
 import { screen } from '@testing-library/vue'
-import type { SongUpdateResult } from '@/stores'
-import { songStore } from '@/stores'
+import { ref } from 'vue'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { arrayify } from '@/utils/helpers'
+import { eventBus } from '@/utils/eventBus'
+import { ModalContextKey } from '@/symbols'
+import type { SongUpdateResult } from '@/stores/songStore'
+import { songStore } from '@/stores/songStore'
 import { MessageToasterStub } from '@/__tests__/stubs'
 import EditSongForm from './EditSongForm.vue'
 
diff --git a/resources/assets/js/components/song/EditSongForm.vue b/resources/assets/js/components/song/EditSongForm.vue
index 913e7724..54f5b9e2 100644
--- a/resources/assets/js/components/song/EditSongForm.vue
+++ b/resources/assets/js/components/song/EditSongForm.vue
@@ -166,11 +166,17 @@
 <script lang="ts" setup>
 import { computed, reactive, ref } from 'vue'
 import { isEqual } from 'lodash'
-import { defaultCover, eventBus, pluralize } from '@/utils'
-import type { SongUpdateData } from '@/stores'
-import { songStore } from '@/stores'
-import { useDialogBox, useErrorHandler, useMessageToaster, useModal, useOverlay } from '@/composables'
-import { genres } from '@/config'
+import defaultCover from '@/../img/covers/default.svg'
+import { pluralize } from '@/utils/formatters'
+import { eventBus } from '@/utils/eventBus'
+import type { SongUpdateData } from '@/stores/songStore'
+import { songStore } from '@/stores/songStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useModal } from '@/composables/useModal'
+import { useOverlay } from '@/composables/useOverlay'
+import { genres } from '@/config/genres'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
@@ -183,6 +189,7 @@ import TabPanel from '@/components/ui/tabs/TabPanel.vue'
 import TabPanelContainer from '@/components/ui/tabs/TabPanelContainer.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/song/PlayableContextMenu.spec.ts b/resources/assets/js/components/song/PlayableContextMenu.spec.ts
index 8162f75c..b494edc3 100644
--- a/resources/assets/js/components/song/PlayableContextMenu.spec.ts
+++ b/resources/assets/js/components/song/PlayableContextMenu.spec.ts
@@ -1,12 +1,17 @@
-import Router from '@/router'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { arrayify, eventBus } from '@/utils'
+import factory from '@/__tests__/factory'
+import { arrayify } from '@/utils/helpers'
+import { eventBus } from '@/utils/eventBus'
 import { screen, waitFor } from '@testing-library/vue'
-import { downloadService, playbackService } from '@/services'
-import { favoriteStore, playlistStore, queueStore, songStore } from '@/stores'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
 import { DialogBoxStub, MessageToasterStub } from '@/__tests__/stubs'
+import Router from '@/router'
 import Component from './PlayableContextMenu.vue'
 
 let playables: Playable[]
diff --git a/resources/assets/js/components/song/PlayableContextMenu.vue b/resources/assets/js/components/song/PlayableContextMenu.vue
index 39d73522..262f8a40 100644
--- a/resources/assets/js/components/song/PlayableContextMenu.vue
+++ b/resources/assets/js/components/song/PlayableContextMenu.vue
@@ -72,19 +72,25 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef } from 'vue'
-import { arrayify, copyText, eventBus, getPlayableCollectionContentType, isSong, pluralize } from '@/utils'
-import { commonStore, favoriteStore, playlistStore, queueStore, songStore } from '@/stores'
-import { downloadService, playbackService } from '@/services'
-import {
-  useContextMenu,
-  useDialogBox,
-  useKoelPlus,
-  useMessageToaster,
-  usePlayableMenuMethods,
-  usePlaylistManagement,
-  usePolicies,
-  useRouter,
-} from '@/composables'
+import { pluralize } from '@/utils/formatters'
+import { eventBus } from '@/utils/eventBus'
+import { arrayify, copyText } from '@/utils/helpers'
+import { getPlayableCollectionContentType, isSong } from '@/utils/typeGuards'
+import { commonStore } from '@/stores/commonStore'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { downloadService } from '@/services/downloadService'
+import { playbackService } from '@/services/playbackService'
+import { useRouter } from '@/composables/useRouter'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { usePlaylistManagement } from '@/composables/usePlaylistManagement'
+import { usePlayableMenuMethods } from '@/composables/usePlayableMenuMethods'
+import { usePolicies } from '@/composables/usePolicies'
+import { useContextMenu } from '@/composables/useContextMenu'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 const { toastSuccess, toastError, toastWarning } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/song/SongCard.spec.ts b/resources/assets/js/components/song/SongCard.spec.ts
index 61616b1d..f8af7fa8 100644
--- a/resources/assets/js/components/song/SongCard.spec.ts
+++ b/resources/assets/js/components/song/SongCard.spec.ts
@@ -1,8 +1,8 @@
-import factory from '@/__tests__/factory'
-import { playbackService } from '@/services'
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { playbackService } from '@/services/playbackService'
 import SongCard from './SongCard.vue'
 
 let playable: Playable
diff --git a/resources/assets/js/components/song/SongCard.vue b/resources/assets/js/components/song/SongCard.vue
index 47b43b23..80a3b95e 100644
--- a/resources/assets/js/components/song/SongCard.vue
+++ b/resources/assets/js/components/song/SongCard.vue
@@ -46,9 +46,13 @@
 
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
-import { eventBus, isEpisode, isSong, pluralize } from '@/utils'
-import { playbackService } from '@/services'
-import { useAuthorization, useDraggable, useKoelPlus } from '@/composables'
+import { isEpisode, isSong } from '@/utils/typeGuards'
+import { eventBus } from '@/utils/eventBus'
+import { pluralize } from '@/utils/formatters'
+import { playbackService } from '@/services/playbackService'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useDraggable } from '@/composables/useDragAndDrop'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 import SongThumbnail from '@/components/song/SongThumbnail.vue'
 import LikeButton from '@/components/song/SongLikeButton.vue'
diff --git a/resources/assets/js/components/song/SongLikeButton.spec.ts b/resources/assets/js/components/song/SongLikeButton.spec.ts
index eadbec9f..16898326 100644
--- a/resources/assets/js/components/song/SongLikeButton.spec.ts
+++ b/resources/assets/js/components/song/SongLikeButton.spec.ts
@@ -1,8 +1,8 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import { screen } from '@testing-library/vue'
-import { favoriteStore } from '@/stores'
+import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { favoriteStore } from '@/stores/favoriteStore'
 import Component from './SongLikeButton.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/song/SongLikeButton.vue b/resources/assets/js/components/song/SongLikeButton.vue
index 6d76bd69..d82e17ac 100644
--- a/resources/assets/js/components/song/SongLikeButton.vue
+++ b/resources/assets/js/components/song/SongLikeButton.vue
@@ -9,7 +9,7 @@
 import { faHeart } from '@fortawesome/free-solid-svg-icons'
 import { faHeart as faEmptyHeart } from '@fortawesome/free-regular-svg-icons'
 import { computed, toRefs } from 'vue'
-import { favoriteStore } from '@/stores'
+import { favoriteStore } from '@/stores/favoriteStore'
 
 import FooterExtraControlBtn from '@/components/layout/app-footer/FooterButton.vue'
 
diff --git a/resources/assets/js/components/song/SongList.spec.ts b/resources/assets/js/components/song/SongList.spec.ts
index 0e287d4c..4f28474a 100644
--- a/resources/assets/js/components/song/SongList.spec.ts
+++ b/resources/assets/js/components/song/SongList.spec.ts
@@ -1,8 +1,9 @@
+import { screen } from '@testing-library/vue'
 import { ref } from 'vue'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { arrayify } from '@/utils'
+import factory from '@/__tests__/factory'
+import { arrayify } from '@/utils/helpers'
 import {
   PlayableListConfigKey,
   PlayableListContextKey,
@@ -11,7 +12,6 @@ import {
   SelectedPlayablesKey,
   SongListSortOrderKey,
 } from '@/symbols'
-import { screen } from '@testing-library/vue'
 import SongList from './SongList.vue'
 
 let songs: Playable[]
diff --git a/resources/assets/js/components/song/SongList.vue b/resources/assets/js/components/song/SongList.vue
index ccca03c6..84d6e976 100644
--- a/resources/assets/js/components/song/SongList.vue
+++ b/resources/assets/js/components/song/SongList.vue
@@ -114,10 +114,13 @@ import isMobile from 'ismobilejs'
 import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons'
 import type { Ref } from 'vue'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { arrayify, eventBus, getPlayableCollectionContentType, requireInjection } from '@/utils'
-import { preferenceStore as preferences, queueStore } from '@/stores'
-import { useDraggable, useDroppable } from '@/composables'
-import { playbackService } from '@/services'
+import { eventBus } from '@/utils/eventBus'
+import { arrayify, requireInjection } from '@/utils/helpers'
+import { getPlayableCollectionContentType } from '@/utils/typeGuards'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { queueStore } from '@/stores/queueStore'
+import { useDraggable, useDroppable } from '@/composables/useDragAndDrop'
+import { playbackService } from '@/services/playbackService'
 import {
   PlayableListConfigKey,
   PlayableListContextKey,
diff --git a/resources/assets/js/components/song/SongListControls.spec.ts b/resources/assets/js/components/song/SongListControls.spec.ts
index a968d0c6..75039efd 100644
--- a/resources/assets/js/components/song/SongListControls.spec.ts
+++ b/resources/assets/js/components/song/SongListControls.spec.ts
@@ -1,10 +1,10 @@
+import { screen } from '@testing-library/vue'
 import { merge, take } from 'lodash'
 import { ref } from 'vue'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
 import { PlayablesKey, SelectedPlayablesKey } from '@/symbols'
-import { screen } from '@testing-library/vue'
 import SongListControls from './SongListControls.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/song/SongListControls.vue b/resources/assets/js/components/song/SongListControls.vue
index 4d218d4d..6b6d19ea 100644
--- a/resources/assets/js/components/song/SongListControls.vue
+++ b/resources/assets/js/components/song/SongListControls.vue
@@ -104,8 +104,8 @@ import type { Ref } from 'vue'
 import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import { OnClickOutside } from '@vueuse/components'
 import { PlayablesKey, SelectedPlayablesKey } from '@/symbols'
-import { requireInjection } from '@/utils'
-import { useFloatingUi } from '@/composables'
+import { requireInjection } from '@/utils/helpers'
+import { useFloatingUi } from '@/composables/useFloatingUi'
 
 import AddToMenu from '@/components/song/AddToMenu.vue'
 import Btn from '@/components/ui/form/Btn.vue'
diff --git a/resources/assets/js/components/song/SongListItem.spec.ts b/resources/assets/js/components/song/SongListItem.spec.ts
index 1154e7df..2fde22be 100644
--- a/resources/assets/js/components/song/SongListItem.spec.ts
+++ b/resources/assets/js/components/song/SongListItem.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import { screen } from '@testing-library/vue'
+import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import SongListItem from './SongListItem.vue'
 
@@ -38,7 +38,7 @@ new class extends UnitTestCase {
 
       const showDisc = true
       const { getByText } = this.renderComponent(song, showDisc)
-      expect(getByText('DISC 2')).toBeTruthy()
+      expect(getByText('Disc 2')).toBeTruthy()
     })
   }
 
diff --git a/resources/assets/js/components/song/SongListItem.vue b/resources/assets/js/components/song/SongListItem.vue
index be24970c..10fefa98 100644
--- a/resources/assets/js/components/song/SongListItem.vue
+++ b/resources/assets/js/components/song/SongListItem.vue
@@ -2,9 +2,9 @@
   <div>
     <h4
       v-if="showDisc && item.playable.disc"
-      class="title text-k-text-primary !flex gap-2 p-2"
+      class="title text-k-text-primary !flex gap-2 p-2 uppercase"
     >
-      DISC {{ item.playable.disc }}
+      Disc {{ item.playable.disc }}
     </h4>
 
     <article
@@ -53,8 +53,11 @@
 <script lang="ts" setup>
 import { faPodcast } from '@fortawesome/free-solid-svg-icons'
 import { computed, toRefs, withDefaults } from 'vue'
-import { getPlayableProp, isSong, requireInjection, secondsToHis } from '@/utils'
-import { useAuthorization, useKoelPlus } from '@/composables'
+import { getPlayableProp, requireInjection } from '@/utils/helpers'
+import { isSong } from '@/utils/typeGuards'
+import { secondsToHis } from '@/utils/formatters'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 import { PlayableListConfigKey } from '@/symbols'
 
 import LikeButton from '@/components/song/SongLikeButton.vue'
diff --git a/resources/assets/js/components/song/SongListSorter.vue b/resources/assets/js/components/song/SongListSorter.vue
index 7845c68b..9823e9e2 100644
--- a/resources/assets/js/components/song/SongListSorter.vue
+++ b/resources/assets/js/components/song/SongListSorter.vue
@@ -29,9 +29,9 @@ import { isEqual } from 'lodash'
 import { faArrowDown, faArrowUp, faCheck, faSort } from '@fortawesome/free-solid-svg-icons'
 import { OnClickOutside } from '@vueuse/components'
 import { computed, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
-import { useFloatingUi } from '@/composables'
-import type { getPlayableCollectionContentType } from '@/utils'
-import { arrayify } from '@/utils'
+import { useFloatingUi } from '@/composables/useFloatingUi'
+import { arrayify } from '@/utils/helpers'
+import type { getPlayableCollectionContentType } from '@/utils/typeGuards'
 
 const props = withDefaults(defineProps<{
   field?: MaybeArray<PlayableListSortField> // the current field(s) being sorted by
@@ -57,6 +57,7 @@ const menuItems = computed(() => {
     label: string
     field: MaybeArray<PlayableListSortField>
   }
+
   const title: MenuItems = { label: 'Title', field: 'title' }
   const artist: MenuItems = { label: 'Artist', field: 'artist_name' }
   const author: MenuItems = { label: 'Author', field: 'podcast_author' }
diff --git a/resources/assets/js/components/song/SongThumbnail.spec.ts b/resources/assets/js/components/song/SongThumbnail.spec.ts
index c17a7c07..e16f46da 100644
--- a/resources/assets/js/components/song/SongThumbnail.spec.ts
+++ b/resources/assets/js/components/song/SongThumbnail.spec.ts
@@ -1,9 +1,9 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playbackService } from '@/services'
 import { screen } from '@testing-library/vue'
-import { queueStore } from '@/stores'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { playbackService } from '@/services/playbackService'
+import { queueStore } from '@/stores/queueStore'
 import Component from './SongThumbnail.vue'
 
 let playable: Playable
diff --git a/resources/assets/js/components/song/SongThumbnail.vue b/resources/assets/js/components/song/SongThumbnail.vue
index d4b82e75..46fbaa48 100644
--- a/resources/assets/js/components/song/SongThumbnail.vue
+++ b/resources/assets/js/components/song/SongThumbnail.vue
@@ -26,8 +26,9 @@
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
 import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
-import { defaultCover, getPlayableProp } from '@/utils'
-import { playbackService } from '@/services'
+import defaultCover from '@/../img/covers/default.svg'
+import { playbackService } from '@/services/playbackService'
+import { getPlayableProp } from '@/utils/helpers'
 
 const props = defineProps<{ playable: Playable }>()
 const { playable } = toRefs(props)
diff --git a/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts b/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts
index a6751837..1551dcb2 100644
--- a/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts
+++ b/resources/assets/js/components/ui/AlbumArtOverlay.spec.ts
@@ -1,7 +1,8 @@
 import { waitFor } from '@testing-library/vue'
 import { expect, it } from 'vitest'
-import { albumStore } from '@/stores'
+import { albumStore } from '@/stores/albumStore'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { logger } from '@/utils/logger'
 import AlbumArtOverlay from './AlbumArtOverlay.vue'
 
 let albumId: number
@@ -20,6 +21,7 @@ new class extends UnitTestCase {
     })
 
     it('displays nothing if fetching fails', async () => {
+      this.mock(logger, 'error')
       const fetchMock = this.mock(albumStore, 'fetchThumbnail').mockRejectedValue(new Error('Failed to fetch'))
 
       const { html } = await this.renderComponent()
diff --git a/resources/assets/js/components/ui/AlbumArtOverlay.vue b/resources/assets/js/components/ui/AlbumArtOverlay.vue
index 4168212a..6befe64b 100644
--- a/resources/assets/js/components/ui/AlbumArtOverlay.vue
+++ b/resources/assets/js/components/ui/AlbumArtOverlay.vue
@@ -8,8 +8,8 @@
 
 <script lang="ts" setup>
 import { ref, toRefs, watchEffect } from 'vue'
-import { albumStore } from '@/stores'
-import { logger } from '@/utils'
+import { albumStore } from '@/stores/albumStore'
+import { logger } from '@/utils/logger'
 
 const props = defineProps<{ album: number }>()
 const { album } = toRefs(props)
diff --git a/resources/assets/js/components/ui/BtnScrollToTop.spec.ts b/resources/assets/js/components/ui/BtnScrollToTop.spec.ts
index 6fb48b0d..0e689025 100644
--- a/resources/assets/js/components/ui/BtnScrollToTop.spec.ts
+++ b/resources/assets/js/components/ui/BtnScrollToTop.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
-import { $ } from '@/utils'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { $ } from '@/utils/$'
 import BtnScrollToTop from './BtnScrollToTop.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/BtnScrollToTop.vue b/resources/assets/js/components/ui/BtnScrollToTop.vue
index a559b94e..2195ef0c 100644
--- a/resources/assets/js/components/ui/BtnScrollToTop.vue
+++ b/resources/assets/js/components/ui/BtnScrollToTop.vue
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { faCircleUp } from '@fortawesome/free-solid-svg-icons'
 import { onMounted, ref } from 'vue'
-import { $ } from '@/utils'
+import { $ } from '@/utils/$'
 
 const el = ref<HTMLElement>()
 const showing = ref(false)
diff --git a/resources/assets/js/components/ui/ContextMenu.vue b/resources/assets/js/components/ui/ContextMenu.vue
index 88d1f68d..fa694823 100644
--- a/resources/assets/js/components/ui/ContextMenu.vue
+++ b/resources/assets/js/components/ui/ContextMenu.vue
@@ -19,7 +19,8 @@
 <script lang="ts" setup>
 import { nextTick, ref, toRefs } from 'vue'
 import { onClickOutside } from '@vueuse/core'
-import { eventBus, logger } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
+import { logger } from '@/utils/logger'
 
 const props = defineProps<{ extraClass?: string }>()
 const { extraClass } = toRefs(props)
diff --git a/resources/assets/js/components/ui/DialogBox.vue b/resources/assets/js/components/ui/DialogBox.vue
index c2c51c7a..2ccd25be 100644
--- a/resources/assets/js/components/ui/DialogBox.vue
+++ b/resources/assets/js/components/ui/DialogBox.vue
@@ -31,6 +31,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { faCheck, faExclamation, faInfo, faQuestion, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
+
 import Btn from '@/components/ui/form/Btn.vue'
 
 type DialogType = 'info' | 'success' | 'warning' | 'danger' | 'confirm'
diff --git a/resources/assets/js/components/ui/FooterPlayButton.spec.ts b/resources/assets/js/components/ui/FooterPlayButton.spec.ts
index 2160f2a4..77013d82 100644
--- a/resources/assets/js/components/ui/FooterPlayButton.spec.ts
+++ b/resources/assets/js/components/ui/FooterPlayButton.spec.ts
@@ -1,12 +1,16 @@
-import Router from '@/router'
-import factory from '@/__tests__/factory'
+import { screen, waitFor } from '@testing-library/vue'
 import { ref } from 'vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { playbackService } from '@/services'
-import { screen, waitFor } from '@testing-library/vue'
+import factory from '@/__tests__/factory'
+import { playbackService } from '@/services/playbackService'
 import { CurrentPlayableKey } from '@/symbols'
-import { commonStore, favoriteStore, queueStore, recentlyPlayedStore, songStore } from '@/stores'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { queueStore } from '@/stores/queueStore'
+import Router from '@/router'
 import FooterPlayButton from './FooterPlayButton.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/FooterPlayButton.vue b/resources/assets/js/components/ui/FooterPlayButton.vue
index ea679cb0..bdca77d9 100644
--- a/resources/assets/js/components/ui/FooterPlayButton.vue
+++ b/resources/assets/js/components/ui/FooterPlayButton.vue
@@ -13,11 +13,16 @@
 <script lang="ts" setup>
 import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
-import { playbackService } from '@/services'
-import { commonStore, favoriteStore, queueStore, recentlyPlayedStore, songStore } from '@/stores'
-import { requireInjection } from '@/utils'
-import { useRouter } from '@/composables'
+import { playbackService } from '@/services/playbackService'
+import { commonStore } from '@/stores/commonStore'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { queueStore } from '@/stores/queueStore'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { songStore } from '@/stores/songStore'
+import { useRouter } from '@/composables/useRouter'
+import { requireInjection } from '@/utils/helpers'
 import { CurrentPlayableKey } from '@/symbols'
+
 import FooterButton from '@/components/layout/app-footer/FooterButton.vue'
 
 const { getCurrentScreen, getRouteParam, go } = useRouter()
diff --git a/resources/assets/js/components/ui/LyricsPane.spec.ts b/resources/assets/js/components/ui/LyricsPane.spec.ts
index 3b43d034..656eb3cd 100644
--- a/resources/assets/js/components/ui/LyricsPane.spec.ts
+++ b/resources/assets/js/components/ui/LyricsPane.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
+import { screen } from '@testing-library/vue'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { eventBus } from '@/utils'
-import { screen } from '@testing-library/vue'
+import { eventBus } from '@/utils/eventBus'
 import LyricsPane from './LyricsPane.vue'
 import Magnifier from '@/components/ui/Magnifier.vue'
 
diff --git a/resources/assets/js/components/ui/LyricsPane.vue b/resources/assets/js/components/ui/LyricsPane.vue
index 52931a62..36e45b17 100644
--- a/resources/assets/js/components/ui/LyricsPane.vue
+++ b/resources/assets/js/components/ui/LyricsPane.vue
@@ -25,9 +25,10 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRefs, watch } from 'vue'
-import { cr2lf, eventBus } from '@/utils'
-import { usePolicies } from '@/composables'
-import { preferenceStore as preferences } from '@/stores'
+import { cr2lf } from '@/utils/formatters'
+import { eventBus } from '@/utils/eventBus'
+import { usePolicies } from '@/composables/usePolicies'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
 
 const props = defineProps<{ song: Song }>()
 
diff --git a/resources/assets/js/components/ui/Magnifier.spec.ts b/resources/assets/js/components/ui/Magnifier.spec.ts
index ad7ec79e..689aaf3a 100644
--- a/resources/assets/js/components/ui/Magnifier.spec.ts
+++ b/resources/assets/js/components/ui/Magnifier.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
 import Magnifier from './Magnifier.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/PlaylistThumbnail.vue b/resources/assets/js/components/ui/PlaylistThumbnail.vue
index cdac7cce..c559f1ab 100644
--- a/resources/assets/js/components/ui/PlaylistThumbnail.vue
+++ b/resources/assets/js/components/ui/PlaylistThumbnail.vue
@@ -27,11 +27,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
-import { defaultCover } from '@/utils'
-import { playlistStore } from '@/stores'
-import { useErrorHandler, useFileReader, useMessageToaster, usePolicies } from '@/composables'
 import { faTrash, faUpload } from '@fortawesome/free-solid-svg-icons'
+import { computed, toRefs } from 'vue'
+import defaultCover from '@/../img/covers/default.svg'
+import { playlistStore } from '@/stores/playlistStore'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useFileReader } from '@/composables/useFileReader'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { usePolicies } from '@/composables/usePolicies'
 
 const props = defineProps<{ playlist: Playlist }>()
 const { playlist } = toRefs(props)
diff --git a/resources/assets/js/components/ui/ProfileAvatar.spec.ts b/resources/assets/js/components/ui/ProfileAvatar.spec.ts
index 923cb37c..20a3002b 100644
--- a/resources/assets/js/components/ui/ProfileAvatar.spec.ts
+++ b/resources/assets/js/components/ui/ProfileAvatar.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
 import ProfileAvatar from './ProfileAvatar.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/ProfileAvatar.vue b/resources/assets/js/components/ui/ProfileAvatar.vue
index 24a90c26..4367d1da 100644
--- a/resources/assets/js/components/ui/ProfileAvatar.vue
+++ b/resources/assets/js/components/ui/ProfileAvatar.vue
@@ -16,7 +16,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useAuthorization } from '@/composables'
+import { useAuthorization } from '@/composables/useAuthorization'
+
 import UserAvatar from '@/components/user/UserAvatar.vue'
 
 const { currentUser } = useAuthorization()
diff --git a/resources/assets/js/components/ui/RepeatModeSwitch.spec.ts b/resources/assets/js/components/ui/RepeatModeSwitch.spec.ts
index d80a1ab6..9a901c06 100644
--- a/resources/assets/js/components/ui/RepeatModeSwitch.spec.ts
+++ b/resources/assets/js/components/ui/RepeatModeSwitch.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import { preferenceStore } from '@/stores'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
-import { playbackService } from '@/services'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { playbackService } from '@/services/playbackService'
 import RepeatModeSwitch from './RepeatModeSwitch.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/RepeatModeSwitch.vue b/resources/assets/js/components/ui/RepeatModeSwitch.vue
index f7175c34..80108499 100644
--- a/resources/assets/js/components/ui/RepeatModeSwitch.vue
+++ b/resources/assets/js/components/ui/RepeatModeSwitch.vue
@@ -16,8 +16,8 @@
 <script lang="ts" setup>
 import { Repeat, Repeat1 } from 'lucide-vue-next'
 import { computed, toRef } from 'vue'
-import { playbackService } from '@/services'
-import { preferenceStore } from '@/stores'
+import { playbackService } from '@/services/playbackService'
+import { preferenceStore } from '@/stores/preferenceStore'
 
 const mode = toRef(preferenceStore.state, 'repeat_mode')
 
diff --git a/resources/assets/js/components/ui/SearchForm.spec.ts b/resources/assets/js/components/ui/SearchForm.spec.ts
index 597a61f6..c1416d82 100644
--- a/resources/assets/js/components/ui/SearchForm.spec.ts
+++ b/resources/assets/js/components/ui/SearchForm.spec.ts
@@ -1,8 +1,8 @@
-import Router from '@/router'
+import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { screen } from '@testing-library/vue'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
+import Router from '@/router'
 import SearchForm from './SearchForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/SearchForm.vue b/resources/assets/js/components/ui/SearchForm.vue
index 6ef2d3c8..c72b7c4c 100644
--- a/resources/assets/js/components/ui/SearchForm.vue
+++ b/resources/assets/js/components/ui/SearchForm.vue
@@ -38,8 +38,9 @@ import isMobile from 'ismobilejs'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { debounce } from 'lodash'
-import { eventBus } from '@/utils'
-import { useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { useRouter } from '@/composables/useRouter'
+
 import TextInput from '@/components/ui/form/TextInput.vue'
 
 const placeholder = isMobile.any ? 'Search' : 'Press F to search'
diff --git a/resources/assets/js/components/ui/SidebarMenuToggleButton.vue b/resources/assets/js/components/ui/SidebarMenuToggleButton.vue
index f72a3ac3..c7f577c7 100644
--- a/resources/assets/js/components/ui/SidebarMenuToggleButton.vue
+++ b/resources/assets/js/components/ui/SidebarMenuToggleButton.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
-import { eventBus } from '@/utils'
+import { eventBus } from '@/utils/eventBus'
 
 import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
 
diff --git a/resources/assets/js/components/ui/ThumbnailStack.vue b/resources/assets/js/components/ui/ThumbnailStack.vue
index fa0d53cf..b06ced5f 100644
--- a/resources/assets/js/components/ui/ThumbnailStack.vue
+++ b/resources/assets/js/components/ui/ThumbnailStack.vue
@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { take } from 'lodash'
 import { computed, toRefs } from 'vue'
-import { defaultCover } from '@/utils'
+import defaultCover from '@/../img/covers/default.svg'
 
 const props = defineProps<{ thumbnails: string[] }>()
 
diff --git a/resources/assets/js/components/ui/VolumeSlider.spec.ts b/resources/assets/js/components/ui/VolumeSlider.spec.ts
index 08f06b1d..3deacf7a 100644
--- a/resources/assets/js/components/ui/VolumeSlider.spec.ts
+++ b/resources/assets/js/components/ui/VolumeSlider.spec.ts
@@ -1,9 +1,10 @@
 import { expect, it, vi } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { fireEvent, screen } from '@testing-library/vue'
-import { socketService, volumeManager } from '@/services'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { socketService } from '@/services/socketService'
+import { volumeManager } from '@/services/volumeManager'
+import { preferenceStore } from '@/stores/preferenceStore'
 import Volume from './VolumeSlider.vue'
-import { preferenceStore } from '@/stores'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/components/ui/VolumeSlider.vue b/resources/assets/js/components/ui/VolumeSlider.vue
index ac89e818..f0d68ec1 100644
--- a/resources/assets/js/components/ui/VolumeSlider.vue
+++ b/resources/assets/js/components/ui/VolumeSlider.vue
@@ -24,9 +24,11 @@
 <script lang="ts" setup>
 import { faVolumeHigh, faVolumeLow, faVolumeMute } from '@fortawesome/free-solid-svg-icons'
 import { computed, onMounted, ref } from 'vue'
-import { socketService, volumeManager } from '@/services'
-import { preferenceStore } from '@/stores'
 import { watchThrottled } from '@vueuse/core'
+import { socketService } from '@/services/socketService'
+import { volumeManager } from '@/services/volumeManager'
+import { preferenceStore } from '@/stores/preferenceStore'
+
 import FooterExtraControlBtn from '@/components/layout/app-footer/FooterButton.vue'
 
 const inputEl = ref<HTMLInputElement>()
diff --git a/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.spec.ts b/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.spec.ts
index 58b2e7db..c32c8d4f 100644
--- a/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.spec.ts
+++ b/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.spec.ts
@@ -1,8 +1,8 @@
 import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import ArtistAlbumCard from './AlbumOrArtistCard.vue'
 import factory from '@/__tests__/factory'
+import ArtistAlbumCard from './AlbumOrArtistCard.vue'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.vue b/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.vue
index 134946f7..820a16e8 100644
--- a/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.vue
+++ b/resources/assets/js/components/ui/album-artist/AlbumOrArtistCard.vue
@@ -25,9 +25,10 @@
 </template>
 
 <script lang="ts" setup>
-import Thumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
 import { computed, toRefs } from 'vue'
 
+import Thumbnail from '@/components/ui/album-artist/AlbumOrArtistThumbnail.vue'
+
 const props = withDefaults(defineProps<{ layout?: ArtistAlbumCardLayout, entity: Artist | Album | Podcast }>(), {
   layout: 'full',
 })
diff --git a/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.spec.ts b/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.spec.ts
index db62077a..3158d483 100644
--- a/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.spec.ts
+++ b/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.spec.ts
@@ -1,10 +1,11 @@
+import { screen, waitFor } from '@testing-library/vue'
+import { expect, it } from 'vitest'
 import { orderBy } from 'lodash'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
-import { screen, waitFor } from '@testing-library/vue'
-import { queueStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
 import Thumbnail from './AlbumOrArtistThumbnail.vue'
 
 let album: Album
diff --git a/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.vue b/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.vue
index 9cbe91e6..c971824b 100644
--- a/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.vue
+++ b/resources/assets/js/components/ui/album-artist/AlbumOrArtistThumbnail.vue
@@ -29,14 +29,21 @@
 </template>
 
 <script lang="ts" setup>
+import { faPlay } from '@fortawesome/free-solid-svg-icons'
 import { orderBy } from 'lodash'
 import { computed, ref, toRefs } from 'vue'
-import { albumStore, artistStore, queueStore, songStore } from '@/stores'
-import { playbackService } from '@/services'
-import { defaultCover } from '@/utils'
-import { useErrorHandler, useFileReader, useMessageToaster, usePolicies, useRouter } from '@/composables'
-import { acceptedImageTypes } from '@/config'
-import { faPlay } from '@fortawesome/free-solid-svg-icons'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { playbackService } from '@/services/playbackService'
+import defaultCover from '@/../img/covers/default.svg'
+import { useRouter } from '@/composables/useRouter'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useFileReader } from '@/composables/useFileReader'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { usePolicies } from '@/composables/usePolicies'
+import { acceptedImageTypes } from '@/config/acceptedImageTypes'
 
 const props = defineProps<{ entity: Album | Artist }>()
 const { toastSuccess } = useMessageToaster()
diff --git a/resources/assets/js/components/ui/equalizer/Equalizer.vue b/resources/assets/js/components/ui/equalizer/Equalizer.vue
index 9888a438..adcfca62 100644
--- a/resources/assets/js/components/ui/equalizer/Equalizer.vue
+++ b/resources/assets/js/components/ui/equalizer/Equalizer.vue
@@ -40,10 +40,10 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted, ref, watch } from 'vue'
-import { equalizerStore } from '@/stores'
-import type { Band } from '@/services'
-import { audioService } from '@/services'
-import { equalizerPresets as presets } from '@/config'
+import { equalizerStore } from '@/stores/equalizerStore'
+import type { Band } from '@/services/audioService'
+import { audioService } from '@/services/audioService'
+import { equalizerPresets as presets } from '@/config/audio'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import SelectBox from '@/components/ui/form/SelectBox.vue'
diff --git a/resources/assets/js/components/ui/form/CheckBox.spec.ts b/resources/assets/js/components/ui/form/CheckBox.spec.ts
index 50d1717f..be7c5ca9 100644
--- a/resources/assets/js/components/ui/form/CheckBox.spec.ts
+++ b/resources/assets/js/components/ui/form/CheckBox.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
 import CheckBox from './CheckBox.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/ui/message-toaster/MessageToaster.vue b/resources/assets/js/components/ui/message-toaster/MessageToaster.vue
index 51613fe5..b5fab821 100644
--- a/resources/assets/js/components/ui/message-toaster/MessageToaster.vue
+++ b/resources/assets/js/components/ui/message-toaster/MessageToaster.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { uuid } from '@/utils'
+import { uuid } from '@/utils/crypto'
 
 import MessageToast from '@/components/ui/message-toaster/MessageToast.vue'
 
@@ -41,6 +41,7 @@ onMounted(() => {
   if (!root.value) {
     return
   }
+
   root.value.popover = 'manual'
   root.value.showPopover?.()
 })
diff --git a/resources/assets/js/components/ui/upload/DropZone.vue b/resources/assets/js/components/ui/upload/DropZone.vue
index 78c185f2..dd0849b9 100644
--- a/resources/assets/js/components/ui/upload/DropZone.vue
+++ b/resources/assets/js/components/ui/upload/DropZone.vue
@@ -20,7 +20,7 @@
 import { faUpload } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { OnClickOutside } from '@vueuse/components'
-import { useUpload } from '@/composables'
+import { useUpload } from '@/composables/useUpload'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
 
diff --git a/resources/assets/js/components/ui/upload/UploadItem.spec.ts b/resources/assets/js/components/ui/upload/UploadItem.spec.ts
index 8ed0ce39..f9f74290 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.spec.ts
+++ b/resources/assets/js/components/ui/upload/UploadItem.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
-import type { UploadFile, UploadStatus } from '@/services'
-import { uploadService } from '@/services'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import type { UploadFile, UploadStatus } from '@/services/uploadService'
+import { uploadService } from '@/services/uploadService'
 import Btn from '@/components/ui/form/Btn.vue'
 import UploadItem from './UploadItem.vue'
 
diff --git a/resources/assets/js/components/ui/upload/UploadItem.vue b/resources/assets/js/components/ui/upload/UploadItem.vue
index a9c5d245..8636976e 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.vue
+++ b/resources/assets/js/components/ui/upload/UploadItem.vue
@@ -26,8 +26,8 @@
 import slugify from 'slugify'
 import { faInfoCircle, faRotateBack, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, toRefs } from 'vue'
-import type { UploadFile } from '@/services'
-import { uploadService } from '@/services'
+import type { UploadFile } from '@/services/uploadService'
+import { uploadService } from '@/services/uploadService'
 
 const props = defineProps<{ file: UploadFile }>()
 
diff --git a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts
index f7a13b7d..66f6ba1e 100644
--- a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts
+++ b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import { screen } from '@testing-library/vue'
-import { youTubeService } from '@/services'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import { youTubeService } from '@/services/youTubeService'
 import YouTubeVideoItem from './YouTubeVideoItem.vue'
 
 let video: YouTubeVideo
diff --git a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue
index 498be912..99de1b64 100644
--- a/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue
+++ b/resources/assets/js/components/ui/youtube/YouTubeVideoItem.vue
@@ -17,8 +17,8 @@
 <script lang="ts" setup>
 import { unescape } from 'lodash'
 import { computed, toRefs } from 'vue'
-import { youTubeService } from '@/services'
-import { useRouter } from '@/composables'
+import { youTubeService } from '@/services/youTubeService'
+import { useRouter } from '@/composables/useRouter'
 
 const props = defineProps<{ video: YouTubeVideo }>()
 
diff --git a/resources/assets/js/components/ui/youtube/YouTubeVideoList.spec.ts b/resources/assets/js/components/ui/youtube/YouTubeVideoList.spec.ts
index 5298e530..6016d7c0 100644
--- a/resources/assets/js/components/ui/youtube/YouTubeVideoList.spec.ts
+++ b/resources/assets/js/components/ui/youtube/YouTubeVideoList.spec.ts
@@ -1,8 +1,8 @@
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { youTubeService } from '@/services'
 import { screen, waitFor } from '@testing-library/vue'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { youTubeService } from '@/services/youTubeService'
 import Btn from '@/components/ui/form/Btn.vue'
 import YouTubeVideo from '@/components/ui/youtube/YouTubeVideoItem.vue'
 import YouTubeVideoList from './YouTubeVideoList.vue'
diff --git a/resources/assets/js/components/ui/youtube/YouTubeVideoList.vue b/resources/assets/js/components/ui/youtube/YouTubeVideoList.vue
index 4cf3d846..105cde5e 100644
--- a/resources/assets/js/components/ui/youtube/YouTubeVideoList.vue
+++ b/resources/assets/js/components/ui/youtube/YouTubeVideoList.vue
@@ -20,8 +20,8 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, toRefs, watch } from 'vue'
-import { youTubeService } from '@/services'
-import { useErrorHandler } from '@/composables'
+import { youTubeService } from '@/services/youTubeService'
+import { useErrorHandler } from '@/composables/useErrorHandler'
 
 const props = defineProps<{ song: Song }>()
 const Btn = defineAsyncComponent(() => import('@/components/ui/form/Btn.vue'))
diff --git a/resources/assets/js/components/user/AddUserForm.spec.ts b/resources/assets/js/components/user/AddUserForm.spec.ts
index 8237f824..100476e4 100644
--- a/resources/assets/js/components/user/AddUserForm.spec.ts
+++ b/resources/assets/js/components/user/AddUserForm.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen, waitFor } from '@testing-library/vue'
-import { userStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
 import { MessageToasterStub } from '@/__tests__/stubs'
+import { userStore } from '@/stores/userStore'
 import AddUserForm from './AddUserForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/user/AddUserForm.vue b/resources/assets/js/components/user/AddUserForm.vue
index 4507aa7b..e602db73 100644
--- a/resources/assets/js/components/user/AddUserForm.vue
+++ b/resources/assets/js/components/user/AddUserForm.vue
@@ -44,11 +44,15 @@
 <script lang="ts" setup>
 import { isEqual } from 'lodash'
 import { reactive } from 'vue'
-import type { CreateUserData } from '@/stores'
-import { userStore } from '@/stores'
-import { useDialogBox, useErrorHandler, useMessageToaster, useOverlay } from '@/composables'
+import type { CreateUserData } from '@/stores/userStore'
+import { userStore } from '@/stores/userStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
 
 import Btn from '@/components/ui/form/Btn.vue'
+
 import TooltipIcon from '@/components/ui/TooltipIcon.vue'
 import CheckBox from '@/components/ui/form/CheckBox.vue'
 import TextInput from '@/components/ui/form/TextInput.vue'
diff --git a/resources/assets/js/components/user/EditUserForm.spec.ts b/resources/assets/js/components/user/EditUserForm.spec.ts
index bb407f99..4aa652d7 100644
--- a/resources/assets/js/components/user/EditUserForm.spec.ts
+++ b/resources/assets/js/components/user/EditUserForm.spec.ts
@@ -1,11 +1,11 @@
 import { ref } from 'vue'
-import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
-import { ModalContextKey } from '@/symbols'
 import { screen, waitFor } from '@testing-library/vue'
-import { userStore } from '@/stores'
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
 import { MessageToasterStub } from '@/__tests__/stubs'
+import { ModalContextKey } from '@/symbols'
+import { userStore } from '@/stores/userStore'
 import EditUserForm from './EditUserForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/user/EditUserForm.vue b/resources/assets/js/components/user/EditUserForm.vue
index bbcb15d9..b434946a 100644
--- a/resources/assets/js/components/user/EditUserForm.vue
+++ b/resources/assets/js/components/user/EditUserForm.vue
@@ -55,9 +55,13 @@
 <script lang="ts" setup>
 import { isEqual } from 'lodash'
 import { reactive, watch } from 'vue'
-import type { UpdateUserData } from '@/stores'
-import { userStore } from '@/stores'
-import { useDialogBox, useErrorHandler, useMessageToaster, useModal, useOverlay } from '@/composables'
+import type { UpdateUserData } from '@/stores/userStore'
+import { userStore } from '@/stores/userStore'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useModal } from '@/composables/useModal'
+import { useOverlay } from '@/composables/useOverlay'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TooltipIcon from '@/components/ui/TooltipIcon.vue'
@@ -67,6 +71,7 @@ import TextInput from '@/components/ui/form/TextInput.vue'
 import FormRow from '@/components/ui/form/FormRow.vue'
 
 const emit = defineEmits<{ (e: 'close'): void }>()
+
 const { showOverlay, hideOverlay } = useOverlay()
 const { toastSuccess } = useMessageToaster()
 const { showConfirmDialog } = useDialogBox()
diff --git a/resources/assets/js/components/user/InviteUserForm.spec.ts b/resources/assets/js/components/user/InviteUserForm.spec.ts
index fe175e0c..61eb1609 100644
--- a/resources/assets/js/components/user/InviteUserForm.spec.ts
+++ b/resources/assets/js/components/user/InviteUserForm.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen, waitFor } from '@testing-library/vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
 import { MessageToasterStub } from '@/__tests__/stubs'
-import { invitationService } from '@/services'
+import { invitationService } from '@/services/invitationService'
 import InviteUserForm from './InviteUserForm.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/user/InviteUserForm.vue b/resources/assets/js/components/user/InviteUserForm.vue
index 01bf93f3..80a90211 100644
--- a/resources/assets/js/components/user/InviteUserForm.vue
+++ b/resources/assets/js/components/user/InviteUserForm.vue
@@ -28,8 +28,11 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
-import { useDialogBox, useErrorHandler, useMessageToaster, useOverlay } from '@/composables'
-import { invitationService } from '@/services'
+import { invitationService } from '@/services/invitationService'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useOverlay } from '@/composables/useOverlay'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import TooltipIcon from '@/components/ui/TooltipIcon.vue'
diff --git a/resources/assets/js/components/user/UserAvatar.vue b/resources/assets/js/components/user/UserAvatar.vue
index 665f6286..519b2390 100644
--- a/resources/assets/js/components/user/UserAvatar.vue
+++ b/resources/assets/js/components/user/UserAvatar.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { ref, toRefs } from 'vue'
-import { defaultCover } from '@/utils'
+import defaultCover from '@/../img/covers/default.svg'
 
 const props = defineProps<{ user: Pick<User, 'name' | 'avatar'> }>()
 const { user } = toRefs(props)
diff --git a/resources/assets/js/components/user/UserCard.spec.ts b/resources/assets/js/components/user/UserCard.spec.ts
index 378a84a5..955a6cfc 100644
--- a/resources/assets/js/components/user/UserCard.spec.ts
+++ b/resources/assets/js/components/user/UserCard.spec.ts
@@ -1,12 +1,12 @@
 import Router from '@/router'
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { screen } from '@testing-library/vue'
-import { eventBus } from '@/utils'
-import { userStore } from '@/stores'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { eventBus } from '@/utils/eventBus'
+import { userStore } from '@/stores/userStore'
 import { DialogBoxStub } from '@/__tests__/stubs'
-import { invitationService } from '@/services'
+import { invitationService } from '@/services/invitationService'
 import UserCard from './UserCard.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/components/user/UserCard.vue b/resources/assets/js/components/user/UserCard.vue
index a4dfe118..9bc56df8 100644
--- a/resources/assets/js/components/user/UserCard.vue
+++ b/resources/assets/js/components/user/UserCard.vue
@@ -48,10 +48,14 @@
 import googleLogo from '@/../img/logos/google.svg'
 import { faCircleCheck, faShield } from '@fortawesome/free-solid-svg-icons'
 import { computed, toRefs } from 'vue'
-import { userStore } from '@/stores'
-import { invitationService } from '@/services'
-import { useAuthorization, useDialogBox, useErrorHandler, useMessageToaster, useRouter } from '@/composables'
-import { eventBus } from '@/utils'
+import { userStore } from '@/stores/userStore'
+import { invitationService } from '@/services/invitationService'
+import { eventBus } from '@/utils/eventBus'
+import { useRouter } from '@/composables/useRouter'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useDialogBox } from '@/composables/useDialogBox'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import UserAvatar from '@/components/user/UserAvatar.vue'
diff --git a/resources/assets/js/components/utils/AppInitializer.vue b/resources/assets/js/components/utils/AppInitializer.vue
index a8c23223..7e10d4c9 100644
--- a/resources/assets/js/components/utils/AppInitializer.vue
+++ b/resources/assets/js/components/utils/AppInitializer.vue
@@ -4,9 +4,13 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue'
-import { useErrorHandler, useOverlay } from '@/composables'
-import { commonStore, preferenceStore as preferences } from '@/stores'
-import { socketListener, socketService, uploadService } from '@/services'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useOverlay } from '@/composables/useOverlay'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { socketListener } from '@/services/socketListener'
+import { socketService } from '@/services/socketService'
+import { uploadService } from '@/services/uploadService'
 
 const emits = defineEmits<{
   (e: 'success'): void
diff --git a/resources/assets/js/components/utils/GlobalEventListeners.vue b/resources/assets/js/components/utils/GlobalEventListeners.vue
index 6955f109..8d07920a 100644
--- a/resources/assets/js/components/utils/GlobalEventListeners.vue
+++ b/resources/assets/js/components/utils/GlobalEventListeners.vue
@@ -3,11 +3,15 @@
 </template>
 
 <script lang="ts" setup>
-import { useDialogBox, useMessageToaster, useRouter } from '@/composables'
 import { onMounted } from 'vue'
-import { eventBus, forceReloadWindow } from '@/utils'
-import { playlistFolderStore, playlistStore } from '@/stores'
-import { authService } from '@/services'
+import { useRouter } from '@/composables/useRouter'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { eventBus } from '@/utils/eventBus'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { authService } from '@/services/authService'
+import { forceReloadWindow } from '@/utils/helpers'
 
 let toastSuccess: ReturnType<typeof useMessageToaster>['toastSuccess']
 let showConfirmDialog: ReturnType<typeof useDialogBox>['showConfirmDialog']
diff --git a/resources/assets/js/components/utils/HotkeyListener.vue b/resources/assets/js/components/utils/HotkeyListener.vue
index 6b4db149..9e2ba392 100644
--- a/resources/assets/js/components/utils/HotkeyListener.vue
+++ b/resources/assets/js/components/utils/HotkeyListener.vue
@@ -5,10 +5,13 @@
 <script lang="ts" setup>
 import type { KeyFilter } from '@vueuse/core'
 import { onKeyStroke as baseOnKeyStroke } from '@vueuse/core'
-import { eventBus } from '@/utils'
-import { playbackService, socketService, volumeManager } from '@/services'
-import { favoriteStore, queueStore } from '@/stores'
-import { useRouter } from '@/composables'
+import { eventBus } from '@/utils/eventBus'
+import { playbackService } from '@/services/playbackService'
+import { socketService } from '@/services/socketService'
+import { volumeManager } from '@/services/volumeManager'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { queueStore } from '@/stores/queueStore'
+import { useRouter } from '@/composables/useRouter'
 
 const { isCurrentScreen, go } = useRouter()
 
diff --git a/resources/assets/js/composables/index.ts b/resources/assets/js/composables/index.ts
deleted file mode 100644
index 7a42bc16..00000000
--- a/resources/assets/js/composables/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export * from './useAuthorization'
-export * from './useContextMenu'
-export * from './useDialogBox'
-export * from './useDragAndDrop'
-export * from './useEpisodeProgressTracking'
-export * from './useErrorHandler'
-export * from './useFileReader'
-export * from './useFloatingUi'
-export * from './useFuzzySearch'
-export * from './useInfiniteScroll'
-export * from './useKoelPlus'
-export * from './useLocalStorage'
-export * from './useMessageToaster'
-export * from './useModal'
-export * from './useNewVersionNotification'
-export * from './useOverlay'
-export * from './usePlayableMenuMethods'
-export * from './usePlaylistManagement'
-export * from './usePolicies'
-export * from './useRouter'
-export * from './useSmartPlaylistForm'
-export * from './useSongList'
-export * from './useSongListControls'
-export * from './useThirdPartyServices'
-export * from './useUpload'
diff --git a/resources/assets/js/composables/useAuthorization.ts b/resources/assets/js/composables/useAuthorization.ts
index 9af0c2c9..0fc99e7f 100644
--- a/resources/assets/js/composables/useAuthorization.ts
+++ b/resources/assets/js/composables/useAuthorization.ts
@@ -1,5 +1,5 @@
 import { computed, toRef } from 'vue'
-import { userStore } from '@/stores'
+import { userStore } from '@/stores/userStore'
 
 export const useAuthorization = () => {
   const currentUser = toRef(userStore.state, 'current')
diff --git a/resources/assets/js/composables/useDialogBox.ts b/resources/assets/js/composables/useDialogBox.ts
index 81bfad0c..efc68d02 100644
--- a/resources/assets/js/composables/useDialogBox.ts
+++ b/resources/assets/js/composables/useDialogBox.ts
@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
-import { requireInjection } from '@/utils'
+import { requireInjection } from '@/utils/helpers'
 import { DialogBoxKey } from '@/symbols'
+
 import type DialogBox from '@/components/ui/DialogBox.vue'
 
 let dialogBox: Ref<InstanceType<typeof DialogBox>>
diff --git a/resources/assets/js/composables/useDragAndDrop.ts b/resources/assets/js/composables/useDragAndDrop.ts
index 06bf7bb4..f4a0119c 100644
--- a/resources/assets/js/composables/useDragAndDrop.ts
+++ b/resources/assets/js/composables/useDragAndDrop.ts
@@ -1,5 +1,11 @@
-import { arrayify, getPlayableProp, logger, pluralize } from '@/utils'
-import { albumStore, artistStore, playlistFolderStore, playlistStore, songStore } from '@/stores'
+import { pluralize } from '@/utils/formatters'
+import { arrayify, getPlayableProp } from '@/utils/helpers'
+import { logger } from '@/utils/logger'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { songStore } from '@/stores/songStore'
 
 type Draggable = MaybeArray<Playable> | Album | Artist | Playlist | PlaylistFolder
 const draggableTypes = <const>['playables', 'album', 'artist', 'playlist', 'playlist-folder']
diff --git a/resources/assets/js/composables/useEpisodeProgressTracking.ts b/resources/assets/js/composables/useEpisodeProgressTracking.ts
index 12023f87..f82ced1f 100644
--- a/resources/assets/js/composables/useEpisodeProgressTracking.ts
+++ b/resources/assets/js/composables/useEpisodeProgressTracking.ts
@@ -1,5 +1,5 @@
-import { eventBus } from '@/utils'
-import { podcastStore } from '@/stores'
+import { eventBus } from '@/utils/eventBus'
+import { podcastStore } from '@/stores/podcastStore'
 
 let progressTrackedEpisode: Episode | null = null
 
diff --git a/resources/assets/js/composables/useErrorHandler.ts b/resources/assets/js/composables/useErrorHandler.ts
index 81009ab9..060446c2 100644
--- a/resources/assets/js/composables/useErrorHandler.ts
+++ b/resources/assets/js/composables/useErrorHandler.ts
@@ -1,7 +1,9 @@
 import type { AxiosResponse } from 'axios'
 import axios from 'axios'
-import { logger, parseValidationError } from '@/utils'
-import { useDialogBox, useMessageToaster } from '@/composables'
+import { logger } from '@/utils/logger'
+import { parseValidationError } from '@/utils/formatters'
+import { useDialogBox } from '@/composables/useDialogBox'
+import { useMessageToaster } from '@/composables/useMessageToaster'
 
 export interface StatusMessageMap {
   [key: AxiosResponse['status']]: string | Closure
diff --git a/resources/assets/js/composables/useFloatingUi.ts b/resources/assets/js/composables/useFloatingUi.ts
index 6aa4785e..6b51e2f9 100644
--- a/resources/assets/js/composables/useFloatingUi.ts
+++ b/resources/assets/js/composables/useFloatingUi.ts
@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 import { isRef } from 'vue'
 import type { Placement } from '@floating-ui/dom'
 import { arrow as arrowMiddleware, autoUpdate, flip, offset } from '@floating-ui/dom'
-import { updateFloatingUi } from '@/utils'
+import { updateFloatingUi } from '@/utils/floatingUi'
 
 export interface Config {
   placement: Placement
diff --git a/resources/assets/js/composables/useKoelPlus.ts b/resources/assets/js/composables/useKoelPlus.ts
index de7752bd..d7f16e80 100644
--- a/resources/assets/js/composables/useKoelPlus.ts
+++ b/resources/assets/js/composables/useKoelPlus.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { commonStore } from '@/stores'
+import { commonStore } from '@/stores/commonStore'
 
 export const useKoelPlus = () => {
   return {
diff --git a/resources/assets/js/composables/useLocalStorage.ts b/resources/assets/js/composables/useLocalStorage.ts
index ef7c71c7..c7ccbd37 100644
--- a/resources/assets/js/composables/useLocalStorage.ts
+++ b/resources/assets/js/composables/useLocalStorage.ts
@@ -1,4 +1,4 @@
-import { useAuthorization } from '@/composables'
+import { useAuthorization } from '@/composables/useAuthorization'
 import { get as baseGet, remove as baseRemove, set as baseSet } from 'local-storage'
 
 export const useLocalStorage = (namespaced = true) => {
diff --git a/resources/assets/js/composables/useMessageToaster.ts b/resources/assets/js/composables/useMessageToaster.ts
index 933f94be..3cbb9fb8 100644
--- a/resources/assets/js/composables/useMessageToaster.ts
+++ b/resources/assets/js/composables/useMessageToaster.ts
@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { MessageToasterKey } from '@/symbols'
-import { requireInjection } from '@/utils'
+import { requireInjection } from '@/utils/helpers'
+
 import type MessageToaster from '@/components/ui/message-toaster/MessageToaster.vue'
 
 let toaster: Ref<InstanceType<typeof MessageToaster>>
diff --git a/resources/assets/js/composables/useModal.ts b/resources/assets/js/composables/useModal.ts
index 226f7827..a6a7decf 100644
--- a/resources/assets/js/composables/useModal.ts
+++ b/resources/assets/js/composables/useModal.ts
@@ -1,6 +1,6 @@
-import { requireInjection } from '@/utils'
-import { ModalContextKey } from '@/symbols'
 import type { Ref } from 'vue'
+import { requireInjection } from '@/utils/helpers'
+import { ModalContextKey } from '@/symbols'
 
 export const useModal = () => {
   const [modalContext] = requireInjection<[Ref<Record<string, any>>]>(ModalContextKey)
diff --git a/resources/assets/js/composables/useNewVersionNotification.ts b/resources/assets/js/composables/useNewVersionNotification.ts
index fb32b36d..0507fa09 100644
--- a/resources/assets/js/composables/useNewVersionNotification.ts
+++ b/resources/assets/js/composables/useNewVersionNotification.ts
@@ -1,6 +1,6 @@
 import compareVersions from 'compare-versions'
 import { computed, toRef } from 'vue'
-import { commonStore } from '@/stores'
+import { commonStore } from '@/stores/commonStore'
 import { useAuthorization } from '@/composables/useAuthorization'
 
 export const useNewVersionNotification = () => {
diff --git a/resources/assets/js/composables/useOverlay.ts b/resources/assets/js/composables/useOverlay.ts
index 9905e398..6fcf01a7 100644
--- a/resources/assets/js/composables/useOverlay.ts
+++ b/resources/assets/js/composables/useOverlay.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { requireInjection } from '@/utils'
+import { requireInjection } from '@/utils/helpers'
 import { OverlayKey } from '@/symbols'
 import type Overlay from '@/components/ui/Overlay.vue'
 
diff --git a/resources/assets/js/composables/usePlayableMenuMethods.ts b/resources/assets/js/composables/usePlayableMenuMethods.ts
index 1abee211..f4947ca0 100644
--- a/resources/assets/js/composables/usePlayableMenuMethods.ts
+++ b/resources/assets/js/composables/usePlayableMenuMethods.ts
@@ -1,7 +1,8 @@
 import type { Ref } from 'vue'
-import { favoriteStore, queueStore } from '@/stores'
-import { usePlaylistManagement } from '@/composables'
-import { eventBus } from '@/utils'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { queueStore } from '@/stores/queueStore'
+import { eventBus } from '@/utils/eventBus'
+import { usePlaylistManagement } from '@/composables/usePlaylistManagement'
 
 export const usePlayableMenuMethods = (playables: Ref<Playable[]>, close: Closure) => {
   const { addToPlaylist } = usePlaylistManagement()
diff --git a/resources/assets/js/composables/usePlaylistManagement.ts b/resources/assets/js/composables/usePlaylistManagement.ts
index cd03a1c1..be82eace 100644
--- a/resources/assets/js/composables/usePlaylistManagement.ts
+++ b/resources/assets/js/composables/usePlaylistManagement.ts
@@ -1,6 +1,8 @@
-import { playlistStore } from '@/stores'
-import { eventBus, getPlayableCollectionContentType } from '@/utils'
-import { useErrorHandler, useMessageToaster } from '@/composables'
+import { playlistStore } from '@/stores/playlistStore'
+import { eventBus } from '@/utils/eventBus'
+import { getPlayableCollectionContentType } from '@/utils/typeGuards'
+import { useErrorHandler } from '@/composables/useErrorHandler'
+import { useMessageToaster } from '@/composables/useMessageToaster'
 
 export const usePlaylistManagement = () => {
   const { handleHttpError } = useErrorHandler('dialog')
diff --git a/resources/assets/js/composables/usePolicies.ts b/resources/assets/js/composables/usePolicies.ts
index d9de0840..f165aef5 100644
--- a/resources/assets/js/composables/usePolicies.ts
+++ b/resources/assets/js/composables/usePolicies.ts
@@ -1,5 +1,6 @@
-import { useAuthorization, useKoelPlus } from '@/composables'
-import { arrayify } from '@/utils'
+import { arrayify } from '@/utils/helpers'
+import { useAuthorization } from '@/composables/useAuthorization'
+import { useKoelPlus } from '@/composables/useKoelPlus'
 
 export const usePolicies = () => {
   const { currentUser, isAdmin } = useAuthorization()
diff --git a/resources/assets/js/composables/useRouter.ts b/resources/assets/js/composables/useRouter.ts
index cd052597..e8c4a514 100644
--- a/resources/assets/js/composables/useRouter.ts
+++ b/resources/assets/js/composables/useRouter.ts
@@ -1,6 +1,6 @@
 import { RouterKey } from '@/symbols'
-import { requireInjection } from '@/utils'
 import Router from '@/router'
+import { requireInjection } from '@/utils/helpers'
 
 let router: Router
 
diff --git a/resources/assets/js/composables/useSmartPlaylistForm.ts b/resources/assets/js/composables/useSmartPlaylistForm.ts
index d7f39163..6b182de5 100644
--- a/resources/assets/js/composables/useSmartPlaylistForm.ts
+++ b/resources/assets/js/composables/useSmartPlaylistForm.ts
@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { playlistStore } from '@/stores'
+import { playlistStore } from '@/stores/playlistStore'
 
 import Btn from '@/components/ui/form/Btn.vue'
 import FormBase from '@/components/playlist/smart-playlist/SmartPlaylistFormBase.vue'
diff --git a/resources/assets/js/composables/useSongList.ts b/resources/assets/js/composables/useSongList.ts
index d8883636..4d167c42 100644
--- a/resources/assets/js/composables/useSongList.ts
+++ b/resources/assets/js/composables/useSongList.ts
@@ -2,10 +2,14 @@ import { differenceBy, orderBy, sampleSize, take, throttle } from 'lodash'
 import isMobile from 'ismobilejs'
 import type { Ref } from 'vue'
 import { computed, provide, reactive, ref } from 'vue'
-import { playbackService } from '@/services'
-import { commonStore, queueStore, songStore } from '@/stores'
-import { arrayify, eventBus, getPlayableProp, provideReadonly } from '@/utils'
-import { useFuzzySearch, useRouter } from '@/composables'
+import { playbackService } from '@/services/playbackService'
+import { commonStore } from '@/stores/commonStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { arrayify, getPlayableProp, provideReadonly } from '@/utils/helpers'
+import { eventBus } from '@/utils/eventBus'
+import { useFuzzySearch } from '@/composables/useFuzzySearch'
+import { useRouter } from '@/composables/useRouter'
 
 import {
   PlayableListConfigKey,
diff --git a/resources/assets/js/composables/useThirdPartyServices.ts b/resources/assets/js/composables/useThirdPartyServices.ts
index 291daf5c..7bd46b34 100644
--- a/resources/assets/js/composables/useThirdPartyServices.ts
+++ b/resources/assets/js/composables/useThirdPartyServices.ts
@@ -1,5 +1,5 @@
 import { toRef } from 'vue'
-import { commonStore } from '@/stores'
+import { commonStore } from '@/stores/commonStore'
 
 export const useThirdPartyServices = () => {
   return {
diff --git a/resources/assets/js/composables/useUpload.ts b/resources/assets/js/composables/useUpload.ts
index d1da3a97..73f2ec5f 100644
--- a/resources/assets/js/composables/useUpload.ts
+++ b/resources/assets/js/composables/useUpload.ts
@@ -1,10 +1,13 @@
 import { computed } from 'vue'
-import { commonStore } from '@/stores'
-import { acceptedMediaTypes } from '@/config'
-import type { UploadFile } from '@/services'
-import { uploadService } from '@/services'
-import { getAllFileEntries, pluralize } from '@/utils'
-import { useMessageToaster, usePolicies, useRouter } from '@/composables'
+import { commonStore } from '@/stores/commonStore'
+import { acceptedMediaTypes } from '@/config/acceptedMediaTypes'
+import type { UploadFile } from '@/services/uploadService'
+import { uploadService } from '@/services/uploadService'
+import { getAllFileEntries } from '@/utils/directoryReader'
+import { pluralize } from '@/utils/formatters'
+import { useRouter } from '@/composables/useRouter'
+import { useMessageToaster } from '@/composables/useMessageToaster'
+import { usePolicies } from '@/composables/usePolicies'
 
 export const useUpload = () => {
   const { toastSuccess, toastWarning } = useMessageToaster()
diff --git a/resources/assets/js/config/events.ts b/resources/assets/js/config/events.ts
index 606e245c..0068affb 100644
--- a/resources/assets/js/config/events.ts
+++ b/resources/assets/js/config/events.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { SongUpdateResult } from '@/stores'
+import type { SongUpdateResult } from '@/stores/songStore'
 
 export interface Events {
   LOG_OUT: () => void
diff --git a/resources/assets/js/config/index.ts b/resources/assets/js/config/index.ts
deleted file mode 100644
index 482e08cb..00000000
--- a/resources/assets/js/config/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './acceptedImageTypes'
-export * from './acceptedMediaTypes'
-export * from './audio'
-export * from './events'
-export * from './genres'
-export * from './routes'
-export * from './visualizers'
diff --git a/resources/assets/js/config/routes.ts b/resources/assets/js/config/routes.ts
index 39eece86..767493be 100644
--- a/resources/assets/js/config/routes.ts
+++ b/resources/assets/js/config/routes.ts
@@ -1,9 +1,10 @@
 import type { Route } from '@/router'
 import Router from '@/router'
-import { userStore } from '@/stores'
-import { cache, playlistCollaborationService } from '@/services'
-import { useUpload } from '@/composables'
-import { logger } from '@/utils'
+import { userStore } from '@/stores/userStore'
+import { cache } from '@/services/cache'
+import { playlistCollaborationService } from '@/services/playlistCollaborationService'
+import { useUpload } from '@/composables/useUpload'
+import { logger } from '@/utils/logger'
 
 const UUID_REGEX = '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}'
 
diff --git a/resources/assets/js/directives/index.ts b/resources/assets/js/directives/index.ts
deleted file mode 100644
index 2e96f022..00000000
--- a/resources/assets/js/directives/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './focus'
-export * from './hideBrokenIcon'
-export * from './newTab'
-export * from './overflowFade'
-export * from './tooltip'
diff --git a/resources/assets/js/directives/tooltip.ts b/resources/assets/js/directives/tooltip.ts
index dc6ddc71..d3672180 100644
--- a/resources/assets/js/directives/tooltip.ts
+++ b/resources/assets/js/directives/tooltip.ts
@@ -1,7 +1,7 @@
 import type { Placement } from '@floating-ui/dom'
 import { arrow, autoUpdate, offset } from '@floating-ui/dom'
 import type { Directive, DirectiveBinding } from 'vue'
-import { updateFloatingUi } from '@/utils'
+import { updateFloatingUi } from '@/utils/floatingUi'
 
 type ElementWithTooltip = HTMLElement & {
   $tooltip?: HTMLDivElement
diff --git a/resources/assets/js/remote/App.vue b/resources/assets/js/remote/App.vue
index 6434b580..e1a599cc 100644
--- a/resources/assets/js/remote/App.vue
+++ b/resources/assets/js/remote/App.vue
@@ -23,10 +23,13 @@
 </template>
 
 <script lang="ts" setup>
-import { authService, socketService } from '@/services'
-import { preferenceStore, userStore } from '@/stores'
 import { computed, defineAsyncComponent, onMounted, provide, reactive, ref } from 'vue'
-import { isSong, logger } from '@/utils'
+import { authService } from '@/services/authService'
+import { socketService } from '@/services/socketService'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { userStore } from '@/stores/userStore'
+import { isSong } from '@/utils/typeGuards'
+import { logger } from '@/utils/logger'
 import type { RemoteState } from '@/remote/types'
 
 const PlayableDetails = defineAsyncComponent(() => import('@/remote/components/PlayableDetails.vue'))
diff --git a/resources/assets/js/remote/components/PlayableDetails.vue b/resources/assets/js/remote/components/PlayableDetails.vue
index cb4fe583..4bb0b1af 100644
--- a/resources/assets/js/remote/components/PlayableDetails.vue
+++ b/resources/assets/js/remote/components/PlayableDetails.vue
@@ -17,7 +17,8 @@
 
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
-import { defaultCover, getPlayableProp } from '@/utils'
+import defaultCover from '@/../img/covers/default.svg'
+import { getPlayableProp } from '@/utils/helpers'
 
 const props = defineProps<{ playable: Playable }>()
 const { playable } = toRefs(props)
diff --git a/resources/assets/js/remote/components/RemoteFooter.spec.ts b/resources/assets/js/remote/components/RemoteFooter.spec.ts
index 17470d3c..98176806 100644
--- a/resources/assets/js/remote/components/RemoteFooter.spec.ts
+++ b/resources/assets/js/remote/components/RemoteFooter.spec.ts
@@ -2,7 +2,7 @@ import { screen } from '@testing-library/vue'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { socketService } from '@/services'
+import { socketService } from '@/services/socketService'
 import Component from './RemoteFooter.vue'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/remote/components/RemoteFooter.vue b/resources/assets/js/remote/components/RemoteFooter.vue
index 271d473f..5e84f5ed 100644
--- a/resources/assets/js/remote/components/RemoteFooter.vue
+++ b/resources/assets/js/remote/components/RemoteFooter.vue
@@ -33,7 +33,7 @@
 import { faHeart, faPause, faPlay, faStepBackward, faStepForward } from '@fortawesome/free-solid-svg-icons'
 import { faHeart as faEmptyHeart } from '@fortawesome/free-regular-svg-icons'
 import { computed, toRefs } from 'vue'
-import { socketService } from '@/services'
+import { socketService } from '@/services/socketService'
 
 import VolumeControl from '@/remote/components/VolumeControl.vue'
 
diff --git a/resources/assets/js/remote/components/Scanner.vue b/resources/assets/js/remote/components/Scanner.vue
index 57c6db95..8d0542f5 100644
--- a/resources/assets/js/remote/components/Scanner.vue
+++ b/resources/assets/js/remote/components/Scanner.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
-import { socketService } from '@/services'
+import { socketService } from '@/services/socketService'
 
 const MAX_RETRIES = 10
 const connected = ref(false)
diff --git a/resources/assets/js/remote/components/VolumeControl.vue b/resources/assets/js/remote/components/VolumeControl.vue
index 7b547ce3..baaa795d 100644
--- a/resources/assets/js/remote/components/VolumeControl.vue
+++ b/resources/assets/js/remote/components/VolumeControl.vue
@@ -14,7 +14,7 @@ import { faVolumeHigh, faVolumeMute } from '@fortawesome/free-solid-svg-icons'
 import noUISlider from 'nouislider'
 import { OnClickOutside } from '@vueuse/components'
 import { inject, onMounted, ref, watch } from 'vue'
-import { socketService } from '@/services'
+import { socketService } from '@/services/socketService'
 import type { RemoteState } from '@/remote/types'
 
 const DEFAULT_VOLUME = 7
diff --git a/resources/assets/js/router.ts b/resources/assets/js/router.ts
index 65d624e4..dd3c7ad7 100644
--- a/resources/assets/js/router.ts
+++ b/resources/assets/js/router.ts
@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { ref, watch } from 'vue'
-import { forceReloadWindow } from '@/utils'
+
+import { forceReloadWindow } from '@/utils/helpers'
 
 type RouteParams = Record<string, string>
 type ResolveHook = (params: RouteParams) => Promise<boolean | void> | boolean | void
diff --git a/resources/assets/js/services/audioService.ts b/resources/assets/js/services/audioService.ts
index e89865ee..3b774de9 100644
--- a/resources/assets/js/services/audioService.ts
+++ b/resources/assets/js/services/audioService.ts
@@ -1,6 +1,7 @@
-import { equalizerStore } from '@/stores'
-import { frequencies } from '@/config'
-import { dbToGain } from '@/utils'
+import { equalizerStore } from '@/stores/equalizerStore'
+import { frequencies } from '@/config/audio'
+
+export const dbToGain = (db: number) => 10 ** (db / 20) || 0
 
 export interface Band {
   label: string
diff --git a/resources/assets/js/services/authService.spec.ts b/resources/assets/js/services/authService.spec.ts
index 18dc2460..25db7ef0 100644
--- a/resources/assets/js/services/authService.spec.ts
+++ b/resources/assets/js/services/authService.spec.ts
@@ -1,10 +1,11 @@
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { expect, it } from 'vitest'
-import type { UpdateCurrentProfileData } from '@/services'
-import { authService, http } from '@/services'
-import { useLocalStorage } from '@/composables'
 import factory from '@/__tests__/factory'
-import { userStore } from '@/stores'
+import type { UpdateCurrentProfileData } from '@/services/authService'
+import { authService } from '@/services/authService'
+import { http } from '@/services/http'
+import { useLocalStorage } from '@/composables/useLocalStorage'
+import { userStore } from '@/stores/userStore'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/services/authService.ts b/resources/assets/js/services/authService.ts
index 120e623c..1c0be7be 100644
--- a/resources/assets/js/services/authService.ts
+++ b/resources/assets/js/services/authService.ts
@@ -1,7 +1,7 @@
 import { merge } from 'lodash'
-import { http } from '@/services'
-import { userStore } from '@/stores'
-import { useLocalStorage } from '@/composables'
+import { http } from '@/services/http'
+import { userStore } from '@/stores/userStore'
+import { useLocalStorage } from '@/composables/useLocalStorage'
 
 export interface UpdateCurrentProfileData {
   current_password: string | null
diff --git a/resources/assets/js/services/downloadService.spec.ts b/resources/assets/js/services/downloadService.spec.ts
index bd445e25..2b38566a 100644
--- a/resources/assets/js/services/downloadService.spec.ts
+++ b/resources/assets/js/services/downloadService.spec.ts
@@ -1,7 +1,7 @@
-import { favoriteStore } from '@/stores'
-import factory from '@/__tests__/factory'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { favoriteStore } from '@/stores/favoriteStore'
 import { downloadService } from './downloadService'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/services/downloadService.ts b/resources/assets/js/services/downloadService.ts
index 429c12cc..33d8ca8c 100644
--- a/resources/assets/js/services/downloadService.ts
+++ b/resources/assets/js/services/downloadService.ts
@@ -1,6 +1,6 @@
-import { favoriteStore } from '@/stores'
-import { authService } from '@/services'
-import { arrayify } from '@/utils'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { authService } from '@/services/authService'
+import { arrayify } from '@/utils/helpers'
 
 export const downloadService = {
   fromPlayables (playables: MaybeArray<Playable>) {
diff --git a/resources/assets/js/services/http.ts b/resources/assets/js/services/http.ts
index f24285df..ec9caf2a 100644
--- a/resources/assets/js/services/http.ts
+++ b/resources/assets/js/services/http.ts
@@ -1,8 +1,8 @@
 import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, Method } from 'axios'
 import Axios from 'axios'
 import NProgress from 'nprogress'
-import { eventBus } from '@/utils'
-import { authService } from '@/services'
+import { eventBus } from '@/utils/eventBus'
+import { authService } from '@/services/authService'
 
 class Http {
   client: AxiosInstance
diff --git a/resources/assets/js/services/index.ts b/resources/assets/js/services/index.ts
deleted file mode 100644
index 51ed53a0..00000000
--- a/resources/assets/js/services/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from './audioService'
-export * from './authService'
-export * from './cache'
-export * from './downloadService'
-export * from './http'
-export * from './invitationService'
-export * from './mediaInfoService'
-export * from './playbackService'
-export * from './playlistCollaborationService'
-export * from './plusService'
-export * from './socketListener'
-export * from './socketService'
-export * from './uploadService'
-export * from './volumeManager'
-export * from './youTubeService'
diff --git a/resources/assets/js/services/invitationService.spec.ts b/resources/assets/js/services/invitationService.spec.ts
index b6cb21e8..01985ebc 100644
--- a/resources/assets/js/services/invitationService.spec.ts
+++ b/resources/assets/js/services/invitationService.spec.ts
@@ -1,8 +1,9 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { authService, http } from '@/services'
-import { userStore } from '@/stores'
+import { authService } from '@/services/authService'
+import { http } from '@/services/http'
+import { userStore } from '@/stores/userStore'
 import { invitationService } from './invitationService'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/services/invitationService.ts b/resources/assets/js/services/invitationService.ts
index 87005df9..1a6585b8 100644
--- a/resources/assets/js/services/invitationService.ts
+++ b/resources/assets/js/services/invitationService.ts
@@ -1,6 +1,7 @@
-import type { CompositeToken } from '@/services'
-import { authService, http } from '@/services'
-import { userStore } from '@/stores'
+import type { CompositeToken } from '@/services/authService'
+import { authService } from '@/services/authService'
+import { http } from '@/services/http'
+import { userStore } from '@/stores/userStore'
 
 export const invitationService = {
   getUserProspect: async (token: string) => await http.get<User>(`invitations?token=${token}`),
diff --git a/resources/assets/js/services/mediaInfoService.spec.ts b/resources/assets/js/services/mediaInfoService.spec.ts
index 6725e947..0dce5076 100644
--- a/resources/assets/js/services/mediaInfoService.spec.ts
+++ b/resources/assets/js/services/mediaInfoService.spec.ts
@@ -1,8 +1,10 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { cache, http } from '@/services'
-import { albumStore, artistStore } from '@/stores'
+import factory from '@/__tests__/factory'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
 import { mediaInfoService } from './mediaInfoService'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/services/mediaInfoService.ts b/resources/assets/js/services/mediaInfoService.ts
index 1dc83530..2c2a32b9 100644
--- a/resources/assets/js/services/mediaInfoService.ts
+++ b/resources/assets/js/services/mediaInfoService.ts
@@ -1,5 +1,8 @@
-import { cache, http } from '@/services'
-import { albumStore, artistStore, songStore } from '@/stores'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { songStore } from '@/stores/songStore'
 
 export const mediaInfoService = {
   async fetchForArtist (artist: Artist) {
diff --git a/resources/assets/js/services/playbackService.spec.ts b/resources/assets/js/services/playbackService.spec.ts
index f448ecd5..1db06d3a 100644
--- a/resources/assets/js/services/playbackService.spec.ts
+++ b/resources/assets/js/services/playbackService.spec.ts
@@ -2,20 +2,18 @@ import { nextTick, reactive } from 'vue'
 import plyr from 'plyr'
 import lodash from 'lodash'
 import { expect, it, vi } from 'vitest'
-import { noop } from '@/utils'
-import factory from '@/__tests__/factory'
+import { noop } from '@/utils/helpers'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http, socketService } from '@/services'
-import { playbackService } from './playbackService'
-
-import {
-  commonStore,
-  preferenceStore as preferences,
-  queueStore,
-  recentlyPlayedStore,
-  songStore,
-  userStore,
-} from '@/stores'
+import factory from '@/__tests__/factory'
+import { http } from '@/services/http'
+import { socketService } from '@/services/socketService'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { queueStore } from '@/stores/queueStore'
+import { songStore } from '@/stores/songStore'
+import { userStore } from '@/stores/userStore'
+import { commonStore } from '@/stores/commonStore'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { playbackService } from '@/services/playbackService'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/services/playbackService.ts b/resources/assets/js/services/playbackService.ts
index 5ccf735f..57b7998f 100644
--- a/resources/assets/js/services/playbackService.ts
+++ b/resources/assets/js/services/playbackService.ts
@@ -2,19 +2,22 @@ import isMobile from 'ismobilejs'
 import plyr from 'plyr'
 import { watch } from 'vue'
 import { shuffle, throttle } from 'lodash'
-
-import {
-  commonStore,
-  preferenceStore as preferences,
-  queueStore,
-  recentlyPlayedStore,
-  songStore,
-  userStore,
-} from '@/stores'
-
-import { arrayify, eventBus, getPlayableProp, isAudioContextSupported, isEpisode, isSong, logger } from '@/utils'
-import { audioService, http, socketService, volumeManager } from '@/services'
-import { useEpisodeProgressTracking } from '@/composables'
+import { commonStore } from '@/stores/commonStore'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { queueStore } from '@/stores/queueStore'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { songStore } from '@/stores/songStore'
+import { userStore } from '@/stores/userStore'
+import { logger } from '@/utils/logger'
+import { isEpisode, isSong } from '@/utils/typeGuards'
+import { arrayify, getPlayableProp } from '@/utils/helpers'
+import { eventBus } from '@/utils/eventBus'
+import { isAudioContextSupported } from '@/utils/supports'
+import { audioService } from '@/services/audioService'
+import { http } from '@/services/http'
+import { socketService } from '@/services/socketService'
+import { volumeManager } from '@/services/volumeManager'
+import { useEpisodeProgressTracking } from '@/composables/useEpisodeProgressTracking'
 
 /**
  * The number of seconds before the current playable ends to start preload the next one.
diff --git a/resources/assets/js/services/playlistCollaborationService.spec.ts b/resources/assets/js/services/playlistCollaborationService.spec.ts
index dd6775db..98c87545 100644
--- a/resources/assets/js/services/playlistCollaborationService.spec.ts
+++ b/resources/assets/js/services/playlistCollaborationService.spec.ts
@@ -1,7 +1,8 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { cache, http } from '@/services'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
 import { playlistCollaborationService as service } from './playlistCollaborationService'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/services/playlistCollaborationService.ts b/resources/assets/js/services/playlistCollaborationService.ts
index 0615114c..24f90c2d 100644
--- a/resources/assets/js/services/playlistCollaborationService.ts
+++ b/resources/assets/js/services/playlistCollaborationService.ts
@@ -1,4 +1,5 @@
-import { cache, http } from '@/services'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
 
 export const playlistCollaborationService = {
   async createInviteLink (playlist: Playlist) {
diff --git a/resources/assets/js/services/plusService.spec.ts b/resources/assets/js/services/plusService.spec.ts
index 225e90b1..fdfe6d60 100644
--- a/resources/assets/js/services/plusService.spec.ts
+++ b/resources/assets/js/services/plusService.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
+import { http } from '@/services/http'
 import { plusService as service } from './plusService'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/services/plusService.ts b/resources/assets/js/services/plusService.ts
index ea629120..a3775a82 100644
--- a/resources/assets/js/services/plusService.ts
+++ b/resources/assets/js/services/plusService.ts
@@ -1,4 +1,4 @@
-import { http } from '@/services'
+import { http } from '@/services/http'
 
 export const plusService = {
   activateLicense: async (key: string) => await http.post('licenses/activate', { key }),
diff --git a/resources/assets/js/services/socketListener.ts b/resources/assets/js/services/socketListener.ts
index a805e59a..d8f9d12a 100644
--- a/resources/assets/js/services/socketListener.ts
+++ b/resources/assets/js/services/socketListener.ts
@@ -1,5 +1,8 @@
-import { playbackService, socketService, volumeManager } from '@/services'
-import { favoriteStore, queueStore } from '@/stores'
+import { playbackService } from '@/services/playbackService'
+import { socketService } from '@/services/socketService'
+import { volumeManager } from '@/services/volumeManager'
+import { favoriteStore } from '@/stores/favoriteStore'
+import { queueStore } from '@/stores/queueStore'
 
 export const socketListener = {
   listen: () => {
diff --git a/resources/assets/js/services/socketService.ts b/resources/assets/js/services/socketService.ts
index dfb0529f..26cc8ff1 100644
--- a/resources/assets/js/services/socketService.ts
+++ b/resources/assets/js/services/socketService.ts
@@ -1,7 +1,7 @@
 import Pusher from 'pusher-js'
 
-import { userStore } from '@/stores'
-import { authService } from '@/services'
+import { userStore } from '@/stores/userStore'
+import { authService } from '@/services/authService'
 
 export const socketService = {
   pusher: null as Pusher.Pusher | null,
diff --git a/resources/assets/js/services/uploadService.ts b/resources/assets/js/services/uploadService.ts
index c1862047..9e249c91 100644
--- a/resources/assets/js/services/uploadService.ts
+++ b/resources/assets/js/services/uploadService.ts
@@ -1,9 +1,12 @@
 import axios from 'axios'
 import { without } from 'lodash'
 import { reactive } from 'vue'
-import { http } from '@/services'
-import { albumStore, commonStore, songStore } from '@/stores'
-import { eventBus, logger } from '@/utils'
+import { http } from '@/services/http'
+import { albumStore } from '@/stores/albumStore'
+import { commonStore } from '@/stores/commonStore'
+import { songStore } from '@/stores/songStore'
+import { eventBus } from '@/utils/eventBus'
+import { logger } from '@/utils/logger'
 
 interface UploadResult {
   song: Song
diff --git a/resources/assets/js/services/volumeManager.spec.ts b/resources/assets/js/services/volumeManager.spec.ts
index 58a336c8..fa577f81 100644
--- a/resources/assets/js/services/volumeManager.spec.ts
+++ b/resources/assets/js/services/volumeManager.spec.ts
@@ -1,6 +1,6 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { volumeManager } from '@/services'
+import { volumeManager } from '@/services/volumeManager'
 
 let input: HTMLInputElement
 
diff --git a/resources/assets/js/services/youTubeService.spec.ts b/resources/assets/js/services/youTubeService.spec.ts
index ae295adc..392970ef 100644
--- a/resources/assets/js/services/youTubeService.spec.ts
+++ b/resources/assets/js/services/youTubeService.spec.ts
@@ -1,7 +1,7 @@
-import { eventBus } from '@/utils'
-import factory from '@/__tests__/factory'
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { eventBus } from '@/utils/eventBus'
 import { youTubeService } from './youTubeService'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/services/youTubeService.ts b/resources/assets/js/services/youTubeService.ts
index 36762866..ab98ac6c 100644
--- a/resources/assets/js/services/youTubeService.ts
+++ b/resources/assets/js/services/youTubeService.ts
@@ -1,5 +1,6 @@
-import { cache, http } from '@/services'
-import { eventBus } from '@/utils'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { eventBus } from '@/utils/eventBus'
 
 interface YouTubeSearchResult {
   nextPageToken: string
diff --git a/resources/assets/js/stores/albumStore.spec.ts b/resources/assets/js/stores/albumStore.spec.ts
index e8ad8a98..65ad31f5 100644
--- a/resources/assets/js/stores/albumStore.spec.ts
+++ b/resources/assets/js/stores/albumStore.spec.ts
@@ -1,8 +1,9 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { http } from '@/services'
-import { albumStore, songStore } from '.'
+import { http } from '@/services/http'
+import { songStore } from '@/stores/songStore'
+import { albumStore } from '@/stores/albumStore'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/stores/albumStore.ts b/resources/assets/js/stores/albumStore.ts
index b350f842..78f4310c 100644
--- a/resources/assets/js/stores/albumStore.ts
+++ b/resources/assets/js/stores/albumStore.ts
@@ -1,8 +1,10 @@
 import { reactive } from 'vue'
 import { differenceBy, merge, unionBy } from 'lodash'
-import { cache, http } from '@/services'
-import { arrayify, logger } from '@/utils'
-import { songStore } from '@/stores'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { arrayify } from '@/utils/helpers'
+import { logger } from '@/utils/logger'
+import { songStore } from '@/stores/songStore'
 
 const UNKNOWN_ALBUM_ID = 1
 
diff --git a/resources/assets/js/stores/artistStore.spec.ts b/resources/assets/js/stores/artistStore.spec.ts
index 6b03716b..5733572f 100644
--- a/resources/assets/js/stores/artistStore.spec.ts
+++ b/resources/assets/js/stores/artistStore.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { http } from '@/services'
-import { artistStore } from '.'
+import { http } from '@/services/http'
+import { artistStore } from '@/stores/artistStore'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/stores/artistStore.ts b/resources/assets/js/stores/artistStore.ts
index 062d72d8..42ac7df2 100644
--- a/resources/assets/js/stores/artistStore.ts
+++ b/resources/assets/js/stores/artistStore.ts
@@ -1,7 +1,9 @@
 import { reactive } from 'vue'
 import { differenceBy, unionBy } from 'lodash'
-import { cache, http } from '@/services'
-import { arrayify, logger } from '@/utils'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { arrayify } from '@/utils/helpers'
+import { logger } from '@/utils/logger'
 
 const UNKNOWN_ARTIST_ID = 1
 const VARIOUS_ARTISTS_ID = 2
diff --git a/resources/assets/js/stores/commonStore.ts b/resources/assets/js/stores/commonStore.ts
index 8c6c7312..f58780a9 100644
--- a/resources/assets/js/stores/commonStore.ts
+++ b/resources/assets/js/stores/commonStore.ts
@@ -1,7 +1,13 @@
 import isMobile from 'ismobilejs'
 import { reactive } from 'vue'
-import { http } from '@/services'
-import { playlistFolderStore, playlistStore, preferenceStore, queueStore, settingStore, themeStore, userStore } from '.'
+import { http } from '@/services/http'
+import { playlistFolderStore } from '@/stores/playlistFolderStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { queueStore } from '@/stores/queueStore'
+import { settingStore } from '@/stores/settingStore'
+import { themeStore } from '@/stores/themeStore'
+import { userStore } from '@/stores/userStore'
 
 const initialState = {
   allows_download: false,
diff --git a/resources/assets/js/stores/equalizerStore.ts b/resources/assets/js/stores/equalizerStore.ts
index 5c683fbb..6b7f3bcf 100644
--- a/resources/assets/js/stores/equalizerStore.ts
+++ b/resources/assets/js/stores/equalizerStore.ts
@@ -1,5 +1,5 @@
-import { preferenceStore as preferences } from '@/stores'
-import { equalizerPresets as presets } from '@/config'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
+import { equalizerPresets as presets } from '@/config/audio'
 
 export const equalizerStore = {
   getPresetByName (name: string) {
diff --git a/resources/assets/js/stores/favoriteStore.spec.ts b/resources/assets/js/stores/favoriteStore.spec.ts
index 4287b695..9e1989da 100644
--- a/resources/assets/js/stores/favoriteStore.spec.ts
+++ b/resources/assets/js/stores/favoriteStore.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
-import { favoriteStore } from '.'
+import factory from '@/__tests__/factory'
+import { http } from '@/services/http'
+import { favoriteStore } from '@/stores/favoriteStore'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/stores/favoriteStore.ts b/resources/assets/js/stores/favoriteStore.ts
index df8a72c9..453e50e6 100644
--- a/resources/assets/js/stores/favoriteStore.ts
+++ b/resources/assets/js/stores/favoriteStore.ts
@@ -1,8 +1,8 @@
 import { reactive } from 'vue'
 import { differenceBy, unionBy } from 'lodash'
-import { http } from '@/services'
-import { arrayify } from '@/utils'
-import { songStore } from '@/stores'
+import { http } from '@/services/http'
+import { arrayify } from '@/utils/helpers'
+import { songStore } from '@/stores/songStore'
 
 export const favoriteStore = {
   state: reactive<{ playables: Playable[] }>({
diff --git a/resources/assets/js/stores/genreStore.spec.ts b/resources/assets/js/stores/genreStore.spec.ts
index 0d2eeb97..4612c316 100644
--- a/resources/assets/js/stores/genreStore.spec.ts
+++ b/resources/assets/js/stores/genreStore.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
+import { http } from '@/services/http'
 import { genreStore } from '@/stores/genreStore'
 
 new class extends UnitTestCase {
diff --git a/resources/assets/js/stores/genreStore.ts b/resources/assets/js/stores/genreStore.ts
index 8c743144..6642cc4d 100644
--- a/resources/assets/js/stores/genreStore.ts
+++ b/resources/assets/js/stores/genreStore.ts
@@ -1,4 +1,4 @@
-import { http } from '@/services'
+import { http } from '@/services/http'
 
 export const genreStore = {
   fetchAll: async () => await http.get<Genre[]>('genres'),
diff --git a/resources/assets/js/stores/index.ts b/resources/assets/js/stores/index.ts
deleted file mode 100644
index e6dfe102..00000000
--- a/resources/assets/js/stores/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export * from './albumStore'
-export * from './artistStore'
-export * from './commonStore'
-export * from './equalizerStore'
-export * from './favoriteStore'
-export * from './genreStore'
-export * from './overviewStore'
-export * from './playlistFolderStore'
-export * from './playlistStore'
-export * from './podcastStore'
-export * from './preferenceStore'
-export * from './queueStore'
-export * from './recentlyPlayedStore'
-export * from './searchStore'
-export * from './settingStore'
-export * from './songStore'
-export * from './themeStore'
-export * from './userStore'
-export * from './visualizerStore'
diff --git a/resources/assets/js/stores/overviewStore.spec.ts b/resources/assets/js/stores/overviewStore.spec.ts
index e012adc0..1a64d730 100644
--- a/resources/assets/js/stores/overviewStore.spec.ts
+++ b/resources/assets/js/stores/overviewStore.spec.ts
@@ -1,8 +1,12 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
-import { albumStore, artistStore, overviewStore, recentlyPlayedStore, songStore } from '.'
+import factory from '@/__tests__/factory'
+import { http } from '@/services/http'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { overviewStore } from '@/stores/overviewStore'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { songStore } from '@/stores/songStore'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/stores/overviewStore.ts b/resources/assets/js/stores/overviewStore.ts
index fb7d52c8..6c8b9c9e 100644
--- a/resources/assets/js/stores/overviewStore.ts
+++ b/resources/assets/js/stores/overviewStore.ts
@@ -1,10 +1,10 @@
 import { reactive } from 'vue'
-import { http } from '@/services'
+import { http } from '@/services/http'
 import { songStore } from '@/stores/songStore'
 import { albumStore } from '@/stores/albumStore'
 import { artistStore } from '@/stores/artistStore'
-import { recentlyPlayedStore } from '@/stores'
-import { isSong } from '@/utils'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { isSong } from '@/utils/typeGuards'
 
 export const overviewStore = {
   state: reactive({
diff --git a/resources/assets/js/stores/playlistFolderStore.ts b/resources/assets/js/stores/playlistFolderStore.ts
index eecf6bcf..ad01fc1d 100644
--- a/resources/assets/js/stores/playlistFolderStore.ts
+++ b/resources/assets/js/stores/playlistFolderStore.ts
@@ -1,6 +1,6 @@
 import type { UnwrapNestedRefs } from 'vue'
 import { reactive } from 'vue'
-import { http } from '@/services'
+import { http } from '@/services/http'
 import { differenceBy, orderBy } from 'lodash'
 import { playlistStore } from '@/stores/playlistStore'
 
diff --git a/resources/assets/js/stores/playlistStore.spec.ts b/resources/assets/js/stores/playlistStore.spec.ts
index 6fe491eb..d431fc8b 100644
--- a/resources/assets/js/stores/playlistStore.spec.ts
+++ b/resources/assets/js/stores/playlistStore.spec.ts
@@ -1,8 +1,9 @@
+import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { expect, it } from 'vitest'
-import { cache, http } from '@/services'
-import { playlistStore } from '.'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { playlistStore } from '@/stores/playlistStore'
 
 const ruleGroups: SmartPlaylistRuleGroup[] = [
   {
diff --git a/resources/assets/js/stores/playlistStore.ts b/resources/assets/js/stores/playlistStore.ts
index 7db22216..5ea5ed9e 100644
--- a/resources/assets/js/stores/playlistStore.ts
+++ b/resources/assets/js/stores/playlistStore.ts
@@ -1,7 +1,10 @@
 import { differenceBy, orderBy } from 'lodash'
 import { reactive } from 'vue'
-import { arrayify, logger, moveItemsInList, uuid } from '@/utils'
-import { cache, http } from '@/services'
+import { arrayify, moveItemsInList } from '@/utils/helpers'
+import { logger } from '@/utils/logger'
+import { uuid } from '@/utils/crypto'
+import { http } from '@/services/http'
+import { cache } from '@/services/cache'
 import models from '@/config/smart-playlist/models'
 import operators from '@/config/smart-playlist/operators'
 import { songStore } from '@/stores/songStore'
diff --git a/resources/assets/js/stores/podcastStore.ts b/resources/assets/js/stores/podcastStore.ts
index 60a48bb7..b91ead14 100644
--- a/resources/assets/js/stores/podcastStore.ts
+++ b/resources/assets/js/stores/podcastStore.ts
@@ -1,5 +1,5 @@
 import { reactive } from 'vue'
-import { http } from '@/services'
+import { http } from '@/services/http'
 
 export const podcastStore = {
   state: reactive({
diff --git a/resources/assets/js/stores/preferenceStore.spec.ts b/resources/assets/js/stores/preferenceStore.spec.ts
index 6f5a2bed..a2f6db16 100644
--- a/resources/assets/js/stores/preferenceStore.spec.ts
+++ b/resources/assets/js/stores/preferenceStore.spec.ts
@@ -1,8 +1,8 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
-import { http } from '@/services'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { defaultPreferences, preferenceStore } from '.'
+import factory from '@/__tests__/factory'
+import { http } from '@/services/http'
+import { defaultPreferences, preferenceStore } from '@/stores/preferenceStore'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/stores/preferenceStore.ts b/resources/assets/js/stores/preferenceStore.ts
index 8199b8d8..fa64ff50 100644
--- a/resources/assets/js/stores/preferenceStore.ts
+++ b/resources/assets/js/stores/preferenceStore.ts
@@ -1,5 +1,5 @@
 import { reactive, ref } from 'vue'
-import { http } from '@/services'
+import { http } from '@/services/http'
 
 export const defaultPreferences: UserPreferences = {
   volume: 7,
diff --git a/resources/assets/js/stores/queueStore.spec.ts b/resources/assets/js/stores/queueStore.spec.ts
index 643578be..4c565305 100644
--- a/resources/assets/js/stores/queueStore.spec.ts
+++ b/resources/assets/js/stores/queueStore.spec.ts
@@ -1,9 +1,10 @@
-import factory from '@/__tests__/factory'
 import { reactive } from 'vue'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { expect, it } from 'vitest'
-import { http } from '@/services'
-import { queueStore, songStore } from '.'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import factory from '@/__tests__/factory'
+import { http } from '@/services/http'
+import { songStore } from '@/stores/songStore'
+import { queueStore } from '@/stores/queueStore'
 
 let playables: Playable[]
 
diff --git a/resources/assets/js/stores/queueStore.ts b/resources/assets/js/stores/queueStore.ts
index ce5af2eb..4daca860 100644
--- a/resources/assets/js/stores/queueStore.ts
+++ b/resources/assets/js/stores/queueStore.ts
@@ -1,8 +1,10 @@
 import { reactive } from 'vue'
 import { differenceBy, unionBy } from 'lodash'
-import { arrayify, isSong, logger, moveItemsInList } from '@/utils'
-import { http } from '@/services'
-import { songStore } from '@/stores'
+import { arrayify, moveItemsInList } from '@/utils/helpers'
+import { logger } from '@/utils/logger'
+import { isSong } from '@/utils/typeGuards'
+import { http } from '@/services/http'
+import { songStore } from '@/stores/songStore'
 
 export const queueStore = {
   state: reactive<{ playables: Playable[] }>({
diff --git a/resources/assets/js/stores/recentlyPlayedStore.spec.ts b/resources/assets/js/stores/recentlyPlayedStore.spec.ts
index cadda415..ee5b975a 100644
--- a/resources/assets/js/stores/recentlyPlayedStore.spec.ts
+++ b/resources/assets/js/stores/recentlyPlayedStore.spec.ts
@@ -1,8 +1,9 @@
 import { expect, it } from 'vitest'
-import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
-import { recentlyPlayedStore, songStore } from '.'
+import factory from '@/__tests__/factory'
+import { http } from '@/services/http'
+import { recentlyPlayedStore } from '@/stores/recentlyPlayedStore'
+import { songStore } from '@/stores/songStore'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/stores/recentlyPlayedStore.ts b/resources/assets/js/stores/recentlyPlayedStore.ts
index 1015965f..cc326550 100644
--- a/resources/assets/js/stores/recentlyPlayedStore.ts
+++ b/resources/assets/js/stores/recentlyPlayedStore.ts
@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
-import { http } from '@/services'
 import { remove } from 'lodash'
-import { songStore } from '@/stores'
+import { http } from '@/services/http'
+import { songStore } from '@/stores/songStore'
 
 const EXCERPT_COUNT = 7
 
diff --git a/resources/assets/js/stores/searchStore.spec.ts b/resources/assets/js/stores/searchStore.spec.ts
index 3ebe8947..69713aef 100644
--- a/resources/assets/js/stores/searchStore.spec.ts
+++ b/resources/assets/js/stores/searchStore.spec.ts
@@ -1,10 +1,13 @@
 import { expect, it } from 'vitest'
-import UnitTestCase from '@/__tests__/UnitTestCase'
 import { reactive } from 'vue'
+import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { http } from '@/services'
-import type { ExcerptSearchResult } from '.'
-import { albumStore, artistStore, searchStore, songStore } from '.'
+import { http } from '@/services/http'
+import type { ExcerptSearchResult } from '@/stores/searchStore'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { searchStore } from '@/stores/searchStore'
+import { songStore } from '@/stores/songStore'
 
 new class extends UnitTestCase {
   protected beforeEach () {
diff --git a/resources/assets/js/stores/searchStore.ts b/resources/assets/js/stores/searchStore.ts
index fb9fca54..980bf86f 100644
--- a/resources/assets/js/stores/searchStore.ts
+++ b/resources/assets/js/stores/searchStore.ts
@@ -1,6 +1,8 @@
 import { reactive } from 'vue'
-import { http } from '@/services'
-import { albumStore, artistStore, songStore } from '@/stores'
+import { http } from '@/services/http'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { songStore } from '@/stores/songStore'
 
 interface ExcerptState {
   playables: Playable[]
diff --git a/resources/assets/js/stores/settingStore.spec.ts b/resources/assets/js/stores/settingStore.spec.ts
index 2175a643..f3672011 100644
--- a/resources/assets/js/stores/settingStore.spec.ts
+++ b/resources/assets/js/stores/settingStore.spec.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { http } from '@/services'
-import { settingStore } from '.'
+import { http } from '@/services/http'
+import { settingStore } from '@/stores/settingStore'
 
 new class extends UnitTestCase {
   protected test () {
diff --git a/resources/assets/js/stores/settingStore.ts b/resources/assets/js/stores/settingStore.ts
index 11e428f8..7cd2bfbf 100644
--- a/resources/assets/js/stores/settingStore.ts
+++ b/resources/assets/js/stores/settingStore.ts
@@ -1,6 +1,6 @@
 import { reactive } from 'vue'
-import { http } from '@/services'
 import { merge } from 'lodash'
+import { http } from '@/services/http'
 
 export const settingStore = {
   state: reactive<Settings>({
diff --git a/resources/assets/js/stores/songStore.spec.ts b/resources/assets/js/stores/songStore.spec.ts
index 106534f8..94d32d95 100644
--- a/resources/assets/js/stores/songStore.spec.ts
+++ b/resources/assets/js/stores/songStore.spec.ts
@@ -1,21 +1,19 @@
 import { reactive } from 'vue'
+import { expect, it } from 'vitest'
 import isMobile from 'ismobilejs'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
-import { authService, cache, http } from '@/services'
-import type {
-  SongUpdateResult,
-} from '.'
-import {
-  albumStore,
-  artistStore,
-  commonStore,
-  overviewStore,
-  playlistStore,
-  preferenceStore,
-  songStore,
-} from '.'
+import { authService } from '@/services/authService'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import type { SongUpdateResult } from '@/stores/songStore'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { commonStore } from '@/stores/commonStore'
+import { overviewStore } from '@/stores/overviewStore'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { playlistStore } from '@/stores/playlistStore'
+import { songStore } from '@/stores/songStore'
 
 new class extends UnitTestCase {
   protected afterEach () {
diff --git a/resources/assets/js/stores/songStore.ts b/resources/assets/js/stores/songStore.ts
index bc94e384..0324534e 100644
--- a/resources/assets/js/stores/songStore.ts
+++ b/resources/assets/js/stores/songStore.ts
@@ -2,9 +2,19 @@ import isMobile from 'ismobilejs'
 import slugify from 'slugify'
 import { merge, orderBy, sumBy, take, unionBy, uniqBy } from 'lodash'
 import { reactive, watch } from 'vue'
-import { arrayify, isSong, logger, secondsToHumanReadable, use } from '@/utils'
-import { authService, cache, http } from '@/services'
-import { albumStore, artistStore, commonStore, overviewStore, playlistStore, preferenceStore } from '@/stores'
+import { arrayify, use } from '@/utils/helpers'
+import { isSong } from '@/utils/typeGuards'
+import { logger } from '@/utils/logger'
+import { secondsToHumanReadable } from '@/utils/formatters'
+import { authService } from '@/services/authService'
+import { cache } from '@/services/cache'
+import { http } from '@/services/http'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { commonStore } from '@/stores/commonStore'
+import { albumStore } from '@/stores/albumStore'
+import { artistStore } from '@/stores/artistStore'
+import { overviewStore } from '@/stores/overviewStore'
+import { playlistStore } from '@/stores/playlistStore'
 
 export interface SongUpdateData {
   title?: string
diff --git a/resources/assets/js/stores/themeStore.spec.ts b/resources/assets/js/stores/themeStore.spec.ts
index 421170b2..08fbad8f 100644
--- a/resources/assets/js/stores/themeStore.spec.ts
+++ b/resources/assets/js/stores/themeStore.spec.ts
@@ -1,6 +1,7 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { preferenceStore, themeStore } from '.'
+import { preferenceStore } from '@/stores/preferenceStore'
+import { themeStore } from '@/stores/themeStore'
 
 const testTheme: Theme = {
   id: 'test',
diff --git a/resources/assets/js/stores/themeStore.ts b/resources/assets/js/stores/themeStore.ts
index 544a5e07..e08d5b17 100644
--- a/resources/assets/js/stores/themeStore.ts
+++ b/resources/assets/js/stores/themeStore.ts
@@ -1,6 +1,6 @@
 import { clone } from 'lodash'
 import { reactive } from 'vue'
-import { preferenceStore as preferences } from '@/stores'
+import { preferenceStore as preferences } from '@/stores/preferenceStore'
 import themes from '@/themes'
 
 export const themeStore = {
diff --git a/resources/assets/js/stores/userStore.spec.ts b/resources/assets/js/stores/userStore.spec.ts
index 1b76fc48..8aafb7d0 100644
--- a/resources/assets/js/stores/userStore.spec.ts
+++ b/resources/assets/js/stores/userStore.spec.ts
@@ -1,9 +1,9 @@
 import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import factory from '@/__tests__/factory'
-import { http } from '@/services'
-import type { CreateUserData, UpdateUserData } from '.'
-import { userStore } from '.'
+import { http } from '@/services/http'
+import type { CreateUserData, UpdateUserData } from '@/stores/userStore'
+import { userStore } from '@/stores/userStore'
 
 const currentUser = factory('user', {
   id: 1,
diff --git a/resources/assets/js/stores/userStore.ts b/resources/assets/js/stores/userStore.ts
index 9b5a14e0..ab580b3b 100644
--- a/resources/assets/js/stores/userStore.ts
+++ b/resources/assets/js/stores/userStore.ts
@@ -1,7 +1,7 @@
-import { differenceBy, merge } from 'lodash'
-import { http } from '@/services'
 import { reactive } from 'vue'
-import { arrayify } from '@/utils'
+import { differenceBy, merge } from 'lodash'
+import { http } from '@/services/http'
+import { arrayify } from '@/utils/helpers'
 
 interface UserFormData {
   name: string
diff --git a/resources/assets/js/stores/visualizerStore.ts b/resources/assets/js/stores/visualizerStore.ts
index 249ecf31..2b65fe41 100644
--- a/resources/assets/js/stores/visualizerStore.ts
+++ b/resources/assets/js/stores/visualizerStore.ts
@@ -1,4 +1,4 @@
-import { visualizers } from '@/config'
+import { visualizers } from '@/config/visualizers'
 
 export const visualizerStore = {
   get all () {
diff --git a/resources/assets/js/utils/common.ts b/resources/assets/js/utils/common.ts
deleted file mode 100644
index 8220085a..00000000
--- a/resources/assets/js/utils/common.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import select from 'select'
-import { isSong, logger, noop } from '@/utils'
-import defaultCover from '@/../img/covers/default.svg'
-
-export { defaultCover }
-
-/**
- * Force reloading window regardless of "Confirm before reload" setting.
- * This is handy for certain cases, for example Last.fm connect/disconnect.
- */
-export const forceReloadWindow = (): void => {
-  if (process.env.NODE_ENV === 'test') {
-    return
-  }
-
-  window.onbeforeunload = noop
-  window.location.reload()
-}
-
-export const copyText = async (text: string) => {
-  try {
-    await navigator.clipboard.writeText(text)
-  } catch (error: unknown) {
-    logger.warn('Failed to copy text to clipboard', error)
-
-    let copyArea = document.querySelector<HTMLTextAreaElement>('#copyArea')
-
-    if (!copyArea) {
-      copyArea = document.createElement('textarea')
-      copyArea.id = 'copyArea'
-      document.body.appendChild(copyArea)
-    }
-
-    copyArea.style.top = `${window.scrollY || document.documentElement.scrollTop}px`
-    copyArea.value = text
-    select(copyArea)
-    document.execCommand('copy')
-  }
-}
-
-export const getPlayableProp = <T>(playable: Playable, songKey: keyof Song, episodeKey: keyof Episode): T => {
-  return isSong(playable) ? playable[songKey] : playable[episodeKey]
-}
diff --git a/resources/assets/js/utils/eventBus.ts b/resources/assets/js/utils/eventBus.ts
index 634eb0a3..fe7c4463 100644
--- a/resources/assets/js/utils/eventBus.ts
+++ b/resources/assets/js/utils/eventBus.ts
@@ -1,5 +1,5 @@
 import { TypedEmitter } from 'tiny-typed-emitter'
-import type { Events } from '@/config'
+import type { Events } from '@/config/events'
 
 const eventBus = new TypedEmitter<Events>()
 eventBus.setMaxListeners(100)
diff --git a/resources/assets/js/utils/formatters.spec.ts b/resources/assets/js/utils/formatters.spec.ts
index 3e49cc33..1557adbd 100644
--- a/resources/assets/js/utils/formatters.spec.ts
+++ b/resources/assets/js/utils/formatters.spec.ts
@@ -1,8 +1,6 @@
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { expect, it } from 'vitest'
-import type {
-  ServerValidationError,
-} from './formatters'
+import type { ServerValidationError } from './formatters'
 import {
   br2nl,
   parseValidationError,
diff --git a/resources/assets/js/utils/helpers.ts b/resources/assets/js/utils/helpers.ts
index 1eaa05e6..e911bbbd 100644
--- a/resources/assets/js/utils/helpers.ts
+++ b/resources/assets/js/utils/helpers.ts
@@ -1,8 +1,11 @@
+import select from 'select'
 import { isObject, without } from 'lodash'
 import type { InjectionKey } from 'vue'
 import { inject, isRef, provide, readonly, shallowReadonly } from 'vue'
 import type { ReadonlyInjectionKey } from '@/symbols'
-import { logger, md5 } from '@/utils'
+import { logger } from '@/utils/logger'
+import { md5 } from '@/utils/crypto'
+import { isSong } from '@/utils/typeGuards'
 
 export const use = <T> (value: T | undefined | null, cb: (arg: T) => void) => {
   if (typeof value === 'undefined' || value === null) {
@@ -41,8 +44,6 @@ export const requireInjection = <T> (key: InjectionKey<T>, defaultValue?: T) =>
   return value
 }
 
-export const dbToGain = (db: number) => 10 ** (db / 20) || 0
-
 export const moveItemsInList = <T> (list: T[], items: T | T[], target: T, type: MoveType) => {
   if (!list.includes(target)) {
     throw new Error('Target not found in list')
@@ -75,3 +76,40 @@ export const openPopup = (url: string, name: string, width: number, height: numb
   const x = parent.top!.outerWidth / 2 + parent.top!.screenX - (width / 2)
   return parent.open(url, name, `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${y}, left=${x}`)
 }
+/**
+ * Force reloading window regardless of "Confirm before reload" setting.
+ * This is handy for certain cases, for example Last.fm connect/disconnect.
+ */
+export const forceReloadWindow = (): void => {
+  if (process.env.NODE_ENV === 'test') {
+    return
+  }
+
+  window.onbeforeunload = noop
+  window.location.reload()
+}
+
+export const copyText = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch (error: unknown) {
+    logger.warn('Failed to copy text to clipboard using navigator.clipboard.writeText()', error)
+
+    let copyArea = document.querySelector<HTMLTextAreaElement>('#copyArea')
+
+    if (!copyArea) {
+      copyArea = document.createElement('textarea')
+      copyArea.id = 'copyArea'
+      document.body.appendChild(copyArea)
+    }
+
+    copyArea.style.top = `${window.scrollY || document.documentElement.scrollTop}px`
+    copyArea.value = text
+    select(copyArea)
+    document.execCommand('copy')
+  }
+}
+
+export const getPlayableProp = <T> (playable: Playable, songKey: keyof Song, episodeKey: keyof Episode): T => {
+  return isSong(playable) ? playable[songKey] : playable[episodeKey]
+}
diff --git a/resources/assets/js/utils/index.ts b/resources/assets/js/utils/index.ts
deleted file mode 100644
index b748a339..00000000
--- a/resources/assets/js/utils/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from './$'
-export * from './common'
-export * from './crypto'
-export * from './directoryReader'
-export * from './eventBus'
-export * from './floatingUi'
-export * from './formatters'
-export * from './helpers'
-export * from './logger'
-export * from './supports'
-export * from './typeGuards'
diff --git a/resources/assets/js/visualizers/asteroid/scripts/AudioAnalyzer.ts b/resources/assets/js/visualizers/asteroid/scripts/AudioAnalyzer.ts
index 706b0824..f3fcc919 100644
--- a/resources/assets/js/visualizers/asteroid/scripts/AudioAnalyzer.ts
+++ b/resources/assets/js/visualizers/asteroid/scripts/AudioAnalyzer.ts
@@ -1,4 +1,4 @@
-import { audioService } from '@/services'
+import { audioService } from '@/services/audioService'
 
 export class AudioAnalyzer {
   private bass = 0.0
diff --git a/resources/assets/js/visualizers/default.ts b/resources/assets/js/visualizers/default.ts
index 762af9e0..1445dcad 100644
--- a/resources/assets/js/visualizers/default.ts
+++ b/resources/assets/js/visualizers/default.ts
@@ -1,7 +1,7 @@
 import Sketch from 'sketch-js'
-import { audioService } from '@/services'
 import { random, sample } from 'lodash'
-import { noop } from '@/utils'
+import { audioService } from '@/services/audioService'
+import { noop } from '@/utils/helpers'
 
 const NUM_PARTICLES = 128
 const NUM_BANDS = 128
diff --git a/resources/assets/js/visualizers/fluid-cube/index.ts b/resources/assets/js/visualizers/fluid-cube/index.ts
index 529a5cf9..5c4e0d19 100644
--- a/resources/assets/js/visualizers/fluid-cube/index.ts
+++ b/resources/assets/js/visualizers/fluid-cube/index.ts
@@ -1,5 +1,5 @@
-import { audioService } from '@/services'
-import { logger } from '@/utils'
+import { audioService } from '@/services/audioService'
+import { logger } from '@/utils/logger'
 import shaders from './shaders'
 
 export const init = async (container: HTMLElement) => {
diff --git a/resources/assets/js/visualizers/plane-mesh/index.ts b/resources/assets/js/visualizers/plane-mesh/index.ts
index 8c8a0205..a1bb41aa 100644
--- a/resources/assets/js/visualizers/plane-mesh/index.ts
+++ b/resources/assets/js/visualizers/plane-mesh/index.ts
@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import shaders from './shaders'
 import planeMeshParameters from './planeMeshParameters'
-import { audioService } from '@/services'
+import { audioService } from '@/services/audioService'
 
 export const init = (container: HTMLElement) => {
   const uniforms = {
diff --git a/resources/assets/js/visualizers/waveform/index.ts b/resources/assets/js/visualizers/waveform/index.ts
index f93d0718..084b601d 100644
--- a/resources/assets/js/visualizers/waveform/index.ts
+++ b/resources/assets/js/visualizers/waveform/index.ts
@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import SceneInit from './lib/SceneInit'
 import shaders from './lib/shaders'
-import { audioService } from '@/services'
+import { audioService } from '@/services/audioService'
 
 export const init = (container: HTMLElement) => {
   const sceneInit = new SceneInit(container)
diff --git a/tests/Traits/CreatesApplication.php b/tests/Traits/CreatesApplication.php
index 20c68ca0..10d03812 100644
--- a/tests/Traits/CreatesApplication.php
+++ b/tests/Traits/CreatesApplication.php
@@ -29,7 +29,7 @@ trait CreatesApplication
 
         $artisan->bootstrap();
 
-        // Unless the DB is stored in memory, we need to migrate the DB only once for the whole test suite.
+        // We need to migrate the DB only once for the whole test suite.
         if (!TestCase::$migrated || DB::connection()->getDatabaseName() === ':memory:') {
             $artisan->call('migrate');