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
new file mode 100644
index 00000000000..f92f8053e15
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
@@ -0,0 +1,208 @@
+import { Card, Col, Row } from 'antd';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Cell, Pie, PieChart } from 'recharts';
+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 = false,
+}: SummaryPanelProps) => {
+  const { t } = useTranslation();
+  console.log('testSummary', testSummary);
+
+  //   {
+  //     "success": 4,
+  //     "failed": 3,
+  //     "aborted": 1,
+  //     "total": 8,
+  //     "unhealthy": 1,
+  //     "healthy": 1,
+  //     "totalDQEntities": 2,
+  //     "totalEntityCount": 36
+  // }
+
+  const success = useMemo(
+    () => [
+      {
+        name: 'success',
+        value: testSummary?.success,
+        color: '#22C55E',
+      },
+      {
+        name: 'total',
+        value: testSummary?.total,
+        color: '#E5E7EB',
+      },
+    ],
+    [testSummary]
+  );
+
+  return (
+    <Card loading={isLoading}>
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ fontWeight: 600, fontSize: 20 }}>
+          {t('test-cases-status', 'Test Cases Status')}
+        </div>
+        <div style={{ color: '#6B7280' }}>
+          {t(
+            'test-cases-status-desc',
+            'Understand the metadata available in your service and keep track of the main KPIs coverage'
+          )}
+        </div>
+      </div>
+      <Row gutter={[32, 16]} justify="center">
+        {/* Total Tests */}
+        <Col md={8} xs={24}>
+          <Card style={{ textAlign: 'center', minHeight: 320 }}>
+            <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
+              {t('total-tests', 'Total Tests')}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'relative',
+                height: 180,
+              }}>
+              <PieChart height={200} width={200}>
+                <Pie
+                  cx="50%"
+                  cy="50%"
+                  data={success}
+                  dataKey="value"
+                  innerRadius={85}
+                  outerRadius={100}>
+                  {success?.map((entry) => (
+                    <Cell fill={entry.color} key={`cell-${entry.name}`} />
+                  ))}
+                </Pie>
+                {/* {renderCenterText(testSummary?.totalTests || 0)} */}
+              </PieChart>
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                gap: 16,
+                marginTop: 8,
+              }}>
+              {testSummary?.totalTests?.map((item: any) => (
+                <div
+                  key={item.name}
+                  style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <span
+                    style={{
+                      width: 10,
+                      height: 10,
+                      borderRadius: '50%',
+                      background: item.color,
+                      display: 'inline-block',
+                    }}
+                  />
+                  <span style={{ color: '#222', fontWeight: 500 }}>
+                    {t(item.name)}
+                  </span>
+                  <span style={{ color: '#6B7280', fontWeight: 500 }}>
+                    {item.value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Card>
+        </Col>
+        {/* Healthy Data Assets */}
+        <Col md={8} xs={24}>
+          <Card style={{ textAlign: 'center', minHeight: 320 }}>
+            <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
+              {t('healthy-data-asset-plural')}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'relative',
+                height: 180,
+              }}>
+              <PieChart height={180} width={180}>
+                <Pie
+                  cx="50%"
+                  cy="50%"
+                  data={testSummary?.healthyDataAssets}
+                  dataKey="value"
+                  endAngle={-30}
+                  innerRadius={60}
+                  nameKey="name"
+                  outerRadius={80}
+                  startAngle={210}
+                  stroke="none">
+                  {testSummary?.healthyDataAssets?.map(
+                    (entry: any, idx: number) => (
+                      <Cell fill={entry.color} key={`cell-healthy-${idx}`} />
+                    )
+                  )}
+                </Pie>
+                {renderCenterText(1000)}
+              </PieChart>
+            </div>
+          </Card>
+        </Col>
+        {/* Data Assets Coverage */}
+        <Col md={8} xs={24}>
+          <Card style={{ textAlign: 'center', minHeight: 320 }}>
+            <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
+              {t('data-asset-plural-coverage')}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'relative',
+                height: 180,
+              }}>
+              <PieChart height={180} width={180}>
+                <Pie
+                  cx="50%"
+                  cy="50%"
+                  data={testSummary?.dataAssetsCoverage}
+                  dataKey="value"
+                  endAngle={-30}
+                  innerRadius={60}
+                  nameKey="name"
+                  outerRadius={80}
+                  startAngle={210}
+                  stroke="none">
+                  {testSummary?.dataAssetsCoverage?.map(
+                    (entry: any, idx: number) => (
+                      <Cell fill={entry.color} key={`cell-coverage-${idx}`} />
+                    )
+                  )}
+                </Pie>
+                {renderCenterText(1000)}
+              </PieChart>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+    </Card>
+  );
+};
+
+export default PieChartSummaryPanel;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
index 7e519e4dbec..13278eee274 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
@@ -13,6 +13,7 @@
 import { RightOutlined } from '@ant-design/icons';
 import {
   Button,
+  Card,
   Col,
   Dropdown,
   Form,
@@ -81,6 +82,7 @@ import { PagingHandlerParams } from '../../common/NextPrevious/NextPrevious.inte
 import Searchbar from '../../common/SearchBarComponent/SearchBar.component';
 import DataQualityTab from '../../Database/Profiler/DataQualityTab/DataQualityTab';
 import { TestCaseSearchParams } from '../DataQuality.interface';
+import PieChartSummaryPanel from '../SummaryPannel/PieChartSummaryPanel.component';
 import { SummaryPanel } from '../SummaryPannel/SummaryPanel.component';
 
 export const TestCases = () => {
@@ -482,196 +484,204 @@ export const TestCases = () => {
   }
 
   return (
-    <Row data-testid="test-case-container" gutter={[16, 16]}>
-      <Col span={24}>
-        <Form<TestCaseSearchParams>
-          form={form}
-          layout="horizontal"
-          onValuesChange={handleFilterChange}>
-          <Space wrap align="center" className="w-full" size={16}>
-            <Form.Item className="m-0 w-80">
-              <Searchbar
-                removeMargin
-                placeholder={t('label.search-entity', {
-                  entity: t('label.test-case-lowercase'),
-                })}
-                searchValue={searchValue}
-                onSearch={(value) => handleSearchParam('searchValue', value)}
-              />
-            </Form.Item>
-            <Form.Item noStyle name="selectedFilters">
-              <Dropdown
-                menu={{
-                  items: filterMenu,
-                  selectedKeys: selectedFilter,
-                  onClick: handleMenuClick,
-                }}
-                trigger={['click']}>
-                <Button
-                  ghost
-                  className="expand-btn"
-                  data-testid="advanced-filter"
-                  type="primary">
-                  {t('label.advanced')}
-                  <RightOutlined />
-                </Button>
-              </Dropdown>
-            </Form.Item>
-            {selectedFilter.includes(TEST_CASE_FILTERS.table) && (
-              <Form.Item
-                className="m-0 w-80"
-                label={t('label.table')}
-                name="tableFqn">
-                <Select
-                  allowClear
-                  showSearch
-                  data-testid="table-select-filter"
-                  loading={isOptionsLoading}
-                  options={tableOptions}
-                  placeholder={t('label.table')}
-                  onSearch={debounceFetchTableData}
+    <Card>
+      <Row data-testid="test-case-container" gutter={[16, 16]}>
+        <Col span={24}>
+          <Form<TestCaseSearchParams>
+            form={form}
+            layout="horizontal"
+            onValuesChange={handleFilterChange}>
+            <Space wrap align="center" className="w-full" size={16}>
+              <Form.Item className="m-0 w-80">
+                <Searchbar
+                  removeMargin
+                  placeholder={t('label.search-entity', {
+                    entity: t('label.test-case-lowercase'),
+                  })}
+                  searchValue={searchValue}
+                  onSearch={(value) => handleSearchParam('searchValue', value)}
                 />
               </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.platform) && (
-              <Form.Item
-                className="m-0 w-min-20"
-                label={t('label.platform')}
-                name="testPlatforms">
-                <Select
-                  allowClear
-                  data-testid="platform-select-filter"
-                  mode="multiple"
-                  options={TEST_CASE_PLATFORM_OPTION}
-                  placeholder={t('label.platform')}
-                />
+              <Form.Item noStyle name="selectedFilters">
+                <Dropdown
+                  menu={{
+                    items: filterMenu,
+                    selectedKeys: selectedFilter,
+                    onClick: handleMenuClick,
+                  }}
+                  trigger={['click']}>
+                  <Button
+                    ghost
+                    className="expand-btn"
+                    data-testid="advanced-filter"
+                    type="primary">
+                    {t('label.advanced')}
+                    <RightOutlined />
+                  </Button>
+                </Dropdown>
               </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.type) && (
-              <Form.Item
-                className="m-0 w-40"
-                label={t('label.type')}
-                name="testCaseType">
-                <Select
-                  allowClear
-                  data-testid="test-case-type-select-filter"
-                  options={TEST_CASE_TYPE_OPTION}
-                  placeholder={t('label.type')}
-                />
-              </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.status) && (
-              <Form.Item
-                className="m-0 w-40"
-                label={t('label.status')}
-                name="testCaseStatus">
-                <Select
-                  allowClear
-                  data-testid="status-select-filter"
-                  options={TEST_CASE_STATUS_OPTION}
-                  placeholder={t('label.status')}
-                />
-              </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.lastRun) && (
-              <Form.Item
-                className="m-0"
-                label={t('label.last-run')}
-                name="lastRunRange"
-                trigger="handleDateRangeChange"
-                valuePropName="defaultDateRange">
-                <DatePickerMenu showSelectedCustomRange />
-              </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.tags) && (
-              <Form.Item
-                className="m-0 w-80"
-                label={t('label.tag-plural')}
-                name="tags">
-                <Select
-                  allowClear
-                  showSearch
-                  data-testid="tags-select-filter"
-                  loading={isOptionsLoading}
-                  mode="multiple"
-                  options={tagOptions}
-                  placeholder={t('label.tag-plural')}
-                  onSearch={debounceFetchTagOptions}
-                />
-              </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.tier) && (
-              <Form.Item
-                className="m-0 w-40"
-                label={t('label.tier')}
-                name="tier">
-                <Select
-                  allowClear
-                  showSearch
-                  data-testid="tier-select-filter"
-                  options={tierOptions}
-                  placeholder={t('label.tier')}
-                />
-              </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.service) && (
-              <Form.Item
-                className="m-0 w-80"
-                label={t('label.service')}
-                name="serviceName">
-                <Select
-                  allowClear
-                  showSearch
-                  data-testid="service-select-filter"
-                  loading={isOptionsLoading}
-                  options={serviceOptions}
-                  placeholder={t('label.service')}
-                  onSearch={debounceFetchServiceOptions}
-                />
-              </Form.Item>
-            )}
-            {selectedFilter.includes(TEST_CASE_FILTERS.dimension) && (
-              <Form.Item
-                className="m-0 w-80"
-                label={t('label.dimension')}
-                name="dataQualityDimension">
-                <Select
-                  allowClear
-                  showSearch
-                  data-testid="dimension-select-filter"
-                  options={TEST_CASE_DIMENSIONS_OPTION}
-                  placeholder={t('label.dimension')}
-                />
-              </Form.Item>
-            )}
-          </Space>
-        </Form>
-      </Col>
-      <Col span={24}>
-        <SummaryPanel
-          showAdditionalSummary
-          isLoading={isTestCaseSummaryLoading}
-          testSummary={testCaseSummary}
-        />
-      </Col>
-      <Col span={24}>
-        <DataQualityTab
-          afterDeleteAction={fetchTestCases}
-          breadcrumbData={[
-            {
-              name: t('label.data-quality'),
-              url: getDataQualityPagePath(DataQualityPageTabs.TEST_CASES),
-            },
-          ]}
-          fetchTestCases={sortTestCase}
-          isLoading={isLoading}
-          pagingData={pagingData}
-          showPagination={showPagination}
-          testCases={testCase}
-          onTestCaseResultUpdate={handleStatusSubmit}
-          onTestUpdate={handleTestCaseUpdate}
-        />
-      </Col>
-    </Row>
+              {selectedFilter.includes(TEST_CASE_FILTERS.table) && (
+                <Form.Item
+                  className="m-0 w-80"
+                  label={t('label.table')}
+                  name="tableFqn">
+                  <Select
+                    allowClear
+                    showSearch
+                    data-testid="table-select-filter"
+                    loading={isOptionsLoading}
+                    options={tableOptions}
+                    placeholder={t('label.table')}
+                    onSearch={debounceFetchTableData}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.platform) && (
+                <Form.Item
+                  className="m-0 w-min-20"
+                  label={t('label.platform')}
+                  name="testPlatforms">
+                  <Select
+                    allowClear
+                    data-testid="platform-select-filter"
+                    mode="multiple"
+                    options={TEST_CASE_PLATFORM_OPTION}
+                    placeholder={t('label.platform')}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.type) && (
+                <Form.Item
+                  className="m-0 w-40"
+                  label={t('label.type')}
+                  name="testCaseType">
+                  <Select
+                    allowClear
+                    data-testid="test-case-type-select-filter"
+                    options={TEST_CASE_TYPE_OPTION}
+                    placeholder={t('label.type')}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.status) && (
+                <Form.Item
+                  className="m-0 w-40"
+                  label={t('label.status')}
+                  name="testCaseStatus">
+                  <Select
+                    allowClear
+                    data-testid="status-select-filter"
+                    options={TEST_CASE_STATUS_OPTION}
+                    placeholder={t('label.status')}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.lastRun) && (
+                <Form.Item
+                  className="m-0"
+                  label={t('label.last-run')}
+                  name="lastRunRange"
+                  trigger="handleDateRangeChange"
+                  valuePropName="defaultDateRange">
+                  <DatePickerMenu showSelectedCustomRange />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.tags) && (
+                <Form.Item
+                  className="m-0 w-80"
+                  label={t('label.tag-plural')}
+                  name="tags">
+                  <Select
+                    allowClear
+                    showSearch
+                    data-testid="tags-select-filter"
+                    loading={isOptionsLoading}
+                    mode="multiple"
+                    options={tagOptions}
+                    placeholder={t('label.tag-plural')}
+                    onSearch={debounceFetchTagOptions}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.tier) && (
+                <Form.Item
+                  className="m-0 w-40"
+                  label={t('label.tier')}
+                  name="tier">
+                  <Select
+                    allowClear
+                    showSearch
+                    data-testid="tier-select-filter"
+                    options={tierOptions}
+                    placeholder={t('label.tier')}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.service) && (
+                <Form.Item
+                  className="m-0 w-80"
+                  label={t('label.service')}
+                  name="serviceName">
+                  <Select
+                    allowClear
+                    showSearch
+                    data-testid="service-select-filter"
+                    loading={isOptionsLoading}
+                    options={serviceOptions}
+                    placeholder={t('label.service')}
+                    onSearch={debounceFetchServiceOptions}
+                  />
+                </Form.Item>
+              )}
+              {selectedFilter.includes(TEST_CASE_FILTERS.dimension) && (
+                <Form.Item
+                  className="m-0 w-80"
+                  label={t('label.dimension')}
+                  name="dataQualityDimension">
+                  <Select
+                    allowClear
+                    showSearch
+                    data-testid="dimension-select-filter"
+                    options={TEST_CASE_DIMENSIONS_OPTION}
+                    placeholder={t('label.dimension')}
+                  />
+                </Form.Item>
+              )}
+            </Space>
+          </Form>
+        </Col>
+        <Col span={24}>
+          <SummaryPanel
+            showAdditionalSummary
+            isLoading={isTestCaseSummaryLoading}
+            testSummary={testCaseSummary}
+          />
+        </Col>
+        <Col span={24}>
+          <PieChartSummaryPanel
+            isLoading={isTestCaseSummaryLoading}
+            testSummary={testCaseSummary}
+          />
+        </Col>
+        <Col span={24}>
+          <DataQualityTab
+            afterDeleteAction={fetchTestCases}
+            breadcrumbData={[
+              {
+                name: t('label.data-quality'),
+                url: getDataQualityPagePath(DataQualityPageTabs.TEST_CASES),
+              },
+            ]}
+            fetchTestCases={sortTestCase}
+            isLoading={isLoading}
+            pagingData={pagingData}
+            showPagination={showPagination}
+            testCases={testCase}
+            onTestCaseResultUpdate={handleStatusSubmit}
+            onTestUpdate={handleTestCaseUpdate}
+          />
+        </Col>
+      </Row>
+    </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
index 936ee8859e9..af2973fef84 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
@@ -11,13 +11,15 @@
  *  limitations under the License.
  */
 
-import { Card, Col, Row, Tabs, Typography } from 'antd';
+import { Button, Card, Col, Row, Tabs, Typography } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory, useParams } from 'react-router-dom';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import ManageButton from '../../components/common/EntityPageInfos/ManageButton/ManageButton';
 import TabsLabel from '../../components/common/TabsLabel/TabsLabel.component';
+import { ROUTES } from '../../constants/constants';
+import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import { EntityType } from '../../enums/entity.enum';
 import { withPageLayout } from '../../hoc/withPageLayout';
 import i18n from '../../utils/i18next/LocalUtil';
@@ -32,6 +34,8 @@ const DataQualityPage = () => {
     useParams<{ tab: DataQualityPageTabs }>();
   const history = useHistory();
   const { t } = useTranslation();
+  const { permissions } = usePermissionProvider();
+  const { testSuite: testSuitePermission } = permissions;
   const menuItems = useMemo(() => {
     const data = DataQualityClassBase.getDataQualityTab();
 
@@ -58,45 +62,67 @@ const DataQualityPage = () => {
   };
 
   return (
-    <div>
-      <Card className="h-full overflow-y-auto">
-        <DataQualityProvider>
-          <Row data-testid="data-insight-container" gutter={[0, 16]}>
-            <Col span={isEmpty(extraDropdownContent) ? 24 : 23}>
-              <Typography.Title
-                className="m-b-md"
-                data-testid="page-title"
-                level={5}>
-                {t('label.data-quality')}
-              </Typography.Title>
-              <Typography.Paragraph
-                className="text-grey-muted"
-                data-testid="page-sub-title">
-                {t('message.page-sub-header-for-data-quality')}
-              </Typography.Paragraph>
-            </Col>
-            {isEmpty(extraDropdownContent) ? null : (
-              <Col className="d-flex justify-end" span={1}>
-                <ManageButton
-                  entityName={EntityType.TEST_CASE}
-                  entityType={EntityType.TEST_CASE}
-                  extraDropdownContent={extraDropdownContent}
-                />
+    <DataQualityProvider>
+      <Row data-testid="data-insight-container" gutter={[0, 16]}>
+        <Col span={24}>
+          <Card>
+            <Row>
+              <Col span={isEmpty(extraDropdownContent) ? 16 : 23}>
+                <Typography.Title
+                  className="m-b-md"
+                  data-testid="page-title"
+                  level={5}>
+                  {t('label.data-quality')}
+                </Typography.Title>
+                <Typography.Paragraph
+                  className="text-grey-muted m-b-0"
+                  data-testid="page-sub-title">
+                  {t('message.page-sub-header-for-data-quality')}
+                </Typography.Paragraph>
               </Col>
-            )}
-            <Col span={24}>
-              <Tabs
-                activeKey={activeTab}
-                className="tabs-new"
-                data-testid="tabs"
-                items={menuItems}
-                onChange={handleTabChange}
-              />
-            </Col>
-          </Row>
-        </DataQualityProvider>
-      </Card>
-    </div>
+              <Col className="d-flex justify-end" span={8}>
+                {activeTab === DataQualityPageTabs.TEST_SUITES &&
+                  testSuitePermission?.Create && (
+                    <Link
+                      data-testid="add-test-suite-btn"
+                      to={ROUTES.ADD_TEST_SUITES}>
+                      <Button type="primary">
+                        {t('label.add-entity', {
+                          entity: t('label.bundle-suite-plural'),
+                        })}
+                      </Button>
+                    </Link>
+                  )}
+                {activeTab === DataQualityPageTabs.TEST_CASES &&
+                  testSuitePermission?.Create && (
+                    <Button data-testid="add-test-case-btn" type="primary">
+                      {t('label.add-entity', {
+                        entity: t('label.test-case'),
+                      })}
+                    </Button>
+                  )}
+                {isEmpty(extraDropdownContent) ? null : (
+                  <ManageButton
+                    entityName={EntityType.TEST_CASE}
+                    entityType={EntityType.TEST_CASE}
+                    extraDropdownContent={extraDropdownContent}
+                  />
+                )}
+              </Col>
+            </Row>
+          </Card>
+        </Col>
+        <Col span={24}>
+          <Tabs
+            activeKey={activeTab}
+            className="tabs-new data-quality-page-tabs"
+            data-testid="tabs"
+            items={menuItems}
+            onChange={handleTabChange}
+          />
+        </Col>
+      </Row>
+    </DataQualityProvider>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/data-quality-page.less b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/data-quality-page.less
index e1ce348a048..9d4ba7dd795 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/data-quality-page.less
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/data-quality-page.less
@@ -13,9 +13,8 @@
 
 @import (reference) '../../styles/variables.less';
 
-.data-quality-page-left-panel-menu {
-  &.ant-menu-root.ant-menu-inline {
-    padding-top: @size-md;
-    border-radius: @border-radius-sm;
+.data-quality-page-tabs {
+  .ant-tabs-tabpane {
+    margin-top: @size-md;
   }
 }