diff --git a/packages/app/src/specs/SpecNameDisplay.cy.tsx b/packages/app/src/specs/SpecNameDisplay.cy.tsx
new file mode 100644
index 000000000000..7df965a22752
--- /dev/null
+++ b/packages/app/src/specs/SpecNameDisplay.cy.tsx
@@ -0,0 +1,14 @@
+import SpecNameDisplay from './SpecNameDisplay.vue'
+
+describe('<SpecNameDisplay />', () => {
+  it('should display spec name information', () => {
+    cy.mount(<SpecNameDisplay specFileName="myFileName" specFileExtension=".cy.tsx" />)
+
+    cy.findByText('myFileName').should('be.visible')
+    cy.findByText('.cy.tsx').should('be.visible')
+
+    cy.findByTestId('spec-filename').should('have.attr', 'title', 'myFileName.cy.tsx')
+
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/app/src/specs/SpecNameDisplay.vue b/packages/app/src/specs/SpecNameDisplay.vue
new file mode 100644
index 000000000000..200d9f29dee5
--- /dev/null
+++ b/packages/app/src/specs/SpecNameDisplay.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="max-w-60 truncate overflow-hidden"
+    data-cy="spec-filename"
+    :title="specFileName + specFileExtension"
+  >
+    <span class="font-semibold text-gray-800">{{ specFileName }}</span><span class="text-gray-600">{{ specFileExtension }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+defineProps<{
+  specFileName: string
+  specFileExtension: string
+}>()
+
+</script>
diff --git a/packages/app/src/specs/SpecRunSummary.cy.tsx b/packages/app/src/specs/SpecRunSummary.cy.tsx
index e711be4dd4a6..a198d425d3e9 100644
--- a/packages/app/src/specs/SpecRunSummary.cy.tsx
+++ b/packages/app/src/specs/SpecRunSummary.cy.tsx
@@ -8,7 +8,7 @@ function validateTopBorder (color: string): void {
 }
 
 function validateFilename (expected: string): void {
-  cy.findByTestId('spec-run-filename').should('have.text', expected)
+  cy.findByTestId('spec-filename').should('have.text', expected)
 }
 
 function validateTimeAgo (expected: string): void {
diff --git a/packages/app/src/specs/SpecRunSummary.vue b/packages/app/src/specs/SpecRunSummary.vue
index 66186a71a843..0f1f6573560f 100644
--- a/packages/app/src/specs/SpecRunSummary.vue
+++ b/packages/app/src/specs/SpecRunSummary.vue
@@ -5,12 +5,10 @@
     :class="highlightColor"
     data-cy="spec-run-summary"
   >
-    <div
-      class="max-w-60 truncate overflow-hidden"
-      data-cy="spec-run-filename"
-    >
-      <span class="font-semibold text-gray-800">{{ props.specFileNoExtension }}</span><span class="text-gray-600">{{ props.specFileExtension }}</span>
-    </div>
+    <SpecNameDisplay
+      :spec-file-name="props.specFileNoExtension"
+      :spec-file-extension="props.specFileExtension"
+    />
     <div class="flex flex-row text-gray-700 text-size-14px gap-2 items-center">
       <div
         v-if="statusText"
@@ -68,6 +66,7 @@ import { computed } from 'vue'
 import type { CloudSpecRun, SpecDataAggregate } from '../../../graphql/src/gen/cloud-source-types.gen'
 import ResultCounts, { ResultCountsProps } from '@packages/frontend-shared/src/components/ResultCounts.vue'
 import { getTimeAgo, getDurationString } from '@packages/frontend-shared/src/utils/time'
+import SpecNameDisplay from './SpecNameDisplay.vue'
 
 const props = defineProps<{
   run: CloudSpecRun
diff --git a/packages/app/src/specs/flaky-badge/FlakyBadge.cy.tsx b/packages/app/src/specs/flaky-badge/FlakyBadge.cy.tsx
new file mode 100644
index 000000000000..ac170e142170
--- /dev/null
+++ b/packages/app/src/specs/flaky-badge/FlakyBadge.cy.tsx
@@ -0,0 +1,16 @@
+import FlakyBadge from './FlakyBadge.vue'
+import { defaultMessages } from '@cy/i18n'
+
+const flakyBadgeTestId = 'flaky-badge'
+
+describe('<FlakyBadge />', () => {
+  it('should render expected content', () => {
+    cy.mount(<FlakyBadge />)
+
+    cy.findByTestId(flakyBadgeTestId)
+    .should('have.text', defaultMessages.specPage.flaky.badgeLabel)
+    .and('be.visible')
+
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/app/src/specs/flaky-badge/FlakyBadge.vue b/packages/app/src/specs/flaky-badge/FlakyBadge.vue
new file mode 100644
index 000000000000..cc8447999a66
--- /dev/null
+++ b/packages/app/src/specs/flaky-badge/FlakyBadge.vue
@@ -0,0 +1,16 @@
+<template>
+  <Badge
+    :label="t('specPage.flaky.badgeLabel')"
+    status="warning"
+    class="font-bold uppercase"
+    data-cy="flaky-badge"
+  />
+</template>
+
+<script setup lang="ts">
+import Badge from '@packages/frontend-shared/src/components/Badge.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+</script>
diff --git a/packages/app/src/specs/flaky-badge/FlakySpecSummary.cy.tsx b/packages/app/src/specs/flaky-badge/FlakySpecSummary.cy.tsx
new file mode 100644
index 000000000000..e8cc56ae77e2
--- /dev/null
+++ b/packages/app/src/specs/flaky-badge/FlakySpecSummary.cy.tsx
@@ -0,0 +1,155 @@
+import FlakySpecSummary from './FlakySpecSummary.vue'
+
+describe('<FlakySpecSummary />', () => {
+  it('low severity', () => {
+    cy.mount(
+      <FlakySpecSummary
+        specName="test"
+        specExtension=".cy.tsx"
+        severity="low"
+        totalFlakyRuns={4}
+        totalRuns={50}
+        runsSinceLastFlake={15}
+        dashboardUrl="#"
+      />,
+    )
+
+    cy.percySnapshot()
+  })
+
+  it('medium severity', () => {
+    cy.mount(
+      <FlakySpecSummary
+        specName="test"
+        specExtension=".cy.tsx"
+        severity="medium"
+        totalFlakyRuns={14}
+        totalRuns={50}
+        runsSinceLastFlake={5}
+        dashboardUrl="#"
+      />,
+    )
+
+    cy.percySnapshot()
+  })
+
+  it('high severity', () => {
+    cy.mount(
+      <FlakySpecSummary
+        specName="test"
+        specExtension=".cy.tsx"
+        severity="high"
+        totalFlakyRuns={24}
+        totalRuns={50}
+        runsSinceLastFlake={2}
+        dashboardUrl="#"
+      />,
+    )
+
+    cy.percySnapshot()
+  })
+
+  it('fallback state', () => {
+    // Ensure component handles malformed/incomplete data without blowing up
+    cy.mount(
+      <FlakySpecSummary
+        specName="test"
+        specExtension=".cy.tsx"
+        severity={'unknown_value' as any}
+        totalFlakyRuns={null as any}
+        totalRuns={null as any}
+        runsSinceLastFlake={null as any}
+        dashboardUrl={null as any}
+      />,
+    )
+
+    cy.percySnapshot()
+  })
+
+  describe('flaky rate percentages', () => {
+    it('should round up to next integer if less than 99%', () => {
+      cy.mount(
+        <FlakySpecSummary
+          specName="test"
+          specExtension=".cy.tsx"
+          severity="high"
+          totalFlakyRuns={888}
+          totalRuns={1000}
+          runsSinceLastFlake={2}
+          dashboardUrl="#"
+        />,
+      )
+
+      cy.findByTestId('flaky-rate').should('have.text', '89% flaky rate')
+    })
+
+    it('should round down if between 99 and 100%', () => {
+      cy.mount(
+        <FlakySpecSummary
+          specName="test"
+          specExtension=".cy.tsx"
+          severity="high"
+          totalFlakyRuns={999}
+          totalRuns={1000}
+          runsSinceLastFlake={2}
+          dashboardUrl="#"
+        />,
+      )
+
+      cy.findByTestId('flaky-rate').should('have.text', '99% flaky rate')
+    })
+  })
+
+  describe('pluralization', () => {
+    it('should handle zero flaky runs and zero runs since last flake', () => {
+      cy.mount(
+        <FlakySpecSummary
+          specName="test"
+          specExtension=".cy.tsx"
+          severity="high"
+          totalFlakyRuns={0}
+          totalRuns={1000}
+          runsSinceLastFlake={0}
+          dashboardUrl="#"
+        />,
+      )
+
+      cy.findByTestId('flaky-runs').should('have.text', '0 flaky runs / 1000 total')
+      cy.findByTestId('last-flaky').should('have.text', 'Last flaky 0 runs ago')
+    })
+
+    it('should handle 1 flaky run and 1 run since last flake', () => {
+      cy.mount(
+        <FlakySpecSummary
+          specName="test"
+          specExtension=".cy.tsx"
+          severity="high"
+          totalFlakyRuns={1}
+          totalRuns={1000}
+          runsSinceLastFlake={1}
+          dashboardUrl="#"
+        />,
+      )
+
+      cy.findByTestId('flaky-runs').should('have.text', '1 flaky run / 1000 total')
+      cy.findByTestId('last-flaky').should('have.text', 'Last flaky 1 run ago')
+    })
+
+    it('should handle multiple flaky runs and multiple runs since last flake', () => {
+      cy.mount(
+        <FlakySpecSummary
+          specName="test"
+          specExtension=".cy.tsx"
+          severity="high"
+          totalFlakyRuns={2}
+          totalRuns={1000}
+          runsSinceLastFlake={2}
+          dashboardUrl="#"
+        />,
+      )
+
+      cy.findByTestId('flaky-runs').should('have.text', '2 flaky runs / 1000 total')
+      cy.findByTestId('last-flaky').should('have.text', 'Last flaky 2 runs ago')
+    })
+  })
+})
diff --git a/packages/app/src/specs/flaky-badge/FlakySpecSummary.vue b/packages/app/src/specs/flaky-badge/FlakySpecSummary.vue
new file mode 100644
index 000000000000..f11c020de491
--- /dev/null
+++ b/packages/app/src/specs/flaky-badge/FlakySpecSummary.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="border-t-4px min-w-200px w-full max-w-400px grid p-4 gap-4 grid-cols-1 justify-items-center"
+    :class="severity.accentClass"
+    data-cy="flaky-spec-summary"
+  >
+    <SpecNameDisplay
+      :spec-file-name="specName"
+      :spec-file-extension="specExtension"
+    />
+    <div class="flex flex-row w-full text-size-14px justify-center items-center">
+      <component :is="severity.icon" />
+      <span
+        class="font-medium ml-2"
+        :class="severity.textClass"
+      >{{ severity?.label }}</span>
+      <span
+        class="ml-4"
+        data-cy="flaky-rate"
+      >{{ t('specPage.flaky.flakyRate', [flakyRate]) }}</span>
+    </div>
+
+    <div class="w-full grid text-gray-700 text-size-14px gap-2 grid-cols-2 justify-items-center">
+      <span data-cy="flaky-runs">{{ t('specPage.flaky.flakyRuns', { count: totalFlakyRuns, flakyRuns: totalFlakyRuns, totalRuns }) }}</span>
+      <span data-cy="last-flaky">{{ t('specPage.flaky.lastFlaky', { count: runsSinceLastFlake, runsSinceLastFlake }) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+import { useI18n } from '@cy/i18n'
+import SpecNameDisplay from '../SpecNameDisplay.vue'
+import LowRateIcon from '~icons/cy/rate-low_x16'
+import MediumRateIcon from '~icons/cy/rate-medium_x16'
+import HighRateIcon from '~icons/cy/rate-high_x16'
+
+const { t } = useI18n()
+
+const SEVERITIES = {
+  'default': {
+    accentClass: 'border-t-orange-400',
+    textClass: null,
+    label: null,
+    icon: null,
+  },
+  'low': {
+    accentClass: 'border-t-orange-400',
+    textClass: 'text-orange-400',
+    label: t('specPage.flaky.severityLow'),
+    icon: LowRateIcon,
+  },
+  'medium': {
+    accentClass: 'border-t-orange-500',
+    textClass: 'text-orange-500',
+    label: t('specPage.flaky.severityMedium'),
+    icon: MediumRateIcon,
+  },
+  'high': {
+    accentClass: 'border-t-orange-600',
+    textClass: 'text-orange-600',
+    label: t('specPage.flaky.severityHigh'),
+    icon: HighRateIcon,
+  },
+}
+
+const props = defineProps<{
+  specName: string
+  specExtension: string
+  severity: 'low' | 'medium' | 'high'
+  totalFlakyRuns: number
+  totalRuns: number
+  runsSinceLastFlake: number
+  dashboardUrl: string
+}>()
+
+const flakyRate = computed(() => {
+  if (props.totalFlakyRuns <= 0 || props.totalRuns <= 0) {
+    return 0
+  }
+
+  const rawRate = (props.totalFlakyRuns / props.totalRuns) * 100
+
+  // Only display 100 if rawRate is actually 100 (do not round to 100)
+  if (rawRate > 99 && rawRate < 100) {
+    return 99
+  }
+
+  return Math.ceil(rawRate)
+})
+
+const severity = computed(() => SEVERITIES[props.severity] || SEVERITIES.default)
+
+</script>
diff --git a/packages/frontend-shared/src/assets/icons/rate-high_x16.svg b/packages/frontend-shared/src/assets/icons/rate-high_x16.svg
new file mode 100644
index 000000000000..5475db1490ed
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/rate-high_x16.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3668 2.73142L13.3668 2.73142L2.37382 11.7262C1.64649 12.3213 2.06732 13.5001 3.00708 13.5001H13.5C14.3284 13.5001 15 12.8286 15 12.0001V3.50536C15 2.66171 14.0197 2.19718 13.3668 2.73142Z" fill="#DB7903" stroke="#BD5800" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/rate-low_x16.svg b/packages/frontend-shared/src/assets/icons/rate-low_x16.svg
new file mode 100644
index 000000000000..a287db1e093e
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/rate-low_x16.svg
@@ -0,0 +1,9 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.00708 13.5001H13.5C14.3284 13.5001 15 12.8286 15 12.0001V3.50536C15 2.66171 14.0197 2.19718 13.3668 2.73142L13.6834 3.11839L13.3668 2.73142L2.37382 11.7262C1.64649 12.3213 2.06732 13.5001 3.00708 13.5001Z" stroke="black" stroke-opacity="0.2" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="path-2-outside-1_17851_4400" maskUnits="userSpaceOnUse" x="0.606445" y="7.63281" width="5" height="7" fill="black">
+<rect fill="white" x="0.606445" y="7.63281" width="5" height="7"/>
+<path d="M2.69045 12.1134L4.5 10.6328V13.0004H3.00708C2.5372 13.0004 2.32679 12.411 2.69045 12.1134Z"/>
+</mask>
+<path d="M2.69045 12.1134L4.5 10.6328V13.0004H3.00708C2.5372 13.0004 2.32679 12.411 2.69045 12.1134Z" fill="#DB7903"/>
+<path d="M4.5 10.6328H5.5V8.52249L3.86674 9.85887L4.5 10.6328ZM2.69045 12.1134L3.32371 12.8874L2.69045 12.1134ZM4.5 13.0004V14.0004H5.5V13.0004H4.5ZM3.86674 9.85887L2.05719 11.3395L3.32371 12.8874L5.13326 11.4068L3.86674 9.85887ZM3.00708 14.0004H4.5V12.0004H3.00708V14.0004ZM3.5 10.6328V13.0004H5.5V10.6328H3.5ZM2.05719 11.3395C0.966199 12.2322 1.59743 14.0004 3.00708 14.0004V12.0004C3.47696 12.0004 3.68738 12.5898 3.32371 12.8874L2.05719 11.3395Z" fill="#BD5800" mask="url(#path-2-outside-1_17851_4400)"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/rate-medium_x16.svg b/packages/frontend-shared/src/assets/icons/rate-medium_x16.svg
new file mode 100644
index 000000000000..8ecd3a89e60d
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/rate-medium_x16.svg
@@ -0,0 +1,10 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<mask id="path-2-outside-1_17851_4763" maskUnits="userSpaceOnUse" x="0.606445" y="4.35938" width="9" height="10" fill="black">
+<rect fill="white" x="0.606445" y="4.35938" width="9" height="10"/>
+<path d="M2.69045 12.1129L8.5 7.35938V12.9999H3.00708C2.5372 12.9999 2.32679 12.4105 2.69045 12.1129Z"/>
+</mask>
+<path d="M2.69045 12.1129L8.5 7.35938V12.9999H3.00708C2.5372 12.9999 2.32679 12.4105 2.69045 12.1129Z" fill="#DB7903"/>
+<path d="M8.5 7.35938H9.5V5.24905L7.86674 6.58544L8.5 7.35938ZM2.69045 12.1129L3.32371 12.8869H3.32371L2.69045 12.1129ZM8.5 12.9999V13.9999H9.5V12.9999H8.5ZM7.86674 6.58544L2.05719 11.339L3.32371 12.8869L9.13326 8.13331L7.86674 6.58544ZM3.00708 13.9999H8.5V11.9999H3.00708V13.9999ZM7.5 7.35938V12.9999H9.5V7.35938H7.5ZM2.05719 11.339C0.966209 12.2317 1.59742 13.9999 3.00708 13.9999V11.9999C3.47697 11.9999 3.68737 12.5893 3.32371 12.8869L2.05719 11.339Z" fill="#BD5800" mask="url(#path-2-outside-1_17851_4763)"/>
+
+</svg>
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index faab7392adf1..d20fa95a337c 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -151,6 +151,15 @@
         "linkText": "average spec durations"
       }
     },
+    "flaky": {
+      "badgeLabel": "Flaky",
+      "severityLow": "Low",
+      "severityMedium": "Medium",
+      "severityHigh": "High",
+      "flakyRate": "{0}% flaky rate",
+      "flakyRuns": "{flakyRuns} flaky runs / {totalRuns} total | {flakyRuns} flaky run / {totalRuns} total | {flakyRuns} flaky runs / {totalRuns} total",
+      "lastFlaky": "Last flaky {runsSinceLastFlake} runs ago | Last flaky {runsSinceLastFlake} run ago | Last flaky {runsSinceLastFlake} runs ago"
+    },
     "connectProjectButton": "Connect your project",
     "dashboardLoginButton": "Log in to the Dashboard",
     "reconnectProjectButton": "Reconnect your project",