diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
index 4bf05875579..1290979e267 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
@@ -1,245 +1,255 @@
-import { Card, Col, Row, Typography } from 'antd';
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import {
+  CheckCircleOutlined,
+  FilterOutlined,
+  SnippetsOutlined,
+} from '@ant-design/icons';
+import { Card, Col, Row, Space, Typography } from 'antd';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Cell, Pie, PieChart } from 'recharts';
-import { PRIMARY_COLOR, WHITE_SMOKE } from '../../../constants/Color.constants';
-import PageHeader from '../../PageHeader/PageHeader.component';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
+import {
+  BLUE_2,
+  GREEN_3,
+  RED_3,
+  YELLOW_2,
+} from '../../../constants/Color.constants';
+import { formatNumberWithComma } from '../../../utils/CommonUtils';
+import './pie-chart-summary-panel.style.less';
 import { SummaryPanelProps } from './SummaryPanel.interface';
 
-const renderCenterText = (value: number) => (
-  <text
-    dominantBaseline="middle"
-    fill="#222"
-    fontSize="28"
-    fontWeight="bold"
-    textAnchor="middle"
-    x="50%"
-    y="50%">
-    {value.toLocaleString()}
-  </text>
-);
-
 const PieChartSummaryPanel = ({
   testSummary,
   isLoading = false,
+  showAdditionalSummary = true,
 }: SummaryPanelProps) => {
   const { t } = useTranslation();
+  const {
+    total: totalTests = 0,
+    success: successTests = 0,
+    failed: failedTests = 0,
+    aborted: abortedTests = 0,
+    healthy: healthyDataAssets = 0,
+    totalDQEntities = 0,
+    totalEntityCount = 0,
+  } = testSummary || {};
 
-  const healthyDataAssets = useMemo(() => {
-    return [
-      {
-        name: 'healthy',
-        value: testSummary?.healthy,
-        color: '#12B76A',
-      },
-      {
-        name: 'total',
-        value:
-          (testSummary?.totalDQEntities ?? 0) - (testSummary?.healthy ?? 0),
-        color: WHITE_SMOKE,
-      },
-    ];
-  }, [testSummary?.healthy, testSummary?.totalDQEntities]);
+  const totalDataAssets = totalDQEntities;
+  const dataAssetsCoverage = totalDQEntities;
 
-  const dataAssetsCoverage = useMemo(() => {
+  const testData = useMemo(() => {
     return [
-      {
-        name: 'dataAssetsCoverage',
-        value: testSummary?.totalDQEntities,
-        color: PRIMARY_COLOR,
-      },
-      {
-        name: 'total',
-        value:
-          (testSummary?.totalEntityCount ?? 0) -
-          (testSummary?.totalDQEntities ?? 0),
-        color: WHITE_SMOKE,
-      },
+      { name: 'Success', value: successTests, color: GREEN_3 },
+      { name: 'Aborted', value: abortedTests, color: YELLOW_2 },
+      { name: 'Failed', value: failedTests, color: RED_3 },
     ];
-  }, [testSummary?.totalEntityCount, testSummary?.totalDQEntities]);
+  }, [successTests, abortedTests, failedTests]);
+
+  const healthyPercentage = useMemo(() => {
+    if (totalDataAssets === 0) {
+      return 0;
+    }
+
+    return Math.round((healthyDataAssets / totalDataAssets) * 100);
+  }, [healthyDataAssets, totalDataAssets]);
+
+  const coveragePercentage = useMemo(() => {
+    if (totalEntityCount === 0) {
+      return 0;
+    }
+
+    return Math.round((dataAssetsCoverage / totalEntityCount) * 100);
+  }, [dataAssetsCoverage, totalEntityCount]);
+
+  const healthyData = useMemo(() => {
+    const unhealthy = totalDataAssets - healthyDataAssets;
 
-  const testCaseSummary = useMemo(() => {
     return [
-      {
-        name: 'success',
-        data: [
-          {
-            name: 'success',
-            value: testSummary?.success,
-            color: '#12B76A',
-          },
-          {
-            name: 'total',
-            value: (testSummary?.total ?? 0) - (testSummary?.success ?? 0),
-            color: WHITE_SMOKE,
-          },
-        ],
-        innerRadius: 90,
-        outerRadius: 100,
-      },
-      {
-        name: 'failed',
-        data: [
-          {
-            name: 'failed',
-            value: testSummary?.failed,
-            color: '#EF4444',
-          },
-          {
-            name: 'total',
-            value: (testSummary?.total ?? 0) - (testSummary?.failed ?? 0),
-            color: WHITE_SMOKE,
-          },
-        ],
-        innerRadius: 70,
-        outerRadius: 80,
-      },
-      {
-        name: 'aborted',
-        data: [
-          {
-            name: 'aborted',
-            value: testSummary?.aborted,
-            color: '#F59E0B',
-          },
-          {
-            name: 'total',
-            value: (testSummary?.total ?? 0) - (testSummary?.aborted ?? 0),
-            color: WHITE_SMOKE,
-          },
-        ],
-        innerRadius: 50,
-        outerRadius: 60,
-      },
+      { name: 'Healthy', value: healthyDataAssets, color: GREEN_3 },
+      { name: 'Unhealthy', value: unhealthy, color: '#E5E7EB' },
     ];
-  }, [testSummary]);
+  }, [healthyDataAssets, totalDataAssets]);
+
+  const coverageData = useMemo(() => {
+    const uncovered = totalEntityCount - dataAssetsCoverage;
+
+    return [
+      { name: 'Covered', value: dataAssetsCoverage, color: BLUE_2 },
+      { name: 'Uncovered', value: uncovered, color: '#E5E7EB' },
+    ];
+  }, [dataAssetsCoverage, totalEntityCount]);
 
   return (
-    <Card loading={isLoading}>
-      <PageHeader
-        data={{
-          header: t('label.data-quality'),
-          subHeader: t('message.page-sub-header-for-data-quality'),
-        }}
-      />
-      <Row className="p-t-box" gutter={[32, 16]} justify="center">
-        {/* Total Tests */}
-        <Col md={8} xs={24}>
-          <Card style={{ textAlign: 'center', minHeight: 300 }}>
-            <Typography.Title
-              className="heading"
-              data-testid="heading"
-              level={5}>
-              {t('label.total-entity', {
-                entity: t('label.test-case-plural'),
-              })}
-            </Typography.Title>
-            <div className="flex-center m-y-md" style={{ height: 200 }}>
-              <PieChart height={200} width={200}>
-                {testCaseSummary.map((item) => {
-                  return (
-                    <Pie
-                      cx="50%"
-                      cy="50%"
-                      data={item.data}
-                      dataKey="value"
-                      endAngle={-270}
-                      innerRadius={item.innerRadius}
-                      key={item.name}
-                      outerRadius={item.outerRadius}
-                      startAngle={90}>
-                      {item.data?.map((entry) => (
-                        <Cell fill={entry.color} key={`cell-${entry.name}`} />
-                      ))}
-                    </Pie>
-                  );
-                })}
-                {renderCenterText(testSummary?.total || 0)}
-              </PieChart>
+    <Row className="pie-chart-summary-panel" gutter={[16, 16]}>
+      <Col md={8} sm={24} xs={24}>
+        <Card className="h-full" loading={isLoading}>
+          <div className="d-flex justify-between items-center">
+            <div className="d-flex items-center gap-4">
+              <FilterOutlined className="summary-icon total-tests-icon" />
+              <div>
+                <Typography.Paragraph className="summary-title">
+                  {t('label.total-entity', {
+                    entity: t('label.test-plural'),
+                  })}
+                </Typography.Paragraph>
+
+                <Typography.Paragraph className="summary-value m-b-0">
+                  {formatNumberWithComma(totalTests)}
+                </Typography.Paragraph>
+              </div>
             </div>
-            <div className="flex-center gap-6">
-              {testCaseSummary?.map((item) => (
-                <div className="flex-center gap-2" key={item.name}>
-                  <span
-                    style={{
-                      width: 10,
-                      height: 10,
-                      borderRadius: '50%',
-                      background: item.data[0].color,
-                      display: 'inline-block',
-                    }}
-                  />
-                  <span style={{ color: '#222', fontWeight: 500 }}>
-                    {t(item.name)}
-                  </span>
-                  <span style={{ color: '#6B7280', fontWeight: 500 }}>
-                    {item.data[0].value}
-                  </span>
+
+            <div className="chart-container d-flex items-center">
+              <Space className="m-r-md" direction="vertical" size={4}>
+                {testData.map((item) => (
+                  <Space key={item.name} size={8}>
+                    <div
+                      className="legend-dot"
+                      style={{ backgroundColor: item.color }}
+                    />
+                    <Typography.Text className="legend-text">
+                      {item.name} {formatNumberWithComma(item.value)}
+                    </Typography.Text>
+                  </Space>
+                ))}
+              </Space>
+              <ResponsiveContainer height={120} width={120}>
+                <PieChart>
+                  <Pie
+                    cx="50%"
+                    cy="50%"
+                    data={testData}
+                    dataKey="value"
+                    innerRadius={35}
+                    outerRadius={55}
+                    paddingAngle={2}>
+                    {testData.map((entry, index) => (
+                      <Cell fill={entry.color} key={`cell-${index}`} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                  <text
+                    className="chart-center-text"
+                    dominantBaseline="middle"
+                    textAnchor="middle"
+                    x="50%"
+                    y="50%">
+                    100%
+                  </text>
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </Card>
+      </Col>
+
+      {showAdditionalSummary && (
+        <>
+          <Col md={8} sm={24} xs={24}>
+            <Card className="h-full" loading={isLoading}>
+              <div className="d-flex justify-between items-center">
+                <div className="d-flex items-center gap-4">
+                  <CheckCircleOutlined className="summary-icon healthy-icon" />
+                  <div>
+                    <Typography.Paragraph className="summary-title">
+                      {t('label.healthy-data-asset-plural')}
+                    </Typography.Paragraph>
+
+                    <Typography.Paragraph className="summary-value m-b-0">
+                      {formatNumberWithComma(healthyDataAssets)}
+                    </Typography.Paragraph>
+                  </div>
                 </div>
-              ))}
-            </div>
-          </Card>
-        </Col>
-        {/* Healthy Data Assets */}
-        <Col md={8} xs={24}>
-          <Card style={{ textAlign: 'center', minHeight: 300 }}>
-            <Typography.Title
-              className="heading"
-              data-testid="heading"
-              level={5}>
-              {t('label.healthy-data-asset-plural')}
-            </Typography.Title>
-            <div className="flex-center m-y-md" style={{ height: 200 }}>
-              <PieChart height={200} width={200}>
-                <Pie
-                  cx="50%"
-                  cy="50%"
-                  data={healthyDataAssets}
-                  dataKey="value"
-                  endAngle={-270}
-                  innerRadius={90}
-                  outerRadius={100}
-                  startAngle={90}>
-                  {healthyDataAssets?.map((entry, idx) => (
-                    <Cell fill={entry.color} key={`cell-healthy-${idx}`} />
-                  ))}
-                </Pie>
-                {renderCenterText(testSummary?.healthy || 0)}
-              </PieChart>
-            </div>
-          </Card>
-        </Col>
-        {/* Data Assets Coverage */}
-        <Col md={8} xs={24}>
-          <Card style={{ textAlign: 'center', minHeight: 300 }}>
-            <Typography.Title
-              className="heading"
-              data-testid="heading"
-              level={5}>
-              {t('label.data-asset-plural-coverage')}
-            </Typography.Title>
-            <div className="flex-center m-y-md" style={{ height: 200 }}>
-              <PieChart height={200} width={200}>
-                <Pie
-                  cx="50%"
-                  cy="50%"
-                  data={dataAssetsCoverage}
-                  dataKey="value"
-                  endAngle={-270}
-                  innerRadius={90}
-                  outerRadius={100}
-                  startAngle={90}>
-                  {dataAssetsCoverage?.map((entry, idx) => (
-                    <Cell fill={entry.color} key={`cell-coverage-${idx}`} />
-                  ))}
-                </Pie>
-                {renderCenterText(testSummary?.totalDQEntities || 0)}
-              </PieChart>
-            </div>
-          </Card>
-        </Col>
-      </Row>
-    </Card>
+                <div className="chart-container">
+                  <ResponsiveContainer height={120} width={120}>
+                    <PieChart>
+                      <Pie
+                        cx="50%"
+                        cy="50%"
+                        data={healthyData}
+                        dataKey="value"
+                        innerRadius={35}
+                        outerRadius={55}
+                        paddingAngle={0}>
+                        {healthyData.map((entry, index) => (
+                          <Cell fill={entry.color} key={`cell-${index}`} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                      <text
+                        className="chart-center-text"
+                        dominantBaseline="middle"
+                        textAnchor="middle"
+                        x="50%"
+                        y="50%">
+                        {`${healthyPercentage}%`}
+                      </text>
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            </Card>
+          </Col>
+
+          <Col md={8} sm={24} xs={24}>
+            <Card className="h-full" loading={isLoading}>
+              <div className="d-flex justify-between items-center">
+                <div className="d-flex items-center gap-4">
+                  <SnippetsOutlined className="summary-icon coverage-icon" />
+                  <div>
+                    <Typography.Paragraph className="summary-title">
+                      {t('label.data-asset-plural-coverage')}
+                    </Typography.Paragraph>
+
+                    <Typography.Paragraph className="summary-value m-b-0">
+                      {formatNumberWithComma(dataAssetsCoverage)}
+                    </Typography.Paragraph>
+                  </div>
+                </div>
+                <div className="chart-container">
+                  <ResponsiveContainer height={120} width={120}>
+                    <PieChart>
+                      <Pie
+                        cx="50%"
+                        cy="50%"
+                        data={coverageData}
+                        dataKey="value"
+                        innerRadius={35}
+                        outerRadius={55}
+                        paddingAngle={0}>
+                        {coverageData.map((entry, index) => (
+                          <Cell fill={entry.color} key={`cell-${index}`} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                      <text
+                        className="chart-center-text"
+                        dominantBaseline="middle"
+                        textAnchor="middle"
+                        x="50%"
+                        y="50%">
+                        {`${coveragePercentage}%`}
+                      </text>
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            </Card>
+          </Col>
+        </>
+      )}
+    </Row>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/pie-chart-summary-panel.style.less b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/pie-chart-summary-panel.style.less
new file mode 100644
index 00000000000..81fad4a0054
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/pie-chart-summary-panel.style.less
@@ -0,0 +1,96 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@import (reference) '../../../styles/variables.less';
+
+.pie-chart-summary-panel {
+  .summary-icon {
+    font-size: 28px;
+
+    &.total-tests-icon {
+      color: #3b82f6;
+      background: #eff6ff;
+      padding: 8px;
+      border-radius: 6px;
+    }
+
+    &.healthy-icon {
+      color: @green-3;
+      background: #f0fdf4;
+      padding: 8px;
+      border-radius: 6px;
+    }
+
+    &.coverage-icon {
+      color: @blue-2;
+      background: #e0f2fe;
+      padding: 8px;
+      border-radius: 6px;
+    }
+  }
+
+  .summary-title {
+    font-size: 16px;
+    color: @text-color;
+    font-weight: 600;
+    margin-bottom: 0;
+  }
+
+  .summary-value {
+    font-size: 30px;
+    font-weight: 600;
+    color: @text-color;
+    line-height: 1.2;
+    margin-top: 8px;
+  }
+
+  .percentage-change {
+    font-size: 12px;
+    font-weight: 500;
+
+    &.positive {
+      color: @green-3;
+    }
+
+    &.negative {
+      color: @red-3;
+    }
+  }
+
+  .chart-container {
+    position: relative;
+  }
+
+  .title-value-section {
+    flex-shrink: 0;
+    margin-right: auto;
+  }
+
+  .chart-center-text {
+    font-size: 16px;
+    font-weight: 600;
+    fill: @text-color;
+  }
+
+  .legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .legend-text {
+    font-size: 12px;
+    color: @text-grey-muted;
+  }
+}