diff --git a/nuxt/components/Breadcrumbs.vue b/nuxt/components/Breadcrumbs.vue
index 68a2f35dfd..9a7657b3bd 100644
--- a/nuxt/components/Breadcrumbs.vue
+++ b/nuxt/components/Breadcrumbs.vue
@@ -17,18 +17,18 @@ useSchemaOrg([
     }),
 ])
 
-// The indigo hover only makes sense on crumbs that actually navigate — a plain span
-// (no `to`, e.g. the current page or a non-navigable group label) getting the same
-// hover color as a real link falsely signals it's clickable.
-const items = computed(() => props.items.map(item => ({
+const displayItems = computed(() => props.items.map((item, index) => ({
     ...item,
-    ui: item.to ? { link: 'hover:text-indigo-600' } : undefined,
+    ui: {
+        ...(item.to ? { link: 'hover:text-indigo-600' } : {}),
+        ...(index === 0 && props.items.length > 1 ? { item: 'shrink-0' } : {}),
+    },
 })))
 </script>
 
 <template>
   <UBreadcrumb
-    :items="items"
+    :items="displayItems"
     color="neutral"
     class="capitalize"
     :ui="{ link: 'text-sm' }"
diff --git a/nuxt/pages/blog/[...slug].vue b/nuxt/pages/blog/[...slug].vue
index 807fcc0825..39a8442cbd 100644
--- a/nuxt/pages/blog/[...slug].vue
+++ b/nuxt/pages/blog/[...slug].vue
@@ -160,7 +160,6 @@ if (routeInfo.value.kind === 'post') {
   <div v-else-if="page" class="w-full page post">
     <div class="post-title container m-auto text-center max-lg:px-6 flex mt-6 mb-6 md:max-w-screen-lg md:mt-12">
       <div class="text-left md:pr-32">
-        <Breadcrumbs :items="breadcrumbItems" class="mb-2" />
         <label>Article</label>
         <h1>{{ page.title }}</h1>
         <h4 v-if="page.subtitle">{{ page.subtitle }}</h4>
@@ -213,10 +212,7 @@ if (routeInfo.value.kind === 'post') {
     <div class="blog nohero w-full pb-24">
       <div class="container flex flex-col md:flex-row m-auto text-left max-lg:px-6 md:max-w-screen-lg gap-8 items-stretch">
         <div class="ff-prose min-w-0">
-          <NuxtLink class="group hover:no-underline inline-flex items-center gap-1 mb-4" to="/blog">
-            <UIcon name="i-heroicons-chevron-left" />
-            <span class="group-hover:underline">Back to Blog Posts</span>
-          </NuxtLink>
+          <Breadcrumbs :items="breadcrumbItems" class="mb-4" />
 
           <div class="prose w-full flex-grow">
             <div class="mb-4 hero-img">
diff --git a/nuxt/pages/changelog/[...slug].vue b/nuxt/pages/changelog/[...slug].vue
index 3ff3fc46cf..6e5f260cba 100644
--- a/nuxt/pages/changelog/[...slug].vue
+++ b/nuxt/pages/changelog/[...slug].vue
@@ -67,7 +67,6 @@ useSeoMeta({
   <div class="w-full page post">
     <div class="post-title container m-auto text-center max-lg:px-6 flex mt-6 mb-6 md:max-w-screen-lg md:mt-12">
       <div class="text-left md:pr-32">
-        <Breadcrumbs :items="breadcrumbItems" class="mb-2" />
         <label>Changelog</label>
         <h1>{{ page.title }}</h1>
         <h4 v-if="page.subtitle">{{ page.subtitle }}</h4>
@@ -78,10 +77,7 @@ useSeoMeta({
     <div class="blog nohero w-full pb-24">
       <div class="container flex flex-col md:flex-row m-auto text-left max-lg:px-6 md:max-w-screen-lg gap-8 items-stretch">
         <div class="ff-prose flex-grow">
-          <NuxtLink to="/changelog" class="inline-flex items-center gap-1 mb-4">
-            <UIcon name="i-heroicons-chevron-left" />
-            Back to the Changelog
-          </NuxtLink>
+          <Breadcrumbs :items="breadcrumbItems" class="mb-4" />
           <div class="prose">
             <ContentRenderer :value="page" />
           </div>
diff --git a/nuxt/pages/customer-stories/[slug].vue b/nuxt/pages/customer-stories/[slug].vue
index c61499fd51..417ca1970f 100644
--- a/nuxt/pages/customer-stories/[slug].vue
+++ b/nuxt/pages/customer-stories/[slug].vue
@@ -101,11 +101,7 @@ useSchemaOrg([
 
     <div class="blog nohero w-full bg-gray-50 pb-24 pt-6">
       <div class="container m-auto flex flex-col items-stretch text-left max-lg:px-6 md:max-w-screen-lg">
-        <Breadcrumbs :items="breadcrumbItems" class="mb-3" />
-        <NuxtLink to="/customer-stories" class="group mb-5 inline-flex items-center gap-1 hover:no-underline md:mb-4">
-          <UIcon name="i-heroicons-chevron-left" />
-          <span class="group-hover:underline">Back to Customer Stories</span>
-        </NuxtLink>
+        <Breadcrumbs :items="breadcrumbItems" class="mb-5 md:mb-4" />
 
         <div class="ff-prose mb-6 flex flex-col-reverse border-b md:flex-row md:gap-8">
           <div class="flex-grow">