diff --git a/web/src/lib/components/stats/card.svelte b/web/src/lib/components/stats/card.svelte
index 9f50cf4..1354cd8 100644
--- a/web/src/lib/components/stats/card.svelte
+++ b/web/src/lib/components/stats/card.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-    import * as Card from "$lib/components/ui/card/index.js";
-
-    let {title, content, footer}: { title: string, content: any, footer: string } = $props()
+	import * as Card from '$lib/components/ui/card/index.js';
 
+	// eslint-disable-next-line
+	let { title, footer, children }: { title: string; footer: string; children: any } = $props();
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title><p>{title}</p></Card.Title>
-    </Card.Header>
-    <Card.Content>
-        <p class="text-2xl font-extrabold leading-0">{content ?? "Error"}</p>
-    </Card.Content>
-    <Card.Footer>
-        <Card.Description >
-            <p>{footer}</p>
-        </Card.Description>
-    </Card.Footer>
+	<Card.Header>
+		<Card.Title><p>{title}</p></Card.Title>
+	</Card.Header>
+	<Card.Content>
+		<p class="text-3xl font-extrabold">{@render children?.()}</p>
+	</Card.Content>
+	<Card.Footer>
+		<Card.Description>
+			<p>{footer}</p>
+		</Card.Description>
+	</Card.Footer>
 </Card.Root>
diff --git a/web/src/lib/components/stats/stat-cards.svelte b/web/src/lib/components/stats/stat-cards.svelte
index b95234e..634f0ae 100644
--- a/web/src/lib/components/stats/stat-cards.svelte
+++ b/web/src/lib/components/stats/stat-cards.svelte
@@ -1,39 +1,67 @@
 <script lang="ts">
-    import { Badge } from "$lib/components/ui/badge/index.js";
-    import Card from "$lib/components/stats/card.svelte";
-    import { onMount } from 'svelte';
-    import client from '$lib/api';
-    import type { components } from '$lib/api/api.d.ts';
+	import Card from '$lib/components/stats/card.svelte';
+	import { onMount } from 'svelte';
+	import client from '$lib/api';
+	import { isSemver, semverIsGreater } from '$lib/utils.ts';
+	import { env } from '$env/dynamic/public';
+	import { resolve } from '$app/paths';
 
-    let moviesCount: string | null = $state(null);
-    let episodeCount: string | null = $state(null);
-    let showCount: string | null = $state(null);
-    let torrentCount: string | null = $state(null);
+	let moviesCount: string | null = $state(null);
+	let episodeCount: string | null = $state(null);
+	let showCount: string | null = $state(null);
+	let torrentCount: string | null = $state(null);
+	let installedVersion: string | undefined = env.PUBLIC_VERSION;
+	let releaseUrl: string | null = $state(null);
+	let newestVersion: string | null = $state(null);
 
-    onMount(async () => {
-        let tvShows = await client.GET("/api/v1/tv/shows")
-        if(!tvShows.error)
-            showCount = tvShows.data.length.toString().padStart(3, "0");
+	onMount(async () => {
+		let tvShows = await client.GET('/api/v1/tv/shows');
+		if (!tvShows.error) showCount = tvShows.data.length.toString().padStart(3, '0');
 
-        let episodes = await client.GET("/api/v1/tv/episodes/count")
-        if(!episodes.error)
-            episodeCount = episodes.data.toString().padStart(3, "0")
+		let episodes = await client.GET('/api/v1/tv/episodes/count');
+		if (!episodes.error) episodeCount = episodes.data.toString().padStart(3, '0');
 
-        let movies = await client.GET("/api/v1/movies")
-        if(!movies.error)
-            moviesCount= movies.data.length.toString().padStart(3, "0")
+		let movies = await client.GET('/api/v1/movies');
+		if (!movies.error) moviesCount = movies.data.length.toString().padStart(3, '0');
 
-        let torrents = await client.GET("/api/v1/torrent")
-        if(!torrents.error)
-            torrentCount = torrents.data.length.toString().padStart(3, "0")
-    })
+		let torrents = await client.GET('/api/v1/torrent');
+		if (!torrents.error) torrentCount = torrents.data.length.toString().padStart(3, '0');
 
+		let releases = await fetch('https://api.github.com/repos/maxdorninger/mediamanager/releases');
+		if (releases.ok) {
+			let latestRelease = await releases.json().then((x) => x[0]);
+			newestVersion = latestRelease.tag_name.toString().replace(/v*/, '');
+			releaseUrl = latestRelease.html_url;
+		}
+	});
 </script>
-<div
-        class="lg:grid-cols-2 xl:grid-cols-4 grid grid-cols-1 gap-4 px-4 lg:px-6"
->
-    <Card title="TV Shows" content={showCount} footer="Total count of downloaded episodes"></Card>
-    <Card title="Episodes" content={episodeCount} footer="Total count of downloaded episodes"></Card>
-    <Card title="Movies" content={moviesCount} footer="Total count of movies"></Card>
-    <Card title="Torrents" content={torrentCount} footer="Total count of torrents/NZBs"></Card>
-</div>
\ No newline at end of file
+
+<div class="flex flex-wrap gap-2">
+	<div class="flex-auto">
+		<Card title="TV Shows" footer="Total count of downloaded episodes">{showCount ?? 'Error'}</Card>
+	</div>
+	<div class="flex-auto">
+		<Card title="Episodes" footer="Total count of downloaded episodes"
+			>{episodeCount ?? 'Error'}</Card
+		>
+	</div>
+	<div class="flex-auto">
+		<Card title="Movies" footer="Total count of movies">{moviesCount ?? 'Error'}</Card>
+	</div>
+	<div class="flex-auto">
+		<Card title="Torrents" footer="Total count of torrents/NZBs">{torrentCount ?? 'Error'}</Card>
+	</div>
+	<div class="flex-auto">
+		{#if semverIsGreater(newestVersion ?? '', installedVersion ?? '') || !isSemver(installedVersion ?? '')}
+			<Card title="New version available!" footer="A new version of MediaManager is available!">
+				<a
+					target="_blank"
+					href={resolve(releaseUrl ?? 'https://github.com/maxdorninger/MediaManager/releases')}
+					class="underline"
+				>
+					{installedVersion} → v{newestVersion}
+				</a>
+			</Card>
+		{/if}
+	</div>
+</div>
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 0011f9b..c8d29ce 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -118,3 +118,12 @@ export function saveDirectoryPreview(
 	}
 	return path;
 }
+
+export function semverIsGreater(a: string, b: string) {
+	return a.localeCompare(b, undefined, { numeric: true }) === 1;
+}
+export function isSemver(str: string) {
+	return str.match(
+		/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
+	);
+}