diff --git a/docs/.vitepress/theme/FormulaBrowser.vue b/docs/.vitepress/theme/FormulaBrowser.vue
index f6fb38a8..df686037 100644
--- a/docs/.vitepress/theme/FormulaBrowser.vue
+++ b/docs/.vitepress/theme/FormulaBrowser.vue
@@ -204,6 +204,17 @@ function scrollToLetter(letter) {
   if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
+function goToFormula(slug) {
+  // Formula pages are rendered in CI batches (docs.yml build-batch matrix),
+  // and each batch's VitePress router manifest only includes its own pages.
+  // SPA navigation from /browse/ to a formula in a different batch hits a
+  // "Page not found" 404 even though the SSR HTML exists on the server.
+  // Bypass SPA routing for formula clicks — full page load fetches the
+  // correct HTML which loads the correct app chunk for that formula's batch.
+  const basePath = import.meta.env.BASE_URL || '/'
+  window.location.href = `${basePath}browse/${slug}/`
+}
+
 function toggleLicense(value) {
   if (value === 'all') {
     selectedLicenses.value = ['all']
@@ -255,7 +266,7 @@ function toggleSource(value) {
           <div v-for="letter in activeLetters" :key="letter" :id="'letter-' + letter" class="letter-group">
             <h3 class="letter-heading">{{ letter }}</h3>
             <div class="formula-items">
-              <a v-for="f in groupedFormulas[letter]" :key="f.slug" :href="f.slug + '/'" class="formula-item">
+              <a v-for="f in groupedFormulas[letter]" :key="f.slug" :href="f.slug + '/'" class="formula-item" @click.stop.prevent="goToFormula(f.slug)">
                 <div class="formula-main">
                   <span class="formula-name">{{ f.name }}</span>
                   <span class="formula-key">{{ f.formulaName }}</span>
diff --git a/docs/index.md b/docs/index.md
index e99d011c..c4351f51 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -82,6 +82,14 @@ function getLicenseBadge(f) {
   return `<img src="${basePath}licenses/unknown.svg" alt="Unknown" class="license-icon" title="Unknown">`
 }
 
+function goToFormula(slug) {
+  // Formula pages are rendered in CI batches, and each batch's VitePress
+  // router manifest only knows about its own pages. SPA navigation from
+  // the homepage to a formula in a different batch 404s. Force a full page
+  // load so the server sends the correct HTML with the correct app chunk.
+  window.location.href = `${basePath}browse/${slug}/`
+}
+
 function getSourceBadge(f) {
   if (!f) return `<img src="${basePath}sources/fontist.svg" alt="Expert Curated" class="source-icon" title="Expert Curated">`
   if (f.sourceType === 'google') return `<img src="${basePath}sources/google.svg" alt="Google Fonts" class="source-icon" title="Google Fonts">`
@@ -159,6 +167,7 @@ watch(searchQuery, (val) => {
         :href="basePath + 'browse/' + item.slug + '/'"
         :class="getItemClass(idx)"
         @mouseover="selectedIndex = idx"
+        @click.stop.prevent="goToFormula(item.slug)"
       >
         <div class="autocomplete-main">
           <span class="autocomplete-name">{{ item.name }}</span>