diff --git a/odd-platform-ui/src/components/DataQuality/DataQuality.styles.ts b/odd-platform-ui/src/components/DataQuality/DataQuality.styles.ts
index 70d53039c..2e4259099 100644
--- a/odd-platform-ui/src/components/DataQuality/DataQuality.styles.ts
+++ b/odd-platform-ui/src/components/DataQuality/DataQuality.styles.ts
@@ -6,6 +6,7 @@ export const Container = styled.section(
     display: grid;
     justify-content: center;
     margin-top: ${theme.spacing(5)};
+    margin-bottom: ${theme.spacing(5)};
     gap: ${theme.spacing(3)};
   `
 );
diff --git a/odd-platform-ui/src/components/DataQuality/DataQuality.tsx b/odd-platform-ui/src/components/DataQuality/DataQuality.tsx
index 70022c97e..e899aead3 100644
--- a/odd-platform-ui/src/components/DataQuality/DataQuality.tsx
+++ b/odd-platform-ui/src/components/DataQuality/DataQuality.tsx
@@ -34,6 +34,10 @@ function calcTestResultsBreakdown(categoryResults: DataQualityCategoryResults[])
   );
 }
 
+function createDonutChartData(category: string, value: number, color: string) {
+  return { title: category, value, color };
+}
+
 const DataQuality: React.FC = () => {
   const { data, isSuccess } = useGetDataQualityDashboard();
   const { palette } = useTheme();
@@ -42,52 +46,36 @@ const DataQuality: React.FC = () => {
   const testResultsBreakdownChartData = useMemo(() => {
     if (!data) return [];
     const breakdown = calcTestResultsBreakdown(data.testResults);
-    return Array.from(breakdown.statusCounts.entries()).map(([status, count]) => ({
-      title: status,
-      value: count,
-      color: palette.runStatus[status].color,
-    }));
-  }, [data?.testResults]);
+    return Array.from(breakdown.statusCounts.entries()).map(([status, count]) =>
+      createDonutChartData(
+        status,
+        count,
+        palette.runStatus[status].color ?? palette.dataQualityDashboard.unknown
+      )
+    );
+  }, [data?.testResults, palette.runStatus]);
 
   const tableHealthData = useMemo(() => {
     if (!data) return [];
     const { healthyTables, warningTables, errorTables } =
       data.tablesDashboard.tablesHealth;
+    const { healthy, warning, error } = palette.dataQualityDashboard;
     return [
-      {
-        title: 'Healthy',
-        value: healthyTables,
-        color: palette.runStatus.SUCCESS.color,
-      },
-      {
-        title: 'Warning',
-        value: warningTables,
-        color: palette.runStatus.BROKEN.color,
-      },
-      {
-        title: 'Error',
-        value: errorTables,
-        color: palette.runStatus.FAILED.color,
-      },
+      createDonutChartData('Healthy', healthyTables, healthy),
+      createDonutChartData('Warning', warningTables, warning),
+      createDonutChartData('Error', errorTables, error),
     ];
-  }, [data?.tablesDashboard.monitoredTables]);
+  }, [data?.tablesDashboard.tablesHealth, palette.dataQualityDashboard]);
 
   const tableMonitoredTables = useMemo(() => {
     if (!data) return [];
     const { monitoredTables, notMonitoredTables } = data.tablesDashboard.monitoredTables;
+    const { monitored, nonMonitored } = palette.dataQualityDashboard;
     return [
-      {
-        title: 'Monitored',
-        value: monitoredTables,
-        color: palette.runStatus.SUCCESS.color,
-      },
-      {
-        title: 'Not Monitored',
-        value: notMonitoredTables,
-        color: palette.runStatus.UNKNOWN.color,
-      },
+      createDonutChartData('Monitored', monitoredTables, monitored),
+      createDonutChartData('Not Monitored', notMonitoredTables, nonMonitored),
     ];
-  }, [data?.tablesDashboard.monitoredTables]);
+  }, [data?.tablesDashboard.monitoredTables, palette.dataQualityDashboard]);
 
   const testResults = useMemo(() => {
     if (!data) return [];
@@ -110,28 +98,24 @@ const DataQuality: React.FC = () => {
         </S.DashboardLegend>
         <S.SubSection>
           <S.ChartWrapper>
-            <Typography variant='title' component='h4' align='center'>
-              {t('Table Health')}
-            </Typography>
             <DonutChart
               width={DONUT_CHART_WIDTH}
               height={DONUT_CHART_HEIGHT}
               innerRadius={DONUT_CHART_INNER_RADIUS}
               outerRadius={DONUT_CHART_OUTER_RADIUS}
               label={t('Total Tables')}
+              title={t('Table Health')}
               data={tableHealthData}
             />
           </S.ChartWrapper>
           <S.ChartWrapper>
-            <Typography variant='title' component='h4' align='center'>
-              {t('Test Results Breakdown')}
-            </Typography>
             <DonutChart
               width={DONUT_CHART_WIDTH}
               height={DONUT_CHART_HEIGHT}
               innerRadius={DONUT_CHART_INNER_RADIUS}
               outerRadius={DONUT_CHART_OUTER_RADIUS}
               label={t('Total Tests')}
+              title={t('Test Results Breakdown')}
               data={testResultsBreakdownChartData}
             />
           </S.ChartWrapper>
@@ -156,15 +140,13 @@ const DataQuality: React.FC = () => {
           </S.DashboardLegendItem>
         </S.DashboardLegend>
         <S.ChartWrapper>
-          <Typography variant='title' component='h4' align='center'>
-            {t('Monitored Tables')}
-          </Typography>
           <DonutChart
             width={DONUT_CHART_WIDTH}
             height={DONUT_CHART_HEIGHT}
             innerRadius={DONUT_CHART_INNER_RADIUS}
             outerRadius={DONUT_CHART_OUTER_RADIUS}
             label={t('Total Tables')}
+            title={t('Monitored Tables')}
             data={tableMonitoredTables}
           />
         </S.ChartWrapper>
diff --git a/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx b/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
index ba6a991cf..06658d7e5 100644
--- a/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
+++ b/odd-platform-ui/src/components/shared/elements/DonutChart/DonutChart.tsx
@@ -4,6 +4,7 @@ import type { LabelProps, PieLabelRenderProps } from 'recharts';
 import { typography } from 'theme/typography';
 import type { PolarViewBox } from 'recharts/types/util/types';
 import { palette } from 'theme/palette';
+import { Typography } from '@mui/material';
 
 interface DonutChartData {
   title: string;
@@ -14,6 +15,7 @@ interface DonutChartData {
 interface DonutChartProps extends Omit<React.ComponentProps<typeof PieChart>, 'data'> {
   data: DonutChartData[];
   label?: string;
+  title?: string;
 }
 const RADIAN = Math.PI / 180;
 const CustomLabel = ({
@@ -81,7 +83,7 @@ const CustomPieLabel = ({ viewBox, value, label }: LabelProps & { label?: string
 };
 
 const DonutChart: React.FC<DonutChartProps> = props => {
-  const { data: rawData, label, ...pieChartProps } = props;
+  const { data: rawData, label, title, ...pieChartProps } = props;
   const { width, height, innerRadius, outerRadius } = pieChartProps;
   const totalValue = useMemo(
     () => rawData.reduce((acc, { value }) => acc + value, 0),
@@ -96,30 +98,37 @@ const DonutChart: React.FC<DonutChartProps> = props => {
   }, [rawData, totalValue]);
 
   return (
-    <PieChart width={width} height={height}>
-      <Pie
-        label={totalValue ? CustomLabel : false}
-        labelLine={false}
-        data={data}
-        dataKey='value'
-        nameKey='title'
-        cx='50%'
-        cy='50%'
-        innerRadius={innerRadius}
-        outerRadius={outerRadius}
-        startAngle={90}
-        endAngle={-270}
-      >
-        <Label
-          width={30}
-          position='center'
-          content={<CustomPieLabel value={totalValue} label={label} />}
-        />
-        {data.map(entry => (
-          <Cell key={entry.title} fill={entry.color} />
-        ))}
-      </Pie>
-    </PieChart>
+    <>
+      {title ? (
+        <Typography variant='title' component='h4' align='center'>
+          {title}
+        </Typography>
+      ) : null}
+      <PieChart width={width} height={height}>
+        <Pie
+          label={totalValue ? CustomLabel : false}
+          labelLine={false}
+          data={data}
+          dataKey='value'
+          nameKey='title'
+          cx='50%'
+          cy='50%'
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          startAngle={90}
+          endAngle={-270}
+        >
+          <Label
+            width={30}
+            position='center'
+            content={<CustomPieLabel value={totalValue} label={label} />}
+          />
+          {data.map(entry => (
+            <Cell key={entry.title} fill={entry.color} />
+          ))}
+        </Pie>
+      </PieChart>
+    </>
   );
 };
 
diff --git a/odd-platform-ui/src/theme/interfaces.ts b/odd-platform-ui/src/theme/interfaces.ts
index daed31021..f9c3e5498 100644
--- a/odd-platform-ui/src/theme/interfaces.ts
+++ b/odd-platform-ui/src/theme/interfaces.ts
@@ -32,6 +32,14 @@ interface ItemCondition {
   disabled?: ItemColors;
 }
 
+type DataQualityDashboardLegend =
+  | 'monitored'
+  | 'nonMonitored'
+  | 'healthy'
+  | 'warning'
+  | 'error'
+  | 'unknown';
+
 type Input = ItemCondition & {
   label: ItemColors;
   hint: ItemColors;
@@ -46,6 +54,8 @@ type ReportStatus = Record<DataEntityRunStatus, ItemColors>;
 
 type RunStatus = Record<DataEntityRunStatus, ItemColors>;
 
+type DataQualityDashboard = Record<DataQualityDashboardLegend, string>;
+
 type AssociationRequestStatus = Record<OwnerAssociationRequestStatus, ItemColors>;
 
 type SLAStatus = Record<DataQualityTestSeverity | SLAColour, string>;
@@ -112,6 +122,7 @@ declare module '@mui/material/styles' {
     entityClass: EntityClasses;
     reportStatus: ReportStatus;
     runStatus: RunStatus;
+    dataQualityDashboard: DataQualityDashboard;
     associationRequestStatus: AssociationRequestStatus;
     button: Button;
     tag: Tag;
@@ -137,6 +148,7 @@ declare module '@mui/material/styles' {
     entityClass?: EntityClasses;
     reportStatus?: ReportStatus;
     runStatus?: RunStatus;
+    dataQualityDashboard?: DataQualityDashboard;
     associationRequestStatus?: AssociationRequestStatus;
     button?: Button;
     tag?: Tag;
diff --git a/odd-platform-ui/src/theme/palette.ts b/odd-platform-ui/src/theme/palette.ts
index 733e717b3..5ce961aad 100644
--- a/odd-platform-ui/src/theme/palette.ts
+++ b/odd-platform-ui/src/theme/palette.ts
@@ -110,6 +110,14 @@ export const palette = createPalette({
     DATA_QUALITY_TEST_RUN: colors.orange5,
     DATA_ENTITY_GROUP: colors.lightGreen5,
   },
+  dataQualityDashboard: {
+    monitored: colors.green60,
+    nonMonitored: colors.black30,
+    healthy: colors.green60,
+    warning: colors.orange50,
+    error: colors.red50,
+    unknown: colors.black30,
+  },
   runStatus: {
     SUCCESS: { color: colors.green60, background: colors.green5 },
     FAILED: { color: colors.red50, background: colors.red5 },