diff --git a/src/lib/cards/index.ts b/src/lib/cards/index.ts
index 708d743..7e3b663 100644
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -41,6 +41,7 @@ import { GitHubContributorsCardDefinition } from './social/GitHubContributorsCar
 import { ProductHuntCardDefinition } from './social/ProductHuntCard';
 import { KickstarterCardDefinition } from './social/KickstarterCard';
 import { NpmxLikesCardDefinition } from './social/NpmxLikesCard';
+import { NpmxLikesLeaderboardCardDefinition } from './social/NpmxLikesLeaderboardCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
@@ -86,7 +87,8 @@ export const AllCardDefinitions = [
 	GitHubContributorsCardDefinition,
 	ProductHuntCardDefinition,
 	KickstarterCardDefinition,
-	NpmxLikesCardDefinition
+	NpmxLikesCardDefinition,
+	NpmxLikesLeaderboardCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(
diff --git a/src/lib/cards/social/NpmxLikesLeaderboardCard/NpmxLikesLeaderboardCard.svelte b/src/lib/cards/social/NpmxLikesLeaderboardCard/NpmxLikesLeaderboardCard.svelte
new file mode 100644
index 0000000..c7e3b6e
--- /dev/null
+++ b/src/lib/cards/social/NpmxLikesLeaderboardCard/NpmxLikesLeaderboardCard.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '../..';
+
+	interface LeaderboardEntry {
+		subjectRef: string;
+		totalLikes: number;
+	}
+
+	interface LeaderboardData {
+		totalLikes: number;
+		totalUniqueLikers: number;
+		leaderBoard: LeaderboardEntry[];
+	}
+
+	let { item }: { item: Item } = $props();
+
+	const data = getAdditionalUserData();
+	// svelte-ignore state_referenced_locally
+	let leaderboard = $state(data[item.cardType] as LeaderboardData | undefined);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+
+	onMount(async () => {
+		if (leaderboard) return;
+
+		leaderboard = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+			did,
+			handle
+		})) as LeaderboardData | undefined;
+
+		data[item.cardType] = leaderboard;
+	});
+
+	function getPackageName(entry: LeaderboardEntry): string {
+		return entry.subjectRef.split('/package/')[1] ?? entry.subjectRef;
+	}
+</script>
+
+{#snippet leaderboardRow(entry: LeaderboardEntry, index: number)}
+	<div
+		class="hover:bg-base-100 dark:hover:bg-base-800 accent:hover:bg-white/10 flex w-full items-center gap-3 rounded-lg px-2 py-1.5 transition-colors"
+	>
+		<div
+			class="text-base-600 dark:text-base-400 accent:text-white/60 w-6 shrink-0 text-right text-xs font-medium"
+		>
+			#{index + 1}
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="inline-flex w-full max-w-full items-center justify-between gap-2">
+				<div
+					class="text-accent-500 accent:text-accent-50 dark:text-accent-400 min-w-0 flex-1 shrink truncate text-sm font-semibold"
+				>
+					{getPackageName(entry)}
+				</div>
+				<div
+					class="text-base-500 dark:text-base-400 accent:text-white/60 flex shrink-0 items-center gap-1 text-xs"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						class="accent:text-accent-200 text-accent-400 size-3.5"
+					>
+						<path
+							d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"
+						/>
+					</svg>
+					{entry.totalLikes}
+				</div>
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+<div class="z-10 flex h-full w-full flex-col overflow-hidden">
+	{#if leaderboard && leaderboard.leaderBoard.length > 0}
+		<div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-4 pb-10">
+			{#each leaderboard.leaderBoard as entry, index (entry.subjectRef)}
+				<a
+					href="https://npmx.dev/package/{getPackageName(entry)}"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full"
+				>
+					{@render leaderboardRow(entry, index)}
+				</a>
+			{/each}
+		</div>
+		<div
+			class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-12 bg-linear-to-t from-base-200 from-40% to-transparent dark:from-base-950 accent:from-accent-500"
+		></div>
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 bg-base-200 dark:bg-base-950/50 accent:bg-accent-500/20 relative z-10 flex shrink-0 items-center justify-center gap-3 px-4 pb-3 text-xs"
+		>
+			<span>{leaderboard.totalLikes} likes</span>
+			<span class="text-base-300 dark:text-base-600 accent:text-white/20">&middot;</span>
+			<span>{leaderboard.totalUniqueLikers} unique likers</span>
+		</div>
+	{:else if leaderboard}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center p-4 text-center text-sm"
+		>
+			No leaderboard data.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center p-4 text-center text-sm"
+		>
+			Loading leaderboard...
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/cards/social/NpmxLikesLeaderboardCard/index.ts b/src/lib/cards/social/NpmxLikesLeaderboardCard/index.ts
new file mode 100644
index 0000000..167ab1f
--- /dev/null
+++ b/src/lib/cards/social/NpmxLikesLeaderboardCard/index.ts
@@ -0,0 +1,26 @@
+import type { CardDefinition } from '../../types';
+import NpmxLikesLeaderboardCard from './NpmxLikesLeaderboardCard.svelte';
+
+export const NpmxLikesLeaderboardCardDefinition = {
+	type: 'npmxLikesLeaderboard',
+	contentComponent: NpmxLikesLeaderboardCard,
+	createNew: (card) => {
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 4;
+		card.mobileH = 6;
+	},
+	loadData: async () => {
+		const res = await fetch('https://blento.app/api/npmx-leaderboard');
+		const data = await res.json();
+		return data;
+	},
+	minW: 3,
+	canHaveLabel: true,
+
+	keywords: ['npm', 'package', 'npmx', 'likes', 'leaderboard', 'ranking'],
+	name: 'npmx Likes Leaderboard',
+
+	//groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-4.5A3.375 3.375 0 0 0 13.125 10.875h-2.25A3.375 3.375 0 0 0 7.5 14.25v4.5m6-6V6.375a3.375 3.375 0 0 0-3-3.353A3.375 3.375 0 0 0 7.5 6.375v1.5" /></svg>`
+} as CardDefinition & { type: 'npmxLikesLeaderboard' };
diff --git a/src/routes/api/npmx-leaderboard/+server.ts b/src/routes/api/npmx-leaderboard/+server.ts
index 52456a6..068e80c 100644
--- a/src/routes/api/npmx-leaderboard/+server.ts
+++ b/src/routes/api/npmx-leaderboard/+server.ts
@@ -2,7 +2,7 @@ import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 const LEADERBOARD_API_URL =
-	'https://npmx-likes-leaderboard-api-production.up.railway.app/api/leaderboard/likes';
+	'https://npmx-likes-leaderboard-api-production.up.railway.app/api/leaderboard/likes?limit=20';
 
 export const GET: RequestHandler = async ({ platform }) => {
 	const cacheKey = '#npmx-leaderboard:likes';