diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1d7a71d7..a198221d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "editor.formatOnSave": true, 
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always",
-    "source.organizeImports": "always"
+    "source.organizeImports": "never"
   },
   "[javascript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index 2bd1d5d6..1faff6b9 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -30,7 +30,7 @@ module.exports = {
     'plugin:optimize-regex/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:promise/recommended',
-    'plugin:import/recommended',
+    'plugin:import/errors',
     'plugin:import/typescript',
     'plugin:vue/vue3-recommended',
     'plugin:sonarjs/recommended',
@@ -146,8 +146,10 @@ module.exports = {
         bundledDependencies: false
       }
     ],
+    'import/order': 'error',
+    'import/no-cycle': 'error',
     'import/no-nodejs-modules': 'error',
-    'import/no-duplicates': ['error', {'prefer-inline': true}],
+    'import/no-duplicates': ['error', { 'prefer-inline' : true }],
     'jsdoc/require-hyphen-before-param-description': 'error',
     'jsdoc/require-description': 'error',
     'jsdoc/no-types': 'error',
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 883e9643..ebe6c507 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -35,12 +35,12 @@
 </template>
 
 <script setup lang="ts">
-import DefaultLayout from '@/layouts/default.vue';
-import FullPageLayout from '@/layouts/fullpage.vue';
-import ServerLayout from '@/layouts/server.vue';
 import { whenever } from '@vueuse/core';
 import { ref, type Component as VueComponent } from 'vue';
 import type { RouteMeta } from 'vue-router/auto';
+import DefaultLayout from '@/layouts/default.vue';
+import FullPageLayout from '@/layouts/fullpage.vue';
+import ServerLayout from '@/layouts/server.vue';
 
 const apploaded = ref(false);
 
diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
index fa6b0add..c1c8ab85 100644
--- a/frontend/src/components/Buttons/FilterButton.vue
+++ b/frontend/src/components/Buttons/FilterButton.vue
@@ -168,12 +168,12 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import { type BaseItemDto, ItemFilter } from '@jellyfin/sdk/lib/generated-client';
 import { getFilterApi } from '@jellyfin/sdk/lib/utils/api/filter-api';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 export type FeatureFilters =
   | 'HasSubtitles'
diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
index 8130ddce..deed4ba5 100644
--- a/frontend/src/components/Buttons/LikeButton.vue
+++ b/frontend/src/components/Buttons/LikeButton.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script setup lang="ts">
-import { useApi } from '@/composables/apis';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import IMdiHeart from 'virtual:icons/mdi/heart';
 import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
+import { useApi } from '@/composables/apis';
 
 const props = withDefaults(
   defineProps<{ item: BaseItemDto; size?: string }>(),
diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
index d97b0aca..7a2a503b 100644
--- a/frontend/src/components/Buttons/MarkPlayedButton.vue
+++ b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script setup lang="ts">
-import { useApi } from '@/composables/apis';
-import { canMarkWatched } from '@/utils/items';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed, ref } from 'vue';
+import { canMarkWatched } from '@/utils/items';
+import { useApi } from '@/composables/apis';
 
 const props = defineProps<{
   item: BaseItemDto;
diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
index 43ea167d..f83b8196 100644
--- a/frontend/src/components/Buttons/Playback/PlayButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -40,11 +40,11 @@
 </template>
 
 <script setup lang="ts">
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { ref } from 'vue';
 import { playbackManager } from '@/store/playbackManager';
 import { canPlay, canResume } from '@/utils/items';
 import { ticksToMs } from '@/utils/time';
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { ref } from 'vue';
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
index cb2eb2a9..9b118211 100644
--- a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script setup lang="ts">
-import { PlaybackStatus, playbackManager } from '@/store/playbackManager';
 import IMdiExclamation from 'virtual:icons/mdi/exclamation';
 import IMdiPauseCircleOutline from 'virtual:icons/mdi/pause-circle-outline';
 import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
 import { computed } from 'vue';
+import { PlaybackStatus, playbackManager } from '@/store/playbackManager';
 
 defineProps<{ size?: string }>();
 
diff --git a/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue b/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
index 3ba3869f..ce187d1e 100644
--- a/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
+++ b/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
@@ -87,9 +87,9 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { playbackManager } from '@/store/playbackManager';
 import { playerElement } from '@/store/playerElement';
-import { computed } from 'vue';
 
 const menuModel = defineModel<boolean>();
 
diff --git a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
index b46906a9..3180ec86 100644
--- a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
+++ b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playbackManager';
 import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
+import { playbackManager } from '@/store/playbackManager';
 
 defineProps<{ size?: string }>();
 </script>
diff --git a/frontend/src/components/Buttons/Playback/RepeatButton.vue b/frontend/src/components/Buttons/Playback/RepeatButton.vue
index 0e2cf096..e7bbaa84 100644
--- a/frontend/src/components/Buttons/Playback/RepeatButton.vue
+++ b/frontend/src/components/Buttons/Playback/RepeatButton.vue
@@ -11,10 +11,10 @@
 </template>
 
 <script setup lang="ts">
-import { RepeatMode, playbackManager } from '@/store/playbackManager';
 import IMdiRepeat from 'virtual:icons/mdi/repeat';
 import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
 import { computed } from 'vue';
+import { RepeatMode, playbackManager } from '@/store/playbackManager';
 
 defineProps<{ size?: string }>();
 
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
index 5529fd90..59d7538e 100644
--- a/frontend/src/components/Buttons/QueueButton.vue
+++ b/frontend/src/components/Buttons/QueueButton.vue
@@ -71,12 +71,12 @@
 </template>
 
 <script setup lang="ts">
-import { InitMode, playbackManager } from '@/store/playbackManager';
-import { getTotalEndsAtTime } from '@/utils/time';
 import IMdiPlaylistMusic from 'virtual:icons/mdi/playlist-music';
 import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { getTotalEndsAtTime } from '@/utils/time';
+import { InitMode, playbackManager } from '@/store/playbackManager';
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
index be9377d3..ae03e238 100644
--- a/frontend/src/components/Buttons/SubtitleSelectionButton.vue
+++ b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -37,11 +37,11 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playbackManager';
 import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { playbackManager } from '@/store/playbackManager';
 
 const menuModel = defineModel<boolean>();
 
diff --git a/frontend/src/components/Forms/AddServerForm.vue b/frontend/src/components/Forms/AddServerForm.vue
index d2d27dc3..29f88b33 100644
--- a/frontend/src/components/Forms/AddServerForm.vue
+++ b/frontend/src/components/Forms/AddServerForm.vue
@@ -43,10 +43,10 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
 import { ref, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
 
 const router = useRouter();
 const i18n = useI18n();
diff --git a/frontend/src/components/Forms/LoginForm.vue b/frontend/src/components/Forms/LoginForm.vue
index a7655abd..096c4a8e 100644
--- a/frontend/src/components/Forms/LoginForm.vue
+++ b/frontend/src/components/Forms/LoginForm.vue
@@ -66,8 +66,6 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
-import { fetchIndexPage } from '@/utils/items';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { isEmpty } from 'lodash-es';
 import IconEye from 'virtual:icons/mdi/eye';
@@ -75,6 +73,8 @@ import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router/auto';
+import { fetchIndexPage } from '@/utils/items';
+import { remote } from '@/plugins/remote';
 
 const props = defineProps<{ user: UserDto }>();
 
diff --git a/frontend/src/components/Item/Card/Card.vue b/frontend/src/components/Item/Card/Card.vue
index eb9cdd95..fa8335b3 100644
--- a/frontend/src/components/Item/Card/Card.vue
+++ b/frontend/src/components/Item/Card/Card.vue
@@ -81,14 +81,6 @@
 </template>
 
 <script lang="ts">
-import { taskManager } from '@/store/taskManager';
-import {
-  CardShapes,
-  canPlay,
-  getItemDetailsLink,
-  getShapeFromItemType
-} from '@/utils/items';
-import { isNil } from '@/utils/validation';
 import {
   BaseItemKind,
   ImageType,
@@ -97,6 +89,14 @@ import {
 import { useMediaQuery } from '@vueuse/core';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { isNil } from '@/utils/validation';
+import {
+  CardShapes,
+  canPlay,
+  getItemDetailsLink,
+  getShapeFromItemType
+} from '@/utils/items';
+import { taskManager } from '@/store/taskManager';
 
 /**
  * SHARED STATE ACROSS ALL THE COMPONENT INSTANCES
diff --git a/frontend/src/components/Item/Card/ServerCard.vue b/frontend/src/components/Item/Card/ServerCard.vue
index 81ccf807..b2453534 100644
--- a/frontend/src/components/Item/Card/ServerCard.vue
+++ b/frontend/src/components/Item/Card/ServerCard.vue
@@ -41,10 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
-import type { ServerInfo } from '@/plugins/remote/auth/types';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
+import type { ServerInfo } from '@/plugins/remote/auth/types';
 
 const props = defineProps<{ serverInfo: ServerInfo }>();
 
diff --git a/frontend/src/components/Item/Identify/IdentifyDialog.vue b/frontend/src/components/Item/Identify/IdentifyDialog.vue
index f3b3a32e..569e954f 100644
--- a/frontend/src/components/Item/Identify/IdentifyDialog.vue
+++ b/frontend/src/components/Item/Identify/IdentifyDialog.vue
@@ -89,10 +89,6 @@
 </template>
 
 <script setup lang="ts">
-import { useConfirmDialog } from '@/composables/use-confirm-dialog';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
-import { isArray, isStr } from '@/utils/validation';
 import type {
   BaseItemDto,
   RemoteSearchResult
@@ -100,6 +96,10 @@ import type {
 import { getItemLookupApi } from '@jellyfin/sdk/lib/utils/api/item-lookup-api';
 import { computed, ref, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useConfirmDialog } from '@/composables/use-confirm-dialog';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { remote } from '@/plugins/remote';
+import { isArray, isStr } from '@/utils/validation';
 
 interface IdentifyField {
   key: string;
diff --git a/frontend/src/components/Item/Identify/IdentifyResults.vue b/frontend/src/components/Item/Identify/IdentifyResults.vue
index f7daad5d..4b6db6bd 100644
--- a/frontend/src/components/Item/Identify/IdentifyResults.vue
+++ b/frontend/src/components/Item/Identify/IdentifyResults.vue
@@ -48,12 +48,12 @@
 </template>
 
 <script setup lang="ts">
-import { CardShapes, getShapeFromItemType } from '@/utils/items';
 import type {
   BaseItemKind,
   RemoteSearchResult
 } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
+import { CardShapes, getShapeFromItemType } from '@/utils/items';
 
 const props = defineProps<{
   items: RemoteSearchResult[];
diff --git a/frontend/src/components/Item/ItemGrid.vue b/frontend/src/components/Item/ItemGrid.vue
index 8835a0ab..d6c2e409 100644
--- a/frontend/src/components/Item/ItemGrid.vue
+++ b/frontend/src/components/Item/ItemGrid.vue
@@ -54,8 +54,8 @@
 </template>
 
 <script setup lang="ts">
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 
 withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Item/ItemMenu.vue b/frontend/src/components/Item/ItemMenu.vue
index d35e6296..1be9b7ad 100644
--- a/frontend/src/components/Item/ItemMenu.vue
+++ b/frontend/src/components/Item/ItemMenu.vue
@@ -54,23 +54,6 @@
 </template>
 
 <script lang="ts">
-import { useConfirmDialog } from '@/composables/use-confirm-dialog';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
-import { apiStore } from '@/store/api';
-import { playbackManager } from '@/store/playbackManager';
-import { taskManager } from '@/store/taskManager';
-import {
-  canIdentify,
-  canInstantMix,
-  canRefreshMetadata,
-  canResume,
-  getItemDownloadUrl,
-  getItemIdFromSourceIndex,
-  getItemSeasonDownloadMap,
-  getItemSeriesDownloadMap
-} from '@/utils/items';
-import { isStr } from '@/utils/validation';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { useClipboard, useEventListener } from '@vueuse/core';
 import { v4 } from 'uuid';
@@ -91,6 +74,23 @@ import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, getCurrentInstance, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router/auto';
+import { isStr } from '@/utils/validation';
+import {
+  canIdentify,
+  canInstantMix,
+  canRefreshMetadata,
+  canResume,
+  getItemDownloadUrl,
+  getItemIdFromSourceIndex,
+  getItemSeasonDownloadMap,
+  getItemSeriesDownloadMap
+} from '@/utils/items';
+import { taskManager } from '@/store/taskManager';
+import { playbackManager } from '@/store/playbackManager';
+import { apiStore } from '@/store/api';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { useConfirmDialog } from '@/composables/use-confirm-dialog';
 
 type MenuOption = {
   title: string;
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
index 2af54b79..f0d25514 100644
--- a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script setup lang="ts">
-import { isBool } from '@/utils/validation';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import IMdiClose from 'virtual:icons/mdi/close';
 import IMdiHelp from 'virtual:icons/mdi/help';
 import { computed } from 'vue';
+import { isBool } from '@/utils/validation';
 
 const props = defineProps<{
   name: string;
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
index 2be0b47b..8cc515d7 100644
--- a/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
@@ -140,9 +140,6 @@
 </template>
 
 <script setup lang="ts">
-import { getLocaleName } from '@/utils/i18n';
-import { formatBitRate, formatFileSize } from '@/utils/items';
-import { isArray, isNil, isNumber } from '@/utils/validation';
 import type {
   BaseItemDto,
   MediaSourceInfo,
@@ -150,6 +147,9 @@ import type {
 } from '@jellyfin/sdk/lib/generated-client';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { getLocaleName } from '@/utils/i18n';
+import { formatBitRate, formatFileSize } from '@/utils/items';
+import { isArray, isNil, isNumber } from '@/utils/validation';
 
 const props = defineProps<{ item: BaseItemDto; mediaSourceIndex?: number }>();
 
diff --git a/frontend/src/components/Item/Metadata/ImageEditor.vue b/frontend/src/components/Item/Metadata/ImageEditor.vue
index 917ef836..34c8e9d7 100644
--- a/frontend/src/components/Item/Metadata/ImageEditor.vue
+++ b/frontend/src/components/Item/Metadata/ImageEditor.vue
@@ -98,11 +98,6 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
-import {
-  getContainerAspectRatioForImageType,
-  getImageInfo
-} from '@/utils/images';
 import {
   type BaseItemDto,
   type ImageInfo,
@@ -111,6 +106,11 @@ import {
 import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import {
+  getContainerAspectRatioForImageType,
+  getImageInfo
+} from '@/utils/images';
+import { remote } from '@/plugins/remote';
 
 const props = defineProps<{ metadata: BaseItemDto }>();
 
diff --git a/frontend/src/components/Item/Metadata/ImageSearch.vue b/frontend/src/components/Item/Metadata/ImageSearch.vue
index da1d2808..9c944d4e 100644
--- a/frontend/src/components/Item/Metadata/ImageSearch.vue
+++ b/frontend/src/components/Item/Metadata/ImageSearch.vue
@@ -113,9 +113,6 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
-import { getLocaleName } from '@/utils/i18n';
-import { getContainerAspectRatioForImageType } from '@/utils/images';
 import {
   type BaseItemDto,
   type ImageProviderInfo,
@@ -125,6 +122,9 @@ import {
 import { getRemoteImageApi } from '@jellyfin/sdk/lib/utils/api/remote-image-api';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { getContainerAspectRatioForImageType } from '@/utils/images';
+import { getLocaleName } from '@/utils/i18n';
+import { remote } from '@/plugins/remote';
 
 const props = defineProps<{
   metadata: BaseItemDto;
diff --git a/frontend/src/components/Item/Metadata/MetadataEditor.vue b/frontend/src/components/Item/Metadata/MetadataEditor.vue
index 53600c4f..b22b9bdd 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditor.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditor.vue
@@ -213,10 +213,6 @@
 </template>
 
 <script setup lang="ts">
-import { useDateFns } from '@/composables/use-datefns';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
-import { isArray } from '@/utils/validation';
 import {
   ImageType,
   type BaseItemDto,
@@ -231,6 +227,10 @@ import { format, formatISO } from 'date-fns';
 import { pick, set } from 'lodash-es';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { isArray } from '@/utils/validation';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { useDateFns } from '@/composables/use-datefns';
 
 type ContentOption = {
   value: string;
diff --git a/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue b/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
index 90a40fc5..fae7fde2 100644
--- a/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
+++ b/frontend/src/components/Item/Metadata/RefreshMetadataDialog.vue
@@ -54,9 +54,6 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
-import { TaskType, taskManager } from '@/store/taskManager';
 import type {
   BaseItemDto,
   MetadataRefreshMode
@@ -64,6 +61,9 @@ import type {
 import { getItemRefreshApi } from '@jellyfin/sdk/lib/utils/api/item-refresh-api';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { TaskType, taskManager } from '@/store/taskManager';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 interface RefreshMethod {
   title: string;
diff --git a/frontend/src/components/Item/RelatedItems.vue b/frontend/src/components/Item/RelatedItems.vue
index 60aadc35..6e9df30e 100644
--- a/frontend/src/components/Item/RelatedItems.vue
+++ b/frontend/src/components/Item/RelatedItems.vue
@@ -36,9 +36,9 @@
 </template>
 
 <script setup lang="ts">
-import { getItemDetailsLink } from '@/utils/items';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { useI18n } from 'vue-i18n';
+import { getItemDetailsLink } from '@/utils/items';
 
 withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Item/SeasonTabs.vue b/frontend/src/components/Item/SeasonTabs.vue
index a53d9bc8..366a351e 100644
--- a/frontend/src/components/Item/SeasonTabs.vue
+++ b/frontend/src/components/Item/SeasonTabs.vue
@@ -55,12 +55,12 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
-import { getItemDetailsLink } from '@/utils/items';
 import { type BaseItemDto, ItemFields } from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { ref, watch } from 'vue';
+import { getItemDetailsLink } from '@/utils/items';
+import { remote } from '@/plugins/remote';
 
 interface TvShowItem {
   /**
diff --git a/frontend/src/components/Layout/AppBar/AppBar.vue b/frontend/src/components/Layout/AppBar/AppBar.vue
index 3a55da70..c29d45d4 100644
--- a/frontend/src/components/Layout/AppBar/AppBar.vue
+++ b/frontend/src/components/Layout/AppBar/AppBar.vue
@@ -59,10 +59,10 @@
 </template>
 
 <script setup lang="ts">
-import { network, windowScroll } from '@/store';
-import { clientSettings } from '@/store/clientSettings';
 import { computed, inject, type Ref } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { network, windowScroll } from '@/store';
+import { clientSettings } from '@/store/clientSettings';
 
 const route = useRoute();
 const { y } = windowScroll;
diff --git a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
index f7a1d656..46bd549f 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue
@@ -47,9 +47,9 @@
 </template>
 
 <script setup lang="ts">
-import { taskManager, TaskType } from '@/store/taskManager';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { taskManager, TaskType } from '@/store/taskManager';
 
 interface TaskInfo {
   progress: undefined | number;
diff --git a/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue b/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
index 0c5aa5c3..06271bc8 100644
--- a/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
+++ b/frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
@@ -48,13 +48,13 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
 import IMdiCog from 'virtual:icons/mdi/cog';
 import IMdiLogout from 'virtual:icons/mdi/logout';
 import IMdiPencil from 'virtual:icons/mdi/pencil';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
 
 interface MenuItem {
   title: string;
diff --git a/frontend/src/components/Layout/Carousel/Carousel.vue b/frontend/src/components/Layout/Carousel/Carousel.vue
index 77d5d538..3a8fd8cd 100644
--- a/frontend/src/components/Layout/Carousel/Carousel.vue
+++ b/frontend/src/components/Layout/Carousel/Carousel.vue
@@ -40,7 +40,6 @@
 </template>
 
 <script setup lang="ts">
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import type SwiperType from 'swiper';
 import 'swiper/css';
 import 'swiper/css/a11y';
@@ -51,6 +50,7 @@ import 'swiper/css/virtual';
 import { A11y, EffectFade, Keyboard, Parallax, Virtual } from 'swiper/modules';
 import { Swiper } from 'swiper/vue';
 import { ref, shallowRef } from 'vue';
+import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 
 withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue b/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue
index 68df7d9d..d504a8a3 100644
--- a/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue
+++ b/frontend/src/components/Layout/Carousel/CarouselProgressBar.vue
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { computed } from 'vue';
 import { useDisplay } from 'vuetify';
+import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue b/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
index f16f3b1c..76089609 100644
--- a/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
+++ b/frontend/src/components/Layout/Carousel/Item/ItemsCarousel.vue
@@ -60,13 +60,13 @@
 </template>
 
 <script setup lang="ts">
+import { BaseItemKind, ImageType, type BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { SwiperSlide } from 'swiper/vue';
+import { useRoute } from 'vue-router/auto';
 import { useResponsiveClasses } from '@/composables/use-responsive-classes';
 import { apiStore } from '@/store/api';
 import { getBlurhash } from '@/utils/images';
 import { getItemDetailsLink } from '@/utils/items';
-import { BaseItemKind, ImageType, type BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { SwiperSlide } from 'swiper/vue';
-import { useRoute } from 'vue-router/auto';
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
index b0fa39fe..68cf0c24 100644
--- a/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
+++ b/frontend/src/components/Layout/Images/Blurhash/BlurhashCanvas.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import { remote } from '@/plugins/remote';
 import { wrap } from 'comlink';
 import { ref, shallowRef, watch } from 'vue';
 import BlurhashWorker from './BlurhashWorker?worker&inline';
+import { remote } from '@/plugins/remote';
 
 const worker = new BlurhashWorker();
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
diff --git a/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue b/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
index 620e630a..8f9cd951 100644
--- a/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
+++ b/frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue
@@ -55,9 +55,6 @@
 </template>
 
 <script lang="ts">
-import { vuetify } from '@/plugins/vuetify';
-import { getBlurhash, getImageInfo } from '@/utils/images';
-import { getItemIcon } from '@/utils/items';
 import {
   type BaseItemDto,
   type BaseItemPerson,
@@ -65,6 +62,9 @@ import {
 } from '@jellyfin/sdk/lib/generated-client';
 import { refDebounced } from '@vueuse/core';
 import { computed, ref, shallowRef } from 'vue';
+import { vuetify } from '@/plugins/vuetify';
+import { getBlurhash, getImageInfo } from '@/utils/images';
+import { getItemIcon } from '@/utils/items';
 
 /**
  * SHARED STATE ACROSS ALL THE COMPONENT INSTANCES
diff --git a/frontend/src/components/Layout/Images/UserImage.vue b/frontend/src/components/Layout/Images/UserImage.vue
index 8de0f32e..c7bebe5e 100644
--- a/frontend/src/components/Layout/Images/UserImage.vue
+++ b/frontend/src/components/Layout/Images/UserImage.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
+import { remote } from '@/plugins/remote';
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
index 05310485..ede3a27b 100644
--- a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
+++ b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
@@ -37,12 +37,12 @@
 </template>
 
 <script setup lang="ts">
-import type { getLibraryIcon } from '@/utils/items';
 import IMdiHome from 'virtual:icons/mdi/home';
 import { computed, inject, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router/auto';
 import type { RouteNamedMap } from 'vue-router/auto/routes';
+import type { getLibraryIcon } from '@/utils/items';
 
 export interface DrawerItem {
   icon: ReturnType<typeof getLibraryIcon>;
diff --git a/frontend/src/components/Layout/SwiperSection.vue b/frontend/src/components/Layout/SwiperSection.vue
index ceb43176..e86390ab 100644
--- a/frontend/src/components/Layout/SwiperSection.vue
+++ b/frontend/src/components/Layout/SwiperSection.vue
@@ -59,7 +59,6 @@
 </template>
 
 <script setup lang="ts">
-import { CardShapes, getShapeFromItemType } from '@/utils/items';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import 'swiper/css';
 import 'swiper/css/a11y';
@@ -70,6 +69,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import { v4 } from 'uuid';
 import { ref } from 'vue';
 import { useDisplay, useTheme } from 'vuetify';
+import { CardShapes, getShapeFromItemType } from '@/utils/items';
 
 const props = withDefaults(
   defineProps<{
diff --git a/frontend/src/components/Layout/TimeSlider.vue b/frontend/src/components/Layout/TimeSlider.vue
index f7c05f31..59bd7459 100644
--- a/frontend/src/components/Layout/TimeSlider.vue
+++ b/frontend/src/components/Layout/TimeSlider.vue
@@ -20,9 +20,9 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import { playbackManager } from '@/store/playbackManager';
 import { formatTime } from '@/utils/time';
-import { computed, ref } from 'vue';
 
 const currentInput = ref(0);
 const clicked = ref(false);
diff --git a/frontend/src/components/Layout/VirtualGrid/VirtualGrid.vue b/frontend/src/components/Layout/VirtualGrid/VirtualGrid.vue
index e202e6d9..10aa5862 100644
--- a/frontend/src/components/Layout/VirtualGrid/VirtualGrid.vue
+++ b/frontend/src/components/Layout/VirtualGrid/VirtualGrid.vue
@@ -46,8 +46,6 @@
  * - Type support for the data that must be passed to the virtualized component's instances
  * - Improved documentation and comments
  */
-import { vuetify } from '@/plugins/vuetify';
-import { isNil } from '@/utils/validation';
 import {
   refDebounced,
   useEventListener,
@@ -68,6 +66,8 @@ import {
   getResizeMeasurement,
   getVisibleItems
 } from './pipeline';
+import { isNil } from '@/utils/validation';
+import { vuetify } from '@/plugins/vuetify';
 
 /**
  * SHARED STATE ACROSS ALL THE COMPONENT INSTANCES
diff --git a/frontend/src/components/Layout/VolumeSlider.vue b/frontend/src/components/Layout/VolumeSlider.vue
index 9a0ae69f..22da1ec2 100644
--- a/frontend/src/components/Layout/VolumeSlider.vue
+++ b/frontend/src/components/Layout/VolumeSlider.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playbackManager';
 import IMdiVolumeHigh from 'virtual:icons/mdi/volume-high';
 import IMdiVolumeLow from 'virtual:icons/mdi/volume-low';
 import IMdiVolumeMedium from 'virtual:icons/mdi/volume-medium';
 import IMdiVolumeMute from 'virtual:icons/mdi/volume-mute';
 import { computed } from 'vue';
+import { playbackManager } from '@/store/playbackManager';
 
 const sliderValue = computed({
   get() {
diff --git a/frontend/src/components/Playback/DraggableQueue.vue b/frontend/src/components/Playback/DraggableQueue.vue
index 88b4e205..8e4daf38 100644
--- a/frontend/src/components/Playback/DraggableQueue.vue
+++ b/frontend/src/components/Playback/DraggableQueue.vue
@@ -42,11 +42,11 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playbackManager';
-import { isNumber } from '@/utils/validation';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import Sortable from 'sortablejs';
 import { onBeforeUnmount, shallowRef, watch } from 'vue';
+import { isNumber } from '@/utils/validation';
+import { playbackManager } from '@/store/playbackManager';
 
 let sortable: Sortable | undefined;
 const container = shallowRef<HTMLSpanElement>();
diff --git a/frontend/src/components/Playback/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
index e471f975..d310c758 100644
--- a/frontend/src/components/Playback/PiPVideoPlayer.vue
+++ b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -74,10 +74,10 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playbackManager';
-import { playerElement } from '@/store/playerElement';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { onBeforeUnmount, onMounted } from 'vue';
+import { playbackManager } from '@/store/playbackManager';
+import { playerElement } from '@/store/playerElement';
 
 const keys = useMagicKeys();
 
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index cc030491..284c8792 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -27,6 +27,10 @@
 </template>
 
 <script setup lang="ts">
+import Hls, { ErrorTypes, Events, type ErrorData } from 'hls.js';
+import HlsWorkerUrl from 'hls.js/dist/hls.worker.js?url';
+import { computed, nextTick, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useSnackbar } from '@/composables/use-snackbar';
 import {
   mediaElementRef,
@@ -36,10 +40,6 @@ import { playbackManager } from '@/store/playbackManager';
 import { playerElement } from '@/store/playerElement';
 import { getImageInfo } from '@/utils/images';
 import { isNil } from '@/utils/validation';
-import Hls, { ErrorTypes, Events, type ErrorData } from 'hls.js';
-import HlsWorkerUrl from 'hls.js/dist/hls.worker.js?url';
-import { computed, nextTick, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
index 3671e6ab..1a1a0b97 100644
--- a/frontend/src/components/Playback/TrackList.vue
+++ b/frontend/src/components/Playback/TrackList.vue
@@ -116,10 +116,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { playbackManager } from '@/store/playbackManager';
-import { getItemDetailsLink } from '@/utils/items';
-import { formatTicks } from '@/utils/time';
 import {
   SortOrder,
   type BaseItemDto
@@ -127,6 +123,10 @@ import {
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { groupBy } from 'lodash-es';
 import { computed } from 'vue';
+import { useBaseItem } from '@/composables/apis';
+import { playbackManager } from '@/store/playbackManager';
+import { getItemDetailsLink } from '@/utils/items';
+import { formatTicks } from '@/utils/time';
 
 const props = defineProps<{
   item: BaseItemDto
diff --git a/frontend/src/components/Playback/UpNext.vue b/frontend/src/components/Playback/UpNext.vue
index ad4fadc9..98eb822c 100644
--- a/frontend/src/components/Playback/UpNext.vue
+++ b/frontend/src/components/Playback/UpNext.vue
@@ -68,9 +68,9 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import { playbackManager } from '@/store/playbackManager';
 import { getEndsAtTime, getRuntimeTime } from '@/utils/time';
-import { computed, ref, watch } from 'vue';
 
 const emit = defineEmits<{
   change: [isVisible: boolean];
diff --git a/frontend/src/components/Skeletons/SkeletonItemGrid.vue b/frontend/src/components/Skeletons/SkeletonItemGrid.vue
index 0bad406d..df05d53a 100644
--- a/frontend/src/components/Skeletons/SkeletonItemGrid.vue
+++ b/frontend/src/components/Skeletons/SkeletonItemGrid.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script setup lang="ts">
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
-import { CardShapes, getShapeFromItemType } from '@/utils/items';
 import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
+import { useResponsiveClasses } from '@/composables/use-responsive-classes';
+import { CardShapes, getShapeFromItemType } from '@/utils/items';
 
 const props = withDefaults(defineProps<{ viewType?: BaseItemKind }>(), {
   viewType: 'Movie'
diff --git a/frontend/src/components/System/AddApiKey.vue b/frontend/src/components/System/AddApiKey.vue
index 87cf73aa..edc2568f 100644
--- a/frontend/src/components/System/AddApiKey.vue
+++ b/frontend/src/components/System/AddApiKey.vue
@@ -32,12 +32,12 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useDisplay } from 'vuetify';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 defineProps<{ addingNewKey: boolean }>();
 
diff --git a/frontend/src/components/System/LocaleSwitcher.vue b/frontend/src/components/System/LocaleSwitcher.vue
index b2f8a646..073ea296 100644
--- a/frontend/src/components/System/LocaleSwitcher.vue
+++ b/frontend/src/components/System/LocaleSwitcher.vue
@@ -28,9 +28,9 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { clientSettings } from '@/store/clientSettings';
 import { getLocaleNativeName } from '@/utils/i18n';
-import { useI18n } from 'vue-i18n';
 
 defineProps<{
   bottom?: boolean;
diff --git a/frontend/src/components/TransitionView.vue b/frontend/src/components/TransitionView.vue
index 04e76028..e830bc97 100644
--- a/frontend/src/components/TransitionView.vue
+++ b/frontend/src/components/TransitionView.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import { prefersNoMotion } from '@/store';
 import { useRoute, type RouteMeta } from 'vue-router/auto';
+import { prefersNoMotion } from '@/store';
 
 const route = useRoute();
 
diff --git a/frontend/src/components/Wizard/WizardAdminAccount.vue b/frontend/src/components/Wizard/WizardAdminAccount.vue
index b6f092a5..3e2df1b9 100644
--- a/frontend/src/components/Wizard/WizardAdminAccount.vue
+++ b/frontend/src/components/Wizard/WizardAdminAccount.vue
@@ -45,14 +45,14 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import type { StartupUserDto } from '@jellyfin/sdk/lib/generated-client';
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
 import IconEye from 'virtual:icons/mdi/eye';
 import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 const emit = defineEmits<{
   'previous-step': [];
diff --git a/frontend/src/components/Wizard/WizardLanguage.vue b/frontend/src/components/Wizard/WizardLanguage.vue
index 37508d0d..6a064c6a 100644
--- a/frontend/src/components/Wizard/WizardLanguage.vue
+++ b/frontend/src/components/Wizard/WizardLanguage.vue
@@ -21,9 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
-import { SomeItemSelectedRule } from '@/utils/validation';
 import type {
   LocalizationOption,
   StartupConfigurationDto
@@ -32,6 +29,9 @@ import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { SomeItemSelectedRule } from '@/utils/validation';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 const emit = defineEmits<{
   'step-complete': [];
diff --git a/frontend/src/components/Wizard/WizardMetadata.vue b/frontend/src/components/Wizard/WizardMetadata.vue
index 12d98dcd..92dfc868 100644
--- a/frontend/src/components/Wizard/WizardMetadata.vue
+++ b/frontend/src/components/Wizard/WizardMetadata.vue
@@ -36,9 +36,6 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
-import { SomeItemSelectedRule } from '@/utils/validation';
 import type {
   CountryInfo,
   CultureDto,
@@ -48,6 +45,9 @@ import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { SomeItemSelectedRule } from '@/utils/validation';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 const emit = defineEmits<{
   'step-complete': [];
diff --git a/frontend/src/components/Wizard/WizardRemoteAccess.vue b/frontend/src/components/Wizard/WizardRemoteAccess.vue
index 4515ad34..23e29d93 100644
--- a/frontend/src/components/Wizard/WizardRemoteAccess.vue
+++ b/frontend/src/components/Wizard/WizardRemoteAccess.vue
@@ -25,11 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 const emit = defineEmits<{
   'step-complete': [];
diff --git a/frontend/src/composables/apis.ts b/frontend/src/composables/apis.ts
index 1b115c12..243f01e5 100644
--- a/frontend/src/composables/apis.ts
+++ b/frontend/src/composables/apis.ts
@@ -1,3 +1,8 @@
+import type { Api } from '@jellyfin/sdk';
+import type { BaseItemDto, BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
+import type { AxiosResponse } from 'axios';
+import { deepEqual } from 'fast-equals';
+import { computed, effectScope, getCurrentScope, isRef, shallowRef, toValue, unref, watch, type ComputedRef, type Ref } from 'vue';
 import { useLoading } from '@/composables/use-loading';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
@@ -5,11 +10,6 @@ import { remote } from '@/plugins/remote';
 import { network } from '@/store';
 import { apiStore } from '@/store/api';
 import { isArray, isNil } from '@/utils/validation';
-import type { Api } from '@jellyfin/sdk';
-import type { BaseItemDto, BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
-import type { AxiosResponse } from 'axios';
-import { deepEqual } from 'fast-equals';
-import { computed, effectScope, getCurrentScope, isRef, shallowRef, toValue, unref, watch, type ComputedRef, type Ref } from 'vue';
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return */
 /**
diff --git a/frontend/src/composables/use-datefns.ts b/frontend/src/composables/use-datefns.ts
index 745b8029..14273a1f 100644
--- a/frontend/src/composables/use-datefns.ts
+++ b/frontend/src/composables/use-datefns.ts
@@ -1,6 +1,6 @@
+import * as datefnslocales from 'virtual:locales/date-fns';
 import { i18n } from '@/plugins/i18n';
 import { isObj } from '@/utils/validation';
-import * as datefnslocales from 'virtual:locales/date-fns';
 
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
 
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
index ace57737..a00683b9 100644
--- a/frontend/src/layouts/default.vue
+++ b/frontend/src/layouts/default.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script setup lang="ts">
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { computed, onBeforeMount, onUnmounted, provide, ref, watch } from 'vue';
+import { useDisplay } from 'vuetify';
 import type { DrawerItem } from '@/components/Layout/Navigation/NavigationDrawer.vue';
 import { playbackManager } from '@/store/playbackManager';
 import { playerElement } from '@/store/playerElement';
 import { fetchIndexPage, getLibraryIcon } from '@/utils/items';
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { computed, onBeforeMount, onUnmounted, provide, ref, watch } from 'vue';
-import { useDisplay } from 'vuetify';
 
 const display = useDisplay();
 const navDrawer = ref(!display.mobile.value);
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index f4378933..99c7e5a9 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,14 +4,14 @@
  * https://caniuse.com/mdn-javascript_operators_await_top_level
  */
 
+import { createApp } from 'vue';
+import { routes } from 'vue-router/auto/routes';
 import Root from '@/App.vue';
 import { hideDirective } from '@/plugins/directives';
 import { vuePlugin as i18n } from '@/plugins/i18n';
 import { createPlugin as createRemote } from '@/plugins/remote';
 import { router } from '@/plugins/router';
 import { vuetify } from '@/plugins/vuetify';
-import { createApp } from 'vue';
-import { routes } from 'vue-router/auto/routes';
 
 /**
  * - GLOBAL STYLES -
diff --git a/frontend/src/pages/artist/[itemId].vue b/frontend/src/pages/artist/[itemId].vue
index d040c18a..40e84b80 100644
--- a/frontend/src/pages/artist/[itemId].vue
+++ b/frontend/src/pages/artist/[itemId].vue
@@ -144,11 +144,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { sanitizeHtml } from '@/utils/html';
-import { getBlurhash } from '@/utils/images';
-import { defaultSortOrder as sortBy } from '@/utils/items';
-import { msToTicks } from '@/utils/time';
 import {
   BaseItemKind,
   ImageType,
@@ -160,6 +155,11 @@ import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { msToTicks } from '@/utils/time';
+import { defaultSortOrder as sortBy } from '@/utils/items';
+import { getBlurhash } from '@/utils/images';
+import { sanitizeHtml } from '@/utils/html';
+import { useBaseItem } from '@/composables/apis';
 
 const SINGLE_MAX_LENGTH_MS = 600_000;
 const EP_MAX_LENGTH_MS = 1_800_000;
diff --git a/frontend/src/pages/genre/[itemId].vue b/frontend/src/pages/genre/[itemId].vue
index b406b23a..99925945 100644
--- a/frontend/src/pages/genre/[itemId].vue
+++ b/frontend/src/pages/genre/[itemId].vue
@@ -48,9 +48,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
-import { isStr } from '@/utils/validation';
 import {
   SortOrder,
   type BaseItemKind
@@ -59,6 +56,9 @@ import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { isStr } from '@/utils/validation';
+import { useResponsiveClasses } from '@/composables/use-responsive-classes';
+import { useBaseItem } from '@/composables/apis';
 
 const route = useRoute<'/genre/[itemId]'>();
 
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 2e66e2b1..2f84c48a 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -32,12 +32,12 @@ const excludeViewTypes = new Set([
 </script>
 
 <script setup lang="ts">
-import { CardShapes, fetchIndexPage, getShapeFromCollectionType } from '@/utils/items';
-import { isNil } from '@/utils/validation';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router/auto';
+import { isNil } from '@/utils/validation';
+import { CardShapes, fetchIndexPage, getShapeFromCollectionType } from '@/utils/items';
 
 interface HomeSection {
   title: string;
diff --git a/frontend/src/pages/item/[itemId].vue b/frontend/src/pages/item/[itemId].vue
index 6b0cb59b..d478f887 100644
--- a/frontend/src/pages/item/[itemId].vue
+++ b/frontend/src/pages/item/[itemId].vue
@@ -297,11 +297,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { getItemizedSelect } from '@/utils/forms';
-import { sanitizeHtml } from '@/utils/html';
-import { getBlurhash } from '@/utils/images';
-import { getItemDetailsLink, getMediaStreams } from '@/utils/items';
 import {
   ImageType,
   type BaseItemPerson,
@@ -312,6 +307,11 @@ import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { getItemDetailsLink, getMediaStreams } from '@/utils/items';
+import { getBlurhash } from '@/utils/images';
+import { sanitizeHtml } from '@/utils/html';
+import { getItemizedSelect } from '@/utils/forms';
+import { useBaseItem } from '@/composables/apis';
 
 const route = useRoute<'/genre/[itemId]'>();
 
diff --git a/frontend/src/pages/library/[itemId].vue b/frontend/src/pages/library/[itemId].vue
index 735dc6ec..a92754df 100644
--- a/frontend/src/pages/library/[itemId].vue
+++ b/frontend/src/pages/library/[itemId].vue
@@ -61,9 +61,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Filters } from '@/components/Buttons/FilterButton.vue';
-import { methodsAsObject, useBaseItem } from '@/composables/apis';
-import { apiStore } from '@/store/api';
 import {
   BaseItemKind, SortOrder, type BaseItemDto
 } from '@jellyfin/sdk/lib/generated-client';
@@ -76,6 +73,9 @@ import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api';
 import { computed, onBeforeMount, ref, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router/auto';
+import { apiStore } from '@/store/api';
+import { methodsAsObject, useBaseItem } from '@/composables/apis';
+import type { Filters } from '@/components/Buttons/FilterButton.vue';
 
 const { t } = useI18n();
 const route = useRoute<'/library/[itemId]'>();
diff --git a/frontend/src/pages/metadata.vue b/frontend/src/pages/metadata.vue
index 5f4cd7c7..c539ca99 100644
--- a/frontend/src/pages/metadata.vue
+++ b/frontend/src/pages/metadata.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { ref } from 'vue';
+import { remote } from '@/plugins/remote';
 
 type ITreeNode = {
   id: string;
diff --git a/frontend/src/pages/musicalbum/[itemId].vue b/frontend/src/pages/musicalbum/[itemId].vue
index 14f75a39..5cbdfcc8 100644
--- a/frontend/src/pages/musicalbum/[itemId].vue
+++ b/frontend/src/pages/musicalbum/[itemId].vue
@@ -103,13 +103,13 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { getBlurhash } from '@/utils/images';
-import { getItemDetailsLink } from '@/utils/items';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { useRoute } from 'vue-router/auto';
+import { getItemDetailsLink } from '@/utils/items';
+import { getBlurhash } from '@/utils/images';
+import { useBaseItem } from '@/composables/apis';
 
 const route = useRoute<'/musicalbum/[itemId]'>();
 
diff --git a/frontend/src/pages/person/[itemId].vue b/frontend/src/pages/person/[itemId].vue
index 09dd8052..9fa26197 100644
--- a/frontend/src/pages/person/[itemId].vue
+++ b/frontend/src/pages/person/[itemId].vue
@@ -166,11 +166,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { useDateFns } from '@/composables/use-datefns';
-import { sanitizeHtml } from '@/utils/html';
-import { getBlurhash } from '@/utils/images';
-import { defaultSortOrder as sortBy } from '@/utils/items';
 import {
   BaseItemKind,
   ImageType,
@@ -182,6 +177,11 @@ import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'
 import { format } from 'date-fns';
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { defaultSortOrder as sortBy } from '@/utils/items';
+import { getBlurhash } from '@/utils/images';
+import { sanitizeHtml } from '@/utils/html';
+import { useDateFns } from '@/composables/use-datefns';
+import { useBaseItem } from '@/composables/apis';
 
 const route = useRoute<'/person/[itemId]'>();
 
diff --git a/frontend/src/pages/playback/music.vue b/frontend/src/pages/playback/music.vue
index 2606a2e4..2605228f 100644
--- a/frontend/src/pages/playback/music.vue
+++ b/frontend/src/pages/playback/music.vue
@@ -98,10 +98,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { playbackGuard } from '@/plugins/router/middlewares/playback';
-import { playbackManager } from '@/store/playbackManager';
-import { getBlurhash } from '@/utils/images';
-import { isNil } from '@/utils/validation';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client';
 import type SwiperType from 'swiper';
 import 'swiper/css';
@@ -113,6 +109,10 @@ import { A11y, EffectCoverflow, Keyboard, Virtual } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import { computed, ref, shallowRef, watchEffect } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { playbackGuard } from '@/plugins/router/middlewares/playback';
+import { playbackManager } from '@/store/playbackManager';
+import { isNil } from '@/utils/validation';
+import { getBlurhash } from '@/utils/images';
 
 defineOptions({
   beforeRouteEnter: playbackGuard
diff --git a/frontend/src/pages/playback/video.vue b/frontend/src/pages/playback/video.vue
index 7fe5d857..45299e82 100644
--- a/frontend/src/pages/playback/video.vue
+++ b/frontend/src/pages/playback/video.vue
@@ -125,14 +125,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { playbackGuard } from '@/plugins/router/middlewares/playback';
-import {
-  mediaControls,
-  mediaElementRef
-} from '@/store';
-import { playbackManager } from '@/store/playbackManager';
-import { playerElement } from '@/store/playerElement';
-import { getEndsAtTime } from '@/utils/time';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
 import {
   useFullscreen,
@@ -143,6 +135,14 @@ import {
 import IMdiChevronDown from 'virtual:icons/mdi/chevron-down';
 import IMdiClose from 'virtual:icons/mdi/close';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { playbackGuard } from '@/plugins/router/middlewares/playback';
+import {
+  mediaControls,
+  mediaElementRef
+} from '@/store';
+import { playbackManager } from '@/store/playbackManager';
+import { playerElement } from '@/store/playerElement';
+import { getEndsAtTime } from '@/utils/time';
 
 defineOptions({
   beforeRouteEnter: playbackGuard
diff --git a/frontend/src/pages/search.vue b/frontend/src/pages/search.vue
index 97648756..8d3d2c44 100644
--- a/frontend/src/pages/search.vue
+++ b/frontend/src/pages/search.vue
@@ -78,15 +78,15 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
-import { apiStore } from '@/store/api';
 import { BaseItemKind, type BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getPersonsApi } from '@jellyfin/sdk/lib/utils/api/persons-api';
 import { refDebounced } from '@vueuse/core';
 import { computed, shallowRef } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { apiStore } from '@/store/api';
+import { useResponsiveClasses } from '@/composables/use-responsive-classes';
+import { useBaseItem } from '@/composables/apis';
 
 const route = useRoute();
 
diff --git a/frontend/src/pages/series/[itemId].vue b/frontend/src/pages/series/[itemId].vue
index 941b70e3..8220039c 100644
--- a/frontend/src/pages/series/[itemId].vue
+++ b/frontend/src/pages/series/[itemId].vue
@@ -181,10 +181,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBaseItem } from '@/composables/apis';
-import { sanitizeHtml } from '@/utils/html';
-import { getBlurhash } from '@/utils/images';
-import { getItemDetailsLink } from '@/utils/items';
 import {
   ImageType,
   type BaseItemPerson
@@ -193,6 +189,10 @@ import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router/auto';
+import { getItemDetailsLink } from '@/utils/items';
+import { getBlurhash } from '@/utils/images';
+import { sanitizeHtml } from '@/utils/html';
+import { useBaseItem } from '@/composables/apis';
 
 const route = useRoute<'/series/[itemId]'>();
 
diff --git a/frontend/src/pages/server/login.vue b/frontend/src/pages/server/login.vue
index 1f0ab4b5..0a1dc860 100644
--- a/frontend/src/pages/server/login.vue
+++ b/frontend/src/pages/server/login.vue
@@ -93,7 +93,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { getBrandingApi } from '@jellyfin/sdk/lib/utils/api/branding-api';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
@@ -102,6 +101,7 @@ import { isEmpty } from 'lodash-es';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/frontend/src/pages/settings/apikeys.vue b/frontend/src/pages/settings/apikeys.vue
index 6e50d54f..8d38fe4b 100644
--- a/frontend/src/pages/settings/apikeys.vue
+++ b/frontend/src/pages/settings/apikeys.vue
@@ -104,14 +104,14 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { useDateFns } from '@/composables/use-datefns';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import type { AuthenticationInfo } from '@jellyfin/sdk/lib/generated-client';
 import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
 import { formatRelative, parseJSON } from 'date-fns';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { useDateFns } from '@/composables/use-datefns';
 
 const { t } = useI18n();
 
diff --git a/frontend/src/pages/settings/devices.vue b/frontend/src/pages/settings/devices.vue
index 028192d3..f5b516c5 100644
--- a/frontend/src/pages/settings/devices.vue
+++ b/frontend/src/pages/settings/devices.vue
@@ -96,14 +96,14 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { useDateFns } from '@/composables/use-datefns';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import type { DeviceInfo } from '@jellyfin/sdk/lib/generated-client';
 import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
 import { formatRelative, parseJSON } from 'date-fns';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { useDateFns } from '@/composables/use-datefns';
 
 const { t } = useI18n();
 
diff --git a/frontend/src/pages/settings/index.vue b/frontend/src/pages/settings/index.vue
index 3ca3fca9..6da8937f 100644
--- a/frontend/src/pages/settings/index.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -123,9 +123,6 @@
 </template>
 
 <script setup lang="ts">
-import { version as clientVersion } from '@/../package.json';
-import { useApi } from '@/composables/apis';
-import { remote } from '@/plugins/remote';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { commit_hash } from 'virtual:commit';
 import IMdiAccount from 'virtual:icons/mdi/account';
@@ -149,6 +146,9 @@ import IMdiTextBox from 'virtual:icons/mdi/text-box';
 import { computed, type Component } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, type RouteLocationRaw } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
+import { useApi } from '@/composables/apis';
+import { version as clientVersion } from '@/../package.json';
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/frontend/src/pages/settings/logs-and-activity.vue b/frontend/src/pages/settings/logs-and-activity.vue
index b9e3c26d..ea1d86e3 100644
--- a/frontend/src/pages/settings/logs-and-activity.vue
+++ b/frontend/src/pages/settings/logs-and-activity.vue
@@ -92,9 +92,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { useApi } from '@/composables/apis';
-import { useDateFns } from '@/composables/use-datefns';
-import { remote } from '@/plugins/remote';
 import {
   LogLevel
 } from '@jellyfin/sdk/lib/generated-client';
@@ -110,6 +107,9 @@ import IMdiStop from 'virtual:icons/mdi/stop';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router/auto';
 import { useTheme } from 'vuetify';
+import { remote } from '@/plugins/remote';
+import { useDateFns } from '@/composables/use-datefns';
+import { useApi } from '@/composables/apis';
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/frontend/src/pages/settings/users/[id].vue b/frontend/src/pages/settings/users/[id].vue
index e48dba4d..efb94563 100644
--- a/frontend/src/pages/settings/users/[id].vue
+++ b/frontend/src/pages/settings/users/[id].vue
@@ -308,9 +308,6 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { useConfirmDialog } from '@/composables/use-confirm-dialog';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
 import type {
   BaseItemDtoQueryResult,
   UnratedItem,
@@ -322,6 +319,9 @@ import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { useConfirmDialog } from '@/composables/use-confirm-dialog';
 
 interface CurrentUser {
   Name: string;
diff --git a/frontend/src/pages/settings/users/index.vue b/frontend/src/pages/settings/users/index.vue
index 7e290026..fae08255 100644
--- a/frontend/src/pages/settings/users/index.vue
+++ b/frontend/src/pages/settings/users/index.vue
@@ -58,11 +58,11 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { useApi } from '@/composables/apis';
-import { useDateFns } from '@/composables/use-datefns';
 import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { formatDistanceToNow } from 'date-fns';
 import { useI18n } from 'vue-i18n';
+import { useDateFns } from '@/composables/use-datefns';
+import { useApi } from '@/composables/apis';
 
 const { t } = useI18n();
 
diff --git a/frontend/src/pages/settings/users/new.vue b/frontend/src/pages/settings/users/new.vue
index 4b0755eb..bc95ac69 100644
--- a/frontend/src/pages/settings/users/new.vue
+++ b/frontend/src/pages/settings/users/new.vue
@@ -82,12 +82,12 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
 
 const { t } = useI18n();
 const router = useRouter();
diff --git a/frontend/src/pages/wizard.vue b/frontend/src/pages/wizard.vue
index 285bd921..01f58d0e 100644
--- a/frontend/src/pages/wizard.vue
+++ b/frontend/src/pages/wizard.vue
@@ -87,11 +87,11 @@ meta:
 </route>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router/auto';
+import { useSnackbar } from '@/composables/use-snackbar';
 import { remote } from '@/plugins/remote';
 
 const { t } = useI18n();
diff --git a/frontend/src/plugins/remote/auth/index.ts b/frontend/src/plugins/remote/auth/index.ts
index 63562158..82dbe8d8 100644
--- a/frontend/src/plugins/remote/auth/index.ts
+++ b/frontend/src/plugins/remote/auth/index.ts
@@ -1,7 +1,3 @@
-import { useSnackbar } from '@/composables/use-snackbar';
-import { i18n } from '@/plugins/i18n';
-import { mergeExcludingUnknown } from '@/utils/data-manipulation';
-import { isAxiosError, isNil } from '@/utils/validation';
 import {
   API_VERSION,
   VersionOutdatedIssue,
@@ -14,6 +10,10 @@ import { useStorage } from '@vueuse/core';
 import { merge } from 'lodash-es';
 import SDK, { useOneTimeAPI } from '../sdk/sdk-utils';
 import type { AuthState, ServerInfo } from './types';
+import { isAxiosError, isNil } from '@/utils/validation';
+import { mergeExcludingUnknown } from '@/utils/data-manipulation';
+import { i18n } from '@/plugins/i18n';
+import { useSnackbar } from '@/composables/use-snackbar';
 
 class RemotePluginAuth {
   /**
diff --git a/frontend/src/plugins/remote/axios/index.ts b/frontend/src/plugins/remote/axios/index.ts
index 00943e57..8fc80099 100644
--- a/frontend/src/plugins/remote/axios/index.ts
+++ b/frontend/src/plugins/remote/axios/index.ts
@@ -1,12 +1,12 @@
 /**
  * Instantiates the Axios instance used for the SDK and requests
  */
-import { useSnackbar } from '@/composables/use-snackbar';
-import { i18n } from '@/plugins/i18n';
 import axios, {
   type AxiosError
 } from 'axios';
 import auth from '../auth';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { i18n } from '@/plugins/i18n';
 
 class RemotePluginAxios {
   public readonly instance = axios.create();
diff --git a/frontend/src/plugins/remote/index.ts b/frontend/src/plugins/remote/index.ts
index 15549075..b0d41e00 100644
--- a/frontend/src/plugins/remote/index.ts
+++ b/frontend/src/plugins/remote/index.ts
@@ -6,12 +6,12 @@
  * - Jellyfin SDK ($remote.sdk)
  * - WebSocket ($remote.socket)
  */
-import { getJSONConfig } from '@/utils/external-config';
-import { isNil } from '@/utils/validation';
 import type { App } from 'vue';
 import RemotePluginAuthInstance from './auth';
 import RemotePluginSDKInstance from './sdk';
 import RemotePluginSocketInstance from './socket';
+import { isNil } from '@/utils/validation';
+import { getJSONConfig } from '@/utils/external-config';
 
 class RemotePlugin {
   public readonly auth = RemotePluginAuthInstance;
diff --git a/frontend/src/plugins/remote/sdk/index.ts b/frontend/src/plugins/remote/sdk/index.ts
index ce0a4d8a..03b8a33e 100644
--- a/frontend/src/plugins/remote/sdk/index.ts
+++ b/frontend/src/plugins/remote/sdk/index.ts
@@ -2,12 +2,12 @@
  * This plugin instantiates the Jellyfin SDK.
  * It also sets the header and base URL for our axios instance
  */
-import { isNil } from '@/utils/validation';
 import type { Api } from '@jellyfin/sdk';
 import { watchEffect } from 'vue';
 import RemotePluginAuthInstance from '../auth';
 import RemotePluginAxiosInstance from '../axios';
 import SDK, { useOneTimeAPI } from './sdk-utils';
+import { isNil } from '@/utils/validation';
 
 class RemotePluginSDK {
   private sdk = SDK;
diff --git a/frontend/src/plugins/remote/sdk/sdk-utils.ts b/frontend/src/plugins/remote/sdk/sdk-utils.ts
index ffc7fc15..8f5561e4 100644
--- a/frontend/src/plugins/remote/sdk/sdk-utils.ts
+++ b/frontend/src/plugins/remote/sdk/sdk-utils.ts
@@ -1,4 +1,8 @@
-import { version } from '@/../package.json';
+import { type Api, Jellyfin } from '@jellyfin/sdk';
+import { type RemovableRef, useStorage } from '@vueuse/core';
+import { v4 } from 'uuid';
+import type { DeviceState } from './types';
+import { mergeExcludingUnknown } from '@/utils/data-manipulation';
 import {
   isAndroid,
   isApple,
@@ -10,11 +14,7 @@ import {
   isTizen,
   isWebOS
 } from '@/utils/browser-detection';
-import { mergeExcludingUnknown } from '@/utils/data-manipulation';
-import { type Api, Jellyfin } from '@jellyfin/sdk';
-import { type RemovableRef, useStorage } from '@vueuse/core';
-import { v4 } from 'uuid';
-import type { DeviceState } from './types';
+import { version } from '@/../package.json';
 
 const state: RemovableRef<DeviceState> = useStorage(
   'deviceProfile',
diff --git a/frontend/src/plugins/remote/socket/index.ts b/frontend/src/plugins/remote/socket/index.ts
index e9c3f676..bcf74d57 100644
--- a/frontend/src/plugins/remote/socket/index.ts
+++ b/frontend/src/plugins/remote/socket/index.ts
@@ -1,10 +1,10 @@
-import { isNil } from '@/utils/validation';
 import { useWebSocket } from '@vueuse/core';
 import { destr } from 'destr';
 import { computed, watch } from 'vue';
 import auth from '../auth';
 import sdk from '../sdk';
 import type { WebSocketMessage } from './types';
+import { isNil } from '@/utils/validation';
 
 class RemotePluginSocket {
   private _internalMessage: WebSocketMessage | undefined = undefined;
diff --git a/frontend/src/plugins/router/index.ts b/frontend/src/plugins/router/index.ts
index 34000ac5..8deb1619 100644
--- a/frontend/src/plugins/router/index.ts
+++ b/frontend/src/plugins/router/index.ts
@@ -1,5 +1,3 @@
-import { getJSONConfig } from '@/utils/external-config';
-import { isStr } from '@/utils/validation';
 import { useTitle } from '@vueuse/core';
 import { computed, watch } from 'vue';
 import {
@@ -13,6 +11,8 @@ import { adminGuard } from './middlewares/admin-pages';
 import { loginGuard } from './middlewares/login';
 import { metaGuard } from './middlewares/meta';
 import { validateGuard } from './middlewares/validate';
+import { isStr } from '@/utils/validation';
+import { getJSONConfig } from '@/utils/external-config';
 
 export const router = createRouter({
   history:
diff --git a/frontend/src/plugins/router/middlewares/admin-pages.ts b/frontend/src/plugins/router/middlewares/admin-pages.ts
index f6c18908..b0b8eec7 100644
--- a/frontend/src/plugins/router/middlewares/admin-pages.ts
+++ b/frontend/src/plugins/router/middlewares/admin-pages.ts
@@ -1,7 +1,7 @@
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
 import { remote } from '@/plugins/remote';
-import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
 
 /**
  * Redirect the user to index page when attempting to access
diff --git a/frontend/src/plugins/router/middlewares/login.ts b/frontend/src/plugins/router/middlewares/login.ts
index 73491e1c..fb76207e 100644
--- a/frontend/src/plugins/router/middlewares/login.ts
+++ b/frontend/src/plugins/router/middlewares/login.ts
@@ -1,10 +1,10 @@
-import { remote } from '@/plugins/remote';
-import { isNil } from '@/utils/validation';
 import type {
   RouteLocationNormalized,
   RouteLocationPathRaw,
   RouteLocationRaw
 } from 'vue-router/auto';
+import { remote } from '@/plugins/remote';
+import { isNil } from '@/utils/validation';
 
 const serverAddUrl = '/server/add';
 const serverSelectUrl = '/server/select';
diff --git a/frontend/src/plugins/router/middlewares/playback.ts b/frontend/src/plugins/router/middlewares/playback.ts
index 54e44342..f6137b7f 100644
--- a/frontend/src/plugins/router/middlewares/playback.ts
+++ b/frontend/src/plugins/router/middlewares/playback.ts
@@ -1,6 +1,6 @@
+import type { RouteLocationRaw } from 'vue-router';
 import { playbackManager } from '@/store/playbackManager';
 import { isNil } from '@/utils/validation';
-import type { RouteLocationRaw } from 'vue-router';
 
 /**
  * Validates that no playback is happening when accesing a route
diff --git a/frontend/src/plugins/router/middlewares/validate.ts b/frontend/src/plugins/router/middlewares/validate.ts
index f18d5a20..9d54740f 100644
--- a/frontend/src/plugins/router/middlewares/validate.ts
+++ b/frontend/src/plugins/router/middlewares/validate.ts
@@ -1,7 +1,7 @@
+import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
 import { isStr } from '@/utils/validation';
-import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router/auto';
 
 /**
  * Validates that the route has a correct itemId parameter by checking that the parameter is a valid
diff --git a/frontend/src/store/api.ts b/frontend/src/store/api.ts
index 2e5dc49d..6cf807bb 100644
--- a/frontend/src/store/api.ts
+++ b/frontend/src/store/api.ts
@@ -2,12 +2,12 @@
  * This store holds and cache reactive references to all the API layers, provided by the
  * useBaseItem and useRequest composable
  */
-import { remote } from '@/plugins/remote';
-import { isArray, isObj, isStr } from '@/utils/validation';
 import { ImageType, ItemFields, type BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { reactive, watch } from 'vue';
+import { isArray, isObj, isStr } from '@/utils/validation';
+import { remote } from '@/plugins/remote';
 
 /**
  * Class that we can use to transform to BaseItem when necessary
diff --git a/frontend/src/store/clientSettings.ts b/frontend/src/store/clientSettings.ts
index 6d4c2e77..45a39967 100644
--- a/frontend/src/store/clientSettings.ts
+++ b/frontend/src/store/clientSettings.ts
@@ -1,9 +1,3 @@
-import { useSnackbar } from '@/composables/use-snackbar';
-import { i18n } from '@/plugins/i18n';
-import { remote } from '@/plugins/remote';
-import { vuetify } from '@/plugins/vuetify';
-import { mergeExcludingUnknown } from '@/utils/data-manipulation';
-import { fetchDefaultedCustomPrefs, syncCustomPrefs } from '@/utils/store-sync';
 import {
   useNavigatorLanguage,
   usePreferredDark,
@@ -12,6 +6,12 @@ import {
   type RemovableRef
 } from '@vueuse/core';
 import { computed, nextTick, watch } from 'vue';
+import { useSnackbar } from '@/composables/use-snackbar';
+import { i18n } from '@/plugins/i18n';
+import { remote } from '@/plugins/remote';
+import { vuetify } from '@/plugins/vuetify';
+import { mergeExcludingUnknown } from '@/utils/data-manipulation';
+import { fetchDefaultedCustomPrefs, syncCustomPrefs } from '@/utils/store-sync';
 
 /**
  * == INTERFACES AND TYPES ==
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 7e6ac32f..4b21d3d9 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -4,7 +4,6 @@
  * It must be used in an agnostic way to cover both local and remote playback.
  * If you want to handle the state of the local player element, use playerElement store instead.
  */
-import { isNil } from '@/utils/validation';
 import {
   BaseItemKind,
   ItemFilter,
@@ -24,9 +23,7 @@ import { useEventListener } from '@vueuse/core';
 import { shuffle } from 'lodash-es';
 import { v4 } from 'uuid';
 import { reactive, watch, watchEffect } from 'vue';
-/**
- * It's important to import these from globals.ts directly to avoid cycles and ReferenceError
- */
+import { isNil } from '@/utils/validation';
 import { useBaseItem } from '@/composables/apis';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
@@ -36,7 +33,7 @@ import { getImageInfo } from '@/utils/images';
 import { getItemRuntime } from '@/utils/items';
 import playbackProfile from '@/utils/playback-profiles';
 import { msToTicks } from '@/utils/time';
-import { mediaControls, now as reactiveDate } from '.';
+import { mediaControls, now as reactiveDate } from '@/store';
 
 /**
  * == INTERFACES AND TYPES ==
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
index ab3cb29c..d19b5297 100644
--- a/frontend/src/store/playerElement.ts
+++ b/frontend/src/store/playerElement.ts
@@ -4,16 +4,16 @@
  * In the other part, playbackManager is suited to handle the playback state in
  * an agnostic way, regardless of where the media is being played (remotely or locally)
  */
-import { remote } from '@/plugins/remote';
-import { router } from '@/plugins/router';
-import { mediaElementRef } from '@/store';
-import { isArray, isNil } from '@/utils/validation';
 import JASSUB from 'jassub';
 import jassubDefaultFont from 'jassub/dist/default.woff2?url';
 import jassubWorker from 'jassub/dist/jassub-worker.js?url';
 import jassubWasmUrl from 'jassub/dist/jassub-worker.wasm?url';
 import { nextTick, reactive, watch } from 'vue';
 import { playbackManager } from './playbackManager';
+import { isArray, isNil } from '@/utils/validation';
+import { mediaElementRef } from '@/store';
+import { router } from '@/plugins/router';
+import { remote } from '@/plugins/remote';
 
 let jassub: JASSUB | undefined;
 const fullscreenVideoRoute = '/playback/video';
diff --git a/frontend/src/store/taskManager.ts b/frontend/src/store/taskManager.ts
index f0001730..248e2287 100644
--- a/frontend/src/store/taskManager.ts
+++ b/frontend/src/store/taskManager.ts
@@ -1,10 +1,10 @@
+import { useStorage, type RemovableRef } from '@vueuse/core';
+import { v4 } from 'uuid';
+import { watch } from 'vue';
 import { remote } from '@/plugins/remote';
 import { apiStore } from '@/store/api';
 import { mergeExcludingUnknown } from '@/utils/data-manipulation';
 import { isArray, isObj, isStr } from '@/utils/validation';
-import { useStorage, type RemovableRef } from '@vueuse/core';
-import { v4 } from 'uuid';
-import { watch } from 'vue';
 
 /**
  * == INTERFACES AND TYPES ==
diff --git a/frontend/src/utils/images.ts b/frontend/src/utils/images.ts
index 0790c7ca..d8c01a37 100644
--- a/frontend/src/utils/images.ts
+++ b/frontend/src/utils/images.ts
@@ -2,14 +2,14 @@
  * Helper for image manipulation and image-related utility functions
  *
  */
-import { remote } from '@/plugins/remote';
-import { CardShapes, getShapeFromItemType, isPerson } from '@/utils/items';
 import {
   type BaseItemDto,
   BaseItemKind,
   type BaseItemPerson,
   ImageType
 } from '@jellyfin/sdk/lib/generated-client';
+import { remote } from '@/plugins/remote';
+import { CardShapes, getShapeFromItemType, isPerson } from '@/utils/items';
 
 export interface ImageUrlInfo {
   url?: string;
diff --git a/frontend/src/utils/items.ts b/frontend/src/utils/items.ts
index 43363580..f0d96871 100644
--- a/frontend/src/utils/items.ts
+++ b/frontend/src/utils/items.ts
@@ -1,10 +1,6 @@
 /**
  * Item and playback helpers
  */
-import { useBaseItem } from '@/composables/apis';
-import { remote } from '@/plugins/remote';
-import { router } from '@/plugins/router';
-import { isNil } from '@/utils/validation';
 import {
   BaseItemKind,
   ItemFields,
@@ -36,6 +32,10 @@ import IMdiYoutubeTV from 'virtual:icons/mdi/youtube-tv';
 import { effectScope, watch, type ComputedRef } from 'vue';
 import type { RouteNamedMap } from 'vue-router/auto/routes';
 import { ticksToMs } from './time';
+import { isNil } from '@/utils/validation';
+import { router } from '@/plugins/router';
+import { remote } from '@/plugins/remote';
+import { useBaseItem } from '@/composables/apis';
 
 /**
  * A list of valid collections that should be treated as folders.
diff --git a/frontend/src/utils/playback-profiles/helpers/codec-profiles.ts b/frontend/src/utils/playback-profiles/helpers/codec-profiles.ts
index bfb82f60..e1c50eaa 100644
--- a/frontend/src/utils/playback-profiles/helpers/codec-profiles.ts
+++ b/frontend/src/utils/playback-profiles/helpers/codec-profiles.ts
@@ -2,6 +2,13 @@
  * @deprecated - Check @/utils/playback-profiles/index
  */
 
+import {
+  CodecType,
+  ProfileConditionType,
+  ProfileConditionValue,
+  type CodecProfile,
+  type ProfileCondition
+} from '@jellyfin/sdk/lib/generated-client';
 import {
   isApple,
   isChromiumBased,
@@ -15,13 +22,6 @@ import {
   safariVersion
 } from '@/utils/browser-detection';
 import { isFunc, isObj } from '@/utils/validation';
-import {
-  CodecType,
-  ProfileConditionType,
-  ProfileConditionValue,
-  type CodecProfile,
-  type ProfileCondition
-} from '@jellyfin/sdk/lib/generated-client';
 
 /**
  * Gets the max video bitrate
diff --git a/frontend/src/utils/store-sync.ts b/frontend/src/utils/store-sync.ts
index 4d215c2f..11d8f7d8 100644
--- a/frontend/src/utils/store-sync.ts
+++ b/frontend/src/utils/store-sync.ts
@@ -1,11 +1,11 @@
+import type { DisplayPreferencesDto } from '@jellyfin/sdk/lib/generated-client';
+import { getDisplayPreferencesApi } from '@jellyfin/sdk/lib/utils/api/display-preferences-api';
+import { destr } from 'destr';
 import { useSnackbar } from '@/composables/use-snackbar';
 import { i18n } from '@/plugins/i18n';
 import { remote } from '@/plugins/remote';
 import { taskManager } from '@/store/taskManager';
 import { isStr, isUndef } from '@/utils/validation';
-import type { DisplayPreferencesDto } from '@jellyfin/sdk/lib/generated-client';
-import { getDisplayPreferencesApi } from '@jellyfin/sdk/lib/utils/api/display-preferences-api';
-import { destr } from 'destr';
 
 const CLIENT = 'vue';
 
diff --git a/frontend/src/utils/time.ts b/frontend/src/utils/time.ts
index d33bf4a5..f23e35b1 100644
--- a/frontend/src/utils/time.ts
+++ b/frontend/src/utils/time.ts
@@ -1,9 +1,6 @@
 /**
  * Utility for converting time between ticks and milliseconds
  */
-import { useDateFns } from '@/composables/use-datefns';
-import { i18n } from '@/plugins/i18n';
-import { now } from '@/store';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import type { MaybeRef } from '@vueuse/core';
 import {
@@ -14,6 +11,9 @@ import {
 } from 'date-fns';
 import { sumBy } from 'lodash-es';
 import { type ComputedRef, computed, toValue } from 'vue';
+import { now } from '@/store';
+import { i18n } from '@/plugins/i18n';
+import { useDateFns } from '@/composables/use-datefns';
 
 /**
  * Formats Time