diff --git a/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx b/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
index c8c94cb4cc..bf0d46090b 100644
--- a/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
+++ b/frontend/src/component/insights/components/LineChart/LineChartComponent.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useMemo, useState, type VFC } from 'react';
+import { type ReactNode, useMemo, useState, type FC } from 'react';
 import {
     CategoryScale,
     LinearScale,
@@ -81,14 +81,14 @@ const customHighlightPlugin = {
     },
 };
 
-const LineChartComponent: VFC<{
+const LineChartComponent: FC<{
     data: ChartData<'line', unknown>;
     aspectRatio?: number;
     cover?: ReactNode;
     overrideOptions?: ChartOptions<'line'>;
     TooltipComponent?: ({
         tooltip,
-    }: { tooltip: TooltipState | null }) => ReturnType<VFC>;
+    }: { tooltip: TooltipState | null }) => ReturnType<FC>;
 }> = ({
     data,
     aspectRatio = 2.5,
diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx
index 2dd3a99c8f..96f35ba764 100644
--- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx
+++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/HealthChartTooltip/HealthChartTooltip.tsx
@@ -1,4 +1,4 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
 import type { InstanceInsightsSchemaProjectFlagTrendsItem } from 'openapi';
 import { Box, Divider, Paper, Typography, styled } from '@mui/material';
 import { Badge } from 'component/common/Badge/Badge';
@@ -33,55 +33,70 @@ const getHealthBadgeColor = (health?: number | null) => {
     return 'error';
 };
 
-const Distribution = ({ stale = 0, potentiallyStale = 0, total = 0 }) => (
-    <>
-        <HorizontalDistributionChart
-            sections={[{ type: 'default', value: 100 }]}
-            size='small'
-        />
-        <HorizontalDistributionChart
-            sections={[
-                {
-                    type: 'error',
-                    value: (stale / total) * 100,
-                },
-                {
-                    type: 'warning',
-                    value: (potentiallyStale / total) * 100,
-                },
-            ]}
-            size='small'
-        />
-        <Typography
-            variant='body2'
-            component='p'
-            sx={(theme) => ({ marginTop: theme.spacing(0.5) })}
-        >
-            <Typography
-                component='span'
-                sx={(theme) => ({
-                    color: theme.palette.error.border,
-                })}
-            >
-                {'● '}
-            </Typography>
-            Stale flags: {stale}
-        </Typography>
-        <Typography variant='body2' component='p'>
-            <Typography
-                component='span'
-                sx={(theme) => ({
-                    color: theme.palette.warning.border,
-                })}
-            >
-                {'● '}
-            </Typography>
-            Potentially stale flags: {potentiallyStale}
-        </Typography>
-    </>
-);
+const Distribution = ({ stale = 0, potentiallyStale = 0, total = 0 }) => {
+    const healthyFlagCount = total - stale - potentiallyStale;
 
-export const HealthTooltip: VFC<{ tooltip: TooltipState | null }> = ({
+    return (
+        <>
+            <HorizontalDistributionChart
+                sections={[
+                    {
+                        type: 'error',
+                        value: (stale / total) * 100,
+                    },
+                    {
+                        type: 'warning',
+                        value: (potentiallyStale / total) * 100,
+                    },
+                    {
+                        type: 'success',
+                        value: (healthyFlagCount / total) * 100,
+                    },
+                ]}
+                size='small'
+            />
+            <Typography
+                variant='body2'
+                component='p'
+                sx={(theme) => ({ marginTop: theme.spacing(0.5) })}
+            >
+                <Typography
+                    component='span'
+                    sx={(theme) => ({
+                        color: theme.palette.error.border,
+                    })}
+                >
+                    {'● '}
+                </Typography>
+                Stale flags: {stale}
+            </Typography>
+            <Typography variant='body2' component='p'>
+                <Typography
+                    component='span'
+                    sx={(theme) => ({
+                        color: theme.palette.warning.border,
+                    })}
+                >
+                    {'● '}
+                </Typography>
+                Potentially stale flags: {potentiallyStale}
+            </Typography>
+            <Typography variant='body2' component='p'>
+                <Typography
+                    component='span'
+                    sx={(theme) => ({
+                        color: theme.palette.success.border,
+                    })}
+                >
+                    {'● '}
+                </Typography>
+                Healthy flags: {healthyFlagCount}
+            </Typography>
+        </>
+    );
+};
+
+export const HealthTooltip: FC<{ tooltip: TooltipState | null }> = ({
     tooltip,
 }) => {
     const data = tooltip?.dataPoints.map((point) => {
diff --git a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx
index bc811db9c4..04ee11def0 100644
--- a/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx
+++ b/frontend/src/component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart.tsx
@@ -1,5 +1,5 @@
 import 'chartjs-adapter-date-fns';
-import { useMemo, type VFC } from 'react';
+import { type FC, useMemo } from 'react';
 import type { InstanceInsightsSchema } from 'openapi';
 import { HealthTooltip } from './HealthChartTooltip/HealthChartTooltip';
 import { useProjectChartData } from 'component/insights/hooks/useProjectChartData';
@@ -20,7 +20,21 @@ interface IProjectHealthChartProps {
     isLoading?: boolean;
 }
 
-export const ProjectHealthChart: VFC<IProjectHealthChartProps> = ({
+type WeekData = {
+    total: number;
+    stale: number;
+    potentiallyStale: number;
+    week: string;
+    date?: string;
+};
+
+const calculateHealth = (item: WeekData) =>
+    (
+        ((item.total - item.stale - item.potentiallyStale) / item.total) *
+        100
+    ).toFixed(2);
+
+export const ProjectHealthChart: FC<IProjectHealthChartProps> = ({
     projectFlagTrends,
     isAggregate,
     isLoading,
@@ -46,7 +60,8 @@ export const ProjectHealthChart: VFC<IProjectHealthChartProps> = ({
                         (acc, item) => {
                             if (item) {
                                 acc.total += item.total;
-                                acc.stale += item.stale + item.potentiallyStale;
+                                acc.stale += item.stale;
+                                acc.potentiallyStale += item.potentiallyStale;
                             }
                             if (!acc.date) {
                                 acc.date = item?.date;
@@ -56,13 +71,9 @@ export const ProjectHealthChart: VFC<IProjectHealthChartProps> = ({
                         {
                             total: 0,
                             stale: 0,
+                            potentiallyStale: 0,
                             week: label,
-                        } as {
-                            total: number;
-                            stale: number;
-                            week: string;
-                            date?: string;
-                        },
+                        } as WeekData,
                     );
             })
             .sort((a, b) => (a.week > b.week ? 1 : -1));
@@ -71,14 +82,11 @@ export const ProjectHealthChart: VFC<IProjectHealthChartProps> = ({
                 {
                     label: 'Health',
                     data: weeks.map((item) => ({
-                        health: item.total
-                            ? (
-                                  ((item.total - item.stale) / item.total) *
-                                  100
-                              ).toFixed(2)
-                            : undefined,
+                        health: item.total ? calculateHealth(item) : undefined,
                         date: item.date,
                         total: item.total,
+                        stale: item.stale,
+                        potentiallyStale: item.potentiallyStale,
                     })),
                     borderColor: theme.palette.primary.light,
                     backgroundColor: fillGradientPrimary,
diff --git a/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx b/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx
index b0e092c79a..6be9e790b9 100644
--- a/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx
+++ b/frontend/src/component/insights/componentsStat/HealthStats/HealthStats.tsx
@@ -1,4 +1,4 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
 import { useThemeMode } from 'hooks/useThemeMode';
 import { useTheme } from '@mui/material';
 
@@ -9,7 +9,7 @@ interface IHealthStatsProps {
     potentiallyStale: number;
 }
 
-export const HealthStats: VFC<IHealthStatsProps> = ({
+export const HealthStats: FC<IHealthStatsProps> = ({
     value,
     healthy,
     stale,