diff --git a/web/src/lib/components/stats/stat-cards.svelte b/web/src/lib/components/stats/stat-cards.svelte
index 5e50223..38b1acc 100644
--- a/web/src/lib/components/stats/stat-cards.svelte
+++ b/web/src/lib/components/stats/stat-cards.svelte
@@ -5,6 +5,7 @@
 	import { isSemver, semverIsGreater } from '$lib/utils.ts';
 	import { env } from '$env/dynamic/public';
 	import { animate } from 'animejs';
+	import { resolve } from '$app/paths';
 
 	let moviesCount: string | null = $state(null);
 	let episodeCount: string | null = $state(null);
@@ -14,6 +15,9 @@
 	let releaseUrl: string | null = $state(null);
 	let newestVersion: string | null = $state(null);
 
+	let importablesShowsCount: number = $state(0);
+	let importablesMoviesCount: number = $state(0);
+
 	// Elements to animate
 	let showEl: HTMLSpanElement;
 	let episodeEl: HTMLSpanElement;
@@ -70,6 +74,15 @@
 			newestVersion = latestRelease.tag_name.toString().replace(/v*/, '');
 			releaseUrl = latestRelease.html_url;
 		}
+
+		let importableShows = await client.GET('/api/v1/tv/importable');
+		if (!importableShows.error) {
+			importablesShowsCount = importableShows.data.length;
+		}
+		let importableMovies = await client.GET('/api/v1/movies/importable');
+		if (!importableMovies.error) {
+			importablesMoviesCount = importableMovies.data.length;
+		}
 	});
 </script>
 
@@ -94,6 +107,29 @@
 			<span bind:this={torrentEl}>{torrentCount ?? 'Error'}</span>
 		</Card>
 	</div>
+	{#if importablesShowsCount > 0}
+		<div class="flex-auto">
+			<Card title="Detected TV shows!" footer="Count of detected TV shows ready to import">
+				<a rel="external" target="_blank" href={resolve('/dashboard/tv/', {})} class="underline">
+					{importablesShowsCount}
+				</a>
+			</Card>
+		</div>
+	{/if}
+	{#if importablesMoviesCount > 0}
+		<div class="flex-auto">
+			<Card title="Detected movies!" footer="Count of detected movies ready to import">
+				<a
+					rel="external"
+					target="_blank"
+					href={resolve('/dashboard/movies/', {})}
+					class="underline"
+				>
+					{importablesMoviesCount}
+				</a>
+			</Card>
+		</div>
+	{/if}
 	<div class="flex-auto">
 		{#if semverIsGreater(newestVersion ?? '', installedVersion ?? '') || !isSemver(installedVersion ?? '')}
 			<Card title="New version available!" footer="A new version of MediaManager is available!">
diff --git a/web/src/routes/dashboard/movies/+page.svelte b/web/src/routes/dashboard/movies/+page.svelte
index 8eee4ca..5a2e5f3 100644
--- a/web/src/routes/dashboard/movies/+page.svelte
+++ b/web/src/routes/dashboard/movies/+page.svelte
@@ -10,8 +10,8 @@
 	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';
-	let movies: components['schemas']['PublicMovie'][] = page.data.movies;
-	let importables = page.data.importable;
+	let movies: components['schemas']['PublicMovie'][] = $derived(page.data.movies);
+	let importables = $derived(page.data.importable);
 </script>
 
 <svelte:head>
diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte
index 8c1b8e8..4ea0847 100644
--- a/web/src/routes/dashboard/tv/+page.svelte
+++ b/web/src/routes/dashboard/tv/+page.svelte
@@ -10,8 +10,8 @@
 	import ImportCandidatesDialog from '$lib/components/import-media/import-candidates-dialog.svelte';
 	import DetectedMediaCard from '$lib/components/import-media/detected-media-card.svelte';
 
-	let tvShows = $state(page.data.tvShows);
-	let importables = $state(page.data.importable);
+	let tvShows = $derived(page.data.tvShows);
+	let importables = $derived(page.data.importable);
 </script>
 
 <svelte:head>