diff --git a/src/components/pac/PacOverview.tsx b/src/components/pac/PacOverview.tsx
index 1499264e..e6a5a8ce 100644
--- a/src/components/pac/PacOverview.tsx
+++ b/src/components/pac/PacOverview.tsx
@@ -59,7 +59,8 @@ const PacOverview: React.FC<PacOverviewProps> = ({
     return (
       <>
         <NamespaceBar isDisabled={true} />
-        <PageSection hasBodyWrapper={false}
+        <PageSection
+          hasBodyWrapper={false}
           type="breadcrumb"
           className="co-m-nav-title--detail pipelines-console-plugin__background-transparent"
         >
@@ -88,7 +89,8 @@ const PacOverview: React.FC<PacOverviewProps> = ({
   return (
     <>
       <NamespaceBar isDisabled={true} />
-      <PageSection hasBodyWrapper={false}
+      <PageSection
+        hasBodyWrapper={false}
         type="breadcrumb"
         className="co-m-nav-title--detail pipelines-console-plugin__background-transparent"
       >
diff --git a/src/components/pipelines-overview/NamespaceDropdown.tsx b/src/components/pipelines-overview/NamespaceDropdown.tsx
index b2f43dd3..19df0037 100644
--- a/src/components/pipelines-overview/NamespaceDropdown.tsx
+++ b/src/components/pipelines-overview/NamespaceDropdown.tsx
@@ -10,7 +10,6 @@ import {
 import { alphanumericCompare } from './utils';
 import { useTranslation } from 'react-i18next';
 
-import './PipelinesOverview.scss';
 import {
   useFlag,
   useK8sWatchResource,
@@ -65,8 +64,10 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
   }, [projects, projectsLoaded]);
 
   return (
-    <>
-      <label className="project-dropdown-label">{t('Project')}</label>
+    <div className="form-group">
+      <div>
+        <label>{t('Project')}</label>
+      </div>
       <Dropdown
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setValue(isOpen)}
@@ -80,7 +81,6 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
             {selected !== ALL_NAMESPACES_KEY ? selected : allNamespacesTitle}
           </MenuToggle>
         )}
-        className="pipeline-overview__variable-dropdown"
         isScrollable
       >
         <DropdownList>
@@ -96,7 +96,7 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
           ))}
         </DropdownList>
       </Dropdown>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/pipelines-overview/PipelineRunsDurationCard.scss b/src/components/pipelines-overview/PipelineRunsDurationCard.scss
deleted file mode 100644
index 1918b3c5..00000000
--- a/src/components/pipelines-overview/PipelineRunsDurationCard.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.pipeline-overview {
-  &__duration-card {
-    &__value {
-      text-align: right;
-    }
-  }
-}
diff --git a/src/components/pipelines-overview/PipelineRunsDurationCard.tsx b/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
index 2ac79042..b1c76f43 100644
--- a/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
+++ b/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
@@ -15,6 +15,7 @@ import {
   Grid,
   GridItem,
 } from '@patternfly/react-core';
+import { t_chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
 import { useFlag } from '@openshift-console/dynamic-plugin-sdk';
 import { SummaryProps, getFilter, useInterval } from './utils';
 import { getResultsSummary } from '../utils/summary-api';
@@ -23,8 +24,6 @@ import { ALL_NAMESPACES_KEY } from '../../consts';
 import { formatTime, getDropDownDate } from './dateTime';
 import { LoadingInline } from '../Loading';
 
-import './PipelineRunsDurationCard.scss';
-
 interface PipelinesRunsDurationProps {
   namespace: string;
   timespan: number;
@@ -111,7 +110,7 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
   return (
     <>
       <Card
-        className={classNames('pipeline-overview__duration-card', {
+        className={classNames('pf-v6-u-h-100', {
           'card-border': bordered,
         })}
       >
@@ -129,19 +128,17 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
             />
           ) : (
             <>
-              <Grid
-                hasGutter
-                className="pipeline-overview__duration-card__grid"
-              >
-                <GridItem span={6}>
+              <Grid hasGutter className="cpf-v6-u-mb-sm">
+                <GridItem span={9} className="pf-v6-u-mb-sm">
                   <span>
-                    <MonitoringIcon className="pipeline-overview__duration-card__icon" />
+                    <MonitoringIcon className="pf-v6-u-mr-sm" />
                     {t('Average duration')}
                   </span>
                 </GridItem>
                 <GridItem
-                  span={6}
-                  className="pipeline-overview__duration-card__value"
+                  span={3}
+                  style={{ color: blueColor.value }}
+                  className="pf-v6-u-text-align-end"
                 >
                   {loaded ? (
                     summaryData?.['avg_duration'] ? (
@@ -154,19 +151,20 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
                   )}
                 </GridItem>
               </Grid>
-              <Grid
-                hasGutter
-                className="pipeline-overview__duration-card__grid"
-              >
-                <GridItem span={6}>
+              <Grid hasGutter className="pf-v6-u-mb-sm">
+                <GridItem span={9} className="pf-v6-u-mb-sm">
                   <span>
-                    <InfoCircleIcon className="pipeline-overview__duration-card__info-icon" />
+                    <InfoCircleIcon
+                      className="pf-v6-u-mr-sm"
+                      style={{ color: blueColor.value }}
+                    />
                     {t('Maximum')}
                   </span>
                 </GridItem>
                 <GridItem
-                  span={6}
-                  className="pipeline-overview__duration-card__value"
+                  span={3}
+                  className="pf-v6-u-text-align-end"
+                  style={{ color: blueColor.value }}
                 >
                   {loaded ? (
                     summaryData?.['max_duration'] ? (
@@ -180,15 +178,16 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
                 </GridItem>
               </Grid>
               <Grid hasGutter>
-                <GridItem span={6}>
+                <GridItem span={9}>
                   <span>
-                    <HistoryIcon className="pipeline-overview__duration-card__icon" />
+                    <HistoryIcon className="pf-v6-u-mr-sm" />
                     {t('Total duration')}
                   </span>
                 </GridItem>
                 <GridItem
-                  span={6}
-                  className="pipeline-overview__duration-card__value"
+                  span={3}
+                  className="pf-v6-u-text-align-end"
+                  style={{ color: blueColor.value }}
                 >
                   {loaded ? (
                     summaryData?.['total_duration'] ? (
diff --git a/src/components/pipelines-overview/PipelineRunsDurationCardK8s.tsx b/src/components/pipelines-overview/PipelineRunsDurationCardK8s.tsx
index 166b28c2..f9f244fc 100644
--- a/src/components/pipelines-overview/PipelineRunsDurationCardK8s.tsx
+++ b/src/components/pipelines-overview/PipelineRunsDurationCardK8s.tsx
@@ -6,6 +6,7 @@ import {
   InfoCircleIcon,
   MonitoringIcon,
 } from '@patternfly/react-icons';
+import { t_chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
 import {
   Alert,
   Card,
@@ -24,7 +25,6 @@ import {
 
 import { ALL_NAMESPACES_KEY } from '../../consts';
 
-import './PipelineRunsDurationCard.scss';
 import {
   usePipelineMetricsForAllNamespacePoll,
   usePipelineMetricsForNamespaceForPipelinePoll,
@@ -183,15 +183,16 @@ const PipelineRunsDurationCardK8s: React.FC<PipelinesRunsDurationProps> = ({
   return (
     <>
       <Card
-        className={classNames('pipeline-overview__duration-card', {
+        className={classNames('pf-v6-u-h-100', {
           'card-border': bordered,
         })}
+        style={{ minWidth: '100%', fontSize: 18 }}
       >
-        <CardTitle>
+        <CardTitle style={{ fontSize: 20 }}>
           <span>{t('Duration')}</span>
         </CardTitle>
         <Divider />
-        <CardBody>
+        <CardBody style={{ fontSize: 18, minWidth: 'min-content' }}>
           {pipelineRunsDurationError ? (
             <Alert
               variant="danger"
@@ -203,17 +204,19 @@ const PipelineRunsDurationCardK8s: React.FC<PipelinesRunsDurationProps> = ({
             <>
               <Grid
                 hasGutter
-                className="pipeline-overview__duration-card__grid"
+                className="pf-v6-u-mb-sm"
+                style={{ fontSize: 18 }}
               >
-                <GridItem span={6}>
-                  <span>
-                    <MonitoringIcon className="pipeline-overview__duration-card__icon" />
+                <GridItem span={9} className="pf-v6-u-mb-sm">
+                  <span style={{ fontSize: 18 }}>
+                    <MonitoringIcon className="pf-v6-u-mr-sm" />
                     {t('Average duration')}
                   </span>
                 </GridItem>
                 <GridItem
-                  span={6}
-                  className="pipeline-overview__duration-card__value"
+                  span={3}
+                  style={{ color: blueColor.value, fontSize: 18 }}
+                  className="pf-v6-u-text-align-end"
                 >
                   {loadingPipelineRunsCount ? (
                     <LoadingInline />
@@ -224,31 +227,37 @@ const PipelineRunsDurationCardK8s: React.FC<PipelinesRunsDurationProps> = ({
               </Grid>
               <Grid
                 hasGutter
-                className="pipeline-overview__duration-card__grid"
+                className="pf-v6-u-mb-sm"
+                style={{ fontSize: 18 }}
               >
-                <GridItem span={6}>
-                  <span>
-                    <InfoCircleIcon className="pipeline-overview__duration-card__info-icon" />
+                <GridItem span={9} className="pf-v6-u-mb-sm">
+                  <span style={{ fontSize: 18 }}>
+                    <InfoCircleIcon
+                      style={{ color: blueColor.value }}
+                      className="pf-v6-u-mr-sm"
+                    />
                     {t('Maximum')}
                   </span>
                 </GridItem>
                 <GridItem
-                  span={6}
-                  className="pipeline-overview__duration-card__value"
+                  span={3}
+                  style={{ color: blueColor.value, fontSize: 18 }}
+                  className="pf-v6-u-text-align-end"
                 >
                   {loadingPipelineRunsCount ? <LoadingInline /> : '-'}
                 </GridItem>
               </Grid>
-              <Grid hasGutter>
-                <GridItem span={6}>
-                  <span>
-                    <HistoryIcon className="pipeline-overview__duration-card__icon" />
+              <Grid hasGutter style={{ fontSize: 18 }}>
+                <GridItem span={9}>
+                  <span style={{ fontSize: 18 }}>
+                    <HistoryIcon className="pf-v6-u-mr-sm" />
                     {t('Total duration')}
                   </span>
                 </GridItem>
                 <GridItem
-                  span={6}
-                  className="pipeline-overview__duration-card__value"
+                  span={3}
+                  className="pf-v6-u-text-align-end"
+                  style={{ color: blueColor.value, fontSize: 18 }}
                 >
                   {loadingPipelineRunsDuration ? (
                     <LoadingInline />
diff --git a/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx b/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
index 4ff8e864..0b1b614c 100644
--- a/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
+++ b/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
@@ -237,16 +237,30 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
         className={classNames({
           'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
           'card-border': bordered,
+          'pf-v6-u-h-100': !pipelineRunsChartError,
         })}
+        style={{
+          minHeight: '220px',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
       >
-        <CardTitle className="pipeline-overview__number-of-plr-card__title">
+        <CardTitle className="pf-v6-u-pb-0">
           <span>{t('Number of PipelineRuns')}</span>
         </CardTitle>
         <CardBody
-          className={classNames({
-            'pipeline-overview__number-of-plr-card__body':
-              !pipelineRunsChartError,
-          })}
+          style={{
+            ...(!pipelineRunsChartError && {
+              flex: '1 1 0',
+              minHeight: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-start',
+              padding: 0,
+            }),
+          }}
         >
           {pipelineRunsChartError ? (
             <Alert
@@ -256,7 +270,12 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
               className="pf-v6-u-mb-md pf-v6-u-ml-lg pf-v6-u-mt-lg"
             />
           ) : (
-            <div className="pipeline-overview__number-of-plr-card__bar-chart-div">
+            <div
+              style={{
+                minHeight: 145,
+                flexShrink: 0,
+              }}
+            >
               {loaded ? (
                 <Chart
                   containerComponent={
@@ -273,7 +292,8 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
                   padding={{
                     top: 10,
                     bottom: 55,
-                    left: 50,
+                    left: 40,
+                    right: 50,
                   }}
                   themeColor={ChartThemeColor.blue}
                 >
@@ -289,7 +309,7 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
                   </ChartGroup>
                 </Chart>
               ) : (
-                <div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-h-100">
+                <div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-pl-md pf-v6-u-h-100">
                   <LoadingInline />
                 </div>
               )}
diff --git a/src/components/pipelines-overview/PipelineRunsNumbersChartK8s.tsx b/src/components/pipelines-overview/PipelineRunsNumbersChartK8s.tsx
index ce712878..01c9f3a0 100644
--- a/src/components/pipelines-overview/PipelineRunsNumbersChartK8s.tsx
+++ b/src/components/pipelines-overview/PipelineRunsNumbersChartK8s.tsx
@@ -256,18 +256,35 @@ const PipelineRunsNumbersChartK8s: React.FC<PipelinesRunsNumbersChartProps> = ({
     <>
       <Card
         className={classNames({
-          'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
+          'pf-v6-u-h-100': !pipelineRunsChartError,
           'card-border': bordered,
         })}
+        style={
+          !pipelineRunsChartError
+            ? {
+                minHeight: '220px',
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+              }
+            : undefined
+        }
       >
-        <CardTitle className="pipeline-overview__number-of-plr-card__title">
+        <CardTitle className="pf-v6-u-pb-0">
           <span>{t('Number of PipelineRuns')}</span>
         </CardTitle>
         <CardBody
-          className={classNames({
-            'pipeline-overview__number-of-plr-card__body':
-              !pipelineRunsChartError,
-          })}
+          style={{
+            ...(!pipelineRunsChartError && {
+              flex: '1 1 0',
+              minHeight: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'flex-end',
+              alignItems: 'flex-start',
+              padding: 0,
+            }),
+          }}
         >
           {pipelineRunsChartError ? (
             <Alert
@@ -277,7 +294,12 @@ const PipelineRunsNumbersChartK8s: React.FC<PipelinesRunsNumbersChartProps> = ({
               className="pf-v6-u-ml-lg"
             />
           ) : (
-            <div className="pipeline-overview__number-of-plr-card__bar-chart-div">
+            <div
+              style={{
+                minHeight: 145,
+                flexShrink: 0,
+              }}
+            >
               {loadingRunSuccessRatioData ? (
                 <LoadingInline />
               ) : (
@@ -297,6 +319,7 @@ const PipelineRunsNumbersChartK8s: React.FC<PipelinesRunsNumbersChartProps> = ({
                     top: 10,
                     bottom: 55,
                     left: 50,
+                    right: 50,
                   }}
                   themeColor={ChartThemeColor.blue}
                 >
diff --git a/src/components/pipelines-overview/PipelineRunsStatusCard.tsx b/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
index 56d90039..302f6edf 100644
--- a/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
+++ b/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
@@ -25,9 +25,7 @@ import {
 import { chart_color_black_200 as othersColor } from '@patternfly/react-tokens/dist/js/chart_color_black_200';
 import { chart_color_black_500 as cancelledColor } from '@patternfly/react-tokens/dist/js/chart_color_black_500';
 import { chart_color_green_400 as successColor } from '@patternfly/react-tokens/dist/js/chart_color_green_400';
-import {
-  t_chart_global_danger_color_100 as failureColor,
-} from '@patternfly/react-tokens/dist/js/t_chart_global_danger_color_100';
+import { t_chart_global_danger_color_100 as failureColor } from '@patternfly/react-tokens/dist/js/t_chart_global_danger_color_100';
 import { chart_color_blue_300 as runningColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { useFlag } from '@openshift-console/dynamic-plugin-sdk';
 import {
@@ -40,7 +38,6 @@ import {
 } from './dateTime';
 import { getFilter, useInterval } from './utils';
 import { getResultsSummary } from '../utils/summary-api';
-import './PipelinesOverview.scss';
 import { LoadingInline } from '../Loading';
 import { ALL_NAMESPACES_KEY } from '../../consts';
 import { DataType, FLAGS, SummaryResponse } from '../../types';
@@ -399,7 +396,7 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
           'card-border': bordered,
         })}
       >
-        <CardTitle className="pipeline-overview__pipelinerun-status-card__title">
+        <CardTitle>
           <span>
             {t('PipelineRun status')}{' '}
             <Popover
@@ -421,7 +418,7 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
             </Popover>
           </span>
         </CardTitle>
-        <CardBody className="pipeline-overview__pipelinerun-status-card__title">
+        <CardBody className="pf-v6-u-pt-0 pf-v6-u-pb-sm">
           {pipelineRunsStatusError ? (
             <Alert
               variant="danger"
@@ -430,10 +427,10 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
               className="pf-v6-u-mb-md"
             />
           ) : (
-            <Grid>
+            <Grid className="pf-v6-u-align-items-center">
               <GridItem xl2={4} xl={12} lg={12} md={12} sm={12}>
                 {loaded ? (
-                  <div className="pipeline-overview__pipelinerun-status-card__donut-chart-div">
+                  <div className="pf-v6-u-display-flex pf-v6-u-align-items-center">
                     <ChartDonut
                       constrainToVisibleArea={true}
                       data={donutData}
@@ -442,6 +439,7 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
                       colorScale={colorScale}
                       legendOrientation="vertical"
                       legendPosition="right"
+                      height={200}
                       padding={{
                         bottom: 30,
                         right: 140, // Adjusted to accommodate legend
@@ -486,7 +484,7 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
                 )}
               </GridItem>
               <GridItem xl2={8} xl={12} lg={12} md={12} sm={12}>
-                <div className="pipeline-overview__pipelinerun-status-card__bar-chart-div">
+                <div className="pf-v6-u-display-flex pf-v6-u-align-items-flex-end pf-v6-u-h-100">
                   {loaded ? (
                     <Chart
                       containerComponent={
diff --git a/src/components/pipelines-overview/PipelineRunsStatusCardK8s.tsx b/src/components/pipelines-overview/PipelineRunsStatusCardK8s.tsx
index 5205bfd8..4244dfe0 100644
--- a/src/components/pipelines-overview/PipelineRunsStatusCardK8s.tsx
+++ b/src/components/pipelines-overview/PipelineRunsStatusCardK8s.tsx
@@ -25,9 +25,7 @@ import {
 import { chart_color_black_200 as othersColor } from '@patternfly/react-tokens/dist/js/chart_color_black_200';
 import { chart_color_black_500 as cancelledColor } from '@patternfly/react-tokens/dist/js/chart_color_black_500';
 import { chart_color_green_400 as successColor } from '@patternfly/react-tokens/dist/js/chart_color_green_400';
-import {
-  t_chart_global_danger_color_100 as failureColor,
-} from '@patternfly/react-tokens/dist/js/t_chart_global_danger_color_100';
+import { t_chart_global_danger_color_100 as failureColor } from '@patternfly/react-tokens/dist/js/t_chart_global_danger_color_100';
 import { chart_color_blue_300 as runningColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import {
   formatDate,
@@ -36,7 +34,6 @@ import {
   parsePrometheusDuration,
   monthYear,
 } from './dateTime';
-import './PipelinesOverview.scss';
 import { ALL_NAMESPACES_KEY } from '../../consts';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
@@ -556,7 +553,7 @@ const PipelineRunsStatusCardK8s: React.FC<PipelinesRunsStatusCardProps> = ({
             </Popover>
           </span>
         </CardTitle>
-        <CardBody className="pipeline-overview__pipelinerun-status-card__title">
+        <CardBody className="pf-v6-u-pt-0 pf-v6-u-pb-sm">
           {pipelineRunsStatusError ? (
             <Alert
               variant="danger"
@@ -565,12 +562,12 @@ const PipelineRunsStatusCardK8s: React.FC<PipelinesRunsStatusCardProps> = ({
               className="pf-v6-u-mb-md"
             />
           ) : (
-            <Grid>
+            <Grid className="pf-v6-u-align-items-center">
               <GridItem xl2={4} xl={12} lg={12} md={12} sm={12}>
                 {loadingRunSuccessRatioData ? (
                   <LoadingInline />
                 ) : (
-                  <div className="pipeline-overview__pipelinerun-status-card__donut-chart-div">
+                  <div>
                     <ChartDonut
                       constrainToVisibleArea={true}
                       data={donutDataK8s}
@@ -579,6 +576,7 @@ const PipelineRunsStatusCardK8s: React.FC<PipelinesRunsStatusCardProps> = ({
                       colorScale={colorScale}
                       legendOrientation="vertical"
                       legendPosition="right"
+                      height={200}
                       padding={{
                         bottom: 30,
                         right: 140, // Adjusted to accommodate legend
@@ -623,7 +621,7 @@ const PipelineRunsStatusCardK8s: React.FC<PipelinesRunsStatusCardProps> = ({
                 )}
               </GridItem>
               <GridItem xl2={8} xl={12} lg={12} md={12} sm={12}>
-                <div className="pipeline-overview__pipelinerun-status-card__bar-chart-div">
+                <div className="pf-v6-u-display-flex pf-v6-u-align-items-flex-end pf-v6-u-h-100">
                   {loadingTotalPipelineRunsData ? (
                     <LoadingInline />
                   ) : (
diff --git a/src/components/pipelines-overview/PipelineRunsTotalCard.scss b/src/components/pipelines-overview/PipelineRunsTotalCard.scss
deleted file mode 100644
index 4b7b82cf..00000000
--- a/src/components/pipelines-overview/PipelineRunsTotalCard.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.pipeline-overview {
-  &__totals-card {
-    &__value {
-      text-align: right;
-    }
-  }
-}
diff --git a/src/components/pipelines-overview/PipelineRunsTotalCard.tsx b/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
index 71dc56ce..98fbb4bb 100644
--- a/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
+++ b/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
@@ -20,8 +20,7 @@ import { ALL_NAMESPACES_KEY } from '../../consts';
 import { getDropDownDate } from './dateTime';
 import { LoadingInline } from '../Loading';
 import { DataType, FLAGS } from '../../types';
-
-import './PipelineRunsTotalCard.scss';
+import { t_chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
 
 interface PipelinesRunsDurationProps {
   namespace: string;
@@ -151,7 +150,7 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
   return (
     <>
       <Card
-        className={classNames('pipeline-overview__totals-card', {
+        className={classNames('pf-v6-u-h-100', {
           'card-border': bordered,
         })}
       >
@@ -169,13 +168,10 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
             />
           ) : (
             <>
-              <Grid hasGutter className="pipeline-overview__totals-card__grid">
-                <GridItem span={9}>
+              <Grid hasGutter>
+                <GridItem span={9} className="pf-v6-u-mb-sm">
                   <span>
-                    <Label
-                      variant="outline"
-                      className="pipeline-overview__totals-card__label"
-                    >
+                    <Label variant="outline" className="pf-v6-u-mr-sm">
                       {PipelineModel.abbr}
                     </Label>
                     {t('Runs in pipelines')}
@@ -183,18 +179,16 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
                 </GridItem>
                 <GridItem
                   span={3}
-                  className="pipeline-overview__totals-card__value"
+                  className="pf-v6-u-text-align-end"
+                  style={{ color: blueColor.value }}
                 >
                   {loaded ? plrRun : <LoadingInline />}
                 </GridItem>
               </Grid>
-              <Grid hasGutter className="pipeline-overview__totals-card__grid">
+              <Grid hasGutter className="pf-v6-u-mb-sm">
                 <GridItem span={9}>
                   <span>
-                    <Label
-                      variant="outline"
-                      className="pipeline-overview__totals-card__repo-label"
-                    >
+                    <Label variant="outline" className="pf-v6-u-mr-sm">
                       {RepositoryModel.abbr}
                     </Label>
                     {t('Runs in repositories')}
@@ -202,21 +196,23 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
                 </GridItem>
                 <GridItem
                   span={3}
-                  className="pipeline-overview__totals-card__value"
+                  className="pf-v6-u-text-align-end"
+                  style={{ color: blueColor.value }}
                 >
                   {loaded ? repoRun : <LoadingInline />}
                 </GridItem>
               </Grid>
-              <Grid hasGutter>
+              <Grid hasGutter className="pf-v6-u-mb-sm">
                 <GridItem span={9}>
                   <span>
-                    <CheckIcon className="pipeline-overview__totals-card__icon" />
+                    <CheckIcon className="pipeline-overview__totals-card__icon pf-v6-u-ml-sm pf-v6-u-mr-sm" />
                     {t('Total runs')}
                   </span>
                 </GridItem>
                 <GridItem
                   span={3}
-                  className="pipeline-overview__totals-card__value"
+                  className="pf-v6-u-text-align-end"
+                  style={{ color: blueColor.value }}
                 >
                   {loaded ? totalRun : <LoadingInline />}
                 </GridItem>
diff --git a/src/components/pipelines-overview/PipelineRunsTotalCardK8s.tsx b/src/components/pipelines-overview/PipelineRunsTotalCardK8s.tsx
index ad5dfd02..75360446 100644
--- a/src/components/pipelines-overview/PipelineRunsTotalCardK8s.tsx
+++ b/src/components/pipelines-overview/PipelineRunsTotalCardK8s.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { CheckIcon } from '@patternfly/react-icons';
+import { t_chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
 import {
   Alert,
   Card,
@@ -16,7 +17,6 @@ import { SummaryProps, getTotalPipelineRuns } from './utils';
 import { PipelineModel, RepositoryModel } from '../../models';
 import { ALL_NAMESPACES_KEY } from '../../consts';
 
-import './PipelineRunsTotalCard.scss';
 import { MetricsQueryPrefix, PipelineQuery } from '../pipelines-metrics/utils';
 import {
   usePipelineMetricsForAllNamespacePoll,
@@ -86,15 +86,16 @@ const PipelineRunsTotalCardK8s: React.FC<PipelinesRunsDurationProps> = ({
   return (
     <>
       <Card
-        className={classNames('pipeline-overview__totals-card', {
+        className={classNames('pf-v6-u-h-100', {
           'card-border': bordered,
         })}
+        style={{ minWidth: '100%', fontSize: 18 }}
       >
-        <CardTitle>
+        <CardTitle style={{ fontSize: 20 }}>
           <span>{t('Total runs')}</span>
         </CardTitle>
         <Divider />
-        <CardBody>
+        <CardBody style={{ fontSize: 18, minWidth: 'min-content' }}>
           {pipelineRunsTotalError ? (
             <Alert
               variant="danger"
@@ -104,12 +105,16 @@ const PipelineRunsTotalCardK8s: React.FC<PipelinesRunsDurationProps> = ({
             />
           ) : (
             <>
-              <Grid hasGutter className="pipeline-overview__totals-card__grid">
-                <GridItem span={9}>
-                  <span>
+              <Grid
+                hasGutter
+                className="pipeline-overview__totals-card__grid"
+                style={{ fontSize: 18 }}
+              >
+                <GridItem span={9} className="pf-v6-u-mb-sm">
+                  <span style={{ fontSize: 18 }}>
                     <Label
                       variant="outline"
-                      className="pipeline-overview__totals-card__label"
+                      className="pipeline-overview__totals-card__label pf-v6-u-mr-sm"
                     >
                       {PipelineModel.abbr}
                     </Label>
@@ -118,17 +123,22 @@ const PipelineRunsTotalCardK8s: React.FC<PipelinesRunsDurationProps> = ({
                 </GridItem>
                 <GridItem
                   span={3}
-                  className="pipeline-overview__totals-card__value"
+                  style={{ color: blueColor.value, fontSize: 18 }}
+                  className="pf-v6-u-text-align-end"
                 >
                   {loadingTotalPipelineRunsData ? <LoadingInline /> : '-'}
                 </GridItem>
               </Grid>
-              <Grid hasGutter className="pipeline-overview__totals-card__grid">
+              <Grid
+                hasGutter
+                className="pipeline-overview__totals-card__grid pf-v6-u-mb-sm"
+                style={{ fontSize: 18 }}
+              >
                 <GridItem span={9}>
-                  <span>
+                  <span style={{ fontSize: 18 }}>
                     <Label
                       variant="outline"
-                      className="pipeline-overview__totals-card__repo-label"
+                      className="pipeline-overview__totals-card__repo-label pf-v6-u-mr-sm"
                     >
                       {RepositoryModel.abbr}
                     </Label>
@@ -137,21 +147,23 @@ const PipelineRunsTotalCardK8s: React.FC<PipelinesRunsDurationProps> = ({
                 </GridItem>
                 <GridItem
                   span={3}
-                  className="pipeline-overview__totals-card__value"
+                  style={{ color: blueColor.value, fontSize: 18 }}
+                  className="pf-v6-u-text-align-end"
                 >
                   {loadingTotalPipelineRunsData ? <LoadingInline /> : '-'}
                 </GridItem>
               </Grid>
-              <Grid hasGutter>
+              <Grid hasGutter style={{ fontSize: 18 }}>
                 <GridItem span={9}>
-                  <span>
-                    <CheckIcon className="pipeline-overview__totals-card__icon" />
+                  <span style={{ fontSize: 18 }}>
+                    <CheckIcon className="pipeline-overview__totals-card__icon pf-v6-u-ml-sm pf-v6-u-mr-sm" />
                     {t('Total runs')}
                   </span>
                 </GridItem>
                 <GridItem
                   span={3}
-                  className="pipeline-overview__totals-card__value"
+                  style={{ color: blueColor.value, fontSize: 18 }}
+                  className="pf-v6-u-text-align-end"
                 >
                   {loadingTotalPipelineRunsData ? (
                     <LoadingInline />
diff --git a/src/components/pipelines-overview/PipelinesOverview.scss b/src/components/pipelines-overview/PipelinesOverview.scss
deleted file mode 100644
index 7e1fab30..00000000
--- a/src/components/pipelines-overview/PipelinesOverview.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-.card-border {
-  border: var(--pf-t--global--border--width--sm) solid
-    var(--pf-t--global--border--color--default);
-}
-
-.pipelines-overview__cards {
-  margin-top: var(--pf-t--global--spacer--lg);
-  margin-bottom: var(--pf-t--global--spacer--lg);
-}
-
-.pipeline-overview__pipelinerun-status-card {
-  &__title {
-    padding-bottom: 0 !important;
-  }
-
-  &__list-page {
-    padding-bottom: 0 !important;
-  }
-
-  &__donut-chart-div {
-    height: 200px;
-    float: left;
-  }
-
-  &__bar-chart-div {
-    height: 200px;
-  }
-}
-
-.project-dropdown-label {
-  display: block;
-
-  &__flex {
-    margin-left: var(--pf-t--global--spacer--md);
-  }
-}
-
-.pipeline-overview__duration-card {
-  &__grid {
-    margin-bottom: var(--pf-t--global--spacer--sm);
-  }
-
-  &__icon {
-    margin-right: var(--pf-t--global--spacer--sm);
-  }
-
-  &__info-icon {
-    margin-right: var(--pf-t--global--spacer--sm);
-    color: var(--pf-t--global--color--brand--default);
-  }
-
-  &__value {
-    color: var(--pf-t--global--color--brand--default);
-  }
-}
-
-.pipeline-overview__totals-card {
-  margin-left: var(--pf-t--global--spacer--md);
-  margin-right: var(--pf-t--global--spacer--md);
-
-  &__grid {
-    margin-bottom: var(--pf-t--global--spacer--sm);
-  }
-
-  &__label {
-    margin-right: var(--pf-t--global--spacer--sm);
-    height: var(--pf-t--global--spacer--md);
-  }
-
-  &__repo-label {
-    margin-right: var(--pf-t--global--spacer--md);
-    height: var(--pf-t--global--spacer--md);
-  }
-
-  &__icon {
-    margin-right: var(--pf-t--global--spacer--md);
-    margin-left: var(--pf-t--global--spacer--sm);
-  }
-
-  &__value {
-    color: var(--pf-t--global--color--brand--default);
-  }
-}
-
-.pipeline-overview__number-of-plr-card {
-  .pf-v6-c-card__title {
-    padding-bottom: 0;
-  }
-
-  &__title {
-    padding-bottom: 0 !important;
-  }
-
-  &__body {
-    padding: 0;
-    height: 145px;
-    width: 530px;
-  }
-
-  &__bar-chart-div {
-    height: 145px;
-  }
-
-  &__loading {
-    padding-left: var(--pf-t--global--spacer--md);
-  }
-}
-
-.pipeline-overview__listpage {
-  &__button {
-    float: right;
-  }
-
-  &__grid {
-    margin-bottom: var(--pf-t--global--spacer--md);
-  }
-
-  &__table {
-    border-top: inset;
-  }
-
-  &__griditem {
-    display: flex;
-  }
-}
-
-.pipeline-overview__dropdown-button {
-  max-width: 280px !important; // allow truncation
-  min-width: 100px;
-}
-
-.pipeline-overview__search-input {
-  height: fit-content;
-  width: 220px;
-  margin-left: var(--pf-t--global--spacer--sm);
-}
-
-.pipeline-overview__duration-total-plr-grid {
-  padding-left: var(--pf-t--global--spacer--md);
-  padding-right: var(--pf-t--global--spacer--md);
-  padding-top: var(--pf-t--global--spacer--md);
-  padding-bottom: var(--pf-t--global--spacer--md);
-}
-
-.pipelines-metrics__background {
-  background-color: var(--pf-t--global--background--color--secondary--default);
-  padding-left: var(--pf-t--global--spacer--md);
-  padding-right: var(--pf-t--global--spacer--md);
-  padding-top: var(--pf-t--global--spacer--md);
-  padding-bottom: var(--pf-t--global--spacer--sm);
-}
-
-.k8s-overview-info-alert {
-  margin-bottom: var(--pf-t--global--spacer--md);
-  margin-left: var(--pf-t--global--spacer--md);
-  margin-right: var(--pf-t--global--spacer--md);
-}
diff --git a/src/components/pipelines-overview/PipelinesOverviewPage.tsx b/src/components/pipelines-overview/PipelinesOverviewPage.tsx
index b70a2611..05681882 100644
--- a/src/components/pipelines-overview/PipelinesOverviewPage.tsx
+++ b/src/components/pipelines-overview/PipelinesOverviewPage.tsx
@@ -54,10 +54,10 @@ const PipelinesOverviewPage: React.FC = () => {
 
   return (
     <>
-      <PageSection hasBodyWrapper={false} isFilled className="pf-v6-u-pl-md">
+      <PageSection hasBodyWrapper={false} className="pf-v6-u-pl-md">
         <Title headingLevel="h2">{t('Overview')}</Title>
       </PageSection>
-      <Flex className="project-dropdown-label__flex pf-v5-u-mt-md">
+      <Flex className="pf-v6-u-pl-md pf-v6-u-pr-md pf-v6-u-mb-md">
         <FlexItem>
           <NameSpaceDropdown
             selected={activeNamespace}
@@ -71,7 +71,7 @@ const PipelinesOverviewPage: React.FC = () => {
           <RefreshDropdown interval={interval} setInterval={setInterval} />
         </FlexItem>
       </Flex>
-      <div className="pipeline-overview__duration-total-plr-grid">
+      <div className="pf-v6-u-pl-md pf-v6-u-pr-md">
         <PipelineRunsStatusCard
           timespan={timespan}
           domain={{ y: [0, 100] }}
@@ -80,12 +80,12 @@ const PipelinesOverviewPage: React.FC = () => {
           interval={interval}
         />
 
-        <Flex>
-          <FlexItem
-            spacer={{ default: 'spacerXs' }}
-            grow={{ default: 'grow' }}
-            className="pipelines-overview__cards"
-          >
+        <Flex
+          className="pf-v6-u-mt-md"
+          alignItems={{ default: 'alignItemsStretch' }}
+          gap={{ default: 'gapMd' }}
+        >
+          <FlexItem flex={{ default: 'flex_1' }}>
             <PipelinesRunsDurationCard
               namespace={activeNamespace}
               timespan={timespan}
@@ -93,11 +93,7 @@ const PipelinesOverviewPage: React.FC = () => {
               bordered={true}
             />
           </FlexItem>
-          <FlexItem
-            spacer={{ default: 'spacerXs' }}
-            grow={{ default: 'grow' }}
-            className="pipelines-overview__cards"
-          >
+          <FlexItem flex={{ default: 'flex_1' }}>
             <PipelinesRunsTotalCard
               namespace={activeNamespace}
               timespan={timespan}
@@ -105,10 +101,7 @@ const PipelinesOverviewPage: React.FC = () => {
               bordered={true}
             />
           </FlexItem>
-          <FlexItem
-            grow={{ default: 'grow' }}
-            className="pipelines-overview__cards"
-          >
+          <FlexItem flex={{ default: 'flex_2' }}>
             <PipelinesRunsNumbersChart
               namespace={activeNamespace}
               timespan={timespan}
@@ -119,12 +112,14 @@ const PipelinesOverviewPage: React.FC = () => {
           </FlexItem>
         </Flex>
 
-        <PipelineRunsListPage
-          namespace={activeNamespace}
-          timespan={timespan}
-          interval={interval}
-          bordered
-        />
+        <div className="pf-v6-u-mt-md">
+          <PipelineRunsListPage
+            namespace={activeNamespace}
+            timespan={timespan}
+            interval={interval}
+            bordered
+          />
+        </div>
       </div>
     </>
   );
diff --git a/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx b/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx
index 25031a60..336ffa90 100644
--- a/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx
+++ b/src/components/pipelines-overview/PipelinesOverviewPageK8s.tsx
@@ -23,7 +23,6 @@ import {
   usePersistedTimespanWithUrl,
   usePersistedIntervalWithUrl,
 } from '../hooks/usePersistedFiltersForPipelineOverview';
-import './PipelinesOverview.scss';
 
 const PipelinesOverviewPageK8s: React.FC = () => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
@@ -56,13 +55,13 @@ const PipelinesOverviewPageK8s: React.FC = () => {
 
   return (
     <>
-      <PageSection hasBodyWrapper={false} isFilled className="pf-v6-u-pl-md">
+      <PageSection hasBodyWrapper={false} className="pf-v6-u-pl-md">
         <Title headingLevel="h2">{t('Overview')}</Title>
       </PageSection>
       <div className="pf-v5-u-m-md">
         <K8sDataLimitationAlert />
       </div>
-      <Flex className="project-dropdown-label__flex">
+      <Flex className="pf-v6-u-pl-md pf-v6-u-pr-md pf-v6-u-mb-md">
         <FlexItem>
           <NameSpaceDropdown
             selected={activeNamespace}
@@ -76,7 +75,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
           <RefreshDropdown interval={interval} setInterval={setInterval} />
         </FlexItem>
       </Flex>
-      <div className="pipeline-overview__duration-total-plr-grid">
+      <div className="pf-v6-u-pl-md pf-v6-u-pr-md">
         <PipelineRunsStatusCardK8s
           timespan={timespan}
           domain={{ y: [0, 100] }}
@@ -85,12 +84,13 @@ const PipelinesOverviewPageK8s: React.FC = () => {
           interval={interval}
         />
 
-        <Flex>
-          <FlexItem
-            spacer={{ default: 'spacerXs' }}
-            grow={{ default: 'grow' }}
-            className="pipelines-overview__cards"
-          >
+        <Flex
+          className="pf-v6-u-mt-md"
+          alignItems={{ default: 'alignItemsStretch' }}
+          gap={{ default: 'gapMd' }}
+          flexWrap={{ default: 'wrap' }}
+        >
+          <FlexItem flex={{ default: 'flex_1' }}>
             <PipelineRunsDurationCardK8s
               namespace={activeNamespace}
               timespan={timespan}
@@ -98,11 +98,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
               bordered={true}
             />
           </FlexItem>
-          <FlexItem
-            spacer={{ default: 'spacerXs' }}
-            grow={{ default: 'grow' }}
-            className="pipelines-overview__cards"
-          >
+          <FlexItem flex={{ default: 'flex_1' }}>
             <PipelineRunsTotalCardK8s
               namespace={activeNamespace}
               timespan={timespan}
@@ -110,10 +106,7 @@ const PipelinesOverviewPageK8s: React.FC = () => {
               bordered={true}
             />
           </FlexItem>
-          <FlexItem
-            grow={{ default: 'grow' }}
-            className="pipelines-overview__cards"
-          >
+          <FlexItem flex={{ default: 'flex_2' }}>
             <PipelineRunsNumbersChartK8s
               namespace={activeNamespace}
               timespan={timespan}
@@ -123,12 +116,14 @@ const PipelinesOverviewPageK8s: React.FC = () => {
             />
           </FlexItem>
         </Flex>
-        <PipelineRunsListPageK8s
-          namespace={activeNamespace}
-          timespan={timespan}
-          interval={interval}
-          bordered
-        />
+        <div className="pf-v6-u-mt-md">
+          <PipelineRunsListPageK8s
+            namespace={activeNamespace}
+            timespan={timespan}
+            interval={interval}
+            bordered
+          />
+        </div>
       </div>
     </>
   );
diff --git a/src/components/pipelines-overview/RefreshIntervalDropdown.tsx b/src/components/pipelines-overview/RefreshIntervalDropdown.tsx
index 3a947f05..6aad33a9 100644
--- a/src/components/pipelines-overview/RefreshIntervalDropdown.tsx
+++ b/src/components/pipelines-overview/RefreshIntervalDropdown.tsx
@@ -10,8 +10,6 @@ import {
 import { IntervalOptions } from './utils';
 import { formatPrometheusDuration, parsePrometheusDuration } from './dateTime';
 
-import './PipelinesOverview.scss';
-
 const OFF_KEY = 'OFF_KEY';
 
 type Props = {
@@ -50,7 +48,6 @@ const IntervalDropdown: React.FC<Props> = ({ id, interval, setInterval }) => {
           {intervalOptions[selectedKey]}
         </MenuToggle>
       )}
-      className="pipeline-overview__variable-dropdown"
     >
       <DropdownList>
         {_.map(intervalOptions, (name, key) => (
diff --git a/src/components/pipelines-overview/SearchInput.tsx b/src/components/pipelines-overview/SearchInput.tsx
index b7716b20..c613da30 100644
--- a/src/components/pipelines-overview/SearchInput.tsx
+++ b/src/components/pipelines-overview/SearchInput.tsx
@@ -17,7 +17,7 @@ const SearchInputField: React.FC<SearchInputProps> = ({
   return (
     <SearchInput
       value={searchText}
-      className="pipeline-overview__search-input"
+      className="pf-v6-u-ml-sm pf-v6-u-w-25"
       placeholder={
         pageFlag === 1
           ? t('Search by pipeline name')
diff --git a/src/components/pipelines-overview/list-pages/PipelineRunsListPage.tsx b/src/components/pipelines-overview/list-pages/PipelineRunsListPage.tsx
index 3155f49f..0d26c0b6 100644
--- a/src/components/pipelines-overview/list-pages/PipelineRunsListPage.tsx
+++ b/src/components/pipelines-overview/list-pages/PipelineRunsListPage.tsx
@@ -183,7 +183,7 @@ const PipelineRunsListPage: React.FC<PipelineRunsListPageProps> = ({
                 />
               </GridItem>
               <GridItem span={3}>
-                <ToggleGroup className="pipeline-overview__listpage__button">
+                <ToggleGroup className="pf-v6-u-float-inline-end">
                   <ToggleGroupItem
                     text={t('Per Pipeline')}
                     buttonId="pipelineButton"
diff --git a/src/components/utils/pipeline-approval-utils.ts b/src/components/utils/pipeline-approval-utils.ts
index 8ffa761a..4377334a 100644
--- a/src/components/utils/pipeline-approval-utils.ts
+++ b/src/components/utils/pipeline-approval-utils.ts
@@ -1,8 +1,8 @@
-import { t_chart_color_blue_400 as almostApprovedColor } from "@patternfly/react-tokens/dist/js/t_chart_color_blue_400";
-import { t_chart_color_blue_300 as partiallyApprovedColor } from "@patternfly/react-tokens/dist/js/t_chart_color_blue_300";
-import { t_chart_color_black_500 as waitColor } from "@patternfly/react-tokens/dist/js/t_chart_color_black_500";
-import { t_chart_color_green_500 as approveColor } from "@patternfly/react-tokens/dist/js/t_chart_color_green_500";
-import { t_chart_global_danger_color_100 as rejectColor } from "@patternfly/react-tokens/dist/js/t_chart_global_danger_color_100";
+import { t_chart_color_black_500 as waitColor } from '@patternfly/react-tokens/dist/js/t_chart_color_black_500';
+import { t_chart_color_blue_300 as partiallyApprovedColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
+import { t_chart_color_blue_400 as almostApprovedColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_400';
+import { t_chart_color_green_500 as approveColor } from '@patternfly/react-tokens/dist/js/t_chart_color_green_500';
+import { t_chart_global_danger_color_100 as rejectColor } from '@patternfly/react-tokens/dist/js/t_chart_global_danger_color_100';
 import { ApprovalFields, ApprovalLabels } from '../../consts';
 import {
   ApprovalStatus,