diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index b07f8aac92..2f91330670 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -17,6 +17,18 @@ definePageMeta({
   name: 'package-versions',
 })
 
+interface NpmWebsiteVersionDownload {
+  version: string
+  downloads: number
+}
+
+interface NpmWebsiteVersionsResponse {
+  packages: Array<{
+    packageName: string
+    versions: NpmWebsiteVersionDownload[]
+  }>
+}
+
 /** Number of flat items (headers + version rows) to render statically during SSR */
 const SSR_COUNT = 20
 
@@ -26,6 +38,9 @@ const packageName = computed(() => {
   const { org, name } = route.params
   return org ? `${org}/${name}` : name
 })
+const packageNameQueryParam = computed(() => {
+  return packageName.value ? { packages: packageName.value } : {}
+})
 const orgName = computed(() => route.params.org?.replace('@', '') ?? null)
 
 // ─── Phase 1: lightweight fetch (page load) ───────────────────────────────────
@@ -49,6 +64,65 @@ const distTags = computed(() => versionSummary.value?.distTags ?? {})
 const versionStrings = computed(() => versionSummary.value?.versions ?? [])
 const versionTimes = computed(() => versionSummary.value?.time ?? {})
 
+const { data: npmWebsiteVersions } = useLazyFetch<NpmWebsiteVersionsResponse>(
+  () => '/api/registry/downloads/versions',
+  {
+    key: () => `downloads-versions:${packageName.value}`,
+    query: packageNameQueryParam,
+    deep: false,
+    default: () => ({ packages: [] }),
+    getCachedData(key, nuxtApp) {
+      return nuxtApp.static.data[key] ?? nuxtApp.payload.data[key]
+    },
+  },
+)
+
+const packageVersions = computed(() => {
+  return (
+    npmWebsiteVersions.value?.packages.find(pkg => pkg.packageName === packageName.value)
+      ?.versions ?? []
+  )
+})
+
+const numberFormatter = useNumberFormatter()
+const { t } = useI18n()
+const versionDownloadsMap = computed(
+  () => new Map(packageVersions.value.map(({ version, downloads }) => [version, downloads])),
+)
+
+function getVersionDownloads(version: string): number | undefined {
+  return versionDownloadsMap.value.get(version)
+}
+
+function getGroupDownloads(versions: string[]): number | undefined {
+  let total = 0
+  let hasValue = false
+
+  for (const version of versions) {
+    const downloads = getVersionDownloads(version)
+    if (downloads === undefined) continue
+    total += downloads
+    hasValue = true
+  }
+
+  return hasValue ? total : undefined
+}
+
+const groupDownloadsMap = computed(() => {
+  const map = new Map<string, number>()
+  for (const group of versionGroups.value) {
+    const downloads = getGroupDownloads(group.versions)
+    if (downloads !== undefined) {
+      map.set(group.groupKey, downloads)
+    }
+  }
+  return map
+})
+
+function getDownloadsAriaLabel(downloads: number): string {
+  return `${numberFormatter.value.format(downloads)} ${t('package.downloads.title')}`
+}
+
 // ─── Phase 2: full metadata (fired automatically after phase 1 completes) ────
 // Fetches deprecated status, provenance, and exact times needed for version rows.
 
@@ -260,9 +334,9 @@ const flatItems = computed<FlatItem[]>(() => {
         <!-- Latest — featured card -->
         <div
           v-if="latestTagRow"
-          class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-5 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
+          class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-4 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
         >
-          <!-- Left: tags + version -->
+          <!-- Left: tags + version + deprecated -->
           <div>
             <div class="flex items-center gap-2 mb-1.5 flex-wrap">
               <span class="text-3xs font-bold uppercase tracking-widest text-accent">latest</span>
@@ -273,34 +347,47 @@ const flatItems = computed<FlatItem[]>(() => {
                 :title="tag"
                 >{{ tag }}</span
               >
+              <span
+                v-if="fullVersionMap?.get(latestTagRow!.version)?.deprecated"
+                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                :title="fullVersionMap!.get(latestTagRow!.version)!.deprecated"
+                >deprecated</span
+              >
+            </div>
+            <div class="flex items-center gap-2">
+              <LinkBase
+                :to="packageRoute(packageName, latestTagRow!.version)"
+                class="text-2xl font-semibold tracking-tight after:absolute after:inset-0 after:content-['']"
+                :title="latestTagRow!.version"
+                dir="ltr"
+                >v{{ latestTagRow!.version }}</LinkBase
+              >
+              <ProvenanceBadge
+                v-if="fullVersionMap?.get(latestTagRow!.version)?.hasProvenance"
+                :package-name="packageName"
+                :version="latestTagRow!.version"
+                compact
+                :linked="false"
+                class="relative z-10"
+              />
             </div>
-            <LinkBase
-              :to="packageRoute(packageName, latestTagRow!.version)"
-              class="text-2xl font-semibold tracking-tight after:absolute after:inset-0 after:content-['']"
-              :title="latestTagRow!.version"
-              dir="ltr"
-              >{{ latestTagRow!.version }}</LinkBase
-            >
           </div>
-          <!-- Right: deprecated + date + provenance -->
-          <div class="flex flex-col items-end gap-1.5 shrink-0 relative z-10">
+          <!-- Right: downloads + date -->
+          <div class="flex items-center gap-4 shrink-0 relative z-10">
             <span
-              v-if="fullVersionMap?.get(latestTagRow!.version)?.deprecated"
-              class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
-              :title="fullVersionMap!.get(latestTagRow!.version)!.deprecated"
-              >deprecated</span
+              v-if="getVersionDownloads(latestTagRow!.version)"
+              class="w-28 grid grid-flow-col auto-cols-max items-center gap-1 text-xs text-fg-muted tabular-nums justify-end"
+              :aria-label="getDownloadsAriaLabel(getVersionDownloads(latestTagRow!.version)!)"
+              dir="ltr"
+              :title="getDownloadsAriaLabel(getVersionDownloads(latestTagRow!.version)!)"
             >
-            <ProvenanceBadge
-              v-if="fullVersionMap?.get(latestTagRow!.version)?.hasProvenance"
-              :package-name="packageName"
-              :version="latestTagRow!.version"
-              compact
-              :linked="false"
-            />
+              <span>{{ numberFormatter.format(getVersionDownloads(latestTagRow!.version)!) }}</span>
+              <span class="i-lucide:chart-line" aria-hidden="true"></span>
+            </span>
             <DateTime
               v-if="getVersionTime(latestTagRow!.version)"
               :datetime="getVersionTime(latestTagRow!.version)!"
-              class="text-xs text-fg-subtle"
+              class="text-xs text-fg-subtle whitespace-nowrap w-24 text-end"
               year="numeric"
               month="short"
               day="numeric"
@@ -329,39 +416,55 @@ const flatItems = computed<FlatItem[]>(() => {
               >
             </div>
 
-            <!-- Version -->
-            <LinkBase
-              :to="packageRoute(packageName, row.version)"
-              class="text-sm flex-1 min-w-0 after:absolute after:inset-0 after:content-['']"
-              :title="row.version"
-              dir="ltr"
-            >
-              {{ row.version }}
-            </LinkBase>
-
-            <!-- Deprecated + Date + Provenance -->
-            <div class="flex items-center gap-2 shrink-0 relative z-10">
+            <!-- Version + Provenance + Deprecated -->
+            <div class="flex-1 min-w-0 flex items-center gap-2">
+              <LinkBase
+                :to="packageRoute(packageName, row.version)"
+                class="text-sm after:absolute after:inset-0 after:content-['']"
+                :title="row.version"
+                dir="ltr"
+              >
+                v{{ row.version }}
+              </LinkBase>
+              <ProvenanceBadge
+                v-if="fullVersionMap?.get(row.version)?.hasProvenance"
+                :package-name="packageName"
+                :version="row.version"
+                compact
+                :linked="false"
+                class="relative z-10"
+              />
               <span
                 v-if="fullVersionMap?.get(row.version)?.deprecated"
-                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
                 :title="fullVersionMap!.get(row.version)!.deprecated"
                 >deprecated</span
               >
+            </div>
+
+            <!-- Downloads -->
+            <span
+              v-if="getVersionDownloads(row.version)"
+              class="w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
+              :aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
+              dir="ltr"
+              :title="getDownloadsAriaLabel(getVersionDownloads(row.version)!)"
+            >
+              <span>{{ numberFormatter.format(getVersionDownloads(row.version)!) }}</span>
+              <span class="i-lucide:chart-line" aria-hidden="true"></span>
+            </span>
+            <span v-else class="w-28 shrink-0" />
+
+            <!-- Date -->
+            <div class="flex items-center gap-2 shrink-0 relative z-10">
               <DateTime
                 v-if="getVersionTime(row.version)"
                 :datetime="getVersionTime(row.version)!"
-                class="text-xs text-fg-subtle hidden sm:block"
+                class="text-xs text-fg-subtle hidden sm:block w-24 text-end"
                 year="numeric"
                 month="short"
                 day="numeric"
               />
-              <ProvenanceBadge
-                v-if="fullVersionMap?.get(row.version)?.hasProvenance"
-                :package-name="packageName"
-                :version="row.version"
-                compact
-                :linked="false"
-              />
             </div>
           </div>
         </div>
@@ -427,14 +530,27 @@ const flatItems = computed<FlatItem[]>(() => {
                       >deprecated</span
                     >
                     <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
-                    <span class="ms-auto flex items-center gap-3 shrink-0">
-                      <span class="text-xs text-fg-muted" :title="item.versions[0]" dir="ltr">{{
-                        item.versions[0]
+                    <span class="text-xs text-fg-muted" :title="item.versions[0]" dir="ltr"
+                      >v{{ item.versions[0] }}</span
+                    >
+                    <span
+                      v-if="groupDownloadsMap.has(item.groupKey)"
+                      class="ms-auto w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
+                      :aria-label="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                      dir="ltr"
+                      :title="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                    >
+                      <span>{{
+                        numberFormatter.format(groupDownloadsMap.get(item.groupKey)!)
                       }}</span>
+                      <span class="i-lucide:chart-line" aria-hidden="true"></span>
+                    </span>
+                    <span v-else class="ms-auto w-28 shrink-0" />
+                    <span class="flex items-center gap-3 shrink-0">
                       <DateTime
                         v-if="getVersionTime(item.versions[0])"
                         :datetime="getVersionTime(item.versions[0])!"
-                        class="text-xs text-fg-subtle hidden sm:block"
+                        class="text-xs text-fg-subtle hidden sm:block whitespace-nowrap w-24 text-end"
                         year="numeric"
                         month="short"
                         day="numeric"
@@ -474,8 +590,16 @@ const flatItems = computed<FlatItem[]>(() => {
                           "
                           dir="ltr"
                         >
-                          {{ item.version }}
+                          v{{ item.version }}
                         </LinkBase>
+                        <ProvenanceBadge
+                          v-if="fullVersionMap?.get(item.version)?.hasProvenance"
+                          :package-name="packageName"
+                          :version="item.version"
+                          compact
+                          :linked="false"
+                          class="relative z-10"
+                        />
                         <div
                           v-if="versionToTagsMap.get(item.version)?.length"
                           class="flex items-center gap-1 flex-wrap relative z-10"
@@ -499,24 +623,31 @@ const flatItems = computed<FlatItem[]>(() => {
                         </span>
                       </div>
 
-                      <!-- Right side -->
+                      <!-- Downloads -->
+                      <span
+                        v-if="getVersionDownloads(item.version)"
+                        class="w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
+                        :aria-label="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
+                        :title="getDownloadsAriaLabel(getVersionDownloads(item.version)!)"
+                        dir="ltr"
+                      >
+                        <span>{{
+                          numberFormatter.format(getVersionDownloads(item.version)!)
+                        }}</span>
+                        <span class="i-lucide:chart-line" aria-hidden="true"></span>
+                      </span>
+                      <span v-else class="w-28 shrink-0" />
+
+                      <!-- Date -->
                       <div class="flex items-center gap-2 shrink-0 relative z-10">
-                        <!-- Metadata: date + provenance -->
                         <DateTime
                           v-if="getVersionTime(item.version)"
                           :datetime="getVersionTime(item.version)!"
-                          class="text-xs text-fg-subtle hidden sm:block"
+                          class="text-xs text-fg-subtle hidden sm:block whitespace-nowrap w-24 text-end"
                           year="numeric"
                           month="short"
                           day="numeric"
                         />
-                        <ProvenanceBadge
-                          v-if="fullVersionMap?.get(item.version)?.hasProvenance"
-                          :package-name="packageName"
-                          :version="item.version"
-                          compact
-                          :linked="false"
-                        />
                       </div>
                     </div>
                   </div>
@@ -539,12 +670,25 @@ const flatItems = computed<FlatItem[]>(() => {
                   </span>
                   <span class="text-sm font-medium">{{ item.label }}</span>
                   <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
-                  <span class="ms-auto flex items-center gap-3 shrink-0">
-                    <span class="text-xs text-fg-muted" dir="ltr">{{ item.versions[0] }}</span>
+                  <span v-if="item.versions[0]" class="text-xs text-fg-muted" dir="ltr"
+                    >v{{ item.versions[0] }}</span
+                  >
+                  <span
+                    v-if="groupDownloadsMap.has(item.groupKey)"
+                    class="ms-auto w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
+                    :aria-label="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                    dir="ltr"
+                    :title="getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!)"
+                  >
+                    <span>{{ numberFormatter.format(groupDownloadsMap.get(item.groupKey)!) }}</span>
+                    <span class="i-lucide:chart-line" aria-hidden="true"></span>
+                  </span>
+                  <span v-else class="ms-auto w-28 shrink-0" />
+                  <span class="flex items-center gap-3 shrink-0">
                     <DateTime
                       v-if="getVersionTime(item.versions[0] ?? '')"
                       :datetime="getVersionTime(item.versions[0] ?? '')!"
-                      class="text-xs text-fg-subtle hidden sm:block"
+                      class="text-xs text-fg-subtle hidden sm:block whitespace-nowrap w-24 text-end"
                       year="numeric"
                       month="short"
                       day="numeric"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d206d0824f..9cf50ad8bd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -118,7 +118,7 @@ export default defineNuxtConfig({
       isr: {
         expiration: 60 * 60 /* one hour */,
         passQuery: true,
-        allowQuery: ['mode', 'filterOldVersions', 'filterThreshold'],
+        allowQuery: ['mode', 'filterOldVersions', 'filterThreshold', 'packages'],
       },
     },
     '/api/registry/docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
diff --git a/server/api/registry/downloads/[...slug].get.ts b/server/api/registry/downloads/[...slug].get.ts
index fe2d130ed1..e4e052f1d4 100644
--- a/server/api/registry/downloads/[...slug].get.ts
+++ b/server/api/registry/downloads/[...slug].get.ts
@@ -1,5 +1,6 @@
 import * as v from 'valibot'
 import { hash } from 'ohash'
+import { fetchNpmVersionDownloadsFromApi } from '#server/utils/npm-website-versions'
 
 /**
  * Raw response from npm downloads API
@@ -15,6 +16,7 @@ interface NpmVersionDownloadsResponse {
  */
 const QuerySchema = v.object({
   mode: v.optional(v.picklist(['major', 'minor'] as const), 'major'),
+  packages: v.optional(v.union([v.string(), v.array(v.string())])),
   filterThreshold: v.optional(
     v.pipe(
       v.string(),
@@ -25,10 +27,21 @@ const QuerySchema = v.object({
   filterOldVersions: v.optional(v.picklist(['true', 'false'] as const), 'false'),
 })
 
+function normalizePackages(packages: string | string[] | undefined): string[] {
+  if (!packages) return []
+
+  const values = Array.isArray(packages) ? packages : [packages]
+  return [
+    ...new Set(values.flatMap(value => value.split(',').map(pkg => pkg.trim())).filter(Boolean)),
+  ]
+}
+
 /**
  * GET /api/registry/downloads/:name/versions or /api/registry/downloads/@scope/name/versions
+ * GET /api/registry/downloads/versions?packages=pkg-a,pkg-b
  *
- * Fetch per-version download statistics and group by major or minor version.
+ * Fetch per-version download statistics and group by major or minor version,
+ * or fetch raw per-version download lists for one or more packages.
  * Data is cached for 1 hour with stale-while-revalidate.
  *
  * Query parameters:
@@ -50,6 +63,46 @@ export default defineCachedEventHandler(
       })
     }
 
+    try {
+      const query = getQuery(event)
+      const parsed = v.parse(QuerySchema, query)
+      // Supports: /downloads/versions?packages=a,b and repeated ?packages=a&packages=b
+      if (pkgParamSegments.length === 1) {
+        const packageNames = normalizePackages(parsed.packages)
+
+        if (packageNames.length === 0) {
+          return {
+            packages: [],
+            timestamp: new Date().toISOString(),
+          }
+        }
+
+        try {
+          const packages = await Promise.all(
+            packageNames.map(async packageName => ({
+              packageName,
+              versions: await fetchNpmVersionDownloadsFromApi(packageName),
+            })),
+          )
+
+          return {
+            packages,
+            timestamp: new Date().toISOString(),
+          }
+        } catch (error: unknown) {
+          handleApiError(error, {
+            statusCode: 502,
+            message: 'Failed to fetch version download data from npm API',
+          })
+        }
+      }
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: 'Failed to fetch version download data from npm API',
+      })
+    }
+
     const segments = pkgParamSegments.slice(0, -1)
 
     const { rawPackageName } = parsePackageParams(segments)
diff --git a/server/utils/npm-website-versions.ts b/server/utils/npm-website-versions.ts
new file mode 100644
index 0000000000..cc6fcf5bf8
--- /dev/null
+++ b/server/utils/npm-website-versions.ts
@@ -0,0 +1,37 @@
+export interface NpmWebsiteVersionDownload {
+  version: string
+  downloads: number
+}
+
+interface NpmApiVersionDownloadsResponse {
+  downloads: Record<string, number>
+}
+
+export async function fetchNpmVersionDownloadsFromApi(
+  packageName: string,
+): Promise<NpmWebsiteVersionDownload[]> {
+  const encodedName = encodePackageName(packageName)
+
+  const versionsResponse = await fetch(`https://api.npmjs.org/versions/${encodedName}/last-week`)
+
+  if (!versionsResponse.ok) {
+    if (versionsResponse.status === 404) {
+      throw createError({
+        statusCode: 404,
+        message: 'Package not found',
+      })
+    }
+
+    throw createError({
+      statusCode: 502,
+      message: 'Failed to fetch version download data from npm API',
+    })
+  }
+
+  const versionsData = (await versionsResponse.json()) as NpmApiVersionDownloadsResponse
+
+  return Object.entries(versionsData.downloads).map(([version, downloads]) => ({
+    version,
+    downloads,
+  }))
+}
diff --git a/test/unit/server/utils/npm-website-versions.spec.ts b/test/unit/server/utils/npm-website-versions.spec.ts
new file mode 100644
index 0000000000..92e0ac7373
--- /dev/null
+++ b/test/unit/server/utils/npm-website-versions.spec.ts
@@ -0,0 +1,55 @@
+import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
+import { createError } from 'h3'
+
+vi.stubGlobal('encodePackageName', (name: string) => {
+  if (name.startsWith('@')) return `@${encodeURIComponent(name.slice(1))}`
+  return encodeURIComponent(name)
+})
+vi.stubGlobal('createError', createError)
+
+const { fetchNpmVersionDownloadsFromApi } = await import('#server/utils/npm-website-versions')
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+afterAll(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('fetchNpmVersionDownloadsFromApi', () => {
+  it('encodes scoped package names in npm API request URL', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        downloads: {
+          '1.0.0': 123,
+        },
+      }),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await fetchNpmVersionDownloadsFromApi('@nuxt/kit')
+
+    expect(fetchMock).toHaveBeenCalledWith('https://api.npmjs.org/versions/@nuxt%2Fkit/last-week')
+    expect(result).toEqual([
+      {
+        version: '1.0.0',
+        downloads: 123,
+      },
+    ])
+  })
+
+  it('throws a not-found error when npm API returns 404', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 404,
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchNpmVersionDownloadsFromApi('missing-package')).rejects.toMatchObject({
+      statusCode: 404,
+      message: 'Package not found',
+    })
+  })
+})