diff --git a/web/src/lib/components/add-media-card.svelte b/web/src/lib/components/add-media-card.svelte
index c3b172d..e4d667d 100644
--- a/web/src/lib/components/add-media-card.svelte
+++ b/web/src/lib/components/add-media-card.svelte
@@ -2,7 +2,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { ImageOff } from 'lucide-svelte';
-    import {goto, invalidateAll} from '$app/navigation';
+	import { goto, invalidateAll } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import type { components } from '$lib/api/api';
 	import client from '$lib/api';
@@ -40,13 +40,13 @@
 			data = response.data;
 		}
 
-        if (isShow) {
-			await goto(resolve('/dashboard/tv/[showId]', {showId: data?.id ?? ''}));
+		if (isShow) {
+			await goto(resolve('/dashboard/tv/[showId]', { showId: data?.id ?? '' }));
 		} else {
-			await goto(resolve('/dashboard/movies/[movieId]', {movieId: data?.id ?? ''}));
+			await goto(resolve('/dashboard/movies/[movieId]', { movieId: data?.id ?? '' }));
 		}
-        await invalidateAll()
-        loading = false;
+		await invalidateAll();
+		loading = false;
 	}
 </script>
 
diff --git a/web/src/lib/components/stats/stat-cards.svelte b/web/src/lib/components/stats/stat-cards.svelte
index 5a68dad..13aaeb4 100644
--- a/web/src/lib/components/stats/stat-cards.svelte
+++ b/web/src/lib/components/stats/stat-cards.svelte
@@ -7,14 +7,14 @@
 	import { animate } from 'animejs';
 	import { resolve } from '$app/paths';
 
-    let {showCount, moviesCount}: {showCount: number, moviesCount: number} = $props();
+	let { showCount, moviesCount }: { showCount: number; moviesCount: number } = $props();
 
-	let episodeCount: number= $state(0);
+	let episodeCount: number = $state(0);
 	let episodeCountString: string = $derived(episodeCount.toString().padStart(3, '0'));
 	let torrentCount: number = $state(0);
-    let torrentCountString: string = $derived(torrentCount.toString().padStart(3, '0'));
+	let torrentCountString: string = $derived(torrentCount.toString().padStart(3, '0'));
 
-    let installedVersion: string | undefined = env.PUBLIC_VERSION?.replace(/v*/, '');
+	let installedVersion: string | undefined = env.PUBLIC_VERSION?.replace(/v*/, '');
 	let releaseUrl: string | null = $state(null);
 	let newestVersion: string | null = $state(null);
 
@@ -42,25 +42,25 @@
 		});
 	}
 
-    client.GET('/api/v1/torrent').then(res => {
-        if (!res.error) {
-            torrentCount = res.data.length;
-        }
-    });
-    client.GET('/api/v1/tv/episodes/count').then(res => {
-        if (!res.error) {
-            episodeCount = Number(res.data);
-        }
-    });
+	client.GET('/api/v1/torrent').then((res) => {
+		if (!res.error) {
+			torrentCount = res.data.length;
+		}
+	});
+	client.GET('/api/v1/tv/episodes/count').then((res) => {
+		if (!res.error) {
+			episodeCount = Number(res.data);
+		}
+	});
 
 	onMount(async () => {
-        animateCounter(showEl, showCount, 3);
+		animateCounter(showEl, showCount, 3);
 
-        animateCounter(episodeEl, episodeCount, 3);
+		animateCounter(episodeEl, episodeCount, 3);
 
-        animateCounter(moviesEl, moviesCount, 3);
+		animateCounter(moviesEl, moviesCount, 3);
 
-        animateCounter(torrentEl, torrentCount, 3);
+		animateCounter(torrentEl, torrentCount, 3);
 
 		let releases = await fetch('https://api.github.com/repos/maxdorninger/mediamanager/releases');
 		if (releases.ok) {
@@ -124,7 +124,7 @@
 					href={releaseUrl ?? 'https://github.com/maxdorninger/MediaManager/releases'}
 					class="underline"
 				>
-					{isSemver(installedVersion ?? "") ? "v" : ""}{installedVersion} → v{newestVersion}
+					{isSemver(installedVersion ?? '') ? 'v' : ''}{installedVersion} → v{newestVersion}
 				</a>
 			</Card>
 		{/if}
diff --git a/web/src/routes/dashboard/+layout.ts b/web/src/routes/dashboard/+layout.ts
index 9759e27..dba7256 100644
--- a/web/src/routes/dashboard/+layout.ts
+++ b/web/src/routes/dashboard/+layout.ts
@@ -18,7 +18,7 @@ export const load: LayoutLoad = async ({ fetch }) => {
 	}
 	return {
 		user: data,
-		tvShows: await client.GET('/api/v1/tv/shows', { fetch: fetch }).then(res => res.data),
-		movies: await client.GET('/api/v1/movies', { fetch: fetch }).then(res => res.data),
+		tvShows: await client.GET('/api/v1/tv/shows', { fetch: fetch }).then((res) => res.data),
+		movies: await client.GET('/api/v1/movies', { fetch: fetch }).then((res) => res.data)
 	};
 };
diff --git a/web/src/routes/dashboard/+page.svelte b/web/src/routes/dashboard/+page.svelte
index c3d8448..7177789 100644
--- a/web/src/routes/dashboard/+page.svelte
+++ b/web/src/routes/dashboard/+page.svelte
@@ -8,8 +8,8 @@
 	import { onMount } from 'svelte';
 	import client from '$lib/api';
 	import type { components } from '$lib/api/api.d.ts';
-    import type { PageProps } from './$types';
-    let {data}: PageProps = $props();
+	import type { PageProps } from './$types';
+	let { data }: PageProps = $props();
 	let recommendedShows: components['schemas']['MetaDataProviderSearchResult'][] = [];
 	let showsLoading = true;
 
@@ -60,7 +60,8 @@
 	<main class="min-h-screen flex-1 items-center justify-center rounded-xl p-4 md:min-h-min">
 		<div class="mx-auto">
 			<div class="my-8 block text-2xl">Welcome to MediaManager!</div>
-			<StatCard showCount={data.tvShows?.length ?? 0} moviesCount={data.movies?.length ?? 0}></StatCard>
+			<StatCard showCount={data.tvShows?.length ?? 0} moviesCount={data.movies?.length ?? 0}
+			></StatCard>
 		</div>
 		<div class="mx-auto">
 			<h3 class="my-4 text-center text-2xl font-semibold">Trending Shows</h3>
diff --git a/web/src/routes/dashboard/movies/+page.svelte b/web/src/routes/dashboard/movies/+page.svelte
index a221e03..a9d56fb 100644
--- a/web/src/routes/dashboard/movies/+page.svelte
+++ b/web/src/routes/dashboard/movies/+page.svelte
@@ -1,90 +1,89 @@
 <script lang="ts">
-    import * as Card from '$lib/components/ui/card/index.js';
-    import {Separator} from '$lib/components/ui/separator/index.js';
-    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-    import {getFullyQualifiedMediaName} from '$lib/utils';
-    import MediaPicture from '$lib/components/media-picture.svelte';
-    import {resolve} from '$app/paths';
-    import type {components} from '$lib/api/api.d.ts';
-    import {page} from '$app/state';
-    import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
-    import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
-    import {getContext} from 'svelte';
-    import type {PageProps} from './$types';
-    import LoadingBar from "$lib/components/loading-bar.svelte";
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import { getFullyQualifiedMediaName } from '$lib/utils';
+	import MediaPicture from '$lib/components/media-picture.svelte';
+	import { resolve } from '$app/paths';
+	import type { components } from '$lib/api/api.d.ts';
+	import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
+	import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
+	import { getContext } from 'svelte';
+	import type { PageProps } from './$types';
+	import LoadingBar from '$lib/components/loading-bar.svelte';
 
-    let {data}: PageProps = $props();
-    let importableMovies: () => components['schemas']['MediaImportSuggestion'][] =
-        getContext('importableMovies');
+	let { data }: PageProps = $props();
+	let importableMovies: () => components['schemas']['MediaImportSuggestion'][] =
+		getContext('importableMovies');
 </script>
 
 <svelte:head>
-    <title>Movies - MediaManager</title>
-    <meta content="Browse and manage your movie collection in MediaManager" name="description"/>
+	<title>Movies - MediaManager</title>
+	<meta content="Browse and manage your movie collection in MediaManager" name="description" />
 </svelte:head>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
-    <div class="flex items-center gap-2 px-4">
-        <Sidebar.Trigger class="-ml-1"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
-        <Breadcrumb.Root>
-            <Breadcrumb.List>
-                <Breadcrumb.Item class="hidden md:block">
-                    <Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
-                </Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
-                    <Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
-                </Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
-                    <Breadcrumb.Page>Movies</Breadcrumb.Page>
-                </Breadcrumb.Item>
-            </Breadcrumb.List>
-        </Breadcrumb.Root>
-    </div>
+	<div class="flex items-center gap-2 px-4">
+		<Sidebar.Trigger class="-ml-1" />
+		<Separator class="mr-2 h-4" orientation="vertical" />
+		<Breadcrumb.Root>
+			<Breadcrumb.List>
+				<Breadcrumb.Item class="hidden md:block">
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block" />
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block" />
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>Movies</Breadcrumb.Page>
+				</Breadcrumb.Item>
+			</Breadcrumb.List>
+		</Breadcrumb.Root>
+	</div>
 </header>
 <main class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
-    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">Movies</h1>
-    {#if importableMovies().length > 0}
-        <div
-                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
-        >
-            {#each importableMovies() as importable (importable.directory)}
-                <DetectedMediaCard isTv={false} directory={importable.directory}>
-                    <ImportCandidatesDialog
-                            isTv={false}
-                            name={importable.directory}
-                            candidates={importable.candidates}
-                    >
-                        Import movie
-                    </ImportCandidatesDialog>
-                </DetectedMediaCard>
-            {/each}
-        </div>
-    {/if}
-    {#await data.movies}
-        <LoadingBar/>
-    {:then movies}
-        <div
-                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-        >
-            {#each movies as movie (movie.id)}
-                <a href={resolve('/dashboard/movies/[movieId]', { movieId: movie.id! })}>
-                    <Card.Root class="col-span-full max-w-[90vw] ">
-                        <Card.Header>
-                            <Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(movie)}</Card.Title>
-                            <Card.Description class="truncate">{movie.overview}</Card.Description>
-                        </Card.Header>
-                        <Card.Content>
-                            <MediaPicture media={movie}/>
-                        </Card.Content>
-                    </Card.Root>
-                </a>
-            {:else}
-                <div class="col-span-full text-center text-muted-foreground">No movies added yet.</div>
-            {/each}
-        </div>
-    {/await}
+	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">Movies</h1>
+	{#if importableMovies().length > 0}
+		<div
+			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
+		>
+			{#each importableMovies() as importable (importable.directory)}
+				<DetectedMediaCard isTv={false} directory={importable.directory}>
+					<ImportCandidatesDialog
+						isTv={false}
+						name={importable.directory}
+						candidates={importable.candidates}
+					>
+						Import movie
+					</ImportCandidatesDialog>
+				</DetectedMediaCard>
+			{/each}
+		</div>
+	{/if}
+	{#await data.movies}
+		<LoadingBar />
+	{:then movies}
+		<div
+			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+		>
+			{#each movies as movie (movie.id)}
+				<a href={resolve('/dashboard/movies/[movieId]', { movieId: movie.id! })}>
+					<Card.Root class="col-span-full max-w-[90vw] ">
+						<Card.Header>
+							<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(movie)}</Card.Title>
+							<Card.Description class="truncate">{movie.overview}</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<MediaPicture media={movie} />
+						</Card.Content>
+					</Card.Root>
+				</a>
+			{:else}
+				<div class="col-span-full text-center text-muted-foreground">No movies added yet.</div>
+			{/each}
+		</div>
+	{/await}
 </main>
diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte
index b5207e8..eb1a98b 100644
--- a/web/src/routes/dashboard/tv/+page.svelte
+++ b/web/src/routes/dashboard/tv/+page.svelte
@@ -1,92 +1,91 @@
 <script lang="ts">
-    import {page} from '$app/state';
-    import * as Card from '$lib/components/ui/card/index.js';
-    import {Separator} from '$lib/components/ui/separator/index.js';
-    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-    import {getFullyQualifiedMediaName} from '$lib/utils';
-    import MediaPicture from '$lib/components/media-picture.svelte';
-    import {resolve} from '$app/paths';
-    import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
-    import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
-    import type {components} from '$lib/api/api';
-    import {getContext} from 'svelte';
-    import type {PageProps} from './$types';
-    import LoadingBar from '$lib/components/loading-bar.svelte';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import { getFullyQualifiedMediaName } from '$lib/utils';
+	import MediaPicture from '$lib/components/media-picture.svelte';
+	import { resolve } from '$app/paths';
+	import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
+	import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
+	import type { components } from '$lib/api/api';
+	import { getContext } from 'svelte';
+	import type { PageProps } from './$types';
+	import LoadingBar from '$lib/components/loading-bar.svelte';
 
-    let {data}: PageProps = $props();
-    let importableShows: () => components['schemas']['MediaImportSuggestion'][] =
-        getContext('importableShows');
+	let { data }: PageProps = $props();
+	let importableShows: () => components['schemas']['MediaImportSuggestion'][] =
+		getContext('importableShows');
 </script>
 
 <svelte:head>
-    <title>TV Shows - MediaManager</title>
-    <meta content="Browse and manage your TV show collection in MediaManager" name="description"/>
+	<title>TV Shows - MediaManager</title>
+	<meta content="Browse and manage your TV show collection in MediaManager" name="description" />
 </svelte:head>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
-    <div class="flex items-center gap-2 px-4">
-        <Sidebar.Trigger class="-ml-1"/>
-        <Separator class="mr-2 h-4" orientation="vertical"/>
-        <Breadcrumb.Root>
-            <Breadcrumb.List>
-                <Breadcrumb.Item class="hidden md:block">
-                    <Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
-                </Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
-                    <Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
-                </Breadcrumb.Item>
-                <Breadcrumb.Separator class="hidden md:block"/>
-                <Breadcrumb.Item>
-                    <Breadcrumb.Page>Shows</Breadcrumb.Page>
-                </Breadcrumb.Item>
-            </Breadcrumb.List>
-        </Breadcrumb.Root>
-    </div>
+	<div class="flex items-center gap-2 px-4">
+		<Sidebar.Trigger class="-ml-1" />
+		<Separator class="mr-2 h-4" orientation="vertical" />
+		<Breadcrumb.Root>
+			<Breadcrumb.List>
+				<Breadcrumb.Item class="hidden md:block">
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block" />
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block" />
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>Shows</Breadcrumb.Page>
+				</Breadcrumb.Item>
+			</Breadcrumb.List>
+		</Breadcrumb.Root>
+	</div>
 </header>
 <main class="flex w-full flex-col gap-4 p-4 pt-0">
-    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-        TV Shows
-    </h1>
-    {#if importableShows().length > 0}
-        <div
-                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
-        >
-            {#each importableShows() as importable (importable.directory)}
-                <DetectedMediaCard isTv={true} directory={importable.directory}>
-                    <ImportCandidatesDialog
-                            isTv={true}
-                            name={importable.directory}
-                            candidates={importable.candidates}
-                    >
-                        Import TV show
-                    </ImportCandidatesDialog>
-                </DetectedMediaCard>
-            {/each}
-        </div>
-    {/if}
-    {#await data.tvShows}
-        <LoadingBar />
-    {:then tvShows}
-    <div
-                class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-        >
-            {#each tvShows as show (show.id)}
-                <a href={resolve('/dashboard/tv/[showId]', { showId: show.id })}>
-                    <Card.Root class="col-span-full max-w-[90vw] ">
-                        <Card.Header>
-                            <Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
-                            <Card.Description class="truncate">{show.overview}</Card.Description>
-                        </Card.Header>
-                        <Card.Content>
-                            <MediaPicture media={show}/>
-                        </Card.Content>
-                    </Card.Root>
-                </a>
-            {:else}
-                <div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
-            {/each}
-        </div>
-    {/await}
+	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+		TV Shows
+	</h1>
+	{#if importableShows().length > 0}
+		<div
+			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4"
+		>
+			{#each importableShows() as importable (importable.directory)}
+				<DetectedMediaCard isTv={true} directory={importable.directory}>
+					<ImportCandidatesDialog
+						isTv={true}
+						name={importable.directory}
+						candidates={importable.candidates}
+					>
+						Import TV show
+					</ImportCandidatesDialog>
+				</DetectedMediaCard>
+			{/each}
+		</div>
+	{/if}
+	{#await data.tvShows}
+		<LoadingBar />
+	{:then tvShows}
+		<div
+			class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+		>
+			{#each tvShows as show (show.id)}
+				<a href={resolve('/dashboard/tv/[showId]', { showId: show.id })}>
+					<Card.Root class="col-span-full max-w-[90vw] ">
+						<Card.Header>
+							<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
+							<Card.Description class="truncate">{show.overview}</Card.Description>
+						</Card.Header>
+						<Card.Content>
+							<MediaPicture media={show} />
+						</Card.Content>
+					</Card.Root>
+				</a>
+			{:else}
+				<div class="col-span-full text-center text-muted-foreground">No TV shows added yet.</div>
+			{/each}
+		</div>
+	{/await}
 </main>