diff --git a/src/lib/components/atoms/StatsCard.svelte b/src/lib/components/atoms/StatsCard.svelte
new file mode 100644
index 0000000..1380ef4
--- /dev/null
+++ b/src/lib/components/atoms/StatsCard.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	type Props = {
+		title: string;
+		value: number | string;
+		description?: string;
+	};
+
+	let { title, value, description }: Props = $props();
+</script>
+
+<div
+	class="rounded-2xl bg-gray-200 p-4 shadow-sm transition-all duration-200 ease-in-out hover:shadow-md md:p-6"
+>
+	<div class="mb-1 text-sm text-gray-600">{title}</div>
+	<div class="text-3xl font-bold text-gray-800">{value}</div>
+	{#if description}
+		<div class="mt-2 text-xs text-gray-500">{description}</div>
+	{/if}
+</div>