diff --git a/app/pages/leaderboard/likes.vue b/app/pages/leaderboard/likes.vue
index 63208cfbce..60e309c294 100644
--- a/app/pages/leaderboard/likes.vue
+++ b/app/pages/leaderboard/likes.vue
@@ -12,34 +12,18 @@ useSeoMeta({
 
 const compactNumberFormatter = useCompactNumberFormatter()
 
-const { data: leaderboardEntries, status: leaderboardStatus } = useFetch<LikesLeaderboardEntry[]>(
-  '/api/leaderboard/likes',
-  {
-    default: () => [],
-    server: false,
-  },
-)
-
-const hasResolvedLeaderboardRequest = shallowRef(false)
-
-// Only show the skeleton for the first unresolved request. If this fetch runs
-// again after content is already on screen, keep the current UI to avoid
-// collapsing back to placeholders and causing layout shift.
-watchEffect(() => {
-  if (leaderboardStatus.value === 'success' || leaderboardStatus.value === 'error') {
-    hasResolvedLeaderboardRequest.value = true
-  }
+const { data: leaderboardEntries } = useFetch<LikesLeaderboardEntry[]>('/api/leaderboard/likes', {
+  default: () => [],
 })
 
-const isLoadingLeaderboard = computed(
-  () =>
-    !hasResolvedLeaderboardRequest.value &&
-    (leaderboardStatus.value === 'pending' || leaderboardStatus.value === 'idle'),
-)
-
+const shouldAnimateEntries = ref(false)
 const highlightedEntries = computed(() => leaderboardEntries.value.slice(0, 3))
 const remainingEntries = computed(() => leaderboardEntries.value.slice(3))
 
+onMounted(() => {
+  shouldAnimateEntries.value = true
+})
+
 function getPreviewFallbackClass(rank: number): string {
   switch (rank) {
     case 1:
@@ -79,6 +63,15 @@ function getPodiumItemClass(rank: number): string {
   }
 }
 
+function getResponsivePodiumItemClass(rank: number): string {
+  switch (rank) {
+    case 1:
+      return 'md:col-span-2'
+    default:
+      return 'md:max-w-none'
+  }
+}
+
 function getPodiumCardClass(rank: number): string {
   switch (rank) {
     case 1:
@@ -92,6 +85,12 @@ function formatCompactStat(value: number | null): string | null {
   if (value == null) return null
   return compactNumberFormatter.value.format(value)
 }
+
+function getEntryAnimationStyle(index: number): Record<string, string> {
+  return {
+    animationDelay: `${Math.min(index * 100, 600)}ms`,
+  }
+}
 </script>
 
 <template>
@@ -109,259 +108,117 @@ function formatCompactStat(value: number | null): string | null {
         </p>
       </header>
 
-      <section
-        v-if="isLoadingLeaderboard"
-        aria-busy="true"
-        :aria-label="$t('common.loading')"
-        class="space-y-12"
+      <BaseCard
+        v-if="leaderboardEntries.length === 0"
+        class="cursor-default hover:(border-border bg-bg-subtle)"
       >
-        <ol class="list-none m-0 space-y-4 p-0 pb-4 lg:hidden">
-          <li v-for="rank in [1, 2, 3]" :key="rank" class="space-y-4">
-            <div class="flex justify-center">
-              <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(rank)"
-              >
-                <span>#{{ rank }}</span>
-              </div>
-            </div>
-            <BaseCard
-              class="h-full w-full overflow-hidden p-0 cursor-default hover:(border-border bg-bg-subtle)"
-              :class="getPodiumCardClass(rank)"
-            >
-              <div class="border-b border-border">
-                <SkeletonBlock class="aspect-[1.91/1] w-full" />
-              </div>
-              <div class="space-y-4 px-4 pt-4 pb-1">
-                <div class="flex items-end justify-between gap-4">
-                  <div class="min-w-0">
-                    <SkeletonBlock class="h-7 w-28" />
-                  </div>
-                  <div class="shrink-0 text-end">
-                    <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
-                      {{ $t('leaderboard.likes.likes') }}
-                    </p>
-                    <SkeletonBlock class="ms-auto h-7 w-12" />
-                  </div>
-                </div>
-                <dl class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted">
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-12" />
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-16" />
-                  </div>
-                </dl>
-              </div>
-            </BaseCard>
-          </li>
-        </ol>
+        <h2 class="font-mono text-lg mb-2">
+          {{ $t('leaderboard.likes.unavailable_title') }}
+        </h2>
+        <p class="text-fg-muted">
+          {{ $t('leaderboard.likes.unavailable_description') }}
+        </p>
+      </BaseCard>
 
+      <section v-else class="space-y-12">
         <ol
-          class="hidden list-none m-0 gap-4 p-0 pb-4 lg:grid lg:grid-cols-[minmax(0,0.96fr)_minmax(0,1.08fr)_minmax(0,0.96fr)] lg:items-end lg:gap-6 lg:pb-16"
+          class="grid list-none m-0 grid-cols-1 gap-8 p-0 pb-4 md:grid-cols-2 md:items-start lg:hidden"
         >
           <li
-            v-for="rank in [1, 2, 3]"
-            :key="rank"
-            class="space-y-4"
-            :class="getPodiumItemClass(rank)"
+            v-for="(entry, index) in highlightedEntries"
+            :key="entry.subjectRef"
+            class="mx-auto w-full max-w-xl"
+            :class="getResponsivePodiumItemClass(entry.rank)"
           >
-            <div class="flex justify-center">
-              <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(rank)"
-              >
-                <span>#{{ rank }}</span>
-              </div>
-            </div>
-            <BaseCard
-              class="h-full w-full overflow-hidden p-0 cursor-default hover:(border-border bg-bg-subtle)"
-              :class="getPodiumCardClass(rank)"
+            <div
+              class="space-y-4"
+              :class="{ 'likes-leaderboard-entry-motion': shouldAnimateEntries }"
+              :style="getEntryAnimationStyle(index)"
             >
-              <div class="border-b border-border">
-                <SkeletonBlock class="aspect-[1.91/1] w-full" />
-              </div>
-              <div class="space-y-4 px-4 pt-4 pb-1">
-                <div class="flex items-end justify-between gap-4">
-                  <div class="min-w-0">
-                    <SkeletonBlock class="h-7 w-28" />
-                  </div>
-                  <div class="shrink-0 text-end">
-                    <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
-                      {{ $t('leaderboard.likes.likes') }}
-                    </p>
-                    <SkeletonBlock class="ms-auto h-7 w-12" />
-                  </div>
-                </div>
-                <dl class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted">
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-12" />
-                  </div>
-                  <div class="flex items-center gap-1.5">
-                    <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5 opacity-0" />
-                    <SkeletonBlock class="h-5 w-16" />
-                  </div>
-                </dl>
-              </div>
-            </BaseCard>
-          </li>
-        </ol>
-
-        <ol class="list-none m-0 space-y-4 p-0 pt-2">
-          <li v-for="rank in [4, 5, 6, 7, 8, 9, 10]" :key="rank">
-            <BaseCard
-              class="flex w-full items-center justify-between gap-4 min-w-0 cursor-default hover:(border-border bg-bg-subtle)"
-            >
-              <div class="flex items-center gap-4 min-w-0">
+              <div class="flex justify-center">
                 <div
-                  aria-hidden="true"
-                  class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-accent/20 bg-accent/10 text-accent font-mono text-sm"
+                  class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
+                  :class="getMedalBadgeClass(entry.rank)"
                 >
-                  #{{ rank }}
+                  <span>#{{ entry.rank }}</span>
                 </div>
-                <div
-                  aria-hidden="true"
-                  class="hidden h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-bg-subtle/70 p-2 sm:flex"
+              </div>
+
+              <NuxtLink
+                :to="packageRoute(entry.packageName)"
+                class="leaderboard-package-link block w-full rounded-lg no-underline text-inherit hover:no-underline focus-visible:outline-none"
+              >
+                <BaseCard
+                  class="leaderboard-package-card w-full overflow-hidden p-0! transition-[border-color,background-color,outline-color,transform]"
+                  :class="getPodiumCardClass(entry.rank)"
                 >
-                  <SkeletonBlock class="h-8 w-8 rounded-lg" />
-                </div>
-                <div class="min-w-0">
-                  <div class="flex items-center gap-2 min-w-0">
+                  <div class="-mx-px -mt-px overflow-hidden rounded-t-lg border-b border-border">
+                    <img
+                      v-if="entry.homepagePreviewUrl"
+                      :src="entry.homepagePreviewUrl"
+                      alt=""
+                      loading="eager"
+                      :fetchpriority="entry.rank === 1 ? 'high' : 'auto'"
+                      :width="entry.homepagePreviewWidth ?? undefined"
+                      :height="entry.homepagePreviewHeight ?? undefined"
+                      class="block aspect-[1.91/1] h-auto w-full object-cover"
+                    />
                     <div
-                      aria-hidden="true"
-                      class="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-bg-subtle/70 p-1 sm:hidden"
+                      v-else
+                      class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
+                      :class="getPreviewFallbackClass(entry.rank)"
                     >
-                      <SkeletonBlock class="h-4 w-4 rounded-sm" />
-                    </div>
-                    <SkeletonBlock class="h-7 w-28" />
-                  </div>
-                  <SkeletonBlock class="mt-1 h-6 w-48" />
-                  <div
-                    class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
-                  >
-                    <div class="flex items-center gap-1.5">
-                      <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5 opacity-0" />
-                      <SkeletonBlock class="h-5 w-12" />
-                    </div>
-                    <div class="flex items-center gap-1.5">
-                      <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5 opacity-0" />
-                      <SkeletonBlock class="h-5 w-16" />
+                      <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
+                        {{ entry.packageName }}
+                      </p>
                     </div>
                   </div>
-                </div>
-              </div>
 
-              <div class="shrink-0 text-end">
-                <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg">
-                  {{ $t('leaderboard.likes.likes') }}
-                </p>
-                <SkeletonBlock class="ms-auto mt-2 h-8 w-12" />
-              </div>
-            </BaseCard>
-          </li>
-        </ol>
-      </section>
-
-      <BaseCard
-        v-else-if="leaderboardEntries.length === 0"
-        class="cursor-default hover:(border-border bg-bg-subtle)"
-      >
-        <h2 class="font-mono text-lg mb-2">
-          {{ $t('leaderboard.likes.unavailable_title') }}
-        </h2>
-        <p class="text-fg-muted">
-          {{ $t('leaderboard.likes.unavailable_description') }}
-        </p>
-      </BaseCard>
-
-      <section v-else class="space-y-12">
-        <ol class="list-none m-0 space-y-4 p-0 pb-4 lg:hidden">
-          <li v-for="entry in highlightedEntries" :key="entry.subjectRef" class="space-y-4">
-            <div class="flex justify-center">
-              <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(entry.rank)"
-              >
-                <span>#{{ entry.rank }}</span>
-              </div>
-            </div>
-
-            <NuxtLink
-              :to="packageRoute(entry.packageName)"
-              class="block h-full w-full no-underline text-inherit hover:no-underline"
-            >
-              <BaseCard
-                class="h-full w-full overflow-hidden p-0 transition-transform"
-                :class="getPodiumCardClass(entry.rank)"
-              >
-                <div class="border-b border-border">
-                  <img
-                    v-if="entry.homepagePreviewUrl"
-                    :src="entry.homepagePreviewUrl"
-                    alt=""
-                    loading="lazy"
-                    :width="entry.homepagePreviewWidth ?? undefined"
-                    :height="entry.homepagePreviewHeight ?? undefined"
-                    class="block aspect-[1.91/1] h-auto w-full object-cover"
-                  />
                   <div
-                    v-else
-                    class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
-                    :class="getPreviewFallbackClass(entry.rank)"
+                    class="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4 px-5 py-5 sm:px-6"
                   >
-                    <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
-                      {{ entry.packageName }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="space-y-4 px-4 pt-4 pb-1">
-                  <div class="flex items-end justify-between gap-4">
-                    <div class="min-w-0">
-                      <p class="truncate font-mono text-lg" :title="entry.packageName">
+                    <div class="min-w-0 space-y-3">
+                      <p class="truncate font-mono text-xl" :title="entry.packageName">
                         {{ entry.packageName }}
                       </p>
+                      <dl
+                        v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
+                        class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
+                      >
+                        <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
+                            <span class="font-mono">{{
+                              formatCompactStat(entry.repositoryStars)
+                            }}</span>
+                          </dd>
+                        </div>
+                        <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
+                            <span class="font-mono">
+                              {{ formatCompactStat(entry.weeklyDownloads)
+                              }}{{ $t('common.per_week_short') }}
+                            </span>
+                          </dd>
+                        </div>
+                      </dl>
                     </div>
 
                     <div class="shrink-0 text-end">
-                      <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
+                      <p class="mb-2 text-xs uppercase tracking-wider text-fg-muted">
                         {{ $t('leaderboard.likes.likes') }}
                       </p>
-                      <p class="font-mono text-lg">
+                      <p class="font-mono text-2xl leading-none">
                         {{ compactNumberFormatter.format(entry.totalLikes) }}
                       </p>
                     </div>
                   </div>
-                  <dl
-                    v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
-                    class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
-                  >
-                    <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
-                        <span class="font-mono">{{
-                          formatCompactStat(entry.repositoryStars)
-                        }}</span>
-                      </dd>
-                    </div>
-                    <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
-                        <span class="font-mono">
-                          {{ formatCompactStat(entry.weeklyDownloads)
-                          }}{{ $t('common.per_week_short') }}
-                        </span>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </BaseCard>
-            </NuxtLink>
+                </BaseCard>
+              </NuxtLink>
+            </div>
           </li>
         </ol>
 
@@ -370,93 +227,97 @@ function formatCompactStat(value: number | null): string | null {
           class="hidden list-none m-0 gap-4 p-0 pb-4 lg:grid lg:grid-cols-[minmax(0,0.96fr)_minmax(0,1.08fr)_minmax(0,0.96fr)] lg:items-end lg:gap-6 lg:pb-16"
         >
           <li
-            v-for="entry in highlightedEntries"
+            v-for="(entry, index) in highlightedEntries"
             :key="entry.subjectRef"
-            class="space-y-4"
             :class="getPodiumItemClass(entry.rank)"
           >
-            <div class="flex justify-center">
-              <div
-                class="inline-flex items-center rounded-full border px-3.5 py-2 text-lg font-mono shadow-sm"
-                :class="getMedalBadgeClass(entry.rank)"
-              >
-                <span>#{{ entry.rank }}</span>
+            <div
+              class="space-y-4"
+              :class="{ 'likes-leaderboard-entry-motion': shouldAnimateEntries }"
+              :style="getEntryAnimationStyle(index)"
+            >
+              <div class="flex justify-center">
+                <div
+                  class="inline-flex h-12 w-12 items-center justify-center rounded-full border text-lg font-mono shadow-sm"
+                  :class="getMedalBadgeClass(entry.rank)"
+                >
+                  <span>#{{ entry.rank }}</span>
+                </div>
               </div>
-            </div>
 
-            <NuxtLink
-              :to="packageRoute(entry.packageName)"
-              class="block h-full w-full no-underline text-inherit hover:no-underline"
-            >
-              <BaseCard
-                class="h-full w-full overflow-hidden p-0 transition-transform"
-                :class="getPodiumCardClass(entry.rank)"
+              <NuxtLink
+                :to="packageRoute(entry.packageName)"
+                class="leaderboard-package-link block h-full w-full rounded-lg no-underline text-inherit hover:no-underline focus-visible:outline-none"
               >
-                <div class="border-b border-border">
-                  <img
-                    v-if="entry.homepagePreviewUrl"
-                    :src="entry.homepagePreviewUrl"
-                    alt=""
-                    loading="lazy"
-                    :width="entry.homepagePreviewWidth ?? undefined"
-                    :height="entry.homepagePreviewHeight ?? undefined"
-                    class="block aspect-[1.91/1] h-auto w-full object-cover"
-                  />
-                  <div
-                    v-else
-                    class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
-                    :class="getPreviewFallbackClass(entry.rank)"
-                  >
-                    <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
-                      {{ entry.packageName }}
-                    </p>
+                <BaseCard
+                  class="leaderboard-package-card h-full w-full overflow-hidden p-0! transition-[border-color,background-color,outline-color,transform]"
+                  :class="getPodiumCardClass(entry.rank)"
+                >
+                  <div class="-mx-px -mt-px overflow-hidden rounded-t-lg border-b border-border">
+                    <img
+                      v-if="entry.homepagePreviewUrl"
+                      :src="entry.homepagePreviewUrl"
+                      alt=""
+                      loading="eager"
+                      :fetchpriority="entry.rank === 1 ? 'high' : 'auto'"
+                      :width="entry.homepagePreviewWidth ?? undefined"
+                      :height="entry.homepagePreviewHeight ?? undefined"
+                      class="block aspect-[1.91/1] h-auto w-full object-cover"
+                    />
+                    <div
+                      v-else
+                      class="flex aspect-[1.91/1] items-end bg-gradient-to-br p-4"
+                      :class="getPreviewFallbackClass(entry.rank)"
+                    >
+                      <p class="max-w-full break-all font-mono text-lg text-balance text-fg">
+                        {{ entry.packageName }}
+                      </p>
+                    </div>
                   </div>
-                </div>
 
-                <div class="space-y-4 px-4 pt-4 pb-1">
-                  <div class="flex items-end justify-between gap-4">
-                    <div class="min-w-0">
-                      <p class="truncate font-mono text-lg" :title="entry.packageName">
+                  <div class="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-4 px-5 py-5">
+                    <div class="min-w-0 space-y-3">
+                      <p class="truncate font-mono text-xl" :title="entry.packageName">
                         {{ entry.packageName }}
                       </p>
+                      <dl
+                        v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
+                        class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
+                      >
+                        <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
+                            <span class="font-mono">{{
+                              formatCompactStat(entry.repositoryStars)
+                            }}</span>
+                          </dd>
+                        </div>
+                        <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
+                          <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
+                          <dd class="flex items-center gap-1.5">
+                            <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
+                            <span class="font-mono">
+                              {{ formatCompactStat(entry.weeklyDownloads)
+                              }}{{ $t('common.per_week_short') }}
+                            </span>
+                          </dd>
+                        </div>
+                      </dl>
                     </div>
 
                     <div class="shrink-0 text-end">
-                      <p class="mb-1 text-xs uppercase tracking-wider text-fg-muted">
+                      <p class="mb-2 text-xs uppercase tracking-wider text-fg-muted">
                         {{ $t('leaderboard.likes.likes') }}
                       </p>
-                      <p class="font-mono text-lg">
+                      <p class="font-mono text-2xl leading-none">
                         {{ compactNumberFormatter.format(entry.totalLikes) }}
                       </p>
                     </div>
                   </div>
-                  <dl
-                    v-if="entry.repositoryStars != null || entry.weeklyDownloads != null"
-                    class="m-0 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-fg-muted"
-                  >
-                    <div v-if="entry.repositoryStars != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('command_palette.package_links.stars') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:star h-3.5 w-3.5" />
-                        <span class="font-mono">{{
-                          formatCompactStat(entry.repositoryStars)
-                        }}</span>
-                      </dd>
-                    </div>
-                    <div v-if="entry.weeklyDownloads != null" class="flex items-center gap-1.5">
-                      <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
-                      <dd class="flex items-center gap-1.5">
-                        <span aria-hidden="true" class="i-lucide:chart-line h-3.5 w-3.5" />
-                        <span class="font-mono">
-                          {{ formatCompactStat(entry.weeklyDownloads)
-                          }}{{ $t('common.per_week_short') }}
-                        </span>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </BaseCard>
-            </NuxtLink>
+                </BaseCard>
+              </NuxtLink>
+            </div>
           </li>
         </ol>
 
@@ -465,12 +326,19 @@ function formatCompactStat(value: number | null): string | null {
           :start="highlightedEntries.length + 1"
           class="list-none m-0 space-y-4 p-0 pt-2"
         >
-          <li v-for="entry in remainingEntries" :key="entry.subjectRef">
+          <li
+            v-for="(entry, index) in remainingEntries"
+            :key="entry.subjectRef"
+            :class="{ 'likes-leaderboard-entry-motion': shouldAnimateEntries }"
+            :style="getEntryAnimationStyle(index + highlightedEntries.length)"
+          >
             <NuxtLink
               :to="packageRoute(entry.packageName)"
-              class="block w-full no-underline hover:no-underline"
+              class="leaderboard-package-link block w-full rounded-lg no-underline hover:no-underline focus-visible:outline-none"
             >
-              <BaseCard class="flex w-full items-center justify-between gap-4 min-w-0">
+              <BaseCard
+                class="leaderboard-package-card flex w-full items-center justify-between gap-4 min-w-0"
+              >
                 <div class="flex items-center gap-4 min-w-0">
                   <div
                     aria-hidden="true"
@@ -479,34 +347,36 @@ function formatCompactStat(value: number | null): string | null {
                     #{{ entry.rank }}
                   </div>
                   <div
-                    v-if="entry.homepageLogoUrl"
                     aria-hidden="true"
                     class="hidden h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-bg-subtle/70 p-2 sm:flex"
                   >
                     <img
+                      v-if="entry.homepageLogoUrl"
                       :src="entry.homepageLogoUrl"
                       alt=""
                       loading="lazy"
                       :width="entry.homepageLogoWidth ?? undefined"
                       :height="entry.homepageLogoHeight ?? undefined"
-                      class="max-h-full max-w-full object-contain"
+                      class="max-h-full max-w-full rounded-sm object-contain"
                     />
+                    <span v-else class="i-lucide:package h-6 w-6 text-fg-muted" />
                   </div>
                   <div class="min-w-0">
                     <div class="flex items-center gap-2 min-w-0">
                       <div
-                        v-if="entry.homepageLogoUrl"
                         aria-hidden="true"
                         class="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-bg-subtle/70 p-1 sm:hidden"
                       >
                         <img
+                          v-if="entry.homepageLogoUrl"
                           :src="entry.homepageLogoUrl"
                           alt=""
                           loading="lazy"
                           :width="entry.homepageLogoWidth ?? undefined"
                           :height="entry.homepageLogoHeight ?? undefined"
-                          class="max-h-full max-w-full object-contain"
+                          class="max-h-full max-w-full rounded-sm object-contain"
                         />
+                        <span v-else class="i-lucide:package h-3.5 w-3.5 text-fg-muted" />
                       </div>
                       <p class="min-w-0 font-mono text-lg truncate" :title="entry.packageName">
                         <span class="sr-only"
@@ -551,7 +421,7 @@ function formatCompactStat(value: number | null): string | null {
 
                 <div class="shrink-0 text-end">
                   <div>
-                    <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg">
+                    <p class="mb-1 text-3xs font-medium uppercase tracking-[0.18em] text-fg-muted">
                       {{ $t('leaderboard.likes.likes') }}
                     </p>
                     <p class="font-mono text-2xl leading-none">
@@ -567,3 +437,47 @@ function formatCompactStat(value: number | null): string | null {
     </article>
   </main>
 </template>
+
+<style scoped>
+.leaderboard-package-card {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.leaderboard-package-link:focus-visible .leaderboard-package-card {
+  background: var(--bg-muted);
+  border-color: var(--border-hover);
+  outline-color: color-mix(in oklab, var(--fg) 60%, transparent);
+}
+
+.likes-leaderboard-entry-motion {
+  animation: likes-leaderboard-pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+  transform-origin: center top;
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .likes-leaderboard-entry-motion {
+    animation: none;
+    will-change: auto;
+  }
+}
+
+@keyframes likes-leaderboard-pop-in {
+  from {
+    transform: translate3d(0, 20px, 0) scale(0.96);
+  }
+
+  50% {
+    transform: translate3d(0, -6px, 0) scale(1.02);
+  }
+
+  70% {
+    transform: translate3d(0, 2px, 0) scale(0.998);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 13b4bbeb4a..17ac34033f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -141,10 +141,10 @@ export default defineNuxtConfig({
     '/oauth-client-metadata.json': { prerender: true },
     '/.well-known/jwks.json': { prerender: true },
     '/.well-known/site.standard.publication': { prerender: true },
+    '/api/leaderboard/likes': { isr: 900 },
     // never cache
     '/api/auth/**': { isr: false, cache: false },
     '/api/social/**': { isr: false, cache: false },
-    '/api/leaderboard/likes': { isr: false, cache: false },
     '/api/atproto/bluesky-comments': {
       isr: {
         expiration: 60 * 60 /* one hour */,