diff --git a/app/pages/index.vue b/app/pages/index.vue
index 74d38d65d..7ce3472dc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
+import type { NpmxPicksResponse } from '#shared/types/picks'
+
+const { data: picksData } = useFetch<NpmxPicksResponse>('/api/picks')
+const { selectedAccentColor } = useAccentColor()
+
+const PICK_COLORS = ['coral', 'amber', 'emerald', 'sky'] as const
+function pickLetterColor(index: number): string | undefined {
+  if (selectedAccentColor.value) return undefined
+  return `var(--swatch-${PICK_COLORS[index]})`
+}
 
 const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
@@ -108,17 +117,22 @@ defineOgImageComponent('Default', {
       </header>
 
       <nav
-        :aria-label="$t('nav.popular_packages')"
+        v-if="picksData?.picks?.length"
+        :aria-label="$t('nav.npmx_picks')"
         class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both max-w-xl mx-auto"
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
-          <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
+          <li v-for="(pick, i) in picksData?.picks" :key="pick.letter">
+            <LinkBase :to="packageRoute(pick.name)" class="text-sm">
               <span
-                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
-              />
-              {{ framework.name }}
+                >{{ pick.name.slice(0, pick.letterIndex)
+                }}<span
+                  class="font-bold text-accent"
+                  :style="pickLetterColor(i) ? { color: pickLetterColor(i) } : undefined"
+                  >{{ pick.name[pick.letterIndex] }}</span
+                >{{ pick.name.slice(pick.letterIndex + 1) }}</span
+              >
             </LinkBase>
           </li>
         </ul>
@@ -132,13 +146,3 @@ defineOgImageComponent('Default', {
     </section>
   </main>
 </template>
-
-<style scoped>
-/* Windows High Contrast Mode support */
-@media (forced-colors: active) {
-  .home-tag-dot {
-    forced-color-adjust: none;
-    background-color: CanvasText;
-  }
-}
-</style>
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index fac959bf7..1c149ba38 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index deacfb964..c411c30ec 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "back": "geri"
   },
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index 0ce376ef1..0992b2c21 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 14c5668b2..31c13ec4e 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 9f9a08546..ed7c602d6 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 3d4ae8d26..629905664 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 0b838dfe8..f060ca3ad 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 6b11e188f..509c127d1 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 7b4733204..74bc79855 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 4ef77c57b..b5d28c82b 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index 85b2ac792..cdb56b1d7 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 244377411..0c5e0eaed 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index ef2e106cb..bf29e1608 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -50,7 +50,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 39a4d20e1..057939419 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index 7215660b7..a965110e3 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index cad981bb8..e9079f08d 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index aa847e97e..2ae77c2eb 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 460a1f7ba..010e6c6e4 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Główne",
-    "popular_packages": "Popularne pakiety",
     "settings": "ustawienia",
     "compare": "porównaj",
     "back": "wstecz",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 423d72b12..7057fde7f 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -45,7 +45,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 45d6410b1..3ae9b1907 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Главное",
-    "popular_packages": "Популярные пакеты",
     "settings": "настройки",
     "back": "назад"
   },
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index 99db87a1c..fd940da17 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index e1c1f23a8..622ca640d 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index fb598a8aa..1fb0f43a8 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Головна",
-    "popular_packages": "Популярні пакети",
     "settings": "параметри",
     "compare": "порівняти",
     "back": "назад",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 14593b04a..f56e54615 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 2f387a8e3..286f9a7d8 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",
diff --git a/i18n/schema.json b/i18n/schema.json
index 2550271cb..7ec90e0ba 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -202,7 +202,7 @@
         "main_navigation": {
           "type": "string"
         },
-        "popular_packages": {
+        "npmx_picks": {
           "type": "string"
         },
         "settings": {
diff --git a/lunaria/files/ar-EG.json b/lunaria/files/ar-EG.json
index 8e4705272..8be5afd44 100644
--- a/lunaria/files/ar-EG.json
+++ b/lunaria/files/ar-EG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",
diff --git a/lunaria/files/az-AZ.json b/lunaria/files/az-AZ.json
index e2124d258..05836f81c 100644
--- a/lunaria/files/az-AZ.json
+++ b/lunaria/files/az-AZ.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "back": "geri"
   },
diff --git a/lunaria/files/bg-BG.json b/lunaria/files/bg-BG.json
index 9dc4ba935..8a966c74c 100644
--- a/lunaria/files/bg-BG.json
+++ b/lunaria/files/bg-BG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",
diff --git a/lunaria/files/bn-IN.json b/lunaria/files/bn-IN.json
index 14c5668b2..31c13ec4e 100644
--- a/lunaria/files/bn-IN.json
+++ b/lunaria/files/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",
diff --git a/lunaria/files/cs-CZ.json b/lunaria/files/cs-CZ.json
index f9b3de54f..ed511f7c0 100644
--- a/lunaria/files/cs-CZ.json
+++ b/lunaria/files/cs-CZ.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
index d2a9302c6..9aad0aafa 100644
--- a/lunaria/files/de-DE.json
+++ b/lunaria/files/de-DE.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 26dbb4205..9e42f3f9a 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 1cd4294cb..82ddf1c76 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",
diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
index 1b021e09c..cab72b060 100644
--- a/lunaria/files/es-419.json
+++ b/lunaria/files/es-419.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",
diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
index f89e2799d..75ce4830e 100644
--- a/lunaria/files/es-ES.json
+++ b/lunaria/files/es-ES.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
index 945b6cb6d..363cc255f 100644
--- a/lunaria/files/fr-FR.json
+++ b/lunaria/files/fr-FR.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",
diff --git a/lunaria/files/hi-IN.json b/lunaria/files/hi-IN.json
index 076430b9a..89776bcdb 100644
--- a/lunaria/files/hi-IN.json
+++ b/lunaria/files/hi-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",
diff --git a/lunaria/files/hu-HU.json b/lunaria/files/hu-HU.json
index 2e0479030..68a75cb6b 100644
--- a/lunaria/files/hu-HU.json
+++ b/lunaria/files/hu-HU.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },
diff --git a/lunaria/files/id-ID.json b/lunaria/files/id-ID.json
index 1b8f9004f..8e854d3e5 100644
--- a/lunaria/files/id-ID.json
+++ b/lunaria/files/id-ID.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",
diff --git a/lunaria/files/it-IT.json b/lunaria/files/it-IT.json
index c21c11f1d..5c65a6c05 100644
--- a/lunaria/files/it-IT.json
+++ b/lunaria/files/it-IT.json
@@ -49,7 +49,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",
diff --git a/lunaria/files/ja-JP.json b/lunaria/files/ja-JP.json
index 3cfc377d6..d1e67863e 100644
--- a/lunaria/files/ja-JP.json
+++ b/lunaria/files/ja-JP.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",
diff --git a/lunaria/files/mr-IN.json b/lunaria/files/mr-IN.json
index 0833f9655..99632b252 100644
--- a/lunaria/files/mr-IN.json
+++ b/lunaria/files/mr-IN.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",
diff --git a/lunaria/files/nb-NO.json b/lunaria/files/nb-NO.json
index 2eea40ce3..a3bbe0a50 100644
--- a/lunaria/files/nb-NO.json
+++ b/lunaria/files/nb-NO.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",
diff --git a/lunaria/files/ne-NP.json b/lunaria/files/ne-NP.json
index 9306002bb..8665a7350 100644
--- a/lunaria/files/ne-NP.json
+++ b/lunaria/files/ne-NP.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",
diff --git a/lunaria/files/pl-PL.json b/lunaria/files/pl-PL.json
index a30acc07f..05d4b72dc 100644
--- a/lunaria/files/pl-PL.json
+++ b/lunaria/files/pl-PL.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Główne",
-    "popular_packages": "Popularne pakiety",
     "settings": "ustawienia",
     "compare": "porównaj",
     "back": "wstecz",
diff --git a/lunaria/files/pt-BR.json b/lunaria/files/pt-BR.json
index 005c0be7f..4de42622b 100644
--- a/lunaria/files/pt-BR.json
+++ b/lunaria/files/pt-BR.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",
diff --git a/lunaria/files/ru-RU.json b/lunaria/files/ru-RU.json
index 4710678fd..2b556d6e8 100644
--- a/lunaria/files/ru-RU.json
+++ b/lunaria/files/ru-RU.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Главное",
-    "popular_packages": "Популярные пакеты",
     "settings": "настройки",
     "back": "назад"
   },
diff --git a/lunaria/files/ta-IN.json b/lunaria/files/ta-IN.json
index 9ec3b6b21..5a5f2d795 100644
--- a/lunaria/files/ta-IN.json
+++ b/lunaria/files/ta-IN.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",
diff --git a/lunaria/files/te-IN.json b/lunaria/files/te-IN.json
index ae195617f..e024672d2 100644
--- a/lunaria/files/te-IN.json
+++ b/lunaria/files/te-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",
diff --git a/lunaria/files/uk-UA.json b/lunaria/files/uk-UA.json
index b763eff42..e6eefa301 100644
--- a/lunaria/files/uk-UA.json
+++ b/lunaria/files/uk-UA.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Головна",
-    "popular_packages": "Популярні пакети",
     "settings": "параметри",
     "compare": "порівняти",
     "back": "назад",
diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
index eb86181ec..8c865b1bb 100644
--- a/lunaria/files/zh-CN.json
+++ b/lunaria/files/zh-CN.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",
diff --git a/lunaria/files/zh-TW.json b/lunaria/files/zh-TW.json
index 75bc90277..e93a7c431 100644
--- a/lunaria/files/zh-TW.json
+++ b/lunaria/files/zh-TW.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",
diff --git a/modules/runtime/server/cache.ts b/modules/runtime/server/cache.ts
index 9e35b46b1..05a04a362 100644
--- a/modules/runtime/server/cache.ts
+++ b/modules/runtime/server/cache.ts
@@ -240,6 +240,24 @@ function getMockForUrl(url: string): MockResult | null {
     return null
   }
 
+  // Algolia npm-search API - return mock popular packages
+  if (host.endsWith('-dsn.algolia.net') && pathname.endsWith('/query')) {
+    return {
+      data: {
+        hits: [
+          { name: 'nuxt', downloadsLast30Days: 500_000, modified: new Date().toISOString() },
+          { name: 'pnpm', downloadsLast30Days: 800_000, modified: new Date().toISOString() },
+          { name: 'express', downloadsLast30Days: 1_000_000, modified: new Date().toISOString() },
+          { name: 'minimatch', downloadsLast30Days: 600_000, modified: new Date().toISOString() },
+          { name: 'next', downloadsLast30Days: 700_000, modified: new Date().toISOString() },
+          { name: 'axios', downloadsLast30Days: 900_000, modified: new Date().toISOString() },
+          { name: 'remix', downloadsLast30Days: 400_000, modified: new Date().toISOString() },
+          { name: 'webpack', downloadsLast30Days: 750_000, modified: new Date().toISOString() },
+        ],
+      },
+    }
+  }
+
   // esm.sh is handled specially via $fetch.raw override, not here
   // Return null to indicate no mock available at the cachedFetch level
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 78d76019c..f39aa40f2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -147,7 +147,7 @@ export default defineNuxtConfig({
     '/package-code/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/package-docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     // static pages
-    '/': { prerender: true },
+    '/': { isr: 3600 },
     '/200.html': { prerender: true },
     '/about': { prerender: true },
     '/accessibility': { prerender: true },
diff --git a/server/api/picks.get.ts b/server/api/picks.get.ts
new file mode 100644
index 000000000..6d45c3291
--- /dev/null
+++ b/server/api/picks.get.ts
@@ -0,0 +1,106 @@
+import type { NpmxPicksResponse } from '#shared/types/picks'
+import {
+  NPMX_LETTERS,
+  ALGOLIA_POOL_SIZE,
+  MIN_DOWNLOADS_LAST_30_DAYS,
+  MAX_MODIFIED_AGE_MS,
+  LIKES_SAMPLE_SIZE,
+  selectPicks,
+  type NpmxLetter,
+  type PickCandidate,
+} from '../utils/picks'
+
+const PICKS_MAX_AGE_MS = 60 * 60 * 1000
+
+/** Pick `n` random items from `arr` (Fisher-Yates on a copy, sliced). */
+function randomSample<T>(arr: T[], n: number): T[] {
+  const copy = [...arr]
+  for (let i = copy.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    const tmp = copy[i]!
+    copy[i] = copy[j]!
+    copy[j] = tmp
+  }
+  return copy.slice(0, n)
+}
+
+interface AlgoliaHit {
+  name: string
+  downloadsLast30Days: number
+  modified: string
+  isDeprecated?: boolean
+}
+
+interface AlgoliaResponse {
+  hits: AlgoliaHit[]
+}
+
+export default defineCachedEventHandler(
+  async (): Promise<NpmxPicksResponse> => {
+    const { appId, apiKey, indexName } = useRuntimeConfig().public.algolia
+
+    // 1. Fetch popular packages from Algolia
+    const algoliaResponse = await $fetch<AlgoliaResponse>(
+      `https://${appId}-dsn.algolia.net/1/indexes/${indexName}/query`,
+      {
+        method: 'POST',
+        headers: {
+          'X-Algolia-Application-Id': appId,
+          'X-Algolia-API-Key': apiKey,
+        },
+        body: {
+          query: '',
+          hitsPerPage: ALGOLIA_POOL_SIZE,
+          attributesToRetrieve: ['name', 'downloadsLast30Days', 'modified', 'isDeprecated'],
+          attributesToHighlight: [],
+        },
+      },
+    )
+
+    // 2. Post-filter pool
+    const now = Date.now()
+    const pool = algoliaResponse.hits.filter(hit => {
+      if (hit.isDeprecated) return false
+      if (hit.downloadsLast30Days < MIN_DOWNLOADS_LAST_30_DAYS) return false
+      if (now - new Date(hit.modified).getTime() > MAX_MODIFIED_AGE_MS) return false
+      return true
+    })
+
+    // 3. For each letter, find candidates and sample for likes checking
+    const likesUtil = new PackageLikesUtils()
+
+    const candidatesByLetter = {} as Record<NpmxLetter, PickCandidate[]>
+
+    await Promise.all(
+      NPMX_LETTERS.map(async letter => {
+        const matching = pool.filter(hit => hit.name.toLowerCase().includes(letter))
+        const sampled = randomSample(matching, LIKES_SAMPLE_SIZE)
+
+        // Check likes in parallel
+        const enriched: PickCandidate[] = await Promise.all(
+          sampled.map(async hit => {
+            try {
+              const { totalLikes } = await likesUtil.getLikes(hit.name)
+              return { name: hit.name, totalLikes }
+            } catch {
+              return { name: hit.name, totalLikes: 0 }
+            }
+          }),
+        )
+
+        candidatesByLetter[letter] = enriched
+      }),
+    )
+
+    // 4. Select picks
+    const picks = selectPicks(candidatesByLetter)
+
+    return { picks }
+  },
+  {
+    maxAge: PICKS_MAX_AGE_MS / 1000,
+    swr: true,
+    name: 'npmx-picks',
+    getKey: () => 'picks',
+  },
+)
diff --git a/server/utils/atproto/utils/likes.ts b/server/utils/atproto/utils/likes.ts
index ac042d707..24b4f3686 100644
--- a/server/utils/atproto/utils/likes.ts
+++ b/server/utils/atproto/utils/likes.ts
@@ -104,7 +104,7 @@ export class PackageLikesUtils {
   }
 
   /**
-   * Gets the likes for a npm package on npmx. Tries a local cahce first, if not found uses constellation
+   * Gets the likes for a npm package on npmx. Tries a local cache first, if not found uses constellation
    * @param packageName
    * @param usersDid
    * @returns
diff --git a/server/utils/picks.ts b/server/utils/picks.ts
new file mode 100644
index 000000000..69d601b30
--- /dev/null
+++ b/server/utils/picks.ts
@@ -0,0 +1,53 @@
+import type { NpmxPick } from '#shared/types/picks'
+
+export const NPMX_LETTERS = ['n', 'p', 'm', 'x'] as const
+export type NpmxLetter = (typeof NPMX_LETTERS)[number]
+
+export const MIN_LIKES = 5
+export const MIN_DOWNLOADS_LAST_30_DAYS = 10_000
+export const MAX_MODIFIED_AGE_MS = 730 * 24 * 60 * 60 * 1000
+export const ALGOLIA_POOL_SIZE = 500
+export const LIKES_SAMPLE_SIZE = 30
+
+/** Hardcoded last-resort fallbacks in case we fail to find any candidates for a letter. */
+export const FALLBACKS: Record<NpmxLetter, string> = {
+  n: 'nuxt',
+  p: 'pnpm',
+  m: 'module-replacements',
+  x: 'oxfmt',
+}
+
+export interface PickCandidate {
+  name: string
+  totalLikes?: number
+}
+
+/**
+ * Select one pick per NPMX letter from pre-filtered candidates.
+ * Prefers candidates with `totalLikes >= MIN_LIKES`; falls back to any
+ * candidate; falls back to hardcoded fallback.
+ */
+export function selectPicks(candidatesByLetter: Record<NpmxLetter, PickCandidate[]>): NpmxPick[] {
+  const used = new Set<string>()
+  const picks: NpmxPick[] = []
+
+  for (const letter of NPMX_LETTERS) {
+    const candidates = candidatesByLetter[letter] ?? []
+
+    const liked = candidates.filter(c => (c.totalLikes ?? 0) >= MIN_LIKES && !used.has(c.name))
+    const nonLiked = candidates.filter(c => (c.totalLikes ?? 0) < MIN_LIKES && !used.has(c.name))
+
+    const pool = liked.length > 0 ? liked : nonLiked
+    const pick = pool[Math.floor(Math.random() * pool.length)]
+    const name = pick?.name ?? FALLBACKS[letter]
+
+    used.add(name)
+    picks.push({
+      letter,
+      name,
+      letterIndex: name.toLowerCase().indexOf(letter),
+    })
+  }
+
+  return picks
+}
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 88e28afe0..76678da06 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -9,3 +9,4 @@ export * from './i18n-status'
 export * from './comparison'
 export * from './skills'
 export * from './version-downloads'
+export * from './picks'
diff --git a/shared/types/picks.ts b/shared/types/picks.ts
new file mode 100644
index 000000000..ba8079f91
--- /dev/null
+++ b/shared/types/picks.ts
@@ -0,0 +1,9 @@
+export interface NpmxPick {
+  letter: 'n' | 'p' | 'm' | 'x'
+  name: string
+  letterIndex: number
+}
+
+export interface NpmxPicksResponse {
+  picks: NpmxPick[]
+}
diff --git a/test/e2e/homepage-picks.spec.ts b/test/e2e/homepage-picks.spec.ts
new file mode 100644
index 000000000..fbe256b04
--- /dev/null
+++ b/test/e2e/homepage-picks.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from './test-utils'
+
+test.describe('Homepage Picks', () => {
+  test('displays 4 picks with highlighted letters', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+
+    // Use aria-label to target the picks nav specifically (not the header nav)
+    const picksNav = page.getByRole('navigation', { name: /npmx picks/i })
+    await expect(picksNav).toBeVisible({ timeout: 15000 })
+
+    const pickItems = picksNav.locator('ul > li')
+    await expect(pickItems).toHaveCount(4)
+
+    // Each pick should contain a bold highlighted letter
+    for (let i = 0; i < 4; i++) {
+      const highlightedLetter = pickItems.nth(i).locator('span.font-bold')
+      await expect(highlightedLetter).toBeVisible()
+    }
+
+    // Each pick should be a link to a package page
+    for (let i = 0; i < 4; i++) {
+      const link = pickItems.nth(i).locator('a')
+      const href = await link.getAttribute('href')
+      expect(href).toMatch(/^\/package\//)
+    }
+  })
+
+  test('pick links navigate to package pages', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+
+    const picksNav = page.getByRole('navigation', { name: /npmx picks/i })
+    await expect(picksNav).toBeVisible({ timeout: 15000 })
+
+    const firstLink = picksNav.locator('ul > li a').first()
+    await firstLink.click()
+    await expect(page).toHaveURL(/\/package\//)
+  })
+})
diff --git a/test/fixtures/mock-routes.cjs b/test/fixtures/mock-routes.cjs
index bd5527246..e49968190 100644
--- a/test/fixtures/mock-routes.cjs
+++ b/test/fixtures/mock-routes.cjs
@@ -520,6 +520,25 @@ function matchGitHubApi(urlString) {
   return null
 }
 
+/**
+ * @param {string} _urlString
+ * @returns {MockResponse | null}
+ */
+function matchAlgoliaApi(_urlString) {
+  return json({
+    hits: [
+      { name: 'nuxt', downloadsLast30Days: 500000, modified: new Date().toISOString() },
+      { name: 'pnpm', downloadsLast30Days: 800000, modified: new Date().toISOString() },
+      { name: 'express', downloadsLast30Days: 1000000, modified: new Date().toISOString() },
+      { name: 'minimatch', downloadsLast30Days: 600000, modified: new Date().toISOString() },
+      { name: 'next', downloadsLast30Days: 700000, modified: new Date().toISOString() },
+      { name: 'axios', downloadsLast30Days: 900000, modified: new Date().toISOString() },
+      { name: 'remix', downloadsLast30Days: 400000, modified: new Date().toISOString() },
+      { name: 'webpack', downloadsLast30Days: 750000, modified: new Date().toISOString() },
+    ],
+  })
+}
+
 /**
  * Route definitions mapping URL patterns to their matchers.
  * Each entry has a pattern (for Playwright's page.route) and a match function
@@ -549,6 +568,7 @@ const routes = [
     pattern: 'https://constellation.microcosm.blue/**',
     match: matchConstellationApi,
   },
+  { name: 'Algolia API', pattern: 'https://*-dsn.algolia.net/**', match: matchAlgoliaApi },
 ]
 
 /**
diff --git a/test/unit/server/utils/picks.spec.ts b/test/unit/server/utils/picks.spec.ts
new file mode 100644
index 000000000..7d95f372a
--- /dev/null
+++ b/test/unit/server/utils/picks.spec.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+import {
+  selectPicks,
+  FALLBACKS,
+  MIN_LIKES,
+  type PickCandidate,
+  type NpmxLetter,
+} from '../../../../server/utils/picks'
+
+describe('selectPicks', () => {
+  it('returns 4 picks, one per letter', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'next', totalLikes: 10 }],
+      p: [{ name: 'pnpm', totalLikes: 10 }],
+      m: [{ name: 'mocha', totalLikes: 10 }],
+      x: [{ name: 'oxfmt', totalLikes: 10 }],
+    }
+    const picks = selectPicks(candidates)
+    expect(picks).toHaveLength(4)
+    expect(picks.map(p => p.letter)).toEqual(['n', 'p', 'm', 'x'])
+  })
+
+  it('sets letterIndex correctly', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'next', totalLikes: 10 }],
+      p: [{ name: 'webpack', totalLikes: 10 }],
+      m: [{ name: 'commander', totalLikes: 10 }],
+      x: [{ name: 'luxon', totalLikes: 10 }],
+    }
+    const picks = selectPicks(candidates)
+
+    expect(picks[0]!.letterIndex).toBe('next'.indexOf('n'))
+    expect(picks[1]!.letterIndex).toBe('webpack'.indexOf('p'))
+    expect(picks[2]!.letterIndex).toBe('commander'.indexOf('m'))
+    expect(picks[3]!.letterIndex).toBe('luxon'.indexOf('x'))
+  })
+
+  it('prefers liked candidates over non-liked', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [
+        { name: 'non-liked-n', totalLikes: 0 },
+        { name: 'liked-n', totalLikes: MIN_LIKES },
+      ],
+      p: [{ name: 'pkg-p', totalLikes: 0 }],
+      m: [{ name: 'pkg-m', totalLikes: 0 }],
+      x: [{ name: 'pkg-x', totalLikes: 0 }],
+    }
+
+    // Run multiple times — liked should always win for 'n'
+    for (let i = 0; i < 20; i++) {
+      const picks = selectPicks(candidates)
+      expect(picks[0]!.name).toBe('liked-n')
+    }
+  })
+
+  it('falls back to non-liked when no liked candidates exist', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'nodemon', totalLikes: 2 }],
+      p: [{ name: 'prettier', totalLikes: 0 }],
+      m: [{ name: 'mocha', totalLikes: 1 }],
+      x: [{ name: 'luxon', totalLikes: 0 }],
+    }
+    const picks = selectPicks(candidates)
+    expect(picks[0]!.name).toBe('nodemon')
+    expect(picks[1]!.name).toBe('prettier')
+    expect(picks[2]!.name).toBe('mocha')
+    expect(picks[3]!.name).toBe('luxon')
+  })
+
+  it('falls back to hardcoded when no candidates at all', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [],
+      p: [],
+      m: [],
+      x: [],
+    }
+    const picks = selectPicks(candidates)
+    expect(picks[0]!.name).toBe(FALLBACKS.n)
+    expect(picks[1]!.name).toBe(FALLBACKS.p)
+    expect(picks[2]!.name).toBe(FALLBACKS.m)
+    expect(picks[3]!.name).toBe(FALLBACKS.x)
+  })
+
+  it('does not duplicate packages across picks', () => {
+    // 'npm' contains n, p, and m — should only be used once
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'npm', totalLikes: 10 }],
+      p: [
+        { name: 'npm', totalLikes: 10 },
+        { name: 'prettier', totalLikes: 10 },
+      ],
+      m: [
+        { name: 'npm', totalLikes: 10 },
+        { name: 'mocha', totalLikes: 10 },
+      ],
+      x: [{ name: 'luxon', totalLikes: 10 }],
+    }
+    const picks = selectPicks(candidates)
+    const names = picks.map(p => p.name)
+    expect(new Set(names).size).toBe(names.length)
+  })
+})