diff --git a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
index b5f16d276..d06e113eb 100644
--- a/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-health-score-pill.vue
@@ -31,6 +31,7 @@ import LfxChip from '~/components/uikit/chip/chip.vue';
 
 const props = defineProps<{
   score: number;
+  healthLabel?: string | null;
   unavailable?: boolean;
 }>();
 
@@ -39,19 +40,32 @@ const props = defineProps<{
 // labeled metrics chip). Duplicated rather than shared: only two call sites (row/card) and the
 // logic is ~10 lines, so a composable would be more ceremony than the duplication it avoids.
 // health-score.vue itself is intentionally left untouched (used elsewhere in the app).
+//
+// Prefers the API's real healthLabel (v2) when present; falls back to deriving the label from
+// the score for sparse rows where the pipe didn't return a label.
 const healthScoreLabel = computed(() => {
+  if (props.healthLabel) {
+    return props.healthLabel.charAt(0).toUpperCase() + props.healthLabel.slice(1);
+  }
   const score = props.score;
-  if (score >= 80) return 'Excellent';
-  if (score >= 60) return 'Healthy';
-  if (score >= 40) return 'Fair';
-  if (score >= 20) return 'Concerning';
+  if (score >= 85) return 'Excellent';
+  if (score >= 70) return 'Healthy';
+  if (score >= 50) return 'Fair';
+  if (score >= 30) return 'Concerning';
   return 'Critical';
 });
 
 const healthScoreDotClass = computed(() => {
+  if (props.healthLabel) {
+    if (props.healthLabel === 'excellent' || props.healthLabel === 'healthy') return 'bg-health-healthy';
+    if (props.healthLabel === 'fair') return 'bg-health-fair';
+    if (props.healthLabel === 'concerning') return 'bg-health-concerning';
+    return 'bg-health-critical';
+  }
   const score = props.score;
-  if (score >= 60) return 'bg-health-healthy';
-  if (score >= 20) return 'bg-health-concerning';
+  if (score >= 70) return 'bg-health-healthy';
+  if (score >= 50) return 'bg-health-fair';
+  if (score >= 30) return 'bg-health-concerning';
   return 'bg-health-critical';
 });
 </script>
diff --git a/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue b/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue
index ed022e8e0..eede8b35a 100644
--- a/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-metrics-row.vue
@@ -103,17 +103,18 @@ const avgHealthScore = computed(() => props.metrics?.avgHealthScore);
 // intentionally left untouched. Colors use the shared health-* tokens from colors.ts.
 const healthScoreLabel = computed(() => {
   const score = avgHealthScore.value ?? 0;
-  if (score >= 80) return 'Excellent';
-  if (score >= 60) return 'Healthy';
-  if (score >= 40) return 'Fair';
-  if (score >= 20) return 'Concerning';
+  if (score >= 85) return 'Excellent';
+  if (score >= 70) return 'Healthy';
+  if (score >= 50) return 'Fair';
+  if (score >= 30) return 'Concerning';
   return 'Critical';
 });
 
 const healthScoreDotClass = computed(() => {
   const score = avgHealthScore.value ?? 0;
-  if (score >= 60) return 'bg-health-healthy';
-  if (score >= 20) return 'bg-health-concerning';
+  if (score >= 70) return 'bg-health-healthy';
+  if (score >= 50) return 'bg-health-fair';
+  if (score >= 30) return 'bg-health-concerning';
   return 'bg-health-critical';
 });
 </script>
diff --git a/frontend/app/components/modules/collection/components/details/collection-project-item.vue b/frontend/app/components/modules/collection/components/details/collection-project-item.vue
index 0e0af44db..ed5cfe3e2 100644
--- a/frontend/app/components/modules/collection/components/details/collection-project-item.vue
+++ b/frontend/app/components/modules/collection/components/details/collection-project-item.vue
@@ -68,17 +68,11 @@ SPDX-License-Identifier: MIT
           :unavailable="true"
           :score="0"
         />
-        <lfx-popover
+        <lfx-collection-health-score-pill
           v-else
-          placement="top"
-          trigger-event="hover"
-          :allow-pass-through="true"
-        >
-          <lfx-collection-health-score-pill :score="project.healthScore" />
-          <template #content>
-            <lfx-health-score-details :project="props.project" />
-          </template>
-        </lfx-popover>
+          :score="project.healthScoreV2 ?? 0"
+          :health-label="project.healthLabel"
+        />
       </td>
       <td class="py-4 px-2 whitespace-nowrap">
         {{ formatNumber(props.project.contributorCount) }}
@@ -161,7 +155,8 @@ SPDX-License-Identifier: MIT
       <div class="flex items-center gap-1.5 mt-1 text-xs text-neutral-500 flex-wrap">
         <template v-if="isOnboarded">
           <lfx-collection-health-score-pill
-            :score="project.healthScore"
+            :score="project.healthScoreV2 ?? 0"
+            :health-label="project.healthLabel"
             :unavailable="isHealthScoreUnavailable"
           />
           <span class="text-neutral-400">・</span>
@@ -190,7 +185,6 @@ import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
 import { formatNumber } from '~/components/shared/utils/formatter';
 import { LfxRoutes } from '~/components/shared/types/routes';
 import LfxCollectionHealthScorePill from '~/components/modules/collection/components/details/collection-health-score-pill.vue';
-import LfxHealthScoreDetails from '~/components/modules/collection/components/details/health-score-details.vue';
 import LfxDependencyColumn from '~/components/modules/collection/components/details/dependency-column.vue';
 import LfxDependencyDetails from '~/components/modules/collection/components/details/dependency-details.vue';
 import LfxBadgeDetails from '~/components/modules/collection/components/details/badge-details.vue';
@@ -242,12 +236,7 @@ const isOnboarded = computed(() => {
   return props.project.contributorCount > 0 || props.project.organizationCount > 0;
 });
 
-const isHealthScoreUnavailable = computed(() => {
-  const { contributorHealthScore, popularityHealthScore, developmentHealthScore, securityHealthScore } = props.project;
-  return [contributorHealthScore, popularityHealthScore, developmentHealthScore, securityHealthScore].some(
-    (score) => !score,
-  );
-});
+const isHealthScoreUnavailable = computed(() => props.project.healthScoreV2 == null);
 
 const navigateToItem = () => {
   if (props.project.type === 'repo') {
diff --git a/frontend/app/components/modules/collection/components/details/health-score-details.vue b/frontend/app/components/modules/collection/components/details/health-score-details.vue
deleted file mode 100644
index f66a28677..000000000
--- a/frontend/app/components/modules/collection/components/details/health-score-details.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="bg-white border border-neutral-100 rounded-xl shadow-xl overflow-hidden px-2 py-3 w-80">
-    <div class="px-2">
-      <p class="text-xs leading-4 font-semibold text-neutral-500">Health Score breakdown</p>
-    </div>
-    <div class="flex flex-col gap-1 mt-3">
-      <nuxt-link
-        v-for="item in healthScoreItems"
-        :key="item.key"
-        :to="{ name: item.route, params: { slug: props.project.slug } }"
-        class="group flex flex-col gap-2 p-2 rounded-md hover:bg-neutral-50 transition-colors"
-      >
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-1.5">
-            <lfx-icon
-              :name="item.icon"
-              :size="15"
-              class="text-neutral-900"
-            />
-            <span class="text-xs leading-5 text-neutral-900">
-              <span class="font-semibold">{{ item.label }}</span>
-              <span class="font-normal">・{{ getHealthLabel(item.score) }}</span>
-            </span>
-          </div>
-          <lfx-icon
-            name="arrow-up-right"
-            :size="12"
-            class="text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity"
-          />
-        </div>
-        <lfx-progress-bar
-          size="small"
-          :values="[item.score]"
-          :color="getColor(item.score)"
-        />
-      </nuxt-link>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import LfxIcon from '~/components/uikit/icon/icon.vue';
-import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
-import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
-import type { ProjectInsights } from '~~/types/project';
-import { LfxRoutes } from '~/components/shared/types/routes';
-
-const props = defineProps<{
-  project: ProjectInsights;
-}>();
-
-interface HealthScoreItem {
-  key: string;
-  label: string;
-  icon: string;
-  score: number;
-  route: LfxRoutes;
-}
-
-const healthScoreItems = computed<HealthScoreItem[]>(() => [
-  {
-    key: 'contributors',
-    label: 'Contributors',
-    icon: 'people-group',
-    score: props.project.contributorHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_CONTRIBUTORS,
-  },
-  {
-    key: 'popularity',
-    label: 'Popularity',
-    icon: 'fire',
-    score: props.project.popularityHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_POPULARITY,
-  },
-  {
-    key: 'development',
-    label: 'Development',
-    icon: 'code',
-    score: props.project.developmentHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_DEVELOPMENT,
-  },
-  {
-    key: 'security',
-    label: 'Security & Best practices',
-    icon: 'shield-check',
-    score: props.project.securityHealthScore ?? 0,
-    route: LfxRoutes.PROJECT_SECURITY,
-  },
-]);
-
-const getColor = (value: number): ProgressBarType => {
-  switch (true) {
-    case value >= 75:
-      return 'positive';
-    case value >= 25:
-      return 'warning';
-    default:
-      return 'negative';
-  }
-};
-
-const getHealthLabel = (score: number): string => {
-  if (!score) return 'Unavailable';
-  if (score >= 80) return 'Excellent';
-  if (score >= 60) return 'Healthy';
-  if (score >= 40) return 'Stable';
-  if (score >= 20) return 'Unsteady';
-  return 'Critical';
-};
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfxHealthScoreDetails',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
new file mode 100644
index 000000000..83433d10c
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown-section.vue
@@ -0,0 +1,238 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div>
+    <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
+      <h2 class="text-xl leading-8 font-primary font-semibold text-neutral-900">Health breakdown</h2>
+      <lfx-chip
+        v-if="props.healthScoreV2 !== null"
+        type="bordered"
+        size="xsmall"
+        class="flex items-center gap-1.5"
+      >
+        <span
+          class="h-2 w-2 rounded-full shrink-0"
+          :class="scoreDotColorClass"
+        />
+        <span class="font-semibold text-neutral-900">{{ scoreLabel }}</span>
+        <span class="text-neutral-500">({{ props.healthScoreV2 }}/100)</span>
+      </lfx-chip>
+    </div>
+    <p class="text-xs text-neutral-500 mb-4">
+      Maintainer availability, known risks and supply chain posture, and whether the project is actively developed or
+      appropriately stable.
+    </p>
+
+    <div
+      v-if="isEmpty"
+      class="flex items-center gap-1.5 text-xs text-neutral-500 mb-4"
+    >
+      <lfx-icon
+        name="circle-info"
+        :size="14"
+        class="text-neutral-400 shrink-0"
+      />
+      <span>Health Score unavailable. All three categories have less than 40% signal coverage for this project.</span>
+    </div>
+
+    <div class="flex items-stretch gap-1 p-1 bg-neutral-50 rounded-lg mb-4">
+      <lfx-health-breakdown-category-card
+        v-for="category in categories"
+        :key="category.key"
+        :name="category.name"
+        :icon="category.icon"
+        :score="category.score"
+        :max-score="category.maxScore"
+        :color="category.color"
+        :description="category.description"
+        :selected="selectedCategoryKey === category.key"
+        @select="selectedCategoryKey = category.key"
+      />
+    </div>
+
+    <div
+      v-if="selectedCategoryRows.length > 0"
+      class="mb-4"
+    >
+      <div
+        v-for="row in selectedCategoryRows"
+        :key="row.name"
+        class="flex items-center gap-6 py-2 [&:not(:last-child)]:border-b border-neutral-200"
+        :class="{ 'opacity-60': row.status === 'no-data' }"
+      >
+        <div class="flex items-center gap-4 w-60 shrink-0">
+          <lfx-benchmark-icon
+            :type="row.status"
+            :size="12"
+            :use-triangle="row.status === 'warning'"
+            circle
+          />
+          <span class="text-sm font-semibold text-neutral-900">{{ row.name }}</span>
+        </div>
+        <p class="text-xs text-neutral-500">{{ row.description }}</p>
+      </div>
+    </div>
+
+    <nuxt-link
+      :to="{ name: selectedCategoryRoute.name }"
+      class="flex justify-start"
+    >
+      <lfx-button
+        type="transparent"
+        button-style="pill"
+      >
+        View more in {{ selectedCategoryRoute.label }}
+        <lfx-icon
+          name="arrow-up-right"
+          :size="12"
+        />
+      </lfx-button>
+    </nuxt-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import LfxHealthBreakdownCategoryCard from './health-breakdown/category-card.vue';
+import LfxButton from '~/components/uikit/button/button.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
+import LfxBenchmarkIcon from '~/components/uikit/benchmarks/benchmark-icon.vue';
+import { LfxRoutes } from '~/components/shared/types/routes';
+import { getHealthScoreV2Config } from '~~/config/trust-score';
+import {
+  getCategoryDescription,
+  getCategoryScoreColor,
+  getResponsivenessRow,
+  getBusFactorRow,
+  getOrgDiversityRow,
+  getOpenVulnRow,
+  getScorecardRow,
+  getSecurityPracticesRow,
+  getDependencyHealthRow,
+  getReleaseCadenceRow,
+  getCommitActivityRow,
+  getIssueResolutionRow,
+  getPrMergeRow,
+} from '~~/config/health-breakdown-templates';
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
+
+const props = defineProps<{
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
+  signals: HealthBreakdownResults | null;
+}>();
+
+const isEmpty = computed(() => props.healthScoreV2 === null);
+
+const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
+
+const scoreDotColorClass = computed(() => {
+  const label = props.healthLabel;
+  if (label === 'excellent' || label === 'healthy') return 'bg-positive-500';
+  if (label === 'fair') return 'bg-accent-500';
+  if (label === 'concerning') return 'bg-warning-500';
+  return 'bg-negative-500';
+});
+
+const categories = computed(() => [
+  {
+    key: 'maintainer-health' as const,
+    name: 'Maintainer Health',
+    icon: 'heart-pulse',
+    score: props.maintainerHealthScoreV2,
+    maxScore: 40,
+    color:
+      props.maintainerHealthScoreV2 !== null
+        ? getCategoryScoreColor('maintainer', props.maintainerHealthScoreV2)
+        : 'normal',
+    description: getCategoryDescription(
+      'maintainer',
+      props.maintainerHealthScoreV2,
+      props.maintainerHealthScoreV2 !== null,
+      props.signals,
+    ),
+  },
+  {
+    key: 'security-supply-chain' as const,
+    name: 'Security & Supply Chain',
+    icon: 'shield-check',
+    score: props.securitySupplyChainScoreV2,
+    maxScore: 35,
+    color:
+      props.securitySupplyChainScoreV2 !== null
+        ? getCategoryScoreColor('security', props.securitySupplyChainScoreV2)
+        : 'normal',
+    description: getCategoryDescription(
+      'security',
+      props.securitySupplyChainScoreV2,
+      props.securitySupplyChainScoreV2 !== null,
+      props.signals,
+    ),
+  },
+  {
+    key: 'development-activity' as const,
+    name: 'Development Activity',
+    icon: 'laptop-code',
+    score: props.developmentActivityScoreV2,
+    maxScore: 25,
+    color:
+      props.developmentActivityScoreV2 !== null
+        ? getCategoryScoreColor('development', props.developmentActivityScoreV2)
+        : 'normal',
+    description: getCategoryDescription(
+      'development',
+      props.developmentActivityScoreV2,
+      props.developmentActivityScoreV2 !== null,
+      props.signals,
+    ),
+  },
+]);
+
+const selectedCategoryKey = ref(categories.value[0].key);
+
+const categoryRoutes: Record<(typeof categories.value)[number]['key'], { name: LfxRoutes; label: string }> = {
+  'maintainer-health': { name: LfxRoutes.PROJECT_CONTRIBUTORS, label: 'Contributors' },
+  'security-supply-chain': { name: LfxRoutes.PROJECT_SECURITY, label: 'Security & Best practices' },
+  'development-activity': { name: LfxRoutes.PROJECT_DEVELOPMENT, label: 'Development' },
+};
+
+const selectedCategoryRoute = computed(() => categoryRoutes[selectedCategoryKey.value]);
+
+const selectedCategoryRows = computed(() => {
+  if (!props.signals) return [];
+  const signals = props.signals;
+  if (selectedCategoryKey.value === 'maintainer-health') {
+    return [
+      { name: 'Maintainer responsiveness', ...getResponsivenessRow(signals) },
+      { name: 'Bus factor', ...getBusFactorRow(signals) },
+      { name: 'Org diversity', ...getOrgDiversityRow(signals) },
+    ];
+  }
+  if (selectedCategoryKey.value === 'security-supply-chain') {
+    return [
+      { name: 'Open vulnerabilities', ...getOpenVulnRow(signals) },
+      { name: 'Security practices', ...getSecurityPracticesRow(signals) },
+      { name: 'OpenSSF Scorecard', ...getScorecardRow(signals) },
+      { name: 'Dependency health', ...getDependencyHealthRow(signals) },
+    ];
+  }
+  return [
+    { name: 'Release cadence', ...getReleaseCadenceRow(signals) },
+    { name: 'Commit activity', ...getCommitActivityRow(signals) },
+    { name: 'Issue resolution', ...getIssueResolutionRow(signals) },
+    { name: 'PR merge health', ...getPrMergeRow(signals) },
+  ];
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxHealthBreakdownSection',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
new file mode 100644
index 000000000..e974d23c0
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/health-breakdown/category-card.vue
@@ -0,0 +1,87 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <button
+    type="button"
+    class="flex-1 min-w-0 flex flex-col gap-4 items-start p-4 rounded-md text-left transition-colors"
+    :class="
+      props.selected
+        ? 'c-card !border-transparent !shadow-md !rounded-md'
+        : 'bg-transparent border border-transparent hover:bg-white/60'
+    "
+    @click="emit('select')"
+  >
+    <div class="flex flex-col gap-2 items-start w-full">
+      <lfx-progress-bar
+        :values="[progressPercent]"
+        :color="props.color"
+        size="small"
+        class="w-full"
+      />
+      <lfx-icon
+        :name="props.icon"
+        type="light"
+        :size="16"
+        class="text-neutral-900"
+      />
+    </div>
+
+    <div class="flex items-start justify-between w-full gap-2">
+      <span
+        class="text-sm text-neutral-900"
+        :class="props.selected ? 'font-semibold' : 'font-medium'"
+        >{{ props.name }}</span
+      >
+      <span
+        v-if="props.score !== null"
+        class="text-xs shrink-0"
+      >
+        <span class="text-neutral-900">{{ props.score }}</span
+        ><span class="text-neutral-400">/{{ props.maxScore }}</span>
+      </span>
+      <span
+        v-else
+        class="text-xs text-neutral-400 shrink-0"
+        >No data</span
+      >
+    </div>
+
+    <p class="text-xs text-neutral-600 w-full">
+      {{ props.description }}
+    </p>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
+import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
+
+const props = defineProps<{
+  name: string;
+  icon: string;
+  score: number | null;
+  maxScore: number;
+  color: ProgressBarType;
+  description: string;
+  selected: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [];
+}>();
+
+const progressPercent = computed(() => {
+  if (props.score === null || props.maxScore === 0) return 0;
+  return (props.score / props.maxScore) * 100;
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxHealthBreakdownCategoryCard',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
new file mode 100644
index 000000000..b88fabc5a
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown-section.vue
@@ -0,0 +1,112 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div>
+    <div class="flex flex-col-reverse sm:flex-row items-start sm:items-center gap-2 sm:gap-4 pb-2">
+      <h2 class="text-xl leading-8 font-primary font-semibold text-neutral-900">Impact breakdown</h2>
+      <lfx-chip
+        v-if="props.impactScore !== null"
+        type="bordered"
+        size="xsmall"
+        class="flex items-center gap-1.5"
+      >
+        <span class="font-semibold text-neutral-900">{{ impactLabelDisplay }}</span>
+        <span class="text-neutral-500">({{ props.impactScore }}/100)</span>
+      </lfx-chip>
+    </div>
+
+    <lfx-empty-state
+      v-if="isEmpty"
+      icon="chart-network"
+      title="Impact not available"
+      description="This project publishes no tracked packages. Impact cannot be computed without a package registry presence."
+    />
+    <template v-else>
+      <p
+        v-if="impactDescription"
+        class="text-xs text-neutral-500 mb-2"
+      >
+        {{ impactDescription }}
+      </p>
+
+      <div v-if="data">
+        <lfx-impact-breakdown-metric-row
+          name="Transitive dependents"
+          signal-type="Primary"
+          :description="getTransitiveDependentsDescription(data.transitiveDependents)"
+          :value="data.transitiveDependents"
+          :band="data.transitiveDependentsBand"
+        />
+        <lfx-impact-breakdown-metric-row
+          name="Graph centrality"
+          signal-type="Primary"
+          :description="getGraphCentralityDescription(data.centrality, data.centrality === null)"
+          :value="data.centrality"
+          :band="data.centralityBand"
+          :is-pending="data.centrality === null"
+        />
+        <lfx-impact-breakdown-metric-row
+          name="Downloads"
+          signal-type="Secondary"
+          :description="getDownloadsDescription(data.downloads)"
+          :value="data.downloads"
+          :band="data.downloadsBand"
+        />
+        <lfx-impact-breakdown-metric-row
+          name="Direct dependents"
+          signal-type="Secondary"
+          :description="getDirectDependentsDescription(data.directDependents)"
+          :value="data.directDependents"
+          :band="data.directDependentsBand"
+        />
+      </div>
+
+      <div
+        v-else-if="status === 'error'"
+        class="text-xs text-neutral-500 mt-4"
+      >
+        Something went wrong while loading the Impact breakdown for this project. Please try again later.
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AsyncDataRequestStatus } from 'nuxt/app';
+import LfxImpactBreakdownMetricRow from './impact-breakdown/metric-row.vue';
+import LfxChip from '~/components/uikit/chip/chip.vue';
+import LfxEmptyState from '~/components/shared/components/empty-state.vue';
+import { getImpactLabelDisplay } from '~~/config/trust-score';
+import {
+  getTransitiveDependentsDescription,
+  getGraphCentralityDescription,
+  getDownloadsDescription,
+  getDirectDependentsDescription,
+  getImpactSummaryDescription,
+} from '~~/config/health-breakdown-templates';
+import type { ImpactBreakdownResults } from '~~/types/overview/responses.types';
+
+const props = defineProps<{
+  impactScore: number | null;
+  impactLabel: string | null;
+  data: ImpactBreakdownResults | null;
+  status: AsyncDataRequestStatus;
+}>();
+
+const isEmpty = computed(() => props.impactScore === null);
+
+const impactLabelDisplay = computed(() => getImpactLabelDisplay(props.impactLabel));
+
+const impactDescription = computed(() =>
+  getImpactSummaryDescription(props.impactLabel, props.data?.transitiveDependents),
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxImpactBreakdownSection',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue b/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
new file mode 100644
index 000000000..efc1e8837
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/impact-breakdown/metric-row.vue
@@ -0,0 +1,71 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div
+    class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 py-4 [&:not(:last-child)]:border-b border-neutral-100"
+  >
+    <div>
+      <div class="flex items-center gap-2 flex-wrap">
+        <span class="text-sm font-semibold text-neutral-900">{{ props.name }}</span>
+        <lfx-tag
+          v-if="props.isPending"
+          variation="default"
+          size="small"
+          type="dashed"
+          >Pending</lfx-tag
+        >
+        <lfx-tag
+          v-else-if="props.band"
+          variation="info"
+          size="small"
+          >{{ props.band }}</lfx-tag
+        >
+        <lfx-tag
+          v-else
+          variation="default"
+          size="small"
+          >No data</lfx-tag
+        >
+      </div>
+      <span
+        v-if="props.signalType"
+        class="text-xs text-accent-600 underline decoration-dotted underline-offset-2"
+        >{{ props.signalType }} signal</span
+      >
+      <p class="text-xs text-neutral-500 mt-1">
+        {{ props.description }}
+      </p>
+    </div>
+    <span class="text-sm font-semibold text-neutral-900 shrink-0">
+      {{ props.value !== null ? formatNumberShort(props.value) : '—' }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LfxTag from '~/components/uikit/tag/tag.vue';
+import { formatNumberShort } from '~/components/shared/utils/formatter';
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    description: string;
+    value: number | null;
+    band: string | null;
+    signalType?: 'Primary' | 'Secondary' | null;
+    isPending?: boolean;
+  }>(),
+  {
+    signalType: null,
+    isPending: false,
+  },
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxImpactBreakdownMetricRow',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/details-empty.vue b/frontend/app/components/modules/project/components/overview/score-details/details-empty.vue
deleted file mode 100644
index 52f32e268..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/details-empty.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="text-sm text-neutral-500 flex flex-col items-center justify-center gap-5 py-20">
-    <lfx-icon
-      name="eyes"
-      :size="40"
-      class="text-neutral-300"
-    />
-    <p class="text-center max-w-100">
-      {{ label }} metrics are unavailable because the required data isn't available for this project.
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import LfxIcon from '~/components/uikit/icon/icon.vue';
-
-defineProps<{
-  label: string;
-}>();
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfxProjectDetailsEmpty',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue b/frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue
deleted file mode 100644
index 6cb577b53..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-accordion-view.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <lfx-accordion
-    v-model="selectedTab"
-    class=""
-  >
-    <lfx-accordion-item
-      v-for="tab in props.tabs"
-      :key="tab.value"
-      :name="tab.value"
-      class="border-t border-neutral-100 pt-6"
-    >
-      <div class="text-sm leading-5 font-bold pb-6">
-        {{ tab.label }}
-      </div>
-      <template #content>
-        <lfx-project-load-state
-          :status="status"
-          :error="error"
-          error-message="Error fetching overview score data"
-          loading-message="Loading Health score takeaways..."
-        >
-          <div class="pb-6">
-            <lfx-project-details-empty
-              v-if="!scoreDisplay[tab.value as keyof typeof scoreDisplay]"
-              :label="tab.label"
-            />
-            <lfx-project-score-list
-              v-else-if="tab.value !== 'security'"
-              :data="data"
-              :name="tab.value as WidgetArea"
-            />
-            <div
-              v-else
-              class="pb-6"
-            >
-              <lfx-project-security-score :data="securityScore" />
-            </div>
-          </div>
-        </lfx-project-load-state>
-      </template>
-    </lfx-accordion-item>
-  </lfx-accordion>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import LfxProjectScoreList from './score-list.vue';
-import LfxProjectDetailsEmpty from './details-empty.vue';
-import LfxAccordion from '~/components/uikit/accordion/accordion.vue';
-import LfxAccordionItem from '~/components/uikit/accordion/accordion-item.vue';
-import type { TrustScoreSummary, SecurityScore, HealthScoreResults } from '~~/types/overview/responses.types';
-import type { Tab } from '~/components/uikit/tabs/types/tab.types';
-import LfxProjectSecurityScore from '~/components/modules/project/components/overview/security/security-score.vue';
-import LfxProjectLoadState from '~~/app/components/modules/project/components/shared/load-state.vue';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  tabs: Tab[];
-  data: HealthScoreResults | undefined;
-  modelValue: string;
-  scoreDisplay: ScoreDisplay;
-  securityScore: SecurityScore[];
-  status: AsyncDataRequestStatus;
-  error: unknown;
-}>();
-
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
-
-const selectedTab = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value),
-});
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreAccordionView',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-item.vue b/frontend/app/components/modules/project/components/overview/score-details/score-item.vue
deleted file mode 100644
index e1c7e24d2..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-item.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <nuxt-link :to="linkUrl">
-    <div class="flex flex-row gap-4">
-      <div>
-        <div
-          :class="iconBGColor"
-          class="rounded-full h-6 w-6 flex items-center justify-center"
-        >
-          <lfx-benchmark-icon
-            :type="pointDetails?.type || 'positive'"
-            use-triangle
-            :size="12"
-          />
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <div class="text-sm font-semibold text-neutral-900">
-          {{ title }}
-        </div>
-        <div class="text-xs text-neutral-500">
-          {{ description }}
-        </div>
-      </div>
-      <!-- need to add this because tailwind won't import them in the computed property -->
-      <span class="bg-negative-100 bg-positive-100 bg-warning-100" />
-    </div>
-  </nuxt-link>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'nuxt/app';
-import { storeToRefs } from 'pinia';
-import LfxBenchmarkIcon from '~/components/uikit/benchmarks/benchmark-icon.vue';
-import { formatNumber } from '~/components/shared/utils/formatter';
-import { lfxWidgets } from '~/components/modules/widget/config/widget.config';
-import { lfxWidgetArea } from '~/components/modules/widget/config/widget-area.config';
-import { Widget } from '~/components/modules/widget/types/widget';
-import { lfProjectLinks } from '~/components/modules/project/config/links';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-
-const props = defineProps<{
-  widgetKey: string;
-  value: number;
-  benchmark: number;
-}>();
-
-const route = useRoute();
-const repoName = computed(() => route.params.name as string);
-const { selectedRepositoryGroup } = storeToRefs(useProjectStore());
-
-const widget = computed(() => Object.values(lfxWidgets).find((w) => w.key === props.widgetKey));
-const title = computed(() => widget.value?.benchmark?.title);
-const benchmarkValue = computed(() => Math.ceil(props.value || 0));
-const pointDetails = computed(() => widget.value?.benchmark?.points[props.benchmark]);
-const description = computed(
-  () => `
-  ${pointDetails.value?.description.replace('{value}', formatNumber(benchmarkValue.value || 0).toString())} 
-  - ${pointDetails.value?.text}`,
-);
-const iconBGColor = computed(() => `bg-${pointDetails.value?.type}-100`);
-const widgetKebabCase = computed(() =>
-  props.widgetKey ? (props.widgetKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() as Widget) : undefined,
-);
-const widgetArea = computed(() => {
-  // Find the widget area where this widgetKey belongs to
-  if (!widgetKebabCase.value) return undefined;
-  // Go through each area and check if its widgets array includes this key
-  for (const [area, config] of Object.entries(lfxWidgetArea)) {
-    if (config.widgets && config.widgets.includes(widgetKebabCase.value)) {
-      return area;
-    }
-  }
-  return undefined;
-});
-const link = computed(() => lfProjectLinks.find((l) => l.key === widgetArea.value));
-const linkUrl = computed(() => {
-  if (!link.value) return undefined;
-
-  const query = {
-    ...route.query,
-    widget: widgetKebabCase.value, // remove the widget from the query
-  };
-  let name = link.value.projectRouteName;
-  if (selectedRepositoryGroup.value) {
-    name = link.value.repoGroupRouteName;
-  } else if (repoName.value) {
-    name = link.value.repoRouteName;
-  }
-
-  return {
-    name,
-    query,
-  };
-});
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreItem',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-list.vue b/frontend/app/components/modules/project/components/overview/score-details/score-list.vue
deleted file mode 100644
index 1632ff963..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-list.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div
-    v-if="data"
-    class="flex flex-col gap-4"
-  >
-    <div
-      v-for="item in scoresData"
-      :key="item?.key"
-      class="[&:not(:last-child)]:border-b border-neutral-100 [&:not(:last-child)]:pb-4"
-    >
-      <lfx-score-item
-        v-if="item"
-        :widget-key="item.key"
-        :value="item.value"
-        :benchmark="item.benchmark"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import { OVERVIEW_API_SERVICE } from '../../../services/overview.api.service';
-import LfxScoreItem from './score-item.vue';
-import type { BenchmarkScoreData, HealthScoreResults } from '~~/types/overview/responses.types';
-import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-
-const props = defineProps<{
-  data: HealthScoreResults | undefined;
-  name: WidgetArea;
-}>();
-const { project, selectedRepoSlugs } = storeToRefs(useProjectStore());
-
-const widgetConfigs = computed(() =>
-  OVERVIEW_API_SERVICE.getOverviewWidgetConfigs(props.name).filter((widget) => {
-    return (
-      project.value?.widgets.includes(widget.key) && (!widget?.hideOnRepoFilter || !selectedRepoSlugs.value.length)
-    );
-  }),
-);
-
-/**
- * Widget keys stored in the DB are camelCase, but the widget in the widget
- * area configs are kebab-case, so is the enum that we use to match the widget
- */
-const scoresData = computed(() =>
-  widgetConfigs.value
-    .map((widget) => {
-      const score = props.data?.[widget.key as keyof HealthScoreResults];
-
-      if (score) {
-        const scoreData = score as BenchmarkScoreData;
-        return {
-          key: widget.key,
-          value: scoreData.value,
-          benchmark: scoreData.benchmark,
-        };
-      }
-      return null;
-    })
-    .sort((a, b) => (b?.benchmark || 0) - (a?.benchmark || 0)),
-);
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreList',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue b/frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue
deleted file mode 100644
index 89ca989df..000000000
--- a/frontend/app/components/modules/project/components/overview/score-details/score-tab-view.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <lfx-tabs-panels>
-    <lfx-tabs
-      v-model="selectedTab"
-      :tabs="tabsOptions"
-    >
-      <template #slotItem="{ option }">
-        <lfx-tooltip
-          class="!w-full"
-          :allow-pass-through="true"
-          :disabled="scoreDisplay[option.value as keyof typeof scoreDisplay]"
-        >
-          <template #content>
-            <p
-              v-if="!scoreDisplay[option.value as keyof typeof scoreDisplay]"
-              class="max-w-60"
-            >
-              {{ option.label }} metrics are unavailable because the required data isn't available for this project.
-              <a
-                :href="links.securityScore"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-brand-500"
-                >Learn more</a
-              >
-            </p>
-          </template>
-          <div
-            class="flex flex-col gap-2 items-start"
-            :class="{
-              'cursor-not-allowed': !scoreDisplay[option.value as keyof typeof scoreDisplay],
-            }"
-          >
-            <div
-              class="text-sm tab-label"
-              :class="{
-                'text-neutral-400': !scoreDisplay[option.value as keyof typeof scoreDisplay],
-                'text-neutral-900': scoreDisplay[option.value as keyof typeof scoreDisplay],
-              }"
-            >
-              {{ option.label }}
-            </div>
-            <div class="text-sm text-gray-500 w-full">
-              <lfx-skeleton-state
-                :status="status"
-                height=".188rem"
-                width="100%"
-              >
-                <lfx-progress-bar
-                  size="small"
-                  :values="[getValues(option.value)]"
-                  :color="getColor(getValues(option.value))"
-                />
-              </lfx-skeleton-state>
-            </div>
-          </div>
-        </lfx-tooltip>
-      </template>
-    </lfx-tabs>
-    <template
-      v-for="tab in tabs"
-      :key="tab.value"
-    >
-      <lfx-panels
-        :class="tab.value === selectedTab ? 'block' : 'hidden'"
-        class="pt-8"
-      >
-        <lfx-project-load-state
-          :status="status"
-          :error="error"
-          error-message="Error fetching overview score data"
-          loading-message="Loading Health score takeaways..."
-        >
-          <lfx-project-details-empty
-            v-if="!scoreDisplay[tab.value as keyof typeof scoreDisplay]"
-            :label="tab.label"
-          />
-          <lfx-project-score-list
-            v-else-if="tab.value !== 'security'"
-            :data="data"
-            :name="tab.value as WidgetArea"
-          />
-          <lfx-project-security-score
-            v-else
-            :data="securityScore"
-          />
-        </lfx-project-load-state>
-      </lfx-panels>
-    </template>
-  </lfx-tabs-panels>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import LfxProjectScoreList from './score-list.vue';
-import LfxProjectDetailsEmpty from './details-empty.vue';
-import LfxPanels from '~/components/uikit/tabs/panels.vue';
-import LfxTabsPanels from '~/components/uikit/tabs/tabs-panels.vue';
-import LfxTabs from '~/components/uikit/tabs/tabs.vue';
-import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
-import type { ProgressBarType } from '~/components/uikit/progress-bar/types/progress-bar.types';
-import type { TrustScoreSummary, SecurityScore, HealthScoreResults } from '~~/types/overview/responses.types';
-import type { Tab } from '~/components/uikit/tabs/types/tab.types';
-import LfxProjectSecurityScore from '~/components/modules/project/components/overview/security/security-score.vue';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import LfxProjectLoadState from '~~/app/components/modules/project/components/shared/load-state.vue';
-import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
-import type { WidgetArea } from '~/components/modules/widget/types/widget-area';
-import { links } from '~/config/links';
-import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  tabs: Tab[];
-  data: HealthScoreResults | undefined;
-  modelValue: string;
-  scoreDisplay: ScoreDisplay;
-  securityScore: SecurityScore[];
-  status: AsyncDataRequestStatus;
-  error: unknown;
-}>();
-const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
-
-const selectedTab = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value),
-});
-
-const tabsOptions = computed(() => {
-  return props.tabs.map((tab) => ({
-    ...tab,
-    disabled: !props.scoreDisplay[tab.value as keyof typeof props.scoreDisplay],
-  }));
-});
-
-const getColor = (value: number) => {
-  switch (true) {
-    case value > 75:
-      return 'positive' as ProgressBarType;
-    case value > 25:
-      return 'warning' as ProgressBarType;
-    default:
-      return 'negative' as ProgressBarType;
-  }
-};
-
-const getValues = (name: string): number => {
-  if (!props.trustScoreSummary) {
-    return 0;
-  }
-
-  return props.trustScoreSummary[name as keyof TrustScoreSummary] || 0;
-};
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreTabView',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/score-tabs.vue b/frontend/app/components/modules/project/components/overview/score-tabs.vue
deleted file mode 100644
index ee334140f..000000000
--- a/frontend/app/components/modules/project/components/overview/score-tabs.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="lg:block hidden">
-    <lfx-project-score-tab-view
-      :tabs="tabs"
-      :trust-score-summary="parsedTrustScoreSummary"
-      :model-value="selectedTab"
-      :data="data"
-      :score-display="scoreDisplay"
-      :security-score="securityScore"
-      :status="status"
-      :error="error"
-      @update:model-value="selectedTab = $event"
-    />
-  </div>
-  <div class="lg:hidden block">
-    <lfx-project-score-accordion-view
-      :tabs="tabs"
-      :trust-score-summary="parsedTrustScoreSummary"
-      :data="data"
-      :model-value="selectedTab"
-      :score-display="scoreDisplay"
-      :security-score="securityScore"
-      :status="status"
-      :error="error"
-      @update:model-value="selectedTab = $event"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import { useRoute } from 'nuxt/app';
-import { WidgetArea } from '../../../widget/types/widget-area';
-import { lfxWidgetArea } from '../../../widget/config/widget-area.config';
-import { lfxWidgets } from '../../../widget/config/widget.config';
-import { OVERVIEW_API_SERVICE } from '../../services/overview.api.service';
-import LfxProjectScoreTabView from './score-details/score-tab-view.vue';
-import LfxProjectScoreAccordionView from './score-details/score-accordion-view.vue';
-import type {
-  TrustScoreSummary,
-  SecurityScore,
-  HealthScoreResults,
-  BenchmarkScoreData,
-} from '~~/types/overview/responses.types';
-import type { Tab } from '~/components/uikit/tabs/types/tab.types';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import { overviewScore } from '~~/app/components/shared/utils/overview-score';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-import type { WidgetConfig } from '~/components/modules/widget/config/widget.config';
-import { usePopularityExcludedWidgets } from '~/components/modules/widget/composables/usePopularityExcludedWidgets';
-
-const route = useRoute();
-const { project, selectedRepoSlugs, selectedReposValues, startDate, endDate } = storeToRefs(useProjectStore());
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  data: HealthScoreResults | undefined;
-  status: AsyncDataRequestStatus;
-  error: unknown;
-  securityScore: SecurityScore[];
-  scoreDisplay: ScoreDisplay;
-  isRepoSelected: boolean;
-}>();
-
-const projectSlug = computed(() => route.params.slug as string);
-const projectWidgets = computed(() => project.value?.widgets || []);
-const { excludedWidgets: popularityExcludedWidgets } = usePopularityExcludedWidgets({
-  projectSlug,
-  repos: selectedReposValues,
-  startDate,
-  endDate,
-  projectWidgets,
-});
-
-const isPopularityEnabled = computed(() => {
-  const widgets = lfxWidgetArea[WidgetArea.POPULARITY].widgets || [];
-  const availableWidgets = widgets.filter((w) => !popularityExcludedWidgets.value.includes(w));
-  return availableWidgets.some((widget) => project.value?.widgets?.includes(lfxWidgets[widget]?.key));
-});
-
-const allTabs: Tab[] = [
-  { label: 'Contributors', value: WidgetArea.CONTRIBUTORS },
-  { label: 'Popularity', value: WidgetArea.POPULARITY },
-  { label: 'Development', value: WidgetArea.DEVELOPMENT },
-  { label: 'Security & Best practices', value: WidgetArea.SECURITY },
-];
-
-const tabs = computed(() =>
-  allTabs.filter((tab) => {
-    if (tab.value === WidgetArea.POPULARITY) {
-      return isPopularityEnabled.value;
-    }
-    return true;
-  }),
-);
-const selectedTab = ref(allTabs[0]?.value || WidgetArea.CONTRIBUTORS);
-
-const parsedTrustScoreSummary = computed(() => {
-  const scoreFromData = overviewScore(props.trustScoreSummary, props.scoreDisplay);
-
-  if (props.isRepoSelected) {
-    return { ...repoTrustScoreSummary.value, security: scoreFromData.security };
-  }
-
-  return scoreFromData;
-});
-
-const repoTrustScoreSummary = computed(() => {
-  const contributorWidgets = getWidgets(WidgetArea.CONTRIBUTORS);
-  const popularityWidgets = getWidgets(WidgetArea.POPULARITY);
-  const developmentWidgets = getWidgets(WidgetArea.DEVELOPMENT);
-
-  const contributorScores = getTotalScore(contributorWidgets);
-  const popularityScores = getTotalScore(popularityWidgets);
-  const developmentScores = getTotalScore(developmentWidgets);
-
-  return {
-    overall: 0,
-    popularity: (((popularityScores / popularityWidgets.length) * 5) / 25) * 100,
-    contributors: (((contributorScores / contributorWidgets.length) * 5) / 25) * 100,
-    security: 0,
-    development: (((developmentScores / developmentWidgets.length) * 5) / 25) * 100,
-  };
-});
-
-const getWidgets = (widgetArea: WidgetArea) => {
-  return OVERVIEW_API_SERVICE.getOverviewWidgetConfigs(widgetArea).filter((widget) => {
-    return (
-      project.value?.widgets.includes(widget.key) && (!widget?.hideOnRepoFilter || !selectedRepoSlugs.value.length)
-    );
-  });
-};
-
-const getTotalScore = (widgets: WidgetConfig[]) => {
-  let total = 0;
-
-  widgets.forEach((widget) => {
-    const score = props.data?.[widget.key as keyof HealthScoreResults];
-    if (score) {
-      const scoreData = score as BenchmarkScoreData;
-      total += scoreData.benchmark;
-    }
-  });
-
-  return total;
-};
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectScoreTabs',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score-v2.vue b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
new file mode 100644
index 000000000..d965cccbb
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/trust-score-v2.vue
@@ -0,0 +1,221 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="px-6">
+    <template v-if="!isArchived">
+      <lfx-skeleton-state
+        :status="status"
+        height="10rem"
+        width="100%"
+      >
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div class="flex flex-col items-start gap-3">
+            <div class="flex flex-row flex-wrap items-start justify-between gap-3 w-full">
+              <div class="flex flex-col items-start gap-2">
+                <span class="text-xs font-semibold text-neutral-500 tracking-wide flex items-center gap-1">
+                  HEALTH SCORE
+                  <lfx-tooltip placement="top">
+                    <lfx-icon
+                      name="circle-question"
+                      :size="11"
+                      class="cursor-help text-neutral-400"
+                    />
+                    <template #content>
+                      <div class="max-w-xs text-xs leading-relaxed">
+                        The Insights Health Score measures an open source project's overall trustworthiness, based on
+                        maintainer activity, security posture, and development cadence.
+                      </div>
+                    </template>
+                  </lfx-tooltip>
+                </span>
+                <span
+                  class="text-lg font-semibold"
+                  :class="isEmpty ? 'text-neutral-400' : scoreTextColorClass"
+                  >{{ scoreLabel }}</span
+                >
+              </div>
+              <lfx-health-score-ring
+                :score="healthScoreV2 ?? 0"
+                :color="scoreColorHex"
+                :unavailable="isEmpty"
+              />
+            </div>
+            <div class="flex-grow" />
+            <p
+              v-if="healthScoreDescription"
+              class="text-xs text-neutral-500"
+            >
+              {{ healthScoreDescription }}
+            </p>
+          </div>
+
+          <div class="flex flex-col items-start gap-3 md:border-l md:border-neutral-200 md:pl-6">
+            <span class="text-xs font-semibold text-neutral-500 tracking-wide">IMPACT</span>
+            <div class="flex items-baseline gap-1.5">
+              <span class="text-sm font-semibold text-neutral-900">{{ impactLabelDisplay }}</span>
+              <span
+                v-if="impactScore !== null"
+                class="text-xs text-neutral-500"
+                >({{ impactScore }}/100)</span
+              >
+            </div>
+            <lfx-progress-bar
+              v-if="impactScore !== null"
+              :values="[impactScore]"
+              color="normal"
+              size="small"
+              class="mt-1"
+            />
+            <div class="flex-grow" />
+            <p
+              v-if="impactDescription"
+              class="text-xs text-neutral-500"
+            >
+              {{ impactDescription }}
+            </p>
+          </div>
+
+          <div class="flex flex-col items-start gap-3 md:border-l md:border-neutral-200 md:pl-6">
+            <span class="text-xs font-semibold text-neutral-500 tracking-wide">LIFECYCLE</span>
+            <div class="flex items-center gap-2">
+              <span
+                class="h-2.5 w-2.5 rounded-full shrink-0"
+                :class="lifecycleConfig.color"
+              />
+              <span class="text-sm font-semibold text-neutral-900">{{ lifecycleConfig.label }}</span>
+            </div>
+            <div class="flex-grow" />
+            <p class="text-xs text-neutral-500">
+              {{ lifecycleDescription }}
+            </p>
+          </div>
+        </div>
+
+        <div
+          v-if="showShareBadge"
+          class="-mx-6 mt-6"
+        >
+          <lfx-project-trust-score-share-badge :is-repo-selected="isRepoSelected" />
+        </div>
+
+        <!--
+          Hidden per Nuno (design), 2026-08-05 Slack: no documentation exists yet for the new
+          Health Score v2 formula. Re-enable once a real doc link exists — re-add
+          `import { links } from '~/config/links'` and use `links.trustScore` (or the new URL) below.
+        -->
+        <!--
+        <p class="text-xs text-neutral-500 mt-3">
+          The Insights Health Score measures an open source project's overall trustworthiness.
+          <a
+            href=""
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-brand-500"
+            >Learn more</a
+          >
+        </p>
+        -->
+      </lfx-skeleton-state>
+
+      <div
+        v-if="status === 'error'"
+        class="text-xs text-neutral-500 mt-4"
+      >
+        Something went wrong while loading the Health score for this project. Please try again later.
+      </div>
+    </template>
+
+    <lfx-empty-state
+      v-else-if="status !== 'pending'"
+      icon="archive"
+      :title="emptyStateTitle"
+      :description="emptyStateDescription"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AsyncDataRequestStatus } from 'nuxt/app';
+import { storeToRefs } from 'pinia';
+import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
+import LfxHealthScoreRing from './trust-score/health-score-ring.vue';
+import { getHealthScoreV2Config, getImpactLabelDisplay, getLifecycleLabelConfig } from '~~/config/trust-score';
+import { lfxColors } from '~/config/styles/colors';
+import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
+import LfxProgressBar from '~/components/uikit/progress-bar/progress-bar.vue';
+import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
+import LfxIcon from '~/components/uikit/icon/icon.vue';
+import LfxEmptyState from '~/components/shared/components/empty-state.vue';
+import { useProjectStore } from '~/components/modules/project/store/project.store';
+import {
+  getLifecycleDescription,
+  getHealthScoreDescription,
+  getImpactSummaryDescription,
+} from '~~/config/health-breakdown-templates';
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
+
+const props = defineProps<{
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
+  lifecycleLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
+  status: AsyncDataRequestStatus;
+  isRepoSelected: boolean;
+  signals: HealthBreakdownResults | null;
+}>();
+
+const { isArchived, emptyStateTitle, emptyStateDescription, selectedRepositories } = storeToRefs(useProjectStore());
+
+const isEmpty = computed(() => props.healthScoreV2 === null);
+
+const showShareBadge = computed(
+  () => !isEmpty.value && props.status === 'success' && selectedRepositories.value.length <= 1,
+);
+
+const scoreLabel = computed(() => getHealthScoreV2Config(props.healthLabel).label);
+
+const scoreColorHex = computed(() => {
+  const label = props.healthLabel;
+  if (label === 'excellent' || label === 'healthy') return lfxColors.positive[500];
+  if (label === 'fair') return lfxColors.accent[500];
+  if (label === 'concerning') return lfxColors.warning[500];
+  return lfxColors.negative[500];
+});
+
+const scoreTextColorClass = computed(() => {
+  const label = props.healthLabel;
+  if (label === 'excellent' || label === 'healthy') return 'text-positive-500';
+  if (label === 'fair') return 'text-accent-500';
+  if (label === 'concerning') return 'text-warning-500';
+  return 'text-negative-500';
+});
+
+const impactLabelDisplay = computed(() => getImpactLabelDisplay(props.impactLabel));
+
+const impactDescription = computed(() => getImpactSummaryDescription(props.impactLabel));
+
+const lifecycleConfig = computed(() => getLifecycleLabelConfig(props.lifecycleLabel));
+
+const lifecycleDescription = computed(() => getLifecycleDescription(props.lifecycleLabel, props.signals));
+
+const healthScoreDescription = computed(() =>
+  getHealthScoreDescription(
+    props.healthLabel,
+    props.maintainerHealthScoreV2,
+    props.securitySupplyChainScoreV2,
+    props.developmentActivityScoreV2,
+  ),
+);
+</script>
+<script lang="ts">
+export default {
+  name: 'LfxProjectTrustScoreV2',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score.vue b/frontend/app/components/modules/project/components/overview/trust-score.vue
deleted file mode 100644
index a19f6d1d1..000000000
--- a/frontend/app/components/modules/project/components/overview/trust-score.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="px-6">
-    <div class="flex flex-row justify-between">
-      <div
-        class="pr-6 w-full"
-        :class="{
-          'sm:basis-3/5': !hideOverallScore && !isRepoSelected,
-        }"
-      >
-        <div class="flex flex-col justify-between h-full">
-          <div>
-            <h2 class="text-heading-3 font-bold font-secondary mb-2">Health score</h2>
-
-            <lfx-skeleton-state
-              v-if="!isRepoSelected && !isArchived && !isEmpty"
-              :status="status"
-              height="1.75rem"
-              width="11.5rem"
-            >
-              <lfx-project-trust-score-display
-                :overall-score="overallScore"
-                :hide-overall-score="hideOverallScore"
-              />
-            </lfx-skeleton-state>
-
-            <div
-              v-if="(hideOverallScore || isEmpty) && status !== 'pending'"
-              class="block"
-            >
-              <div class="text-xs text-neutral-500 mt-4">
-                LFX Insights does not have enough meaningful data to generate an overall Health score for this project.
-              </div>
-            </div>
-
-            <template v-else>
-              <div
-                v-if="isRepoSelected && !isArchived"
-                class="text-xs text-brand-600 font-semibold inline-flex items-center gap-1 mt-2 bg-brand-50 rounded-full px-1.5"
-              >
-                <lfx-icon
-                  name="info-circle"
-                  :size="12"
-                  type="solid"
-                  class="text-brand-600"
-                />
-                Select “All repositories” in order to get the aggregated Health Score
-              </div>
-              <p class="text-xs text-neutral-500 mt-4">
-                The Insights Health Score combines the four key areas to measure an open source project's overall
-                trustworthiness.
-                <a
-                  :href="links.trustScore"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-brand-500"
-                  >Learn more</a
-                >
-              </p>
-            </template>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="!hideOverallScore && status === 'success' && selectedRepositories.length <= 1 && !isArchived"
-        class="w-[200px] hidden sm:block"
-      >
-        <lfx-project-trust-score-share-badge
-          v-if="!hideOverallScore"
-          :overall-score="overallScore"
-          :is-repo-selected="isRepoSelected"
-        />
-      </div>
-    </div>
-
-    <lfx-empty-state
-      v-if="isArchived && status !== 'pending'"
-      icon="archive"
-      :title="emptyStateTitle"
-      :description="emptyStateDescription"
-    />
-
-    <div
-      v-else-if="isEmpty && status !== 'pending'"
-      class="flex flex-col items-center justify-center h-[240px]"
-    >
-      <lfx-icon
-        name="eyes"
-        :size="40"
-        class="text-neutral-300"
-      />
-      <p class="text-sm text-neutral-500 mt-5">No data available</p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { AsyncDataRequestStatus } from 'nuxt/app';
-import { storeToRefs } from 'pinia';
-import LfxProjectTrustScoreDisplay from './trust-score/score-display.vue';
-import LfxProjectTrustScoreShareBadge from './trust-score/share-badge.vue';
-import { links } from '~/config/links';
-import type { TrustScoreSummary } from '~~/types/overview/responses.types';
-import type { ScoreDisplay } from '~~/types/overview/score-display.types';
-import LfxIcon from '~/components/uikit/icon/icon.vue';
-import LfxSkeletonState from '~/components/modules/project/components/shared/skeleton-state.vue';
-import { useProjectStore } from '~/components/modules/project/store/project.store';
-import LfxEmptyState from '~/components/shared/components/empty-state.vue';
-
-const props = defineProps<{
-  trustScoreSummary: TrustScoreSummary | undefined;
-  status: AsyncDataRequestStatus;
-  error: unknown;
-  scoreDisplay: ScoreDisplay;
-  isRepoSelected: boolean;
-  isEmpty: boolean;
-}>();
-
-const overallScore = computed(() => Math.round(props.trustScoreSummary ? props.trustScoreSummary.overall : 0));
-const hideOverallScore = computed(
-  () => Object.values(props.scoreDisplay).some((score) => !score) && selectedRepositories.value.length == 0,
-);
-const { selectedRepositories, isArchived, emptyStateTitle, emptyStateDescription } = storeToRefs(useProjectStore());
-</script>
-<script lang="ts">
-export default {
-  name: 'LfxProjectTrustScore',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue b/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
new file mode 100644
index 000000000..b0dda701a
--- /dev/null
+++ b/frontend/app/components/modules/project/components/overview/trust-score/health-score-ring.vue
@@ -0,0 +1,63 @@
+<!--
+Copyright (c) 2025 The Linux Foundation and each contributor.
+SPDX-License-Identifier: MIT
+-->
+<template>
+  <div class="relative h-28 w-28 shrink-0">
+    <div
+      v-if="props.unavailable"
+      class="h-28 w-28 rounded-full border-4 border-dashed border-neutral-300"
+    />
+    <lfx-chart
+      v-else
+      :config="gaugeConfig"
+    />
+    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+      <span class="text-4xl font-secondary font-light text-neutral-900 leading-none">{{
+        props.unavailable ? '—' : props.score
+      }}</span>
+      <span
+        v-if="!props.unavailable"
+        class="text-xs text-neutral-500 mt-1"
+        >out of 100</span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import LfxChart from '~/components/uikit/chart/chart.vue';
+import { getGaugeChartConfig } from '~/components/uikit/chart/configs/gauge.chart';
+import { lfxColors } from '~/config/styles/colors';
+
+const props = withDefaults(
+  defineProps<{
+    score: number;
+    color?: string;
+    unavailable?: boolean;
+  }>(),
+  {
+    color: undefined,
+    unavailable: false,
+  },
+);
+
+const gaugeConfig = computed(() =>
+  getGaugeChartConfig({
+    value: props.score,
+    maxValue: 100,
+    gaugeType: 'full',
+    name: '',
+    graphOnly: true,
+    lineColor: props.color || lfxColors.positive[500],
+    lineWidth: 4,
+  }),
+);
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfxHealthScoreRing',
+};
+</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/score-display.vue b/frontend/app/components/modules/project/components/overview/trust-score/score-display.vue
deleted file mode 100644
index 83f028315..000000000
--- a/frontend/app/components/modules/project/components/overview/trust-score/score-display.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
-Copyright (c) 2025 The Linux Foundation and each contributor.
-SPDX-License-Identifier: MIT
--->
-<template>
-  <div class="flex text-3xl font-bold cursor-default">
-    <div
-      v-if="scoreConfig.label === 'Unavailable'"
-      class="flex items-center gap-3"
-      :class="props.hideOverallScore ? 'text-neutral-300' : ''"
-    >
-      <div
-        v-if="scoreConfig.color"
-        class="h-3 w-3 rounded-full mr-1 bg-positive-500"
-        :class="scoreConfig.color"
-      />
-      {{ scoreConfig.label }}
-    </div>
-    <lfx-tooltip
-      v-else
-      placement="top"
-    >
-      <div
-        class="flex items-center gap-3"
-        :class="props.hideOverallScore ? 'text-neutral-300' : ''"
-      >
-        <div
-          v-if="scoreConfig.color"
-          class="h-3 w-3 rounded-full mr-1"
-          :class="scoreConfig.color"
-        />
-        {{ scoreConfig.label }}
-      </div>
-      <template #content>
-        <div class="text-xs flex gap-1">
-          <span class="font-bold">Health score: </span>
-          <span>{{ overallScore }}/100 points</span>
-        </div>
-      </template>
-    </lfx-tooltip>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import LfxTooltip from '~/components/uikit/tooltip/tooltip.vue';
-import { lfxTrustScore } from '~~/config/trust-score';
-
-const props = defineProps<{
-  overallScore: number;
-  hideOverallScore?: boolean;
-}>();
-
-const scoreConfig = computed(() => {
-  if (props.hideOverallScore) {
-    return { label: 'Unavailable', color: '' };
-  }
-  return (
-    lfxTrustScore.find((s) => props.overallScore <= s.maxScore && props.overallScore >= s.minScore) || {
-      label: 'Critical',
-      color: 'bg-negative-500',
-    }
-  );
-});
-</script>
-
-<script lang="ts">
-export default {
-  name: 'LfxProjectTrustScoreDisplay',
-};
-</script>
diff --git a/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue b/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue
index 7a416e163..ada82ccd1 100644
--- a/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue
+++ b/frontend/app/components/modules/project/components/overview/trust-score/share-badge.vue
@@ -3,24 +3,27 @@ Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
 <template>
-  <div class="border-solid border border-neutral-200 rounded-md p-3 flex flex-col items-start gap-2">
-    <img
-      :src="props.isRepoSelected ? repoBadgeUrl : badgeUrl"
-      alt="Health Score Badge"
-      class="w-auto h-4"
-    />
+  <div class="bg-neutral-50 rounded-md px-6 py-[9px] flex items-center justify-between gap-3 w-full">
+    <div class="flex items-center gap-2.5">
+      <img
+        :src="props.isRepoSelected ? repoBadgeUrl : badgeUrl"
+        alt="Health Score Badge"
+        class="w-auto h-4"
+      />
+      <span class="text-xs text-neutral-600">
+        <template v-if="!props.isRepoSelected">Display your project Health score on your GitHub page.</template>
+        <template v-else>Display your repository's number of active contributors on your GitHub page.</template>
+      </span>
+    </div>
 
-    <p class="text-xs leading-4.5 text-neutral-500">
-      <span v-if="!props.isRepoSelected"> Share your project Health Score in your GitHub page. </span>
-      <span v-else> Share your repository's number of active contributors on your GitHub page. </span>
-      <br />
-      <br />
-      <span
-        class="text-brand-500 cursor-pointer"
-        @click="share"
-        >Generate badge</span
-      >
-    </p>
+    <lfx-button
+      type="transparent"
+      size="small"
+      icon="share-nodes"
+      label="Share badge"
+      class="shrink-0 !text-accent-500"
+      @click="share"
+    />
   </div>
 </template>
 
@@ -31,6 +34,7 @@ import { useRoute } from 'nuxt/app';
 import { useShareStore } from '~/components/shared/modules/share/store/share.store';
 import { useProjectStore } from '~~/app/components/modules/project/store/project.store';
 import { getBadgeUrl } from '~~/config/trust-score';
+import LfxButton from '~/components/uikit/button/button.vue';
 
 const props = defineProps<{
   isRepoSelected?: boolean;
diff --git a/frontend/app/components/modules/project/services/overview.api.service.ts b/frontend/app/components/modules/project/services/overview.api.service.ts
index d24352054..6a6a2076d 100644
--- a/frontend/app/components/modules/project/services/overview.api.service.ts
+++ b/frontend/app/components/modules/project/services/overview.api.service.ts
@@ -8,7 +8,11 @@ import type { WidgetArea } from '../../widget/types/widget-area';
 import type { Widget } from '../../widget/types/widget';
 import type { WidgetConfig } from '../../widget/config/widget.config';
 import { lfxWidgets } from '../../widget/config/widget.config';
-import type { HealthScoreResults } from '~~/types/overview/responses.types';
+import type {
+  HealthScoreV2Results,
+  ImpactBreakdownResults,
+  HealthBreakdownResults,
+} from '~~/types/overview/responses.types';
 import { TanstackKey } from '~/components/shared/types/tanstack';
 import type { Organization } from '~~/types/contributors/responses.types';
 
@@ -23,35 +27,40 @@ export interface ScoreDataQueryParams extends OverviewQueryParams {
 
 // TODO: Refactor other services to follow this pattern
 class OverviewApiService {
-  fetchHealthScoreOverview(params: ComputedRef<OverviewQueryParams>) {
+  fetchHealthScoreV2(params: ComputedRef<{ projectSlug: string }>) {
+    const queryKey = computed(() => [TanstackKey.HEALTH_SCORE_V2, params.value.projectSlug]);
+    const queryFn: QueryFunction<HealthScoreV2Results> = async () =>
+      await $fetch(`/api/project/${params.value.projectSlug}/overview/health-score-v2`);
+
+    return useQuery<HealthScoreV2Results>({
+      queryKey,
+      queryFn,
+    });
+  }
+
+  fetchHealthScoreImpactBreakdown(params: ComputedRef<{ projectSlug: string }>) {
     const queryKey = computed(() => [
-      TanstackKey.HEALTH_SCORE_OVERVIEW,
+      TanstackKey.HEALTH_SCORE_IMPACT_BREAKDOWN,
       params.value.projectSlug,
-      params.value.repos,
     ]);
-    const queryFn = computed<QueryFunction<HealthScoreResults>>(() =>
-      this.healthScoreOverviewQueryFn(() => ({
-        projectSlug: params.value.projectSlug,
-        repos: params.value.repos,
-      })),
-    );
+    const queryFn: QueryFunction<ImpactBreakdownResults> = async () =>
+      await $fetch(`/api/project/${params.value.projectSlug}/overview/health-score-impact`);
 
-    return useQuery<HealthScoreResults>({
+    return useQuery<ImpactBreakdownResults>({
       queryKey,
       queryFn,
     });
   }
 
-  healthScoreOverviewQueryFn(
-    query: () => Record<string, string | number | boolean | undefined | string[] | null>,
-  ): QueryFunction<HealthScoreResults> {
-    const { projectSlug, repos } = query();
-    return async () =>
-      await $fetch(`/api/project/${projectSlug}/overview/health-score-overview`, {
-        params: {
-          repos,
-        },
-      });
+  fetchHealthScoreBreakdown(params: ComputedRef<{ projectSlug: string }>) {
+    const queryKey = computed(() => [TanstackKey.HEALTH_SCORE_BREAKDOWN, params.value.projectSlug]);
+    const queryFn: QueryFunction<HealthBreakdownResults> = async () =>
+      await $fetch(`/api/project/${params.value.projectSlug}/overview/health-score-breakdown`);
+
+    return useQuery<HealthBreakdownResults>({
+      queryKey,
+      queryFn,
+    });
   }
 
   fetchAssociatedOrganization(params: ComputedRef<OverviewQueryParams>) {
diff --git a/frontend/app/components/modules/project/views/overview.vue b/frontend/app/components/modules/project/views/overview.vue
index 9cdbefdd5..a1b2dfecc 100644
--- a/frontend/app/components/modules/project/views/overview.vue
+++ b/frontend/app/components/modules/project/views/overview.vue
@@ -5,38 +5,50 @@ SPDX-License-Identifier: MIT
 <template>
   <div class="container">
     <div class="flex justify-between pt-5 md:pt-10 lg:gap-10 gap-5 flex-col md:flex-row">
-      <div class="w-full md:w-3/4">
+      <div class="w-full md:w-3/4 flex flex-col gap-6">
+        <lfx-repos-exclusion-footer
+          v-if="hasSelectedArchivedRepos && healthScoreV2Status !== 'pending'"
+          page-content="health-score"
+        />
+        <lfx-card class="pt-6 flex flex-col md:gap-10 gap-5 !pb-0">
+          <lfx-project-trust-score-v2
+            :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
+            :health-label="healthScoreV2Data?.healthLabel ?? null"
+            :impact-score="healthScoreV2Data?.impactScore ?? null"
+            :impact-label="healthScoreV2Data?.impactLabel ?? null"
+            :lifecycle-label="healthScoreV2Data?.lifecycleLabel ?? null"
+            :maintainer-health-score-v2="healthScoreV2Data?.maintainerHealthScoreV2 ?? null"
+            :security-supply-chain-score-v2="healthScoreV2Data?.securitySupplyChainScoreV2 ?? null"
+            :development-activity-score-v2="healthScoreV2Data?.developmentActivityScoreV2 ?? null"
+            :status="healthScoreV2Status"
+            :is-repo-selected="selectedRepositories.length > 0"
+            :signals="healthBreakdownData ?? null"
+          />
+        </lfx-card>
+
         <lfx-card
-          class="pt-6 flex flex-col md:gap-10 gap-5"
-          :class="{
-            'pb-6': !(hasSelectedArchivedRepos && status !== 'pending'),
-          }"
+          v-if="healthScoreV2Status !== 'pending' && !isArchived"
+          class="p-6"
         >
-          <lfx-project-trust-score
-            :trust-score-summary="trustSummary"
-            :status="status"
-            :error="error"
-            :is-empty="isEmpty"
-            :score-display="scoreDisplay"
-            :is-repo-selected="isRepoSelected"
+          <lfx-health-breakdown-section
+            :health-score-v2="healthScoreV2Data?.healthScoreV2 ?? null"
+            :health-label="healthScoreV2Data?.healthLabel ?? null"
+            :maintainer-health-score-v2="healthScoreV2Data?.maintainerHealthScoreV2 ?? null"
+            :security-supply-chain-score-v2="healthScoreV2Data?.securitySupplyChainScoreV2 ?? null"
+            :development-activity-score-v2="healthScoreV2Data?.developmentActivityScoreV2 ?? null"
+            :signals="healthBreakdownData ?? null"
           />
-          <div
-            v-if="!isArchived && !isEmpty"
-            class="px-6"
-          >
-            <lfx-project-score-tabs
-              :trust-score-summary="trustSummary"
-              :data="data"
-              :status="status"
-              :error="error"
-              :score-display="scoreDisplay"
-              :security-score="securityScore"
-              :is-repo-selected="isRepoSelected"
-            />
-          </div>
-          <lfx-repos-exclusion-footer
-            v-if="hasSelectedArchivedRepos && status !== 'pending'"
-            page-content="health-score"
+        </lfx-card>
+
+        <lfx-card
+          v-if="healthScoreV2Status !== 'pending' && !isArchived"
+          class="p-6"
+        >
+          <lfx-impact-breakdown-section
+            :impact-score="healthScoreV2Data?.impactScore ?? null"
+            :impact-label="healthScoreV2Data?.impactLabel ?? null"
+            :data="impactBreakdownData ?? null"
+            :status="impactBreakdownStatus"
           />
         </lfx-card>
       </div>
@@ -51,104 +63,39 @@ SPDX-License-Identifier: MIT
 import { computed, onServerPrefetch } from 'vue';
 import { useRoute } from 'nuxt/app';
 import { storeToRefs } from 'pinia';
-import { WidgetArea } from '../../widget/types/widget-area';
 import LfxProjectAboutSection from '~/components/modules/project/components/overview/about-section.vue';
-import LfxProjectScoreTabs from '~/components/modules/project/components/overview/score-tabs.vue';
-import LfxProjectTrustScore from '~/components/modules/project/components/overview/trust-score.vue';
-import { useProjectStore } from '~~/app/components/modules/project/store/project.store';
+import LfxProjectTrustScoreV2 from '~/components/modules/project/components/overview/trust-score-v2.vue';
+import LfxHealthBreakdownSection from '~/components/modules/project/components/overview/health-breakdown-section.vue';
+import LfxImpactBreakdownSection from '~/components/modules/project/components/overview/impact-breakdown-section.vue';
 import { OVERVIEW_API_SERVICE } from '~~/app/components/modules/project/services/overview.api.service';
-import type { TrustScoreSummary } from '~~/types/overview/responses.types';
 import LfxCard from '~/components/uikit/card/card.vue';
-import type { HealthScoreResults } from '~~/types/overview/responses.types';
 import LfxReposExclusionFooter from '~/components/shared/components/repos-exclusion-footer.vue';
+import { useProjectStore } from '~/components/modules/project/store/project.store';
 
 const route = useRoute();
-const { selectedReposValues, project, allArchived, hasSelectedArchivedRepos, isProjectArchived } =
-  storeToRefs(useProjectStore());
+const { hasSelectedArchivedRepos, selectedRepositories, isArchived } = storeToRefs(useProjectStore());
 
 const params = computed(() => ({
   projectSlug: route.params.slug as string,
-  repos: selectedReposValues.value,
 }));
 
-// Contributors score is only displayed if some contributors widgets are enabled
-const displayContributorsScore = computed(() => isScoreVisible(WidgetArea.CONTRIBUTORS));
-
-// Development score is only displayed if some development widgets are enabled
-const displayDevelopmentScore = computed(() => isScoreVisible(WidgetArea.DEVELOPMENT));
-
-// Popularity score is only displayed if some popularity widgets are enabled
-const displayPopularityScore = computed(() => isScoreVisible(WidgetArea.POPULARITY));
-
-// Security score is only displayed if security data is available
-const displaySecurityScore = computed(() => securityScore.value && securityScore.value.length > 0);
-
-const isArchived = computed(() => allArchived.value || isProjectArchived.value);
-
-const scoreDisplay = computed(() => ({
-  overall:
-    displayContributorsScore.value &&
-    displayDevelopmentScore.value &&
-    displayPopularityScore.value &&
-    displaySecurityScore.value,
-  contributors: displayContributorsScore.value,
-  development: displayDevelopmentScore.value,
-  popularity: displayPopularityScore.value,
-  security: displaySecurityScore.value,
-}));
-
-const { data: overviewData, status, error, suspense } = OVERVIEW_API_SERVICE.fetchHealthScoreOverview(params);
-
-/**
- * TODO: remove this after https://linear.app/lfx/issue/INS-822/periodicly-check-for-widgets-data-and-enabledisable-them
- * is implemented
- *
- * This is a workaround to show/hide the Search Queries from the score.
- * ===============================
- */
-
-// delete the search queries from the overview data
-const data = computed(() => {
-  const data = { ...overviewData.value };
-  if (overviewData.value?.searchQueries?.value === 0) {
-    delete data.searchQueries;
-  }
-  return data as HealthScoreResults;
-});
-
-/**
- * ===============================
- */
-
-const securityScore = computed(() => data.value?.securityCategoryPercentage || []);
-
-const trustSummary = computed<TrustScoreSummary>(() => ({
-  overall: data.value?.overallScore || 0,
-  popularity: data.value?.popularityPercentage || 0,
-  contributors: data.value?.contributorPercentage || 0,
-  security: data.value?.securityPercentage || 0,
-  development: data.value?.developmentPercentage || 0,
-}));
-
-const isScoreVisible = (widgetArea: WidgetArea) => {
-  const widgetKeys = OVERVIEW_API_SERVICE.getOverviewWidgetConfigs(widgetArea);
-  return widgetKeys.some((widget) => project.value?.widgets?.includes(widget.key));
-};
+const {
+  data: healthScoreV2Data,
+  status: healthScoreV2Status,
+  suspense,
+} = OVERVIEW_API_SERVICE.fetchHealthScoreV2(params);
 
-const isRepoSelected = computed(() => selectedReposValues.value.length > 0);
+const {
+  data: impactBreakdownData,
+  status: impactBreakdownStatus,
+  suspense: impactBreakdownSuspense,
+} = OVERVIEW_API_SERVICE.fetchHealthScoreImpactBreakdown(params);
 
-const isEmpty = computed(() =>
-  [
-    trustSummary.value?.overall,
-    trustSummary.value?.contributors,
-    trustSummary.value?.popularity,
-    trustSummary.value?.development,
-    trustSummary.value?.security,
-  ].every((score) => score === 0),
-);
+const { data: healthBreakdownData, suspense: healthBreakdownSuspense } =
+  OVERVIEW_API_SERVICE.fetchHealthScoreBreakdown(params);
 
 onServerPrefetch(async () => {
-  await suspense();
+  await Promise.all([suspense(), impactBreakdownSuspense(), healthBreakdownSuspense()]);
 });
 </script>
 
diff --git a/frontend/app/components/shared/components/health-score.vue b/frontend/app/components/shared/components/health-score.vue
index 60712ffc8..2307fd1ca 100644
--- a/frontend/app/components/shared/components/health-score.vue
+++ b/frontend/app/components/shared/components/health-score.vue
@@ -2,6 +2,13 @@
 Copyright (c) 2025 The Linux Foundation and each contributor.
 SPDX-License-Identifier: MIT
 -->
+<!--
+  Labels below use the v2 health score convention (excellent/healthy/fair/concerning/critical,
+  see collection-health-score-pill.vue) for consistency with the rest of the app. The score
+  itself is still v1 here — osi-list-projects.vue and osi-list-collections.vue (this component's
+  only callers) read healthScore from projects_list/collections_oss_index, neither of which
+  carries v2 fields. Wiring these lists to v2 needs a data-layer follow-up.
+-->
 <template>
   <lfx-tag
     v-if="props.unavailable"
@@ -10,28 +17,28 @@ SPDX-License-Identifier: MIT
     Unavailable
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 80"
+    v-else-if="props.score >= 85"
     variation="positive-solid"
   >
     Excellent
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 60"
+    v-else-if="props.score >= 70"
     variation="positive"
   >
     Healthy
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 40"
+    v-else-if="props.score >= 50"
     variation="info"
   >
-    Stable
+    Fair
   </lfx-tag>
   <lfx-tag
-    v-else-if="props.score >= 20"
+    v-else-if="props.score >= 30"
     variation="warning"
   >
-    Unsteady
+    Concerning
   </lfx-tag>
   <lfx-tag
     v-else
diff --git a/frontend/app/components/shared/components/repos-exclusion-footer.vue b/frontend/app/components/shared/components/repos-exclusion-footer.vue
index 5f6243234..3433658f6 100644
--- a/frontend/app/components/shared/components/repos-exclusion-footer.vue
+++ b/frontend/app/components/shared/components/repos-exclusion-footer.vue
@@ -5,9 +5,6 @@ SPDX-License-Identifier: MIT
 <template>
   <div
     v-if="displayArchivedReposNote"
-    :class="{
-      'w-full bg-neutral-50 py-3 px-2 rounded-b-lg': pageContent === 'health-score',
-    }"
     class="text-center flex items-center justify-center gap-1.5"
   >
     <lfx-icon
@@ -17,7 +14,7 @@ SPDX-License-Identifier: MIT
     />
     <span class="text-neutral-500 text-xs">
       <span class="font-semibold">Archived repositories</span> are excluded from
-      {{ pageContent === 'health-score' ? 'Health Score and Security & Best practices' : 'Security & Best practices' }}.
+      {{ pageContent === 'health-score' ? 'Health Score' : 'Security & Best practices' }}.
     </span>
   </div>
 </template>
diff --git a/frontend/app/components/shared/types/tanstack.ts b/frontend/app/components/shared/types/tanstack.ts
index b8656c8a5..01894ef8f 100644
--- a/frontend/app/components/shared/types/tanstack.ts
+++ b/frontend/app/components/shared/types/tanstack.ts
@@ -58,6 +58,9 @@ export enum TanstackKey {
   // Overview
   HEALTH_SCORE = 'health-score',
   HEALTH_SCORE_OVERVIEW = 'health-score-overview',
+  HEALTH_SCORE_V2 = 'health-score-v2',
+  HEALTH_SCORE_IMPACT_BREAKDOWN = 'health-score-impact-breakdown',
+  HEALTH_SCORE_BREAKDOWN = 'health-score-breakdown',
   TRUST_SCORE_SUMMARY = 'trust-score-summary',
   SCORE_DATA = 'score-data',
   ASSOCIATED_ORGANIZATION = 'associated-organization',
diff --git a/frontend/app/components/uikit/benchmarks/benchmark-icon.vue b/frontend/app/components/uikit/benchmarks/benchmark-icon.vue
index 0ae4f40e2..e2ff71054 100644
--- a/frontend/app/components/uikit/benchmarks/benchmark-icon.vue
+++ b/frontend/app/components/uikit/benchmarks/benchmark-icon.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: MIT
 <template>
   <div
     class="c-benchmarks-icon"
-    :class="`c-benchmarks-icon--${props.type}`"
+    :class="[`c-benchmarks-icon--${props.type}`, { 'c-benchmarks-icon--circle': props.circle }]"
   >
     <lfx-icon
       v-if="props.type === 'positive'"
@@ -25,6 +25,12 @@ SPDX-License-Identifier: MIT
       type="solid"
       :size="props.size"
     />
+    <lfx-icon
+      v-else-if="props.type === 'no-data'"
+      name="minus"
+      type="solid"
+      :size="props.size"
+    />
   </div>
 </template>
 
@@ -36,10 +42,12 @@ const props = withDefaults(
     type: string;
     useTriangle?: boolean;
     size?: number;
+    circle?: boolean;
   }>(),
   {
     useTriangle: false,
     size: 16,
+    circle: false,
   },
 );
 </script>
diff --git a/frontend/app/components/uikit/benchmarks/benchmarks.scss b/frontend/app/components/uikit/benchmarks/benchmarks.scss
index 5845f7886..7f4432fa6 100644
--- a/frontend/app/components/uikit/benchmarks/benchmarks.scss
+++ b/frontend/app/components/uikit/benchmarks/benchmarks.scss
@@ -58,6 +58,32 @@
   &--negative {
     @apply text-negative-500;
   }
+
+  &--no-data {
+    @apply text-neutral-400;
+  }
+
+  &--circle {
+    @apply flex items-center justify-center rounded-full shrink-0;
+    width: 24px;
+    height: 24px;
+
+    &.c-benchmarks-icon--positive {
+      background-color: #d0fae5;
+    }
+
+    &.c-benchmarks-icon--warning {
+      background-color: #fef3c7;
+    }
+
+    &.c-benchmarks-icon--negative {
+      background-color: #fee2e2;
+    }
+
+    &.c-benchmarks-icon--no-data {
+      @apply bg-neutral-100;
+    }
+  }
 }
 
 .c-benchmarks-wrap {
diff --git a/frontend/app/components/uikit/chart/configs/gauge.chart.ts b/frontend/app/components/uikit/chart/configs/gauge.chart.ts
index 081c74a0c..75066ba51 100644
--- a/frontend/app/components/uikit/chart/configs/gauge.chart.ts
+++ b/frontend/app/components/uikit/chart/configs/gauge.chart.ts
@@ -114,6 +114,15 @@ const fullDataOpts = {
  */
 export const getGaugeChartConfig = (data: GaugeData): ECOption => {
   const gaugeSeries = { ...(data.gaugeType === 'half' ? halfSeriesStyle : fullSeriesStyle) };
+  if (data.lineWidth !== undefined) {
+    gaugeSeries.axisLine = {
+      ...gaugeSeries.axisLine,
+      lineStyle: {
+        ...gaugeSeries.axisLine?.lineStyle,
+        width: data.lineWidth,
+      },
+    };
+  }
   gaugeSeries.detail = {
     ...(data.gaugeType === 'half' ? halfDetail : fullDetail),
     formatter:
diff --git a/frontend/app/components/uikit/chart/types/ChartTypes.ts b/frontend/app/components/uikit/chart/types/ChartTypes.ts
index 9b6b17523..82c6752b5 100644
--- a/frontend/app/components/uikit/chart/types/ChartTypes.ts
+++ b/frontend/app/components/uikit/chart/types/ChartTypes.ts
@@ -40,6 +40,7 @@ export interface GaugeData {
   noData?: boolean;
   graphOnly?: boolean;
   gaugeType: 'half' | 'full';
+  lineWidth?: number;
 }
 
 export interface CategoryDataItem {
diff --git a/frontend/app/components/uikit/tag/tag.scss b/frontend/app/components/uikit/tag/tag.scss
index a60f4cd11..99b659ea2 100644
--- a/frontend/app/components/uikit/tag/tag.scss
+++ b/frontend/app/components/uikit/tag/tag.scss
@@ -90,4 +90,13 @@
       @apply px-2.5 h-6;
     }
   }
+
+  /* Dashed (pending state, e.g. a signal still computing) */
+  &--dashed {
+    @apply italic border border-dashed;
+
+    &.c-tag--default {
+      @apply border-neutral-300 bg-neutral-100 text-neutral-400;
+    }
+  }
 }
diff --git a/frontend/app/components/uikit/tag/tag.stories.ts b/frontend/app/components/uikit/tag/tag.stories.ts
index 1074b0ac7..11efd63e9 100644
--- a/frontend/app/components/uikit/tag/tag.stories.ts
+++ b/frontend/app/components/uikit/tag/tag.stories.ts
@@ -96,3 +96,12 @@ export const Transparent = {
     type: 'transparent',
   },
 };
+
+export const Dashed = {
+  args: {
+    default: 'Pending',
+    variation: 'default',
+    size: 'medium',
+    type: 'dashed',
+  },
+};
diff --git a/frontend/app/components/uikit/tag/types/tag.types.ts b/frontend/app/components/uikit/tag/types/tag.types.ts
index 7c908b077..50240ad09 100644
--- a/frontend/app/components/uikit/tag/types/tag.types.ts
+++ b/frontend/app/components/uikit/tag/types/tag.types.ts
@@ -12,7 +12,7 @@ export const tagStyles = [
   'negative-solid',
 ] as const;
 export const tagSizes = ['small', 'medium'] as const;
-export const tagTypes = ['solid', 'transparent', 'outline'] as const;
+export const tagTypes = ['solid', 'transparent', 'outline', 'dashed'] as const;
 
 export type TagStyle = (typeof tagStyles)[number];
 export type TagSize = (typeof tagSizes)[number];
diff --git a/frontend/app/config/styles/colors.ts b/frontend/app/config/styles/colors.ts
index 2c29997bd..7746283cf 100644
--- a/frontend/app/config/styles/colors.ts
+++ b/frontend/app/config/styles/colors.ts
@@ -115,6 +115,7 @@ export const lfxColors = {
   // scale. TODO: Verify with Nuno whether these should be folded into an existing scale.
   health: {
     healthy: '#00bc7d',
+    fair: '#009aff',
     concerning: '#fe9a00',
     critical: '#fb2c36',
   },
diff --git a/frontend/config/health-breakdown-templates.ts b/frontend/config/health-breakdown-templates.ts
new file mode 100644
index 000000000..65ca4cd9f
--- /dev/null
+++ b/frontend/config/health-breakdown-templates.ts
@@ -0,0 +1,623 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+//
+// Content-generation templates for the Health Score v2 breakdown UI (IN-1212).
+// Every function here takes real per-project signal data and returns a generated
+// sentence following the bracket-pattern templates in the content spec
+// (attachments/IN-1212/content-spec.md) — no fixed/fabricated copy.
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
+
+// ---------------------------------------------------------------------------
+// Section 2: Lifecycle State descriptions
+// ---------------------------------------------------------------------------
+
+const formatDays = (seconds: number): string => {
+  const days = Math.round(seconds / 86400);
+  return days === 1 ? '1 day' : `${days} days`;
+};
+
+export const getLifecycleDescription = (
+  state: string | null,
+  signals: HealthBreakdownResults | null,
+): string => {
+  switch (state) {
+    case 'active': {
+      return 'Consistent commits, responsive maintainers, regular releases, and healthy issue triage.';
+    }
+    case 'stable': {
+      return 'Mature and deliberately low-activity. The maintainer is reachable and there are no open issues or vulnerabilities that require attention.';
+    }
+    case 'declining': {
+      const responseDetail =
+        signals?.medianIssueResponseS !== null && signals?.medianIssueResponseS !== undefined
+          ? ` Issue response times are now averaging ${formatDays(signals.medianIssueResponseS)}.`
+          : '';
+      const maintainerDetail =
+        signals?.busFactorCount !== null && signals?.busFactorCount !== undefined
+          ? ` Only ${signals.busFactorCount} active maintainer${signals.busFactorCount === 1 ? '' : 's'} remain${signals.busFactorCount === 1 ? 's' : ''}.`
+          : '';
+      return `Maintainer activity has dropped significantly over the past six months.${maintainerDetail}${responseDetail}`;
+    }
+    case 'abandoned': {
+      const lastCommitDetail =
+        signals?.lastCommitAt !== null && signals?.lastCommitAt !== undefined
+          ? ` The last commit was on ${new Date(signals.lastCommitAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}.`
+          : '';
+      const cveDetail =
+        signals?.openCriticals !== null &&
+        signals?.openCriticals !== undefined &&
+        signals.openCriticals > 0
+          ? ` ${signals.openCriticals} critical vulnerabilit${signals.openCriticals === 1 ? 'y remains' : 'ies remain'} unaddressed.`
+          : '';
+      return `No maintainer activity in over 18 months.${lastCommitDetail}${cveDetail}`;
+    }
+    case 'archived': {
+      return 'The repository has been explicitly archived. No further updates are expected and the project is no longer accepting contributions.';
+    }
+    default: {
+      return 'No repository activity has been indexed for this project. Lifecycle state cannot be determined until a supported source platform is connected.';
+    }
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Section 3: Health Score summary
+// ---------------------------------------------------------------------------
+
+const CATEGORY_LABEL: Record<'maintainer' | 'security' | 'development', string> = {
+  maintainer: 'maintainer coverage',
+  security: 'security posture',
+  development: 'development cadence',
+};
+
+export const getHealthScoreDescription = (
+  healthLabel: string | null,
+  maintainerScore: number | null,
+  securityScore: number | null,
+  developmentScore: number | null,
+): string | null => {
+  if (healthLabel === null) {
+    return 'No scoring data is available. This project has no indexed repositories or the connected platform has no supported data pipeline.';
+  }
+  const categoryPercents: { key: 'maintainer' | 'security' | 'development'; percent: number }[] = [
+    { key: 'maintainer', percent: maintainerScore !== null ? maintainerScore / 40 : -1 },
+    { key: 'security', percent: securityScore !== null ? securityScore / 35 : -1 },
+    { key: 'development', percent: developmentScore !== null ? developmentScore / 25 : -1 },
+  ].filter((c) => c.percent >= 0);
+
+  if (categoryPercents.length === 0) {
+    return `Overall project health is ${healthLabel}, based on maintainer activity, security posture, and development cadence.`;
+  }
+
+  const strongest = categoryPercents.reduce((a, b) => (b.percent > a.percent ? b : a));
+  const weakest = categoryPercents.reduce((a, b) => (b.percent < a.percent ? b : a));
+  const strongLabel = CATEGORY_LABEL[strongest.key];
+  const weakLabel = CATEGORY_LABEL[weakest.key];
+
+  if (healthLabel === 'excellent' || healthLabel === 'healthy') {
+    return strongest.key === weakest.key
+      ? `Strong ${strongLabel}, security practices, and development cadence across the board.`
+      : `Strong ${strongLabel}. ${weakLabel.charAt(0).toUpperCase() + weakLabel.slice(1)} is the remaining gap keeping the score from Excellent.`;
+  }
+  if (strongest.key === weakest.key) {
+    return `Overall project health is ${healthLabel}, based on maintainer activity, security posture, and development cadence.`;
+  }
+  return `${weakLabel.charAt(0).toUpperCase() + weakLabel.slice(1)} is dragging the score down, despite stronger ${strongLabel}.`;
+};
+
+// ---------------------------------------------------------------------------
+// Sections 4-6: Category descriptions
+// ---------------------------------------------------------------------------
+
+export type HealthCategory = 'maintainer' | 'security' | 'development';
+
+type CategoryBand = 'success' | 'warning' | 'danger';
+
+const categoryThresholds: Record<HealthCategory, { success: number; warning: number }> = {
+  maintainer: { success: 28, warning: 16 },
+  security: { success: 23, warning: 12 },
+  development: { success: 17, warning: 9 },
+};
+
+const getCategoryBand = (category: HealthCategory, score: number): CategoryBand => {
+  const thresholds = categoryThresholds[category];
+  if (score >= thresholds.success) return 'success';
+  if (score >= thresholds.warning) return 'warning';
+  return 'danger';
+};
+
+const bandColor: Record<CategoryBand, 'positive' | 'warning' | 'negative'> = {
+  success: 'positive',
+  warning: 'warning',
+  danger: 'negative',
+};
+
+export const getCategoryScoreColor = (
+  category: HealthCategory,
+  score: number,
+): 'positive' | 'warning' | 'negative' => bandColor[getCategoryBand(category, score)];
+
+const getMaintainerDescription = (band: CategoryBand, signals: HealthBreakdownResults): string => {
+  const orgCount = signals.orgCount ?? 0;
+  const maintainerCount = signals.busFactorCount ?? 0;
+
+  if (band === 'success') {
+    return `Responsive maintainers, ${maintainerCount} active maintainer${maintainerCount === 1 ? '' : 's'} with merge rights, a stable contributor pipeline, and contributors spanning ${orgCount} organization${orgCount === 1 ? '' : 's'}.`;
+  }
+  if (band === 'warning') {
+    const teamDetail =
+      maintainerCount <= 1
+        ? 'A single active maintainer'
+        : `A small team of ${maintainerCount} active maintainers`;
+    const orgDetail =
+      orgCount <= 1
+        ? 'limited organizational diversity'
+        : `contributors across ${orgCount} organizations`;
+    return `${teamDetail} with slow response times, no contributor growth, and ${orgDetail}.`;
+  }
+  const responseDetail =
+    signals.medianIssueResponseS !== null
+      ? ` No response to issues in over ${formatDays(signals.medianIssueResponseS)}.`
+      : '';
+  return `No active maintainer.${responseDetail} There is no succession plan in place.`;
+};
+
+const getSecurityDescription = (band: CategoryBand, signals: HealthBreakdownResults): string => {
+  if (band === 'success') {
+    const scorecardDetail =
+      signals.scorecardScore !== null
+        ? ` OpenSSF Scorecard is ${signals.scorecardScore.toFixed(1)}/10.`
+        : '';
+    return `No open CVEs and full security practices in place.${scorecardDetail}`;
+  }
+  if (band === 'warning') {
+    const criticalCount = signals.openCriticals ?? 0;
+    const highCount = signals.openHighs ?? 0;
+    const cveText =
+      criticalCount + highCount > 0
+        ? `${criticalCount + highCount} open critical or high vulnerabilit${criticalCount + highCount === 1 ? 'y' : 'ies'}`
+        : 'No open critical or high vulnerabilities';
+    const missing: string[] = [];
+    if (!signals.securityPolicyEnabled) missing.push('no SECURITY.md');
+    if (!signals.branchProtectionEnabled) missing.push('no branch protection');
+    const missingText = missing.length > 0 ? `, but ${missing.join(' and ')}` : '';
+    return `${cveText}${missingText}.`;
+  }
+  const criticalCount = signals.openCriticals ?? 0;
+  const highCount = signals.openHighs ?? 0;
+  const cveDetail =
+    criticalCount + highCount > 0
+      ? `${criticalCount + highCount} open critical or high vulnerabilit${criticalCount + highCount === 1 ? 'y' : 'ies'}.`
+      : 'No open critical or high vulnerabilities.';
+  const practicesMissing: string[] = [];
+  if (!signals.securityPolicyEnabled) practicesMissing.push('no SECURITY.md');
+  if (!signals.branchProtectionEnabled) practicesMissing.push('no branch protection');
+  const practicesDetail =
+    practicesMissing.length > 0
+      ? `Security practices need attention: ${practicesMissing.join(' and ')}.`
+      : 'Dependency health needs attention.';
+  return `${cveDetail} ${practicesDetail}`;
+};
+
+const getDevelopmentDescription = (band: CategoryBand, signals: HealthBreakdownResults): string => {
+  if (band === 'success') {
+    const releaseDetail =
+      signals.daysSinceLatest !== null
+        ? `Active commit stream, with the last release ${Math.round(signals.daysSinceLatest)} days ago.`
+        : 'Active commit stream and a healthy release cadence.';
+    return `${releaseDetail} Issue triage is keeping pace with incoming reports.`;
+  }
+  if (band === 'warning') {
+    const releaseDetail =
+      signals.daysSinceLatest !== null && signals.daysSinceLatest > 365
+        ? `No release in over ${Math.floor(signals.daysSinceLatest / 365)} year${Math.floor(signals.daysSinceLatest / 365) === 1 ? '' : 's'}.`
+        : 'Release cadence has slowed.';
+    return `${releaseDetail} Some commit activity continues but the project shows signs of stagnation.`;
+  }
+  const commitDetail =
+    signals.commitsLast6m !== null && signals.commitsLast6m === 0
+      ? 'No commits in the past six months.'
+      : 'Minimal commit activity in the past six months.';
+  return `${commitDetail} Releases and issue resolution have both stalled.`;
+};
+
+export const getCategoryDescription = (
+  category: HealthCategory,
+  score: number | null,
+  available: boolean,
+  signals: HealthBreakdownResults | null,
+): string => {
+  if (!available || score === null || !signals) {
+    return getCategoryUnavailableDescription(category, signals);
+  }
+  const band = getCategoryBand(category, score);
+  if (category === 'maintainer') return getMaintainerDescription(band, signals);
+  if (category === 'security') return getSecurityDescription(band, signals);
+  return getDevelopmentDescription(band, signals);
+};
+
+const getCategoryUnavailableDescription = (
+  category: HealthCategory,
+  signals: HealthBreakdownResults | null,
+): string => {
+  if (category === 'maintainer') {
+    const availableSignals: string[] = [];
+    if (signals?.responsivenessAvailable) availableSignals.push('maintainer responsiveness');
+    if (signals?.busFactorAvailable) availableSignals.push('bus factor');
+    if (signals?.orgDiversityAvailable) availableSignals.push('org diversity');
+    const namedAvailable =
+      availableSignals.length > 0
+        ? `Only ${availableSignals.join(', ')} ${availableSignals.length === 1 ? 'is' : 'are'} available.`
+        : 'No maintainer signals are available.';
+    return `${namedAvailable} The category has been dropped from the Health Score composite.`;
+  }
+  if (category === 'security') {
+    const availableSignals: string[] = [];
+    if (signals?.scorecardAvailable) availableSignals.push('OpenSSF Scorecard');
+    if (signals?.securityPracticesAvailable) availableSignals.push('security practices');
+    if (signals?.dependencyHealthAvailable) availableSignals.push('dependency health');
+    const reason = signals?.isGerrit ? 'Gerrit-hosted projects' : 'this repository type';
+    const namedAvailable =
+      availableSignals.length > 0
+        ? `Only open vulnerability data and ${availableSignals.join(', ')} ${availableSignals.length === 1 ? 'is' : 'are'} available for ${reason}.`
+        : `Only open vulnerability data is available for ${reason}.`;
+    return `${namedAvailable} The category has been dropped from the Health Score composite.`;
+  }
+  const availableSignals: string[] = [];
+  if (signals?.releaseCadenceAvailable) availableSignals.push('release cadence');
+  if (signals?.issueResolutionAvailable) availableSignals.push('issue resolution');
+  if (signals?.prMergeAvailable) availableSignals.push('PR merge health');
+  const namedAvailable =
+    availableSignals.length > 0
+      ? `${availableSignals.join(' and ')} could not be assessed for this repository type.`
+      : 'Development signals could not be assessed for this repository type.';
+  return `${namedAvailable} The category has been dropped from the Health Score composite.`;
+};
+
+// ---------------------------------------------------------------------------
+// Section 7: Signal Rows
+// ---------------------------------------------------------------------------
+
+export type SignalRowStatus = 'positive' | 'warning' | 'negative' | 'no-data';
+
+export interface SignalRow {
+  status: SignalRowStatus;
+  description: string;
+}
+
+const blockedSignalDescription = (signalKey: string, signals: HealthBreakdownResults): string => {
+  if (signals.isGerrit) {
+    return `Not available for Gerrit-hosted repositories. ${signalKey} currently requires GitHub.`;
+  }
+  if (signals.isExcluded) {
+    return `Not available for this repository. ${signalKey} currently requires GitHub.`;
+  }
+  return `No data available. Repository has not been indexed for ${signalKey.toLowerCase()}.`;
+};
+
+// --- Maintainer signals ---
+
+export const getResponsivenessRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.responsivenessAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Maintainer responsiveness', signals),
+    };
+  }
+  if (signals.medianIssueResponseS === null) {
+    return {
+      status: 'no-data',
+      description: 'No issue or PR response data available for this project.',
+    };
+  }
+  const days = Math.round(signals.medianIssueResponseS / 86400);
+  const responseText = formatDays(signals.medianIssueResponseS);
+  if (days < 7) {
+    return {
+      status: 'positive',
+      description: `Median response time is ${responseText}, well within a week.`,
+    };
+  }
+  if (days < 30) {
+    return { status: 'warning', description: `Median response time is ${responseText}.` };
+  }
+  return {
+    status: 'negative',
+    description: `Median response time is ${responseText}, well over a month.`,
+  };
+};
+
+export const getBusFactorRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.busFactorAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('Bus factor', signals) };
+  }
+  const count = signals.busFactorCount ?? 0;
+  if (count >= 3) {
+    return {
+      status: 'positive',
+      description: `${count} active maintainers currently have merge rights.`,
+    };
+  }
+  if (count >= 1) {
+    return {
+      status: 'warning',
+      description: `Only ${count} active maintainer${count === 1 ? '' : 's'} currently ${count === 1 ? 'has' : 'have'} merge rights.`,
+    };
+  }
+  return { status: 'negative', description: 'No active maintainers with merge rights were found.' };
+};
+
+export const getOrgDiversityRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.orgDiversityAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('Org diversity', signals) };
+  }
+  const count = signals.orgCount ?? 0;
+  if (count >= 3) {
+    return { status: 'positive', description: `Contributors span ${count} organizations.` };
+  }
+  if (count >= 1) {
+    return {
+      status: 'warning',
+      description: `Contributors come from ${count} organization${count === 1 ? '' : 's'} only.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: 'No organization affiliation data is available for contributors.',
+  };
+};
+
+// --- Security signals ---
+
+export const getOpenVulnRow = (signals: HealthBreakdownResults): SignalRow => {
+  const criticals = signals.openCriticals ?? 0;
+  const highs = signals.openHighs ?? 0;
+  const moderates = signals.openModerates ?? 0;
+  if (criticals + highs > 0) {
+    return {
+      status: 'negative',
+      description: `${criticals + highs} open critical or high vulnerabilit${criticals + highs === 1 ? 'y' : 'ies'}.`,
+    };
+  }
+  if (moderates > 0) {
+    return {
+      status: 'warning',
+      description: `${moderates} open medium or low severity vulnerabilit${moderates === 1 ? 'y' : 'ies'}, no critical or high issues.`,
+    };
+  }
+  return { status: 'positive', description: 'No open vulnerabilities of any severity.' };
+};
+
+export const getScorecardRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.scorecardAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('OpenSSF Scorecard', signals),
+    };
+  }
+  const score = signals.scorecardScore ?? 0;
+  if (score >= 7) {
+    return { status: 'positive', description: `OpenSSF Scorecard is ${score.toFixed(1)}/10.` };
+  }
+  if (score >= 4) {
+    return {
+      status: 'warning',
+      description: `OpenSSF Scorecard is ${score.toFixed(1)}/10, below the recommended baseline.`,
+    };
+  }
+  return { status: 'negative', description: `OpenSSF Scorecard is ${score.toFixed(1)}/10.` };
+};
+
+export const getSecurityPracticesRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.securityPracticesAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Security practices', signals),
+    };
+  }
+  const practices = [
+    signals.securityPolicyEnabled,
+    signals.branchProtectionEnabled,
+    signals.branchProtectionRequiredReviews,
+    signals.branchProtectionRequiresStatusChecks,
+  ];
+  const enabledCount = practices.filter((p) => Boolean(p)).length;
+  if (enabledCount >= 3) {
+    return {
+      status: 'positive',
+      description: `${enabledCount} of 4 tracked security practices are in place.`,
+    };
+  }
+  if (enabledCount >= 1) {
+    const missing: string[] = [];
+    if (!signals.securityPolicyEnabled) missing.push('no SECURITY.md');
+    if (!signals.branchProtectionEnabled) missing.push('no branch protection');
+    return {
+      status: 'warning',
+      description: `${enabledCount} of 4 tracked security practices are in place, ${missing.join(', ') || 'with gaps remaining'}.`,
+    };
+  }
+  return { status: 'negative', description: 'No security practices are in place.' };
+};
+
+export const getDependencyHealthRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.dependencyHealthAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Dependency health', signals),
+    };
+  }
+  const vulnerable = signals.vulnerableDeps ?? 0;
+  if (vulnerable === 0) {
+    return {
+      status: 'positive',
+      description: 'All dependencies are clean of known vulnerabilities.',
+    };
+  }
+  if (vulnerable <= 3) {
+    return {
+      status: 'warning',
+      description: `${vulnerable} dependenc${vulnerable === 1 ? 'y has' : 'ies have'} a known vulnerability.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: `${vulnerable} dependencies have a known vulnerability.`,
+  };
+};
+
+// --- Development signals ---
+
+export const getReleaseCadenceRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.releaseCadenceAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('Release cadence', signals) };
+  }
+  const days = signals.daysSinceLatest;
+  if (days === null) {
+    return { status: 'no-data', description: 'No release history is available for this project.' };
+  }
+  if (days <= 180) {
+    return { status: 'positive', description: `Last release was ${Math.round(days)} days ago.` };
+  }
+  if (days <= 730) {
+    return {
+      status: 'warning',
+      description: `Last release was ${Math.round(days)} days ago, longer than six months.`,
+    };
+  }
+  return { status: 'negative', description: `No release in over ${Math.floor(days / 365)} years.` };
+};
+
+export const getCommitActivityRow = (signals: HealthBreakdownResults): SignalRow => {
+  const commits = signals.commitsLast6m;
+  if (commits === null) {
+    return { status: 'no-data', description: 'No commit history is available for this project.' };
+  }
+  if (commits > 20) {
+    return { status: 'positive', description: `${commits} commits in the past six months.` };
+  }
+  if (commits > 0) {
+    return {
+      status: 'warning',
+      description: `${commits} commit${commits === 1 ? '' : 's'} in the past six months, a slow pace.`,
+    };
+  }
+  return { status: 'negative', description: 'No commits in the past six months.' };
+};
+
+export const getIssueResolutionRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.issueResolutionAvailable) {
+    return {
+      status: 'no-data',
+      description: blockedSignalDescription('Issue resolution', signals),
+    };
+  }
+  const closed = signals.closed12m ?? 0;
+  const opened = signals.opened12m ?? 0;
+  if (opened === 0) {
+    return { status: 'positive', description: 'No new issues were opened in the past year.' };
+  }
+  if (closed >= opened) {
+    return {
+      status: 'positive',
+      description: `${closed} issues closed against ${opened} opened in the past year, closing faster than opening.`,
+    };
+  }
+  if (closed >= opened * 0.5) {
+    return {
+      status: 'warning',
+      description: `${closed} issues closed against ${opened} opened in the past year, a growing backlog.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: `${closed} issues closed against ${opened} opened in the past year, the backlog is growing quickly.`,
+  };
+};
+
+export const getPrMergeRow = (signals: HealthBreakdownResults): SignalRow => {
+  if (!signals.prMergeAvailable) {
+    return { status: 'no-data', description: blockedSignalDescription('PR merge health', signals) };
+  }
+  const merged = signals.merged12m ?? 0;
+  const closedUnmerged = signals.closedUnmerged12m ?? 0;
+  const total = merged + closedUnmerged;
+  if (total === 0) {
+    return {
+      status: 'no-data',
+      description: 'No external pull requests were received in the past year.',
+    };
+  }
+  const mergeRate = merged / total;
+  if (mergeRate > 0.5) {
+    return {
+      status: 'positive',
+      description: `${merged} of ${total} pull requests were merged in the past year.`,
+    };
+  }
+  if (mergeRate > 0) {
+    return {
+      status: 'warning',
+      description: `${merged} of ${total} pull requests were merged in the past year, under half.`,
+    };
+  }
+  return {
+    status: 'negative',
+    description: `None of ${total} pull requests were merged in the past year.`,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// Section 9: Impact Breakdown signal row descriptions
+// ---------------------------------------------------------------------------
+
+export const getTransitiveDependentsDescription = (value: number | null): string => {
+  if (value === null) {
+    return 'No transitive dependent data is available for this project.';
+  }
+  return `${value.toLocaleString('en-US')} packages depend on this project directly or indirectly, the primary measure of its blast radius.`;
+};
+
+export const getGraphCentralityDescription = (value: number | null, isPending: boolean): string => {
+  if (isPending) {
+    return 'PageRank-weighted centrality has not yet been computed for this project. The score will update when the weekly batch job completes.';
+  }
+  if (value === null) {
+    return 'No graph centrality data is available for this project.';
+  }
+  return `PageRank-weighted centrality score of ${value.toLocaleString('en-US')} across the dependency graph.`;
+};
+
+export const getDownloadsDescription = (value: number | null): string => {
+  if (value === null) {
+    return 'No package download data is available for this project.';
+  }
+  return `${value.toLocaleString('en-US')} downloads per month across all linked registries.`;
+};
+
+export const getDirectDependentsDescription = (value: number | null): string => {
+  if (value === null) {
+    return 'No direct dependent data is available for this project.';
+  }
+  return `${value.toLocaleString('en-US')} packages depend directly on this project.`;
+};
+
+export const getImpactSummaryDescription = (
+  impactLabel: string | null,
+  transitiveDependents?: number | null,
+): string | null => {
+  if (impactLabel === null) {
+    return 'This project publishes no tracked packages. Impact cannot be computed without a package registry presence.';
+  }
+  const dependentsDetail =
+    transitiveDependents !== null && transitiveDependents !== undefined
+      ? ` ${transitiveDependents.toLocaleString('en-US')} packages depend on it directly or indirectly.`
+      : '';
+  if (impactLabel === 'foundational')
+    return `Near-total blast radius across the dependency graph.${dependentsDetail}`;
+  if (impactLabel === 'major')
+    return `Large blast radius, depended on by many high-importance projects.${dependentsDetail}`;
+  if (impactLabel === 'moderate')
+    return `Moderate blast radius within its dependency graph.${dependentsDetail}`;
+  return `Narrow blast radius, depended on by a small set of projects with limited transitive reach.${dependentsDetail}`;
+};
diff --git a/frontend/config/trust-score.ts b/frontend/config/trust-score.ts
index 9b42d4223..10148774c 100644
--- a/frontend/config/trust-score.ts
+++ b/frontend/config/trust-score.ts
@@ -2,52 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { useRuntimeConfig } from '#imports';
-
-export interface TrustScoreConfig {
-  maxScore: number;
-  minScore: number;
-  label: string;
-  color: string;
-  ghBadgeColor: string;
-}
-
-export const lfxTrustScore: TrustScoreConfig[] = [
-  {
-    maxScore: 100,
-    minScore: 80,
-    label: 'Excellent',
-    color: 'bg-positive-500',
-    ghBadgeColor: '#10B981',
-  },
-  {
-    maxScore: 79,
-    minScore: 60,
-    label: 'Healthy',
-    color: 'bg-positive-500',
-    ghBadgeColor: '#A7F3D0',
-  },
-  {
-    maxScore: 59,
-    minScore: 40,
-    label: 'Stable',
-    color: 'bg-brand-500',
-    ghBadgeColor: '#0094FF',
-  },
-  {
-    maxScore: 39,
-    minScore: 20,
-    label: 'Unsteady',
-    color: 'bg-warning-500',
-    ghBadgeColor: '#F59E0B',
-  },
-  {
-    maxScore: 19,
-    minScore: 0,
-    label: 'Critical',
-    color: 'bg-negative-500',
-    ghBadgeColor: '#EF4444',
-  },
-];
+import { lfxColors } from '~/config/styles/colors';
 
 export const getBadgeUrl = (type: string, projectSlug: string, selectedRepos: string[] = []) => {
   const config = useRuntimeConfig();
@@ -55,8 +10,60 @@ export const getBadgeUrl = (type: string, projectSlug: string, selectedRepos: st
     selectedRepos.length ? `&repos=${selectedRepos.join(',')}` : ''
   }`;
 };
-export const getHealthScoreConfig = (score: number) => {
-  return (
-    lfxTrustScore.find((s) => score <= s.maxScore && score >= s.minScore) || lfxTrustScore.at(-1)!
-  );
+
+// v2 health score labels/colors, thresholds 85/70/50/30 (see project_insights_copy.pipe's
+// healthLabel multiIf). Keyed lowercase to match the backend-provided healthLabel string
+// (see collection-health-score-pill.vue).
+export interface HealthScoreV2Config {
+  label: string;
+  ghBadgeColor: string;
+}
+
+export const healthScoreV2Config: Record<string, HealthScoreV2Config> = {
+  excellent: { label: 'Excellent', ghBadgeColor: lfxColors.health.healthy },
+  healthy: { label: 'Healthy', ghBadgeColor: lfxColors.health.healthy },
+  fair: { label: 'Fair', ghBadgeColor: lfxColors.health.fair },
+  concerning: { label: 'Concerning', ghBadgeColor: lfxColors.health.concerning },
+  critical: { label: 'Critical', ghBadgeColor: lfxColors.health.critical },
+  unavailable: { label: 'Unavailable', ghBadgeColor: lfxColors.neutral[400] },
+};
+
+export const getHealthScoreV2Config = (label: string | null): HealthScoreV2Config => {
+  if (label && healthScoreV2Config[label]) {
+    return healthScoreV2Config[label];
+  }
+  return healthScoreV2Config.unavailable;
+};
+
+// Impact labels come from project_insights_copy.pipe's impactLabel multiIf: foundational (>=85),
+// major (>=60), moderate (>=30), minor (below).
+export const impactLabelConfig: Record<string, string> = {
+  foundational: 'Foundational',
+  major: 'Major',
+  moderate: 'Moderate',
+  minor: 'Minor',
+};
+
+export const getImpactLabelDisplay = (label: string | null): string => {
+  if (label && impactLabelConfig[label]) {
+    return impactLabelConfig[label];
+  }
+  return 'Unavailable';
+};
+
+// Lifecycle labels come from health_score_v2's lifecycleLabelV2: active, stable, declining,
+// abandoned, archived (best-state-wins across a project's repos).
+export const lifecycleLabelConfig: Record<string, { label: string; color: string }> = {
+  active: { label: 'Active', color: 'bg-positive-500' },
+  stable: { label: 'Stable', color: 'bg-accent-500' },
+  declining: { label: 'Declining', color: 'bg-warning-500' },
+  abandoned: { label: 'Abandoned', color: 'bg-negative-500' },
+  archived: { label: 'Archived', color: 'bg-neutral-400' },
+};
+
+export const getLifecycleLabelConfig = (label: string | null): { label: string; color: string } => {
+  if (label && lifecycleLabelConfig[label]) {
+    return lifecycleLabelConfig[label];
+  }
+  return { label: 'Unknown', color: 'bg-neutral-400' };
 };
diff --git a/frontend/server/api/badge/health-score.ts b/frontend/server/api/badge/health-score.ts
index 6319a2121..c2b708c14 100644
--- a/frontend/server/api/badge/health-score.ts
+++ b/frontend/server/api/badge/health-score.ts
@@ -1,23 +1,23 @@
 // Copyright (c) 2025 The Linux Foundation and each contributor.
 // SPDX-License-Identifier: MIT
 import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
-import type { HealthScoreTinybird } from '~~/types/overview/responses.types';
-import { getHealthScoreConfig } from '~~/config/trust-score';
+import type { ProjectInsightsTinybird } from '~~/types/project';
+import { getHealthScoreV2Config } from '~~/config/trust-score';
 
 export default defineEventHandler(async (event): Promise<void> => {
   const query = getQuery(event);
   const project: string = query?.project as string;
 
   try {
-    const res = await fetchFromTinybird<HealthScoreTinybird[]>(
-      '/v0/pipes/health_score_overview.json',
-      { project },
+    const res = await fetchFromTinybird<ProjectInsightsTinybird[]>(
+      '/v0/pipes/project_insights.json',
+      { slug: project },
     );
     if (!res.data || res.data.length === 0) {
       throw createError({ statusCode: 404, statusMessage: 'Project not found' });
     }
-    const healthScore = res.data[0].overallScore;
-    const config = getHealthScoreConfig(healthScore);
+    const healthLabel = res.data[0].healthLabel;
+    const config = getHealthScoreV2Config(healthLabel);
     const message = encodeURIComponent(config.label);
     const label = encodeURIComponent('Health Score');
     const color = config.ghBadgeColor.replace('#', '');
diff --git a/frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts b/frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts
new file mode 100644
index 000000000..aec382d64
--- /dev/null
+++ b/frontend/server/api/project/[slug]/overview/health-score-breakdown.get.ts
@@ -0,0 +1,30 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
+import type { HealthBreakdownResults } from '~~/types/overview/responses.types';
+
+export default defineEventHandler(async (event): Promise<HealthBreakdownResults> => {
+  const slug = (event.context.params as { slug: string }).slug;
+
+  try {
+    const res = await fetchFromTinybird<HealthBreakdownResults[]>(
+      '/v0/pipes/project_insights_health_breakdown.json',
+      {
+        slug,
+      },
+    );
+    if (!res.data || res.data.length === 0) {
+      throw createError({ statusCode: 404, statusMessage: 'Not found' });
+    }
+    return res.data[0];
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw error;
+    }
+    console.error('Error fetching health score breakdown:', error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch health score breakdown',
+    });
+  }
+});
diff --git a/frontend/server/api/project/[slug]/overview/health-score-impact.get.ts b/frontend/server/api/project/[slug]/overview/health-score-impact.get.ts
new file mode 100644
index 000000000..af909a8c5
--- /dev/null
+++ b/frontend/server/api/project/[slug]/overview/health-score-impact.get.ts
@@ -0,0 +1,30 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
+import type { ImpactBreakdownResults } from '~~/types/overview/responses.types';
+
+export default defineEventHandler(async (event): Promise<ImpactBreakdownResults> => {
+  const slug = (event.context.params as { slug: string }).slug;
+
+  try {
+    const res = await fetchFromTinybird<ImpactBreakdownResults[]>(
+      '/v0/pipes/project_insights_impact_breakdown.json',
+      {
+        slug,
+      },
+    );
+    if (!res.data || res.data.length === 0) {
+      throw createError({ statusCode: 404, statusMessage: 'Not found' });
+    }
+    return res.data[0];
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw error;
+    }
+    console.error('Error fetching health score impact breakdown:', error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch health score impact breakdown',
+    });
+  }
+});
diff --git a/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
new file mode 100644
index 000000000..d4071070e
--- /dev/null
+++ b/frontend/server/api/project/[slug]/overview/health-score-v2.get.ts
@@ -0,0 +1,50 @@
+// Copyright (c) 2025 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { fetchFromTinybird } from '~~/server/data/tinybird/tinybird';
+import type { ProjectInsightsTinybird } from '~~/types/project';
+import type { HealthScoreV2Results } from '~~/types/overview/responses.types';
+
+export default defineEventHandler(async (event): Promise<HealthScoreV2Results> => {
+  const slug = (event.context.params as { slug: string }).slug;
+
+  try {
+    const res = await fetchFromTinybird<ProjectInsightsTinybird[]>(
+      '/v0/pipes/project_insights.json',
+      {
+        slug,
+      },
+    );
+    if (!res.data || res.data.length === 0) {
+      throw createError({ statusCode: 404, statusMessage: 'Not found' });
+    }
+    const {
+      healthScoreV2,
+      healthLabel,
+      lifecycleLabel,
+      impactScore,
+      impactLabel,
+      maintainerHealthScoreV2,
+      securitySupplyChainScoreV2,
+      developmentActivityScoreV2,
+    } = res.data[0];
+    return {
+      healthScoreV2,
+      healthLabel,
+      lifecycleLabel,
+      impactScore,
+      impactLabel,
+      maintainerHealthScoreV2,
+      securitySupplyChainScoreV2,
+      developmentActivityScoreV2,
+    };
+  } catch (error: unknown) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw error;
+    }
+    console.error('Error fetching health score v2:', error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch health score v2',
+    });
+  }
+});
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index be8639b3b..badba4012 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -135,6 +135,7 @@ export default {
     '!bg-negative-900',
     'bg-neutral-50',
     'bg-health-healthy',
+    'bg-health-fair',
     'bg-health-concerning',
     'bg-health-critical',
   ],
diff --git a/frontend/types/overview/responses.types.ts b/frontend/types/overview/responses.types.ts
index e4cf83265..57fb9bbf7 100644
--- a/frontend/types/overview/responses.types.ts
+++ b/frontend/types/overview/responses.types.ts
@@ -58,6 +58,90 @@ export interface BenchmarkScoreData {
   percentage?: number;
 }
 
+export interface HealthScoreV2Results {
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
+}
+
+export type ImpactBreakdownBand = 'Top 1%' | 'Top 10%' | 'Top 25%' | 'Top 50%' | 'Bottom 50%';
+
+export interface ImpactBreakdownResults {
+  directDependents: number | null;
+  directDependentsTopPct: number | null;
+  directDependentsBand: ImpactBreakdownBand | null;
+  transitiveDependents: number | null;
+  transitiveDependentsTopPct: number | null;
+  transitiveDependentsBand: ImpactBreakdownBand | null;
+  downloads: number | null;
+  downloadsTopPct: number | null;
+  downloadsBand: ImpactBreakdownBand | null;
+  centrality: number | null;
+  centralityTopPct: number | null;
+  centralityBand: ImpactBreakdownBand | null;
+}
+
+// Flat shape matching the project_insights_health_breakdown.pipe response (mirrors
+// ImpactBreakdownResults' flat style, one row per project after the crowd.dev-side rollup).
+export interface HealthBreakdownResults {
+  // Maintainer
+  busFactorScore: number | null;
+  busFactorAvailable: boolean | null;
+  busFactorCount: number | null;
+  orgDiversityScore: number | null;
+  orgDiversityAvailable: boolean | null;
+  orgCount: number | null;
+  responsivenessScore: number | null;
+  responsivenessAvailable: boolean | null;
+  medianPrResponseS: number | null;
+  medianIssueResponseS: number | null;
+  isGerrit: boolean | null;
+  isExcluded: boolean | null;
+
+  // Security
+  openVulnScore: number | null;
+  openCriticals: number | null;
+  openHighs: number | null;
+  openModerates: number | null;
+  scorecardScorePts: number | null;
+  scorecardAvailable: boolean | null;
+  scorecardScore: number | null;
+  securityPracticesScore: number | null;
+  securityPracticesAvailable: boolean | null;
+  securityPolicyEnabled: 0 | 1 | null;
+  branchProtectionEnabled: 0 | 1 | null;
+  branchProtectionRequiredReviews: 0 | 1 | null;
+  branchProtectionRequiresStatusChecks: 0 | 1 | null;
+  branchProtectionAllowsForcePush: 0 | 1 | null;
+  dependencyHealthScore: number | null;
+  dependencyHealthAvailable: boolean | null;
+  vulnerableDeps: number | null;
+
+  // Development
+  releaseCadenceScore: number | null;
+  releaseCadenceAvailable: boolean | null;
+  daysSinceLatest: number | null;
+  daysBetweenRecent: number | null;
+  commitActivityScore: number | null;
+  commitsLast6m: number | null;
+  lastCommitAt: string | null;
+  issueResolutionScore: number | null;
+  issueResolutionAvailable: boolean | null;
+  closed12m: number | null;
+  opened12m: number | null;
+  medianCloseS: number | null;
+  prMergeScore: number | null;
+  prMergeAvailable: boolean | null;
+  merged12m: number | null;
+  closedUnmerged12m: number | null;
+  medianMergeS: number | null;
+}
+
 export interface HealthScoreResults {
   activeContributors: BenchmarkScoreData;
   contributorDependency: BenchmarkScoreData;
diff --git a/frontend/types/project.ts b/frontend/types/project.ts
index fbc8ed363..da760a770 100644
--- a/frontend/types/project.ts
+++ b/frontend/types/project.ts
@@ -130,6 +130,14 @@ export interface ProjectInsightsTinybird {
   popularityHealthScore: number;
   developmentHealthScore: number;
   securityHealthScore: number;
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
+  maintainerHealthScoreV2: number | null;
+  securitySupplyChainScoreV2: number | null;
+  developmentActivityScoreV2: number | null;
   firstCommit: string;
   starsLast365Days: number;
   forksLast365Days: number;
@@ -164,6 +172,11 @@ export interface ProjectInsights {
   popularityHealthScore: number;
   developmentHealthScore: number;
   securityHealthScore: number;
+  healthScoreV2: number | null;
+  healthLabel: string | null;
+  lifecycleLabel: string | null;
+  impactScore: number | null;
+  impactLabel: string | null;
   firstCommit: string;
   starsLast365Days: number;
   forksLast365Days: number;