diff --git a/web/src/lib/TopPlayerCard.svelte b/web/src/lib/TopPlayerCard.svelte
new file mode 100644
index 0000000..fc5e8d9
--- /dev/null
+++ b/web/src/lib/TopPlayerCard.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { link } from "@dvcol/svelte-simple-router/router";
+
+  let {
+    place,
+    name,
+    elo,
+    playerID,
+  }: { place: number; name: string; elo: number; playerID: string } = $props();
+
+  function getPlaceClass(place: number) {
+    if (place == 1) return "bg-yellow-500";
+    if (place == 2) return "bg-slate-500";
+    if (place == 3) return "bg-amber-800";
+    return "bg-slate-800";
+  }
+
+  let placeClass = $derived(getPlaceClass(place));
+</script>
+
+<a use:link href="/player/{playerID}">
+  <div class="flex justify-between w-full border rounded-xl my-3 min-h-10">
+    <div class="{placeClass} px-3 py-1 rounded-l-xl flex items-center">{place}.</div>
+    <div class=" py-1 flex items-center">{name}</div>
+    <div class="rounded-r-xl px-3 py-1 bg-blue-400 flex items-center">{elo}</div>
+  </div>
+</a>