diff --git a/.changeset/eighty-donkeys-shave.md b/.changeset/eighty-donkeys-shave.md
new file mode 100644
index 0000000..57e7e8b
--- /dev/null
+++ b/.changeset/eighty-donkeys-shave.md
@@ -0,0 +1,16 @@
+---
+'@atmo-dev/events-ui': minor
+---
+
+`EventCard` now shows when a live event **ends** rather than when it started.
+
+A card for an event already under way used to print its start time beside the
+"Live" badge — "Wed, Jul 1 · Live" reads as a bug, and in a list ordered by
+finishing time the start dates look shuffled. Such a card now reads "Ends 9:30 PM",
+dropping the weekday and date when the event ends today, since the only thing a
+reader wants then is how long they have left. The year is kept when the event does
+not end this year: long-running events are exactly what this surfaces, and a
+year-long journey ending in July 2027 rendered as "Ends Sun, Jul 4", which reads as
+a date that has already passed.
+
+Cards for events that have not started are unchanged.
diff --git a/packages/ui/src/EventCard.svelte b/packages/ui/src/EventCard.svelte
index b315870..0a17384 100644
--- a/packages/ui/src/EventCard.svelte
+++ b/packages/ui/src/EventCard.svelte
@@ -21,6 +21,35 @@
 		});
 	}
 
+	/**
+	 * What a card says about an event ALREADY UNDER WAY: when it finishes, not when
+	 * it began. A "Live" badge beside "Wed, Jul 1" reads as a bug, and in a list
+	 * sorted by finishing time the start dates look shuffled. Day and weekday are
+	 * dropped when it ends today, since the only thing a reader wants then is how
+	 * long they have left.
+	 */
+	function formatEndsAt(endsAt: string): string {
+		const end = new Date(endsAt);
+		const now = new Date();
+		const endsToday = end.toDateString() === now.toDateString();
+		// Carry the YEAR when it is not this one. Long-running events are exactly
+		// what this band surfaces — a year-long journey ending 2027-07-04 rendered
+		// as "Ends Sun, Jul 4", which reads as a date three days ago.
+		const endsThisYear = end.getFullYear() === now.getFullYear();
+		return end.toLocaleTimeString('en-US', {
+			...(endsToday
+				? {}
+				: {
+						weekday: 'short',
+						month: 'short',
+						day: 'numeric',
+						...(endsThisYear ? {} : { year: 'numeric' })
+					}),
+			hour: 'numeric',
+			minute: '2-digit'
+		});
+	}
+
 	function getModeLabel(mode: string | undefined): string | undefined {
 		if (!mode) return undefined;
 		if (mode.includes('virtual')) return 'Virtual';
@@ -90,10 +119,16 @@
 
 	<div class="min-w-0 self-center">
 		<p class="text-base-500 dark:text-base-400 flex items-center gap-1.5 text-xs font-medium">
-			{formatDateTime(event.startsAt)}
+			{#if isOngoing && event.endsAt}
+				Ends {formatEndsAt(event.endsAt)}
+			{:else}
+				{formatDateTime(event.startsAt)}
+			{/if}
 			{#if isOngoing}
-				<span class="inline-flex items-center gap-1 rounded-full bg-accent-100 px-1.5 py-0.5 text-[10px] font-semibold text-accent-700 dark:bg-accent-900/30 dark:text-accent-400">
-					<span class="size-1.5 rounded-full bg-accent-500 animate-pulse"></span>
+				<span
+					class="bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-400 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-semibold"
+				>
+					<span class="bg-accent-500 size-1.5 animate-pulse rounded-full"></span>
 					Live
 				</span>
 			{/if}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index c2a35f5..0206834 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -12,7 +12,7 @@
 		"declaration": true,
 		"declarationMap": false,
 		"sourceMap": true,
-		"types": ["svelte"]
+		"types": ["svelte", "vite/client"]
 	},
 	"include": ["src/**/*.ts", "src/**/*.svelte"]
 }