diff --git a/.archive/routes/components/dataToolbar/workloadType.tsx b/.archive/routes/components/dataToolbar/workloadType.tsx
index 8ba61f9777..2d358ef924 100644
--- a/.archive/routes/components/dataToolbar/workloadType.tsx
+++ b/.archive/routes/components/dataToolbar/workloadType.tsx
@@ -1,7 +1,8 @@
 import './dataToolbar.scss';
 
-import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { ToolbarChipGroup } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -60,8 +61,8 @@ class WorkloadTypeBase extends React.Component<WorkloadTypeProps, WorkloadTypeSt
         isDisabled={isDisabled}
         variant={SelectVariant.checkbox}
         aria-label={intl.formatMessage(messages.filterByWorkloadTypeAriaLabel)}
-        onToggle={this.onToggle}
         onSelect={onSelect}
+        onToggle={(_evt, isExpanded) => this.onToggle(isExpanded)}
         selections={selections}
         isOpen={isWorkloadTypeExpanded}
         placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)}
diff --git a/fec.config.js b/fec.config.js
index dd95b1d9cd..e2424f8bb5 100644
--- a/fec.config.js
+++ b/fec.config.js
@@ -37,6 +37,8 @@ module.exports = {
   interceptChromeConfig: false, // Change to false after your app is registered in configuration files
   proxyVerbose: true,
   sassPrefix: `.${moduleName}`,
+  // sassPrefix: 'body', // For PF v5 testing only
+  // bundlePfModules: true, // For PF v5 testing only
   stats,
   standalone: process.env.LOCAL_API_PORT ? true : false,
   useCache: true,
@@ -61,9 +63,9 @@ module.exports = {
       './RootApp': path.resolve(__dirname, './src/appEntry.tsx'),
     },
     shared: [
-      { 'react-redux': { requiredVersion: dependencies['react-redux'] } },
-      { 'react-router-dom': { import: false, requiredVersion: '*', singleton: true } },
-      { '@unleash/proxy-client-react': { requiredVersion: '*', singleton: true } },
+      { 'react-redux': { version: dependencies['react-redux'] } },
+      { 'react-router-dom': { version: dependencies['react-router-dom'], import: false, singleton: true } },
+      { '@unleash/proxy-client-react': { version: dependencies['@unleash/proxy-client-react'], singleton: true } },
     ],
   },
   /**
diff --git a/package-lock.json b/package-lock.json
index 641f42bd5c..f47c7ec38b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,17 +10,16 @@
       "hasInstallScript": true,
       "license": "GNU AGPLv3",
       "dependencies": {
-        "@patternfly/patternfly": "4.224.2",
-        "@patternfly/react-charts": "6.94.19",
-        "@patternfly/react-core": "4.276.8",
-        "@patternfly/react-icons": "4.93.6",
-        "@patternfly/react-styles": "4.92.6",
-        "@patternfly/react-table": "4.113.0",
-        "@patternfly/react-tokens": "4.94.6",
-        "@redhat-cloud-services/frontend-components": "^3.11.5",
-        "@redhat-cloud-services/frontend-components-notifications": "^3.2.16",
+        "@patternfly/patternfly": "5.0.2",
+        "@patternfly/react-charts": "7.0.0",
+        "@patternfly/react-core": "5.0.0",
+        "@patternfly/react-icons": "5.0.0",
+        "@patternfly/react-table": "5.0.0",
+        "@patternfly/react-tokens": "5.0.0",
+        "@redhat-cloud-services/frontend-components": "^4.0.1",
+        "@redhat-cloud-services/frontend-components-notifications": "^4.0.0",
         "@redhat-cloud-services/frontend-components-translations": "^3.2.6",
-        "@redhat-cloud-services/frontend-components-utilities": "^3.7.6",
+        "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
         "@redhat-cloud-services/rbac-client": "^1.2.6",
         "@unleash/proxy-client-react": "^3.6.0",
         "axios": "^1.5.0",
@@ -44,7 +43,8 @@
       "devDependencies": {
         "@formatjs/cli": "^6.1.3",
         "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
-        "@redhat-cloud-services/frontend-components-config": "^5.1.1",
+        "@redhat-cloud-services/frontend-components-config": "^6.0.2",
+        "@redhat-cloud-services/tsc-transform-imports": "^1.0.3",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/jest": "^29.5.4",
@@ -2099,95 +2099,95 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/@patternfly/patternfly": {
-      "version": "4.224.2",
-      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.224.2.tgz",
-      "integrity": "sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g=="
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.0.2.tgz",
+      "integrity": "sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ=="
     },
     "node_modules/@patternfly/react-charts": {
-      "version": "6.94.19",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-6.94.19.tgz",
-      "integrity": "sha512-+yYwXAy/GBH2bTHFzMpdVKc8LUJCCNEqqS7bqovNkNLd0m3FP3q9fKJ22QxNnP9NeFHK6UFa4KfouQAb2fInfQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-charts/-/react-charts-7.0.0.tgz",
+      "integrity": "sha512-lRR5iXJeTWbEqMlIcqnVA9DHurn8MJNDnwtEDcrzCH5g28MCXGosQjhXqsnz3LVGtHcBsQcpxMIv8WO5rfJHOA==",
       "dependencies": {
-        "@patternfly/react-styles": "^4.92.6",
-        "@patternfly/react-tokens": "^4.94.6",
+        "@patternfly/react-styles": "^5.0.0",
+        "@patternfly/react-tokens": "^5.0.0",
         "hoist-non-react-statics": "^3.3.0",
         "lodash": "^4.17.19",
-        "tslib": "^2.0.0",
-        "victory-area": "^36.6.7",
-        "victory-axis": "^36.6.7",
-        "victory-bar": "^36.6.7",
-        "victory-chart": "^36.6.7",
-        "victory-core": "^36.6.7",
-        "victory-create-container": "^36.6.7",
-        "victory-cursor-container": "^36.6.7",
-        "victory-group": "^36.6.7",
-        "victory-legend": "^36.6.7",
-        "victory-line": "^36.6.7",
-        "victory-pie": "^36.6.7",
-        "victory-scatter": "^36.6.7",
-        "victory-stack": "^36.6.7",
-        "victory-tooltip": "^36.6.7",
-        "victory-voronoi-container": "^36.6.7",
-        "victory-zoom-container": "^36.6.7"
+        "tslib": "^2.5.0",
+        "victory-area": "^36.6.11",
+        "victory-axis": "^36.6.11",
+        "victory-bar": "^36.6.11",
+        "victory-box-plot": "^36.6.11",
+        "victory-chart": "^36.6.11",
+        "victory-core": "^36.6.11",
+        "victory-create-container": "^36.6.11",
+        "victory-cursor-container": "^36.6.11",
+        "victory-group": "^36.6.11",
+        "victory-legend": "^36.6.11",
+        "victory-line": "^36.6.11",
+        "victory-pie": "^36.6.11",
+        "victory-scatter": "^36.6.11",
+        "victory-stack": "^36.6.11",
+        "victory-tooltip": "^36.6.11",
+        "victory-voronoi-container": "^36.6.11",
+        "victory-zoom-container": "^36.6.11"
       },
       "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
       }
     },
     "node_modules/@patternfly/react-core": {
-      "version": "4.276.8",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.8.tgz",
-      "integrity": "sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==",
-      "dependencies": {
-        "@patternfly/react-icons": "^4.93.6",
-        "@patternfly/react-styles": "^4.92.6",
-        "@patternfly/react-tokens": "^4.94.6",
-        "focus-trap": "6.9.2",
-        "react-dropzone": "9.0.0",
-        "tippy.js": "5.1.2",
-        "tslib": "^2.0.0"
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.0.0.tgz",
+      "integrity": "sha512-kewRVFhLw0Dvt8250pqrO47sVRx8E93sMGZbHQomJnZdachYeQ9STnQTP2gvOBq/GPnMei0LZLv0T99g8mPE4w==",
+      "dependencies": {
+        "@patternfly/react-icons": "^5.0.0",
+        "@patternfly/react-styles": "^5.0.0",
+        "@patternfly/react-tokens": "^5.0.0",
+        "focus-trap": "7.4.3",
+        "react-dropzone": "^14.2.3",
+        "tslib": "^2.5.0"
       },
       "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
       }
     },
     "node_modules/@patternfly/react-icons": {
-      "version": "4.93.6",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.6.tgz",
-      "integrity": "sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.0.0.tgz",
+      "integrity": "sha512-GG5Y/UYl0h346MyDU9U650Csaq4Mxk8S6U8XC7ERk/xIrRr2RF67O2uY7zKBDMTNLYdBvPzgc2s3OMV1+d2/mg==",
       "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
       }
     },
     "node_modules/@patternfly/react-styles": {
-      "version": "4.92.6",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.6.tgz",
-      "integrity": "sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw=="
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.0.0.tgz",
+      "integrity": "sha512-xbSCgjx+fPrXbIzUznwTFWtJEbzVS0Wn4zrejdKJYQTY+4YcuPlFkeq2tl3syzwGsaYMpHiFwQiTaKyTvlwtuw=="
     },
     "node_modules/@patternfly/react-table": {
-      "version": "4.113.0",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.113.0.tgz",
-      "integrity": "sha512-qxa3NWCdYasqQQL1rqEd8DyNa8oWr6HNveNW5YJRakE7imWZhUPG2Nd6Op60+KYX8kbCSl7gwSmgAZAYMBMZkQ==",
-      "dependencies": {
-        "@patternfly/react-core": "^4.276.8",
-        "@patternfly/react-icons": "^4.93.6",
-        "@patternfly/react-styles": "^4.92.6",
-        "@patternfly/react-tokens": "^4.94.6",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.0.0.tgz",
+      "integrity": "sha512-Q3MBo9+ZmBvLJzVHxmV9f/4qQAz5Si743zVLHRwjh+tjbn/DrcbxJdT8Uxa3NGKkpvszzgi/LPeXipJOHOELug==",
+      "dependencies": {
+        "@patternfly/react-core": "^5.0.0",
+        "@patternfly/react-icons": "^5.0.0",
+        "@patternfly/react-styles": "^5.0.0",
+        "@patternfly/react-tokens": "^5.0.0",
         "lodash": "^4.17.19",
-        "tslib": "^2.0.0"
+        "tslib": "^2.5.0"
       },
       "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18",
-        "react-dom": "^16.8 || ^17 || ^18"
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
       }
     },
     "node_modules/@patternfly/react-tokens": {
-      "version": "4.94.6",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.6.tgz",
-      "integrity": "sha512-tm7C6nat+uKMr1hrapis7hS3rN9cr41tpcCKhx6cod6FLU8KwF2Yt5KUxakhIOCEcE/M/EhXhAw/qejp8w0r7Q=="
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.0.0.tgz",
+      "integrity": "sha512-to2CXIZ6WTuzBcjLZ+nXi5LhnYkSIDu3RBMRZwrplmECOoUWv87CC+2T0EVxtASRtpQfikjD2PDKMsif5i0BxQ=="
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
@@ -2353,41 +2353,42 @@
       }
     },
     "node_modules/@redhat-cloud-services/frontend-components": {
-      "version": "3.11.5",
-      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components/-/frontend-components-3.11.5.tgz",
-      "integrity": "sha512-QQz3l1GJ5R1QdcsCabRhf+1EXomW/Nz5UA6dkj4/tYoMaDX1eAFnOzemaLfmymOAF/aMsIDkBOCJlfSrNyxp1A==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components/-/frontend-components-4.0.1.tgz",
+      "integrity": "sha512-0QMmCJcT2mUSqiV89jXkCR5g/sydhpsbdqJcNnf/yEVCEaTxkbKVVRcX0Kv0sqshQv2fF7fBvsLoueKPJDkmsA==",
       "dependencies": {
-        "@redhat-cloud-services/frontend-components-utilities": "^3.2.25",
+        "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
         "@redhat-cloud-services/types": "^0.0.24",
         "@scalprum/core": "^0.5.1",
         "@scalprum/react-core": "^0.5.1",
         "sanitize-html": "^2.7.2"
       },
       "peerDependencies": {
-        "@patternfly/react-core": "^4.18.5",
-        "@patternfly/react-icons": "^4.53.16",
-        "@patternfly/react-table": "^4.5.7",
+        "@patternfly/react-core": "^5.0.0",
+        "@patternfly/react-icons": "^5.0.0",
+        "@patternfly/react-table": "^5.0.0",
         "classnames": "^2.2.5",
         "lodash": "^4.17.15",
         "prop-types": "^15.6.2",
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react": "^18.2.0",
         "react-content-loader": "^6.2.0",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^18.2.0",
         "react-redux": ">=7.0.0",
         "react-router-dom": "^5.0.0 || ^6.0.0"
       }
     },
     "node_modules/@redhat-cloud-services/frontend-components-config": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-config/-/frontend-components-config-5.1.1.tgz",
-      "integrity": "sha512-13vZTD06IO5TxSy+1+Y4flpReC45gJTOci3b1QmR5+HvWL5nY0pB7TmmGMWxr5JeVk45v3EYOlXzdLWQuy0pOw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-config/-/frontend-components-config-6.0.2.tgz",
+      "integrity": "sha512-YziGMm13UP/3pn5R7MJCTdQvrAS2gQx/aIWEUmrBNESiYVDDS4N10nSQ41vUsZLRZcPm0y/GqPg3+H006znI4g==",
       "dev": true,
       "dependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
-        "@redhat-cloud-services/frontend-components-config-utilities": "^2.0.3",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^3.0.0",
+        "@redhat-cloud-services/tsc-transform-imports": "^1.0.0",
+        "@swc/core": "^1.3.76",
         "assert": "^2.0.0",
         "axios": "^0.27.2",
-        "babel-loader": "^8.2.5",
         "browserify-zlib": "^0.2.0",
         "buffer": "^6.0.3",
         "chalk": "^4.1.2",
@@ -2414,7 +2415,8 @@
         "sass-loader": "^11.1.1",
         "source-map-loader": "^3.0.1",
         "stream-browserify": "^3.0.0",
-        "ts-loader": "^8.4.0",
+        "swc-loader": "^0.2.3",
+        "ts-loader": "^9.4.4",
         "url": "^0.11.0",
         "util": "^0.12.4",
         "webpack": "^5.88.0",
@@ -2427,9 +2429,9 @@
       }
     },
     "node_modules/@redhat-cloud-services/frontend-components-config-utilities": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-config-utilities/-/frontend-components-config-utilities-2.1.0.tgz",
-      "integrity": "sha512-RQcXn+0WEVzBk98XHHOA3SIatT7qw30h/7UW/oWAYfGGceXeE5/5IjdRIZmuUaNym9v24nv1F4M9+RTdvXrWPA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-config-utilities/-/frontend-components-config-utilities-3.0.0.tgz",
+      "integrity": "sha512-TKSV0ILeg3PWD+Tk/sA+T8HoY+YS69h30AdhJt9pTyfDutxh8uWK65ckLOwyo7HSZuWsV0cyerH7yVWzqseB/g==",
       "dev": true,
       "dependencies": {
         "@openshift/dynamic-plugin-sdk-webpack": "^3.0.0",
@@ -2600,20 +2602,20 @@
       }
     },
     "node_modules/@redhat-cloud-services/frontend-components-notifications": {
-      "version": "3.2.16",
-      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-3.2.16.tgz",
-      "integrity": "sha512-MpuUip15IPuRjZK+FePnVZespKJ/NpUbIimy5BKyE0JcvXS79nCMRvf6I9Xak+5R3fnsX+TStLC6vC2s5WkxRg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-4.0.0.tgz",
+      "integrity": "sha512-SBpHAdtvb2wWbWRLGi40DtLSB/zsncQZHXFu/E6Qxyjoa4rSMPYJRjNo8G3OD+eASL2cF2srnXzi+iIVNWsXiQ==",
       "dependencies": {
-        "@redhat-cloud-services/frontend-components": "*",
-        "@redhat-cloud-services/frontend-components-utilities": "*",
+        "@redhat-cloud-services/frontend-components": "^4.0.0",
+        "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
         "redux-promise-middleware": "6.1.3"
       },
       "peerDependencies": {
-        "@patternfly/react-core": "^4.18.5",
-        "@patternfly/react-icons": "^4.3.5",
+        "@patternfly/react-core": "^5.0.0",
+        "@patternfly/react-icons": "^5.0.0",
         "prop-types": "^15.6.2",
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-redux": ">=7.2.9",
         "redux": ">=4.2.0"
       }
@@ -2632,10 +2634,75 @@
         "react-intl": "^5.17.4"
       }
     },
-    "node_modules/@redhat-cloud-services/frontend-components-utilities": {
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/@patternfly/react-core": {
+      "version": "4.276.12",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.12.tgz",
+      "integrity": "sha512-bBN2BMFhWjl/27zmTG5z3+6aH7XMO8our9nsaryxuzN5wFn6S8cIDILsw5NY7N8SLOOtmqbFJUgcM5GAn1ZAXg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@patternfly/react-icons": "^4.93.7",
+        "@patternfly/react-styles": "^4.92.8",
+        "@patternfly/react-tokens": "^4.94.7",
+        "focus-trap": "6.9.2",
+        "react-dropzone": "9.0.0",
+        "tippy.js": "5.1.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/@patternfly/react-icons": {
+      "version": "4.93.7",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.7.tgz",
+      "integrity": "sha512-3kr35dgba7Qz5CSzmfH0rIjSvBC5xkmiknf3SvVUVxaiVA7KRowID8viYHeZlf3v/Oa3sEewaH830Q0t+nWsZQ==",
+      "optional": true,
+      "peer": true,
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/@patternfly/react-styles": {
+      "version": "4.92.8",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.8.tgz",
+      "integrity": "sha512-K4lUU8O4HiCX9NeuNUIrPgN3wlGERCxJVio+PAjd8hpJD/PKnjFfOJ9u6/Cii3qLy/5ZviWPRNHbGiwA/+YUhg==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/@patternfly/react-table": {
+      "version": "4.113.4",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.113.4.tgz",
+      "integrity": "sha512-WN00JBlJR8VVXpNH/IBmuTj70/Ww4vNQwB67mJ8yPzZ0refgAMqMGHCsp9yo5GImJhcBqQr4xlQNpHpeJIKphQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@patternfly/react-core": "^4.276.12",
+        "@patternfly/react-icons": "^4.93.7",
+        "@patternfly/react-styles": "^4.92.8",
+        "@patternfly/react-tokens": "^4.94.7",
+        "lodash": "^4.17.19",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/@patternfly/react-tokens": {
+      "version": "4.94.7",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.7.tgz",
+      "integrity": "sha512-h+ducOLDMSxcuec3+YY3x+stM5ZUSnrl/lC/eVmjypil2El08NuE2MNEPMQWdhrod6VRRZFMNqZw/m82iv6U1A==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/@redhat-cloud-services/frontend-components-utilities": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-utilities/-/frontend-components-utilities-3.7.6.tgz",
       "integrity": "sha512-qXevUW8Clj1AoBLwfZAmS+oFJCWKZaMp8O33cyUhkoGjrwkQaL5eJg28zjLVa1uQhdJAvAdwTNtE+Gt3hJTC1g==",
+      "optional": true,
       "dependencies": {
         "@redhat-cloud-services/types": "^0.0.24",
         "@sentry/browser": "^5.30.0",
@@ -2656,6 +2723,102 @@
         "react-router-dom": "^5.0.0 || ^6.0.0"
       }
     },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/attr-accept": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
+      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "core-js": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "optional": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/file-selector": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
+      "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/focus-trap": {
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
+      "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tabbable": "^5.3.2"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/react-dropzone": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz",
+      "integrity": "sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "attr-accept": "^1.1.3",
+        "file-selector": "^0.1.8",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-translations/node_modules/tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@redhat-cloud-services/frontend-components-utilities": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/frontend-components-utilities/-/frontend-components-utilities-4.0.0.tgz",
+      "integrity": "sha512-0QQ9BS287vF53QsoxMDRY7E3YZcTH3ZyB6lAgwy7rwc/NhXTqxgcSvHx/eUqw4DscKlUJ61HjLAZghIf+7NuXQ==",
+      "dependencies": {
+        "@redhat-cloud-services/types": "^0.0.24",
+        "@sentry/browser": "^5.30.0",
+        "awesome-debounce-promise": "^2.1.0",
+        "axios": "^0.27.2",
+        "commander": "^2.20.3",
+        "mkdirp": "^1.0.4",
+        "react-content-loader": "^6.2.0"
+      },
+      "peerDependencies": {
+        "@patternfly/react-core": "^5.0.0",
+        "@patternfly/react-table": "^5.0.0",
+        "@redhat-cloud-services/rbac-client": "^1.0.100",
+        "cypress": ">=12.0.0 < 13.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-redux": ">=7.0.0",
+        "react-router-dom": "^5.0.0 || ^6.0.0"
+      }
+    },
     "node_modules/@redhat-cloud-services/frontend-components-utilities/node_modules/axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -2682,6 +2845,64 @@
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/@redhat-cloud-services/tsc-transform-imports": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@redhat-cloud-services/tsc-transform-imports/-/tsc-transform-imports-1.0.3.tgz",
+      "integrity": "sha512-tPWpa1BoW/O0wQtgD3R8kCvSxU8rEXL+U7xZ6z+DIhBpugOMaiFDDynRt8z1Tz1llhFpc0UgXTyAFRdbkJkMSA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "10.3.3"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      }
+    },
+    "node_modules/@redhat-cloud-services/tsc-transform-imports/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@redhat-cloud-services/tsc-transform-imports/node_modules/glob": {
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
+      "integrity": "sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.0.3",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@redhat-cloud-services/tsc-transform-imports/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@redhat-cloud-services/types": {
       "version": "0.0.24",
       "resolved": "https://registry.npmjs.org/@redhat-cloud-services/types/-/types-0.0.24.tgz",
@@ -2823,61 +3044,258 @@
         "tslib": "^1.9.3"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/minimal/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/types": {
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
+      "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/utils": {
+      "version": "5.30.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
+      "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
+      "dependencies": {
+        "@sentry/types": "5.30.0",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@sentry/utils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz",
+      "integrity": "sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
+      "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+      "dev": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0"
+      }
+    },
+    "node_modules/@swc/core": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.80.tgz",
+      "integrity": "sha512-yX2xV5I/lYswHHR+44TPvzBgq3/Y8N1YWpTQADYuvSiX3Jxyvemk5Jpx3rRtigYb8WBkWAAf2i5d5ZJ2M7hhgw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@swc/types": "^0.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.3.80",
+        "@swc/core-darwin-x64": "1.3.80",
+        "@swc/core-linux-arm-gnueabihf": "1.3.80",
+        "@swc/core-linux-arm64-gnu": "1.3.80",
+        "@swc/core-linux-arm64-musl": "1.3.80",
+        "@swc/core-linux-x64-gnu": "1.3.80",
+        "@swc/core-linux-x64-musl": "1.3.80",
+        "@swc/core-win32-arm64-msvc": "1.3.80",
+        "@swc/core-win32-ia32-msvc": "1.3.80",
+        "@swc/core-win32-x64-msvc": "1.3.80"
+      },
+      "peerDependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.80.tgz",
+      "integrity": "sha512-rhoFTcQMUGfO7IkfOnopPSF6O0/aVJ58B7KueIKbvrMe6YvSfFj9QfObELFjYCcrJZTvUWBhig0QrsfPIiUphA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.80.tgz",
+      "integrity": "sha512-0dOLedFpVXe+ugkKHXsqSxMKqvQYfFtibWbrZ7j8wOaErzSGPr0VpyWvepNVb9s046725kPXSw+fsGhqZR8wrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.80.tgz",
+      "integrity": "sha512-QIjwP3PtDeHBDkwF6+ZZqdUsqAhORbMpxrw2jq3mHe4lQrxBttSFTq018vlMRo2mFEorOvXdadzaD9m+NymPrw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.80.tgz",
+      "integrity": "sha512-cg8WriIueab58ZwkzXmIACnjSzFLzOBwxlC9k65gPXMNgCjab2YbqEYvAbjBqneuqaao02gW6tad2uhjgYaExw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.80.tgz",
+      "integrity": "sha512-AhdCQ7QKx5mWrtpaOA1mFRiWWvuiiUtspvo0QSpspDetRKTND1rlf/3UB5+gp0kCeCNUTsVmJWU7fIA9ICZtXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.80.tgz",
+      "integrity": "sha512-+2e5oni1vOrLIjM5Q2/GIzK/uS2YEtuJqnjPvCK8SciRJsSl8OgVsRvyCDbmKeZNtJ2Q+o/O2AQ2w1qpAJG6jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/@sentry/minimal/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
-    "node_modules/@sentry/types": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
-      "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw==",
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.80.tgz",
+      "integrity": "sha512-8OK9IlI1zpWOm7vIp1iXmZSEzLAwFpqhsGSEhxPavpOx2m54kLFdPcw/Uv3n461f6TCtszIxkGq1kSqBUdfUBA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       }
     },
-    "node_modules/@sentry/utils": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
-      "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
-      "dependencies": {
-        "@sentry/types": "5.30.0",
-        "tslib": "^1.9.3"
-      },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.80.tgz",
+      "integrity": "sha512-RKhatwiAGlffnF6z2Mm3Ddid0v3KB+uf5m/Gc7N9zO/EUAV0PnHRuYuZSGyqodHmGFC+mK8YrCooFCEmHL9n+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       }
     },
-    "node_modules/@sentry/utils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "dev": true
-    },
-    "node_modules/@sinonjs/commons": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz",
-      "integrity": "sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==",
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.80.tgz",
+      "integrity": "sha512-3jiiZzU/kaw7k4zUp1yMq1QiUe4wJVtCEXIhf+fKuBsIwm7rdvyK/+PIx5KHnZy4TGQnYczKBRhJA5nuBcrUCQ==",
+      "cpu": [
+        "ia32"
+      ],
       "dev": true,
-      "dependencies": {
-        "type-detect": "4.0.8"
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/@sinonjs/fake-timers": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
-      "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.3.80",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.80.tgz",
+      "integrity": "sha512-2eZtIoIWQBWqykfms92Zd37lveYOBWQTZjdooBGlsLHtcoQLkNpf1NXmR6TKY0yy8q6Yl3OhPvY+izjmO08MSg==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@sinonjs/commons": "^3.0.0"
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/@swc/helpers": {
@@ -2888,6 +3306,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@swc/types": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.3.tgz",
+      "integrity": "sha512-3Oq9V7tRV5+hlKHPr/8RpByJ1HXB4mAbZxh/sKAjyvNRBxTASjBx4j+gN9iXMBTllhZCZgYUfOqvbCtU3tqOHQ==",
+      "dev": true
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -4713,12 +5137,9 @@
       }
     },
     "node_modules/attr-accept": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
-      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
-      "dependencies": {
-        "core-js": "^2.5.0"
-      },
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
       "engines": {
         "node": ">=4"
       }
@@ -4905,43 +5326,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/babel-loader": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
-      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
-      "dev": true,
-      "dependencies": {
-        "find-cache-dir": "^3.3.1",
-        "loader-utils": "^2.0.0",
-        "make-dir": "^3.1.0",
-        "schema-utils": "^2.6.5"
-      },
-      "engines": {
-        "node": ">= 8.9"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0",
-        "webpack": ">=2"
-      }
-    },
-    "node_modules/babel-loader/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -5938,12 +6322,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "dev": true
-    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -6291,7 +6669,9 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true
+      "hasInstallScript": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/core-js-pure": {
       "version": "3.32.1",
@@ -7586,26 +7966,16 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
+      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
       "dev": true,
       "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.5.0",
-        "tapable": "^1.0.0"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/enhanced-resolve/node_modules/tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+        "node": ">=10.13.0"
       }
     },
     "node_modules/enquirer": {
@@ -7644,18 +8014,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9768,14 +10126,14 @@
       }
     },
     "node_modules/file-selector": {
-      "version": "0.1.19",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
-      "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
       "dependencies": {
-        "tslib": "^2.0.1"
+        "tslib": "^2.4.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 12"
       }
     },
     "node_modules/fill-range": {
@@ -9823,23 +10181,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
-    "node_modules/find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dev": true,
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -9892,11 +10233,11 @@
       "dev": true
     },
     "node_modules/focus-trap": {
-      "version": "6.9.2",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
-      "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.3.tgz",
+      "integrity": "sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==",
       "dependencies": {
-        "tabbable": "^5.3.2"
+        "tabbable": "^6.1.2"
       }
     },
     "node_modules/follow-redirects": {
@@ -14832,21 +15173,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -14904,55 +15230,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/memory-fs": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-      "dev": true,
-      "dependencies": {
-        "errno": "^0.1.3",
-        "readable-stream": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=4.3.0 <5.0.0 || >=5.10"
-      }
-    },
-    "node_modules/memory-fs/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
-      "dev": true
-    },
-    "node_modules/memory-fs/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/memory-fs/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
-    },
-    "node_modules/memory-fs/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -16218,6 +16495,8 @@
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
       "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
       "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "optional": true,
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -16534,12 +16813,6 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true
-    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -16715,20 +16988,19 @@
       }
     },
     "node_modules/react-dropzone": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz",
-      "integrity": "sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==",
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
       "dependencies": {
-        "attr-accept": "^1.1.3",
-        "file-selector": "^0.1.8",
-        "prop-types": "^15.6.2",
-        "prop-types-extra": "^1.1.0"
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 10.13"
       },
       "peerDependencies": {
-        "react": ">=0.14.0"
+        "react": ">= 16.8 || 18.0.0"
       }
     },
     "node_modules/react-fast-compare": {
@@ -18348,6 +18620,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swc-loader": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz",
+      "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==",
+      "dev": true,
+      "peerDependencies": {
+        "@swc/core": "^1.2.147",
+        "webpack": ">=2"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -18377,9 +18659,9 @@
       }
     },
     "node_modules/tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
     "node_modules/tapable": {
       "version": "2.2.1",
@@ -18545,6 +18827,8 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.1.2.tgz",
       "integrity": "sha512-Qtrv2wqbRbaKMUb6bWWBQWPayvcDKNrGlvihxtsyowhT7RLGEh1STWuy6EMXC6QLkfKPB2MLnf8W2mzql9VDAw==",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "popper.js": "^1.16.0"
       }
@@ -18694,23 +18978,22 @@
       }
     },
     "node_modules/ts-loader": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-8.4.0.tgz",
-      "integrity": "sha512-6nFY3IZ2//mrPc+ImY3hNWx1vCHyEhl6V+wLmL4CZcm6g1CqX7UKrkc6y0i4FwcfOhxyMPCfaEvh20f4r9GNpw==",
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz",
+      "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
-        "enhanced-resolve": "^4.0.0",
-        "loader-utils": "^2.0.0",
+        "enhanced-resolve": "^5.0.0",
         "micromatch": "^4.0.0",
         "semver": "^7.3.4"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=12.0.0"
       },
       "peerDependencies": {
         "typescript": "*",
-        "webpack": "*"
+        "webpack": "^5.0.0"
       }
     },
     "node_modules/ts-loader/node_modules/ansi-styles": {
@@ -19450,6 +19733,20 @@
         "react": ">=16.6.0"
       }
     },
+    "node_modules/victory-box-plot": {
+      "version": "36.6.11",
+      "resolved": "https://registry.npmjs.org/victory-box-plot/-/victory-box-plot-36.6.11.tgz",
+      "integrity": "sha512-+J7Hb0Vf6cQe+qZyRhm6sM7V7AMS43jSTXnrFtRP7Bn+HdAb7p2S7h8abtgUhg3uVeTQa9UUqJBmC/maP8V3Nw==",
+      "dependencies": {
+        "lodash": "^4.17.19",
+        "prop-types": "^15.8.1",
+        "victory-core": "^36.6.11",
+        "victory-vendor": "^36.6.11"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/victory-brush-container": {
       "version": "36.6.11",
       "resolved": "https://registry.npmjs.org/victory-brush-container/-/victory-brush-container-36.6.11.tgz",
@@ -20282,19 +20579,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
diff --git a/package.json b/package.json
index 92784b2e5d..200ce4c947 100644
--- a/package.json
+++ b/package.json
@@ -19,13 +19,15 @@
     "check:milestone": "npx npm-check-updates -t newest -f '/^(@patternfly|@redhat-cloud-services)/'",
     "check:milestone:update": "npx npm-check-updates -t newest -f '/^(@patternfly|@redhat-cloud-services)/' -u",
     "clean": "rimraf dist .cache",
+    "codemods": "npx @patternfly/pf-codemods@latest src",
     "deploy": "npm-run-all build lint test",
     "install:pkgs": "npm install",
+    "install:pkgs:force": "npm install --force",
     "lint": "npm-run-all lint:*",
     "lint:ts": "eslint src",
     "lint:ts:fix": "eslint src --fix",
     "patch:hosts": "fec patch-etc-hosts",
-    "postinstall": "rm -rf .cache",
+    "postinstall": "ts-patch install && rm -rf .cache",
     "start": "HMR=true fec dev",
     "start:csc": "CLOUD_SERVICES_CONFIG_PORT=8889 npm start",
     "start:ephemeral": "EPHEMERAL_PORT=8000 npm start",
@@ -45,17 +47,16 @@
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.224.2",
-    "@patternfly/react-charts": "6.94.19",
-    "@patternfly/react-core": "4.276.8",
-    "@patternfly/react-icons": "4.93.6",
-    "@patternfly/react-styles": "4.92.6",
-    "@patternfly/react-table": "4.113.0",
-    "@patternfly/react-tokens": "4.94.6",
-    "@redhat-cloud-services/frontend-components": "^3.11.5",
-    "@redhat-cloud-services/frontend-components-notifications": "^3.2.16",
+    "@patternfly/patternfly": "5.0.2",
+    "@patternfly/react-charts": "7.0.0",
+    "@patternfly/react-core": "5.0.0",
+    "@patternfly/react-icons": "5.0.0",
+    "@patternfly/react-table": "5.0.0",
+    "@patternfly/react-tokens": "5.0.0",
+    "@redhat-cloud-services/frontend-components": "^4.0.1",
+    "@redhat-cloud-services/frontend-components-notifications": "^4.0.0",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.6",
-    "@redhat-cloud-services/frontend-components-utilities": "^3.7.6",
+    "@redhat-cloud-services/frontend-components-utilities": "^4.0.0",
     "@redhat-cloud-services/rbac-client": "^1.2.6",
     "@unleash/proxy-client-react": "^3.6.0",
     "axios": "^1.5.0",
@@ -79,7 +80,8 @@
   "devDependencies": {
     "@formatjs/cli": "^6.1.3",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^1.3.0",
-    "@redhat-cloud-services/frontend-components-config": "^5.1.1",
+    "@redhat-cloud-services/frontend-components-config": "^6.0.2",
+    "@redhat-cloud-services/tsc-transform-imports": "^1.0.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.4",
@@ -117,7 +119,6 @@
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "overrides": {
-    "eslint": "^8.48.0",
     "react-intl": "^6.4.4"
   },
   "insights": {
diff --git a/src/appEntry.tsx b/src/appEntry.tsx
index ecb1d2bf78..32a639b401 100644
--- a/src/appEntry.tsx
+++ b/src/appEntry.tsx
@@ -12,7 +12,7 @@ import App from './app';
 import { configureStore } from './store';
 
 // Todo: Uncomment for use with non-shared PatternFly packages
-// require.resolve('@patternfly/patternfly/patternfly.css');
+require.resolve('@patternfly/patternfly/patternfly.css');
 require.resolve('@patternfly/patternfly/patternfly-addons.css');
 
 import './styles/global.css';
diff --git a/src/components/drawers/commonDrawer/commonDrawer.scss b/src/components/drawers/commonDrawer/commonDrawer.scss
index 9c7ecdcbaf..465c7d210b 100644
--- a/src/components/drawers/commonDrawer/commonDrawer.scss
+++ b/src/components/drawers/commonDrawer/commonDrawer.scss
@@ -1,5 +1,5 @@
 .drawerOverride {
-  .pf-c-drawer__content {
+  .pf-v5-c-drawer__content {
     background-color: unset;
   }
 }
diff --git a/src/components/drawers/commonDrawer/commonDrawer.tsx b/src/components/drawers/commonDrawer/commonDrawer.tsx
index 528819eca2..21922e66f2 100644
--- a/src/components/drawers/commonDrawer/commonDrawer.tsx
+++ b/src/components/drawers/commonDrawer/commonDrawer.tsx
@@ -57,7 +57,9 @@ class CommonDrawerBase extends React.Component<CommonDrawerProps> {
     return (
       <Drawer className="drawerOverride" isExpanded={isExpanded} onExpand={this.handleExpand}>
         <DrawerContent panelContent={this.getPanelContent()}>
-          <DrawerContentBody className="pf-u-display-flex pf-u-flex-direction-column">{children}</DrawerContentBody>
+          <DrawerContentBody className="pf-v5-u-display-flex pf-v5-u-flex-direction-column">
+            {children}
+          </DrawerContentBody>
         </DrawerContent>
       </Drawer>
     );
diff --git a/src/components/drawers/exports/exportActions.tsx b/src/components/drawers/exports/exportActions.tsx
index 308771e97d..03e80819bb 100644
--- a/src/components/drawers/exports/exportActions.tsx
+++ b/src/components/drawers/exports/exportActions.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -61,7 +61,7 @@ class ExportsActionsBase extends React.Component<ExportsActionsProps, ExportsAct
       <>
         <Dropdown
           onSelect={this.handleOnSelect}
-          toggle={<KebabToggle onToggle={this.handleOnToggle} />}
+          toggle={<KebabToggle onToggle={(_evt, isOpen) => this.handleOnToggle(isOpen)} />}
           isOpen={isDropdownOpen}
           isPlain
           position="right"
diff --git a/src/components/drawers/exports/exportsContent.tsx b/src/components/drawers/exports/exportsContent.tsx
index e6ea9c8257..9df5e1bec6 100644
--- a/src/components/drawers/exports/exportsContent.tsx
+++ b/src/components/drawers/exports/exportsContent.tsx
@@ -82,7 +82,7 @@ class ExportsContentBase extends React.Component<ExportsContentProps, ExportsCon
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.exportsTitle),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/components/drawers/exports/exportsLink.tsx b/src/components/drawers/exports/exportsLink.tsx
index 0e6e499c0f..82dbee0ef7 100644
--- a/src/components/drawers/exports/exportsLink.tsx
+++ b/src/components/drawers/exports/exportsLink.tsx
@@ -50,7 +50,7 @@ class ExportsLinkBase extends React.Component<ExportsLinkProps, any> {
     // @redhat-cloud-services/frontend-components-notifications does not expose PatternFly's actionLinks prop
     if (isActionLink) {
       return (
-        <div className="pf-c-alert__action-group">
+        <div className="pf-v5-c-alert__action-group">
           <AlertActionLink onClick={this.handleToggle}>{intl.formatMessage(messages.exportsTitle)}</AlertActionLink>
         </div>
       );
diff --git a/src/components/drawers/exports/exportsTable.tsx b/src/components/drawers/exports/exportsTable.tsx
index aabbba3608..1c879327b1 100644
--- a/src/components/drawers/exports/exportsTable.tsx
+++ b/src/components/drawers/exports/exportsTable.tsx
@@ -4,19 +4,20 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   Label,
   Popover,
   Spinner,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { OutlinedClockIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { SyncIcon } from '@patternfly/react-icons/dist/esm/icons/sync-icon';
-import { sortable, SortByDirection, Table, TableBody, TableHeader, TableVariant } from '@patternfly/react-table';
+import { sortable, SortByDirection, TableVariant } from '@patternfly/react-table';
+import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
 import type { Query } from 'api/queries/query';
 import { getQuery } from 'api/queries/query';
 import type { Report } from 'api/reports/report';
@@ -169,14 +170,17 @@ class ExportsTableBase extends React.Component<ExportsTableProps, ExportsTableSt
 
     return (
       <EmptyState>
-        <EmptyStateIcon icon={PlusCircleIcon} />
-        <Title headingLevel="h5" size={TitleSizes.lg}>
-          {intl.formatMessage(messages.noExportsStateTitle)}
-        </Title>
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(messages.noExportsStateTitle)}</>}
+          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+          headingLevel="h5"
+        />
         <EmptyStateBody>{intl.formatMessage(messages.exportsEmptyState)}</EmptyStateBody>
-        <Button variant="primary" onClick={onClose}>
-          {intl.formatMessage(messages.close)}
-        </Button>
+        <EmptyStateFooter>
+          <Button variant="primary" onClick={onClose}>
+            {intl.formatMessage(messages.close)}
+          </Button>
+        </EmptyStateFooter>
       </EmptyState>
     );
   };
diff --git a/src/components/drawers/optimzations/optimizations.scss b/src/components/drawers/optimzations/optimizations.scss
index fea98da1d8..91ae5bbaf6 100644
--- a/src/components/drawers/optimzations/optimizations.scss
+++ b/src/components/drawers/optimzations/optimizations.scss
@@ -4,13 +4,13 @@
   div {
     display: block;
     margin-right: 0;
-    margin-bottom: var(--pf-global--spacer--xs);
+    margin-bottom: var(--pf-v5-global--spacer--xs);
     &.iconOverride {
       &.decrease {
-        // color: var(--pf-global--success-color--100);
+        // color: var(--pf-v5-global--success-color--100);
       }
       &.increase {
-        // color: var(--pf-global--danger-color--100);
+        // color: var(--pf-v5-global--danger-color--100);
       }
       .fa-equals {
         margin-left: 25px;
@@ -27,10 +27,10 @@
         top: -3px;
       }
       .fa-sort-up::before {
-        // color: var(--pf-global--danger-color--100);
+        // color: var(--pf-v5-global--danger-color--100);
       }
       .fa-sort-down::before {
-        // color: var(--pf-global--success-color--100);
+        // color: var(--pf-v5-global--success-color--100);
       }
       span {
         margin-right: -17px !important;
diff --git a/src/components/drawers/optimzations/optimizationsContent.tsx b/src/components/drawers/optimzations/optimizationsContent.tsx
index 30cc66403a..5d708a3598 100644
--- a/src/components/drawers/optimzations/optimizationsContent.tsx
+++ b/src/components/drawers/optimzations/optimizationsContent.tsx
@@ -13,7 +13,7 @@ import {
   TextListVariants,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table /* data-codemods */, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import type { RecommendationItem, RecommendationReportData } from 'api/ros/recommendations';
 import { RosPathsType, RosType } from 'api/ros/ros';
 import type { AxiosError } from 'axios';
@@ -265,10 +265,9 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
     const memVariationUnits = hasVariationLimitsMemory ? term.variation.limits.memory.format : undefined;
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.optimizationsTableAriaLabel)}
         borders={false}
-        hasSelectableRowCaption
         variant={TableVariant.compact}
       >
         <Thead>
@@ -313,7 +312,7 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
             <Td>{this.getChangeValue(memVariation, memVariationUnits)}</Td>
           </Tr>
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -377,10 +376,9 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
     const memVariationUnits = hasVariationRequestsMemory ? term.variation.requests.memory.format : undefined;
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.optimizationsTableAriaLabel)}
         borders={false}
-        hasSelectableRowCaption
         variant={TableVariant.compact}
       >
         <Thead>
@@ -425,7 +423,7 @@ class OptimizationsContentBase extends React.Component<OptimizationsContentProps
             <Td>{this.getChangeValue(memVariation, memVariationUnits)}</Td>
           </Tr>
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
diff --git a/src/components/drawers/optimzations/optimizationsLink.tsx b/src/components/drawers/optimzations/optimizationsLink.tsx
index f9dac93876..b2f98d5e72 100644
--- a/src/components/drawers/optimzations/optimizationsLink.tsx
+++ b/src/components/drawers/optimzations/optimizationsLink.tsx
@@ -111,11 +111,7 @@ class OptimizationsLinkBase extends React.Component<OptimizationsLinkProps, any>
       </Button>
     );
     if (isDisabled) {
-      return (
-        <Tooltip content={intl.formatMessage(messages.optimizationsViewAllDisabled)} removeFindDomNode>
-          {buttonComponent}
-        </Tooltip>
-      );
+      return <Tooltip content={intl.formatMessage(messages.optimizationsViewAllDisabled)}>{buttonComponent}</Tooltip>;
     }
     return buttonComponent;
   }
diff --git a/src/components/inactiveSources/inactiveSources.scss b/src/components/inactiveSources/inactiveSources.scss
index 242012ffad..b46cf0a92e 100644
--- a/src/components/inactiveSources/inactiveSources.scss
+++ b/src/components/inactiveSources/inactiveSources.scss
@@ -1,8 +1,8 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .alert {
-  background-color: var(--pf-global--BackgroundColor--light-100);
-  padding-left: var(--pf-global--spacer--lg);
-  padding-right: var(--pf-global--spacer--lg);
-  padding-top: var(--pf-global--spacer--lg);
+  background-color: var(--pf-v5-global--BackgroundColor--light-100);
+  padding-left: var(--pf-v5-global--spacer--lg);
+  padding-right: var(--pf-v5-global--spacer--lg);
+  padding-top: var(--pf-v5-global--spacer--lg);
 }
diff --git a/src/routes/components/charts/chartTheme/theme-utils.ts b/src/routes/components/charts/chartTheme/theme-utils.ts
index a496be99f2..e8df95739f 100644
--- a/src/routes/components/charts/chartTheme/theme-utils.ts
+++ b/src/routes/components/charts/chartTheme/theme-utils.ts
@@ -3,6 +3,6 @@ import { ChartThemeColor, getCustomTheme } from '@patternfly/react-charts';
 import { default as ChartTheme } from './theme-koku';
 
 // Applies theme color and variant to base theme
-const getTheme = () => getCustomTheme(ChartThemeColor.default, null, ChartTheme);
+const getTheme = () => getCustomTheme(ChartThemeColor.default, ChartTheme);
 
 export default getTheme;
diff --git a/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap b/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap
index 6401aa7c68..4bc66bb906 100644
--- a/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap
+++ b/src/routes/components/charts/historicalCostChart/__snapshots__/historicalCostChart.test.tsx.snap
@@ -6,9 +6,9 @@ exports[`null previous and current reports are handled 1`] = `
     class="chartOverride"
   >
     <h2
-      class="pf-c-title pf-m-xl"
+      class="pf-v5-c-title pf-m-xl"
       data-ouia-component-id="OUIA-Generated-Title-2"
-      data-ouia-component-type="PF4/Title"
+      data-ouia-component-type="PF5/Title"
       data-ouia-safe="true"
       style="margin-left: -1.5rem;"
     >
@@ -22,7 +22,7 @@ exports[`null previous and current reports are handled 1`] = `
         style="height: 100px; width: 0px;"
       >
         <div
-          class="pf-c-chart"
+          class="pf-v5-c-chart"
           style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
         >
           <svg
@@ -102,7 +102,7 @@ exports[`null previous and current reports are handled 1`] = `
               <line
                 role="presentation"
                 shape-rendering="auto"
-                style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+                style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
                 vector-effect="non-scaling-stroke"
                 x1="8"
                 x2="-8"
@@ -119,7 +119,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="padding: 40px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-chart-global--label--Fill, #151515); text-anchor: middle;"
+                  style="padding: 40px; font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-v5-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515); text-anchor: middle;"
                   text-anchor="middle"
                   x="0"
                 >
@@ -139,7 +139,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                    style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                     text-anchor="middle"
                     x="8"
                   >
@@ -160,7 +160,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                    style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                     text-anchor="middle"
                     x="0.5333333333333332"
                   >
@@ -181,7 +181,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                    style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                     text-anchor="middle"
                     x="-8"
                   >
@@ -196,7 +196,7 @@ exports[`null previous and current reports are handled 1`] = `
               <line
                 role="presentation"
                 shape-rendering="auto"
-                style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+                style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
                 vector-effect="non-scaling-stroke"
                 x1="8"
                 x2="8"
@@ -214,7 +214,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="padding: 15px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-chart-global--label--Fill, #151515); text-anchor: middle;"
+                  style="padding: 15px; font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-v5-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515); text-anchor: middle;"
                   text-anchor="middle"
                   x="-7"
                 >
@@ -234,7 +234,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -255,7 +255,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -276,7 +276,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -297,7 +297,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -318,7 +318,7 @@ exports[`null previous and current reports are handled 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -368,7 +368,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                   text-anchor="start"
                   x="30.8"
                 >
@@ -385,7 +385,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                   text-anchor="start"
                   x="70.39999999999999"
                 >
@@ -417,9 +417,9 @@ exports[`reports are formatted to datums 1`] = `
     class="chartOverride"
   >
     <h2
-      class="pf-c-title pf-m-xl"
+      class="pf-v5-c-title pf-m-xl"
       data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
+      data-ouia-component-type="PF5/Title"
       data-ouia-safe="true"
       style="margin-left: -1.5rem;"
     >
@@ -433,7 +433,7 @@ exports[`reports are formatted to datums 1`] = `
         style="height: 100px; width: 0px;"
       >
         <div
-          class="pf-c-chart"
+          class="pf-v5-c-chart"
           style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
         >
           <svg
@@ -513,7 +513,7 @@ exports[`reports are formatted to datums 1`] = `
               <line
                 role="presentation"
                 shape-rendering="auto"
-                style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+                style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
                 vector-effect="non-scaling-stroke"
                 x1="8"
                 x2="-8"
@@ -530,7 +530,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="padding: 40px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-chart-global--label--Fill, #151515); text-anchor: middle;"
+                  style="padding: 40px; font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-v5-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515); text-anchor: middle;"
                   text-anchor="middle"
                   x="0"
                 >
@@ -550,7 +550,7 @@ exports[`reports are formatted to datums 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                    style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                     text-anchor="middle"
                     x="8"
                   >
@@ -571,7 +571,7 @@ exports[`reports are formatted to datums 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                    style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                     text-anchor="middle"
                     x="0.5333333333333332"
                   >
@@ -592,7 +592,7 @@ exports[`reports are formatted to datums 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                    style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                     text-anchor="middle"
                     x="-8"
                   >
@@ -607,7 +607,7 @@ exports[`reports are formatted to datums 1`] = `
               <line
                 role="presentation"
                 shape-rendering="auto"
-                style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+                style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
                 vector-effect="non-scaling-stroke"
                 x1="8"
                 x2="8"
@@ -625,7 +625,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="padding: 15px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-chart-global--label--Fill, #151515); text-anchor: middle;"
+                  style="padding: 15px; font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; stroke: var(--pf-v5-chart-axis--axis-label--stroke--Color, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515); text-anchor: middle;"
                   text-anchor="middle"
                   x="-7"
                 >
@@ -645,7 +645,7 @@ exports[`reports are formatted to datums 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -666,7 +666,7 @@ exports[`reports are formatted to datums 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -687,7 +687,7 @@ exports[`reports are formatted to datums 1`] = `
                   <tspan
                     dx="0"
                     dy="0"
-                    style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                    style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                     text-anchor="end"
                     x="-7"
                   >
@@ -737,7 +737,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                   text-anchor="start"
                   x="30.8"
                 >
@@ -754,7 +754,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                   text-anchor="start"
                   x="70.39999999999999"
                 >
diff --git a/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap b/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap
index 97fffa9ec6..91c0fbe30f 100644
--- a/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap
+++ b/src/routes/components/charts/historicalTrendChart/__snapshots__/historicalTrendChart.test.tsx.snap
@@ -5,9 +5,9 @@ exports[`null previous and current reports are handled 1`] = `
   class="chartOverride"
 >
   <h2
-    class="pf-c-title pf-m-xl"
+    class="pf-v5-c-title pf-m-xl"
     data-ouia-component-id="OUIA-Generated-Title-2"
-    data-ouia-component-type="PF4/Title"
+    data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"
     style="margin-left: -1.5rem;"
   >
@@ -21,7 +21,7 @@ exports[`null previous and current reports are handled 1`] = `
       style="height: 100px; width: 0px;"
     >
       <div
-        class="pf-c-chart"
+        class="pf-v5-c-chart"
         style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
       >
         <svg
@@ -101,7 +101,7 @@ exports[`null previous and current reports are handled 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="-8"
@@ -121,7 +121,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="8"
                 >
@@ -142,7 +142,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="0.5333333333333332"
                 >
@@ -163,7 +163,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="-8"
                 >
@@ -178,7 +178,7 @@ exports[`null previous and current reports are handled 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="8"
@@ -198,7 +198,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -219,7 +219,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -240,7 +240,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -261,7 +261,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -282,7 +282,7 @@ exports[`null previous and current reports are handled 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -332,7 +332,7 @@ exports[`null previous and current reports are handled 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
@@ -349,7 +349,7 @@ exports[`null previous and current reports are handled 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="70.39999999999999"
               >
@@ -379,9 +379,9 @@ exports[`reports are formatted to datums 1`] = `
   class="chartOverride"
 >
   <h2
-    class="pf-c-title pf-m-xl"
+    class="pf-v5-c-title pf-m-xl"
     data-ouia-component-id="OUIA-Generated-Title-1"
-    data-ouia-component-type="PF4/Title"
+    data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"
     style="margin-left: -1.5rem;"
   >
@@ -395,7 +395,7 @@ exports[`reports are formatted to datums 1`] = `
       style="height: 100px; width: 0px;"
     >
       <div
-        class="pf-c-chart"
+        class="pf-v5-c-chart"
         style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
       >
         <svg
@@ -475,7 +475,7 @@ exports[`reports are formatted to datums 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="-8"
@@ -495,7 +495,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="8"
                 >
@@ -516,7 +516,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="0.5333333333333332"
                 >
@@ -537,7 +537,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="-8"
                 >
@@ -552,7 +552,7 @@ exports[`reports are formatted to datums 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="8"
@@ -572,7 +572,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -593,7 +593,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -614,7 +614,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -635,7 +635,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -685,7 +685,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
@@ -702,7 +702,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="70.39999999999999"
               >
diff --git a/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap b/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap
index 15de8cfb3f..6f07f85bae 100644
--- a/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap
+++ b/src/routes/components/charts/historicalUsageChart/__snapshots__/historicalUsageChart.test.tsx.snap
@@ -5,9 +5,9 @@ exports[`reports are formatted to datums 1`] = `
   class="chartOverride"
 >
   <h2
-    class="pf-c-title pf-m-xl"
+    class="pf-v5-c-title pf-m-xl"
     data-ouia-component-id="OUIA-Generated-Title-1"
-    data-ouia-component-type="PF4/Title"
+    data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"
     style="margin-left: -1.5rem;"
   >
@@ -21,7 +21,7 @@ exports[`reports are formatted to datums 1`] = `
       style="height: 100px; width: 0px;"
     >
       <div
-        class="pf-c-chart"
+        class="pf-v5-c-chart"
         style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
       >
         <svg
@@ -225,7 +225,7 @@ exports[`reports are formatted to datums 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="-8"
@@ -245,7 +245,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="8"
                 >
@@ -266,7 +266,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="0.5333333333333332"
                 >
@@ -287,7 +287,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="-8"
                 >
@@ -302,7 +302,7 @@ exports[`reports are formatted to datums 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="8"
@@ -322,7 +322,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -343,7 +343,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -364,7 +364,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -385,7 +385,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -495,7 +495,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
@@ -512,7 +512,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="70.39999999999999"
               >
@@ -529,7 +529,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
@@ -546,7 +546,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="70.39999999999999"
               >
@@ -563,7 +563,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
@@ -580,7 +580,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="70.39999999999999"
               >
diff --git a/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap b/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap
index caccd3d0be..7a5992bc87 100644
--- a/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap
+++ b/src/routes/components/charts/trendChart/__snapshots__/trendChart.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`reports are formatted to datums 1`] = `
 <div>
   <h3
-    class="pf-c-title pf-m-md"
+    class="pf-v5-c-title pf-m-md"
     data-ouia-component-id="OUIA-Generated-Title-1"
-    data-ouia-component-type="PF4/Title"
+    data-ouia-component-type="PF5/Title"
     data-ouia-safe="true"
   >
     Example Trend Title
@@ -19,7 +19,7 @@ exports[`reports are formatted to datums 1`] = `
       style="height: 100px; width: 0px;"
     >
       <div
-        class="pf-c-chart"
+        class="pf-v5-c-chart"
         style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
       >
         <svg
@@ -105,7 +105,7 @@ exports[`reports are formatted to datums 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="-8"
@@ -125,7 +125,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="8"
                 >
@@ -146,7 +146,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="0.5333333333333332"
                 >
@@ -167,7 +167,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+                  style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
                   text-anchor="middle"
                   x="-8"
                 >
@@ -182,7 +182,7 @@ exports[`reports are formatted to datums 1`] = `
             <line
               role="presentation"
               shape-rendering="auto"
-              style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+              style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
               vector-effect="non-scaling-stroke"
               x1="8"
               x2="8"
@@ -202,7 +202,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -223,7 +223,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -244,7 +244,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -265,7 +265,7 @@ exports[`reports are formatted to datums 1`] = `
                 <tspan
                   dx="0"
                   dy="0"
-                  style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+                  style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
                   text-anchor="end"
                   x="-7"
                 >
@@ -315,7 +315,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
@@ -332,7 +332,7 @@ exports[`reports are formatted to datums 1`] = `
               <tspan
                 dx="0"
                 dy="0"
-                style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+                style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
                 text-anchor="start"
                 x="30.8"
               >
diff --git a/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap b/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap
index 93a9910b45..bae2eb6d2c 100644
--- a/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap
+++ b/src/routes/components/charts/usageChart/__snapshots__/usageChart.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`reports are formatted to datums 1`] = `
   style="height: 100px; width: 0px;"
 >
   <div
-    class="pf-c-chart"
+    class="pf-v5-c-chart"
     style="height: 100%; width: 100%; user-select: none; pointer-events: none; position: relative;"
   >
     <svg
@@ -152,7 +152,7 @@ exports[`reports are formatted to datums 1`] = `
         <line
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+          style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
           vector-effect="non-scaling-stroke"
           x1="8"
           x2="-8"
@@ -172,7 +172,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+              style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
               text-anchor="middle"
               x="8"
             >
@@ -193,7 +193,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+              style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
               text-anchor="middle"
               x="0.5333333333333332"
             >
@@ -214,7 +214,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
+              style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: middle;"
               text-anchor="middle"
               x="-8"
             >
@@ -229,7 +229,7 @@ exports[`reports are formatted to datums 1`] = `
         <line
           role="presentation"
           shape-rendering="auto"
-          style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
+          style="stroke: var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-v5-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"
           vector-effect="non-scaling-stroke"
           x1="8"
           x2="8"
@@ -249,7 +249,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+              style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
               text-anchor="end"
               x="-7"
             >
@@ -270,7 +270,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+              style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
               text-anchor="end"
               x="-7"
             >
@@ -291,7 +291,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+              style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
               text-anchor="end"
               x="-7"
             >
@@ -312,7 +312,7 @@ exports[`reports are formatted to datums 1`] = `
             <tspan
               dx="0"
               dy="0"
-              style="font-size: 0px; font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
+              style="font-size: 0px; font-family: "RedHatText",helvetica,arial,sans-serif; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-axis--tick-label--Fill, #4f5255); text-anchor: end;"
               text-anchor="end"
               x="-7"
             >
@@ -402,7 +402,7 @@ exports[`reports are formatted to datums 1`] = `
           <tspan
             dx="0"
             dy="0"
-            style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+            style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
             text-anchor="start"
             x="30.8"
           >
@@ -419,7 +419,7 @@ exports[`reports are formatted to datums 1`] = `
           <tspan
             dx="0"
             dy="0"
-            style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+            style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
             text-anchor="start"
             x="30.8"
           >
@@ -436,7 +436,7 @@ exports[`reports are formatted to datums 1`] = `
           <tspan
             dx="0"
             dy="0"
-            style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+            style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
             text-anchor="start"
             x="30.8"
           >
@@ -453,7 +453,7 @@ exports[`reports are formatted to datums 1`] = `
           <tspan
             dx="0"
             dy="0"
-            style="font-family: "RedHatText","Overpass",overpass,helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-chart-global--label--stroke, transparent); fill: var(--pf-chart-global--label--Fill, #151515);"
+            style="font-family: "RedHatText",helvetica,arial,sans-serif; font-size: 14px; letter-spacing: normal; padding: 10px; stroke: var(--pf-v5-chart-global--label--stroke, transparent); fill: var(--pf-v5-chart-global--label--Fill, #151515);"
             text-anchor="start"
             x="30.8"
           >
diff --git a/src/routes/components/costDistribution/costDistribution.scss b/src/routes/components/costDistribution/costDistribution.scss
index 8c47570820..9a3ce90478 100644
--- a/src/routes/components/costDistribution/costDistribution.scss
+++ b/src/routes/components/costDistribution/costDistribution.scss
@@ -2,8 +2,8 @@
 
 // Workaround for https://github.com/patternfly/patternfly-react/issues/6371
 .selectOverride {
-  &.pf-c-select {
-    .pf-c-select__menu-item-description {
+  &.pf-v5-c-select {
+    .pf-v5-c-select__menu-item-description {
       width: max-content;
     }
   }
diff --git a/src/routes/components/costDistribution/costDistribution.tsx b/src/routes/components/costDistribution/costDistribution.tsx
index 8a8dcbd432..8c9aca6851 100644
--- a/src/routes/components/costDistribution/costDistribution.tsx
+++ b/src/routes/components/costDistribution/costDistribution.tsx
@@ -1,8 +1,9 @@
 import './costDistribution.scss';
 
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, Title, TitleSizes } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -70,8 +71,8 @@ class CostDistributionBase extends React.Component<CostDistributionProps, CostDi
         id="costDistributionSelect"
         isDisabled={isDisabled}
         isOpen={isSelectOpen}
-        onSelect={this.handleSelect}
-        onToggle={this.handleToggle}
+        onSelect={(_evt, value) => this.handleSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -96,7 +97,7 @@ class CostDistributionBase extends React.Component<CostDistributionProps, CostDi
     return options;
   };
 
-  private handleSelect = (event, selection: CostDistributionOption) => {
+  private handleSelect = (selection: CostDistributionOption) => {
     const { onSelect } = this.props;
 
     setCostDistribution(selection.value); // Set cost distribution in local storage
diff --git a/src/routes/components/costType/costType.scss b/src/routes/components/costType/costType.scss
index 8c47570820..9a3ce90478 100644
--- a/src/routes/components/costType/costType.scss
+++ b/src/routes/components/costType/costType.scss
@@ -2,8 +2,8 @@
 
 // Workaround for https://github.com/patternfly/patternfly-react/issues/6371
 .selectOverride {
-  &.pf-c-select {
-    .pf-c-select__menu-item-description {
+  &.pf-v5-c-select {
+    .pf-v5-c-select__menu-item-description {
       width: max-content;
     }
   }
diff --git a/src/routes/components/costType/costType.tsx b/src/routes/components/costType/costType.tsx
index 73341ef046..4a65e6c69d 100644
--- a/src/routes/components/costType/costType.tsx
+++ b/src/routes/components/costType/costType.tsx
@@ -1,8 +1,9 @@
 import './costType.scss';
 
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, Title, TitleSizes } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -77,8 +78,8 @@ class CostTypeBase extends React.Component<CostTypeProps, CostTypeState> {
         id="costTypeSelect"
         isDisabled={isDisabled}
         isOpen={isSelectOpen}
-        onSelect={this.handleOnSelect}
-        onToggle={this.handleOnToggle}
+        onSelect={(_evt, value) => this.handleOnSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleOnToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -104,7 +105,7 @@ class CostTypeBase extends React.Component<CostTypeProps, CostTypeState> {
     return options;
   };
 
-  private handleOnSelect = (event, selection: CostTypeOption) => {
+  private handleOnSelect = (selection: CostTypeOption) => {
     const { isLocalStorage = true, onSelect } = this.props;
 
     // Set cost type in local storage
diff --git a/src/routes/components/currency/currency.scss b/src/routes/components/currency/currency.scss
index 374ceb421f..eafea7f5d4 100644
--- a/src/routes/components/currency/currency.scss
+++ b/src/routes/components/currency/currency.scss
@@ -2,7 +2,7 @@
 
 // Workaround for missing "position" property
 .currencyOverride {
-  .pf-c-select__menu {
+  .pf-v5-c-select__menu {
     right: 0;
   }
 }
diff --git a/src/routes/components/currency/currency.tsx b/src/routes/components/currency/currency.tsx
index 51a364d989..7788c562f4 100644
--- a/src/routes/components/currency/currency.tsx
+++ b/src/routes/components/currency/currency.tsx
@@ -1,8 +1,9 @@
 import './currency.scss';
 
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, Title, TitleSizes } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -80,8 +81,8 @@ class CurrencyBase extends React.Component<CurrencyProps, CurrencyState> {
         id="currencySelect"
         isDisabled={isDisabled}
         isOpen={isSelectOpen}
-        onSelect={this.handleOnSelect}
-        onToggle={this.handleOnToggle}
+        onSelect={(_evt, value) => this.handleOnSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleOnToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -106,7 +107,7 @@ class CurrencyBase extends React.Component<CurrencyProps, CurrencyState> {
     return options;
   };
 
-  private handleOnSelect = (event, selection: CurrencyOption) => {
+  private handleOnSelect = (selection: CurrencyOption) => {
     const { isLocalStorage = true, onSelect } = this.props;
 
     // Set currency units via local storage
diff --git a/src/routes/components/dataTable/dataTable.scss b/src/routes/components/dataTable/dataTable.scss
index ef5b85fd80..d97c63d360 100644
--- a/src/routes/components/dataTable/dataTable.scss
+++ b/src/routes/components/dataTable/dataTable.scss
@@ -4,13 +4,13 @@
   div {
     display: block;
     margin-right: 0;
-    margin-bottom: var(--pf-global--spacer--xs);
+    margin-bottom: var(--pf-v5-global--spacer--xs);
     &.iconOverride {
       &.decrease {
-        color: var(--pf-global--success-color--100);
+        color: var(--pf-v5-global--success-color--100);
       }
       &.increase {
-        color: var(--pf-global--danger-color--100);
+        color: var(--pf-v5-global--danger-color--100);
       }
       .fa-sort-up {
         margin-left: 10px;
@@ -19,10 +19,10 @@
         margin-left: 10px;
       }
       .fa-sort-up::before {
-        color: var(--pf-global--danger-color--100);
+        color: var(--pf-v5-global--danger-color--100);
       }
       .fa-sort-down::before {
-        color: var(--pf-global--success-color--100);
+        color: var(--pf-v5-global--success-color--100);
       }
       span {
         margin-right: -17px !important;
@@ -32,7 +32,7 @@
 }
 
 .tableOverride {
-  &.pf-c-table tbody .pf-c-table__check input {
+  &.pf-v5-c-table tbody .pf-v5-c-table__check input {
     margin-top: .40rem;
   }
 }
diff --git a/src/routes/components/dataTable/dataTable.tsx b/src/routes/components/dataTable/dataTable.tsx
index 47d3226619..a84580a7f5 100644
--- a/src/routes/components/dataTable/dataTable.tsx
+++ b/src/routes/components/dataTable/dataTable.tsx
@@ -1,9 +1,25 @@
 import './dataTable.scss';
 
-import { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Spinner,
+} from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
-import { SortByDirection, TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import {
+  SortByDirection,
+  Table /* data-codemods */,
+  TableVariant,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -48,7 +64,7 @@ class DataTable extends React.Component<DataTableProps, any> {
     }
     return (
       <EmptyState>
-        <EmptyStateIcon icon={CalculatorIcon} />
+        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );
@@ -70,12 +86,12 @@ class DataTable extends React.Component<DataTableProps, any> {
   private getSortParams = (index: number): ThProps['sort'] => {
     return {
       sortBy: this.getSortBy(index),
-      onSort: this.handleOnSort,
+      onSort: (_evt, i, direction) => this.handleOnSort(i, direction),
       columnIndex: index,
     };
   };
 
-  private handleOnSelect = (event, isSelected, rowId) => {
+  private handleOnSelect = (isSelected, rowId) => {
     const { onSelected, rows } = this.props;
 
     let newRows;
@@ -97,7 +113,7 @@ class DataTable extends React.Component<DataTableProps, any> {
     });
   };
 
-  private handleOnSort = (event, index, direction) => {
+  private handleOnSort = (index, direction) => {
     const { columns, onSort } = this.props;
 
     if (onSort) {
@@ -112,7 +128,7 @@ class DataTable extends React.Component<DataTableProps, any> {
 
     return (
       <>
-        <TableComposable
+        <Table
           aria-label={intl.formatMessage(messages.dataTableAriaLabel)}
           className="tableOverride"
           gridBreakPoint="grid-2xl"
@@ -153,9 +169,9 @@ class DataTable extends React.Component<DataTableProps, any> {
                         key={`cell-${cellIndex}-${rowIndex}`}
                         modifier="nowrap"
                         select={{
-                          disable: row.selectionDisabled, // Disable select for "no-project"
+                          isDisabled: row.selectionDisabled, // Disable select for "no-project"
                           isSelected: row.selected,
-                          onSelect: (_event, isSelected) => this.handleOnSelect(_event, isSelected, rowIndex),
+                          onSelect: (_evt, isSelected) => this.handleOnSelect(isSelected, rowIndex),
                           rowIndex,
                         }}
                         style={item.style}
@@ -176,7 +192,7 @@ class DataTable extends React.Component<DataTableProps, any> {
               ))
             )}
           </Tbody>
-        </TableComposable>
+        </Table>
         {rows.length === 0 && <div style={styles.emptyState}>{this.getEmptyState()}</div>}
       </>
     );
diff --git a/src/routes/components/dataTable/selectableTable.tsx b/src/routes/components/dataTable/selectableTable.tsx
index 83bb60d615..c755ca12a2 100644
--- a/src/routes/components/dataTable/selectableTable.tsx
+++ b/src/routes/components/dataTable/selectableTable.tsx
@@ -1,7 +1,23 @@
-import { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Spinner,
+} from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
-import { SortByDirection, TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import {
+  SortByDirection,
+  Table /* data-codemods */,
+  TableVariant,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
 import messages from 'locales/messages';
 import type { ReactNode } from 'react';
 import React from 'react';
@@ -18,7 +34,7 @@ interface SelectableTableOwnProps {
   filterBy: any;
   isLoading?: boolean;
   onSort(value: string, isSortAscending: boolean);
-  onRowClick(event: React.KeyboardEvent | React.MouseEvent, rowIndex: number);
+  onRowClick(rowIndex: number);
   orderBy: any;
   rows?: any[];
 }
@@ -47,7 +63,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
     }
     return (
       <EmptyState>
-        <EmptyStateIcon icon={CalculatorIcon} />
+        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );
@@ -74,7 +90,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
     };
   };
 
-  private handleOnSort = (event, index, direction) => {
+  private handleOnSort = (index, direction) => {
     const { columns, onSort } = this.props;
 
     if (onSort) {
@@ -84,7 +100,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
     }
   };
 
-  private handleOnRowClick = (event, rowIndex) => {
+  private handleOnRowClick = (rowIndex: number) => {
     const { onRowClick, rows } = this.props;
 
     rows.map(row => (row.selected = false));
@@ -92,7 +108,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
 
     this.setState({ rows }, () => {
       if (onRowClick) {
-        onRowClick(event, rowIndex);
+        onRowClick(rowIndex);
       }
     });
   };
@@ -102,10 +118,9 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
 
     return (
       <>
-        <TableComposable
+        <Table
           aria-label={intl.formatMessage(messages.selectableTableAriaLabel)}
           gridBreakPoint="grid-2xl"
-          hasSelectableRowCaption
           variant={TableVariant.compact}
         >
           <Thead>
@@ -138,9 +153,9 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
                 <Tr
                   aria-label={intl.formatMessage(messages.selectableTableRowAriaLabel)}
                   isSelectable
-                  isHoverable
+                  isClickable
                   isRowSelected={row.selected}
-                  onRowClick={_event => this.handleOnRowClick(_event, rowIndex)}
+                  onRowClick={() => this.handleOnRowClick(rowIndex)}
                   key={`row-${rowIndex}`}
                 >
                   {row.cells.map((item, cellIndex) =>
@@ -169,7 +184,7 @@ class SelectableTable extends React.Component<SelectableTableProps, any> {
               ))
             )}
           </Tbody>
-        </TableComposable>
+        </Table>
         {rows.length === 0 && <div style={styles.emptyState}>{this.getEmptyState()}</div>}
       </>
     );
diff --git a/src/routes/components/dataToolbar/basicToolbar.tsx b/src/routes/components/dataToolbar/basicToolbar.tsx
index c3c45cc7f6..cb8b3bbf96 100644
--- a/src/routes/components/dataToolbar/basicToolbar.tsx
+++ b/src/routes/components/dataToolbar/basicToolbar.tsx
@@ -194,7 +194,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
     });
   }
 
-  private handleOnCategorySelect = (event, selection: CategoryOption) => {
+  private handleOnCategorySelect = (selection: CategoryOption) => {
     this.setState({
       categoryInput: '',
       currentCategory: selection.value,
@@ -359,7 +359,7 @@ export class BasicToolbarBase extends React.Component<BasicToolbarProps, BasicTo
               </ToolbarToggleGroup>
             )}
             {actions && <ToolbarGroup>{actions}</ToolbarGroup>}
-            <ToolbarItem alignment={{ default: 'alignRight' }} variant="pagination">
+            <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>
diff --git a/src/routes/components/dataToolbar/costCategoryValue.tsx b/src/routes/components/dataToolbar/costCategoryValue.tsx
index 9b55647024..5b212bca6a 100644
--- a/src/routes/components/dataToolbar/costCategoryValue.tsx
+++ b/src/routes/components/dataToolbar/costCategoryValue.tsx
@@ -1,13 +1,7 @@
-import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core';
-import {
-  Button,
-  ButtonVariant,
-  InputGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-  TextInput,
-} from '@patternfly/react-core';
+import type { ToolbarChipGroup } from '@patternfly/react-core';
+import { Button, ButtonVariant, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import type { Query } from 'api/queries/query';
 import { getQuery, parseQuery } from 'api/queries/query';
@@ -141,8 +135,8 @@ class CostCategoryValueBase extends React.Component<CostCategoryValueProps, Cost
           isDisabled={isDisabled}
           variant={SelectVariant.checkbox}
           aria-label={intl.formatMessage(messages.filterByCostCategoryValueAriaLabel)}
-          onToggle={this.onCostCategoryValueToggle}
           onSelect={onCostCategoryValueSelect}
+          onToggle={(_evt, isExpanded) => this.onCostCategoryValueToggle(isExpanded)}
           selections={selections}
           isOpen={isCostCategoryValueExpanded}
           placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)}
@@ -153,25 +147,29 @@ class CostCategoryValueBase extends React.Component<CostCategoryValueProps, Cost
     }
     return (
       <InputGroup>
-        <TextInput
-          isDisabled={isDisabled}
-          name="tag-key-value-input"
-          id="tag-key-value-input"
-          type="search"
-          aria-label={intl.formatMessage(messages.filterByCostCategoryValueAriaLabel)}
-          onChange={this.onCostCategoryValueChange}
-          value={costCategoryKeyValue}
-          placeholder={intl.formatMessage(messages.filterByValuePlaceholder)}
-          onKeyDown={evt => onCostCategoryValueInput(evt)}
-        />
-        <Button
-          isDisabled={isDisabled}
-          variant={ButtonVariant.control}
-          aria-label={intl.formatMessage(messages.filterByCostCategoryValueButtonAriaLabel)}
-          onClick={evt => onCostCategoryValueInput(evt)}
-        >
-          <SearchIcon />
-        </Button>
+        <InputGroupItem isFill>
+          <TextInput
+            isDisabled={isDisabled}
+            name="tag-key-value-input"
+            id="tag-key-value-input"
+            type="search"
+            aria-label={intl.formatMessage(messages.filterByCostCategoryValueAriaLabel)}
+            onChange={(_evt, value) => this.onCostCategoryValueChange(value)}
+            value={costCategoryKeyValue}
+            placeholder={intl.formatMessage(messages.filterByValuePlaceholder)}
+            onKeyDown={evt => onCostCategoryValueInput(evt)}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            isDisabled={isDisabled}
+            variant={ButtonVariant.control}
+            aria-label={intl.formatMessage(messages.filterByCostCategoryValueButtonAriaLabel)}
+            onClick={evt => onCostCategoryValueInput(evt)}
+          >
+            <SearchIcon />
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
   }
diff --git a/src/routes/components/dataToolbar/customSelect.tsx b/src/routes/components/dataToolbar/customSelect.tsx
index e9e3147d0e..8ef166633d 100644
--- a/src/routes/components/dataToolbar/customSelect.tsx
+++ b/src/routes/components/dataToolbar/customSelect.tsx
@@ -1,7 +1,7 @@
 import './dataToolbar.scss';
 
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -28,7 +28,7 @@ interface CustomSelectDispatchProps {
 }
 
 interface CustomSelectState {
-  isExpanded?: boolean;
+  isCustomSelectExpanded?: boolean;
 }
 
 export interface SelectOptionObjectExt extends SelectOptionObject {
@@ -40,13 +40,13 @@ type CustomSelectProps = CustomSelectOwnProps & CustomSelectStateProps & CustomS
 
 class CustomSelectBase extends React.Component<CustomSelectProps, CustomSelectState> {
   protected defaultState: CustomSelectState = {
-    isExpanded: false,
+    isCustomSelectExpanded: false,
   };
   public state: CustomSelectState = { ...this.defaultState };
 
   private onCustomSelectToggle = isOpen => {
     this.setState({
-      isExpanded: isOpen,
+      isCustomSelectExpanded: isOpen,
     });
   };
 
@@ -66,7 +66,7 @@ class CustomSelectBase extends React.Component<CustomSelectProps, CustomSelectSt
 
   public render() {
     const { className, filters, intl, isDisabled, onSelect } = this.props;
-    const { isExpanded } = this.state;
+    const { isCustomSelectExpanded } = this.state;
 
     const selectOptions = this.getSelectOptions();
     const selections = filters?.map(filter => {
@@ -79,10 +79,10 @@ class CustomSelectBase extends React.Component<CustomSelectProps, CustomSelectSt
         isDisabled={isDisabled}
         variant={SelectVariant.checkbox}
         aria-label={intl.formatMessage(messages.filterByValuesAriaLabel)}
-        onToggle={this.onCustomSelectToggle}
+        onToggle={(_evt, isExpanded) => this.onCustomSelectToggle(isExpanded)}
         onSelect={onSelect}
         selections={selections}
-        isOpen={isExpanded}
+        isOpen={isCustomSelectExpanded}
         placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)}
       >
         {selectOptions.map(option => (
diff --git a/src/routes/components/dataToolbar/dataKebab.tsx b/src/routes/components/dataToolbar/dataKebab.tsx
index 995f4f7a0f..ca31796c1d 100644
--- a/src/routes/components/dataToolbar/dataKebab.tsx
+++ b/src/routes/components/dataToolbar/dataKebab.tsx
@@ -1,5 +1,5 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core/deprecated';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
diff --git a/src/routes/components/dataToolbar/dataToolbar.scss b/src/routes/components/dataToolbar/dataToolbar.scss
index 63c426fdbf..7502b8ca36 100644
--- a/src/routes/components/dataToolbar/dataToolbar.scss
+++ b/src/routes/components/dataToolbar/dataToolbar.scss
@@ -3,15 +3,15 @@
 // Workaround for https://github.com/patternfly/patternfly-react/issues/4477
 // and https://github.com/patternfly/patternfly-react/issues/6371
 .selectOverride {
-  &.pf-c-select {
+  &.pf-v5-c-select {
     min-width: 250px;
   }
 }
 
 .toolbarOverride {
-  .pf-c-button.pf-m-control::after {
+  .pf-v5-c-button.pf-m-control::after {
     border-left: none;
   }
   // Alternative workaround to overriding table sticky style
-  // --pf-c-toolbar--ZIndex: auto; z-index: 301;
+  // --pf-v5-c-toolbar--ZIndex: auto; z-index: 301;
 }
diff --git a/src/routes/components/dataToolbar/dataToolbar.tsx b/src/routes/components/dataToolbar/dataToolbar.tsx
index cc5340281a..f0164bcaab 100644
--- a/src/routes/components/dataToolbar/dataToolbar.tsx
+++ b/src/routes/components/dataToolbar/dataToolbar.tsx
@@ -234,7 +234,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
     });
   }
 
-  private handleOnCategorySelect = (event, selection: CategoryOption) => {
+  private handleOnCategorySelect = (selection: CategoryOption) => {
     this.setState({
       categoryInput: '',
       currentCategory: selection.value,
@@ -278,7 +278,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
     this.setState({ categoryInput: val });
   };
 
-  private handleOnCategoryInput = (event, key) => {
+  private handleOnCategoryInput = (event: React.FormEvent<HTMLInputElement>, key) => {
     const { onFilterAdded } = this.props;
     const { categoryInput, currentCategory, currentExclude, filters: currentFilters } = this.state;
 
@@ -354,7 +354,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
     });
   };
 
-  private handleOnCostCategoryKeySelect = (event, selection) => {
+  private handleOnCostCategoryKeySelect = selection => {
     this.setState({
       currentCostCategoryKey: selection,
       isCostCategoryKeySelectExpanded: !this.state.isCostCategoryKeySelectExpanded,
@@ -514,7 +514,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
     });
   }
 
-  private handleOnExcludeSelect = (event, selection: ExcludeOption) => {
+  private handleOnExcludeSelect = (selection: ExcludeOption) => {
     this.setState({
       currentExclude: selection.value,
       isExcludeSelectOpen: !this.state.isExcludeSelectOpen,
@@ -605,7 +605,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
     });
   };
 
-  private handleOnTagKeySelect = (event, selection) => {
+  private handleOnTagKeySelect = selection => {
     this.setState({
       currentTagKey: selection,
       isTagKeySelectExpanded: !this.state.isTagKeySelectExpanded,
@@ -836,7 +836,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps, DataToolb
                 {datePicker}
               </ToolbarGroup>
             )}
-            <ToolbarItem alignment={{ default: 'alignRight' }} variant="pagination">
+            <ToolbarItem align={{ default: 'alignRight' }} variant="pagination">
               {pagination}
             </ToolbarItem>
           </ToolbarContent>
diff --git a/src/routes/components/dataToolbar/tagValue.tsx b/src/routes/components/dataToolbar/tagValue.tsx
index 484c6a1791..ba3e91f14f 100644
--- a/src/routes/components/dataToolbar/tagValue.tsx
+++ b/src/routes/components/dataToolbar/tagValue.tsx
@@ -1,13 +1,7 @@
-import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core';
-import {
-  Button,
-  ButtonVariant,
-  InputGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-  TextInput,
-} from '@patternfly/react-core';
+import type { ToolbarChipGroup } from '@patternfly/react-core';
+import { Button, ButtonVariant, InputGroup, InputGroupItem, TextInput } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import type { Query } from 'api/queries/query';
 import { getQuery, parseQuery } from 'api/queries/query';
@@ -140,8 +134,8 @@ class TagValueBase extends React.Component<TagValueProps, TagValueState> {
           isDisabled={isDisabled}
           variant={SelectVariant.checkbox}
           aria-label={intl.formatMessage(messages.filterByTagValueAriaLabel)}
-          onToggle={this.onTagValueToggle}
           onSelect={onTagValueSelect}
+          onToggle={(_evt, isExpanded) => this.onTagValueToggle(isExpanded)}
           selections={selections}
           isOpen={isTagValueExpanded}
           placeholderText={intl.formatMessage(messages.chooseValuePlaceholder)}
@@ -152,25 +146,29 @@ class TagValueBase extends React.Component<TagValueProps, TagValueState> {
     }
     return (
       <InputGroup>
-        <TextInput
-          isDisabled={isDisabled}
-          name="tag-key-value-input"
-          id="tag-key-value-input"
-          type="search"
-          aria-label={intl.formatMessage(messages.filterByTagValueAriaLabel)}
-          onChange={this.onTagValueChange}
-          value={tagKeyValue}
-          placeholder={intl.formatMessage(messages.filterByValuePlaceholder)}
-          onKeyDown={evt => onTagValueInput(evt)}
-        />
-        <Button
-          isDisabled={isDisabled}
-          variant={ButtonVariant.control}
-          aria-label={intl.formatMessage(messages.filterByTagValueButtonAriaLabel)}
-          onClick={evt => onTagValueInput(evt)}
-        >
-          <SearchIcon />
-        </Button>
+        <InputGroupItem isFill>
+          <TextInput
+            isDisabled={isDisabled}
+            name="tag-key-value-input"
+            id="tag-key-value-input"
+            type="search"
+            aria-label={intl.formatMessage(messages.filterByTagValueAriaLabel)}
+            onChange={(_evt, value) => this.onTagValueChange(value)}
+            value={tagKeyValue}
+            placeholder={intl.formatMessage(messages.filterByValuePlaceholder)}
+            onKeyDown={evt => onTagValueInput(evt)}
+          />
+        </InputGroupItem>
+        <InputGroupItem>
+          <Button
+            isDisabled={isDisabled}
+            variant={ButtonVariant.control}
+            aria-label={intl.formatMessage(messages.filterByTagValueButtonAriaLabel)}
+            onClick={evt => onTagValueInput(evt)}
+          >
+            <SearchIcon />
+          </Button>
+        </InputGroupItem>
       </InputGroup>
     );
   }
diff --git a/src/routes/components/dataToolbar/utils/actions.tsx b/src/routes/components/dataToolbar/utils/actions.tsx
index dae5af2d5e..40997a9c93 100644
--- a/src/routes/components/dataToolbar/utils/actions.tsx
+++ b/src/routes/components/dataToolbar/utils/actions.tsx
@@ -70,7 +70,7 @@ export const getPlatformCosts = ({
         label={intl.formatMessage(messages.sumPlatformCosts)}
         isChecked={isPlatformCostsChecked}
         isDisabled={isDisabled}
-        onChange={onPlatformCostsChanged}
+        onChange={(_evt, checked) => onPlatformCostsChanged(checked)}
       />
     </ToolbarItem>
   );
diff --git a/src/routes/components/dataToolbar/utils/bulkSelect.tsx b/src/routes/components/dataToolbar/utils/bulkSelect.tsx
index ba77de447d..e49c4e5275 100644
--- a/src/routes/components/dataToolbar/utils/bulkSelect.tsx
+++ b/src/routes/components/dataToolbar/utils/bulkSelect.tsx
@@ -1,11 +1,11 @@
+import { Tooltip } from '@patternfly/react-core';
 import {
   Dropdown,
   DropdownItem,
   DropdownPosition,
   DropdownToggle,
   DropdownToggleCheckbox,
-  Tooltip,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
 import React from 'react';
@@ -82,7 +82,7 @@ export const getBulkSelect = ({
               }}
             />,
           ]}
-          onToggle={onBulkSelectToggle}
+          onToggle={(_evt, isOpen) => onBulkSelectToggle(isOpen)}
         >
           {numSelected !== 0 && (
             <React.Fragment>{intl.formatMessage(messages.selected, { value: numSelected })}</React.Fragment>
diff --git a/src/routes/components/dataToolbar/utils/category.tsx b/src/routes/components/dataToolbar/utils/category.tsx
index 6380ceca46..93da2469c9 100644
--- a/src/routes/components/dataToolbar/utils/category.tsx
+++ b/src/routes/components/dataToolbar/utils/category.tsx
@@ -1,15 +1,15 @@
-import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core';
+import type { ToolbarChipGroup } from '@patternfly/react-core';
 import {
   Button,
   ButtonVariant,
   InputGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
+  InputGroupItem,
   TextInput,
   ToolbarFilter,
   ToolbarItem,
 } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import type { ResourceType } from 'api/resources/resource';
@@ -70,39 +70,41 @@ export const getCategoryInput = ({
       showToolbarItem={currentCategory === categoryOption.key}
     >
       <InputGroup>
-        {isResourceTypeValid(resourcePathsType, categoryOption.key as ResourceType) ? (
-          <ResourceTypeahead
-            ariaLabel={intl.formatMessage(messages.filterByInputAriaLabel, { value: ariaLabelKey })}
-            isDisabled={isDisabled && !_hasFilters}
-            onSelect={value => onCategoryInputSelect(value, categoryOption.key)}
-            placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey })}
-            resourcePathsType={resourcePathsType}
-            resourceType={categoryOption.key as ResourceType}
-          />
-        ) : (
-          <>
-            <TextInput
+        <InputGroupItem>
+          {isResourceTypeValid(resourcePathsType, categoryOption.key as ResourceType) ? (
+            <ResourceTypeahead
+              ariaLabel={intl.formatMessage(messages.filterByInputAriaLabel, { value: ariaLabelKey })}
               isDisabled={isDisabled && !_hasFilters}
-              name={`category-input-${categoryOption.key}`}
-              id={`category-input-${categoryOption.key}`}
-              type="search"
-              aria-label={intl.formatMessage(messages.filterByInputAriaLabel, { value: ariaLabelKey })}
-              onChange={onCategoryInputChange}
-              value={categoryInput}
+              onSelect={value => onCategoryInputSelect(value, categoryOption.key)}
               placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey })}
-              onKeyDown={evt => onCategoryInput(evt, categoryOption.key)}
-              size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length}
+              resourcePathsType={resourcePathsType}
+              resourceType={categoryOption.key as ResourceType}
             />
-            <Button
-              isDisabled={isDisabled && !_hasFilters}
-              variant={ButtonVariant.control}
-              aria-label={intl.formatMessage(messages.filterByButtonAriaLabel, { value: ariaLabelKey })}
-              onClick={evt => onCategoryInput(evt, categoryOption.key)}
-            >
-              <SearchIcon />
-            </Button>
-          </>
-        )}
+          ) : (
+            <>
+              <TextInput
+                isDisabled={isDisabled && !_hasFilters}
+                name={`category-input-${categoryOption.key}`}
+                id={`category-input-${categoryOption.key}`}
+                type="search"
+                aria-label={intl.formatMessage(messages.filterByInputAriaLabel, { value: ariaLabelKey })}
+                onChange={(_evt, value) => onCategoryInputChange(value)}
+                value={categoryInput}
+                placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey })}
+                onKeyDown={evt => onCategoryInput(evt, categoryOption.key)}
+                size={intl.formatMessage(messages.filterByPlaceholder, { value: placeholderKey }).length}
+              />
+              <Button
+                isDisabled={isDisabled && !_hasFilters}
+                variant={ButtonVariant.control}
+                aria-label={intl.formatMessage(messages.filterByButtonAriaLabel, { value: placeholderKey })}
+                onClick={evt => onCategoryInput(evt, categoryOption.key)}
+              >
+                <SearchIcon />
+              </Button>
+            </>
+          )}
+        </InputGroupItem>
       </InputGroup>
     </ToolbarFilter>
   );
@@ -205,7 +207,7 @@ export const getCategorySelect = ({
   currentCategory?: string;
   filters?: Filters;
   isDisabled?: boolean;
-  onCategorySelect?: (event, selection: CategoryOption) => void;
+  onCategorySelect?: (selection: CategoryOption) => void;
   onCategoryToggle?: (isOpen: boolean) => void;
   isCategorySelectOpen?: boolean;
 }) => {
@@ -222,8 +224,8 @@ export const getCategorySelect = ({
         id="category-select"
         isDisabled={isDisabled && !hasFilters(filters)}
         isOpen={isCategorySelectOpen}
-        onSelect={onCategorySelect}
-        onToggle={onCategoryToggle}
+        onSelect={(_evt, value) => onCategorySelect(value)}
+        onToggle={(_evt, isExpanded) => onCategoryToggle(isExpanded)}
         selections={selection}
         toggleIcon={<FilterIcon />}
         variant={SelectVariant.single}
diff --git a/src/routes/components/dataToolbar/utils/costCategory.tsx b/src/routes/components/dataToolbar/utils/costCategory.tsx
index 7bf27aea36..101e38cf18 100644
--- a/src/routes/components/dataToolbar/utils/costCategory.tsx
+++ b/src/routes/components/dataToolbar/utils/costCategory.tsx
@@ -1,5 +1,7 @@
 import type { ToolbarChipGroup } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import type { Resource } from 'api/resources/resource';
 import type { ResourcePathsType } from 'api/resources/resource';
 import { intl } from 'components/i18n';
@@ -32,7 +34,7 @@ export const getCostCategoryKeySelect = ({
   isCostCategoryKeySelectExpanded?: boolean;
   isDisabled?: boolean;
   onCostCategoryKeyClear?: () => void;
-  onCostCategoryKeySelect?: (event, selection) => void;
+  onCostCategoryKeySelect?: (selection: SelectOptionObject) => void;
   onCostCategoryKeyToggle?: (isOpen: boolean) => void;
   resourceReport?: Resource;
 }) => {
@@ -50,10 +52,10 @@ export const getCostCategoryKeySelect = ({
         isDisabled={isDisabled && !hasFilters(filters)}
         variant={SelectVariant.typeahead}
         typeAheadAriaLabel={intl.formatMessage(messages.filterByCostCategoryKeyAriaLabel)}
-        onClear={onCostCategoryKeyClear}
-        onToggle={onCostCategoryKeyToggle}
-        onSelect={onCostCategoryKeySelect}
         isOpen={isCostCategoryKeySelectExpanded}
+        onClear={onCostCategoryKeyClear}
+        onSelect={(_evt, value) => onCostCategoryKeySelect(value)}
+        onToggle={(_evt, isExpanded) => onCostCategoryKeyToggle(isExpanded)}
         placeholderText={intl.formatMessage(messages.chooseKeyPlaceholder)}
         selections={currentCostCategoryKey}
       >
diff --git a/src/routes/components/dataToolbar/utils/exclude.tsx b/src/routes/components/dataToolbar/utils/exclude.tsx
index 2af24681b4..f093e975e9 100644
--- a/src/routes/components/dataToolbar/utils/exclude.tsx
+++ b/src/routes/components/dataToolbar/utils/exclude.tsx
@@ -1,5 +1,6 @@
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarItem } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
 import React from 'react';
@@ -32,7 +33,7 @@ export const getExcludeSelect = ({
   filters?: Filters;
   isDisabled?: boolean;
   isExcludeSelectOpen?: boolean;
-  onExcludeSelect: (event: any, selection: ExcludeOption) => void;
+  onExcludeSelect: (selection: ExcludeOption) => void;
   onExcludeToggle: (isOpen: boolean) => void;
 }) => {
   const selectOptions = getExcludeSelectOptions();
@@ -44,8 +45,8 @@ export const getExcludeSelect = ({
         id="exclude-select"
         isDisabled={isDisabled && !hasFilters(filters)}
         isOpen={isExcludeSelectOpen}
-        onSelect={onExcludeSelect}
-        onToggle={onExcludeToggle}
+        onSelect={(_evt, value) => onExcludeSelect(value)}
+        onToggle={(_evt, isExpanded) => onExcludeToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
diff --git a/src/routes/components/dataToolbar/utils/orgUntits.tsx b/src/routes/components/dataToolbar/utils/orgUntits.tsx
index 04f412393b..d678f2de9c 100644
--- a/src/routes/components/dataToolbar/utils/orgUntits.tsx
+++ b/src/routes/components/dataToolbar/utils/orgUntits.tsx
@@ -1,5 +1,7 @@
-import type { SelectOptionObject, ToolbarChipGroup } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, ToolbarFilter } from '@patternfly/react-core';
+import type { ToolbarChipGroup } from '@patternfly/react-core';
+import { ToolbarFilter } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import type { Org } from 'api/orgs/org';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -32,7 +34,7 @@ export const getOrgUnitSelect = ({
   isDisabled?: boolean;
   isOrgUnitSelectExpanded?: boolean;
   onDelete?: (type: any, chip: any) => void;
-  onOrgUnitSelect?: (event, selection: string) => void;
+  onOrgUnitSelect?: (event: React.MouseEvent, selection: string) => void;
   onOrgUnitToggle?: (isOpen: boolean) => void;
   orgReport: Org;
 }) => {
@@ -78,8 +80,8 @@ export const getOrgUnitSelect = ({
         className="selectOverride"
         variant={SelectVariant.checkbox}
         aria-label={intl.formatMessage(messages.filterByOrgUnitAriaLabel)}
-        onToggle={onOrgUnitToggle}
         onSelect={onOrgUnitSelect}
+        onToggle={(_evt, isExpanded) => onOrgUnitToggle(isExpanded)}
         selections={selections}
         isOpen={isOrgUnitSelectExpanded}
         placeholderText={intl.formatMessage(messages.filterByOrgUnitPlaceholder)}
diff --git a/src/routes/components/dataToolbar/utils/tags.tsx b/src/routes/components/dataToolbar/utils/tags.tsx
index a49a1f0705..9432298e49 100644
--- a/src/routes/components/dataToolbar/utils/tags.tsx
+++ b/src/routes/components/dataToolbar/utils/tags.tsx
@@ -1,5 +1,7 @@
 import type { ToolbarChipGroup } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
+import { ToolbarFilter, ToolbarItem } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import type { Tag } from 'api/tags/tag';
 import type { TagPathsType } from 'api/tags/tag';
 import { intl } from 'components/i18n';
@@ -30,7 +32,7 @@ export const getTagKeySelect = ({
   isDisabled?: boolean;
   isTagKeySelectExpanded?: boolean;
   onTagKeyClear?: () => void;
-  onTagKeySelect?: (event, selection) => void;
+  onTagKeySelect?: (value: SelectOptionObject) => void;
   onTagKeyToggle?: (isOpen: boolean) => void;
   tagReport?: Tag;
 }) => {
@@ -49,8 +51,8 @@ export const getTagKeySelect = ({
         variant={SelectVariant.typeahead}
         typeAheadAriaLabel={intl.formatMessage(messages.filterByTagKeyAriaLabel)}
         onClear={onTagKeyClear}
-        onToggle={onTagKeyToggle}
-        onSelect={onTagKeySelect}
+        onSelect={(_evt, value) => onTagKeySelect(value)}
+        onToggle={(_evt, isExpanded) => onTagKeyToggle(isExpanded)}
         isOpen={isTagKeySelectExpanded}
         placeholderText={intl.formatMessage(messages.chooseKeyPlaceholder)}
         selections={currentTagKey}
diff --git a/src/routes/components/export/exportModal.tsx b/src/routes/components/export/exportModal.tsx
index 96c644e814..ad3afd5e1e 100644
--- a/src/routes/components/export/exportModal.tsx
+++ b/src/routes/components/export/exportModal.tsx
@@ -7,6 +7,8 @@ import {
   FormGroup,
   Grid,
   GridItem,
+  HelperText,
+  HelperTextItem,
   Modal,
   Radio,
   TextInput,
@@ -108,19 +110,19 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
     this.setState({ error });
   };
 
-  private handleOnMonthChange = (_, event) => {
+  private handleOnMonthChange = event => {
     this.setState({ timeScope: event.currentTarget.value });
   };
 
-  private handleOnNameChange = (_, event) => {
+  private handleOnNameChange = event => {
     this.setState({ name: event.currentTarget.value });
   };
 
-  private handleOnResolutionChange = (_, event) => {
+  private handleOnResolutionChange = event => {
     this.setState({ resolution: event.currentTarget.value });
   };
 
-  private handleOnTypeChange = (_, event) => {
+  private handleOnTypeChange = event => {
     this.setState({ formatType: event.currentTarget.value });
   };
 
@@ -227,13 +229,7 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
           <Grid hasGutter md={6}>
             {isExportsFeatureEnabled && (
               <GridItem span={12}>
-                <FormGroup
-                  fieldId="exportName"
-                  helperTextInvalid={helpText ? intl.formatMessage(helpText) : undefined}
-                  label={intl.formatMessage(messages.names, { count: 1 })}
-                  isRequired
-                  validated={validated}
-                >
+                <FormGroup fieldId="exportName" label={intl.formatMessage(messages.names, { count: 1 })} isRequired>
                   <TextInput
                     isRequired
                     type="text"
@@ -241,7 +237,13 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
                     name="exportName"
                     value={defaultName}
                     onChange={this.handleOnNameChange}
+                    validated={validated}
                   />
+                  {validated === 'error' && (
+                    <HelperText>
+                      <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                    </HelperText>
+                  )}
                 </FormGroup>
               </GridItem>
             )}
diff --git a/src/routes/components/groupBy/groupBy.tsx b/src/routes/components/groupBy/groupBy.tsx
index 60a85d8be4..4ceede1078 100644
--- a/src/routes/components/groupBy/groupBy.tsx
+++ b/src/routes/components/groupBy/groupBy.tsx
@@ -1,5 +1,6 @@
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, Title } from '@patternfly/react-core';
+import { Title } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import type { Org, OrgPathsType } from 'api/orgs/org';
 import { OrgType } from 'api/orgs/org';
 import type { Query } from 'api/queries/query';
@@ -198,8 +199,8 @@ class GroupByBase extends React.Component<GroupByProps, GroupByState> {
         id="groupBySelect"
         isDisabled={isDisabled}
         isOpen={isGroupByOpen}
-        onSelect={this.handleOnSelect}
-        onToggle={this.handleOnToggle}
+        onSelect={(_evt, value) => this.handleOnSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleOnToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -239,7 +240,7 @@ class GroupByBase extends React.Component<GroupByProps, GroupByState> {
       });
   };
 
-  private handleOnSelect = (event, selection: GroupByOption) => {
+  private handleOnSelect = (selection: GroupByOption) => {
     const { onSelected } = this.props;
 
     if (selection.value === orgUnitIdKey || selection.value === awsCategoryKey || selection.value === tagKey) {
diff --git a/src/routes/components/groupBy/groupByOrg.tsx b/src/routes/components/groupBy/groupByOrg.tsx
index 65bc374319..4511f3b715 100644
--- a/src/routes/components/groupBy/groupByOrg.tsx
+++ b/src/routes/components/groupBy/groupByOrg.tsx
@@ -1,5 +1,5 @@
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import type { Org } from 'api/orgs/org';
 import type { Query } from 'api/queries/query';
 import { parseQuery } from 'api/queries/query';
@@ -120,7 +120,7 @@ class GroupByOrgBase extends React.Component<GroupByOrgProps, GroupByOrgState> {
     });
   };
 
-  private handleOnSelect = (event, selection: GroupByOrgOption) => {
+  private handleOnSelect = (selection: GroupByOrgOption) => {
     const { onSelected } = this.props;
 
     this.setState({
@@ -149,8 +149,8 @@ class GroupByOrgBase extends React.Component<GroupByOrgProps, GroupByOrgState> {
           aria-label={intl.formatMessage(messages.filterByOrgUnitAriaLabel)}
           isDisabled={isDisabled}
           onClear={this.handleOnClear}
-          onToggle={this.handleOnToggle}
-          onSelect={this.handleOnSelect}
+          onSelect={(_evt, value) => this.handleOnSelect(value)}
+          onToggle={(_evt, isExpanded) => this.handleOnToggle(isExpanded)}
           isOpen={isGroupByOpen}
           placeholderText={intl.formatMessage(messages.filterByOrgUnitPlaceholder)}
           selections={selection}
diff --git a/src/routes/components/groupBy/groupBySelect.tsx b/src/routes/components/groupBy/groupBySelect.tsx
index 8e3d5657b7..50e4720db6 100644
--- a/src/routes/components/groupBy/groupBySelect.tsx
+++ b/src/routes/components/groupBy/groupBySelect.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import type { Query } from 'api/queries/query';
 import { parseQuery } from 'api/queries/query';
 import type { Resource } from 'api/resources/resource';
@@ -120,16 +120,16 @@ class GroupBySelectBase extends React.Component<GroupBySelectProps, GroupBySelec
     });
   };
 
-  private handleOnSelected = (event, selection) => {
+  private handleOnSelected = value => {
     const { onSelected } = this.props;
     const { prefix } = this.state;
 
     this.setState({
-      currentItem: selection,
+      currentItem: value,
       isGroupByOpen: false,
     });
     if (onSelected) {
-      onSelected(`${prefix}${selection}`);
+      onSelected(`${prefix}${value}`);
     }
   };
 
@@ -149,8 +149,8 @@ class GroupBySelectBase extends React.Component<GroupBySelectProps, GroupBySelec
           )}
           isDisabled={isDisabled}
           onClear={this.handleOnClear}
-          onToggle={this.handleOnToggle}
-          onSelect={this.handleOnSelected}
+          onSelect={(_evt, value) => this.handleOnSelected(value)}
+          onToggle={(_evt, isExpanded) => this.handleOnToggle(isExpanded)}
           isOpen={isGroupByOpen}
           placeholderText={intl.formatMessage(messages.chooseKeyPlaceholder)}
           selections={currentItem}
diff --git a/src/routes/components/optimizations/optimizationsTable.tsx b/src/routes/components/optimizations/optimizationsTable.tsx
index 613126eb26..d73d03a3b3 100644
--- a/src/routes/components/optimizations/optimizationsTable.tsx
+++ b/src/routes/components/optimizations/optimizationsTable.tsx
@@ -174,7 +174,7 @@ class OptimizationsTableBase extends React.Component<OptimizationsTableProps, Op
     );
   };
 
-  private handleOnRowClick = (event: React.KeyboardEvent | React.MouseEvent, rowIndex: number) => {
+  private handleOnRowClick = (rowIndex: number) => {
     const { closeOptimizationsDrawer, isOpen, openOptimizationsDrawer } = this.props;
     const { currentRow, rows } = this.state;
 
diff --git a/src/routes/components/page/noData/noDataState.tsx b/src/routes/components/page/noData/noDataState.tsx
index 10560d6257..6912fff878 100644
--- a/src/routes/components/page/noData/noDataState.tsx
+++ b/src/routes/components/page/noData/noDataState.tsx
@@ -2,10 +2,10 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import messages from 'locales/messages';
@@ -24,17 +24,20 @@ class NoDataStateBase extends React.Component<NoDataStateProps, any> {
     const { intl, showReload = true } = this.props;
 
     return (
-      <EmptyState variant={EmptyStateVariant.large} className="pf-m-redhat-font">
-        <EmptyStateIcon icon={PlusCircleIcon} />
-        <Title headingLevel="h5" size={TitleSizes.lg}>
-          {intl.formatMessage(messages.noDataStateTitle)}
-        </Title>
+      <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(messages.noDataStateTitle)}</>}
+          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+          headingLevel="h5"
+        />
         <EmptyStateBody>{intl.formatMessage(messages.noDataStateDesc)}</EmptyStateBody>
-        {showReload && (
-          <Button variant="primary" onClick={() => window.location.reload()}>
-            {intl.formatMessage(messages.noDataStateRefresh)}
-          </Button>
-        )}
+        <EmptyStateFooter>
+          {showReload && (
+            <Button variant="primary" onClick={() => window.location.reload()}>
+              {intl.formatMessage(messages.noDataStateRefresh)}
+            </Button>
+          )}
+        </EmptyStateFooter>
       </EmptyState>
     );
   }
diff --git a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx
index 2cf0d3df80..771c8275f9 100644
--- a/src/routes/components/page/noOptimizations/noOptimizationsState.tsx
+++ b/src/routes/components/page/noOptimizations/noOptimizationsState.tsx
@@ -1,10 +1,9 @@
 import {
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import messages from 'locales/messages';
 import React from 'react';
@@ -23,11 +22,12 @@ class NoOptimizationsStateBase extends React.Component<NoOptimizationsStateProps
     const { intl } = this.props;
 
     return (
-      <EmptyState variant={EmptyStateVariant.large} className="pf-m-redhat-font">
-        <EmptyStateIcon icon={OptimizationIcon as any} />
-        <Title headingLevel="h1" size={TitleSizes.lg}>
-          {intl.formatMessage(messages.noOptimizationsTitle)}
-        </Title>
+      <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(messages.noOptimizationsTitle)}</>}
+          icon={<EmptyStateIcon icon={OptimizationIcon as any} />}
+          headingLevel="h1"
+        />
         <EmptyStateBody>{intl.formatMessage(messages.noOptimizationsDesc)}</EmptyStateBody>
       </EmptyState>
     );
diff --git a/src/routes/components/page/noProviders/noProvidersState.tsx b/src/routes/components/page/noProviders/noProvidersState.tsx
index 31faf92eb5..175364ee1f 100644
--- a/src/routes/components/page/noProviders/noProvidersState.tsx
+++ b/src/routes/components/page/noProviders/noProvidersState.tsx
@@ -3,10 +3,10 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
@@ -82,19 +82,22 @@ class NoProvidersStateBase extends React.Component<NoProvidersStateProps, any> {
         icon = CostIcon;
     }
     return (
-      <EmptyState variant={EmptyStateVariant.large} className="pf-m-redhat-font">
-        <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
-        <Title headingLevel="h1" size={TitleSizes.lg}>
-          {intl.formatMessage(titleKey)}
-        </Title>
+      <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(titleKey)}</>}
+          icon={<EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />}
+          headingLevel="h1"
+        />
         <EmptyStateBody>{intl.formatMessage(descKey)}</EmptyStateBody>
-        {docUrlKey && textKey ? (
-          <div style={styles.viewSources}>{this.getDocLink(textKey, docUrlKey)}</div>
-        ) : (
-          <Button variant="primary" component="a" href={this.getRouteToSources()}>
-            {intl.formatMessage(messages.noProvidersStateGetStarted)}
-          </Button>
-        )}
+        <EmptyStateFooter>
+          {docUrlKey && textKey ? (
+            <div style={styles.viewSources}>{this.getDocLink(textKey, docUrlKey)}</div>
+          ) : (
+            <Button variant="primary" component="a" href={this.getRouteToSources()}>
+              {intl.formatMessage(messages.noProvidersStateGetStarted)}
+            </Button>
+          )}
+        </EmptyStateFooter>
       </EmptyState>
     );
   }
diff --git a/src/routes/components/perspective/perspectiveSelect.tsx b/src/routes/components/perspective/perspectiveSelect.tsx
index a036b356a0..cb7c069e63 100644
--- a/src/routes/components/perspective/perspectiveSelect.tsx
+++ b/src/routes/components/perspective/perspectiveSelect.tsx
@@ -1,6 +1,7 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, Title } from '@patternfly/react-core';
+import { Title } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -73,8 +74,8 @@ class PerspectiveSelectBase extends React.Component<PerspectiveSelectProps, Pers
         id="perspectiveSelect"
         isDisabled={isDisabled}
         isOpen={isSelectOpen}
-        onSelect={this.handleSelect}
-        onToggle={this.handleToggle}
+        onSelect={(_evt, value) => this.handleSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -85,7 +86,7 @@ class PerspectiveSelectBase extends React.Component<PerspectiveSelectProps, Pers
     );
   };
 
-  private handleSelect = (event, selection: PerspectiveOption) => {
+  private handleSelect = (selection: PerspectiveOption) => {
     const { onSelected } = this.props;
 
     if (onSelected) {
diff --git a/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap b/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap
index ff9e4a88d0..71e2bd5e47 100644
--- a/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap
+++ b/src/routes/components/reports/reportSummary/__snapshots__/reportSummaryItems.test.tsx.snap
@@ -3,35 +3,35 @@
 exports[`contains skeleton readers if in progress 1`] = `
 <div>
   <div
-    class="pf-c-skeleton"
-    style="--pf-c-skeleton--Width: 66%;"
+    class="pf-v5-c-skeleton"
+    style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
   <div
-    class="pf-c-skeleton skeleton"
-    style="--pf-c-skeleton--Width: 66%;"
+    class="pf-v5-c-skeleton skeleton"
+    style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
   <div
-    class="pf-c-skeleton skeleton"
-    style="--pf-c-skeleton--Width: 66%;"
+    class="pf-v5-c-skeleton skeleton"
+    style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
   <div
-    class="pf-c-skeleton skeleton"
-    style="--pf-c-skeleton--Width: 66%;"
+    class="pf-v5-c-skeleton skeleton"
+    style="--pf-v5-c-skeleton--Width: 66%;"
   >
     <span
-      class="pf-u-screen-reader"
+      class="pf-v5-u-screen-reader"
     />
   </div>
 </div>
diff --git a/src/routes/components/reports/reportSummary/reportSummary.scss b/src/routes/components/reports/reportSummary/reportSummary.scss
index 52822992fd..e556562823 100644
--- a/src/routes/components/reports/reportSummary/reportSummary.scss
+++ b/src/routes/components/reports/reportSummary/reportSummary.scss
@@ -2,12 +2,12 @@
 
 .chartSkeleton {
   height: 125px;
-  margin-bottom: var(--pf-global--spacer--md);
-  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
 }
 
 .legendSkeleton {
-  margin-top: var(--pf-global--spacer--md),
+  margin-top: var(--pf-v5-global--spacer--md),
 }
 
 .reportSummary {
@@ -16,7 +16,7 @@
 
 .subtitle {
   display: inline-block;
-  font-size: var(--pf-global--FontSize--xs);
-  color: var(--pf-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--xs);
+  color: var(--pf-v5-global--Color--200);
   margin-bottom: 0;
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryAlt.scss b/src/routes/components/reports/reportSummary/reportSummaryAlt.scss
index 6d6ca62d8a..c73fe7209f 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryAlt.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryAlt.scss
@@ -2,18 +2,18 @@
 
 .chartSkeleton {
   height: 175px;
-  margin-bottom: var(--pf-global--spacer--md);
-  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
 }
 
 .cost {
   flex-grow: 1;
   min-height: 470px;
-  margin-tight: var(--pf-global--spacer--md);
+  margin-tight: var(--pf-v5-global--spacer--md);
 }
 
 .legendSkeleton {
-  margin-top: var(--pf-global--spacer--md),
+  margin-top: var(--pf-v5-global--spacer--md),
 }
 
 .reportSummary {
@@ -22,11 +22,11 @@
 
 .subtitle {
   display: inline-block;
-  font-size: var(--pf-global--FontSize--xs);
-  color: var(--pf-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--xs);
+  color: var(--pf-v5-global--Color--200);
   margin-bottom: 0;
 }
 
 .tops {
-  margin-top: var(--pf-global--spacer--lg),
+  margin-top: var(--pf-v5-global--spacer--lg),
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryCost.scss b/src/routes/components/reports/reportSummary/reportSummaryCost.scss
index c9f1e03a97..22b63d7963 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryCost.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryCost.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .chart {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss b/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss
index c9f1e03a97..22b63d7963 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryDailyCost.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .chart {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss b/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss
index 0a23f9d307..47363e31f4 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryDailyTrend.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .chart {
-  margin-nottom: var(--pf-global--spacer--sm);
+  margin-nottom: var(--pf-v5-global--spacer--sm);
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryDetails.scss b/src/routes/components/reports/reportSummary/reportSummaryDetails.scss
index f7bac986d2..c569b949f7 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryDetails.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryDetails.scss
@@ -1,40 +1,40 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .reportSummaryDetails {
-    margin-bottom: var(--pf-global--spacer--md);
+    margin-bottom: var(--pf-v5-global--spacer--md);
     display: flex;
     align-Items: flex-end;
 }
 
 .text {
-  padding-bottom: var(--pf-global--spacer--sm);
-  line-height: var(--pf-global--LineHeight--sm);
-  font-size: var(--pf-global--FontSize--xs);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
+  line-height: var(--pf-v5-global--LineHeight--sm);
+  font-size: var(--pf-v5-global--FontSize--xs);
 }
 
 .units {
-  padding-left: var(--pf-global--spacer--xs);
-  padding-bottom: var(--pf-global--spacer--sm);
-  line-height: var(--pf-global--LineHeight--sm);
-  font-size: var(--pf-global--FontSize--xs);
+  padding-left: var(--pf-v5-global--spacer--xs);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
+  line-height: var(--pf-v5-global--LineHeight--sm);
+  font-size: var(--pf-v5-global--FontSize--xs);
   white-space: nowrap;
 }
 
 .value {
-  color: var(--pf-global--Color--100);
-  margin-right: var(--pf-global--spacer--sm);
-  font-size: var(--pf-global--FontSize--2xl);
+  color: var(--pf-v5-global--Color--100);
+  margin-right: var(--pf-v5-global--spacer--sm);
+  font-size: var(--pf-v5-global--FontSize--2xl);
 }
 
 .valueAlt {
-  color: var(--pf-global--Color--100);
-  margin-right: var(--pf-global--spacer--sm);
-  font-size: var(--pf-global--FontSize--4xl);
+  color: var(--pf-v5-global--Color--100);
+  margin-right: var(--pf-v5-global--spacer--sm);
+  font-size: var(--pf-v5-global--FontSize--4xl);
 }
 
 .valueContainer {
   display: inline-block;
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
   width: 50%;
   word-Wrap: break-word;
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryItem.scss b/src/routes/components/reports/reportSummary/reportSummaryItem.scss
index 418c0e6c9a..7bcc047b70 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryItem.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryItem.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .reportSummaryItem:not(:last-child) {
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryItems.scss b/src/routes/components/reports/reportSummary/reportSummaryItems.scss
index 63a966fc8b..b8f585f231 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryItems.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryItems.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .skeleton {
-  margin-top: var(--pf-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryTrend.scss b/src/routes/components/reports/reportSummary/reportSummaryTrend.scss
index 0a23f9d307..47363e31f4 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryTrend.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryTrend.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .chart {
-  margin-nottom: var(--pf-global--spacer--sm);
+  margin-nottom: var(--pf-v5-global--spacer--sm);
 }
diff --git a/src/routes/components/reports/reportSummary/reportSummaryUsage.scss b/src/routes/components/reports/reportSummary/reportSummaryUsage.scss
index c9f1e03a97..22b63d7963 100644
--- a/src/routes/components/reports/reportSummary/reportSummaryUsage.scss
+++ b/src/routes/components/reports/reportSummary/reportSummaryUsage.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .chart {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
diff --git a/src/routes/components/resourceTypeahead/resourceInput.tsx b/src/routes/components/resourceTypeahead/resourceInput.tsx
index 54db5163bd..f6220ee970 100644
--- a/src/routes/components/resourceTypeahead/resourceInput.tsx
+++ b/src/routes/components/resourceTypeahead/resourceInput.tsx
@@ -124,17 +124,13 @@ class ResourceInputBase extends React.Component<ResourceInputProps, ResourceInpu
   };
 
   private getMenu = () => {
-    const { search } = this.props;
-
     return (
       <div ref={this.menuRef}>
-        {search && search.length && (
-          <Menu onSelect={this.handleOnMenuSelect} onKeyDown={this.handleOnMenuKeyDown}>
-            <MenuContent>
-              <MenuList>{this.getMenuItems()}</MenuList>
-            </MenuContent>
-          </Menu>
-        )}
+        <Menu onSelect={this.handleOnMenuSelect} onKeyDown={this.handleOnMenuKeyDown}>
+          <MenuContent>
+            <MenuList>{this.getMenuItems()}</MenuList>
+          </MenuContent>
+        </Menu>
       </div>
     );
   };
diff --git a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx
index 6da659ebab..c2593d564f 100644
--- a/src/routes/components/state/emptyFilterState/emptyFilterState.tsx
+++ b/src/routes/components/state/emptyFilterState/emptyFilterState.tsx
@@ -1,5 +1,5 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import { Bullseye } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import type { Query } from 'api/queries/query';
@@ -115,9 +115,7 @@ const EmptyFilterStateBase: React.FC<EmptyFilterStateProps> = ({
     >
       <EmptyState>
         {getItem()}
-        <Title headingLevel="h2" size={TitleSizes.lg}>
-          {intl.formatMessage(title)}
-        </Title>
+        <EmptyStateHeader titleText={<>{intl.formatMessage(title)}</>} headingLevel="h2" />
         <EmptyStateBody>{intl.formatMessage(subTitle)}</EmptyStateBody>
       </EmptyState>
     </div>
diff --git a/src/routes/components/state/emptyValueState/emptyValueState.scss b/src/routes/components/state/emptyValueState/emptyValueState.scss
index 11de799fab..ada2615611 100644
--- a/src/routes/components/state/emptyValueState/emptyValueState.scss
+++ b/src/routes/components/state/emptyValueState/emptyValueState.scss
@@ -1,5 +1,5 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .emptyValueContainer {
-  font-size: var(--pf-global--FontSize--sm);
+  font-size: var(--pf-v5-global--FontSize--sm);
 }
diff --git a/src/routes/components/state/errorState/errorState.tsx b/src/routes/components/state/errorState/errorState.tsx
index 579bb821eb..9daa76d01a 100644
--- a/src/routes/components/state/errorState/errorState.tsx
+++ b/src/routes/components/state/errorState/errorState.tsx
@@ -1,10 +1,9 @@
 import {
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon';
 import { LockIcon } from '@patternfly/react-icons/dist/esm/icons/lock-icon';
@@ -30,11 +29,8 @@ const ErrorStateBase: React.FC<ErrorStateProps> = ({ error, icon = ErrorCircleOI
   }
 
   return (
-    <EmptyState variant={EmptyStateVariant.large} className="pf-m-redhat-font">
-      <EmptyStateIcon icon={icon} />
-      <Title headingLevel="h5" size={TitleSizes.lg}>
-        {title}
-      </Title>
+    <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
+      <EmptyStateHeader titleText={<>{title}</>} icon={<EmptyStateIcon icon={icon} />} headingLevel="h5" />
       <EmptyStateBody>{subTitle}</EmptyStateBody>
     </EmptyState>
   );
diff --git a/src/routes/components/state/loadingState/loadingState.tsx b/src/routes/components/state/loadingState/loadingState.tsx
index 6e2eb0ca3b..eed2a95d8f 100644
--- a/src/routes/components/state/loadingState/loadingState.tsx
+++ b/src/routes/components/state/loadingState/loadingState.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, EmptyStateBody, EmptyStateVariant, Spinner, Title, TitleSizes } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateVariant, Spinner } from '@patternfly/react-core';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
 import React from 'react';
@@ -19,11 +19,9 @@ const LoadingStateBase: React.FC<LoadingStateProps> = ({
   heading = intl.formatMessage(messages.loadingStateTitle),
 }) => {
   return (
-    <EmptyState variant={EmptyStateVariant.large} className="pf-m-redhat-font">
+    <EmptyState variant={EmptyStateVariant.lg} className="pf-m-redhat-font">
       <Spinner size="lg" />
-      <Title headingLevel="h5" size={TitleSizes.lg}>
-        {heading}
-      </Title>
+      <EmptyStateHeader titleText={<>{heading}</>} headingLevel="h5" />
       <EmptyStateBody>{body}</EmptyStateBody>
     </EmptyState>
   );
diff --git a/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap b/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap
index 0251cde18b..12b6b07f3c 100644
--- a/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap
+++ b/src/routes/costModels/components/__snapshots__/rateTable.test.tsx.snap
@@ -3,22 +3,26 @@
 exports[`rate-table sort by metric & measurement 1`] = `
 [
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"Node"}
   </td>,
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"}
   </td>,
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"}
   </td>,
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"}
   </td>,
diff --git a/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap b/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap
index d0379a6883..10ecfed78b 100644
--- a/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap
+++ b/src/routes/costModels/components/__snapshots__/warningIcon.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`warning icon 1`] = `
 <svg
   aria-hidden="true"
-  fill="orange"
+  class="pf-v5-svg"
+  color="orange"
+  fill="currentColor"
   height="1em"
   role="img"
-  style="vertical-align: -0.125em;"
   viewBox="0 0 576 512"
   width="1em"
 >
diff --git a/src/routes/costModels/components/errorState.tsx b/src/routes/costModels/components/errorState.tsx
index def15a71b6..ff767b9508 100644
--- a/src/routes/costModels/components/errorState.tsx
+++ b/src/routes/costModels/components/errorState.tsx
@@ -3,6 +3,8 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
   Stack,
@@ -31,16 +33,17 @@ type ErrorStateProps = ErrorEmptyProps & OwnProps;
 export const ErrorState: React.FC<ErrorStateProps> = ({ variant, actionButton, title, description }) => {
   return (
     <EmptyState variant={variant}>
-      <EmptyStateIcon icon={ExclamationCircleIcon} color={global_DangerColor_100.value} />
-      <Title headingLevel="h4" size={TitleSizes.lg}>
-        {title}
-      </Title>
+      <EmptyStateHeader
+        titleText={<>{title}</>}
+        icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={global_DangerColor_100.value} />}
+        headingLevel="h4"
+      />
       <EmptyStateBody>
         <Stack>
           <StackItem>{description}</StackItem>
         </Stack>
       </EmptyStateBody>
-      {actionButton}
+      <EmptyStateFooter>{actionButton}</EmptyStateFooter>
     </EmptyState>
   );
 };
@@ -68,7 +71,7 @@ export const SourceStepErrorStateBase: React.FC<SourcesErrorStateProps> = ({ int
       </StackItem>
       <StackItem>
         <ErrorState
-          variant={EmptyStateVariant.large}
+          variant={EmptyStateVariant.lg}
           actionButton={actionButton}
           description={description}
           title={title}
@@ -108,7 +111,7 @@ export const SourcesModalErrorStateBase: React.FC<SourcesModalErrorProps> = ({ i
   });
   const actionButton = <Button onClick={onRefresh}>{intl.formatMessage(messages.costModelsRefreshDialog)}</Button>;
   return (
-    <ErrorState variant={EmptyStateVariant.large} actionButton={actionButton} description={description} title={title} />
+    <ErrorState variant={EmptyStateVariant.lg} actionButton={actionButton} description={description} title={title} />
   );
 };
 
diff --git a/src/routes/costModels/components/inputs/rateInput.tsx b/src/routes/costModels/components/inputs/rateInput.tsx
index b64e695a91..a7d378fff9 100644
--- a/src/routes/costModels/components/inputs/rateInput.tsx
+++ b/src/routes/costModels/components/inputs/rateInput.tsx
@@ -1,6 +1,14 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
 import type { FormGroupProps, TextInputProps } from '@patternfly/react-core';
-import { FormGroup, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+import {
+  FormGroup,
+  HelperText,
+  HelperTextItem,
+  InputGroup,
+  InputGroupItem,
+  InputGroupText,
+  TextInput,
+} from '@patternfly/react-core';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
 import React from 'react';
@@ -44,28 +52,31 @@ const RateInputBase: React.FC<RateInputBaseProps> = ({
       style={style}
       fieldId={fieldId}
       label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
-      helperTextInvalid={
-        helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
-      }
-      validated={validated}
     >
       <InputGroup>
         <InputGroupText style={styles.currency}>
           {intl.formatMessage(messages.currencyUnits, { units: currencyUnits })}
         </InputGroupText>
-        <TextInput
-          onBlur={onBlur}
-          isRequired
-          type="text"
-          aria-label={intl.formatMessage(messages.costModelsWizardRateAriaLabel)}
-          id={fieldId}
-          placeholder={formatCurrencyRaw(0, currencyUnits, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-          value={value}
-          onChange={onChange}
-          onKeyDown={handleOnKeyDown}
-          validated={validated}
-        />
+        <InputGroupItem isFill>
+          <TextInput
+            onBlur={onBlur}
+            isRequired
+            type="text"
+            aria-label={intl.formatMessage(messages.costModelsWizardRateAriaLabel)}
+            id={fieldId}
+            placeholder={formatCurrencyRaw(0, currencyUnits, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+            value={value}
+            onChange={onChange}
+            onKeyDown={handleOnKeyDown}
+            validated={validated}
+          />
+        </InputGroupItem>
       </InputGroup>
+      {validated === 'error' && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/src/routes/costModels/components/inputs/selector.tsx b/src/routes/costModels/components/inputs/selector.tsx
index 7129c8a601..c2ab87da3d 100644
--- a/src/routes/costModels/components/inputs/selector.tsx
+++ b/src/routes/costModels/components/inputs/selector.tsx
@@ -1,6 +1,8 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { FormGroupProps, FormSelectProps, SelectOptionObject } from '@patternfly/react-core';
-import { FormGroup, Select, SelectDirection, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { FormGroupProps, FormSelectProps } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectDirection, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { intl as defaultIntl } from 'components/i18n';
 import React, { useEffect, useState } from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -84,10 +86,6 @@ const SelectorBase: React.FC<SelectorProps> = ({
       style={style}
       fieldId={id}
       label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
-      helperTextInvalid={
-        helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
-      }
-      validated={isInvalid ? 'error' : 'default'}
     >
       <Select
         id={id}
@@ -100,18 +98,24 @@ const SelectorBase: React.FC<SelectorProps> = ({
         direction={direction}
         menuAppendTo={appendMenuTo}
         isOpen={isOpen}
-        onToggle={() => setIsOpen(!isOpen)}
-        onSelect={(e, sel: SelectorOption) => {
+        onSelect={(_evt, sel: SelectorOption) => {
           setSelection(sel);
-          onChange(sel.value, null);
+          onChange(null, sel.value);
           setIsOpen(false);
         }}
+        onToggle={() => setIsOpen(!isOpen)}
         selections={selection}
+        validated={isInvalid ? 'error' : 'default'}
       >
         {getSelectorOptions().map(opt => (
           <SelectOption key={`${opt.value}`} value={opt} description={opt.description} />
         ))}
       </Select>
+      {isInvalid && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/src/routes/costModels/components/inputs/simpleInput.tsx b/src/routes/costModels/components/inputs/simpleInput.tsx
index 172e848225..b7d302c48a 100644
--- a/src/routes/costModels/components/inputs/simpleInput.tsx
+++ b/src/routes/costModels/components/inputs/simpleInput.tsx
@@ -1,6 +1,6 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { FormGroupProps, TextInputProps } from '@patternfly/react-core';
-import { FormGroup, TextInput } from '@patternfly/react-core';
+import type { TextInputProps } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import { intl as defaultIntl } from 'components/i18n';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -10,13 +10,11 @@ interface SimpleInputOwnProps {
   helperTextInvalid?: MessageDescriptor | string;
   label?: MessageDescriptor | string;
 }
-
-type SimpleInputFormGroupProps = Pick<FormGroupProps, 'onBlur' | 'isRequired' | 'placeholder' | 'style' | 'validated'>;
-type SimpleInputTextInputProps = Pick<TextInputProps, 'id' | 'onChange' | 'value'>;
-type SimpleInputProps = SimpleInputOwnProps &
-  SimpleInputTextInputProps &
-  SimpleInputFormGroupProps &
-  WrappedComponentProps;
+type SimpleInputTextInputProps = Pick<
+  TextInputProps,
+  'onChange' | 'onBlur' | 'id' | 'isRequired' | 'placeholder' | 'style' | 'validated' | 'value'
+>;
+type SimpleInputProps = SimpleInputOwnProps & SimpleInputTextInputProps & WrappedComponentProps;
 
 const SimpleInputBase: React.FC<SimpleInputProps> = ({
   id,
@@ -37,10 +35,6 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
       style={style}
       fieldId={id}
       label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
-      helperTextInvalid={
-        helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
-      }
-      validated={validated}
     >
       <TextInput
         validated={validated}
@@ -51,6 +45,11 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
         isRequired={isRequired}
         placeholder={placeholder}
       />
+      {validated === 'error' && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/src/routes/costModels/components/paginationToolbarTemplate.tsx b/src/routes/costModels/components/paginationToolbarTemplate.tsx
index 4950540639..6da43e20ca 100644
--- a/src/routes/costModels/components/paginationToolbarTemplate.tsx
+++ b/src/routes/costModels/components/paginationToolbarTemplate.tsx
@@ -1,23 +1,23 @@
-import type { PaginationProps } from '@patternfly/react-core';
+import type { PaginationProps, PaginationTitles } from '@patternfly/react-core';
 import { Pagination, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
-import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 
 interface PaginationToolbarTemplateProps extends PaginationProps, WrappedComponentProps {
   id?: string;
+  titles?: PaginationTitles;
 }
 
 export const PaginationToolbarTemplateBase: React.FC<PaginationToolbarTemplateProps> = ({
   id,
-  intl,
   itemCount,
   perPage,
   page,
   variant,
   onPerPageSelect,
   onSetPage,
+  titles,
 }) => {
   return (
     <Toolbar id={id}>
@@ -30,12 +30,7 @@ export const PaginationToolbarTemplateBase: React.FC<PaginationToolbarTemplatePr
             page={page}
             onSetPage={onSetPage}
             onPerPageSelect={onPerPageSelect}
-            titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
-                title: intl.formatMessage(messages.createCostModelTitle),
-                placement: 'bottom',
-              }),
-            }}
+            titles={titles}
           />
         </ToolbarItem>
       </ToolbarContent>
diff --git a/src/routes/costModels/components/priceListToolbar.tsx b/src/routes/costModels/components/priceListToolbar.tsx
index 0a56d92cdf..fd156fbf61 100644
--- a/src/routes/costModels/components/priceListToolbar.tsx
+++ b/src/routes/costModels/components/priceListToolbar.tsx
@@ -58,7 +58,7 @@ export const PriceListToolbar: React.FC<PriceListToolbarProps> = ({
         <ToolbarItem>{button}</ToolbarItem>
         <ToolbarItem variant={ToolbarItemVariant.pagination}>{pagination}</ToolbarItem>
       </ToolbarContent>
-      <hr className="pf-c-divider" />
+      <hr className="pf-v5-c-divider" />
     </Toolbar>
   );
 };
diff --git a/src/routes/costModels/components/rateForm/rateForm.tsx b/src/routes/costModels/components/rateForm/rateForm.tsx
index 47220e2e78..f8fd9ad2f6 100644
--- a/src/routes/costModels/components/rateForm/rateForm.tsx
+++ b/src/routes/costModels/components/rateForm/rateForm.tsx
@@ -103,7 +103,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
         value={description}
         validated={errors.description ? 'error' : 'default'}
         helperTextInvalid={errors.description}
-        onChange={setDescription}
+        onChange={(_evt, value) => setDescription(value)}
       />
       <Grid hasGutter>
         <GridItem span={6}>
@@ -115,7 +115,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
             label={intl.formatMessage(messages.metric)}
             placeholderText={intl.formatMessage(messages.select)}
             value={metric}
-            onChange={setMetric}
+            onChange={(_evt, value) => setMetric(value)}
             options={[
               ...metricOptions.map(opt => {
                 return {
@@ -142,7 +142,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
                   ? measurement
                   : getMeasurementLabel(measurement, metricsHash[metric][measurement].label_measurement_unit)
               }
-              onChange={setMeasurement}
+              onChange={(_evt, value) => setMeasurement(value)}
               placeholderText="Select..."
               options={[
                 ...measurementOptions.map(opt => {
@@ -197,7 +197,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
               currencyUnits={currencyUnits}
               fieldId="regular-rate"
               helperTextInvalid={errors.tieredRates}
-              onChange={setRegular}
+              onChange={(_evt, value) => setRegular(value)}
               style={style}
               validated={errors.tieredRates && regularDirty ? 'error' : 'default'}
               value={inputValue}
@@ -208,7 +208,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
                 isRequired
                 style={style}
                 value={tagKey}
-                onChange={setTagKey}
+                onChange={(_evt, value) => setTagKey(value)}
                 id="tag-key"
                 label={messages.costModelsFilterTagKey}
                 placeholder={intl.formatMessage(messages.costModelsEnterTagKey)}
diff --git a/src/routes/costModels/components/rateForm/taggingRatesForm.tsx b/src/routes/costModels/components/rateForm/taggingRatesForm.tsx
index 83fe854870..bf8142ae89 100644
--- a/src/routes/costModels/components/rateForm/taggingRatesForm.tsx
+++ b/src/routes/costModels/components/rateForm/taggingRatesForm.tsx
@@ -53,7 +53,7 @@ const TaggingRatesFormBase: React.FC<TaggingRatesFormProps> = ({
                 label={messages.costModelsTagRateTableValue}
                 placeholder={intl.formatMessage(messages.costModelsEnterTagValue)}
                 value={tag.tagValue}
-                onChange={value => updateTag({ tagValue: value }, ix)}
+                onChange={(_evt, value) => updateTag({ tagValue: value }, ix)}
                 validated={tagValues[ix].isTagValueDirty && errors.tagValueValues[ix] ? 'error' : 'default'}
                 helperTextInvalid={errors.tagValueValues[ix]}
               />
@@ -63,7 +63,7 @@ const TaggingRatesFormBase: React.FC<TaggingRatesFormProps> = ({
                 currencyUnits={currencyUnits}
                 fieldId={`rate_${ix}`}
                 helperTextInvalid={errors.tagValues[ix]}
-                onChange={value => updateTag({ value }, ix)}
+                onChange={(_evt, value) => updateTag({ value }, ix)}
                 style={style}
                 validated={tagValues[ix].isDirty && errors.tagValues[ix] ? 'error' : 'default'}
                 value={tag.inputValue}
@@ -77,7 +77,7 @@ const TaggingRatesFormBase: React.FC<TaggingRatesFormProps> = ({
                 validated={errors.tagDescription[ix] ? 'error' : 'default'}
                 placeholder={intl.formatMessage(messages.costModelsEnterTagDesc)}
                 value={tag.description}
-                onChange={value => updateTag({ description: value }, ix)}
+                onChange={(_evt, value) => updateTag({ description: value }, ix)}
                 helperTextInvalid={errors.tagDescription[ix]}
               />
             </SplitItem>
diff --git a/src/routes/costModels/components/rateTable.tsx b/src/routes/costModels/components/rateTable.tsx
index f922eb2954..ea488dbbf7 100644
--- a/src/routes/costModels/components/rateTable.tsx
+++ b/src/routes/costModels/components/rateTable.tsx
@@ -2,7 +2,7 @@ import type { IActions, ThProps } from '@patternfly/react-table';
 import {
   ActionsColumn,
   ExpandableRowContent,
-  TableComposable,
+  Table /* data-codemods */,
   TableVariant,
   Tbody,
   Td,
@@ -89,7 +89,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
       direction: activeSortDirection,
       defaultDirection: 'asc',
     },
-    onSort: (_event, index, direction) => {
+    onSort: (_evt, index, direction) => {
       setActiveSortIndex(index);
       setActiveSortDirection(direction);
       sortCallback({ index, direction });
@@ -122,10 +122,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
         });
 
   return (
-    <TableComposable
-      aria-label={intl.formatMessage(messages.costModelsWizardCreatePriceList)}
-      variant={TableVariant.compact}
-    >
+    <Table aria-label={intl.formatMessage(messages.costModelsWizardCreatePriceList)} variant={TableVariant.compact}>
       <Thead>
         <Tr>
           {columns.map((col: { title?: string; sortable?: boolean }, i) => (
@@ -170,7 +167,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
               <Tr>
                 <Td colSpan={6}>
                   <ExpandableRowContent>
-                    <TableComposable borders={false} variant={TableVariant.compact}>
+                    <Table borders={false} variant={TableVariant.compact}>
                       <Thead>
                         <Tr>
                           {tagColumns.map((tag, tagIndex) => (
@@ -189,7 +186,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
                           </Tr>
                         ))}
                       </Tbody>
-                    </TableComposable>
+                    </Table>
                   </ExpandableRowContent>
                 </Td>
               </Tr>
@@ -197,7 +194,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
           </Tbody>
         );
       })}
-    </TableComposable>
+    </Table>
   );
 };
 
diff --git a/src/routes/costModels/components/toolbar/checkboxSelector.tsx b/src/routes/costModels/components/toolbar/checkboxSelector.tsx
index 4518c2e488..e763600037 100644
--- a/src/routes/costModels/components/toolbar/checkboxSelector.tsx
+++ b/src/routes/costModels/components/toolbar/checkboxSelector.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React from 'react';
 import { WithStateMachine } from 'routes/costModels/components/hoc/withStateMachine';
 import { selectMachineState } from 'routes/costModels/components/logic/selectStateMachine';
diff --git a/src/routes/costModels/components/toolbar/primarySelector.tsx b/src/routes/costModels/components/toolbar/primarySelector.tsx
index a9485bfb0b..a383fcb483 100644
--- a/src/routes/costModels/components/toolbar/primarySelector.tsx
+++ b/src/routes/costModels/components/toolbar/primarySelector.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import React from 'react';
 import { WithStateMachine } from 'routes/costModels/components/hoc/withStateMachine';
diff --git a/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap b/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap
index 8b19b8da9d..2db1195f93 100644
--- a/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap
+++ b/src/routes/costModels/costModel/__snapshots__/dialog.test.tsx.snap
@@ -2,17 +2,18 @@
 
 exports[`dialog title renders correctly with icon and title text 1`] = `
 <h1
-  class="pf-c-title pf-m-2xl"
+  class="pf-v5-c-title pf-m-2xl"
   data-ouia-component-id="OUIA-Generated-Title-1"
-  data-ouia-component-type="PF4/Title"
+  data-ouia-component-type="PF5/Title"
   data-ouia-safe="true"
 >
   <svg
     aria-hidden="true"
-    fill="orange"
+    class="pf-v5-svg"
+    color="orange"
+    fill="currentColor"
     height="1em"
     role="img"
-    style="vertical-align: -0.125em;"
     viewBox="0 0 576 512"
     width="1em"
   >
diff --git a/src/routes/costModels/costModel/addSourceStep.tsx b/src/routes/costModels/costModel/addSourceStep.tsx
index 16639064d3..64629564d8 100644
--- a/src/routes/costModels/costModel/addSourceStep.tsx
+++ b/src/routes/costModels/costModel/addSourceStep.tsx
@@ -1,5 +1,5 @@
 import { Pagination, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table /* data-codemods */, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import type { CostModel } from 'api/costModels';
 import type { Provider } from 'api/providers';
 import messages from 'locales/messages';
@@ -58,7 +58,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
       return <SourcesModalErrorState />;
     }
 
-    const onSelect = (_evt, isSelected, rowId) => {
+    const onSelect = (isSelected, rowId) => {
       if (rowId === -1) {
         const pageSelections = this.props.providers.reduce((acc, cur) => {
           // If assigned to another cost model, maintain original selection
@@ -146,7 +146,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
           }}
           filterInputProps={{
             id: 'assign-sources-modal-toolbar-input',
-            onChange: value =>
+            onChange: (value: string) =>
               this.props.updateFilter({
                 currentFilterType: 'name',
                 currentFilterValue: value,
@@ -184,7 +184,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
           }}
         />
         {sources.length > 0 && (
-          <TableComposable
+          <Table
             aria-label={intl.formatMessage(messages.costModelsAssignSources, { count: 1 })}
             variant={TableVariant.compact}
           >
@@ -192,7 +192,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
               <Tr>
                 <Th
                   select={{
-                    onSelect: (_evt, isSelecting) => onSelect(_evt, isSelecting, -1),
+                    onSelect: (_evt, isSelecting) => onSelect(isSelecting, -1),
                     isSelected: sources.filter(s => s.disableSelection || s.selected).length === sources.length,
                   }}
                 ></Th>
@@ -205,8 +205,8 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
                 <Tr key={rowIndex}>
                   <Td
                     select={{
-                      disable: s.disableSelection,
-                      onSelect: _evt => onSelect(_evt, !s.selected, rowIndex),
+                      isDisabled: s.disableSelection,
+                      onSelect: () => onSelect(!s.selected, rowIndex),
                       isSelected: s.selected,
                       rowIndex,
                     }}
@@ -217,7 +217,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         )}
         {sources.length === 0 && (
           <EmptyFilterState filter={this.props.filter} subTitle={messages.emptyFilterSourceStateSubtitle} />
@@ -231,7 +231,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
                 perPage={this.props.pagination.perPage}
                 page={this.props.pagination.page}
                 titles={{
-                  paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                  paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                     title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                     placement: 'bottom',
                   }),
diff --git a/src/routes/costModels/costModel/assignSourcesModalToolbar.tsx b/src/routes/costModels/costModel/assignSourcesModalToolbar.tsx
index 887c2e78ed..6c3d80b126 100644
--- a/src/routes/costModels/costModel/assignSourcesModalToolbar.tsx
+++ b/src/routes/costModels/costModel/assignSourcesModalToolbar.tsx
@@ -1,6 +1,7 @@
 import type { PaginationProps } from '@patternfly/react-core';
 import {
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   Pagination,
   TextInput,
@@ -20,26 +21,28 @@ import { injectIntl } from 'react-intl';
 interface FilterInputProps {
   id: string;
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onSearch: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onSearch: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ id, placeholder = '', value, onChange, onSearch }) => {
   return (
     <InputGroup>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        id={id}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onSearch(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          value={value}
+          placeholder={placeholder}
+          id={id}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onSearch(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
@@ -83,7 +86,7 @@ export const AssignSourcesToolbarBase: React.FC<AssignSourcesToolbarBaseProps> =
             page={paginationProps.page}
             perPage={paginationProps.perPage}
             titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                 title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                 placement: 'top',
               }),
diff --git a/src/routes/costModels/costModel/costModelInfo.tsx b/src/routes/costModels/costModel/costModelInfo.tsx
index 3f511d4f94..ec6991a2eb 100644
--- a/src/routes/costModels/costModel/costModelInfo.tsx
+++ b/src/routes/costModels/costModel/costModelInfo.tsx
@@ -1,13 +1,12 @@
 import {
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   Grid,
   GridItem,
   PageSection,
   TabContent,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon';
 import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
@@ -93,10 +92,11 @@ class CostModelInfo extends React.Component<CostModelInfoProps, CostModelInfoSta
               </PageHeader>
               <PageSection>
                 <EmptyState>
-                  <EmptyStateIcon icon={ErrorCircleOIcon} />
-                  <Title headingLevel="h2" size={TitleSizes.lg}>
-                    {intl.formatMessage(messages.costModelsUUIDEmptyState)}
-                  </Title>
+                  <EmptyStateHeader
+                    titleText={<>{intl.formatMessage(messages.costModelsUUIDEmptyState)}</>}
+                    icon={<EmptyStateIcon icon={ErrorCircleOIcon} />}
+                    headingLevel="h2"
+                  />
                   <EmptyStateBody>
                     {intl.formatMessage(messages.costModelsUUIDEmptyStateDesc, {
                       uuid: this.props.router.params.uuid,
diff --git a/src/routes/costModels/costModel/distribution.tsx b/src/routes/costModels/costModel/distribution.tsx
index 2924d7f3ac..e00f86a9be 100644
--- a/src/routes/costModels/costModel/distribution.tsx
+++ b/src/routes/costModels/costModel/distribution.tsx
@@ -1,16 +1,5 @@
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardHeader,
-  CardHeaderMain,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
-  Title,
-  TitleSizes,
-} from '@patternfly/react-core';
+import { Card, CardBody, CardHeader, Title, TitleSizes } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core/deprecated';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
 import React from 'react';
@@ -44,32 +33,37 @@ const DistributionCardBase: React.FC<Props> = ({
     <>
       {isUpdateDialogOpen && <UpdateDistributionDialog current={current} />}
       <Card style={styles.card}>
-        <CardHeader>
-          <CardHeaderMain>
-            <Title headingLevel="h2" size={TitleSizes.md}>
-              {intl.formatMessage(messages.costDistribution)}
-            </Title>
-          </CardHeaderMain>
-          <CardActions>
-            <Dropdown
-              toggle={<KebabToggle onToggle={setDropdownIsOpen} />}
-              isOpen={dropdownIsOpen}
-              onSelect={() => setDropdownIsOpen(false)}
-              position={DropdownPosition.right}
-              isPlain
-              dropdownItems={[
-                <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
-                  <DropdownItem
-                    isDisabled={!isWritePermission}
-                    onClick={() => setCostModelDialog({ isOpen: true, name: 'updateDistribution' })}
-                    component="button"
-                  >
-                    {intl.formatMessage(messages.costModelsDistributionEdit)}
-                  </DropdownItem>
-                </ReadOnlyTooltip>,
-              ]}
-            />
-          </CardActions>
+        <CardHeader
+          actions={{
+            actions: (
+              <>
+                <Dropdown
+                  toggle={<KebabToggle onToggle={(_evt, isOpen) => setDropdownIsOpen(isOpen)} />}
+                  isOpen={dropdownIsOpen}
+                  onSelect={() => setDropdownIsOpen(false)}
+                  position={DropdownPosition.right}
+                  isPlain
+                  dropdownItems={[
+                    <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
+                      <DropdownItem
+                        isDisabled={!isWritePermission}
+                        onClick={() => setCostModelDialog({ isOpen: true, name: 'updateDistribution' })}
+                        component="button"
+                      >
+                        {intl.formatMessage(messages.costModelsDistributionEdit)}
+                      </DropdownItem>
+                    </ReadOnlyTooltip>,
+                  ]}
+                />
+              </>
+            ),
+            hasNoOffset: false,
+            className: undefined,
+          }}
+        >
+          <Title headingLevel="h2" size={TitleSizes.md}>
+            {intl.formatMessage(messages.costDistribution)}
+          </Title>
         </CardHeader>
         <CardBody style={styles.cardDescription}>{intl.formatMessage(messages.costModelsDistributionDesc)}</CardBody>
         <CardBody isFilled />
diff --git a/src/routes/costModels/costModel/header.tsx b/src/routes/costModels/costModel/header.tsx
index 5e1a869c35..7ab036395f 100644
--- a/src/routes/costModels/costModel/header.tsx
+++ b/src/routes/costModels/costModel/header.tsx
@@ -1,9 +1,6 @@
 import {
   Breadcrumb,
   BreadcrumbItem,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   List,
   ListItem,
   Split,
@@ -19,6 +16,7 @@ import {
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
 import React from 'react';
@@ -125,7 +123,7 @@ const Header: React.FC<Props> = ({
           </SplitItem>
           <SplitItem>
             <Dropdown
-              toggle={<KebabToggle onToggle={setDropdownIsOpen} />}
+              toggle={<KebabToggle onToggle={(_evt, isOpen) => setDropdownIsOpen(isOpen)} />}
               isOpen={dropdownIsOpen}
               onSelect={() => setDropdownIsOpen(false)}
               isPlain
diff --git a/src/routes/costModels/costModel/markup.tsx b/src/routes/costModels/costModel/markup.tsx
index fc59dea0ff..cb40391895 100644
--- a/src/routes/costModels/costModel/markup.tsx
+++ b/src/routes/costModels/costModel/markup.tsx
@@ -1,16 +1,5 @@
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardHeader,
-  CardHeaderMain,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
-  Title,
-  TitleSizes,
-} from '@patternfly/react-core';
+import { Card, CardBody, CardHeader, Title, TitleSizes } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from '@patternfly/react-core/deprecated';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
 import React from 'react';
@@ -49,32 +38,37 @@ const MarkupCardBase: React.FC<Props> = ({
     <>
       {isUpdateDialogOpen && <UpdateMarkupDialog current={current} />}
       <Card style={styles.card}>
-        <CardHeader>
-          <CardHeaderMain>
-            <Title headingLevel="h2" size={TitleSizes.md}>
-              {intl.formatMessage(messages.markupOrDiscount)}
-            </Title>
-          </CardHeaderMain>
-          <CardActions>
-            <Dropdown
-              toggle={<KebabToggle onToggle={setDropdownIsOpen} />}
-              isOpen={dropdownIsOpen}
-              onSelect={() => setDropdownIsOpen(false)}
-              position={DropdownPosition.right}
-              isPlain
-              dropdownItems={[
-                <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
-                  <DropdownItem
-                    isDisabled={!isWritePermission}
-                    onClick={() => setCostModelDialog({ isOpen: true, name: 'updateMarkup' })}
-                    component="button"
-                  >
-                    {intl.formatMessage(messages.editMarkup)}
-                  </DropdownItem>
-                </ReadOnlyTooltip>,
-              ]}
-            />
-          </CardActions>
+        <CardHeader
+          actions={{
+            actions: (
+              <>
+                <Dropdown
+                  toggle={<KebabToggle onToggle={(_evt, isOpen) => setDropdownIsOpen(isOpen)} />}
+                  isOpen={dropdownIsOpen}
+                  onSelect={() => setDropdownIsOpen(false)}
+                  position={DropdownPosition.right}
+                  isPlain
+                  dropdownItems={[
+                    <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
+                      <DropdownItem
+                        isDisabled={!isWritePermission}
+                        onClick={() => setCostModelDialog({ isOpen: true, name: 'updateMarkup' })}
+                        component="button"
+                      >
+                        {intl.formatMessage(messages.editMarkup)}
+                      </DropdownItem>
+                    </ReadOnlyTooltip>,
+                  ]}
+                />
+              </>
+            ),
+            hasNoOffset: false,
+            className: undefined,
+          }}
+        >
+          <Title headingLevel="h2" size={TitleSizes.md}>
+            {intl.formatMessage(messages.markupOrDiscount)}
+          </Title>
         </CardHeader>
         <CardBody style={styles.cardDescription}>{intl.formatMessage(messages.markupOrDiscountDesc)}</CardBody>
         <CardBody isFilled />
diff --git a/src/routes/costModels/costModel/priceListTable.tsx b/src/routes/costModels/costModel/priceListTable.tsx
index 53f3de499f..c708ade0c0 100644
--- a/src/routes/costModels/costModel/priceListTable.tsx
+++ b/src/routes/costModels/costModel/priceListTable.tsx
@@ -3,12 +3,11 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   List,
   ListItem,
   Pagination,
-  Title,
-  TitleSizes,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -274,7 +273,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                       }
                       onPerPageSelect={(_evt, perPage) => this.setState({ pagination: { page: 1, perPage } })}
                       titles={{
-                        paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                        paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                           title: intl.formatMessage(messages.priceList),
                           placement: 'top',
                         }),
@@ -293,10 +292,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                   search.metrics.length === 0 && (
                     <Bullseye>
                       <EmptyState>
-                        <EmptyStateIcon icon={PlusCircleIcon} />
-                        <Title headingLevel="h2" size={TitleSizes.lg}>
-                          {intl.formatMessage(messages.priceListEmptyRate)}
-                        </Title>
+                        <EmptyStateHeader
+                          titleText={<>{intl.formatMessage(messages.priceListEmptyRate)}</>}
+                          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                          headingLevel="h2"
+                        />
                         <EmptyStateBody>{intl.formatMessage(messages.priceListEmptyRateDesc)}</EmptyStateBody>
                       </EmptyState>
                     </Bullseye>
@@ -310,9 +310,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           isDisabled: !isWritePermission,
                           // HACK: to display tooltip on disable
                           style: !isWritePermission ? { pointerEvents: 'auto' } : undefined,
-                          tooltip: !isWritePermission ? (
-                            <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
-                          ) : undefined,
+                          tooltipProps: {
+                            content: !isWritePermission ? (
+                              <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
+                            ) : undefined,
+                          },
                           onClick: (_evt, _rowIndex, rowData) => {
                             this.setState({
                               deleteRate: null,
@@ -329,9 +331,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           isDisabled: !isWritePermission,
                           // HACK: to display tooltip on disable
                           style: !isWritePermission ? { pointerEvents: 'auto' } : {},
-                          tooltip: !isWritePermission ? (
-                            <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
-                          ) : undefined,
+                          tooltipProps: {
+                            content: !isWritePermission ? (
+                              <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
+                            ) : undefined,
+                          },
                           onClick: (_evt, _rowIndex, rowData) => {
                             const rowIndex = rowData.data.stateIndex;
                             this.setState({
@@ -372,7 +376,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                               })
                             }
                             titles={{
-                              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                                 title: intl.formatMessage(messages.priceList),
                                 placement: 'bottom',
                               }),
diff --git a/src/routes/costModels/costModel/sourcesTable.tsx b/src/routes/costModels/costModel/sourcesTable.tsx
index e8563ccb5d..22b12fefe3 100644
--- a/src/routes/costModels/costModel/sourcesTable.tsx
+++ b/src/routes/costModels/costModel/sourcesTable.tsx
@@ -1,5 +1,14 @@
 import type { IAction, IRow } from '@patternfly/react-table';
-import { ActionsColumn, TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import {
+  ActionsColumn,
+  Table /* data-codemods */,
+  TableVariant,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
 import { TableGridBreakpoint } from '@patternfly/react-table';
 import messages from 'locales/messages';
 import React from 'react';
@@ -34,7 +43,9 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
     return [
       {
         style: { pointerEvents: 'auto' },
-        tooltip: intl.formatMessage(messages.readOnlyPermissions),
+        tooltipProps: {
+          content: intl.formatMessage(messages.readOnlyPermissions),
+        },
         isDisabled: true,
         title: intl.formatMessage(messages.costModelsSourceDelete),
       },
@@ -45,7 +56,7 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
   const rows: (IRow | string[])[] = costModels.length > 0 ? costModels[0].sources.map(source => [source.name]) : [];
 
   return (
-    <TableComposable
+    <Table
       aria-label={intl.formatMessage(messages.costModelsSourceTableAriaLabel)}
       gridBreakPoint={TableGridBreakpoint.grid2xl}
       variant={TableVariant.compact}
@@ -73,7 +84,7 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
 
diff --git a/src/routes/costModels/costModel/sourcesToolbar.tsx b/src/routes/costModels/costModel/sourcesToolbar.tsx
index 44076f5f31..07d2bf2e1d 100644
--- a/src/routes/costModels/costModel/sourcesToolbar.tsx
+++ b/src/routes/costModels/costModel/sourcesToolbar.tsx
@@ -2,6 +2,7 @@ import type { ButtonProps, PaginationProps } from '@patternfly/react-core';
 import {
   Button,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   Pagination,
   TextInput,
@@ -19,26 +20,28 @@ import { ReadOnlyTooltip } from 'routes/costModels/components/readOnlyTooltip';
 interface FilterInputProps {
   id: string;
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onSearch: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onSearch: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ id, placeholder = '', value, onChange, onSearch }) => {
   return (
     <InputGroup>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        id={id}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onSearch(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          value={value}
+          placeholder={placeholder}
+          id={id}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onSearch(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
diff --git a/src/routes/costModels/costModel/table.tsx b/src/routes/costModels/costModel/table.tsx
index 6a25cd07c3..cc44c73f1a 100644
--- a/src/routes/costModels/costModel/table.tsx
+++ b/src/routes/costModels/costModel/table.tsx
@@ -1,4 +1,11 @@
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Title,
+  TitleSizes,
+} from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
@@ -118,10 +125,11 @@ class TableBase extends React.Component<TableBaseProps, TableBaseState> {
         {rows.length === 0 && (
           <div style={styles.emptyState}>
             <EmptyState>
-              <EmptyStateIcon icon={PlusCircleIcon} />
-              <Title headingLevel="h2" size={TitleSizes.lg}>
-                {intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}
-              </Title>
+              <EmptyStateHeader
+                titleText={<>{intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}</>}
+                icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                headingLevel="h2"
+              />
               <EmptyStateBody>{intl.formatMessage(messages.costModelsSourceEmptyStateTitle)}</EmptyStateBody>
             </EmptyState>
           </div>
diff --git a/src/routes/costModels/costModel/updateCostModel.tsx b/src/routes/costModels/costModel/updateCostModel.tsx
index 4f9bfef1b4..8aa4a07078 100644
--- a/src/routes/costModels/costModel/updateCostModel.tsx
+++ b/src/routes/costModels/costModel/updateCostModel.tsx
@@ -93,7 +93,7 @@ class UpdateCostModelBase extends React.Component<UpdateCostModelProps, UpdateCo
                 id="name"
                 name="name"
                 value={this.state.name}
-                onChange={value => this.setState({ name: value })}
+                onChange={(_evt, value) => this.setState({ name: value })}
               />
             </FormGroup>
             <FormGroup label={intl.formatMessage(messages.description)} fieldId="description">
@@ -102,7 +102,7 @@ class UpdateCostModelBase extends React.Component<UpdateCostModelProps, UpdateCo
                 id="description"
                 name="description"
                 value={this.state.description}
-                onChange={value => this.setState({ description: value })}
+                onChange={(_evt, value) => this.setState({ description: value })}
               />
             </FormGroup>
           </Form>
diff --git a/src/routes/costModels/costModel/updateDistributionDialog.tsx b/src/routes/costModels/costModel/updateDistributionDialog.tsx
index fd16b7b882..0265a36733 100644
--- a/src/routes/costModels/costModel/updateDistributionDialog.tsx
+++ b/src/routes/costModels/costModel/updateDistributionDialog.tsx
@@ -61,17 +61,17 @@ class UpdateDistributionDialogBase extends React.Component<
     };
   }
 
-  private handleDistributionChange = (_, event) => {
+  private handleDistributionChange = event => {
     const { value } = event.currentTarget;
     this.setState({ distribution: value });
   };
 
-  private handleDistributePlatformUnallocatedChange = (_, event) => {
+  private handleDistributePlatformUnallocatedChange = event => {
     const { value } = event.currentTarget;
     this.setState({ distributePlatformUnallocated: value === 'true' });
   };
 
-  private handleDistributeWorkerUnallocatedChange = (_, event) => {
+  private handleDistributeWorkerUnallocatedChange = event => {
     const { value } = event.currentTarget;
     this.setState({ distributeWorkerUnallocated: value === 'true' });
   };
diff --git a/src/routes/costModels/costModel/updateMarkupDialog.tsx b/src/routes/costModels/costModel/updateMarkupDialog.tsx
index 74857dd8ae..50c1f675bc 100644
--- a/src/routes/costModels/costModel/updateMarkupDialog.tsx
+++ b/src/routes/costModels/costModel/updateMarkupDialog.tsx
@@ -5,7 +5,10 @@ import {
   FlexItem,
   Form,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   List,
   ListItem,
@@ -66,12 +69,12 @@ class UpdateMarkupDialogBase extends React.Component<UpdateMarkupDialogProps, Up
     };
   }
 
-  private handleOnSignChange = (_, event) => {
+  private handleOnSignChange = event => {
     const { value } = event.currentTarget;
     this.setState({ isDiscount: value === 'true' });
   };
 
-  private handleOnMarkupDiscountChange = (_, event) => {
+  private handleOnMarkupDiscountChange = event => {
     const { value } = event.currentTarget;
 
     this.setState({ markup: value });
@@ -187,34 +190,36 @@ class UpdateMarkupDialogBase extends React.Component<UpdateMarkupDialogProps, Up
               <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
                 <FlexItem>
                   <Form>
-                    <FormGroup
-                      fieldId="markup-input-box"
-                      helperTextInvalid={helpText ? intl.formatMessage(helpText) : undefined}
-                      style={styles.rateContainer}
-                      validated={validated}
-                    >
+                    <FormGroup fieldId="markup-input-box" style={styles.rateContainer}>
                       <InputGroup>
                         <InputGroupText style={styles.sign}>
                           {isDiscount
                             ? intl.formatMessage(messages.discountMinus)
                             : intl.formatMessage(messages.markupPlus)}
                         </InputGroupText>
-                        <TextInput
-                          aria-label={intl.formatMessage(messages.rate)}
-                          id="markup-input-box"
-                          isRequired
-                          onKeyDown={this.handleOnKeyDown}
-                          onChange={this.handleOnMarkupDiscountChange}
-                          placeholder={'0'}
-                          style={styles.inputField}
-                          type="text"
-                          validated={validated}
-                          value={this.state.markup}
-                        />
+                        <InputGroupItem isFill>
+                          <TextInput
+                            aria-label={intl.formatMessage(messages.rate)}
+                            id="markup-input-box"
+                            isRequired
+                            onKeyDown={this.handleOnKeyDown}
+                            onChange={this.handleOnMarkupDiscountChange}
+                            placeholder={'0'}
+                            style={styles.inputField}
+                            type="text"
+                            validated={validated}
+                            value={this.state.markup}
+                          />
+                        </InputGroupItem>
                         <InputGroupText style={styles.percent}>
                           {intl.formatMessage(messages.percentSymbol)}
                         </InputGroupText>
                       </InputGroup>
+                      {validated === 'error' && (
+                        <HelperText>
+                          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                        </HelperText>
+                      )}
                     </FormGroup>
                   </Form>
                 </FlexItem>
diff --git a/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx b/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx
index c0ab3f66fb..3d49c49407 100644
--- a/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx
+++ b/src/routes/costModels/costModelWizard/assignSourcesToolbar.tsx
@@ -1,6 +1,7 @@
 import type { PaginationProps } from '@patternfly/react-core';
 import {
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   Pagination,
   TextInput,
@@ -20,26 +21,28 @@ import { injectIntl } from 'react-intl';
 interface FilterInputProps {
   id: string;
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onSearch: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onSearch: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ id, placeholder = '', value, onChange, onSearch }) => {
   return (
     <InputGroup>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        id={id}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onSearch(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          value={value}
+          placeholder={placeholder}
+          id={id}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onSearch(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
@@ -85,7 +88,7 @@ export const AssignSourcesToolbarBase: React.FC<AssignSourcesToolbarBaseProps> =
             onSetPage={paginationProps.onSetPage}
             onPerPageSelect={paginationProps.onPerPageSelect}
             titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                 title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                 placement: 'bottom',
               }),
diff --git a/src/routes/costModels/costModelWizard/context.ts b/src/routes/costModels/costModelWizard/context.ts
index 603780bc13..7e49f7583c 100644
--- a/src/routes/costModels/costModelWizard/context.ts
+++ b/src/routes/costModels/costModelWizard/context.ts
@@ -35,8 +35,8 @@ export const defaultCostModelContext = {
   onCurrencyChange: (value: string) => null,
   onDescChange: (value: string) => null,
   onFilterChange: (value: string) => null,
-  onPageChange: (_evt, value: number) => null,
-  onPerPageChange: (_evt, value: number) => null,
+  onPageChange: (value: number) => null,
+  onPerPageChange: (value: number) => null,
   onTypeChange: (value: string) => null,
   onNameChange: (value: string) => null,
   onSourceSelect: (...args: any[]) => null,
@@ -45,8 +45,8 @@ export const defaultCostModelContext = {
   priceListPagination: {
     page: 1,
     perPage: 4,
-    onPerPageSet: (_evt, perPage: number) => null,
-    onPageSet: (_evt, page: number) => null,
+    onPerPageSet: (perPage: number) => null,
+    onPageSet: (page: number) => null,
   },
   query: {},
   step: 1,
diff --git a/src/routes/costModels/costModelWizard/costModelWizard.tsx b/src/routes/costModels/costModelWizard/costModelWizard.tsx
index 1c7292f2d8..757f0477cf 100644
--- a/src/routes/costModels/costModelWizard/costModelWizard.tsx
+++ b/src/routes/costModels/costModelWizard/costModelWizard.tsx
@@ -1,6 +1,7 @@
-import type { WizardStepFunctionType } from '@patternfly/react-core';
-import { Title, TitleSizes, Wizard } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
 import { Button, Modal } from '@patternfly/react-core';
+import type { WizardStepFunctionType } from '@patternfly/react-core/deprecated';
+import { Wizard } from '@patternfly/react-core/deprecated';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { addCostModel } from 'api/costModels';
 import type { MetricHash } from 'api/metrics';
@@ -413,23 +414,23 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
                   justSaved: value ? value : false,
                 },
               }),
-            handleDistributionChange: (_, event) => {
+            handleDistributionChange: event => {
               const { value } = event.currentTarget;
               this.setState({ distribution: value });
             },
-            handleDistributePlatformUnallocatedChange: (_, event) => {
+            handleDistributePlatformUnallocatedChange: event => {
               const { value } = event.currentTarget;
               this.setState({ distributePlatformUnallocated: value === 'true' });
             },
-            handleDistributeWorkerUnallocatedChange: (_, event) => {
+            handleDistributeWorkerUnallocatedChange: event => {
               const { value } = event.currentTarget;
               this.setState({ distributeWorkerUnallocated: value === 'true' });
             },
-            handleMarkupDiscountChange: (_, event) => {
+            handleMarkupDiscountChange: event => {
               const { value } = event.currentTarget;
               this.setState({ markup: value });
             },
-            handleSignChange: (_, event) => {
+            handleSignChange: event => {
               const { value } = event.currentTarget;
               this.setState({ isDiscount: value === 'true' });
             },
@@ -437,14 +438,14 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
             loading: this.state.loading,
             metricsHash,
             onClose: () => this.setState({ ...this.defaultState }, this.props.closeWizard),
-            onCurrencyChange: value =>
+            onCurrencyChange: (value: string) =>
               this.setState({ currencyUnits: value, tiers: updateTiersCurrency(this.state.tiers, value) }),
-            onDescChange: value => this.setState({ description: value }),
-            onFilterChange: value => this.setState({ filterName: value }),
-            onNameChange: value => this.setState({ name: value, dirtyName: true }),
-            onPageChange: (_evt, page) => this.setState({ page }),
-            onPerPageChange: (_evt, perPage) => this.setState({ page: 1, perPage }),
-            onSourceSelect: (rowId, isSelected) => {
+            onDescChange: (value: string) => this.setState({ description: value }),
+            onFilterChange: (value: string) => this.setState({ filterName: value }),
+            onNameChange: (value: string) => this.setState({ name: value, dirtyName: true }),
+            onPageChange: (page: number) => this.setState({ page }),
+            onPerPageChange: (perPage: number) => this.setState({ page: 1, perPage }),
+            onSourceSelect: (rowId: number, isSelected: boolean) => {
               if (rowId === -1) {
                 const pageSelections = this.state.sources.map(s => ({
                   [s.uuid]: { selected: isSelected, meta: s },
@@ -464,19 +465,19 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
               };
               return this.setState({ checked: newState });
             },
-            onTypeChange: value => this.setState({ type: value, dataFetched: false, loading: false }),
+            onTypeChange: (value: string) => this.setState({ type: value, dataFetched: false, loading: false }),
             page: this.state.page,
             priceListPagination: {
               page: this.state.priceListPagination.page,
               perPage: this.state.priceListPagination.perPage,
-              onPageSet: (_evt, page) =>
+              onPageSet: (page: number) =>
                 this.setState({
                   priceListPagination: {
                     ...this.state.priceListPagination,
                     page,
                   },
                 }),
-              onPerPageSet: (_evt, perPage) =>
+              onPerPageSet: (perPage: number) =>
                 this.setState({
                   priceListPagination: {
                     page: 1,
diff --git a/src/routes/costModels/costModelWizard/generalInformation.tsx b/src/routes/costModels/costModelWizard/generalInformation.tsx
index ea3aff6c56..8a54eede28 100644
--- a/src/routes/costModels/costModelWizard/generalInformation.tsx
+++ b/src/routes/costModels/costModelWizard/generalInformation.tsx
@@ -1,6 +1,7 @@
 import {
   FormGroup,
-  SelectDirection,
+  HelperText,
+  HelperTextItem,
   Stack,
   StackItem,
   TextArea,
@@ -8,6 +9,7 @@ import {
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
+import { SelectDirection } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -89,13 +91,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
             </StackItem>
             <StackItem>
               <Form style={styles.form}>
-                <FormGroup
-                  helperTextInvalid={nameErrors(name) && intl.formatMessage(nameErrors(name))}
-                  validated={nameErrors(name) === null || !dirtyName ? 'default' : 'error'}
-                  label={intl.formatMessage(messages.names, { count: 1 })}
-                  isRequired
-                  fieldId="name"
-                >
+                <FormGroup label={intl.formatMessage(messages.names, { count: 1 })} isRequired fieldId="name">
                   <TextInput
                     validated={nameErrors(name) === null || !dirtyName ? 'default' : 'error'}
                     isRequired
@@ -103,17 +99,15 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                     id="name"
                     name="name"
                     value={name}
-                    onChange={onNameChange}
+                    onChange={(_evt, value) => onNameChange(value)}
                   />
+                  {dirtyName && nameErrors(name) && (
+                    <HelperText>
+                      <HelperTextItem variant="error">{intl.formatMessage(nameErrors(name))}</HelperTextItem>
+                    </HelperText>
+                  )}
                 </FormGroup>
-                <FormGroup
-                  helperTextInvalid={
-                    descriptionErrors(description) && intl.formatMessage(descriptionErrors(description))
-                  }
-                  validated={descriptionErrors(description) === null ? 'default' : 'error'}
-                  label={intl.formatMessage(messages.description)}
-                  fieldId="description"
-                >
+                <FormGroup label={intl.formatMessage(messages.description)} fieldId="description">
                   <TextArea
                     style={styles.textArea}
                     type="text"
@@ -121,8 +115,15 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                     name="description"
                     value={description}
                     validated={descriptionErrors(description) === null ? 'default' : 'error'}
-                    onChange={onDescChange}
+                    onChange={(_evt, value) => onDescChange(value)}
                   />
+                  {descriptionErrors(description) && (
+                    <HelperText>
+                      <HelperTextItem variant="error">
+                        {intl.formatMessage(descriptionErrors(description))}
+                      </HelperTextItem>
+                    </HelperText>
+                  )}
                 </FormGroup>
                 <Selector
                   isRequired
@@ -134,7 +135,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                   toggleAriaLabel={intl.formatMessage(messages.costModelsWizardEmptySourceTypeLabel)}
                   placeholderText={intl.formatMessage(messages.costModelsWizardEmptySourceTypeLabel)}
                   value={getValueLabel(type, sourceTypeOptions)}
-                  onChange={onTypeChange}
+                  onChange={(_evt, value) => onTypeChange(value)}
                   options={sourceTypeOptions}
                 />
                 <Selector
@@ -144,7 +145,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                   maxHeight={styles.selector.maxHeight}
                   toggleAriaLabel={intl.formatMessage(messages.costModelsWizardCurrencyToggleLabel)}
                   value={getValueLabel(currencyUnits, currencyOptions)}
-                  onChange={onCurrencyChange}
+                  onChange={(_evt, value) => onCurrencyChange(value)}
                   id="currency-units-selector"
                   options={currencyOptions.map(o => {
                     return {
diff --git a/src/routes/costModels/costModelWizard/markup.tsx b/src/routes/costModels/costModelWizard/markup.tsx
index d04abf994b..623eb2bff0 100644
--- a/src/routes/costModels/costModelWizard/markup.tsx
+++ b/src/routes/costModels/costModelWizard/markup.tsx
@@ -2,7 +2,10 @@ import {
   Flex,
   FlexItem,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   List,
   ListItem,
@@ -114,34 +117,36 @@ class MarkupWithDistributionBase extends React.Component<MarkupWithDistributionP
                   <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
                     <FlexItem>
                       <Form>
-                        <FormGroup
-                          fieldId="markup-input-box"
-                          helperTextInvalid={helpText ? intl.formatMessage(helpText) : undefined}
-                          style={costCalcStyles.rateContainer}
-                          validated={validated}
-                        >
+                        <FormGroup fieldId="markup-input-box" style={costCalcStyles.rateContainer}>
                           <InputGroup>
                             <InputGroupText style={costCalcStyles.sign}>
                               {isDiscount
                                 ? intl.formatMessage(messages.discountMinus)
                                 : intl.formatMessage(messages.markupPlus)}
                             </InputGroupText>
-                            <TextInput
-                              aria-label={intl.formatMessage(messages.rate)}
-                              id="markup-input-box"
-                              isRequired
-                              onKeyDown={handleOnKeyDown}
-                              onChange={handleMarkupDiscountChange}
-                              placeholder={'0'}
-                              style={costCalcStyles.inputField}
-                              type="text"
-                              validated={validated}
-                              value={markup}
-                            />
+                            <InputGroupItem isFill>
+                              <TextInput
+                                aria-label={intl.formatMessage(messages.rate)}
+                                id="markup-input-box"
+                                isRequired
+                                onKeyDown={handleOnKeyDown}
+                                onChange={handleMarkupDiscountChange}
+                                placeholder={'0'}
+                                style={costCalcStyles.inputField}
+                                type="text"
+                                validated={validated}
+                                value={markup}
+                              />
+                            </InputGroupItem>
                             <InputGroupText style={costCalcStyles.percent}>
                               {intl.formatMessage(messages.percentSymbol)}
                             </InputGroupText>
                           </InputGroup>
+                          {validated === 'error' && (
+                            <HelperText>
+                              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                            </HelperText>
+                          )}
                         </FormGroup>
                       </Form>
                     </FlexItem>
diff --git a/src/routes/costModels/costModelWizard/priceListTable.tsx b/src/routes/costModels/costModelWizard/priceListTable.tsx
index 44bb2a92b8..7a4854fdff 100644
--- a/src/routes/costModels/costModelWizard/priceListTable.tsx
+++ b/src/routes/costModels/costModelWizard/priceListTable.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   Pagination,
   Stack,
@@ -93,10 +94,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
     const NoTiersEmptyState = () => (
       <Bullseye>
         <EmptyState>
-          <EmptyStateIcon icon={PlusCircleIcon} />
-          <Title headingLevel="h2" size={TitleSizes.lg}>
-            {intl.formatMessage(messages.costModelsWizardEmptyStateTitle)}
-          </Title>
+          <EmptyStateHeader
+            titleText={<>{intl.formatMessage(messages.costModelsWizardEmptyStateTitle)}</>}
+            icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+            headingLevel="h2"
+          />
           <EmptyStateBody>
             {intl.formatMessage(messages.costModelsWizardEmptyStateSkipStep, {
               value: <strong>{intl.formatMessage(messages.next)}</strong>,
@@ -225,10 +227,10 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                               itemCount={filtered.length}
                               perPage={priceListPagination.perPage}
                               page={priceListPagination.page}
-                              onSetPage={priceListPagination.onPageSet}
-                              onPerPageSelect={priceListPagination.onPerPageSet}
+                              onSetPage={(_evt, perPage) => priceListPagination.onPageSet(perPage)}
+                              onPerPageSelect={(_evt, page) => priceListPagination.onPerPageSet(page)}
                               titles={{
-                                paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                                paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                                   title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                                   placement: 'top',
                                 }),
@@ -270,10 +272,10 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           itemCount={filtered.length}
                           perPage={priceListPagination.perPage}
                           page={priceListPagination.page}
-                          onSetPage={priceListPagination.onPageSet}
-                          onPerPageSelect={priceListPagination.onPerPageSet}
+                          onSetPage={(_evt, perPage) => priceListPagination.onPageSet(perPage)}
+                          onPerPageSelect={(_evt, page) => priceListPagination.onPerPageSet(page)}
                           titles={{
-                            paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                            paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                               title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                               placement: 'bottom',
                             }),
diff --git a/src/routes/costModels/costModelWizard/review.tsx b/src/routes/costModels/costModelWizard/review.tsx
index d4ad89ad32..2eaa47533a 100644
--- a/src/routes/costModels/costModelWizard/review.tsx
+++ b/src/routes/costModels/costModelWizard/review.tsx
@@ -2,9 +2,11 @@ import {
   Alert,
   Button,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
   Stack,
   StackItem,
   Text,
@@ -32,18 +34,21 @@ const ReviewSuccessBase: React.FC<WrappedComponentProps> = ({ intl }) => (
   <CostModelContext.Consumer>
     {({ onClose, name }) => (
       <EmptyState>
-        <EmptyStateIcon icon={OkIcon} color="green" />
-        <Title headingLevel="h2" size={TitleSizes.lg}>
-          {intl.formatMessage(messages.costModelsWizardReviewStatusTitle)}
-        </Title>
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(messages.costModelsWizardReviewStatusTitle)}</>}
+          icon={<EmptyStateIcon icon={OkIcon} color="green" />}
+          headingLevel="h2"
+        />
         <EmptyStateBody>
           {intl.formatMessage(messages.costModelsWizardReviewStatusSubTitle, { value: name })}
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button variant="link" onClick={onClose}>
-            {intl.formatMessage(messages.close)}
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="link" onClick={onClose}>
+              {intl.formatMessage(messages.close)}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     )}
   </CostModelContext.Consumer>
diff --git a/src/routes/costModels/costModelWizard/table.tsx b/src/routes/costModels/costModelWizard/table.tsx
index fbd1cd351c..d5ac35eb8b 100644
--- a/src/routes/costModels/costModelWizard/table.tsx
+++ b/src/routes/costModels/costModelWizard/table.tsx
@@ -1,5 +1,5 @@
 import { Checkbox, Stack, StackItem, Text, TextContent, TextVariants, Title, TitleSizes } from '@patternfly/react-core';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table /* data-codemods */, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -62,7 +62,7 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
                 filterInputProps={{
                   id: 'assign-source-search-input',
                   value: filterName,
-                  onChange: onFilterChange,
+                  onChange: (value: string) => onFilterChange(value),
                   onSearch: () => {
                     fetchSources(sourceType, addMultiValueQuery(query)('name', filterName), 1, perPage);
                   },
@@ -81,7 +81,7 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
               {loading ? (
                 <LoadingState />
               ) : (
-                <TableComposable
+                <Table
                   aria-label={intl.formatMessage(messages.costModelsWizardSourceTableAriaLabel)}
                   variant={TableVariant.compact}
                 >
@@ -101,7 +101,7 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
                       <Tr key={rowIndex}>
                         <Td>
                           <Checkbox
-                            onChange={isChecked => {
+                            onChange={(_evt, isChecked) => {
                               onSourceSelect(rowIndex, isChecked);
                             }}
                             id={row.name}
@@ -126,14 +126,14 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
                       </Tr>
                     ))}
                   </Tbody>
-                </TableComposable>
+                </Table>
               )}
               <PaginationToolbarTemplate
                 itemCount={itemCount}
                 perPage={perPage}
                 page={page}
                 titles={{
-                  paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                  paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                     title: intl.formatMessage(messages.sources),
                     placement: 'bottom',
                   }),
diff --git a/src/routes/costModels/costModelsDetails/bottomPagination.tsx b/src/routes/costModels/costModelsDetails/bottomPagination.tsx
index f5b3e7fd3e..0cd1b73d2d 100644
--- a/src/routes/costModels/costModelsDetails/bottomPagination.tsx
+++ b/src/routes/costModels/costModelsDetails/bottomPagination.tsx
@@ -44,7 +44,7 @@ const BottomPaginationBase: React.FC<BottomPaginationBaseProps> = props => {
             page={page}
             perPage={perPage}
             titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                 title: intl.formatMessage(messages.costModelsDetailsTitle),
                 placement: 'bottom',
               }),
diff --git a/src/routes/costModels/costModelsDetails/emptyStateBase.tsx b/src/routes/costModels/costModelsDetails/emptyStateBase.tsx
index 1526aad4e1..b0b78d7a2c 100644
--- a/src/routes/costModels/costModelsDetails/emptyStateBase.tsx
+++ b/src/routes/costModels/costModelsDetails/emptyStateBase.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import React from 'react';
 
 interface EmptyStateBaseProps {
@@ -11,12 +11,9 @@ interface EmptyStateBaseProps {
 function EmptyStateBase(props: EmptyStateBaseProps): JSX.Element {
   return (
     <EmptyState className="pf-m-redhat-font">
-      <EmptyStateIcon icon={props.icon} />
-      <Title headingLevel="h2" size={TitleSizes.lg}>
-        {props.title}
-      </Title>
+      <EmptyStateHeader titleText={<>{props.title}</>} icon={<EmptyStateIcon icon={props.icon} />} headingLevel="h2" />
       <EmptyStateBody>{props.description}</EmptyStateBody>
-      {props.actions ? props.actions : null}
+      <EmptyStateFooter>{props.actions ? props.actions : null}</EmptyStateFooter>
     </EmptyState>
   );
 }
diff --git a/src/routes/costModels/costModelsDetails/table.tsx b/src/routes/costModels/costModelsDetails/table.tsx
index 0f019291a7..dcd7fbf1c3 100644
--- a/src/routes/costModels/costModelsDetails/table.tsx
+++ b/src/routes/costModels/costModelsDetails/table.tsx
@@ -1,6 +1,15 @@
 import { PageSection, PageSectionVariants } from '@patternfly/react-core';
 import type { ICell, IRowData, ThProps } from '@patternfly/react-table';
-import { ActionsColumn, TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import {
+  ActionsColumn,
+  Table /* data-codemods */,
+  TableVariant,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
 import { sortable, TableGridBreakpoint } from '@patternfly/react-table';
 import type { CostModel } from 'api/costModels';
 import { intl as defaultIntl } from 'components/i18n';
@@ -116,7 +125,7 @@ class CostModelsTableBase extends React.Component<CostModelsTableProps, CostMode
 
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <TableComposable
+        <Table
           aria-label={intl.formatMessage(messages.costModelsTableAriaLabel)}
           gridBreakPoint={TableGridBreakpoint.grid2xl}
           variant={TableVariant.compact}
@@ -150,7 +159,7 @@ class CostModelsTableBase extends React.Component<CostModelsTableProps, CostMode
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </PageSection>
     );
   }
diff --git a/src/routes/costModels/costModelsDetails/utils/filters.tsx b/src/routes/costModels/costModelsDetails/utils/filters.tsx
index 858931b76d..b294165a6e 100644
--- a/src/routes/costModels/costModelsDetails/utils/filters.tsx
+++ b/src/routes/costModels/costModelsDetails/utils/filters.tsx
@@ -1,14 +1,6 @@
 import type { ToolbarProps } from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  InputGroup,
-  InputGroupText,
-  TextInput,
-  Toolbar,
-  ToolbarFilter,
-} from '@patternfly/react-core';
+import { InputGroup, InputGroupItem, InputGroupText, TextInput, Toolbar, ToolbarFilter } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -27,26 +19,28 @@ import type { Inputer, Opener } from './types';
 
 interface FilterInputProps {
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onKeyPress: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ placeholder = '', value, onChange, onKeyPress }) => {
   return (
     <InputGroup>
-      <TextInput
-        aria-label={placeholder}
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onKeyPress(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          aria-label={placeholder}
+          value={value}
+          placeholder={placeholder}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onKeyPress(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
@@ -143,7 +137,7 @@ const DescriptionFilterBase: React.FC<DescriptionFilterProps> = ({
       <FilterInput
         placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: filterType })}
         value={value}
-        onChange={(text: string) => setValue(text)}
+        onChange={(val: string) => setValue(val)}
         onKeyPress={onKeyPress(router, 'description', { ...initialCostModelsQuery, ...query }, { value, setValue })}
       />
     ) : null;
@@ -218,7 +212,7 @@ const NameFilterBase: React.FC<NameFilterProps> = ({
       <FilterInput
         placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: filterType })}
         value={value}
-        onChange={(text: string) => setValue(text)}
+        onChange={(val: string) => setValue(val)}
         onKeyPress={onKeyPress(router, 'name', { ...initialCostModelsQuery, ...query }, { value, setValue })}
       />
     ) : null;
@@ -300,7 +294,7 @@ const SourceTypeFilterBase: React.FC<SourceTypeFilterProps> = ({
         isOpen={isOpen}
         toggle={
           <DropdownToggle
-            onToggle={(value: boolean) => {
+            onToggle={(_evt, value: boolean) => {
               setIsOpen(value);
             }}
             id={id}
diff --git a/src/routes/costModels/costModelsDetails/utils/table.tsx b/src/routes/costModels/costModelsDetails/utils/table.tsx
index 32ada6f0fe..bc1349587c 100644
--- a/src/routes/costModels/costModelsDetails/utils/table.tsx
+++ b/src/routes/costModels/costModelsDetails/utils/table.tsx
@@ -71,7 +71,7 @@ export function getRowsByStateName(stateName: string, data: any) {
 }
 
 export function createOnSort(cells: ICell[], query: CostModelsQuery, router: RouteComponentProps) {
-  return function (_event, index: number, direction: SortByDirection) {
+  return function (_evt, index: number, direction: SortByDirection) {
     const name = cells[index] && cells[index].data ? cells[index].data.orderName : null;
     if (name === null) {
       return;
@@ -94,7 +94,9 @@ export function createActions(stateName: string, canWrite: boolean, actions: IAc
       ...action,
       isDisabled: !canWrite,
       style: !canWrite ? { pointerEvents: 'auto' } : undefined,
-      tooltip: !canWrite ? action.tooltip : undefined,
+      tooltipProps: {
+        content: !canWrite ? action.tooltipProps?.content : undefined,
+      },
     };
   });
 }
diff --git a/src/routes/costModels/costModelsDetails/utils/toolbar.tsx b/src/routes/costModels/costModelsDetails/utils/toolbar.tsx
index 2770d6680a..2cffaaa085 100644
--- a/src/routes/costModels/costModelsDetails/utils/toolbar.tsx
+++ b/src/routes/costModels/costModelsDetails/utils/toolbar.tsx
@@ -1,5 +1,6 @@
 import type { PaginationProps } from '@patternfly/react-core';
-import { Pagination, PaginationVariant, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -75,11 +76,11 @@ const CostModelsFilterSelectorBase: React.FC<CostModelsFilterSelectorProps> = ({
   return (
     <Select
       isOpen={isOpen}
-      onSelect={(_event, value: string) => {
+      onSelect={(_evt, value: string) => {
         updateFilterType(value);
         setIsOpen(false);
       }}
-      onToggle={setIsOpen}
+      onToggle={(_evt, isExpanded) => setIsOpen(isExpanded)}
       selections={filterType}
       toggleIcon={<FilterIcon />}
       variant={SelectVariant.single}
diff --git a/src/routes/details/awsDetails/awsDetails.tsx b/src/routes/details/awsDetails/awsDetails.tsx
index 600036b5ff..a615066300 100644
--- a/src/routes/details/awsDetails/awsDetails.tsx
+++ b/src/routes/details/awsDetails/awsDetails.tsx
@@ -204,7 +204,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.aws),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/azureDetails/azureDetails.tsx b/src/routes/details/azureDetails/azureDetails.tsx
index 869a2fad1c..6704c0b51e 100644
--- a/src/routes/details/azureDetails/azureDetails.tsx
+++ b/src/routes/details/azureDetails/azureDetails.tsx
@@ -191,7 +191,7 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.azure),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/components/actions/actions.tsx b/src/routes/details/components/actions/actions.tsx
index 1544553046..a25d1914dd 100644
--- a/src/routes/details/components/actions/actions.tsx
+++ b/src/routes/details/components/actions/actions.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
 import type { ProviderType } from 'api/providers';
 import type { ReportPathsType } from 'api/reports/report';
 import messages from 'locales/messages';
@@ -125,7 +125,7 @@ class DetailsActionsBase extends React.Component<DetailsActionsProps, DetailsAct
       <>
         <Dropdown
           onSelect={this.handleOnSelect}
-          toggle={<KebabToggle onToggle={this.handleOnToggle} />}
+          toggle={<KebabToggle onToggle={(_evt, isOpen) => this.handleOnToggle(isOpen)} />}
           isOpen={this.state.isDropdownOpen}
           isPlain
           position="right"
diff --git a/src/routes/details/components/breakdown/breakdownHeader.scss b/src/routes/details/components/breakdown/breakdownHeader.scss
index 2c20d57eba..44af568377 100644
--- a/src/routes/details/components/breakdown/breakdownHeader.scss
+++ b/src/routes/details/components/breakdown/breakdownHeader.scss
@@ -1,11 +1,11 @@
 .breadcrumbOverride {
-  .pf-c-breadcrumb__item:not(:last-child) {
-    margin-left: var(--pf-c-breadcrumb__item--MarginRight);
+  .pf-v5-c-breadcrumb__item:not(:last-child) {
+    margin-left: var(--pf-v5-c-breadcrumb__item--MarginRight);
     margin-right: 0;
   }
 
-  .pf-c-breadcrumb__item-divider {
+  .pf-v5-c-breadcrumb__item-divider {
     margin-left: 0;
-    margin-right: var(--pf-c-breadcrumb__item-divider--MarginLeft);
+    margin-right: var(--pf-v5-c-breadcrumb__item-divider--MarginLeft);
   }
 }
diff --git a/src/routes/details/components/breakdown/breakdownHeader.tsx b/src/routes/details/components/breakdown/breakdownHeader.tsx
index 3c098b8d94..01126ca97b 100644
--- a/src/routes/details/components/breakdown/breakdownHeader.tsx
+++ b/src/routes/details/components/breakdown/breakdownHeader.tsx
@@ -166,9 +166,9 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> {
       <header style={styles.header}>
         <div style={styles.headerContent}>
           <nav aria-label={intl.formatMessage(messages.breakdownBackToDetailsAriaLabel)} className="breadcrumbOverride">
-            <ol className="pf-c-breadcrumb__list">
-              <li className="pf-c-breadcrumb__item">
-                <span className="pf-c-breadcrumb__item-divider">
+            <ol className="pf-v5-c-breadcrumb__list">
+              <li className="pf-v5-c-breadcrumb__item">
+                <span className="pf-v5-c-breadcrumb__item-divider">
                   <AngleLeftIcon />
                 </span>
                 {this.getBackToLink(groupByKey)}
diff --git a/src/routes/details/components/cluster/clusterModal.scss b/src/routes/details/components/cluster/clusterModal.scss
index cea094671c..d247c868b9 100644
--- a/src/routes/details/components/cluster/clusterModal.scss
+++ b/src/routes/details/components/cluster/clusterModal.scss
@@ -1,10 +1,10 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .modalOverride {
-  & .pf-c-modal-box__body {
-    margin-top: var(--pf-global--spacer--lg);
+  & .pf-v5-c-modal-box__body {
+    margin-top: var(--pf-v5-global--spacer--lg);
   }
-  & .pf-c-modal-box__footer {
+  & .pf-v5-c-modal-box__footer {
     display: none;
   }
 }
diff --git a/src/routes/details/components/columnManagement/columnManagementModal.tsx b/src/routes/details/components/columnManagement/columnManagementModal.tsx
index bb1b44f104..c9ff23eb95 100644
--- a/src/routes/details/components/columnManagement/columnManagementModal.tsx
+++ b/src/routes/details/components/columnManagement/columnManagementModal.tsx
@@ -97,7 +97,7 @@ export class ColumnManagementModalBase extends React.Component<ColumnManagementM
     return hiddenColumns.has(value);
   };
 
-  private handleChange = (checked, event) => {
+  private handleChange = event => {
     const hiddenColumns = this.getHidden(event.target.id);
     this.setState({ hiddenColumns });
   };
diff --git a/src/routes/details/components/summary/summaryModal.scss b/src/routes/details/components/summary/summaryModal.scss
index 3d7cdac6d5..e63b566f17 100644
--- a/src/routes/details/components/summary/summaryModal.scss
+++ b/src/routes/details/components/summary/summaryModal.scss
@@ -2,14 +2,14 @@
 
 .modalOverride {
   /* Workaround for isLarge not working properly */
-  &.pf-c-modal-box {
+  &.pf-v5-c-modal-box {
     height: 700px;
     width: 600px;
   }
-  & .pf-c-modal-box__body {
+  & .pf-v5-c-modal-box__body {
     margin-top: var(global_spacer_lg);
   }
-  & .pf-c-modal-box__footer {
+  & .pf-v5-c-modal-box__footer {
     display: none;
   }
 }
diff --git a/src/routes/details/gcpDetails/gcpDetails.tsx b/src/routes/details/gcpDetails/gcpDetails.tsx
index a0e3690acd..17cb4a3683 100644
--- a/src/routes/details/gcpDetails/gcpDetails.tsx
+++ b/src/routes/details/gcpDetails/gcpDetails.tsx
@@ -191,7 +191,7 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.gcp),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/ibmDetails/ibmDetails.tsx b/src/routes/details/ibmDetails/ibmDetails.tsx
index 61010826c3..c79be9d879 100644
--- a/src/routes/details/ibmDetails/ibmDetails.tsx
+++ b/src/routes/details/ibmDetails/ibmDetails.tsx
@@ -192,7 +192,7 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.ibm),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/ociDetails/ociDetails.tsx b/src/routes/details/ociDetails/ociDetails.tsx
index ce40b949df..22b16fe93c 100644
--- a/src/routes/details/ociDetails/ociDetails.tsx
+++ b/src/routes/details/ociDetails/ociDetails.tsx
@@ -191,7 +191,7 @@ class OciDetails extends React.Component<OciDetailsProps, OciDetailsState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.oci),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/ocpBreakdown/optimizationsBreakdown.tsx b/src/routes/details/ocpBreakdown/optimizationsBreakdown.tsx
index ec8be48b57..2e21d633bb 100644
--- a/src/routes/details/ocpBreakdown/optimizationsBreakdown.tsx
+++ b/src/routes/details/ocpBreakdown/optimizationsBreakdown.tsx
@@ -78,7 +78,7 @@ const OptimizationsBreakdown: React.FC<OptimizationsBreakdownProps> = () => {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/ocpDetails/ocpDetails.tsx b/src/routes/details/ocpDetails/ocpDetails.tsx
index 509c7701bb..afae21beac 100644
--- a/src/routes/details/ocpDetails/ocpDetails.tsx
+++ b/src/routes/details/ocpDetails/ocpDetails.tsx
@@ -240,7 +240,7 @@ class OcpDetails extends React.Component<OcpDetailsProps, OcpDetailsState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/details/rhelDetails/rhelDetails.tsx b/src/routes/details/rhelDetails/rhelDetails.tsx
index 2d0e462d96..b42d6d4140 100644
--- a/src/routes/details/rhelDetails/rhelDetails.tsx
+++ b/src/routes/details/rhelDetails/rhelDetails.tsx
@@ -234,7 +234,7 @@ class RhelDetails extends React.Component<RhelDetailsProps, RhelDetailsState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/explorer/explorer.tsx b/src/routes/explorer/explorer.tsx
index b22f065dcd..18dc0a0d54 100644
--- a/src/routes/explorer/explorer.tsx
+++ b/src/routes/explorer/explorer.tsx
@@ -243,7 +243,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.explorerTitle),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/explorer/explorerDateRange.tsx b/src/routes/explorer/explorerDateRange.tsx
index 2e1365a60c..7006649322 100644
--- a/src/routes/explorer/explorerDateRange.tsx
+++ b/src/routes/explorer/explorerDateRange.tsx
@@ -1,6 +1,6 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
@@ -44,8 +44,8 @@ class ExplorerDateRangeBase extends React.Component<ExplorerDateRangeProps, Expl
         id="dateRangeSelect"
         isDisabled={isDisabled}
         isOpen={isSelectOpen}
-        onSelect={this.handleOnSelect}
-        onToggle={this.handleOnToggle}
+        onSelect={(_evt, value) => this.handleOnSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleOnToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -70,7 +70,7 @@ class ExplorerDateRangeBase extends React.Component<ExplorerDateRangeProps, Expl
     return selectOptions;
   };
 
-  private handleOnSelect = (event, selection: ExplorerDateRangeOption) => {
+  private handleOnSelect = (selection: ExplorerDateRangeOption) => {
     const { onSelected } = this.props;
 
     if (onSelected) {
diff --git a/src/routes/explorer/explorerFilter.scss b/src/routes/explorer/explorerFilter.scss
index 3cee3268ea..70ce63a227 100644
--- a/src/routes/explorer/explorerFilter.scss
+++ b/src/routes/explorer/explorerFilter.scss
@@ -1,7 +1,7 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .explorerToolbarOverride {
-  .pf-c-toolbar__content {
+  .pf-v5-c-toolbar__content {
     padding-left: 0;
   }
 }
diff --git a/src/routes/explorer/explorerTable.scss b/src/routes/explorer/explorerTable.scss
index 02c5737e02..eec90e1a43 100644
--- a/src/routes/explorer/explorerTable.scss
+++ b/src/routes/explorer/explorerTable.scss
@@ -1,15 +1,15 @@
 @import url("~@patternfly/patternfly/base/patternfly-variables.css");
 
 .explorerTableOverride {
-  &.pf-c-table {
-    .pf-c-table__sticky-column {
+  &.pf-v5-c-table {
+    .pf-v5-c-table__sticky-column {
       z-index: 99;
     }
   }
-  &.pf-c-table tbody .pf-c-table__check input {
+  &.pf-v5-c-table tbody .pf-v5-c-table__check input {
     margin-top: .40rem;
   }
   .stickyColumn {
-    --pf-c-table--cell--Width: 1%;
+    --pf-v5-c-table--cell--Width: 1%;
   }
 }
diff --git a/src/routes/explorer/explorerTable.tsx b/src/routes/explorer/explorerTable.tsx
index 8cdf0018a0..2f07af0a72 100644
--- a/src/routes/explorer/explorerTable.tsx
+++ b/src/routes/explorer/explorerTable.tsx
@@ -1,12 +1,21 @@
 import './explorerTable.scss';
 
-import { Bullseye, EmptyState, EmptyStateBody, EmptyStateIcon, Label, Spinner, Tooltip } from '@patternfly/react-core';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Label,
+  Spinner,
+  Tooltip,
+} from '@patternfly/react-core';
 import { CalculatorIcon } from '@patternfly/react-icons/dist/esm/icons/calculator-icon';
 import type { ThProps } from '@patternfly/react-table';
 import {
   InnerScrollContainer,
   SortByDirection,
-  TableComposable,
+  Table /* data-codemods */,
   TableVariant,
   Tbody,
   Td,
@@ -355,7 +364,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
     }
     return (
       <EmptyState>
-        <EmptyStateIcon icon={CalculatorIcon} />
+        <EmptyStateHeader icon={<EmptyStateIcon icon={CalculatorIcon} />} />
         <EmptyStateBody>{intl.formatMessage(messages.detailsEmptyState)}</EmptyStateBody>
       </EmptyState>
     );
@@ -391,7 +400,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
     };
   };
 
-  private handleOnSelect = (event, isSelected, rowId) => {
+  private handleOnSelect = (isSelected, rowId) => {
     const { onSelected } = this.props;
     const { rows } = this.state;
 
@@ -414,7 +423,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
     });
   };
 
-  private handleOnSort = (event, index, direction) => {
+  private handleOnSort = (index, direction) => {
     const { onSort } = this.props;
     const { columns } = this.state;
 
@@ -435,7 +444,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
 
     return (
       <InnerScrollContainer>
-        <TableComposable
+        <Table
           aria-label={intl.formatMessage(messages.explorerTableAriaLabel)}
           className="explorerTableOverride"
           gridBreakPoint=""
@@ -503,9 +512,9 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
                         key={`cell-${cellIndex}-${rowIndex}`}
                         ref={this.selectColRef}
                         select={{
-                          disable: row.selectionDisabled, // Disable select for "no-project"
+                          isDisabled: row.selectionDisabled, // Disable select for "no-project"
                           isSelected: row.selected,
-                          onSelect: (_event, isSelected) => this.handleOnSelect(_event, isSelected, rowIndex),
+                          onSelect: (_evt, isSelected) => this.handleOnSelect(isSelected, rowIndex),
                           rowIndex,
                         }}
                         stickyMinWidth={`${selectColWidth}px`}
@@ -548,7 +557,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
               ))
             )}
           </Tbody>
-        </TableComposable>
+        </Table>
         {rows.length === 0 && <div style={styles.emptyState}>{this.getEmptyState()}</div>}
       </InnerScrollContainer>
     );
diff --git a/src/routes/optimizations/optimizations.tsx b/src/routes/optimizations/optimizations.tsx
index bd2c6ae682..1549d825fa 100644
--- a/src/routes/optimizations/optimizations.tsx
+++ b/src/routes/optimizations/optimizations.tsx
@@ -81,7 +81,7 @@ const Optimizations: React.FC<OptimizationsProps> = () => {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/overview/components/chartComparison.tsx b/src/routes/overview/components/chartComparison.tsx
index 45055453d3..79d0d2bafb 100644
--- a/src/routes/overview/components/chartComparison.tsx
+++ b/src/routes/overview/components/chartComparison.tsx
@@ -1,5 +1,5 @@
-import type { SelectOptionObject } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React from 'react';
 
 interface ChartComparisonOwnProps {
@@ -44,8 +44,8 @@ class ChartComparisonBase extends React.Component<ChartComparisonProps, ChartCom
         id="comparisonSelect"
         isDisabled={isDisabled}
         isOpen={isSelectOpen}
-        onSelect={this.handleSelect}
-        onToggle={this.handleToggle}
+        onSelect={(_evt, value) => this.handleSelect(value)}
+        onToggle={(_evt, isExpanded) => this.handleToggle(isExpanded)}
         selections={selection}
         variant={SelectVariant.single}
       >
@@ -71,7 +71,7 @@ class ChartComparisonBase extends React.Component<ChartComparisonProps, ChartCom
     return selectOptions;
   };
 
-  private handleSelect = (event, selection: ComparisonOption) => {
+  private handleSelect = (selection: ComparisonOption) => {
     const { onItemClicked } = this.props;
 
     if (onItemClicked) {
diff --git a/src/routes/overview/components/optimizationsSummary/optimizationsSummary.scss b/src/routes/overview/components/optimizationsSummary/optimizationsSummary.scss
index 8db4e37df4..7a01575bbb 100644
--- a/src/routes/overview/components/optimizationsSummary/optimizationsSummary.scss
+++ b/src/routes/overview/components/optimizationsSummary/optimizationsSummary.scss
@@ -2,8 +2,8 @@
 
 .skeleton {
   height: 125px;
-  margin-bottom: var(--pf-global--spacer--md);
-  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
 }
 
 .summary {
diff --git a/src/routes/overview/overview.scss b/src/routes/overview/overview.scss
index 8cf029c678..eb721c917c 100644
--- a/src/routes/overview/overview.scss
+++ b/src/routes/overview/overview.scss
@@ -1,5 +1,5 @@
 .headerOverride {
-  &.pf-c-page__main-section {
-    --pf-c-page__main-section--PaddingBottom: 0;
+  &.pf-v5-c-page__main-section {
+    --pf-v5-c-page__main-section--PaddingBottom: 0;
   }
 }
diff --git a/src/routes/settings/costCategory/costCategory.tsx b/src/routes/settings/costCategory/costCategory.tsx
index 71549b5eea..86b373c131 100644
--- a/src/routes/settings/costCategory/costCategory.tsx
+++ b/src/routes/settings/costCategory/costCategory.tsx
@@ -80,7 +80,7 @@ const CostCategory: React.FC<CostCategoryProps> = ({ canWrite }) => {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap b/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap
index 0251cde18b..12b6b07f3c 100644
--- a/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap
+++ b/src/routes/settings/costModels/components/__snapshots__/rateTable.test.tsx.snap
@@ -3,22 +3,26 @@
 exports[`rate-table sort by metric & measurement 1`] = `
 [
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"Node"}
   </td>,
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"}
   </td>,
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"}
   </td>,
   <td
-    class=""
+    class="pf-v5-c-table__td"
+    tabindex="-1"
   >
     {value, select, cpu {CPU} cluster {Cluster} memory {Memory} node {Node} persistent_volume_claims {Persistent volume claims} storage {Storage} other {}}{"value":"CPU"}
   </td>,
diff --git a/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap b/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap
index d0379a6883..10ecfed78b 100644
--- a/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap
+++ b/src/routes/settings/costModels/components/__snapshots__/warningIcon.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`warning icon 1`] = `
 <svg
   aria-hidden="true"
-  fill="orange"
+  class="pf-v5-svg"
+  color="orange"
+  fill="currentColor"
   height="1em"
   role="img"
-  style="vertical-align: -0.125em;"
   viewBox="0 0 576 512"
   width="1em"
 >
diff --git a/src/routes/settings/costModels/components/errorState.tsx b/src/routes/settings/costModels/components/errorState.tsx
index def15a71b6..ff767b9508 100644
--- a/src/routes/settings/costModels/components/errorState.tsx
+++ b/src/routes/settings/costModels/components/errorState.tsx
@@ -3,6 +3,8 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
   Stack,
@@ -31,16 +33,17 @@ type ErrorStateProps = ErrorEmptyProps & OwnProps;
 export const ErrorState: React.FC<ErrorStateProps> = ({ variant, actionButton, title, description }) => {
   return (
     <EmptyState variant={variant}>
-      <EmptyStateIcon icon={ExclamationCircleIcon} color={global_DangerColor_100.value} />
-      <Title headingLevel="h4" size={TitleSizes.lg}>
-        {title}
-      </Title>
+      <EmptyStateHeader
+        titleText={<>{title}</>}
+        icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={global_DangerColor_100.value} />}
+        headingLevel="h4"
+      />
       <EmptyStateBody>
         <Stack>
           <StackItem>{description}</StackItem>
         </Stack>
       </EmptyStateBody>
-      {actionButton}
+      <EmptyStateFooter>{actionButton}</EmptyStateFooter>
     </EmptyState>
   );
 };
@@ -68,7 +71,7 @@ export const SourceStepErrorStateBase: React.FC<SourcesErrorStateProps> = ({ int
       </StackItem>
       <StackItem>
         <ErrorState
-          variant={EmptyStateVariant.large}
+          variant={EmptyStateVariant.lg}
           actionButton={actionButton}
           description={description}
           title={title}
@@ -108,7 +111,7 @@ export const SourcesModalErrorStateBase: React.FC<SourcesModalErrorProps> = ({ i
   });
   const actionButton = <Button onClick={onRefresh}>{intl.formatMessage(messages.costModelsRefreshDialog)}</Button>;
   return (
-    <ErrorState variant={EmptyStateVariant.large} actionButton={actionButton} description={description} title={title} />
+    <ErrorState variant={EmptyStateVariant.lg} actionButton={actionButton} description={description} title={title} />
   );
 };
 
diff --git a/src/routes/settings/costModels/components/inputs/rateInput.tsx b/src/routes/settings/costModels/components/inputs/rateInput.tsx
index b64e695a91..a7d378fff9 100644
--- a/src/routes/settings/costModels/components/inputs/rateInput.tsx
+++ b/src/routes/settings/costModels/components/inputs/rateInput.tsx
@@ -1,6 +1,14 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
 import type { FormGroupProps, TextInputProps } from '@patternfly/react-core';
-import { FormGroup, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+import {
+  FormGroup,
+  HelperText,
+  HelperTextItem,
+  InputGroup,
+  InputGroupItem,
+  InputGroupText,
+  TextInput,
+} from '@patternfly/react-core';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
 import React from 'react';
@@ -44,28 +52,31 @@ const RateInputBase: React.FC<RateInputBaseProps> = ({
       style={style}
       fieldId={fieldId}
       label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
-      helperTextInvalid={
-        helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
-      }
-      validated={validated}
     >
       <InputGroup>
         <InputGroupText style={styles.currency}>
           {intl.formatMessage(messages.currencyUnits, { units: currencyUnits })}
         </InputGroupText>
-        <TextInput
-          onBlur={onBlur}
-          isRequired
-          type="text"
-          aria-label={intl.formatMessage(messages.costModelsWizardRateAriaLabel)}
-          id={fieldId}
-          placeholder={formatCurrencyRaw(0, currencyUnits, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-          value={value}
-          onChange={onChange}
-          onKeyDown={handleOnKeyDown}
-          validated={validated}
-        />
+        <InputGroupItem isFill>
+          <TextInput
+            onBlur={onBlur}
+            isRequired
+            type="text"
+            aria-label={intl.formatMessage(messages.costModelsWizardRateAriaLabel)}
+            id={fieldId}
+            placeholder={formatCurrencyRaw(0, currencyUnits, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+            value={value}
+            onChange={onChange}
+            onKeyDown={handleOnKeyDown}
+            validated={validated}
+          />
+        </InputGroupItem>
       </InputGroup>
+      {validated === 'error' && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/src/routes/settings/costModels/components/inputs/selector.tsx b/src/routes/settings/costModels/components/inputs/selector.tsx
index 7129c8a601..c2ab87da3d 100644
--- a/src/routes/settings/costModels/components/inputs/selector.tsx
+++ b/src/routes/settings/costModels/components/inputs/selector.tsx
@@ -1,6 +1,8 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { FormGroupProps, FormSelectProps, SelectOptionObject } from '@patternfly/react-core';
-import { FormGroup, Select, SelectDirection, SelectOption, SelectVariant } from '@patternfly/react-core';
+import type { FormGroupProps, FormSelectProps } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem } from '@patternfly/react-core';
+import type { SelectOptionObject } from '@patternfly/react-core/deprecated';
+import { Select, SelectDirection, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { intl as defaultIntl } from 'components/i18n';
 import React, { useEffect, useState } from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -84,10 +86,6 @@ const SelectorBase: React.FC<SelectorProps> = ({
       style={style}
       fieldId={id}
       label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
-      helperTextInvalid={
-        helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
-      }
-      validated={isInvalid ? 'error' : 'default'}
     >
       <Select
         id={id}
@@ -100,18 +98,24 @@ const SelectorBase: React.FC<SelectorProps> = ({
         direction={direction}
         menuAppendTo={appendMenuTo}
         isOpen={isOpen}
-        onToggle={() => setIsOpen(!isOpen)}
-        onSelect={(e, sel: SelectorOption) => {
+        onSelect={(_evt, sel: SelectorOption) => {
           setSelection(sel);
-          onChange(sel.value, null);
+          onChange(null, sel.value);
           setIsOpen(false);
         }}
+        onToggle={() => setIsOpen(!isOpen)}
         selections={selection}
+        validated={isInvalid ? 'error' : 'default'}
       >
         {getSelectorOptions().map(opt => (
           <SelectOption key={`${opt.value}`} value={opt} description={opt.description} />
         ))}
       </Select>
+      {isInvalid && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/src/routes/settings/costModels/components/inputs/simpleInput.tsx b/src/routes/settings/costModels/components/inputs/simpleInput.tsx
index 172e848225..1afdc6f8f0 100644
--- a/src/routes/settings/costModels/components/inputs/simpleInput.tsx
+++ b/src/routes/settings/costModels/components/inputs/simpleInput.tsx
@@ -1,6 +1,6 @@
 import type { MessageDescriptor } from '@formatjs/intl/src/types';
-import type { FormGroupProps, TextInputProps } from '@patternfly/react-core';
-import { FormGroup, TextInput } from '@patternfly/react-core';
+import type { TextInputProps } from '@patternfly/react-core';
+import { FormGroup, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import { intl as defaultIntl } from 'components/i18n';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -11,12 +11,11 @@ interface SimpleInputOwnProps {
   label?: MessageDescriptor | string;
 }
 
-type SimpleInputFormGroupProps = Pick<FormGroupProps, 'onBlur' | 'isRequired' | 'placeholder' | 'style' | 'validated'>;
-type SimpleInputTextInputProps = Pick<TextInputProps, 'id' | 'onChange' | 'value'>;
-type SimpleInputProps = SimpleInputOwnProps &
-  SimpleInputTextInputProps &
-  SimpleInputFormGroupProps &
-  WrappedComponentProps;
+type SimpleInputTextInputProps = Pick<
+  TextInputProps,
+  'onChange' | 'onBlur' | 'id' | 'isRequired' | 'placeholder' | 'style' | 'validated' | 'value'
+>;
+type SimpleInputProps = SimpleInputOwnProps & SimpleInputTextInputProps & WrappedComponentProps;
 
 const SimpleInputBase: React.FC<SimpleInputProps> = ({
   id,
@@ -37,10 +36,6 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
       style={style}
       fieldId={id}
       label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
-      helperTextInvalid={
-        helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
-      }
-      validated={validated}
     >
       <TextInput
         validated={validated}
@@ -51,6 +46,11 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
         isRequired={isRequired}
         placeholder={placeholder}
       />
+      {validated === 'error' && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };
diff --git a/src/routes/settings/costModels/components/paginationToolbarTemplate.tsx b/src/routes/settings/costModels/components/paginationToolbarTemplate.tsx
index 4950540639..6da43e20ca 100644
--- a/src/routes/settings/costModels/components/paginationToolbarTemplate.tsx
+++ b/src/routes/settings/costModels/components/paginationToolbarTemplate.tsx
@@ -1,23 +1,23 @@
-import type { PaginationProps } from '@patternfly/react-core';
+import type { PaginationProps, PaginationTitles } from '@patternfly/react-core';
 import { Pagination, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
-import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 
 interface PaginationToolbarTemplateProps extends PaginationProps, WrappedComponentProps {
   id?: string;
+  titles?: PaginationTitles;
 }
 
 export const PaginationToolbarTemplateBase: React.FC<PaginationToolbarTemplateProps> = ({
   id,
-  intl,
   itemCount,
   perPage,
   page,
   variant,
   onPerPageSelect,
   onSetPage,
+  titles,
 }) => {
   return (
     <Toolbar id={id}>
@@ -30,12 +30,7 @@ export const PaginationToolbarTemplateBase: React.FC<PaginationToolbarTemplatePr
             page={page}
             onSetPage={onSetPage}
             onPerPageSelect={onPerPageSelect}
-            titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
-                title: intl.formatMessage(messages.createCostModelTitle),
-                placement: 'bottom',
-              }),
-            }}
+            titles={titles}
           />
         </ToolbarItem>
       </ToolbarContent>
diff --git a/src/routes/settings/costModels/components/priceListToolbar.tsx b/src/routes/settings/costModels/components/priceListToolbar.tsx
index 0a56d92cdf..fd156fbf61 100644
--- a/src/routes/settings/costModels/components/priceListToolbar.tsx
+++ b/src/routes/settings/costModels/components/priceListToolbar.tsx
@@ -58,7 +58,7 @@ export const PriceListToolbar: React.FC<PriceListToolbarProps> = ({
         <ToolbarItem>{button}</ToolbarItem>
         <ToolbarItem variant={ToolbarItemVariant.pagination}>{pagination}</ToolbarItem>
       </ToolbarContent>
-      <hr className="pf-c-divider" />
+      <hr className="pf-v5-c-divider" />
     </Toolbar>
   );
 };
diff --git a/src/routes/settings/costModels/components/rateForm/rateForm.tsx b/src/routes/settings/costModels/components/rateForm/rateForm.tsx
index e8a540dd84..564b630a0f 100644
--- a/src/routes/settings/costModels/components/rateForm/rateForm.tsx
+++ b/src/routes/settings/costModels/components/rateForm/rateForm.tsx
@@ -103,7 +103,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
         value={description}
         validated={errors.description ? 'error' : 'default'}
         helperTextInvalid={errors.description}
-        onChange={setDescription}
+        onChange={(_evt, value) => setDescription(value)}
       />
       <Grid hasGutter>
         <GridItem span={6}>
@@ -115,7 +115,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
             label={intl.formatMessage(messages.metric)}
             placeholderText={intl.formatMessage(messages.select)}
             value={metric}
-            onChange={setMetric}
+            onChange={(_evt, value) => setMetric(value)}
             options={[
               ...metricOptions.map(opt => {
                 return {
@@ -142,7 +142,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
                   ? measurement
                   : getMeasurementLabel(measurement, metricsHash[metric][measurement].label_measurement_unit)
               }
-              onChange={setMeasurement}
+              onChange={(_evt, value) => setMeasurement(value)}
               placeholderText="Select..."
               options={[
                 ...measurementOptions.map(opt => {
@@ -197,7 +197,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
               currencyUnits={currencyUnits}
               fieldId="regular-rate"
               helperTextInvalid={errors.tieredRates}
-              onChange={setRegular}
+              onChange={(_evt, value) => setRegular(value)}
               style={style}
               validated={errors.tieredRates && regularDirty ? 'error' : 'default'}
               value={inputValue}
@@ -208,7 +208,7 @@ const RateFormBase: React.FC<RateFormProps> = ({ currencyUnits, intl = defaultIn
                 isRequired
                 style={style}
                 value={tagKey}
-                onChange={setTagKey}
+                onChange={(_evt, value) => setTagKey(value)}
                 id="tag-key"
                 label={messages.costModelsFilterTagKey}
                 placeholder={intl.formatMessage(messages.costModelsEnterTagKey)}
diff --git a/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx b/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx
index c4cf61ce88..95d28cf9f1 100644
--- a/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx
+++ b/src/routes/settings/costModels/components/rateForm/taggingRatesForm.tsx
@@ -53,7 +53,7 @@ const TaggingRatesFormBase: React.FC<TaggingRatesFormProps> = ({
                 label={messages.costModelsTagRateTableValue}
                 placeholder={intl.formatMessage(messages.costModelsEnterTagValue)}
                 value={tag.tagValue}
-                onChange={value => updateTag({ tagValue: value }, ix)}
+                onChange={(_evt, value) => updateTag({ tagValue: value }, ix)}
                 validated={tagValues[ix].isTagValueDirty && errors.tagValueValues[ix] ? 'error' : 'default'}
                 helperTextInvalid={errors.tagValueValues[ix]}
               />
@@ -63,7 +63,7 @@ const TaggingRatesFormBase: React.FC<TaggingRatesFormProps> = ({
                 currencyUnits={currencyUnits}
                 fieldId={`rate_${ix}`}
                 helperTextInvalid={errors.tagValues[ix]}
-                onChange={value => updateTag({ value }, ix)}
+                onChange={(_evt, value) => updateTag({ value }, ix)}
                 style={style}
                 validated={tagValues[ix].isDirty && errors.tagValues[ix] ? 'error' : 'default'}
                 value={tag.inputValue}
@@ -77,7 +77,7 @@ const TaggingRatesFormBase: React.FC<TaggingRatesFormProps> = ({
                 validated={errors.tagDescription[ix] ? 'error' : 'default'}
                 placeholder={intl.formatMessage(messages.costModelsEnterTagDesc)}
                 value={tag.description}
-                onChange={value => updateTag({ description: value }, ix)}
+                onChange={(_evt, value) => updateTag({ description: value }, ix)}
                 helperTextInvalid={errors.tagDescription[ix]}
               />
             </SplitItem>
diff --git a/src/routes/settings/costModels/components/rateTable.tsx b/src/routes/settings/costModels/components/rateTable.tsx
index 2bb69ada26..e7dc210727 100644
--- a/src/routes/settings/costModels/components/rateTable.tsx
+++ b/src/routes/settings/costModels/components/rateTable.tsx
@@ -2,7 +2,7 @@ import type { IActions, ThProps } from '@patternfly/react-table';
 import {
   ActionsColumn,
   ExpandableRowContent,
-  TableComposable,
+  Table /* data-codemods */,
   TableVariant,
   Tbody,
   Td,
@@ -88,7 +88,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
       direction: activeSortDirection,
       defaultDirection: 'asc',
     },
-    onSort: (_event, index, direction) => {
+    onSort: (_evt, index, direction) => {
       setActiveSortIndex(index);
       setActiveSortDirection(direction);
       sortCallback({ index, direction });
@@ -121,10 +121,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
         });
 
   return (
-    <TableComposable
-      aria-label={intl.formatMessage(messages.costModelsWizardCreatePriceList)}
-      variant={TableVariant.compact}
-    >
+    <Table aria-label={intl.formatMessage(messages.costModelsWizardCreatePriceList)} variant={TableVariant.compact}>
       <Thead>
         <Tr>
           {columns.map((col: { title?: string; sortable?: boolean }, i) => (
@@ -169,7 +166,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
               <Tr>
                 <Td colSpan={6}>
                   <ExpandableRowContent>
-                    <TableComposable borders={false} variant={TableVariant.compact}>
+                    <Table borders={false} variant={TableVariant.compact}>
                       <Thead>
                         <Tr>
                           {tagColumns.map((tag, tagIndex) => (
@@ -188,7 +185,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
                           </Tr>
                         ))}
                       </Tbody>
-                    </TableComposable>
+                    </Table>
                   </ExpandableRowContent>
                 </Td>
               </Tr>
@@ -196,7 +193,7 @@ const RateTableBase: React.FC<RateTableProps> = ({
           </Tbody>
         );
       })}
-    </TableComposable>
+    </Table>
   );
 };
 
diff --git a/src/routes/settings/costModels/components/toolbar/checkboxSelector.tsx b/src/routes/settings/costModels/components/toolbar/checkboxSelector.tsx
index 46b96144cd..cf2069bf30 100644
--- a/src/routes/settings/costModels/components/toolbar/checkboxSelector.tsx
+++ b/src/routes/settings/costModels/components/toolbar/checkboxSelector.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import React from 'react';
 import { WithStateMachine } from 'routes/settings/costModels/components/hoc/withStateMachine';
 import { selectMachineState } from 'routes/settings/costModels/components/logic/selectStateMachine';
diff --git a/src/routes/settings/costModels/components/toolbar/primarySelector.tsx b/src/routes/settings/costModels/components/toolbar/primarySelector.tsx
index a5c30ae2c8..d5645b8227 100644
--- a/src/routes/settings/costModels/components/toolbar/primarySelector.tsx
+++ b/src/routes/settings/costModels/components/toolbar/primarySelector.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import React from 'react';
 import { WithStateMachine } from 'routes/settings/costModels/components/hoc/withStateMachine';
diff --git a/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap b/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap
index 8b19b8da9d..2db1195f93 100644
--- a/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap
+++ b/src/routes/settings/costModels/costModel/__snapshots__/dialog.test.tsx.snap
@@ -2,17 +2,18 @@
 
 exports[`dialog title renders correctly with icon and title text 1`] = `
 <h1
-  class="pf-c-title pf-m-2xl"
+  class="pf-v5-c-title pf-m-2xl"
   data-ouia-component-id="OUIA-Generated-Title-1"
-  data-ouia-component-type="PF4/Title"
+  data-ouia-component-type="PF5/Title"
   data-ouia-safe="true"
 >
   <svg
     aria-hidden="true"
-    fill="orange"
+    class="pf-v5-svg"
+    color="orange"
+    fill="currentColor"
     height="1em"
     role="img"
-    style="vertical-align: -0.125em;"
     viewBox="0 0 576 512"
     width="1em"
   >
diff --git a/src/routes/settings/costModels/costModel/addSourceStep.tsx b/src/routes/settings/costModels/costModel/addSourceStep.tsx
index ed02f14add..20b7906330 100644
--- a/src/routes/settings/costModels/costModel/addSourceStep.tsx
+++ b/src/routes/settings/costModels/costModel/addSourceStep.tsx
@@ -1,5 +1,5 @@
 import { Pagination, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table /* data-codemods */, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import type { CostModel } from 'api/costModels';
 import type { Provider } from 'api/providers';
 import messages from 'locales/messages';
@@ -58,7 +58,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
       return <SourcesModalErrorState />;
     }
 
-    const onSelect = (_evt, isSelected, rowId) => {
+    const onSelect = (isSelected, rowId) => {
       if (rowId === -1) {
         const pageSelections = this.props.providers.reduce((acc, cur) => {
           // If assigned to another cost model, maintain original selection
@@ -146,7 +146,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
           }}
           filterInputProps={{
             id: 'assign-sources-modal-toolbar-input',
-            onChange: value =>
+            onChange: (value: string) =>
               this.props.updateFilter({
                 currentFilterType: 'name',
                 currentFilterValue: value,
@@ -184,7 +184,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
           }}
         />
         {sources.length > 0 && (
-          <TableComposable
+          <Table
             aria-label={intl.formatMessage(messages.costModelsAssignSources, { count: 1 })}
             variant={TableVariant.compact}
           >
@@ -192,7 +192,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
               <Tr>
                 <Th
                   select={{
-                    onSelect: (_evt, isSelecting) => onSelect(_evt, isSelecting, -1),
+                    onSelect: (_evt, isSelecting) => onSelect(isSelecting, -1),
                     isSelected: sources.filter(s => s.disableSelection || s.selected).length === sources.length,
                   }}
                 ></Th>
@@ -205,8 +205,8 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
                 <Tr key={rowIndex}>
                   <Td
                     select={{
-                      disable: s.disableSelection,
-                      onSelect: _evt => onSelect(_evt, !s.selected, rowIndex),
+                      isDisabled: s.disableSelection,
+                      onSelect: () => onSelect(!s.selected, rowIndex),
                       isSelected: s.selected,
                       rowIndex,
                     }}
@@ -217,7 +217,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         )}
         {sources.length === 0 && (
           <EmptyFilterState filter={this.props.filter} subTitle={messages.emptyFilterSourceStateSubtitle} />
@@ -231,7 +231,7 @@ class AddSourcesStepBase extends React.Component<AddSourcesStepProps, AddSources
                 perPage={this.props.pagination.perPage}
                 page={this.props.pagination.page}
                 titles={{
-                  paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                  paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                     title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                     placement: 'bottom',
                   }),
diff --git a/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx b/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx
index 887c2e78ed..6c3d80b126 100644
--- a/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx
+++ b/src/routes/settings/costModels/costModel/assignSourcesModalToolbar.tsx
@@ -1,6 +1,7 @@
 import type { PaginationProps } from '@patternfly/react-core';
 import {
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   Pagination,
   TextInput,
@@ -20,26 +21,28 @@ import { injectIntl } from 'react-intl';
 interface FilterInputProps {
   id: string;
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onSearch: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onSearch: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ id, placeholder = '', value, onChange, onSearch }) => {
   return (
     <InputGroup>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        id={id}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onSearch(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          value={value}
+          placeholder={placeholder}
+          id={id}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onSearch(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
@@ -83,7 +86,7 @@ export const AssignSourcesToolbarBase: React.FC<AssignSourcesToolbarBaseProps> =
             page={paginationProps.page}
             perPage={paginationProps.perPage}
             titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                 title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                 placement: 'top',
               }),
diff --git a/src/routes/settings/costModels/costModel/costModelInfo.tsx b/src/routes/settings/costModels/costModel/costModelInfo.tsx
index 3d2d2da292..241e162535 100644
--- a/src/routes/settings/costModels/costModel/costModelInfo.tsx
+++ b/src/routes/settings/costModels/costModel/costModelInfo.tsx
@@ -1,13 +1,12 @@
 import {
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   Grid,
   GridItem,
   PageSection,
   TabContent,
-  Title,
-  TitleSizes,
 } from '@patternfly/react-core';
 import { ErrorCircleOIcon } from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon';
 import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
@@ -93,10 +92,11 @@ class CostModelInfo extends React.Component<CostModelInfoProps, CostModelInfoSta
               </PageHeader>
               <PageSection>
                 <EmptyState>
-                  <EmptyStateIcon icon={ErrorCircleOIcon} />
-                  <Title headingLevel="h2" size={TitleSizes.lg}>
-                    {intl.formatMessage(messages.costModelsUUIDEmptyState)}
-                  </Title>
+                  <EmptyStateHeader
+                    titleText={<>{intl.formatMessage(messages.costModelsUUIDEmptyState)}</>}
+                    icon={<EmptyStateIcon icon={ErrorCircleOIcon} />}
+                    headingLevel="h2"
+                  />
                   <EmptyStateBody>
                     {intl.formatMessage(messages.costModelsUUIDEmptyStateDesc, {
                       uuid: this.props.router.params.uuid,
diff --git a/src/routes/settings/costModels/costModel/distribution.tsx b/src/routes/settings/costModels/costModel/distribution.tsx
index 7a9abbba75..871d5d87f1 100644
--- a/src/routes/settings/costModels/costModel/distribution.tsx
+++ b/src/routes/settings/costModels/costModel/distribution.tsx
@@ -1,14 +1,4 @@
-import {
-  Button,
-  ButtonVariant,
-  Card,
-  CardActions,
-  CardBody,
-  CardHeader,
-  CardHeaderMain,
-  Title,
-  TitleSizes,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Card, CardBody, CardHeader, Title, TitleSizes } from '@patternfly/react-core';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
 import React from 'react';
@@ -41,24 +31,27 @@ const DistributionCardBase: React.FC<Props> = ({
     <>
       {isUpdateDialogOpen && <UpdateDistributionDialog current={current} />}
       <Card style={styles.card}>
-        <CardHeader>
-          <CardHeaderMain>
-            <Title headingLevel="h2" size={TitleSizes.md}>
-              {intl.formatMessage(messages.costDistribution)}
-            </Title>
-          </CardHeaderMain>
-          <CardActions>
-            <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
-              <Button
-                aria-label={intl.formatMessage(messages.costModelsDistributionEdit)}
-                isAriaDisabled={!isWritePermission}
-                onClick={() => setCostModelDialog({ isOpen: true, name: 'updateDistribution' })}
-                variant={ButtonVariant.link}
-              >
-                {intl.formatMessage(messages.edit)}
-              </Button>
-            </ReadOnlyTooltip>
-          </CardActions>
+        <CardHeader
+          actions={{
+            actions: (
+              <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
+                <Button
+                  aria-label={intl.formatMessage(messages.costModelsDistributionEdit)}
+                  isAriaDisabled={!isWritePermission}
+                  onClick={() => setCostModelDialog({ isOpen: true, name: 'updateDistribution' })}
+                  variant={ButtonVariant.link}
+                >
+                  {intl.formatMessage(messages.edit)}
+                </Button>
+              </ReadOnlyTooltip>
+            ),
+            hasNoOffset: false,
+            className: undefined,
+          }}
+        >
+          <Title headingLevel="h2" size={TitleSizes.md}>
+            {intl.formatMessage(messages.costDistribution)}
+          </Title>
         </CardHeader>
         <CardBody style={styles.cardDescription}>{intl.formatMessage(messages.costModelsDistributionDesc)}</CardBody>
         <CardBody isFilled />
diff --git a/src/routes/settings/costModels/costModel/header.tsx b/src/routes/settings/costModels/costModel/header.tsx
index c29097b2e5..809166aac1 100644
--- a/src/routes/settings/costModels/costModel/header.tsx
+++ b/src/routes/settings/costModels/costModel/header.tsx
@@ -1,9 +1,6 @@
 import {
   Breadcrumb,
   BreadcrumbItem,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   List,
   ListItem,
   Split,
@@ -19,6 +16,7 @@ import {
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core/deprecated';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
 import React from 'react';
@@ -134,7 +132,7 @@ const Header: React.FC<Props> = ({
           </SplitItem>
           <SplitItem>
             <Dropdown
-              toggle={<KebabToggle onToggle={setDropdownIsOpen} />}
+              toggle={<KebabToggle onToggle={(_evt, isOpen) => setDropdownIsOpen(isOpen)} />}
               isOpen={dropdownIsOpen}
               onSelect={() => setDropdownIsOpen(false)}
               isPlain
diff --git a/src/routes/settings/costModels/costModel/markup.tsx b/src/routes/settings/costModels/costModel/markup.tsx
index 846de7951c..feab019451 100644
--- a/src/routes/settings/costModels/costModel/markup.tsx
+++ b/src/routes/settings/costModels/costModel/markup.tsx
@@ -1,14 +1,4 @@
-import {
-  Button,
-  ButtonVariant,
-  Card,
-  CardActions,
-  CardBody,
-  CardHeader,
-  CardHeaderMain,
-  Title,
-  TitleSizes,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Card, CardBody, CardHeader, Title, TitleSizes } from '@patternfly/react-core';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
 import React from 'react';
@@ -46,24 +36,27 @@ const MarkupCardBase: React.FC<Props> = ({
     <>
       {isUpdateDialogOpen && <UpdateMarkupDialog current={current} />}
       <Card style={styles.card}>
-        <CardHeader>
-          <CardHeaderMain>
-            <Title headingLevel="h2" size={TitleSizes.md}>
-              {intl.formatMessage(messages.markupOrDiscount)}
-            </Title>
-          </CardHeaderMain>
-          <CardActions>
-            <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
-              <Button
-                aria-label={intl.formatMessage(messages.editMarkup)}
-                isAriaDisabled={!isWritePermission}
-                onClick={() => setCostModelDialog({ isOpen: true, name: 'updateMarkup' })}
-                variant={ButtonVariant.link}
-              >
-                {intl.formatMessage(messages.edit)}
-              </Button>
-            </ReadOnlyTooltip>
-          </CardActions>
+        <CardHeader
+          actions={{
+            actions: (
+              <ReadOnlyTooltip key="edit" isDisabled={!isWritePermission}>
+                <Button
+                  aria-label={intl.formatMessage(messages.editMarkup)}
+                  isAriaDisabled={!isWritePermission}
+                  onClick={() => setCostModelDialog({ isOpen: true, name: 'updateMarkup' })}
+                  variant={ButtonVariant.link}
+                >
+                  {intl.formatMessage(messages.edit)}
+                </Button>
+              </ReadOnlyTooltip>
+            ),
+            hasNoOffset: false,
+            className: undefined,
+          }}
+        >
+          <Title headingLevel="h2" size={TitleSizes.md}>
+            {intl.formatMessage(messages.markupOrDiscount)}
+          </Title>
         </CardHeader>
         <CardBody style={styles.cardDescription}>{intl.formatMessage(messages.markupOrDiscountDesc)}</CardBody>
         <CardBody isFilled />
diff --git a/src/routes/settings/costModels/costModel/priceListTable.tsx b/src/routes/settings/costModels/costModel/priceListTable.tsx
index 21ce066283..4cf9ca233c 100644
--- a/src/routes/settings/costModels/costModel/priceListTable.tsx
+++ b/src/routes/settings/costModels/costModel/priceListTable.tsx
@@ -3,12 +3,11 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   List,
   ListItem,
   Pagination,
-  Title,
-  TitleSizes,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -274,7 +273,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                       }
                       onPerPageSelect={(_evt, perPage) => this.setState({ pagination: { page: 1, perPage } })}
                       titles={{
-                        paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                        paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                           title: intl.formatMessage(messages.priceList),
                           placement: 'top',
                         }),
@@ -293,10 +292,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                   search.metrics.length === 0 && (
                     <Bullseye>
                       <EmptyState>
-                        <EmptyStateIcon icon={PlusCircleIcon} />
-                        <Title headingLevel="h2" size={TitleSizes.lg}>
-                          {intl.formatMessage(messages.priceListEmptyRate)}
-                        </Title>
+                        <EmptyStateHeader
+                          titleText={<>{intl.formatMessage(messages.priceListEmptyRate)}</>}
+                          icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                          headingLevel="h2"
+                        />
                         <EmptyStateBody>{intl.formatMessage(messages.priceListEmptyRateDesc)}</EmptyStateBody>
                       </EmptyState>
                     </Bullseye>
@@ -310,9 +310,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           isDisabled: !isWritePermission,
                           // HACK: to display tooltip on disable
                           style: !isWritePermission ? { pointerEvents: 'auto' } : undefined,
-                          tooltip: !isWritePermission ? (
-                            <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
-                          ) : undefined,
+                          tooltipProps: {
+                            content: !isWritePermission ? (
+                              <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
+                            ) : undefined,
+                          },
                           onClick: (_evt, _rowIndex, rowData) => {
                             this.setState({
                               deleteRate: null,
@@ -329,9 +331,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           isDisabled: !isWritePermission,
                           // HACK: to display tooltip on disable
                           style: !isWritePermission ? { pointerEvents: 'auto' } : {},
-                          tooltip: !isWritePermission ? (
-                            <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
-                          ) : undefined,
+                          tooltipProps: {
+                            content: !isWritePermission ? (
+                              <div>{intl.formatMessage(messages.readOnlyPermissions)}</div>
+                            ) : undefined,
+                          },
                           onClick: (_evt, _rowIndex, rowData) => {
                             const rowIndex = rowData.data.stateIndex;
                             this.setState({
@@ -372,7 +376,7 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                               })
                             }
                             titles={{
-                              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                                 title: intl.formatMessage(messages.priceList),
                                 placement: 'bottom',
                               }),
diff --git a/src/routes/settings/costModels/costModel/sourcesTable.tsx b/src/routes/settings/costModels/costModel/sourcesTable.tsx
index 6292de580a..cf2f15ddce 100644
--- a/src/routes/settings/costModels/costModel/sourcesTable.tsx
+++ b/src/routes/settings/costModels/costModel/sourcesTable.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
 import type { IRow } from '@patternfly/react-table';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { TableGridBreakpoint } from '@patternfly/react-table';
 import messages from 'locales/messages';
 import React from 'react';
@@ -28,7 +28,7 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
   const rows: (IRow | string[])[] = costModels.length > 0 ? costModels[0].sources : [];
 
   return (
-    <TableComposable
+    <Table
       aria-label={intl.formatMessage(messages.costModelsSourceTableAriaLabel)}
       gridBreakPoint={TableGridBreakpoint.grid2xl}
       variant={TableVariant.compact}
@@ -61,8 +61,8 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
                 <Button
                   aria-label={intl.formatMessage(messages.costModelsSourceDelete)}
                   isAriaDisabled={!canWrite}
-                  isSmall
                   onClick={() => showDeleteDialog(rowIndex)}
+                  size="sm"
                   variant={ButtonVariant.plain}
                 >
                   <MinusCircleIcon />
@@ -72,7 +72,7 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
 
diff --git a/src/routes/settings/costModels/costModel/sourcesToolbar.tsx b/src/routes/settings/costModels/costModel/sourcesToolbar.tsx
index 6427e2052d..e7cdc14603 100644
--- a/src/routes/settings/costModels/costModel/sourcesToolbar.tsx
+++ b/src/routes/settings/costModels/costModel/sourcesToolbar.tsx
@@ -2,6 +2,7 @@ import type { ButtonProps, PaginationProps } from '@patternfly/react-core';
 import {
   Button,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   Pagination,
   TextInput,
@@ -19,26 +20,28 @@ import { ReadOnlyTooltip } from 'routes/settings/costModels/components/readOnlyT
 interface FilterInputProps {
   id: string;
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onSearch: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onSearch: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ id, placeholder = '', value, onChange, onSearch }) => {
   return (
     <InputGroup>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        id={id}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onSearch(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          value={value}
+          placeholder={placeholder}
+          id={id}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onSearch(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
diff --git a/src/routes/settings/costModels/costModel/table.tsx b/src/routes/settings/costModels/costModel/table.tsx
index 38a6a429de..ae289c9409 100644
--- a/src/routes/settings/costModels/costModel/table.tsx
+++ b/src/routes/settings/costModels/costModel/table.tsx
@@ -1,4 +1,11 @@
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Title,
+  TitleSizes,
+} from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import type { CostModel } from 'api/costModels';
 import messages from 'locales/messages';
@@ -118,10 +125,11 @@ class TableBase extends React.Component<TableBaseProps, TableBaseState> {
         {rows.length === 0 && (
           <div style={styles.emptyState}>
             <EmptyState>
-              <EmptyStateIcon icon={PlusCircleIcon} />
-              <Title headingLevel="h2" size={TitleSizes.lg}>
-                {intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}
-              </Title>
+              <EmptyStateHeader
+                titleText={<>{intl.formatMessage(messages.costModelsSourceEmptyStateDesc)}</>}
+                icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+                headingLevel="h2"
+              />
               <EmptyStateBody>{intl.formatMessage(messages.costModelsSourceEmptyStateTitle)}</EmptyStateBody>
             </EmptyState>
           </div>
diff --git a/src/routes/settings/costModels/costModel/updateCostModel.tsx b/src/routes/settings/costModels/costModel/updateCostModel.tsx
index 4f9bfef1b4..8aa4a07078 100644
--- a/src/routes/settings/costModels/costModel/updateCostModel.tsx
+++ b/src/routes/settings/costModels/costModel/updateCostModel.tsx
@@ -93,7 +93,7 @@ class UpdateCostModelBase extends React.Component<UpdateCostModelProps, UpdateCo
                 id="name"
                 name="name"
                 value={this.state.name}
-                onChange={value => this.setState({ name: value })}
+                onChange={(_evt, value) => this.setState({ name: value })}
               />
             </FormGroup>
             <FormGroup label={intl.formatMessage(messages.description)} fieldId="description">
@@ -102,7 +102,7 @@ class UpdateCostModelBase extends React.Component<UpdateCostModelProps, UpdateCo
                 id="description"
                 name="description"
                 value={this.state.description}
-                onChange={value => this.setState({ description: value })}
+                onChange={(_evt, value) => this.setState({ description: value })}
               />
             </FormGroup>
           </Form>
diff --git a/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx b/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx
index ed9fc5c259..009c9e0ce5 100644
--- a/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx
+++ b/src/routes/settings/costModels/costModel/updateDistributionDialog.tsx
@@ -61,17 +61,17 @@ class UpdateDistributionDialogBase extends React.Component<
     };
   }
 
-  private handleDistributionChange = (_, event) => {
+  private handleDistributionChange = event => {
     const { value } = event.currentTarget;
     this.setState({ distribution: value });
   };
 
-  private handleDistributePlatformUnallocatedChange = (_, event) => {
+  private handleDistributePlatformUnallocatedChange = event => {
     const { value } = event.currentTarget;
     this.setState({ distributePlatformUnallocated: value === 'true' });
   };
 
-  private handleDistributeWorkerUnallocatedChange = (_, event) => {
+  private handleDistributeWorkerUnallocatedChange = event => {
     const { value } = event.currentTarget;
     this.setState({ distributeWorkerUnallocated: value === 'true' });
   };
diff --git a/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx b/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx
index 9751bcb16a..723f642b68 100644
--- a/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx
+++ b/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx
@@ -5,7 +5,10 @@ import {
   FlexItem,
   Form,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   List,
   ListItem,
@@ -66,12 +69,12 @@ class UpdateMarkupDialogBase extends React.Component<UpdateMarkupDialogProps, Up
     };
   }
 
-  private handleSignChange = (_, event) => {
+  private handleSignChange = event => {
     const { value } = event.currentTarget;
     this.setState({ isDiscount: value === 'true' });
   };
 
-  private handleMarkupDiscountChange = (_, event) => {
+  private handleMarkupDiscountChange = event => {
     const { value } = event.currentTarget;
 
     this.setState({ markup: value });
@@ -187,34 +190,36 @@ class UpdateMarkupDialogBase extends React.Component<UpdateMarkupDialogProps, Up
               <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
                 <FlexItem>
                   <Form>
-                    <FormGroup
-                      fieldId="markup-input-box"
-                      helperTextInvalid={helpText ? intl.formatMessage(helpText) : undefined}
-                      style={styles.rateContainer}
-                      validated={validated}
-                    >
+                    <FormGroup fieldId="markup-input-box" style={styles.rateContainer}>
                       <InputGroup>
                         <InputGroupText style={styles.sign}>
                           {isDiscount
                             ? intl.formatMessage(messages.discountMinus)
                             : intl.formatMessage(messages.markupPlus)}
                         </InputGroupText>
-                        <TextInput
-                          aria-label={intl.formatMessage(messages.rate)}
-                          id="markup-input-box"
-                          isRequired
-                          onKeyDown={this.handleOnKeyDown}
-                          onChange={this.handleMarkupDiscountChange}
-                          placeholder={'0'}
-                          style={styles.inputField}
-                          type="text"
-                          validated={validated}
-                          value={this.state.markup}
-                        />
+                        <InputGroupItem isFill>
+                          <TextInput
+                            aria-label={intl.formatMessage(messages.rate)}
+                            id="markup-input-box"
+                            isRequired
+                            onKeyDown={this.handleOnKeyDown}
+                            onChange={this.handleMarkupDiscountChange}
+                            placeholder={'0'}
+                            style={styles.inputField}
+                            type="text"
+                            validated={validated}
+                            value={this.state.markup}
+                          />
+                        </InputGroupItem>
                         <InputGroupText style={styles.percent}>
                           {intl.formatMessage(messages.percentSymbol)}
                         </InputGroupText>
                       </InputGroup>
+                      {validated === 'error' && (
+                        <HelperText>
+                          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                        </HelperText>
+                      )}
                     </FormGroup>
                   </Form>
                 </FlexItem>
diff --git a/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx b/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx
index c0ab3f66fb..3d49c49407 100644
--- a/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx
+++ b/src/routes/settings/costModels/costModelWizard/assignSourcesToolbar.tsx
@@ -1,6 +1,7 @@
 import type { PaginationProps } from '@patternfly/react-core';
 import {
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   Pagination,
   TextInput,
@@ -20,26 +21,28 @@ import { injectIntl } from 'react-intl';
 interface FilterInputProps {
   id: string;
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onSearch: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onSearch: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ id, placeholder = '', value, onChange, onSearch }) => {
   return (
     <InputGroup>
-      <TextInput
-        value={value}
-        placeholder={placeholder}
-        id={id}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onSearch(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          value={value}
+          placeholder={placeholder}
+          id={id}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onSearch(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
@@ -85,7 +88,7 @@ export const AssignSourcesToolbarBase: React.FC<AssignSourcesToolbarBaseProps> =
             onSetPage={paginationProps.onSetPage}
             onPerPageSelect={paginationProps.onPerPageSelect}
             titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                 title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                 placement: 'bottom',
               }),
diff --git a/src/routes/settings/costModels/costModelWizard/context.ts b/src/routes/settings/costModels/costModelWizard/context.ts
index 603780bc13..7e49f7583c 100644
--- a/src/routes/settings/costModels/costModelWizard/context.ts
+++ b/src/routes/settings/costModels/costModelWizard/context.ts
@@ -35,8 +35,8 @@ export const defaultCostModelContext = {
   onCurrencyChange: (value: string) => null,
   onDescChange: (value: string) => null,
   onFilterChange: (value: string) => null,
-  onPageChange: (_evt, value: number) => null,
-  onPerPageChange: (_evt, value: number) => null,
+  onPageChange: (value: number) => null,
+  onPerPageChange: (value: number) => null,
   onTypeChange: (value: string) => null,
   onNameChange: (value: string) => null,
   onSourceSelect: (...args: any[]) => null,
@@ -45,8 +45,8 @@ export const defaultCostModelContext = {
   priceListPagination: {
     page: 1,
     perPage: 4,
-    onPerPageSet: (_evt, perPage: number) => null,
-    onPageSet: (_evt, page: number) => null,
+    onPerPageSet: (perPage: number) => null,
+    onPageSet: (page: number) => null,
   },
   query: {},
   step: 1,
diff --git a/src/routes/settings/costModels/costModelWizard/costModelWizard.tsx b/src/routes/settings/costModels/costModelWizard/costModelWizard.tsx
index 1c7292f2d8..757f0477cf 100644
--- a/src/routes/settings/costModels/costModelWizard/costModelWizard.tsx
+++ b/src/routes/settings/costModels/costModelWizard/costModelWizard.tsx
@@ -1,6 +1,7 @@
-import type { WizardStepFunctionType } from '@patternfly/react-core';
-import { Title, TitleSizes, Wizard } from '@patternfly/react-core';
+import { Title, TitleSizes } from '@patternfly/react-core';
 import { Button, Modal } from '@patternfly/react-core';
+import type { WizardStepFunctionType } from '@patternfly/react-core/deprecated';
+import { Wizard } from '@patternfly/react-core/deprecated';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { addCostModel } from 'api/costModels';
 import type { MetricHash } from 'api/metrics';
@@ -413,23 +414,23 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
                   justSaved: value ? value : false,
                 },
               }),
-            handleDistributionChange: (_, event) => {
+            handleDistributionChange: event => {
               const { value } = event.currentTarget;
               this.setState({ distribution: value });
             },
-            handleDistributePlatformUnallocatedChange: (_, event) => {
+            handleDistributePlatformUnallocatedChange: event => {
               const { value } = event.currentTarget;
               this.setState({ distributePlatformUnallocated: value === 'true' });
             },
-            handleDistributeWorkerUnallocatedChange: (_, event) => {
+            handleDistributeWorkerUnallocatedChange: event => {
               const { value } = event.currentTarget;
               this.setState({ distributeWorkerUnallocated: value === 'true' });
             },
-            handleMarkupDiscountChange: (_, event) => {
+            handleMarkupDiscountChange: event => {
               const { value } = event.currentTarget;
               this.setState({ markup: value });
             },
-            handleSignChange: (_, event) => {
+            handleSignChange: event => {
               const { value } = event.currentTarget;
               this.setState({ isDiscount: value === 'true' });
             },
@@ -437,14 +438,14 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
             loading: this.state.loading,
             metricsHash,
             onClose: () => this.setState({ ...this.defaultState }, this.props.closeWizard),
-            onCurrencyChange: value =>
+            onCurrencyChange: (value: string) =>
               this.setState({ currencyUnits: value, tiers: updateTiersCurrency(this.state.tiers, value) }),
-            onDescChange: value => this.setState({ description: value }),
-            onFilterChange: value => this.setState({ filterName: value }),
-            onNameChange: value => this.setState({ name: value, dirtyName: true }),
-            onPageChange: (_evt, page) => this.setState({ page }),
-            onPerPageChange: (_evt, perPage) => this.setState({ page: 1, perPage }),
-            onSourceSelect: (rowId, isSelected) => {
+            onDescChange: (value: string) => this.setState({ description: value }),
+            onFilterChange: (value: string) => this.setState({ filterName: value }),
+            onNameChange: (value: string) => this.setState({ name: value, dirtyName: true }),
+            onPageChange: (page: number) => this.setState({ page }),
+            onPerPageChange: (perPage: number) => this.setState({ page: 1, perPage }),
+            onSourceSelect: (rowId: number, isSelected: boolean) => {
               if (rowId === -1) {
                 const pageSelections = this.state.sources.map(s => ({
                   [s.uuid]: { selected: isSelected, meta: s },
@@ -464,19 +465,19 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
               };
               return this.setState({ checked: newState });
             },
-            onTypeChange: value => this.setState({ type: value, dataFetched: false, loading: false }),
+            onTypeChange: (value: string) => this.setState({ type: value, dataFetched: false, loading: false }),
             page: this.state.page,
             priceListPagination: {
               page: this.state.priceListPagination.page,
               perPage: this.state.priceListPagination.perPage,
-              onPageSet: (_evt, page) =>
+              onPageSet: (page: number) =>
                 this.setState({
                   priceListPagination: {
                     ...this.state.priceListPagination,
                     page,
                   },
                 }),
-              onPerPageSet: (_evt, perPage) =>
+              onPerPageSet: (perPage: number) =>
                 this.setState({
                   priceListPagination: {
                     page: 1,
diff --git a/src/routes/settings/costModels/costModelWizard/generalInformation.tsx b/src/routes/settings/costModels/costModelWizard/generalInformation.tsx
index 62e7c79deb..14a70cfa90 100644
--- a/src/routes/settings/costModels/costModelWizard/generalInformation.tsx
+++ b/src/routes/settings/costModels/costModelWizard/generalInformation.tsx
@@ -1,6 +1,7 @@
 import {
   FormGroup,
-  SelectDirection,
+  HelperText,
+  HelperTextItem,
   Stack,
   StackItem,
   TextArea,
@@ -8,6 +9,7 @@ import {
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
+import { SelectDirection } from '@patternfly/react-core/deprecated';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -89,13 +91,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
             </StackItem>
             <StackItem>
               <Form style={styles.form}>
-                <FormGroup
-                  helperTextInvalid={nameErrors(name) && intl.formatMessage(nameErrors(name))}
-                  validated={nameErrors(name) === null || !dirtyName ? 'default' : 'error'}
-                  label={intl.formatMessage(messages.names, { count: 1 })}
-                  isRequired
-                  fieldId="name"
-                >
+                <FormGroup label={intl.formatMessage(messages.names, { count: 1 })} isRequired fieldId="name">
                   <TextInput
                     validated={nameErrors(name) === null || !dirtyName ? 'default' : 'error'}
                     isRequired
@@ -103,17 +99,15 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                     id="name"
                     name="name"
                     value={name}
-                    onChange={onNameChange}
+                    onChange={(_evt, value) => onNameChange(value)}
                   />
+                  {dirtyName && nameErrors(name) && (
+                    <HelperText>
+                      <HelperTextItem variant="error">{intl.formatMessage(nameErrors(name))}</HelperTextItem>
+                    </HelperText>
+                  )}
                 </FormGroup>
-                <FormGroup
-                  helperTextInvalid={
-                    descriptionErrors(description) && intl.formatMessage(descriptionErrors(description))
-                  }
-                  validated={descriptionErrors(description) === null ? 'default' : 'error'}
-                  label={intl.formatMessage(messages.description)}
-                  fieldId="description"
-                >
+                <FormGroup label={intl.formatMessage(messages.description)} fieldId="description">
                   <TextArea
                     style={styles.textArea}
                     type="text"
@@ -121,8 +115,15 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                     name="description"
                     value={description}
                     validated={descriptionErrors(description) === null ? 'default' : 'error'}
-                    onChange={onDescChange}
+                    onChange={(_evt, value) => onDescChange(value)}
                   />
+                  {descriptionErrors(description) && (
+                    <HelperText>
+                      <HelperTextItem variant="error">
+                        {intl.formatMessage(descriptionErrors(description))}
+                      </HelperTextItem>
+                    </HelperText>
+                  )}
                 </FormGroup>
                 <Selector
                   isRequired
@@ -134,7 +135,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                   toggleAriaLabel={intl.formatMessage(messages.costModelsWizardEmptySourceTypeLabel)}
                   placeholderText={intl.formatMessage(messages.costModelsWizardEmptySourceTypeLabel)}
                   value={getValueLabel(type, sourceTypeOptions)}
-                  onChange={onTypeChange}
+                  onChange={(_evt, value) => onTypeChange(value)}
                   options={sourceTypeOptions}
                 />
                 <Selector
@@ -144,7 +145,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                   maxHeight={styles.selector.maxHeight}
                   toggleAriaLabel={intl.formatMessage(messages.costModelsWizardCurrencyToggleLabel)}
                   value={getValueLabel(currencyUnits, currencyOptions)}
-                  onChange={onCurrencyChange}
+                  onChange={(_evt, value) => onCurrencyChange(value)}
                   id="currency-units-selector"
                   options={currencyOptions.map(o => {
                     return {
diff --git a/src/routes/settings/costModels/costModelWizard/markup.tsx b/src/routes/settings/costModels/costModelWizard/markup.tsx
index bd6d2bf816..3d1e77e4ad 100644
--- a/src/routes/settings/costModels/costModelWizard/markup.tsx
+++ b/src/routes/settings/costModels/costModelWizard/markup.tsx
@@ -2,7 +2,10 @@ import {
   Flex,
   FlexItem,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   InputGroup,
+  InputGroupItem,
   InputGroupText,
   List,
   ListItem,
@@ -114,34 +117,36 @@ class MarkupWithDistributionBase extends React.Component<MarkupWithDistributionP
                   <Flex direction={{ default: 'column' }} alignSelf={{ default: 'alignSelfCenter' }}>
                     <FlexItem>
                       <Form>
-                        <FormGroup
-                          fieldId="markup-input-box"
-                          helperTextInvalid={helpText ? intl.formatMessage(helpText) : undefined}
-                          style={costCalcStyles.rateContainer}
-                          validated={validated}
-                        >
+                        <FormGroup fieldId="markup-input-box" style={costCalcStyles.rateContainer}>
                           <InputGroup>
                             <InputGroupText style={costCalcStyles.sign}>
                               {isDiscount
                                 ? intl.formatMessage(messages.discountMinus)
                                 : intl.formatMessage(messages.markupPlus)}
                             </InputGroupText>
-                            <TextInput
-                              aria-label={intl.formatMessage(messages.rate)}
-                              id="markup-input-box"
-                              isRequired
-                              onKeyDown={handleOnKeyDown}
-                              onChange={handleMarkupDiscountChange}
-                              placeholder={'0'}
-                              style={costCalcStyles.inputField}
-                              type="text"
-                              validated={validated}
-                              value={markup}
-                            />
+                            <InputGroupItem isFill>
+                              <TextInput
+                                aria-label={intl.formatMessage(messages.rate)}
+                                id="markup-input-box"
+                                isRequired
+                                onKeyDown={handleOnKeyDown}
+                                onChange={handleMarkupDiscountChange}
+                                placeholder={'0'}
+                                style={costCalcStyles.inputField}
+                                type="text"
+                                validated={validated}
+                                value={markup}
+                              />
+                            </InputGroupItem>
                             <InputGroupText style={costCalcStyles.percent}>
                               {intl.formatMessage(messages.percentSymbol)}
                             </InputGroupText>
                           </InputGroup>
+                          {validated === 'error' && (
+                            <HelperText>
+                              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                            </HelperText>
+                          )}
                         </FormGroup>
                       </Form>
                     </FlexItem>
diff --git a/src/routes/settings/costModels/costModelWizard/priceListTable.tsx b/src/routes/settings/costModels/costModelWizard/priceListTable.tsx
index 5f2a5bcea9..4416419ec2 100644
--- a/src/routes/settings/costModels/costModelWizard/priceListTable.tsx
+++ b/src/routes/settings/costModels/costModelWizard/priceListTable.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateHeader,
   EmptyStateIcon,
   Pagination,
   Stack,
@@ -93,10 +94,11 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
     const NoTiersEmptyState = () => (
       <Bullseye>
         <EmptyState>
-          <EmptyStateIcon icon={PlusCircleIcon} />
-          <Title headingLevel="h2" size={TitleSizes.lg}>
-            {intl.formatMessage(messages.costModelsWizardEmptyStateTitle)}
-          </Title>
+          <EmptyStateHeader
+            titleText={<>{intl.formatMessage(messages.costModelsWizardEmptyStateTitle)}</>}
+            icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+            headingLevel="h2"
+          />
           <EmptyStateBody>
             {intl.formatMessage(messages.costModelsWizardEmptyStateSkipStep, {
               value: <strong>{intl.formatMessage(messages.next)}</strong>,
@@ -225,10 +227,10 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                               itemCount={filtered.length}
                               perPage={priceListPagination.perPage}
                               page={priceListPagination.page}
-                              onSetPage={priceListPagination.onPageSet}
-                              onPerPageSelect={priceListPagination.onPerPageSet}
+                              onSetPage={(_evt, perPage) => priceListPagination.onPageSet(perPage)}
+                              onPerPageSelect={(_evt, page) => priceListPagination.onPerPageSet(page)}
                               titles={{
-                                paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                                paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                                   title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                                   placement: 'top',
                                 }),
@@ -269,10 +271,10 @@ class PriceListTable extends React.Component<PriceListTableProps, PriceListTable
                           itemCount={filtered.length}
                           perPage={priceListPagination.perPage}
                           page={priceListPagination.page}
-                          onSetPage={priceListPagination.onPageSet}
-                          onPerPageSelect={priceListPagination.onPerPageSet}
+                          onSetPage={(_evt, perPage) => priceListPagination.onPageSet(perPage)}
+                          onPerPageSelect={(_evt, page) => priceListPagination.onPerPageSet(page)}
                           titles={{
-                            paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                            paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                               title: intl.formatMessage(messages.costModelsAssignSourcesParen),
                               placement: 'bottom',
                             }),
diff --git a/src/routes/settings/costModels/costModelWizard/review.tsx b/src/routes/settings/costModels/costModelWizard/review.tsx
index 2e80cf1b14..9939d05360 100644
--- a/src/routes/settings/costModels/costModelWizard/review.tsx
+++ b/src/routes/settings/costModels/costModelWizard/review.tsx
@@ -2,9 +2,11 @@ import {
   Alert,
   Button,
   EmptyState,
+  EmptyStateActions,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
   Stack,
   StackItem,
   Text,
@@ -32,18 +34,21 @@ const ReviewSuccessBase: React.FC<WrappedComponentProps> = ({ intl }) => (
   <CostModelContext.Consumer>
     {({ onClose, name }) => (
       <EmptyState>
-        <EmptyStateIcon icon={OkIcon} color="green" />
-        <Title headingLevel="h2" size={TitleSizes.lg}>
-          {intl.formatMessage(messages.costModelsWizardReviewStatusTitle)}
-        </Title>
+        <EmptyStateHeader
+          titleText={<>{intl.formatMessage(messages.costModelsWizardReviewStatusTitle)}</>}
+          icon={<EmptyStateIcon icon={OkIcon} color="green" />}
+          headingLevel="h2"
+        />
         <EmptyStateBody>
           {intl.formatMessage(messages.costModelsWizardReviewStatusSubTitle, { value: name })}
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button variant="link" onClick={onClose}>
-            {intl.formatMessage(messages.close)}
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button variant="link" onClick={onClose}>
+              {intl.formatMessage(messages.close)}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     )}
   </CostModelContext.Consumer>
diff --git a/src/routes/settings/costModels/costModelWizard/table.tsx b/src/routes/settings/costModels/costModelWizard/table.tsx
index d082b4597a..fe4834f39e 100644
--- a/src/routes/settings/costModels/costModelWizard/table.tsx
+++ b/src/routes/settings/costModels/costModelWizard/table.tsx
@@ -1,5 +1,5 @@
 import { Checkbox, Stack, StackItem, Text, TextContent, TextVariants, Title, TitleSizes } from '@patternfly/react-core';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table /* data-codemods */, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
@@ -62,7 +62,7 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
                 filterInputProps={{
                   id: 'assign-source-search-input',
                   value: filterName,
-                  onChange: onFilterChange,
+                  onChange: (value: string) => onFilterChange(value),
                   onSearch: () => {
                     fetchSources(sourceType, addMultiValueQuery(query)('name', filterName), 1, perPage);
                   },
@@ -81,7 +81,7 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
               {loading ? (
                 <LoadingState />
               ) : (
-                <TableComposable
+                <Table
                   aria-label={intl.formatMessage(messages.costModelsWizardSourceTableAriaLabel)}
                   variant={TableVariant.compact}
                 >
@@ -101,7 +101,7 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
                       <Tr key={rowIndex}>
                         <Td>
                           <Checkbox
-                            onChange={isChecked => {
+                            onChange={(_evt, isChecked) => {
                               onSourceSelect(rowIndex, isChecked);
                             }}
                             id={row.name}
@@ -126,14 +126,14 @@ const SourcesTable: React.FC<WrappedComponentProps> = ({ intl }) => {
                       </Tr>
                     ))}
                   </Tbody>
-                </TableComposable>
+                </Table>
               )}
               <PaginationToolbarTemplate
                 itemCount={itemCount}
                 perPage={perPage}
                 page={page}
                 titles={{
-                  paginationTitle: intl.formatMessage(messages.paginationTitle, {
+                  paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                     title: intl.formatMessage(messages.sources),
                     placement: 'bottom',
                   }),
diff --git a/src/routes/settings/costModels/costModelsDetails/bottomPagination.tsx b/src/routes/settings/costModels/costModelsDetails/bottomPagination.tsx
index f5b3e7fd3e..0cd1b73d2d 100644
--- a/src/routes/settings/costModels/costModelsDetails/bottomPagination.tsx
+++ b/src/routes/settings/costModels/costModelsDetails/bottomPagination.tsx
@@ -44,7 +44,7 @@ const BottomPaginationBase: React.FC<BottomPaginationBaseProps> = props => {
             page={page}
             perPage={perPage}
             titles={{
-              paginationTitle: intl.formatMessage(messages.paginationTitle, {
+              paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
                 title: intl.formatMessage(messages.costModelsDetailsTitle),
                 placement: 'bottom',
               }),
diff --git a/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx b/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx
index 1526aad4e1..b0b78d7a2c 100644
--- a/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx
+++ b/src/routes/settings/costModels/costModelsDetails/emptyStateBase.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title, TitleSizes } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
 import React from 'react';
 
 interface EmptyStateBaseProps {
@@ -11,12 +11,9 @@ interface EmptyStateBaseProps {
 function EmptyStateBase(props: EmptyStateBaseProps): JSX.Element {
   return (
     <EmptyState className="pf-m-redhat-font">
-      <EmptyStateIcon icon={props.icon} />
-      <Title headingLevel="h2" size={TitleSizes.lg}>
-        {props.title}
-      </Title>
+      <EmptyStateHeader titleText={<>{props.title}</>} icon={<EmptyStateIcon icon={props.icon} />} headingLevel="h2" />
       <EmptyStateBody>{props.description}</EmptyStateBody>
-      {props.actions ? props.actions : null}
+      <EmptyStateFooter>{props.actions ? props.actions : null}</EmptyStateFooter>
     </EmptyState>
   );
 }
diff --git a/src/routes/settings/costModels/costModelsDetails/table.tsx b/src/routes/settings/costModels/costModelsDetails/table.tsx
index 569584384d..d1f7303f54 100644
--- a/src/routes/settings/costModels/costModelsDetails/table.tsx
+++ b/src/routes/settings/costModels/costModelsDetails/table.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
 import type { ICell, ThProps } from '@patternfly/react-table';
-import { TableComposable, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { sortable, TableGridBreakpoint } from '@patternfly/react-table';
 import type { CostModel } from 'api/costModels';
 import { intl as defaultIntl } from 'components/i18n';
@@ -107,7 +107,7 @@ class CostModelsTableBase extends React.Component<CostModelsTableProps, CostMode
     });
 
     return (
-      <TableComposable
+      <Table
         aria-label={intl.formatMessage(messages.costModelsTableAriaLabel)}
         gridBreakPoint={TableGridBreakpoint.grid2xl}
         variant={TableVariant.compact}
@@ -136,8 +136,8 @@ class CostModelsTableBase extends React.Component<CostModelsTableProps, CostMode
                     <Button
                       aria-label={intl.formatMessage(messages.delete)}
                       isAriaDisabled={!canWrite}
-                      isSmall
                       onClick={() => openDeleteDialog(r.data)}
+                      size="sm"
                       variant={ButtonVariant.plain}
                     >
                       <MinusCircleIcon />
@@ -148,7 +148,7 @@ class CostModelsTableBase extends React.Component<CostModelsTableProps, CostMode
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   }
 }
diff --git a/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx b/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx
index 858931b76d..b294165a6e 100644
--- a/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx
+++ b/src/routes/settings/costModels/costModelsDetails/utils/filters.tsx
@@ -1,14 +1,6 @@
 import type { ToolbarProps } from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  InputGroup,
-  InputGroupText,
-  TextInput,
-  Toolbar,
-  ToolbarFilter,
-} from '@patternfly/react-core';
+import { InputGroup, InputGroupItem, InputGroupText, TextInput, Toolbar, ToolbarFilter } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -27,26 +19,28 @@ import type { Inputer, Opener } from './types';
 
 interface FilterInputProps {
   value: string;
-  onChange: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  onKeyPress: (evt: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
+  onKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
 }
 
 const FilterInput: React.FC<FilterInputProps> = ({ placeholder = '', value, onChange, onKeyPress }) => {
   return (
     <InputGroup>
-      <TextInput
-        aria-label={placeholder}
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
-          if (evt.key !== 'Enter' || value === '') {
-            return;
-          }
-          onKeyPress(evt);
-        }}
-      />
+      <InputGroupItem isFill>
+        <TextInput
+          aria-label={placeholder}
+          value={value}
+          placeholder={placeholder}
+          onChange={(_evt, val) => onChange(val)}
+          onKeyPress={(evt: React.KeyboardEvent<HTMLInputElement>) => {
+            if (evt.key !== 'Enter' || value === '') {
+              return;
+            }
+            onKeyPress(evt);
+          }}
+        />
+      </InputGroupItem>
       <InputGroupText style={{ borderLeft: '0' }}>
         <SearchIcon />
       </InputGroupText>
@@ -143,7 +137,7 @@ const DescriptionFilterBase: React.FC<DescriptionFilterProps> = ({
       <FilterInput
         placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: filterType })}
         value={value}
-        onChange={(text: string) => setValue(text)}
+        onChange={(val: string) => setValue(val)}
         onKeyPress={onKeyPress(router, 'description', { ...initialCostModelsQuery, ...query }, { value, setValue })}
       />
     ) : null;
@@ -218,7 +212,7 @@ const NameFilterBase: React.FC<NameFilterProps> = ({
       <FilterInput
         placeholder={intl.formatMessage(messages.filterByPlaceholder, { value: filterType })}
         value={value}
-        onChange={(text: string) => setValue(text)}
+        onChange={(val: string) => setValue(val)}
         onKeyPress={onKeyPress(router, 'name', { ...initialCostModelsQuery, ...query }, { value, setValue })}
       />
     ) : null;
@@ -300,7 +294,7 @@ const SourceTypeFilterBase: React.FC<SourceTypeFilterProps> = ({
         isOpen={isOpen}
         toggle={
           <DropdownToggle
-            onToggle={(value: boolean) => {
+            onToggle={(_evt, value: boolean) => {
               setIsOpen(value);
             }}
             id={id}
diff --git a/src/routes/settings/costModels/costModelsDetails/utils/table.tsx b/src/routes/settings/costModels/costModelsDetails/utils/table.tsx
index 882548c423..4c738a3f39 100644
--- a/src/routes/settings/costModels/costModelsDetails/utils/table.tsx
+++ b/src/routes/settings/costModels/costModelsDetails/utils/table.tsx
@@ -71,7 +71,7 @@ export function getRowsByStateName(stateName: string, data: any) {
 }
 
 export function createOnSort(cells: ICell[], query: CostModelsQuery, router: RouteComponentProps) {
-  return function (_event, index: number, direction: SortByDirection) {
+  return function (_evt, index: number, direction: SortByDirection) {
     const name = cells[index] && cells[index].data ? cells[index].data.orderName : null;
     if (name === null) {
       return;
@@ -94,7 +94,9 @@ export function createActions(stateName: string, canWrite: boolean, actions: IAc
       ...action,
       isDisabled: !canWrite,
       style: !canWrite ? { pointerEvents: 'auto' } : undefined,
-      tooltip: !canWrite ? action.tooltip : undefined,
+      tooltipProps: {
+        content: !canWrite ? action.tooltipProps?.content : undefined,
+      },
     };
   });
 }
diff --git a/src/routes/settings/costModels/costModelsDetails/utils/toolbar.tsx b/src/routes/settings/costModels/costModelsDetails/utils/toolbar.tsx
index 2770d6680a..519cb5d488 100644
--- a/src/routes/settings/costModels/costModelsDetails/utils/toolbar.tsx
+++ b/src/routes/settings/costModels/costModelsDetails/utils/toolbar.tsx
@@ -1,5 +1,6 @@
 import type { PaginationProps } from '@patternfly/react-core';
-import { Pagination, PaginationVariant, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { intl as defaultIntl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -75,11 +76,11 @@ const CostModelsFilterSelectorBase: React.FC<CostModelsFilterSelectorProps> = ({
   return (
     <Select
       isOpen={isOpen}
-      onSelect={(_event, value: string) => {
+      onSelect={(_evt, value) => {
         updateFilterType(value);
         setIsOpen(false);
       }}
-      onToggle={setIsOpen}
+      onToggle={(_evt, isExpanded) => setIsOpen(isExpanded)}
       selections={filterType}
       toggleIcon={<FilterIcon />}
       variant={SelectVariant.single}
diff --git a/src/routes/settings/platformProjects/platformProjects.tsx b/src/routes/settings/platformProjects/platformProjects.tsx
index 74f54eae8b..5f4d36b763 100644
--- a/src/routes/settings/platformProjects/platformProjects.tsx
+++ b/src/routes/settings/platformProjects/platformProjects.tsx
@@ -95,7 +95,7 @@ const PlatformProjects: React.FC<PlatformProjectsProps> = ({ canWrite }) => {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/routes/settings/settings.scss b/src/routes/settings/settings.scss
index f78e84ccaf..41f95abeaf 100644
--- a/src/routes/settings/settings.scss
+++ b/src/routes/settings/settings.scss
@@ -1,5 +1,5 @@
 .tabsOverride {
-  .pf-c-tabs {
-    --pf-c-tabs--before--border-width--base: 0px;
+  .pf-v5-c-tabs {
+    --pf-v5-c-tabs--before--border-width--base: 0px;
   }
 }
diff --git a/src/routes/settings/tagDetails/tagDetails.tsx b/src/routes/settings/tagDetails/tagDetails.tsx
index b3dbb6989a..b3e590389d 100644
--- a/src/routes/settings/tagDetails/tagDetails.tsx
+++ b/src/routes/settings/tagDetails/tagDetails.tsx
@@ -79,7 +79,7 @@ const TagDetails: React.FC<TagDetailsProps> = ({ canWrite }) => {
         page={page}
         perPage={limit}
         titles={{
-          paginationTitle: intl.formatMessage(messages.paginationTitle, {
+          paginationAriaLabel: intl.formatMessage(messages.paginationTitle, {
             title: intl.formatMessage(messages.openShift),
             placement: isBottom ? 'bottom' : 'top',
           }),
diff --git a/src/styles/global.css b/src/styles/global.css
index 051bb79305..1eff2a2504 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -8,8 +8,8 @@ body {
   display: flex;
 }
 
-.pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+.pf-v5-l-grid > *,
+.pf-v5-l-grid .pf-v5-l-grid__item {
   min-height: 0;
   min-width: 0;
 }
diff --git a/src/styles/revert.css b/src/styles/revert.css
index a195c6b635..4f16bad4ef 100644
--- a/src/styles/revert.css
+++ b/src/styles/revert.css
@@ -1,10 +1,10 @@
 /* For testing only */
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/revert */
-[class*="pf-c"],
-[class*="pf-c"] *,
-[class*="pf-l"],
-[class*="pf-l"] *,
-[class*="pf-u"],
-[class*="pf-u"] * {
+[class*="pf-v5-c"],
+[class*="pf-v5-c"] *,
+[class*="pf-v5-l"],
+[class*="pf-v5-l"] *,
+[class*="pf-v5-u"],
+[class*="pf-v5-u"] * {
   all: revert;
 }