diff --git a/src/test/About/__snapshots__/About.test.tsx.snap b/src/test/About/__snapshots__/About.test.tsx.snap
index fc6dc35aee..684c0e5b97 100644
--- a/src/test/About/__snapshots__/About.test.tsx.snap
+++ b/src/test/About/__snapshots__/About.test.tsx.snap
@@ -3,34 +3,39 @@
 exports[`<About /> renders correctly 1`] = `
 <div>
   About
-  <article
-    className="pf-c-card"
+  <div
+    className="pf-v5-c-card"
     data-ouia-component-id="OUIA-Generated-Card-1"
-    data-ouia-component-type="PF4/Card"
+    data-ouia-component-type="PF5/Card"
     data-ouia-safe={true}
     id=""
   >
     <div
-      className="pf-c-card__header"
+      className="pf-v5-c-card__header"
     >
-      <img
-        alt="Cryostat"
-        className="pf-c-brand cryostat-logo"
-        src="test-file-stub"
-      />
+      <div
+        className="pf-v5-c-card__header-main"
+      >
+        <img
+          alt="Cryostat"
+          className="pf-v5-c-brand cryostat-logo"
+          src="test-file-stub"
+          style={Object {}}
+        />
+      </div>
     </div>
     <div
-      className="pf-c-card__body"
+      className="pf-v5-c-card__body"
     >
       <div>
         AboutDescription
       </div>
     </div>
     <div
-      className="pf-c-card__footer"
+      className="pf-v5-c-card__footer"
     >
       Copyright The Cryostat Authors, The Apache License, Version 2.0
     </div>
-  </article>
+  </div>
 </div>
 `;
diff --git a/src/test/Agent/__snapshots__/AgentLiveProbes.test.tsx.snap b/src/test/Agent/__snapshots__/AgentLiveProbes.test.tsx.snap
index 0f1db10735..783cd904dd 100644
--- a/src/test/Agent/__snapshots__/AgentLiveProbes.test.tsx.snap
+++ b/src/test/Agent/__snapshots__/AgentLiveProbes.test.tsx.snap
@@ -1,413 +1,76 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AgentLiveProbes /> renders correctly 1`] = `
-<div
-  className="pf-l-stack pf-m-gutter"
-  style={
-    Object {
-      "marginTop": "1em",
+Array [
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
     }
-  }
->
-  <div
-    className="pf-l-stack__item"
   >
-    <article
-      className="pf-c-card"
-      data-ouia-component-id="OUIA-Generated-Card-1"
-      data-ouia-component-type="PF4/Card"
-      data-ouia-safe={true}
-      id=""
-    >
-      <div
-        className="pf-c-card__title"
-      >
-        About the JMC Agent
-      </div>
-      <div
-        className="pf-c-card__body"
-      >
-        The JMC Agent allows users to dynamically inject custom JFR events into running JVMs. In order to make use of the JMC Agent, the agent jar must be present in the same container as the target, and the target must be started with the agent (-javaagent:/path/to/agent.jar). Once these pre-requisites are met, the user can upload probe templates to Cryostat and insert them to the target, as well as view or remove currently active probes.
-      </div>
-    </article>
-  </div>
-  <div
-    className="pf-l-stack__item"
+    Cannot read properties of null (reading 'offsetWidth')
+  </h3>,
+  <pre
+    style={
+      Object {
+        "backgroundColor": "rgba(200,200,200, 0.5)",
+        "padding": "0.5rem",
+      }
+    }
   >
-    <div
-      className="pf-c-toolbar"
-      data-ouia-component-id="OUIA-Generated-Toolbar-1"
-      data-ouia-component-type="PF4/Toolbar"
-      data-ouia-safe={true}
-      id="active-probes-toolbar"
+    TypeError: Cannot read properties of null (reading 'offsetWidth')
+    at /home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-table/dist/js/components/Table/Td.js:136:38
+    at invokePassiveEffectCreate (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
+    at HTMLUnknownElement.callCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
+    at HTMLUnknownElement.callTheUserObjectsOperation (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
+    at innerInvokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
+    at invokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
+    at HTMLUnknownElementImpl._dispatch (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
+    at HTMLUnknownElement.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
+    at Object.invokeGuardedCallbackDev (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
+    at invokeGuardedCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
+    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
+    at flushActWork (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15227:14)
+    at flushWorkAndMicroTasks (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15239:5)
+    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15318:11
+    at processTicksAndRejections (node:internal/process/task_queues:95:5)
+  </pre>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <div
-        className="pf-c-toolbar__content"
-      >
-        <div
-          className="pf-c-toolbar__content-section"
-        >
-          <div
-            className="pf-c-toolbar__group pf-m-filter-group"
-          >
-            <div
-              className="pf-c-toolbar__item"
-            >
-              <input
-                aria-invalid={false}
-                aria-label="Active probe filter"
-                className="pf-c-form-control"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe={true}
-                disabled={false}
-                id="activeProbeFilter"
-                name="activeProbeFilter"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Filter..."
-                required={false}
-                type="search"
-              />
-            </div>
-          </div>
-          <div
-            className="pf-c-toolbar__group pf-m-icon-button-group"
-          >
-            <div
-              className="pf-c-toolbar__item"
-            >
-              <button
-                aria-disabled={false}
-                aria-label={null}
-                className="pf-c-button pf-m-danger pf-m-progress"
-                data-ouia-component-id="OUIA-Generated-Button-danger-1"
-                data-ouia-component-type="PF4/Button"
-                data-ouia-safe={true}
-                disabled={false}
-                onClick={[Function]}
-                role={null}
-                type="button"
-              >
-                Remove
-                 All Probes
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="pf-c-toolbar__expandable-content"
-          id="active-probes-toolbar-expandable-content-2"
-        >
-          <div
-            className="pf-c-toolbar__group"
-          />
-        </div>
-      </div>
-      <div
-        className="pf-c-toolbar__content pf-m-hidden"
-        hidden={true}
-      >
-        <div
-          className="pf-c-toolbar__group"
-        />
-      </div>
-    </div>
-    <table
-      aria-label="Active Probe Table"
-      className="pf-c-table pf-m-grid-md pf-m-compact"
-      data-ouia-component-id="OUIA-Generated-Table-1"
-      data-ouia-component-type="PF4/Table"
-      data-ouia-safe={true}
-      role="grid"
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <thead
-        className=""
-      >
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-1"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <th
-            aria-sort="none"
-            className="pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  ID
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-          <th
-            aria-sort="none"
-            className="pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  Name
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-          <th
-            aria-sort="none"
-            className="pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  Class
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-          <th
-            aria-sort="none"
-            className="pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  Description
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-          <th
-            aria-sort="none"
-            className="pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  Method
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        className=""
-        role="rowgroup"
-      >
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-2"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <td
-            className=""
-            data-label="ID"
-            onMouseEnter={[Function]}
-          >
-            some_id
-          </td>
-          <td
-            className=""
-            data-label="Name"
-            onMouseEnter={[Function]}
-          >
-            some_name
-          </td>
-          <td
-            className=""
-            data-label="Class"
-            onMouseEnter={[Function]}
-          >
-            some_clazz
-          </td>
-          <td
-            className=""
-            data-label="Description"
-            onMouseEnter={[Function]}
-          >
-            some_desc
-          </td>
-          <td
-            className=""
-            data-label="Method"
-            onMouseEnter={[Function]}
-          >
-            a_method
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
+]
 `;
diff --git a/src/test/Archives/__snapshots__/AllArchivedRecordingsTable.test.tsx.snap b/src/test/Archives/__snapshots__/AllArchivedRecordingsTable.test.tsx.snap
index 35b26d5aa3..a5a6e04dbb 100644
--- a/src/test/Archives/__snapshots__/AllArchivedRecordingsTable.test.tsx.snap
+++ b/src/test/Archives/__snapshots__/AllArchivedRecordingsTable.test.tsx.snap
@@ -3,48 +3,44 @@
 exports[`<AllArchivedRecordingsTable /> renders correctly 1`] = `
 Array [
   <div
-    className="pf-c-toolbar"
+    className="pf-v5-c-toolbar"
     data-ouia-component-id="OUIA-Generated-Toolbar-1"
-    data-ouia-component-type="PF4/Toolbar"
+    data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe={true}
     id="all-archives-toolbar"
   >
     <div
-      className="pf-c-toolbar__content"
+      className="pf-v5-c-toolbar__content"
     >
       <div
-        className="pf-c-toolbar__content-section"
+        className="pf-v5-c-toolbar__content-section"
       >
         <div
-          className="pf-c-toolbar__group pf-m-filter-group"
+          className="pf-v5-c-toolbar__group pf-m-filter-group"
         >
           <div
-            className="pf-c-toolbar__item"
+            className="pf-v5-c-toolbar__item"
           >
             <div
-              className="pf-c-text-input-group"
+              className="pf-v5-c-text-input-group"
             >
               <div
-                className="pf-c-text-input-group__main pf-m-icon"
+                className="pf-v5-c-text-input-group__main pf-m-icon"
                 onKeyDown={[Function]}
               >
                 <span
-                  className="pf-c-text-input-group__text"
+                  className="pf-v5-c-text-input-group__text"
                 >
                   <span
-                    className="pf-c-text-input-group__icon"
+                    className="pf-v5-c-text-input-group__icon"
                   >
                     <svg
                       aria-hidden={true}
                       aria-labelledby={null}
+                      className="pf-v5-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
                       viewBox="0 0 512 512"
                       width="1em"
                     >
@@ -55,7 +51,7 @@ Array [
                   </span>
                   <input
                     aria-label="Search input"
-                    className="pf-c-text-input-group__text-input"
+                    className="pf-v5-c-text-input-group__text-input"
                     disabled={false}
                     onChange={[Function]}
                     placeholder="Search"
@@ -69,57 +65,53 @@ Array [
           </div>
         </div>
       </div>
-      <div
-        className="pf-c-toolbar__expandable-content"
-        id="all-archives-toolbar-expandable-content-1"
-      >
-        <div
-          className="pf-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
-      className="pf-c-toolbar__content pf-m-hidden"
+      className="pf-v5-c-toolbar__content pf-m-hidden"
       hidden={true}
     >
       <div
-        className="pf-c-toolbar__group"
+        className="pf-v5-c-toolbar__group"
       />
     </div>
   </div>,
   <div
-    className="pf-c-empty-state"
+    className="pf-v5-c-empty-state"
   >
     <div
-      className="pf-c-empty-state__content"
+      className="pf-v5-c-empty-state__content"
     >
-      <svg
-        aria-hidden="true"
-        aria-labelledby={null}
-        className="pf-c-empty-state__icon"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
-        viewBox="0 0 512 512"
-        width="1em"
-      >
-        <path
-          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-        />
-      </svg>
-      <h4
-        className="pf-c-title pf-m-lg"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe={true}
+      <div
+        className="pf-v5-c-empty-state__header"
       >
-        No Archived Recordings
-      </h4>
+        <div
+          className="pf-v5-c-empty-state__icon"
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            className="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+        <div
+          className="pf-v5-c-empty-state__title"
+        >
+          <h4
+            className="pf-v5-c-empty-state__title-text"
+          >
+            No Archived Recordings
+          </h4>
+        </div>
+      </div>
     </div>
   </div>,
 ]
diff --git a/src/test/Archives/__snapshots__/AllTargetsArchivedRecordingsTable.test.tsx.snap b/src/test/Archives/__snapshots__/AllTargetsArchivedRecordingsTable.test.tsx.snap
index 572984e870..400e40335b 100644
--- a/src/test/Archives/__snapshots__/AllTargetsArchivedRecordingsTable.test.tsx.snap
+++ b/src/test/Archives/__snapshots__/AllTargetsArchivedRecordingsTable.test.tsx.snap
@@ -2,414 +2,75 @@
 
 exports[`<AllTargetsArchivedRecordingsTable /> renders correctly 1`] = `
 Array [
-  <div
-    className="pf-c-toolbar"
-    data-ouia-component-id="OUIA-Generated-Toolbar-1"
-    data-ouia-component-type="PF4/Toolbar"
-    data-ouia-safe={true}
-    id="all-targets-toolbar"
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
+    }
   >
-    <div
-      className="pf-c-toolbar__content"
-    >
-      <div
-        className="pf-c-toolbar__content-section"
-      >
-        <div
-          className="pf-c-toolbar__group pf-m-filter-group"
-        >
-          <div
-            className="pf-c-toolbar__item"
-          >
-            <div
-              className="pf-c-text-input-group"
-            >
-              <div
-                className="pf-c-text-input-group__main pf-m-icon"
-                onKeyDown={[Function]}
-              >
-                <span
-                  className="pf-c-text-input-group__text"
-                >
-                  <span
-                    className="pf-c-text-input-group__icon"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 512 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
-                  </span>
-                  <input
-                    aria-label="Search input"
-                    className="pf-c-text-input-group__text-input"
-                    disabled={false}
-                    onChange={[Function]}
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
-              </div>
-              
-            </div>
-          </div>
-        </div>
-        <div
-          className="pf-c-toolbar__group"
-        >
-          <div
-            className="pf-c-toolbar__item"
-          >
-            <div
-              className="pf-c-check"
-            >
-              <input
-                aria-invalid={false}
-                aria-label="all-targets-hide-check"
-                checked={true}
-                className="pf-c-check__input"
-                data-ouia-component-id="OUIA-Generated-Checkbox-1"
-                data-ouia-component-type="PF4/Checkbox"
-                data-ouia-safe={true}
-                disabled={false}
-                id="all-targets-hide-check"
-                name="all-targets-hide-check"
-                onChange={[Function]}
-                required={false}
-                type="checkbox"
-              />
-              <label
-                className="pf-c-check__label"
-                htmlFor="all-targets-hide-check"
-              >
-                Hide targets with zero recordings
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pf-c-toolbar__expandable-content"
-        id="all-targets-toolbar-expandable-content-1"
-      >
-        <div
-          className="pf-c-toolbar__group"
-        />
-      </div>
-    </div>
-    <div
-      className="pf-c-toolbar__content pf-m-hidden"
-      hidden={true}
-    >
-      <div
-        className="pf-c-toolbar__group"
-      />
-    </div>
-  </div>,
-  <table
-    aria-label="all-targets-table"
-    className="pf-c-table pf-m-grid-md"
-    data-ouia-component-id="OUIA-Generated-Table-1"
-    data-ouia-component-type="PF4/Table"
-    data-ouia-safe={true}
-    role="grid"
+    Cannot read properties of null (reading 'offsetWidth')
+  </h3>,
+  <pre
+    style={
+      Object {
+        "backgroundColor": "rgba(200,200,200, 0.5)",
+        "padding": "0.5rem",
+      }
+    }
   >
-    <thead
-      className=""
+    TypeError: Cannot read properties of null (reading 'offsetWidth')
+    at /home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-table/dist/js/components/Table/Td.js:136:38
+    at invokePassiveEffectCreate (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
+    at HTMLUnknownElement.callCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
+    at HTMLUnknownElement.callTheUserObjectsOperation (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
+    at innerInvokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
+    at invokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
+    at HTMLUnknownElementImpl._dispatch (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
+    at HTMLUnknownElement.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
+    at Object.invokeGuardedCallbackDev (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
+    at invokeGuardedCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
+    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
+    at flushActWork (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15227:14)
+    at flushWorkAndMicroTasks (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15239:5)
+    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15318:11
+    at processTicksAndRejections (node:internal/process/task_queues:95:5)
+  </pre>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-1"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <th
-          className=""
-          onMouseEnter={[Function]}
-          scope={null}
-        />
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort pf-m-width-80"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Target
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort pf-m-width-15"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Archives
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      className=""
-      role="rowgroup"
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-2"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <td
-          aria-controls="target-ex-expand-0"
-          className="pf-c-table__toggle"
-          id="target-ex-toggle-0"
-          onMouseEnter={[Function]}
-        >
-          <button
-            aria-disabled={false}
-            aria-expanded={false}
-            aria-label="Details"
-            aria-labelledby="simple-node0 expand-toggle0"
-            className="pf-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe={true}
-            disabled={false}
-            id="expand-toggle0"
-            onClick={[Function]}
-            role={null}
-            type="button"
-          >
-            <div
-              className="pf-c-table__toggle-icon"
-            >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                />
-              </svg>
-            </div>
-          </button>
-        </td>
-        <td
-          className=""
-          data-label="Target"
-          onMouseEnter={[Function]}
-        >
-          fooTarget1 (service:jmx:rmi://someUrl1)
-        </td>
-        <td
-          className=""
-          data-label="Archives"
-          onMouseEnter={[Function]}
-        >
-          <span
-            className="pf-c-badge pf-m-unread"
-          >
-            1
-          </span>
-        </td>
-      </tr>
-      <tr
-        className="pf-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-3"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={true}
-      >
-        <td
-          className=""
-          colSpan={3}
-          data-label="Content Details"
-          onMouseEnter={[Function]}
-        />
-      </tr>
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-4"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <td
-          aria-controls="target-ex-expand-1"
-          className="pf-c-table__toggle"
-          id="target-ex-toggle-1"
-          onMouseEnter={[Function]}
-        >
-          <button
-            aria-disabled={false}
-            aria-expanded={false}
-            aria-label="Details"
-            aria-labelledby="simple-node1 expand-toggle1"
-            className="pf-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-2"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe={true}
-            disabled={false}
-            id="expand-toggle1"
-            onClick={[Function]}
-            role={null}
-            type="button"
-          >
-            <div
-              className="pf-c-table__toggle-icon"
-            >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                />
-              </svg>
-            </div>
-          </button>
-        </td>
-        <td
-          className=""
-          data-label="Target"
-          onMouseEnter={[Function]}
-        >
-          fooTarget2 (service:jmx:rmi://someUrl2)
-        </td>
-        <td
-          className=""
-          data-label="Archives"
-          onMouseEnter={[Function]}
-        >
-          <span
-            className="pf-c-badge pf-m-unread"
-          >
-            3
-          </span>
-        </td>
-      </tr>
-      <tr
-        className="pf-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-5"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={true}
-      >
-        <td
-          className=""
-          colSpan={3}
-          data-label="Content Details"
-          onMouseEnter={[Function]}
-        />
-      </tr>
-    </tbody>
-  </table>,
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
 ]
 `;
diff --git a/src/test/Archives/__snapshots__/Archives.test.tsx.snap b/src/test/Archives/__snapshots__/Archives.test.tsx.snap
index e6a96d69d8..7b4eb9cb57 100644
--- a/src/test/Archives/__snapshots__/Archives.test.tsx.snap
+++ b/src/test/Archives/__snapshots__/Archives.test.tsx.snap
@@ -1,146 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Archives /> renders correctly 1`] = `
-<div
-  className="pf-c-page__main-group"
->
-  <section
-    className="pf-c-page__main-section"
+Array [
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
+    }
   >
-    <nav
-      aria-label="Breadcrumb"
-      className="pf-c-breadcrumb"
-      data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
-      data-ouia-component-type="PF4/Breadcrumb"
-      data-ouia-safe={true}
+    {}
+  </h3>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <ol
-        className="pf-c-breadcrumb__list"
-      >
-        <li
-          className="pf-c-breadcrumb__item"
-        >
-          <h1
-            className="pf-c-breadcrumb__heading"
-          >
-            Archives
-          </h1>
-        </li>
-      </ol>
-    </nav>
-    <div
-      className="pf-l-stack pf-m-gutter"
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <div
-        className="pf-l-stack__item"
-      >
-        <article
-          className="pf-c-card"
-          data-ouia-component-id="OUIA-Generated-Card-4"
-          data-ouia-component-type="PF4/Card"
-          data-ouia-safe={true}
-          id=""
-        >
-          <div
-            className="pf-c-card__body"
-          >
-            <div
-              className="pf-c-tabs"
-              data-ouia-component-id="OUIA-Generated-Tabs-3"
-              data-ouia-component-type="PF4/Tabs"
-              data-ouia-safe={true}
-              id="archives"
-              onSelect={[Function]}
-            >
-              <ul
-                className="pf-c-tabs__list"
-                onScroll={[Function]}
-                role="tablist"
-              >
-                <li
-                  className="pf-c-tabs__item pf-m-current"
-                  role="presentation"
-                >
-                  <button
-                    aria-controls="pf-tab-section-all-targets-all-targets"
-                    aria-selected={true}
-                    className="pf-c-tabs__link"
-                    data-ouia-component-type="PF4/TabButton"
-                    data-ouia-safe={true}
-                    id="pf-tab-all-targets-all-targets"
-                    onClick={[Function]}
-                    role="tab"
-                    type="button"
-                  >
-                    <span
-                      className="pf-c-tabs__item-text"
-                    >
-                      All Targets
-                    </span>
-                  </button>
-                </li>
-                <li
-                  className="pf-c-tabs__item"
-                  role="presentation"
-                >
-                  <button
-                    aria-selected={false}
-                    className="pf-c-tabs__link"
-                    data-ouia-component-type="PF4/TabButton"
-                    data-ouia-safe={true}
-                    id="pf-tab-all-archives-all-archives"
-                    onClick={[Function]}
-                    role="tab"
-                    type="button"
-                  >
-                    <span
-                      className="pf-c-tabs__item-text"
-                    >
-                      All Archives
-                    </span>
-                  </button>
-                </li>
-                <li
-                  className="pf-c-tabs__item"
-                  role="presentation"
-                >
-                  <button
-                    aria-selected={false}
-                    className="pf-c-tabs__link"
-                    data-ouia-component-type="PF4/TabButton"
-                    data-ouia-safe={true}
-                    id="pf-tab-uploads-uploads"
-                    onClick={[Function]}
-                    role="tab"
-                    type="button"
-                  >
-                    <span
-                      className="pf-c-tabs__item-text"
-                    >
-                      Uploads
-                    </span>
-                  </button>
-                </li>
-              </ul>
-            </div>
-            <section
-              aria-labelledby="pf-tab-all-targets-all-targets"
-              className="pf-c-tab-content"
-              data-ouia-component-type="PF4/TabContent"
-              data-ouia-safe={true}
-              hidden={false}
-              id="pf-tab-section-all-targets-all-targets"
-              role="tabpanel"
-              tabIndex={0}
-            >
-              <div>
-                All Targets Table
-              </div>
-            </section>
-          </div>
-        </article>
-      </div>
-    </div>
-  </section>
-</div>
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
+]
 `;
diff --git a/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap b/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
index 156ed6e598..44ad8bca32 100644
--- a/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
+++ b/src/test/CreateRecording/__snapshots__/CustomRecordingForm.test.tsx.snap
@@ -5,34 +5,34 @@ Array [
   <small
     className=""
     data-ouia-component-id="OUIA-Generated-Text-1"
-    data-ouia-component-type="PF4/Text"
+    data-ouia-component-type="PF5/Text"
     data-ouia-safe={true}
     data-pf-content={true}
   >
     JDK Flight Recordings are compact records of events which have occurred within the target JVM. Many event types are built in to the JVM itself, while others are user defined.
   </small>,
   <form
-    className="pf-c-form pf-m-horizontal"
+    className="pf-v5-c-form pf-m-horizontal"
     noValidate={true}
   >
     <div
-      className="pf-c-form__group"
+      className="pf-v5-c-form__group"
     >
       <div
-        className="pf-c-form__group-label"
+        className="pf-v5-c-form__group-label"
       >
         <label
-          className="pf-c-form__label"
+          className="pf-v5-c-form__label"
           htmlFor="recording-name"
         >
           <span
-            className="pf-c-form__label-text"
+            className="pf-v5-c-form__label-text"
           >
             Name
           </span>
           <span
             aria-hidden="true"
-            className="pf-c-form__label-required"
+            className="pf-v5-c-form__label-required"
           >
              
             *
@@ -41,36 +41,39 @@ Array [
          
       </div>
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
-        <input
-          aria-describedby="recording-name-helper"
-          aria-invalid={false}
-          aria-label={null}
-          className="pf-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe={true}
-          data-quickstart-id="crf-name"
-          disabled={false}
-          id="recording-name"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          required={true}
-          type="text"
-          value=""
-        />
+        <span
+          className="pf-v5-c-form-control"
+        >
+          <input
+            aria-describedby="recording-name-helper"
+            aria-invalid={false}
+            aria-label={null}
+            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+            data-ouia-component-type="PF5/TextInput"
+            data-ouia-safe={true}
+            data-quickstart-id="crf-name"
+            disabled={false}
+            id="recording-name"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            required={true}
+            type="text"
+            value=""
+          />
+        </span>
         <div
-          className="pf-c-check"
+          className="pf-v5-c-check"
         >
           <input
             aria-invalid={false}
             aria-label="restartExisting checkbox"
             checked={false}
-            className="pf-c-check__input"
+            className="pf-v5-c-check__input"
             data-ouia-component-id="OUIA-Generated-Checkbox-1"
-            data-ouia-component-type="PF4/Checkbox"
+            data-ouia-component-type="PF5/Checkbox"
             data-ouia-safe={true}
             disabled={false}
             id="recording-restart-existing"
@@ -80,40 +83,50 @@ Array [
             type="checkbox"
           />
           <label
-            className="pf-c-check__label"
+            className="pf-v5-c-check__label"
             htmlFor="recording-restart-existing"
           >
             Restart if recording already exists
           </label>
         </div>
         <div
-          aria-live="polite"
-          className="pf-c-form__helper-text"
-          id="recording-name-helper"
+          className="pf-v5-c-form__helper-text"
         >
-          Enter a recording name. This will be unique within the target JVM.
+          <div
+            className="pf-v5-c-helper-text"
+          >
+            <div
+              className="pf-v5-c-helper-text__item"
+            >
+              <span
+                className="pf-v5-c-helper-text__item-text"
+              >
+                Enter a recording name. This will be unique within the target JVM.
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="pf-c-form__group"
+      className="pf-v5-c-form__group"
       data-quickstart-id="crf-duration"
     >
       <div
-        className="pf-c-form__group-label"
+        className="pf-v5-c-form__group-label"
       >
         <label
-          className="pf-c-form__label"
+          className="pf-v5-c-form__label"
           htmlFor="recording-duration"
         >
           <span
-            className="pf-c-form__label-text"
+            className="pf-v5-c-form__label-text"
           >
             Duration
           </span>
           <span
             aria-hidden="true"
-            className="pf-c-form__label-required"
+            className="pf-v5-c-form__label-required"
           >
              
             *
@@ -122,24 +135,24 @@ Array [
          
       </div>
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
         <div
-          className="pf-l-split pf-m-gutter"
+          className="pf-v5-l-split pf-m-gutter"
         >
           <div
-            className="pf-l-split__item"
+            className="pf-v5-l-split__item"
           >
             <div
-              className="pf-c-check"
+              className="pf-v5-c-check"
             >
               <input
                 aria-invalid={false}
                 aria-label="Continuous checkbox"
                 checked={false}
-                className="pf-c-check__input"
+                className="pf-v5-c-check__input"
                 data-ouia-component-id="OUIA-Generated-Checkbox-2"
-                data-ouia-component-type="PF4/Checkbox"
+                data-ouia-component-type="PF5/Checkbox"
                 data-ouia-safe={true}
                 disabled={false}
                 id="recording-continuous"
@@ -149,7 +162,7 @@ Array [
                 type="checkbox"
               />
               <label
-                className="pf-c-check__label"
+                className="pf-v5-c-check__label"
                 htmlFor="recording-continuous"
               >
                 Continuous
@@ -157,18 +170,18 @@ Array [
             </div>
           </div>
           <div
-            className="pf-l-split__item"
+            className="pf-v5-l-split__item"
           >
             <div
-              className="pf-c-check"
+              className="pf-v5-c-check"
             >
               <input
                 aria-invalid={false}
                 aria-label="ArchiveOnStop checkbox"
                 checked={true}
-                className="pf-c-check__input"
+                className="pf-v5-c-check__input"
                 data-ouia-component-id="OUIA-Generated-Checkbox-3"
-                data-ouia-component-type="PF4/Checkbox"
+                data-ouia-component-type="PF5/Checkbox"
                 data-ouia-safe={true}
                 disabled={false}
                 id="recording-archive-on-stop"
@@ -178,7 +191,7 @@ Array [
                 type="checkbox"
               />
               <label
-                className="pf-c-check__label"
+                className="pf-v5-c-check__label"
                 htmlFor="recording-archive-on-stop"
               >
                 Archive on Stop
@@ -187,97 +200,135 @@ Array [
           </div>
         </div>
         <div
-          className="pf-l-split pf-m-gutter"
+          className="pf-v5-l-split pf-m-gutter"
         >
           <div
-            className="pf-l-split__item pf-m-fill"
+            className="pf-v5-l-split__item pf-m-fill"
           >
-            <input
-              aria-invalid={false}
-              aria-label="Duration Picker Period Input"
-              className="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe={true}
-              disabled={false}
-              id="duration-picker-period"
-              min="0"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              required={true}
-              type="number"
-              value={30}
-            />
+            <span
+              className="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid={false}
+                aria-label="Duration Picker Period Input"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                data-ouia-component-type="PF5/TextInput"
+                data-ouia-safe={true}
+                disabled={false}
+                id="duration-picker-period"
+                min="0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={true}
+                type="number"
+                value={30}
+              />
+            </span>
           </div>
           <div
-            className="pf-l-split__item"
+            className="pf-v5-l-split__item"
           >
-            <select
-              aria-invalid={false}
-              aria-label="Duration Picker Units Input"
-              className="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
-              data-ouia-component-type="PF4/FormSelect"
-              data-ouia-safe={true}
-              disabled={false}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              required={false}
-              value={1000}
+            <span
+              className="pf-v5-c-form-control"
             >
-              <option
-                className=""
+              <select
+                aria-invalid={false}
+                aria-label="Duration Picker Units Input"
+                data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+                data-ouia-component-type="PF5/FormSelect"
+                data-ouia-safe={true}
                 disabled={false}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                required={false}
                 value={1000}
               >
-                Seconds
-              </option>
-              <option
-                className=""
-                disabled={false}
-                value={60000}
-              >
-                Minutes
-              </option>
-              <option
-                className=""
-                disabled={false}
-                value={3600000}
+                <option
+                  className=""
+                  disabled={false}
+                  value={1000}
+                >
+                  Seconds
+                </option>
+                <option
+                  className=""
+                  disabled={false}
+                  value={60000}
+                >
+                  Minutes
+                </option>
+                <option
+                  className=""
+                  disabled={false}
+                  value={3600000}
+                >
+                  Hours
+                </option>
+              </select>
+              <span
+                className="pf-v5-c-form-control__utilities"
               >
-                Hours
-              </option>
-            </select>
+                <span
+                  className="pf-v5-c-form-control__toggle-icon"
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    className="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
           </div>
         </div>
         <div
-          aria-live="polite"
-          className="pf-c-form__helper-text pf-m-success"
-          id="recording-duration-helper"
+          className="pf-v5-c-form__helper-text"
         >
-          Time before the recording is automatically stopped and copied to archive.
+          <div
+            className="pf-v5-c-helper-text"
+          >
+            <div
+              className="pf-v5-c-helper-text__item pf-m-success"
+            >
+              <span
+                className="pf-v5-c-helper-text__item-text"
+              >
+                Time before the recording is automatically stopped and copied to archive.
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="pf-c-form__group"
+      className="pf-v5-c-form__group"
     >
       <div
-        className="pf-c-form__group-label"
+        className="pf-v5-c-form__group-label"
       >
         <label
-          className="pf-c-form__label"
+          className="pf-v5-c-form__label"
           htmlFor="recording-template"
         >
           <span
-            className="pf-c-form__label-text"
+            className="pf-v5-c-form__label-text"
           >
             Template
           </span>
           <span
             aria-hidden="true"
-            className="pf-c-form__label-required"
+            className="pf-v5-c-form__label-required"
           >
              
             *
@@ -286,82 +337,115 @@ Array [
          
       </div>
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
-        <select
-          aria-invalid={false}
-          aria-label="Event Template Input"
-          className="pf-c-form-control pf-m-placeholder"
-          data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
-          data-ouia-component-type="PF4/FormSelect"
-          data-ouia-safe={true}
-          data-quickstart-id="template-selector"
-          disabled={false}
-          id="recording-template"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          required={false}
-          value=""
+        <span
+          className="pf-v5-c-form-control pf-m-placeholder"
         >
-          <option
-            className=""
+          <select
+            aria-invalid={false}
+            aria-label="Event Template Input"
+            data-ouia-component-id="OUIA-Generated-FormSelect-default-2"
+            data-ouia-component-type="PF5/FormSelect"
+            data-ouia-safe={true}
+            data-quickstart-id="template-selector"
             disabled={false}
+            id="recording-template"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            required={false}
             value=""
-          >
-            Select a Template
-          </option>
-          <optgroup
-            className=""
-            disabled={false}
-            label="Target Templates"
-          />
-          <optgroup
-            className=""
-            disabled={false}
-            label="Custom Templates"
           >
             <option
               className=""
               disabled={false}
-              value="someEventTemplate,CUSTOM"
+              value=""
             >
-              someEventTemplate
+              Select a Template
             </option>
-          </optgroup>
-        </select>
+            <optgroup
+              className=""
+              disabled={false}
+              label="Target Templates"
+            />
+            <optgroup
+              className=""
+              disabled={false}
+              label="Custom Templates"
+            >
+              <option
+                className=""
+                disabled={false}
+                value="someEventTemplate,CUSTOM"
+              >
+                someEventTemplate
+              </option>
+            </optgroup>
+          </select>
+          <span
+            className="pf-v5-c-form-control__utilities"
+          >
+            <span
+              className="pf-v5-c-form-control__toggle-icon"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
         <div
-          aria-live="polite"
-          className="pf-c-form__helper-text"
-          id="recording-template-helper"
+          className="pf-v5-c-form__helper-text"
         >
-          The Event Template to be applied in this recording
+          <div
+            className="pf-v5-c-helper-text"
+          >
+            <div
+              className="pf-v5-c-helper-text__item"
+            >
+              <span
+                className="pf-v5-c-helper-text__item-text"
+              >
+                A Template must be selected
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
     <div
-      className="pf-c-expandable-section"
+      className="pf-v5-c-expandable-section"
       data-quickstart-id="crf-metadata-opt"
     >
       <button
-        className="pf-c-expandable-section__toggle"
+        aria-controls="expandable-section-content-1703449188075rqjn9wdvhv8"
+        className="pf-v5-c-expandable-section__toggle"
+        id="expandable-section-toggle-1703449188075nb48wgmu9x"
         onClick={[Function]}
         type="button"
       >
         <span
-          className="pf-c-expandable-section__toggle-icon"
+          className="pf-v5-c-expandable-section__toggle-icon"
         >
           <svg
             aria-hidden={true}
             aria-labelledby={null}
+            className="pf-v5-svg"
             fill="currentColor"
             height="1em"
             role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
             viewBox="0 0 256 512"
             width="1em"
           >
@@ -371,97 +455,119 @@ Array [
           </svg>
         </span>
         <span
-          className="pf-c-expandable-section__toggle-text"
+          className="pf-v5-c-expandable-section__toggle-text"
         >
           Show metadata options
         </span>
       </button>
       <div
-        className="pf-c-expandable-section__content"
+        aria-labelledby="expandable-section-toggle-1703449188075nb48wgmu9x"
+        className="pf-v5-c-expandable-section__content"
         hidden={true}
-        id=""
+        id="expandable-section-content-1703449188075rqjn9wdvhv8"
+        role="region"
       >
         <div
-          className="pf-c-form__group"
+          className="pf-v5-c-form__group"
         >
           <div
-            className="pf-c-form__group-label"
+            className="pf-v5-c-form__group-label"
           >
             <label
-              className="pf-c-form__label"
+              className="pf-v5-c-form__label"
               htmlFor="labels"
             >
               <span
-                className="pf-c-form__label-text"
+                className="pf-v5-c-form__label-text"
               >
                 Labels
               </span>
             </label>
              
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={null}
-              viewBox="0 0 1024 1024"
-              width="1em"
+            <span
+              className="pf-v5-c-icon"
             >
-              <path
-                d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
-              />
-            </svg>
+              <span
+                className="pf-v5-c-icon__content"
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  className="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
           <div
-            className="pf-c-form__group-control"
+            className="pf-v5-c-form__group-control"
           >
             <div
-              className="pf-c-helper-text"
+              className="pf-v5-c-form__helper-text"
             >
               <div
-                className="pf-c-helper-text__item pf-m-dynamic"
+                className="pf-v5-c-helper-text"
               >
-                <span
-                  className="pf-c-helper-text__item-text"
+                <div
+                  className="pf-v5-c-helper-text__item pf-m-dynamic"
                 >
-                  Labels with key 
                   <span
-                    className="pf-c-label pf-m-compact"
+                    className="pf-v5-c-helper-text__item-text"
                   >
+                    Labels with key 
                     <span
-                      className="pf-c-label__content"
+                      className="pf-v5-c-label pf-m-compact"
                     >
-                      template.name
+                      <span
+                        className="pf-v5-c-label__content"
+                      >
+                        <span
+                          className="pf-v5-c-label__text"
+                        >
+                          template.name
+                        </span>
+                      </span>
                     </span>
-                  </span>
-                   and 
-                  <span
-                    className="pf-c-label pf-m-compact"
-                  >
+                     and 
                     <span
-                      className="pf-c-label__content"
+                      className="pf-v5-c-label pf-m-compact"
                     >
-                      template.type
+                      <span
+                        className="pf-v5-c-label__content"
+                      >
+                        <span
+                          className="pf-v5-c-label__text"
+                        >
+                          template.type
+                        </span>
+                      </span>
+                    </span>
+                     are set by Cryostat and will be overwritten if specifed.
+                    <span
+                      className="pf-v5-screen-reader"
+                    >
+                      : 
+                      default status
+                      ;
                     </span>
                   </span>
-                   are set by Cryostat and will be overwritten if specifed.
-                  <span
-                    className="pf-u-screen-reader"
-                  >
-                    : 
-                    default status
-                    ;
-                  </span>
-                </span>
+                </div>
               </div>
             </div>
             <button
               aria-disabled={false}
               aria-label="Add Label"
-              className="pf-c-button pf-m-link"
+              className="pf-v5-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-1"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -469,19 +575,15 @@ Array [
               type="button"
             >
               <span
-                className="pf-c-button__icon pf-m-start"
+                className="pf-v5-c-button__icon pf-m-start"
               >
                 <svg
                   aria-hidden={true}
                   aria-labelledby={null}
+                  className="pf-v5-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
                   viewBox="0 0 512 512"
                   width="1em"
                 >
@@ -497,28 +599,26 @@ Array [
       </div>
     </div>
     <div
-      className="pf-c-expandable-section"
+      className="pf-v5-c-expandable-section"
       data-quickstart-id="crf-advanced-opt"
     >
       <button
-        className="pf-c-expandable-section__toggle"
+        aria-controls="expandable-section-content-170344918807668xdubvxuuj"
+        className="pf-v5-c-expandable-section__toggle"
+        id="expandable-section-toggle-1703449188076d9vnhxq8pg"
         onClick={[Function]}
         type="button"
       >
         <span
-          className="pf-c-expandable-section__toggle-icon"
+          className="pf-v5-c-expandable-section__toggle-icon"
         >
           <svg
             aria-hidden={true}
             aria-labelledby={null}
+            className="pf-v5-svg"
             fill="currentColor"
             height="1em"
             role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
             viewBox="0 0 256 512"
             width="1em"
           >
@@ -528,40 +628,42 @@ Array [
           </svg>
         </span>
         <span
-          className="pf-c-expandable-section__toggle-text"
+          className="pf-v5-c-expandable-section__toggle-text"
         >
           Show advanced options
         </span>
       </button>
       <div
-        className="pf-c-expandable-section__content"
+        aria-labelledby="expandable-section-toggle-1703449188076d9vnhxq8pg"
+        className="pf-v5-c-expandable-section__content"
         hidden={true}
-        id=""
+        id="expandable-section-content-170344918807668xdubvxuuj"
+        role="region"
       >
         <small
           className=""
           data-ouia-component-id="OUIA-Generated-Text-2"
-          data-ouia-component-type="PF4/Text"
+          data-ouia-component-type="PF5/Text"
           data-ouia-safe={true}
           data-pf-content={true}
         >
           A value of 0 for maximum size or age means unbounded.
         </small>
         <div
-          className="pf-c-form__group"
+          className="pf-v5-c-form__group"
         >
           <div
-            className="pf-c-form__group-control"
+            className="pf-v5-c-form__group-control"
           >
             <div
-              className="pf-c-check"
+              className="pf-v5-c-check"
             >
               <input
                 aria-invalid={false}
                 checked={true}
-                className="pf-c-check__input"
+                className="pf-v5-c-check__input"
                 data-ouia-component-id="OUIA-Generated-Checkbox-4"
-                data-ouia-component-type="PF4/Checkbox"
+                data-ouia-component-type="PF5/Checkbox"
                 data-ouia-safe={true}
                 disabled={false}
                 id="toDisk-checkbox"
@@ -570,33 +672,43 @@ Array [
                 type="checkbox"
               />
               <label
-                className="pf-c-check__label"
+                className="pf-v5-c-check__label"
                 htmlFor="toDisk-checkbox"
               >
                 To Disk
               </label>
             </div>
             <div
-              aria-live="polite"
-              className="pf-c-form__helper-text"
-              id="To Disk-helper"
+              className="pf-v5-c-form__helper-text"
             >
-              Write contents of buffer onto disk. If disabled, the buffer acts as circular buffer only keeping the most recent recording information
+              <div
+                className="pf-v5-c-helper-text"
+              >
+                <div
+                  className="pf-v5-c-helper-text__item"
+                >
+                  <span
+                    className="pf-v5-c-helper-text__item-text"
+                  >
+                    Write contents of buffer onto disk. If disabled, the buffer acts as circular buffer only keeping the most recent recording information
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
         <div
-          className="pf-c-form__group"
+          className="pf-v5-c-form__group"
         >
           <div
-            className="pf-c-form__group-label"
+            className="pf-v5-c-form__group-label"
           >
             <label
-              className="pf-c-form__label"
+              className="pf-v5-c-form__label"
               htmlFor="maxSize"
             >
               <span
-                className="pf-c-form__label-text"
+                className="pf-v5-c-form__label-text"
               >
                 Maximum size
               </span>
@@ -604,94 +716,132 @@ Array [
              
           </div>
           <div
-            className="pf-c-form__group-control"
+            className="pf-v5-c-form__group-control"
           >
             <div
-              className="pf-l-split pf-m-gutter"
+              className="pf-v5-l-split pf-m-gutter"
             >
               <div
-                className="pf-l-split__item pf-m-fill"
+                className="pf-v5-l-split__item pf-m-fill"
               >
-                <input
-                  aria-invalid={false}
-                  aria-label="max size value"
-                  className="pf-c-form-control"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                  data-ouia-component-type="PF4/TextInput"
-                  data-ouia-safe={true}
-                  disabled={false}
-                  id="maxSize"
-                  min="0"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={true}
-                  type="number"
-                  value={0}
-                />
+                <span
+                  className="pf-v5-c-form-control"
+                >
+                  <input
+                    aria-invalid={false}
+                    aria-label="max size value"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                    data-ouia-component-type="PF5/TextInput"
+                    data-ouia-safe={true}
+                    disabled={false}
+                    id="maxSize"
+                    min="0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={true}
+                    type="number"
+                    value={0}
+                  />
+                </span>
               </div>
               <div
-                className="pf-l-split__item"
+                className="pf-v5-l-split__item"
               >
-                <select
-                  aria-invalid={false}
-                  aria-label="Max size units input"
-                  className="pf-c-form-control"
-                  data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
-                  data-ouia-component-type="PF4/FormSelect"
-                  data-ouia-safe={true}
-                  disabled={false}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  value={1}
+                <span
+                  className="pf-v5-c-form-control"
                 >
-                  <option
-                    className=""
+                  <select
+                    aria-invalid={false}
+                    aria-label="Max size units input"
+                    data-ouia-component-id="OUIA-Generated-FormSelect-default-3"
+                    data-ouia-component-type="PF5/FormSelect"
+                    data-ouia-safe={true}
                     disabled={false}
-                    value="1"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    value={1}
                   >
-                    B
-                  </option>
-                  <option
-                    className=""
-                    disabled={false}
-                    value={1024}
-                  >
-                    KiB
-                  </option>
-                  <option
-                    className=""
-                    disabled={false}
-                    value={1048576}
+                    <option
+                      className=""
+                      disabled={false}
+                      value="1"
+                    >
+                      B
+                    </option>
+                    <option
+                      className=""
+                      disabled={false}
+                      value={1024}
+                    >
+                      KiB
+                    </option>
+                    <option
+                      className=""
+                      disabled={false}
+                      value={1048576}
+                    >
+                      MiB
+                    </option>
+                  </select>
+                  <span
+                    className="pf-v5-c-form-control__utilities"
                   >
-                    MiB
-                  </option>
-                </select>
+                    <span
+                      className="pf-v5-c-form-control__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        className="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
               </div>
             </div>
             <div
-              aria-live="polite"
-              className="pf-c-form__helper-text"
-              id="maxSize-helper"
+              className="pf-v5-c-form__helper-text"
             >
-              The maximum size of recording data saved to disk
+              <div
+                className="pf-v5-c-helper-text"
+              >
+                <div
+                  className="pf-v5-c-helper-text__item"
+                >
+                  <span
+                    className="pf-v5-c-helper-text__item-text"
+                  >
+                    The maximum size of recording data saved to disk
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
         <div
-          className="pf-c-form__group"
+          className="pf-v5-c-form__group"
         >
           <div
-            className="pf-c-form__group-label"
+            className="pf-v5-c-form__group-label"
           >
             <label
-              className="pf-c-form__label"
+              className="pf-v5-c-form__label"
               htmlFor="maxAge"
             >
               <span
-                className="pf-c-form__label-text"
+                className="pf-v5-c-form__label-text"
               >
                 Maximum age
               </span>
@@ -699,99 +849,137 @@ Array [
              
           </div>
           <div
-            className="pf-c-form__group-control"
+            className="pf-v5-c-form__group-control"
           >
             <div
-              className="pf-l-split pf-m-gutter"
+              className="pf-v5-l-split pf-m-gutter"
             >
               <div
-                className="pf-l-split__item pf-m-fill"
+                className="pf-v5-l-split__item pf-m-fill"
               >
-                <input
-                  aria-invalid={false}
-                  aria-label="Max age duration"
-                  className="pf-c-form-control"
-                  data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-                  data-ouia-component-type="PF4/TextInput"
-                  data-ouia-safe={true}
-                  disabled={true}
-                  id="maxAgeDuration"
-                  min="0"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={true}
-                  type="number"
-                  value={0}
-                />
+                <span
+                  className="pf-v5-c-form-control pf-m-disabled"
+                >
+                  <input
+                    aria-invalid={false}
+                    aria-label="Max age duration"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                    data-ouia-component-type="PF5/TextInput"
+                    data-ouia-safe={true}
+                    disabled={true}
+                    id="maxAgeDuration"
+                    min="0"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={true}
+                    type="number"
+                    value={0}
+                  />
+                </span>
               </div>
               <div
-                className="pf-l-split__item"
+                className="pf-v5-l-split__item"
               >
-                <select
-                  aria-invalid={false}
-                  aria-label="Max Age units Input"
-                  className="pf-c-form-control"
-                  data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
-                  data-ouia-component-type="PF4/FormSelect"
-                  data-ouia-safe={true}
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  required={false}
-                  value={1}
+                <span
+                  className="pf-v5-c-form-control pf-m-disabled"
                 >
-                  <option
-                    className=""
-                    disabled={false}
-                    value="1"
-                  >
-                    Seconds
-                  </option>
-                  <option
-                    className=""
-                    disabled={false}
-                    value={60}
+                  <select
+                    aria-invalid={false}
+                    aria-label="Max Age units Input"
+                    data-ouia-component-id="OUIA-Generated-FormSelect-default-4"
+                    data-ouia-component-type="PF5/FormSelect"
+                    data-ouia-safe={true}
+                    disabled={true}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    required={false}
+                    value={1}
                   >
-                    Minutes
-                  </option>
-                  <option
-                    className=""
-                    disabled={false}
-                    value={3600}
+                    <option
+                      className=""
+                      disabled={false}
+                      value="1"
+                    >
+                      Seconds
+                    </option>
+                    <option
+                      className=""
+                      disabled={false}
+                      value={60}
+                    >
+                      Minutes
+                    </option>
+                    <option
+                      className=""
+                      disabled={false}
+                      value={3600}
+                    >
+                      Hours
+                    </option>
+                  </select>
+                  <span
+                    className="pf-v5-c-form-control__utilities"
                   >
-                    Hours
-                  </option>
-                </select>
+                    <span
+                      className="pf-v5-c-form-control__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        aria-labelledby={null}
+                        className="pf-v5-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
               </div>
             </div>
             <div
-              aria-live="polite"
-              className="pf-c-form__helper-text"
-              id="maxAge-helper"
+              className="pf-v5-c-form__helper-text"
             >
-              The maximum age of recording data stored to disk
+              <div
+                className="pf-v5-c-helper-text"
+              >
+                <div
+                  className="pf-v5-c-helper-text__item"
+                >
+                  <span
+                    className="pf-v5-c-helper-text__item-text"
+                  >
+                    The maximum age of recording data stored to disk
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      className="pf-c-form__group pf-m-action"
+      className="pf-v5-c-form__group pf-m-action"
     >
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
         <div
-          className="pf-c-form__actions"
+          className="pf-v5-c-form__actions"
         >
           <button
             aria-disabled={true}
             aria-label={null}
-            className="pf-c-button pf-m-primary pf-m-disabled pf-m-progress"
+            className="pf-v5-c-button pf-m-primary pf-m-disabled pf-m-progress"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe={true}
             data-quickstart-id="crf-create-btn"
             disabled={true}
@@ -805,9 +993,9 @@ Array [
           <button
             aria-disabled={false}
             aria-label={null}
-            className="pf-c-button pf-m-secondary"
+            className="pf-v5-c-button pf-m-secondary"
             data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-            data-ouia-component-type="PF4/Button"
+            data-ouia-component-type="PF5/Button"
             data-ouia-safe={true}
             disabled={false}
             onClick={[Function]}
diff --git a/src/test/CreateRecording/__snapshots__/SnapshotRecordingForm.test.tsx.snap b/src/test/CreateRecording/__snapshots__/SnapshotRecordingForm.test.tsx.snap
index b28ef22be8..d83624797f 100644
--- a/src/test/CreateRecording/__snapshots__/SnapshotRecordingForm.test.tsx.snap
+++ b/src/test/CreateRecording/__snapshots__/SnapshotRecordingForm.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`<SnapshotRecordingForm /> renders correctly 1`] = `
 <form
-  className="pf-c-form pf-m-horizontal"
+  className="pf-v5-c-form pf-m-horizontal"
   noValidate={true}
 >
   <p
     className=""
     data-ouia-component-id="OUIA-Generated-Text-1"
-    data-ouia-component-type="PF4/Text"
+    data-ouia-component-type="PF5/Text"
     data-ouia-safe={true}
     data-pf-content={true}
   >
@@ -19,20 +19,20 @@ exports[`<SnapshotRecordingForm /> renders correctly 1`] = `
      recordings. Snapshots do not themselves define which events are enabled, their thresholds, or any other options. A Snapshot is only ever in the STOPPED state from the moment it is created.
   </p>
   <div
-    className="pf-c-form__group pf-m-action"
+    className="pf-v5-c-form__group pf-m-action"
   >
     <div
-      className="pf-c-form__group-control"
+      className="pf-v5-c-form__group-control"
     >
       <div
-        className="pf-c-form__actions"
+        className="pf-v5-c-form__actions"
       >
         <button
           aria-disabled={false}
           aria-label={null}
-          className="pf-c-button pf-m-primary pf-m-progress"
+          className="pf-v5-c-button pf-m-primary pf-m-progress"
           data-ouia-component-id="OUIA-Generated-Button-primary-1"
-          data-ouia-component-type="PF4/Button"
+          data-ouia-component-type="PF5/Button"
           data-ouia-safe={true}
           disabled={false}
           onClick={[Function]}
@@ -44,9 +44,9 @@ exports[`<SnapshotRecordingForm /> renders correctly 1`] = `
         <button
           aria-disabled={false}
           aria-label={null}
-          className="pf-c-button pf-m-secondary"
+          className="pf-v5-c-button pf-m-secondary"
           data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-          data-ouia-component-type="PF4/Button"
+          data-ouia-component-type="PF5/Button"
           data-ouia-safe={true}
           disabled={false}
           onClick={[Function]}
diff --git a/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap b/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap
index 8e02091714..6af762e504 100644
--- a/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap
+++ b/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap
@@ -1,698 +1,108 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
-<div
-  className="automated-analysis-datalist-outerscroll pf-c-scroll-outer-wrapper"
->
-  <div
-    className="automated-analysis-datalist-innerscroll pf-c-scroll-inner-wrapper"
+Array [
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
+    }
   >
-    <table
-      aria-label="Automated Analysis Data List"
-      className="pf-c-table pf-m-grid-md pf-m-sticky-header"
-      data-ouia-component-id="OUIA-Generated-Table-1"
-      data-ouia-component-type="PF4/Table"
-      data-ouia-safe={true}
-      role="grid"
+    Cannot read properties of null (reading 'offsetWidth')
+  </h3>,
+  <pre
+    style={
+      Object {
+        "backgroundColor": "rgba(200,200,200, 0.5)",
+        "padding": "0.5rem",
+      }
+    }
+  >
+    TypeError: Cannot read properties of null (reading 'offsetWidth')
+    at /home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-table/dist/js/components/Table/Td.js:136:38
+    at invokePassiveEffectCreate (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
+    at HTMLUnknownElement.callCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
+    at HTMLUnknownElement.callTheUserObjectsOperation (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
+    at innerInvokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
+    at invokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
+    at HTMLUnknownElementImpl._dispatch (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
+    at HTMLUnknownElement.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
+    at Object.invokeGuardedCallbackDev (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
+    at invokeGuardedCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
+    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
+    at performSyncWorkOnRoot (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13380:3)
+    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushSyncCallbackQueueImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
+    at flushSyncCallbackQueue (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
+    at batchedUpdates (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13459:7)
+    at act (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15280:14)
+    at /home/thvo/workspace/cryostat-web/src/test/utils.tsx:102:12
+    at step (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:195:27)
+    at Object.next (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:176:57)
+    at /home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:169:75
+    at new Promise (&lt;anonymous&gt;)
+    at Object.__awaiter (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:165:16)
+    at renderSnapshot (/home/thvo/workspace/cryostat-web/src/test/utils.tsx:99:60)
+    at /home/thvo/workspace/cryostat-web/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx:85:38
+    at step (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:195:27)
+    at Object.next (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:176:57)
+    at /home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:169:75
+    at new Promise (&lt;anonymous&gt;)
+    at Object.__awaiter (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:165:16)
+    at Object.&lt;anonymous&gt; (/home/thvo/workspace/cryostat-web/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx:84:27)
+    at Promise.then.completed (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/utils.js:391:28)
+    at new Promise (&lt;anonymous&gt;)
+    at callAsyncCircusFn (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/utils.js:316:10)
+    at _callCircusTest (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:218:40)
+    at processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at _runTest (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:155:3)
+    at _runTestsForDescribeBlock (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:66:9)
+    at _runTestsForDescribeBlock (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:60:9)
+    at run (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:25:3)
+    at runAndTransformResultsToJestFormat (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
+    at jestAdapter (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
+    at runTestInternal (/home/thvo/workspace/cryostat-web/node_modules/jest-runner/build/runTest.js:389:16)
+    at runTest (/home/thvo/workspace/cryostat-web/node_modules/jest-runner/build/runTest.js:475:34)
+    at Object.worker (/home/thvo/workspace/cryostat-web/node_modules/jest-runner/build/testWorker.js:133:12)
+  </pre>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
+    >
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <thead
-        className=""
-      >
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-1"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <th
-            aria-sort="none"
-            className="pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  Name
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-          <th
-            aria-sort="none"
-            className="pf-m-wrap pf-c-table__sort"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            <button
-              className="pf-c-table__button"
-              onClick={[Function]}
-              type="button"
-            >
-              <div
-                className="pf-c-table__button-content"
-              >
-                <span
-                  className="pf-c-table__text"
-                  onMouseEnter={[Function]}
-                >
-                  Score
-                </span>
-                <span
-                  className="pf-c-table__sort-indicator"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </button>
-          </th>
-          <th
-            className="pf-m-truncate"
-            onMouseEnter={[Function]}
-            scope="col"
-          >
-            Description
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        className=""
-        role="rowgroup"
-      >
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-2"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <td
-            className="pf-m-width-10"
-            data-label="Name"
-            onMouseEnter={[Function]}
-          >
-            rule1
-          </td>
-          <td
-            className="pf-m-wrap"
-            data-label="Score"
-            onMouseEnter={[Function]}
-          >
-            <div
-              className="pf-l-flex pf-m-space-items-sm"
-            >
-              <div
-                className=""
-              >
-                100.0
-              </div>
-              <div
-                className=""
-              >
-                <span
-                  className="pf-m-red pf-c-label__icon"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </div>
-          </td>
-          <td
-            className="pf-m-break-word"
-            data-label="Description"
-            onMouseEnter={[Function]}
-          >
-            <div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-1"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Summary
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-1"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    first thing happened
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-2"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Explanation
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-2"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    first reason
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-3"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Solution
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-3"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    first solution
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-4"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Suggestions
-                  </h5>
-                  <div
-                    className="pf-l-stack"
-                  >
-                    <div
-                      className="pf-l-stack__item"
-                    >
-                      <h6
-                        className="pf-c-title pf-m-md"
-                        data-ouia-component-id="OUIA-Generated-Title-5"
-                        data-ouia-component-type="PF4/Title"
-                        data-ouia-safe={true}
-                      >
-                        setting1
-                      </h6>
-                      <span
-                        className="pf-c-label"
-                      >
-                        <span
-                          className="pf-c-label__content"
-                        >
-                          name1
-                          =
-                          value1
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </span>
-                <br />
-              </div>
-            </div>
-          </td>
-        </tr>
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-3"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <td
-            className="pf-m-width-10"
-            data-label="Name"
-            onMouseEnter={[Function]}
-          >
-            rule3
-          </td>
-          <td
-            className="pf-m-wrap"
-            data-label="Score"
-            onMouseEnter={[Function]}
-          >
-            <div
-              className="pf-l-flex pf-m-space-items-sm"
-            >
-              <div
-                className=""
-              >
-                55.0
-              </div>
-              <div
-                className=""
-              >
-                <span
-                  className="pf-m-orange pf-c-label__icon"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 576 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </div>
-          </td>
-          <td
-            className="pf-m-break-word"
-            data-label="Description"
-            onMouseEnter={[Function]}
-          >
-            <div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-6"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Summary
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-4"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    third thing happened
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-7"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Explanation
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-5"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    third reason
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-8"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Solution
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-6"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    third solution
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div />
-            </div>
-          </td>
-        </tr>
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-4"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <td
-            className="pf-m-width-10"
-            data-label="Name"
-            onMouseEnter={[Function]}
-          >
-            rule2
-          </td>
-          <td
-            className="pf-m-wrap"
-            data-label="Score"
-            onMouseEnter={[Function]}
-          >
-            <div
-              className="pf-l-flex pf-m-space-items-sm"
-            >
-              <div
-                className=""
-              >
-                0.0
-              </div>
-              <div
-                className=""
-              >
-                <span
-                  className="pf-m-green pf-c-label__icon"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </div>
-          </td>
-          <td
-            className="pf-m-break-word"
-            data-label="Description"
-            onMouseEnter={[Function]}
-          >
-            <div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-9"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Summary
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-7"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    second thing happened
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-10"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Explanation
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-8"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    second reason
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-11"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Solution
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-9"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    second solution
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div />
-            </div>
-          </td>
-        </tr>
-        <tr
-          className=""
-          data-ouia-component-id="OUIA-Generated-TableRow-5"
-          data-ouia-component-type="PF4/TableRow"
-          data-ouia-safe={true}
-          hidden={false}
-        >
-          <td
-            className="pf-m-width-10"
-            data-label="Name"
-            onMouseEnter={[Function]}
-          >
-            N/A rule
-          </td>
-          <td
-            className="pf-m-wrap"
-            data-label="Score"
-            onMouseEnter={[Function]}
-          >
-            <div
-              className="pf-l-flex pf-m-space-items-sm"
-            >
-              <div
-                className=""
-              >
-                N/A
-              </div>
-              <div
-                className=""
-              >
-                <span
-                  className="pf-m-grey pf-c-label__icon"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 512 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </div>
-          </td>
-          <td
-            className="pf-m-break-word"
-            data-label="Description"
-            onMouseEnter={[Function]}
-          >
-            <div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-12"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Summary
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-10"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    fourth thing happened
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-13"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Explanation
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-11"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    fourth reason
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div>
-                <span>
-                  <h5
-                    className="pf-c-title pf-m-md"
-                    data-ouia-component-id="OUIA-Generated-Title-14"
-                    data-ouia-component-type="PF4/Title"
-                    data-ouia-safe={true}
-                  >
-                    Solution
-                  </h5>
-                  <p
-                    className=""
-                    data-ouia-component-id="OUIA-Generated-Text-12"
-                    data-ouia-component-type="PF4/Text"
-                    data-ouia-safe={true}
-                    data-pf-content={true}
-                  >
-                    fourth solution
-                  </p>
-                </span>
-                <br />
-              </div>
-              <div />
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
+]
 `;
diff --git a/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap b/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap
index 7d3abde695..742744206e 100644
--- a/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap
+++ b/src/test/Dashboard/Charts/jfr/__snapshots__/JFRMetricsChartCard.test.tsx.snap
@@ -10,10 +10,10 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-1"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="CPU Load-chart-card"
       style={
@@ -31,23 +31,17 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="CPU Load-chart-card-title"
-          >
-            CPU Load (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize CPU Load chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -57,14 +51,10 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -76,9 +66,9 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
             <button
               aria-disabled={false}
               aria-label="Pop out CPU Load chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -88,14 +78,10 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -105,10 +91,24 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="CPU Load-chart-card-title"
+              >
+                CPU Load (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="grafana-iframe-wrapper"
@@ -119,7 +119,7 @@ exports[`<JFRMetricsChartCard /> renders correctly 1`] = `
           />
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -138,10 +138,10 @@ exports[`<JFRMetricsChartCard /> renders empty state correctly 1`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-3"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="CPU Load-chart-card"
       style={Object {}}
@@ -155,92 +155,112 @@ exports[`<JFRMetricsChartCard /> renders empty state correctly 1`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="CPU Load-chart-card-title"
+            className="pf-v5-c-card__actions"
+          />
+          <div
+            className="pf-v5-c-card__header-main"
           >
-            CPU Load (last 120s, every 10s)
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="CPU Load-chart-card-title"
+              >
+                CPU Load (last 120s, every 10s)
+              </div>
+            </div>
           </div>
-          <div
-            className="pf-c-card__actions"
-          />
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
-          className="pf-l-bullseye"
+          className="pf-v5-l-bullseye"
         >
           <div
-            className="pf-c-empty-state pf-m-lg"
+            className="pf-v5-c-empty-state pf-m-lg"
           >
             <div
-              className="pf-c-empty-state__content"
+              className="pf-v5-c-empty-state__content"
             >
-              <svg
-                aria-hidden="true"
-                aria-labelledby={null}
-                className="pf-c-empty-state__icon"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 896 1024"
-                width="1em"
-              >
-                <path
-                  d="M750.6252,63 L896.0002,223 L750.6252,383 L704.0002,339.594 L780.807,255.06 L179.0074,254.909 L178.9774,254.909 C147.0174,254.909 117.0004,268.239 94.4554,292.446 C71.9454,316.615 59.6154,348.704 59.7374,382.802 C59.9914,453.334 113.4824,511 178.9784,511 L717.0204,511 C764.8314,511 809.7404,530.399 843.4754,566.14 C877.3464,602.026 896.0004,649.93 896.0004,701.029 L896.0004,701.689 C896.0004,752.688 877.3844,800.818 843.5834,837.211 C809.9954,873.375 765.2134,893.895 717.4864,894.992 L717.1364,895 L276.310151,895.001486 C261.798404,956.828303 206.189494,1003 140,1003 C62.804,1003 0,940.196 0,863 C0,785.804 62.804,723 140,723 C206.189852,723 261.799004,769.172196 276.310386,830.999515 L716.5394,831 C748.5984,830.173 778.6564,816.448 801.2074,792.166 C823.8134,767.826 836.2624,735.694 836.2624,701.689 L836.2624,701.029 C836.2624,667.119 823.8964,635.341 801.4404,611.55 C778.9654,587.739 748.9844,575 717.0204,575 L178.9784,575 C80.6694,575 0.0014,489 0.0014,383.047 C0.0014,332 18.3334,283.634 52.1394,247.337 C85.9744,211.008 131.0224,191 178.9774,191 L179.0224,191 L781.009,191.162 L704.0002,106.406 L750.6252,63 Z M140,787 C98.093,787 64,821.094 64,863 C64,904.906 98.093,939 140,939 C181.907,939 216,904.906 216,863 C216,821.094 181.907,787 140,787 Z"
-                />
-              </svg>
-              <h2
-                className="pf-c-title pf-m-md"
-                data-ouia-component-id="OUIA-Generated-Title-4"
-                data-ouia-component-type="PF4/Title"
-                data-ouia-safe={true}
+              <div
+                className="pf-v5-c-empty-state__header"
               >
-                No source recording
-              </h2>
+                <div
+                  className="pf-v5-c-empty-state__icon"
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    className="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 896 1024"
+                    width="1em"
+                  >
+                    <path
+                      d="M750.6252,63 L896.0002,223 L750.6252,383 L704.0002,339.594 L780.807,255.06 L179.0074,254.909 L178.9774,254.909 C147.0174,254.909 117.0004,268.239 94.4554,292.446 C71.9454,316.615 59.6154,348.704 59.7374,382.802 C59.9914,453.334 113.4824,511 178.9784,511 L717.0204,511 C764.8314,511 809.7404,530.399 843.4754,566.14 C877.3464,602.026 896.0004,649.93 896.0004,701.029 L896.0004,701.689 C896.0004,752.688 877.3844,800.818 843.5834,837.211 C809.9954,873.375 765.2134,893.895 717.4864,894.992 L717.1364,895 L276.310151,895.001486 C261.798404,956.828303 206.189494,1003 140,1003 C62.804,1003 0,940.196 0,863 C0,785.804 62.804,723 140,723 C206.189852,723 261.799004,769.172196 276.310386,830.999515 L716.5394,831 C748.5984,830.173 778.6564,816.448 801.2074,792.166 C823.8134,767.826 836.2624,735.694 836.2624,701.689 L836.2624,701.029 C836.2624,667.119 823.8964,635.341 801.4404,611.55 C778.9654,587.739 748.9844,575 717.0204,575 L178.9784,575 C80.6694,575 0.0014,489 0.0014,383.047 C0.0014,332 18.3334,283.634 52.1394,247.337 C85.9744,211.008 131.0224,191 178.9774,191 L179.0224,191 L781.009,191.162 L704.0002,106.406 L750.6252,63 Z M140,787 C98.093,787 64,821.094 64,863 C64,904.906 98.093,939 140,939 C181.907,939 216,904.906 216,863 C216,821.094 181.907,787 140,787 Z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  className="pf-v5-c-empty-state__title"
+                >
+                  <h2
+                    className="pf-v5-c-empty-state__title-text"
+                  >
+                    No source recording
+                  </h2>
+                </div>
+              </div>
               <div
-                className="pf-c-empty-state__body"
+                className="pf-v5-c-empty-state__body"
               >
                 Metrics cards display data taken from running flight recordings with the label 
                 <span
-                  className="pf-c-label pf-m-blue pf-m-compact"
+                  className="pf-v5-c-label pf-m-blue pf-m-compact"
                 >
                   <span
-                    className="pf-c-label__content"
+                    className="pf-v5-c-label__content"
                   >
-                    origin=dashboard_metrics
+                    <span
+                      className="pf-v5-c-label__text"
+                    >
+                      origin=dashboard_metrics
+                    </span>
                   </span>
                 </span>
                 . No such recordings are currently available.
               </div>
-              <button
-                aria-disabled={false}
-                aria-label={null}
-                className="pf-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-3"
-                data-ouia-component-type="PF4/Button"
-                data-ouia-safe={true}
-                disabled={false}
-                onClick={[Function]}
-                role={null}
-                type="button"
+              <div
+                className="pf-v5-c-empty-state__footer"
               >
-                Create
-              </button>
+                <button
+                  aria-disabled={false}
+                  aria-label={null}
+                  className="pf-v5-c-button pf-m-primary"
+                  data-ouia-component-id="OUIA-Generated-Button-primary-3"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe={true}
+                  disabled={false}
+                  onClick={[Function]}
+                  role={null}
+                  type="button"
+                >
+                  Create
+                </button>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -259,10 +279,10 @@ exports[`<JFRMetricsChartCard /> renders loading state correctly 1`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-2"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="CPU Load-chart-card"
       style={Object {}}
@@ -276,64 +296,77 @@ exports[`<JFRMetricsChartCard /> renders loading state correctly 1`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="CPU Load-chart-card-title"
+            className="pf-v5-c-card__actions"
+          />
+          <div
+            className="pf-v5-c-card__header-main"
           >
-            CPU Load (last 120s, every 10s)
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="CPU Load-chart-card-title"
+              >
+                CPU Load (last 120s, every 10s)
+              </div>
+            </div>
           </div>
-          <div
-            className="pf-c-card__actions"
-          />
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
-          className="pf-l-bullseye"
+          className="pf-v5-l-bullseye"
         >
           <div
-            className="pf-c-empty-state"
+            className="pf-v5-c-empty-state"
           >
             <div
-              className="pf-c-empty-state__content"
+              className="pf-v5-c-empty-state__content"
             >
               <div
-                className="pf-c-empty-state__icon"
+                className="pf-v5-c-empty-state__header"
               >
-                <span
-                  aria-label="Contents"
-                  aria-valuetext="Loading..."
-                  className="pf-c-spinner pf-m-xl"
-                  role="progressbar"
+                <div
+                  className="pf-v5-c-empty-state__icon"
                 >
-                  <span
-                    className="pf-c-spinner__clipper"
-                  />
-                  <span
-                    className="pf-c-spinner__lead-ball"
-                  />
-                  <span
-                    className="pf-c-spinner__tail-ball"
-                  />
-                </span>
+                  <svg
+                    aria-hidden={false}
+                    aria-label="Contents"
+                    aria-valuetext="Loading..."
+                    className="pf-v5-c-spinner pf-m-xl"
+                    role="progressbar"
+                    viewBox="0 0 100 100"
+                  >
+                    <circle
+                      className="pf-v5-c-spinner__path"
+                      cx="50"
+                      cy="50"
+                      fill="none"
+                      r="45"
+                    />
+                  </svg>
+                </div>
+                <div
+                  className="pf-v5-c-empty-state__title"
+                >
+                  <h2
+                    className="pf-v5-c-empty-state__title-text"
+                  >
+                    Loading
+                  </h2>
+                </div>
               </div>
-              <h2
-                className="pf-c-title pf-m-lg"
-                data-ouia-component-id="OUIA-Generated-Title-3"
-                data-ouia-component-type="PF4/Title"
-                data-ouia-safe={true}
-              >
-                Loading
-              </h2>
             </div>
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
diff --git a/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap b/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap
index e00c69e7c0..77071bde6b 100644
--- a/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap
+++ b/src/test/Dashboard/Charts/mbean/__snapshots__/MBeanMetricsChartCard.test.tsx.snap
@@ -10,10 +10,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-1"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Process CPU Load-chart-card"
     >
@@ -25,23 +25,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Process CPU Load-chart-card-title"
-          >
-            Process CPU Load (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize Process CPU Load chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -51,14 +45,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -68,10 +58,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Process CPU Load-chart-card-title"
+              >
+                Process CPU Load (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -82,7 +86,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -119,8 +123,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -140,9 +144,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -166,12 +170,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -191,8 +195,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -207,7 +211,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                 <text
                   direction="inherit"
                   dx={0}
-                  id="axis-axisLabel-0"
+                  id="chart-axis-1-ChartLabel"
                   transform="rotate(-90,14,125)"
                   x={14}
                   y={122.97}
@@ -218,9 +222,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     style={
                       Object {
                         "fill": "var(--pf-global--palette--black-200)",
-                        "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                        "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                         "fontSize": 14,
-                        "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                        "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                         "stroke": "transparent",
                         "textAnchor": "middle",
                       }
@@ -239,9 +243,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -257,9 +261,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -283,12 +287,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -307,9 +311,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -325,9 +329,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -351,12 +355,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -375,9 +379,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -393,9 +397,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -419,12 +423,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -443,9 +447,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -461,9 +465,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -487,12 +491,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -511,9 +515,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -529,9 +533,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -555,12 +559,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -618,7 +622,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 1`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -637,10 +641,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-2"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="System Load Average-chart-card"
     >
@@ -652,23 +656,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="System Load Average-chart-card-title"
-          >
-            System Load Average (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize System Load Average chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -678,14 +676,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -695,10 +689,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="System Load Average-chart-card-title"
+              >
+                System Load Average (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -709,7 +717,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -746,8 +754,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -767,9 +775,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -793,12 +801,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -818,8 +826,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -839,9 +847,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -857,9 +865,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -883,12 +891,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -907,9 +915,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -925,9 +933,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -951,12 +959,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -975,9 +983,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -993,9 +1001,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1019,12 +1027,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1043,9 +1051,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1061,9 +1069,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1087,12 +1095,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1111,9 +1119,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1129,9 +1137,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1155,12 +1163,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1218,7 +1226,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 2`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -1237,10 +1245,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-3"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="System CPU Load-chart-card"
     >
@@ -1252,23 +1260,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="System CPU Load-chart-card-title"
-          >
-            System CPU Load (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize System CPU Load chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-3"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -1278,14 +1280,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -1295,10 +1293,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="System CPU Load-chart-card-title"
+              >
+                System CPU Load (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -1309,7 +1321,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -1346,8 +1358,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -1367,9 +1379,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1393,12 +1405,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -1418,8 +1430,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -1434,7 +1446,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                 <text
                   direction="inherit"
                   dx={0}
-                  id="axis-axisLabel-0"
+                  id="chart-axis-1-ChartLabel"
                   transform="rotate(-90,14,125)"
                   x={14}
                   y={122.97}
@@ -1445,9 +1457,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     style={
                       Object {
                         "fill": "var(--pf-global--palette--black-200)",
-                        "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                        "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                         "fontSize": 14,
-                        "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                        "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                         "stroke": "transparent",
                         "textAnchor": "middle",
                       }
@@ -1466,9 +1478,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1484,9 +1496,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1510,12 +1522,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1534,9 +1546,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1552,9 +1564,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1578,12 +1590,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1602,9 +1614,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1620,9 +1632,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1646,12 +1658,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1670,9 +1682,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1688,9 +1700,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1714,12 +1726,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1738,9 +1750,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -1756,9 +1768,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -1782,12 +1794,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -1845,7 +1857,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 3`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -1864,10 +1876,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-4"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Physical Memory-chart-card"
     >
@@ -1879,23 +1891,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Physical Memory-chart-card-title"
-          >
-            Physical Memory (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize Physical Memory chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-4"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -1905,14 +1911,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -1922,10 +1924,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Physical Memory-chart-card-title"
+              >
+                Physical Memory (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -1936,7 +1952,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -1973,8 +1989,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -1994,9 +2010,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2020,12 +2036,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -2045,8 +2061,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -2061,7 +2077,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                 <text
                   direction="inherit"
                   dx={0}
-                  id="axis-axisLabel-0"
+                  id="chart-axis-1-ChartLabel"
                   transform="rotate(-90,14,125)"
                   x={14}
                   y={122.97}
@@ -2072,9 +2088,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     style={
                       Object {
                         "fill": "var(--pf-global--palette--black-200)",
-                        "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                        "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                         "fontSize": 14,
-                        "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                        "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                         "stroke": "transparent",
                         "textAnchor": "middle",
                       }
@@ -2093,9 +2109,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2111,9 +2127,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2137,12 +2153,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2161,9 +2177,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2179,9 +2195,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2205,12 +2221,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2229,9 +2245,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2247,9 +2263,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2273,12 +2289,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2297,9 +2313,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2315,9 +2331,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2341,12 +2357,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2365,9 +2381,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2383,9 +2399,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2409,12 +2425,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2472,7 +2488,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 4`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -2491,10 +2507,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-5"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Heap Memory Usage-chart-card"
     >
@@ -2506,23 +2522,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Heap Memory Usage-chart-card-title"
-          >
-            Heap Memory Usage (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize Heap Memory Usage chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-5"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -2532,14 +2542,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -2549,10 +2555,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Heap Memory Usage-chart-card-title"
+              >
+                Heap Memory Usage (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -2563,7 +2583,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -2600,8 +2620,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -2621,9 +2641,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2647,12 +2667,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -2672,8 +2692,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -2688,7 +2708,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                 <text
                   direction="inherit"
                   dx={0}
-                  id="axis-axisLabel-0"
+                  id="chart-axis-1-ChartLabel"
                   transform="rotate(-90,14,125)"
                   x={14}
                   y={122.97}
@@ -2699,9 +2719,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     style={
                       Object {
                         "fill": "var(--pf-global--palette--black-200)",
-                        "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                        "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                         "fontSize": 14,
-                        "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                        "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                         "stroke": "transparent",
                         "textAnchor": "middle",
                       }
@@ -2720,9 +2740,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2738,9 +2758,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2764,12 +2784,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2788,9 +2808,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2806,9 +2826,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2832,12 +2852,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2856,9 +2876,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2874,9 +2894,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2900,12 +2920,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2924,9 +2944,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -2942,9 +2962,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -2968,12 +2988,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -2992,9 +3012,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -3010,9 +3030,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3036,12 +3056,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -3099,7 +3119,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 5`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -3118,10 +3138,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-6"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Heap Usage Percentage-chart-card"
     >
@@ -3133,23 +3153,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Heap Usage Percentage-chart-card-title"
-          >
-            Heap Usage Percentage (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize Heap Usage Percentage chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-6"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -3159,14 +3173,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -3176,10 +3186,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Heap Usage Percentage-chart-card-title"
+              >
+                Heap Usage Percentage (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -3190,7 +3214,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -3227,9 +3251,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-theme--blue--ColorScale--100, #06c)",
+                      "fill": "var(--pf-v5-chart-theme--blue--ColorScale--100, #06c)",
                       "padding": 8,
-                      "stroke": "var(--pf-chart-pie--data--stroke--Color, transparent)",
+                      "stroke": "var(--pf-v5-chart-pie--data--stroke--Color, transparent)",
                       "strokeWidth": 1,
                     }
                   }
@@ -3247,9 +3271,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-donut--threshold--first--Color, #f0f0f0)",
+                      "fill": "var(--pf-v5-chart-donut--threshold--first--Color, #f0f0f0)",
                       "padding": 8,
-                      "stroke": "var(--pf-chart-pie--data--stroke--Color, transparent)",
+                      "stroke": "var(--pf-v5-chart-pie--data--stroke--Color, transparent)",
                       "strokeWidth": 1,
                     }
                   }
@@ -3268,9 +3292,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
                   style={
                     Object {
                       "fill": "var(--pf-global--palette--black-200)",
-                      "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                      "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                       "fontSize": 24,
-                      "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                      "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                       "stroke": "transparent",
                       "textAnchor": "middle",
                     }
@@ -3310,7 +3334,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 6`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -3329,10 +3353,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-7"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Non-Heap Memory Usage-chart-card"
     >
@@ -3344,23 +3368,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Non-Heap Memory Usage-chart-card-title"
-          >
-            Non-Heap Memory Usage (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize Non-Heap Memory Usage chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-7"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -3370,14 +3388,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -3387,10 +3401,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Non-Heap Memory Usage-chart-card-title"
+              >
+                Non-Heap Memory Usage (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -3401,7 +3429,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -3438,8 +3466,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -3459,9 +3487,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3485,12 +3513,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -3510,8 +3538,8 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -3526,7 +3554,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                 <text
                   direction="inherit"
                   dx={0}
-                  id="axis-axisLabel-0"
+                  id="chart-axis-1-ChartLabel"
                   transform="rotate(-90,14,125)"
                   x={14}
                   y={122.97}
@@ -3537,9 +3565,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     style={
                       Object {
                         "fill": "var(--pf-global--palette--black-200)",
-                        "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                        "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                         "fontSize": 14,
-                        "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                        "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                         "stroke": "transparent",
                         "textAnchor": "middle",
                       }
@@ -3558,9 +3586,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -3576,9 +3604,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3602,12 +3630,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -3626,9 +3654,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -3644,9 +3672,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3670,12 +3698,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -3694,9 +3722,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -3712,9 +3740,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3738,12 +3766,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -3762,9 +3790,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -3780,9 +3808,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3806,12 +3834,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -3830,9 +3858,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -3848,9 +3876,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -3874,12 +3902,12 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -3937,7 +3965,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 7`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -3956,10 +3984,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-8"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Heap Usage Percentage-chart-card"
     >
@@ -3971,23 +3999,17 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Heap Usage Percentage-chart-card-title"
-          >
-            Heap Usage Percentage (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={false}
               aria-label="Synchronize Heap Usage Percentage chart"
-              className="pf-c-button pf-m-plain"
+              className="pf-v5-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-8"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={false}
               onClick={[Function]}
@@ -3997,14 +4019,10 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -4014,10 +4032,24 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Heap Usage Percentage-chart-card-title"
+              >
+                Heap Usage Percentage (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -4028,7 +4060,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -4065,9 +4097,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-theme--blue--ColorScale--100, #06c)",
+                      "fill": "var(--pf-v5-chart-theme--blue--ColorScale--100, #06c)",
                       "padding": 8,
-                      "stroke": "var(--pf-chart-pie--data--stroke--Color, transparent)",
+                      "stroke": "var(--pf-v5-chart-pie--data--stroke--Color, transparent)",
                       "strokeWidth": 1,
                     }
                   }
@@ -4085,9 +4117,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-donut--threshold--first--Color, #f0f0f0)",
+                      "fill": "var(--pf-v5-chart-donut--threshold--first--Color, #f0f0f0)",
                       "padding": 8,
-                      "stroke": "var(--pf-chart-pie--data--stroke--Color, transparent)",
+                      "stroke": "var(--pf-v5-chart-pie--data--stroke--Color, transparent)",
                       "strokeWidth": 1,
                     }
                   }
@@ -4106,9 +4138,9 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
                   style={
                     Object {
                       "fill": "var(--pf-global--palette--black-200)",
-                      "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                      "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                       "fontSize": 24,
-                      "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                      "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                       "stroke": "transparent",
                       "textAnchor": "middle",
                     }
@@ -4148,7 +4180,7 @@ exports[`<MBeanMetricsChartCard /> renders correctly: with-content 8`] = `
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
@@ -4167,10 +4199,10 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
   <div
     className="dashboard-card-resizable-wrapper"
   >
-    <article
-      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+    <div
+      className="pf-v5-c-card pf-m-compact pf-m-rounded dashboard-card"
       data-ouia-component-id="OUIA-Generated-Card-9"
-      data-ouia-component-type="PF4/Card"
+      data-ouia-component-type="PF5/Card"
       data-ouia-safe={true}
       id="Process CPU Load-chart-card"
     >
@@ -4182,23 +4214,17 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
         onMouseLeave={[Function]}
       >
         <div
-          className="pf-c-card__header"
+          className="pf-v5-c-card__header"
         >
           <div
-            className="pf-c-card__title"
-            id="Process CPU Load-chart-card-title"
-          >
-            Process CPU Load (last 120s, every 10s)
-          </div>
-          <div
-            className="pf-c-card__actions"
+            className="pf-v5-c-card__actions"
           >
             <button
               aria-disabled={true}
               aria-label="Synchronize Process CPU Load chart"
-              className="pf-c-button pf-m-plain pf-m-disabled"
+              className="pf-v5-c-button pf-m-plain pf-m-disabled"
               data-ouia-component-id="OUIA-Generated-Button-plain-9"
-              data-ouia-component-type="PF4/Button"
+              data-ouia-component-type="PF5/Button"
               data-ouia-safe={true}
               disabled={true}
               onClick={[Function]}
@@ -4209,14 +4235,10 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
               <svg
                 aria-hidden={true}
                 aria-labelledby={null}
+                className="pf-v5-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
                 viewBox="0 0 512 512"
                 width="1em"
               >
@@ -4226,10 +4248,24 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
               </svg>
             </button>
           </div>
+          <div
+            className="pf-v5-c-card__header-main"
+          >
+            <div
+              className="pf-v5-c-card__title"
+            >
+              <div
+                className="pf-v5-c-card__title-text"
+                id="Process CPU Load-chart-card-title"
+              >
+                Process CPU Load (last 120s, every 10s)
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        className="pf-c-card__body"
+        className="pf-v5-c-card__body"
       >
         <div
           className="disabled-pointer"
@@ -4240,7 +4276,7 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
           }
         >
           <div
-            className="pf-c-chart"
+            className="pf-v5-c-chart"
             style={
               Object {
                 "height": "100%",
@@ -4277,8 +4313,8 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -4298,9 +4334,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -4324,12 +4360,12 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "middle",
                         }
                       }
@@ -4349,8 +4385,8 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                   shapeRendering="auto"
                   style={
                     Object {
-                      "fill": "var(--pf-chart-axis--axis--Fill, transparent)",
-                      "stroke": "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)",
+                      "fill": "var(--pf-v5-chart-axis--axis--Fill, transparent)",
+                      "stroke": "var(--pf-v5-chart-axis--axis--stroke--Color, #d2d2d2)",
                       "strokeLinecap": "round",
                       "strokeLinejoin": "round",
                       "strokeWidth": 1,
@@ -4365,7 +4401,7 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                 <text
                   direction="inherit"
                   dx={0}
-                  id="axis-axisLabel-0"
+                  id="chart-axis-1-ChartLabel"
                   transform="rotate(-90,14,125)"
                   x={14}
                   y={122.97}
@@ -4376,9 +4412,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     style={
                       Object {
                         "fill": "var(--pf-global--palette--black-200)",
-                        "fontFamily": "var(--pf-chart-global--FontFamily, \\"RedHatText\\", \\"Overpass\\", overpass, helvetica, arial, sans-serif)",
+                        "fontFamily": "var(--pf-v5-chart-global--FontFamily, \\"RedHatText\\", helvetica, arial, sans-serif)",
                         "fontSize": 14,
-                        "letterSpacing": "var(--pf-chart-global--letter-spacing, normal)",
+                        "letterSpacing": "var(--pf-v5-chart-global--letter-spacing, normal)",
                         "stroke": "transparent",
                         "textAnchor": "middle",
                       }
@@ -4397,9 +4433,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -4415,9 +4451,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -4441,12 +4477,12 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -4465,9 +4501,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -4483,9 +4519,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -4509,12 +4545,12 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -4533,9 +4569,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -4551,9 +4587,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -4577,12 +4613,12 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -4601,9 +4637,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -4619,9 +4655,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -4645,12 +4681,12 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -4669,9 +4705,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--grid--Fill, none)",
+                        "fill": "var(--pf-v5-chart-axis--grid--Fill, none)",
                         "pointerEvents": "painted",
-                        "stroke": "var(--pf-chart-axis--grid--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--grid--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                       }
@@ -4687,9 +4723,9 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                     shapeRendering="auto"
                     style={
                       Object {
-                        "fill": "var(--pf-chart-axis--tick--Fill, transparent)",
+                        "fill": "var(--pf-v5-chart-axis--tick--Fill, transparent)",
                         "size": 5,
-                        "stroke": "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)",
+                        "stroke": "var(--pf-v5-chart-axis--tick--stroke--Color, #d2d2d2)",
                         "strokeLinecap": "round",
                         "strokeLinejoin": "round",
                         "strokeWidth": 1,
@@ -4713,12 +4749,12 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
                       dy={0}
                       style={
                         Object {
-                          "fill": "var(--pf-chart-axis--tick-label--Fill, #4f5255)",
-                          "fontFamily": "\\"RedHatText\\",\\"Overpass\\",overpass,helvetica,arial,sans-serif",
+                          "fill": "var(--pf-v5-chart-axis--tick-label--Fill, #4f5255)",
+                          "fontFamily": "\\"RedHatText\\",helvetica,arial,sans-serif",
                           "fontSize": 14,
                           "letterSpacing": "normal",
                           "padding": 10,
-                          "stroke": "var(--pf-chart-global--label--stroke, transparent)",
+                          "stroke": "var(--pf-v5-chart-global--label--stroke, transparent)",
                           "textAnchor": "end",
                         }
                       }
@@ -4776,7 +4812,7 @@ exports[`<MBeanMetricsChartCard /> renders loading state correctly: loading-view
           </div>
         </div>
       </div>
-    </article>
+    </div>
     <div
       className="resizable-ref"
       onMouseDown={[Function]}
diff --git a/src/test/DateTimePicker/__snapshots__/TimePicker.test.tsx.snap b/src/test/DateTimePicker/__snapshots__/TimePicker.test.tsx.snap
index f9b0585dca..8d65651204 100644
--- a/src/test/DateTimePicker/__snapshots__/TimePicker.test.tsx.snap
+++ b/src/test/DateTimePicker/__snapshots__/TimePicker.test.tsx.snap
@@ -2,129 +2,140 @@
 
 exports[`<TimePicker/> renders correctly 1`] = `
 <div
-  className="pf-c-panel"
+  className="pf-v5-c-panel"
 >
   <div
-    className="pf-c-panel__main"
+    className="pf-v5-c-panel__main"
     style={
       Object {
-        "--pf-c-panel__main--MaxHeight": undefined,
+        "--pf-v5-c-panel__main--MaxHeight": undefined,
       }
     }
   >
     <div
-      className="pf-c-panel__main-body"
+      className="pf-v5-c-panel__main-body"
     >
       <div
-        className="pf-l-level pf-m-gutter"
+        className="pf-v5-l-level pf-m-gutter"
       >
         <div>
           <div
             aria-label="Hour"
-            className="pf-l-stack"
+            className="pf-v5-l-stack"
           >
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <h4
-                className="pf-c-title pf-m-md datetime-picker__time-text-top-label"
+                className="pf-v5-c-title pf-m-md datetime-picker__time-text-top-label"
                 data-ouia-component-id="OUIA-Generated-Title-1"
-                data-ouia-component-type="PF4/Title"
+                data-ouia-component-type="PF5/Title"
                 data-ouia-safe={true}
               >
                 Hour
               </h4>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <button
                 aria-disabled={false}
                 aria-label="Increment hour24 value"
-                className="pf-c-button pf-m-primary datetime-picker__time-spin-box up"
+                className="pf-v5-c-button pf-m-primary datetime-picker__time-spin-box up"
                 data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe={true}
                 disabled={false}
                 onClick={[Function]}
                 role={null}
                 type="button"
               >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1.5em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.1875em",
-                    }
-                  }
-                  viewBox="0 0 320 512"
-                  width="1.5em"
+                <span
+                  className="pf-v5-c-icon pf-m-md"
                 >
-                  <path
-                    d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                  />
-                </svg>
+                  <span
+                    className="pf-v5-c-icon__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
-              <input
-                aria-invalid={false}
-                aria-label="Input hour24 value"
-                className="pf-c-form-control datetime-picker__number-input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe={true}
-                disabled={false}
-                id="hour24-input"
-                max={23}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="number"
-                value="13"
-              />
+              <span
+                className="pf-v5-c-form-control datetime-picker__number-input"
+              >
+                <input
+                  aria-invalid={false}
+                  aria-label="Input hour24 value"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                  data-ouia-component-type="PF5/TextInput"
+                  data-ouia-safe={true}
+                  disabled={false}
+                  id="hour24-input"
+                  max={23}
+                  min={0}
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  required={false}
+                  type="number"
+                  value="13"
+                />
+              </span>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <button
                 aria-disabled={false}
                 aria-label="Decrement hour24 value"
-                className="pf-c-button pf-m-primary datetime-picker__time-spin-box down"
+                className="pf-v5-c-button pf-m-primary datetime-picker__time-spin-box down"
                 data-ouia-component-id="OUIA-Generated-Button-primary-2"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe={true}
                 disabled={false}
                 onClick={[Function]}
                 role={null}
                 type="button"
               >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1.5em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.1875em",
-                    }
-                  }
-                  viewBox="0 0 320 512"
-                  width="1.5em"
+                <span
+                  className="pf-v5-c-icon pf-m-md"
                 >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                  />
-                </svg>
+                  <span
+                    className="pf-v5-c-icon__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
           </div>
@@ -139,110 +150,121 @@ exports[`<TimePicker/> renders correctly 1`] = `
         <div>
           <div
             aria-label="Minute"
-            className="pf-l-stack"
+            className="pf-v5-l-stack"
           >
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <h4
-                className="pf-c-title pf-m-md datetime-picker__time-text-top-label"
+                className="pf-v5-c-title pf-m-md datetime-picker__time-text-top-label"
                 data-ouia-component-id="OUIA-Generated-Title-2"
-                data-ouia-component-type="PF4/Title"
+                data-ouia-component-type="PF5/Title"
                 data-ouia-safe={true}
               >
                 Minute
               </h4>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <button
                 aria-disabled={false}
                 aria-label="Increment minute value"
-                className="pf-c-button pf-m-primary datetime-picker__time-spin-box up"
+                className="pf-v5-c-button pf-m-primary datetime-picker__time-spin-box up"
                 data-ouia-component-id="OUIA-Generated-Button-primary-3"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe={true}
                 disabled={false}
                 onClick={[Function]}
                 role={null}
                 type="button"
               >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1.5em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.1875em",
-                    }
-                  }
-                  viewBox="0 0 320 512"
-                  width="1.5em"
+                <span
+                  className="pf-v5-c-icon pf-m-md"
                 >
-                  <path
-                    d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                  />
-                </svg>
+                  <span
+                    className="pf-v5-c-icon__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
-              <input
-                aria-invalid={false}
-                aria-label="Input minute value"
-                className="pf-c-form-control datetime-picker__number-input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe={true}
-                disabled={false}
-                id="minute-input"
-                max={59}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="number"
-                value="11"
-              />
+              <span
+                className="pf-v5-c-form-control datetime-picker__number-input"
+              >
+                <input
+                  aria-invalid={false}
+                  aria-label="Input minute value"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                  data-ouia-component-type="PF5/TextInput"
+                  data-ouia-safe={true}
+                  disabled={false}
+                  id="minute-input"
+                  max={59}
+                  min={0}
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  required={false}
+                  type="number"
+                  value="11"
+                />
+              </span>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <button
                 aria-disabled={false}
                 aria-label="Decrement minute value"
-                className="pf-c-button pf-m-primary datetime-picker__time-spin-box down"
+                className="pf-v5-c-button pf-m-primary datetime-picker__time-spin-box down"
                 data-ouia-component-id="OUIA-Generated-Button-primary-4"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe={true}
                 disabled={false}
                 onClick={[Function]}
                 role={null}
                 type="button"
               >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1.5em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.1875em",
-                    }
-                  }
-                  viewBox="0 0 320 512"
-                  width="1.5em"
+                <span
+                  className="pf-v5-c-icon pf-m-md"
                 >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                  />
-                </svg>
+                  <span
+                    className="pf-v5-c-icon__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
           </div>
@@ -257,110 +279,121 @@ exports[`<TimePicker/> renders correctly 1`] = `
         <div>
           <div
             aria-label="Second"
-            className="pf-l-stack"
+            className="pf-v5-l-stack"
           >
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <h4
-                className="pf-c-title pf-m-md datetime-picker__time-text-top-label"
+                className="pf-v5-c-title pf-m-md datetime-picker__time-text-top-label"
                 data-ouia-component-id="OUIA-Generated-Title-3"
-                data-ouia-component-type="PF4/Title"
+                data-ouia-component-type="PF5/Title"
                 data-ouia-safe={true}
               >
                 Second
               </h4>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <button
                 aria-disabled={false}
                 aria-label="Increment second value"
-                className="pf-c-button pf-m-primary datetime-picker__time-spin-box up"
+                className="pf-v5-c-button pf-m-primary datetime-picker__time-spin-box up"
                 data-ouia-component-id="OUIA-Generated-Button-primary-5"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe={true}
                 disabled={false}
                 onClick={[Function]}
                 role={null}
                 type="button"
               >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1.5em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.1875em",
-                    }
-                  }
-                  viewBox="0 0 320 512"
-                  width="1.5em"
+                <span
+                  className="pf-v5-c-icon pf-m-md"
                 >
-                  <path
-                    d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                  />
-                </svg>
+                  <span
+                    className="pf-v5-c-icon__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
-              <input
-                aria-invalid={false}
-                aria-label="Input second value"
-                className="pf-c-form-control datetime-picker__number-input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                data-ouia-component-type="PF4/TextInput"
-                data-ouia-safe={true}
-                disabled={false}
-                id="second-input"
-                max={59}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                required={false}
-                type="number"
-                value="11"
-              />
+              <span
+                className="pf-v5-c-form-control datetime-picker__number-input"
+              >
+                <input
+                  aria-invalid={false}
+                  aria-label="Input second value"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                  data-ouia-component-type="PF5/TextInput"
+                  data-ouia-safe={true}
+                  disabled={false}
+                  id="second-input"
+                  max={59}
+                  min={0}
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  required={false}
+                  type="number"
+                  value="11"
+                />
+              </span>
             </div>
             <div
-              className="pf-l-stack__item"
+              className="pf-v5-l-stack__item"
             >
               <button
                 aria-disabled={false}
                 aria-label="Decrement second value"
-                className="pf-c-button pf-m-primary datetime-picker__time-spin-box down"
+                className="pf-v5-c-button pf-m-primary datetime-picker__time-spin-box down"
                 data-ouia-component-id="OUIA-Generated-Button-primary-6"
-                data-ouia-component-type="PF4/Button"
+                data-ouia-component-type="PF5/Button"
                 data-ouia-safe={true}
                 disabled={false}
                 onClick={[Function]}
                 role={null}
                 type="button"
               >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1.5em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.1875em",
-                    }
-                  }
-                  viewBox="0 0 320 512"
-                  width="1.5em"
+                <span
+                  className="pf-v5-c-icon pf-m-md"
                 >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                  />
-                </svg>
+                  <span
+                    className="pf-v5-c-icon__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </button>
             </div>
           </div>
@@ -368,28 +401,28 @@ exports[`<TimePicker/> renders correctly 1`] = `
       </div>
     </div>
     <hr
-      className="pf-c-divider"
+      className="pf-v5-c-divider"
     />
     <div
-      className="pf-c-panel__footer"
+      className="pf-v5-c-panel__footer"
     >
       <div
-        className="pf-c-helper-text"
+        className="pf-v5-c-helper-text"
       >
         <div
-          className="pf-c-helper-text__item"
+          className="pf-v5-c-helper-text__item"
         >
           <span
-            className="pf-c-helper-text__item-text"
+            className="pf-v5-c-helper-text__item-text"
           >
             Use 24-hour time
           </span>
         </div>
       </div>
       <label
-        className="pf-c-switch"
+        className="pf-v5-c-switch"
         data-ouia-component-id="OUIA-Generated-Switch-1"
-        data-ouia-component-type="PF4/Switch"
+        data-ouia-component-type="PF5/Switch"
         data-ouia-safe={true}
         htmlFor="24-hour-switch"
       >
@@ -397,25 +430,25 @@ exports[`<TimePicker/> renders correctly 1`] = `
           aria-label=""
           aria-labelledby="24-hour-switch-on"
           checked={true}
-          className="pf-c-switch__input"
+          className="pf-v5-c-switch__input"
           disabled={false}
           id="24-hour-switch"
           onChange={[Function]}
           type="checkbox"
         />
         <span
-          className="pf-c-switch__toggle"
+          className="pf-v5-c-switch__toggle"
         />
         <span
           aria-hidden="true"
-          className="pf-c-switch__label pf-m-on"
+          className="pf-v5-c-switch__label pf-m-on"
           id="24-hour-switch-on"
         >
           24-hour
         </span>
         <span
           aria-hidden="true"
-          className="pf-c-switch__label pf-m-off"
+          className="pf-v5-c-switch__label pf-m-off"
           id="24-hour-switch-off"
         >
           24-hour
diff --git a/src/test/Events/__snapshots__/EventTemplates.test.tsx.snap b/src/test/Events/__snapshots__/EventTemplates.test.tsx.snap
index 1009f7e59f..5ded5e9d3f 100644
--- a/src/test/Events/__snapshots__/EventTemplates.test.tsx.snap
+++ b/src/test/Events/__snapshots__/EventTemplates.test.tsx.snap
@@ -2,391 +2,75 @@
 
 exports[`<EventTemplates /> renders correctly 1`] = `
 Array [
-  <div
-    className="pf-c-toolbar"
-    data-ouia-component-id="OUIA-Generated-Toolbar-1"
-    data-ouia-component-type="PF4/Toolbar"
-    data-ouia-safe={true}
-    id="event-templates-toolbar"
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
+    }
   >
-    <div
-      className="pf-c-toolbar__content"
-    >
-      <div
-        className="pf-c-toolbar__content-section"
-      >
-        <div
-          className="pf-c-toolbar__group pf-m-filter-group"
-        >
-          <div
-            className="pf-c-toolbar__item"
-          >
-            <input
-              aria-invalid={false}
-              aria-label="Event template filter"
-              className="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe={true}
-              disabled={false}
-              id="templateFilter"
-              name="templateFilter"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="Filter..."
-              required={false}
-              type="search"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          className="pf-c-toolbar__group pf-m-icon-button-group"
-        >
-          <div
-            className="pf-c-toolbar__item"
-          >
-            <button
-              aria-disabled={false}
-              aria-label="Upload"
-              className="pf-c-button pf-m-secondary"
-              data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[Function]}
-              role={null}
-              type="button"
-            >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 512 512"
-                width="1em"
-              >
-                <path
-                  d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pf-c-toolbar__expandable-content"
-        id="event-templates-toolbar-expandable-content-2"
-      >
-        <div
-          className="pf-c-toolbar__group"
-        />
-      </div>
-    </div>
-    <div
-      className="pf-c-toolbar__content pf-m-hidden"
-      hidden={true}
-    >
-      <div
-        className="pf-c-toolbar__group"
-      />
-    </div>
-  </div>,
-  <table
-    aria-label="Event Templates Table"
-    className="pf-c-table pf-m-grid-md pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Table-1"
-    data-ouia-component-type="PF4/Table"
-    data-ouia-safe={true}
-    role="grid"
+    Cannot read properties of null (reading 'offsetWidth')
+  </h3>,
+  <pre
+    style={
+      Object {
+        "backgroundColor": "rgba(200,200,200, 0.5)",
+        "padding": "0.5rem",
+      }
+    }
   >
-    <thead
-      className=""
+    TypeError: Cannot read properties of null (reading 'offsetWidth')
+    at /home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-table/dist/js/components/Table/Td.js:136:38
+    at invokePassiveEffectCreate (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
+    at HTMLUnknownElement.callCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
+    at HTMLUnknownElement.callTheUserObjectsOperation (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
+    at innerInvokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
+    at invokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
+    at HTMLUnknownElementImpl._dispatch (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
+    at HTMLUnknownElement.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
+    at Object.invokeGuardedCallbackDev (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
+    at invokeGuardedCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
+    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
+    at flushActWork (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15227:14)
+    at flushWorkAndMicroTasks (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15239:5)
+    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15318:11
+    at processTicksAndRejections (node:internal/process/task_queues:95:5)
+  </pre>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-1"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Name
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Description
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Provider
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Type
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      className=""
-      role="rowgroup"
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-2"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <td
-          className=""
-          data-label="Name"
-          onMouseEnter={[Function]}
-        >
-          someEventTemplate
-        </td>
-        <td
-          className=""
-          data-label="Description"
-          onMouseEnter={[Function]}
-        >
-          Some Description
-        </td>
-        <td
-          className=""
-          data-label="Provider"
-          onMouseEnter={[Function]}
-        >
-          Cryostat
-        </td>
-        <td
-          className=""
-          data-label="Type"
-          onMouseEnter={[Function]}
-        >
-          Custom
-        </td>
-        <td
-          className="pf-c-table__action"
-          onMouseEnter={[Function]}
-          style={
-            Object {
-              "paddingRight": "0",
-            }
-          }
-        >
-          <div
-            className="pf-c-dropdown pf-m-align-right"
-            data-ouia-component-id="OUIA-Generated-Dropdown-1"
-            data-ouia-component-type="PF4/Dropdown"
-            data-ouia-safe={true}
-          >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              aria-label="Actions"
-              className="pf-c-dropdown__toggle pf-m-plain"
-              disabled={false}
-              id="pf-dropdown-toggle-id-0"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              type="button"
-            >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 192 512"
-                width="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
-            </button>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>,
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
 ]
 `;
diff --git a/src/test/Events/__snapshots__/EventTypes.test.tsx.snap b/src/test/Events/__snapshots__/EventTypes.test.tsx.snap
index 4d1a78a5b9..2fccd8e5a3 100644
--- a/src/test/Events/__snapshots__/EventTypes.test.tsx.snap
+++ b/src/test/Events/__snapshots__/EventTypes.test.tsx.snap
@@ -2,644 +2,85 @@
 
 exports[`<EventTypes /> renders correctly 1`] = `
 Array [
-  <div
-    className="pf-c-toolbar"
-    data-ouia-component-id="OUIA-Generated-Toolbar-1"
-    data-ouia-component-type="PF4/Toolbar"
-    data-ouia-safe={true}
-    id="event-types-toolbar"
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
+    }
   >
-    <div
-      className="pf-c-toolbar__content"
-    >
-      <div
-        className="pf-c-toolbar__content-section"
-      >
-        <div
-          className="pf-c-toolbar__item"
-        >
-          <input
-            aria-invalid={false}
-            aria-label="Event filter"
-            className="pf-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe={true}
-            disabled={false}
-            id="eventFilter"
-            name="eventFilter"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="Filter..."
-            required={false}
-            type="search"
-          />
-        </div>
-        <div
-          className="pf-c-toolbar__item pf-m-pagination"
-        >
-          <div
-            className="pf-c-pagination"
-            data-ouia-component-id="OUIA-Generated-Pagination-top-1"
-            data-ouia-component-type="PF4/Pagination"
-            data-ouia-safe={true}
-            id="event-types-pagination-top-pagination"
-          >
-            <div
-              className="pf-c-pagination__total-items"
-            >
-              <b>
-                1
-                 - 
-                1
-              </b>
-               
-              of
-               
-              <b>
-                1
-              </b>
-               
-              
-            </div>
-            <div
-              className="pf-c-options-menu"
-              data-ouia-component-type="PF4/PaginationOptionsMenu"
-              data-ouia-safe={true}
-            >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
-              >
-                <span
-                  className="pf-c-options-menu__toggle-text"
-                >
-                  <b>
-                    1
-                     - 
-                    1
-                  </b>
-                   
-                  of
-                   
-                  <b>
-                    1
-                  </b>
-                   
-                  
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Items per page"
-                  className="  pf-c-options-menu__toggle-button"
-                  data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
-                  data-ouia-component-type="PF4/DropdownToggle"
-                  data-ouia-safe={true}
-                  disabled={false}
-                  id="event-types-pagination-top-toggle"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="pf-c-options-menu__toggle-button-icon"
-                  >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                      />
-                    </svg>
-                  </span>
-                </button>
-              </div>
-            </div>
-            <nav
-              aria-label="Pagination"
-              className="pf-c-pagination__nav"
-            >
-              <div
-                className="pf-c-pagination__nav-control pf-m-first"
-              >
-                <button
-                  aria-disabled={true}
-                  aria-label="Go to first page"
-                  className="pf-c-button pf-m-plain pf-m-disabled"
-                  data-action="first"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                  data-ouia-component-type="PF4/Button"
-                  data-ouia-safe={true}
-                  disabled={true}
-                  onClick={[Function]}
-                  role={null}
-                  tabIndex={null}
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 448 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="pf-c-pagination__nav-control"
-              >
-                <button
-                  aria-disabled={true}
-                  aria-label="Go to previous page"
-                  className="pf-c-button pf-m-plain pf-m-disabled"
-                  data-action="previous"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                  data-ouia-component-type="PF4/Button"
-                  data-ouia-safe={true}
-                  disabled={true}
-                  onClick={[Function]}
-                  role={null}
-                  tabIndex={null}
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="pf-c-pagination__nav-page-select"
-              >
-                <input
-                  aria-label="Current page"
-                  className="pf-c-form-control"
-                  disabled={true}
-                  max={1}
-                  min={1}
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  type="number"
-                  value={1}
-                />
-                <span
-                  aria-hidden="true"
-                >
-                  of
-                   
-                  1
-                </span>
-              </div>
-              <div
-                className="pf-c-pagination__nav-control"
-              >
-                <button
-                  aria-disabled={true}
-                  aria-label="Go to next page"
-                  className="pf-c-button pf-m-plain pf-m-disabled"
-                  data-action="next"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-3"
-                  data-ouia-component-type="PF4/Button"
-                  data-ouia-safe={true}
-                  disabled={true}
-                  onClick={[Function]}
-                  role={null}
-                  tabIndex={null}
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="pf-c-pagination__nav-control pf-m-last"
-              >
-                <button
-                  aria-disabled={true}
-                  aria-label="Go to last page"
-                  className="pf-c-button pf-m-plain pf-m-disabled"
-                  data-action="last"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-4"
-                  data-ouia-component-type="PF4/Button"
-                  data-ouia-safe={true}
-                  disabled={true}
-                  onClick={[Function]}
-                  role={null}
-                  tabIndex={null}
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 448 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </nav>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pf-c-toolbar__expandable-content"
-        id="event-types-toolbar-expandable-content-1"
-      >
-        <div
-          className="pf-c-toolbar__group"
-        />
-      </div>
-    </div>
-    <div
-      className="pf-c-toolbar__content pf-m-hidden"
-      hidden={true}
-    >
-      <div
-        className="pf-c-toolbar__group"
-      />
-    </div>
-  </div>,
-  <table
-    aria-label="Event Types Table"
-    className="pf-c-table pf-m-grid-md pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Table-1"
-    data-ouia-component-type="PF4/Table"
-    data-ouia-safe={true}
-    role="grid"
+    Cannot read properties of null (reading 'offsetWidth')
+  </h3>,
+  <pre
+    style={
+      Object {
+        "backgroundColor": "rgba(200,200,200, 0.5)",
+        "padding": "0.5rem",
+      }
+    }
   >
-    <thead
-      className=""
+    TypeError: Cannot read properties of null (reading 'offsetWidth')
+    at /home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-table/dist/js/components/Table/Td.js:136:38
+    at invokePassiveEffectCreate (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
+    at HTMLUnknownElement.callCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
+    at HTMLUnknownElement.callTheUserObjectsOperation (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
+    at innerInvokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
+    at invokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
+    at HTMLUnknownElementImpl._dispatch (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
+    at HTMLUnknownElementImpl.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
+    at HTMLUnknownElement.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
+    at Object.invokeGuardedCallbackDev (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
+    at invokeGuardedCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
+    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
+    at performSyncWorkOnRoot (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13380:3)
+    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushSyncCallbackQueueImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
+    at flushSyncCallbackQueue (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
+    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14637:3)
+    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
+    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
+    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
+    at flushActWork (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15227:14)
+    at flushWorkAndMicroTasks (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15239:5)
+    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15318:11
+    at processTicksAndRejections (node:internal/process/task_queues:95:5)
+  </pre>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-1"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <th
-          className=""
-          onMouseEnter={[Function]}
-          scope={null}
-        />
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Name
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Type ID
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Description
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-        <th
-          aria-sort="none"
-          className="pf-c-table__sort"
-          onMouseEnter={[Function]}
-          scope="col"
-        >
-          <button
-            className="pf-c-table__button"
-            onClick={[Function]}
-            type="button"
-          >
-            <div
-              className="pf-c-table__button-content"
-            >
-              <span
-                className="pf-c-table__text"
-                onMouseEnter={[Function]}
-              >
-                Categories
-              </span>
-              <span
-                className="pf-c-table__sort-indicator"
-              >
-                <svg
-                  aria-hidden={true}
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
-                  />
-                </svg>
-              </span>
-            </div>
-          </button>
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      className=""
-      role="rowgroup"
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <tr
-        className=""
-        data-ouia-component-id="OUIA-Generated-TableRow-2"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={false}
-      >
-        <td
-          className="pf-c-table__toggle"
-          onMouseEnter={[Function]}
-        >
-          <button
-            aria-disabled={false}
-            aria-expanded={false}
-            aria-label="Details"
-            aria-labelledby="simple-node0 expandable-event-type-row-00"
-            className="pf-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe={true}
-            disabled={false}
-            id="expandable-event-type-row-00"
-            onClick={[Function]}
-            role={null}
-            type="button"
-          >
-            <div
-              className="pf-c-table__toggle-icon"
-            >
-              <svg
-                aria-hidden={true}
-                aria-labelledby={null}
-                fill="currentColor"
-                height="1em"
-                role="img"
-                style={
-                  Object {
-                    "verticalAlign": "-0.125em",
-                  }
-                }
-                viewBox="0 0 320 512"
-                width="1em"
-              >
-                <path
-                  d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                />
-              </svg>
-            </div>
-          </button>
-        </td>
-        <td
-          className=""
-          data-label="Name"
-          onMouseEnter={[Function]}
-        >
-          Some Event
-        </td>
-        <td
-          className=""
-          data-label="Type ID"
-          onMouseEnter={[Function]}
-        >
-          org.some_eventId
-        </td>
-        <td
-          className=""
-          data-label="Description"
-          onMouseEnter={[Function]}
-        >
-          Some Descriptions
-        </td>
-        <td
-          className=""
-          data-label="Categories"
-          onMouseEnter={[Function]}
-        >
-          Category 1, Category 2
-        </td>
-      </tr>
-      <tr
-        className="pf-c-table__expandable-row"
-        data-ouia-component-id="OUIA-Generated-TableRow-3"
-        data-ouia-component-type="PF4/TableRow"
-        data-ouia-safe={true}
-        hidden={true}
-      >
-        <td
-          className=""
-          colSpan={4}
-          data-label="event-details"
-          onMouseEnter={[Function]}
-        >
-          <div
-            className="pf-c-table__expandable-row-content"
-          >
-            <p
-              className=""
-              data-ouia-component-id="OUIA-Generated-Text-1"
-              data-ouia-component-type="PF4/Text"
-              data-ouia-safe={true}
-              data-pf-content={true}
-            >
-              0=[undefined]	
-            </p>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>,
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
 ]
 `;
diff --git a/src/test/RecordingMetadata/__snapshots__/BulkEditLabels.test.tsx.snap b/src/test/RecordingMetadata/__snapshots__/BulkEditLabels.test.tsx.snap
index 2ed9c079ed..f3becefb57 100644
--- a/src/test/RecordingMetadata/__snapshots__/BulkEditLabels.test.tsx.snap
+++ b/src/test/RecordingMetadata/__snapshots__/BulkEditLabels.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`<BulkEditLabels /> renders correctly 1`] = `
 <div
-  className="pf-l-stack pf-m-gutter"
+  className="pf-v5-l-stack pf-m-gutter"
 >
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <div
-      className="pf-l-split pf-m-gutter"
+      className="pf-v5-l-split pf-m-gutter"
     >
       <div
-        className="pf-l-split__item"
+        className="pf-v5-l-split__item"
       >
         <p
           className=""
           data-ouia-component-id="OUIA-Generated-Text-1"
-          data-ouia-component-type="PF4/Text"
+          data-ouia-component-type="PF5/Text"
           data-ouia-safe={true}
           data-pf-content={true}
         >
@@ -24,33 +24,37 @@ exports[`<BulkEditLabels /> renders correctly 1`] = `
         </p>
       </div>
       <div
-        className="pf-l-split__item"
+        className="pf-v5-l-split__item"
       />
     </div>
   </div>
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <span
       aria-label="someLabel: someValue"
-      className="pf-c-label"
+      className="pf-v5-c-label"
     >
       <span
-        className="pf-c-label__content"
+        className="pf-v5-c-label__content"
       >
-        someLabel: someValue
+        <span
+          className="pf-v5-c-label__text"
+        >
+          someLabel: someValue
+        </span>
       </span>
     </span>
   </div>
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <button
       aria-disabled={false}
       aria-label="Edit Labels"
-      className="pf-c-button pf-m-secondary"
+      className="pf-v5-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-      data-ouia-component-type="PF4/Button"
+      data-ouia-component-type="PF5/Button"
       data-ouia-safe={true}
       disabled={false}
       onClick={[Function]}
diff --git a/src/test/RecordingMetadata/__snapshots__/ClickableLabel.test.tsx.snap b/src/test/RecordingMetadata/__snapshots__/ClickableLabel.test.tsx.snap
index 9ffe930262..57d12b3f57 100644
--- a/src/test/RecordingMetadata/__snapshots__/ClickableLabel.test.tsx.snap
+++ b/src/test/RecordingMetadata/__snapshots__/ClickableLabel.test.tsx.snap
@@ -3,17 +3,22 @@
 exports[`<ClickableLabel /> renders correctly 1`] = `
 <span
   aria-label="someLabel: someValue"
-  className="pf-c-label pf-m-blue"
-  onClick={[Function]}
+  className="pf-v5-c-label pf-m-blue"
   onFocus={[Function]}
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
   style={Object {}}
 >
-  <span
-    className="pf-c-label__content"
+  <button
+    className="pf-v5-c-label__content"
+    onClick={[Function]}
+    type="button"
   >
-    someLabel: someValue
-  </span>
+    <span
+      className="pf-v5-c-label__text"
+    >
+      someLabel: someValue
+    </span>
+  </button>
 </span>
 `;
diff --git a/src/test/RecordingMetadata/__snapshots__/LabelCell.test.tsx.snap b/src/test/RecordingMetadata/__snapshots__/LabelCell.test.tsx.snap
index 862d5cdaf0..10d031f1a2 100644
--- a/src/test/RecordingMetadata/__snapshots__/LabelCell.test.tsx.snap
+++ b/src/test/RecordingMetadata/__snapshots__/LabelCell.test.tsx.snap
@@ -4,33 +4,43 @@ exports[`<LabelCell /> renders correctly 1`] = `
 Array [
   <span
     aria-label="someLabel: someValue"
-    className="pf-c-label"
-    onClick={[Function]}
+    className="pf-v5-c-label"
     onFocus={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     style={Object {}}
   >
-    <span
-      className="pf-c-label__content"
+    <button
+      className="pf-v5-c-label__content"
+      onClick={[Function]}
+      type="button"
     >
-      someLabel: someValue
-    </span>
+      <span
+        className="pf-v5-c-label__text"
+      >
+        someLabel: someValue
+      </span>
+    </button>
   </span>,
   <span
     aria-label="anotherLabel: anotherValue"
-    className="pf-c-label"
-    onClick={[Function]}
+    className="pf-v5-c-label"
     onFocus={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
     style={Object {}}
   >
-    <span
-      className="pf-c-label__content"
+    <button
+      className="pf-v5-c-label__content"
+      onClick={[Function]}
+      type="button"
     >
-      anotherLabel: anotherValue
-    </span>
+      <span
+        className="pf-v5-c-label__text"
+      >
+        anotherLabel: anotherValue
+      </span>
+    </button>
   </span>,
 ]
 `;
diff --git a/src/test/RecordingMetadata/__snapshots__/RecordingLabelFields.test.tsx.snap b/src/test/RecordingMetadata/__snapshots__/RecordingLabelFields.test.tsx.snap
index 6456ea199f..b3f7d79ec1 100644
--- a/src/test/RecordingMetadata/__snapshots__/RecordingLabelFields.test.tsx.snap
+++ b/src/test/RecordingMetadata/__snapshots__/RecordingLabelFields.test.tsx.snap
@@ -5,9 +5,9 @@ Array [
   <button
     aria-disabled={false}
     aria-label="Add Label"
-    className="pf-c-button pf-m-link"
+    className="pf-v5-c-button pf-m-link"
     data-ouia-component-id="OUIA-Generated-Button-link-1"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe={true}
     disabled={false}
     onClick={[Function]}
@@ -15,19 +15,15 @@ Array [
     type="button"
   >
     <span
-      className="pf-c-button__icon pf-m-start"
+      className="pf-v5-c-button__icon pf-m-start"
     >
       <svg
         aria-hidden={true}
         aria-labelledby={null}
+        className="pf-v5-svg"
         fill="currentColor"
         height="1em"
         role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
         viewBox="0 0 512 512"
         width="1em"
       >
@@ -39,50 +35,75 @@ Array [
     Add Label
   </button>,
   <div
-    className="pf-l-split pf-m-gutter"
+    className="pf-v5-l-split pf-m-gutter"
   >
     <div
-      className="pf-l-split__item pf-m-fill"
+      className="pf-v5-l-split__item pf-m-fill"
     >
-      <input
-        aria-describedby="label-key-input-helper"
-        aria-invalid={false}
-        aria-label="Label Key"
-        className="pf-c-form-control pf-m-success"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe={true}
-        disabled={false}
-        id="label-key-input"
-        name="label-key-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        type="text"
-        value="someLabel"
-      />
+      <span
+        className="pf-v5-c-form-control pf-m-success"
+      >
+        <input
+          aria-describedby="label-key-input-helper"
+          aria-invalid={false}
+          aria-label="Label Key"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe={true}
+          disabled={false}
+          id="label-key-input"
+          name="label-key-input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          required={true}
+          type="text"
+          value="someLabel"
+        />
+        <span
+          className="pf-v5-c-form-control__utilities"
+        >
+          <span
+            className="pf-v5-c-form-control__icon pf-m-status"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              className="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 512 512"
+              width="1em"
+            >
+              <path
+                d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
       <p
         className=""
         data-ouia-component-id="OUIA-Generated-Text-1"
-        data-ouia-component-type="PF4/Text"
+        data-ouia-component-type="PF5/Text"
         data-ouia-safe={true}
         data-pf-content={true}
       >
         Key
       </p>
       <div
-        className="pf-c-form__helper-text pf-m-hidden"
+        className="pf-v5-c-form__helper-text"
       >
         <div
-          className="pf-c-helper-text"
+          className="pf-v5-c-helper-text"
           id="label-error-text"
         >
           <div
-            className="pf-c-helper-text__item pf-m-error"
+            className="pf-v5-c-helper-text__item pf-m-error"
           >
             <span
-              className="pf-c-helper-text__item-text"
+              className="pf-v5-c-helper-text__item-text"
             >
               Keys must be unique. Labels should not contain empty spaces.
             </span>
@@ -91,30 +112,55 @@ Array [
       </div>
     </div>
     <div
-      className="pf-l-split__item pf-m-fill"
+      className="pf-v5-l-split__item pf-m-fill"
     >
-      <input
-        aria-describedby="label-value-input-helper"
-        aria-invalid={false}
-        aria-label="Label Value"
-        className="pf-c-form-control pf-m-success"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe={true}
-        disabled={false}
-        id="label-value-input"
-        name="label-value-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        type="text"
-        value="someValue"
-      />
+      <span
+        className="pf-v5-c-form-control pf-m-success"
+      >
+        <input
+          aria-describedby="label-value-input-helper"
+          aria-invalid={false}
+          aria-label="Label Value"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe={true}
+          disabled={false}
+          id="label-value-input"
+          name="label-value-input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          required={true}
+          type="text"
+          value="someValue"
+        />
+        <span
+          className="pf-v5-c-form-control__utilities"
+        >
+          <span
+            className="pf-v5-c-form-control__icon pf-m-status"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              className="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 512 512"
+              width="1em"
+            >
+              <path
+                d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
       <p
         className=""
         data-ouia-component-id="OUIA-Generated-Text-2"
-        data-ouia-component-type="PF4/Text"
+        data-ouia-component-type="PF5/Text"
         data-ouia-safe={true}
         data-pf-content={true}
       >
@@ -122,14 +168,14 @@ Array [
       </p>
     </div>
     <div
-      className="pf-l-split__item"
+      className="pf-v5-l-split__item"
     >
       <button
         aria-disabled={false}
         aria-label="Remove Label"
-        className="pf-c-button pf-m-link"
+        className="pf-v5-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-2"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe={true}
         disabled={false}
         onClick={[Function]}
@@ -137,75 +183,106 @@ Array [
         type="button"
       >
         <span
-          className="pf-c-button__icon pf-m-start"
+          className="pf-v5-c-button__icon pf-m-start"
         >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="gray"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 730 1024"
-            width="1em"
+          <span
+            className="pf-v5-c-icon pf-m-sm"
           >
-            <path
-              d="M725.499315,767.757345 L469.242169,511.500499 L725.499315,255.243653 C729.196254,251.545719 731.096195,247.248119 731,242.4498 C731,237.653479 728.997365,233.35588 725.299427,229.558002 L647.542773,151.701495 C643.743891,147.903617 639.446287,146 634.64996,146 C629.852635,146 625.55503,147.803673 621.857092,151.500607 L365.5,407.857398 L109.241857,151.500607 C105.544917,147.803673 101.246314,145.904733 96.4499876,146 C91.6526619,146.104622 87.3550577,148.002562 83.5571748,151.701495 L5.7005771,229.457058 C1.90269428,233.255936 0,237.553535 0,242.350855 C0,247.148175 1.80175055,251.444775 5.50068853,255.143709 L261.857779,511.500499 L5.50068853,767.757345 C1.80175055,771.454279 -0.0961914123,775.752878 0,779.750645 C0.103697157,784.547965 2.00263857,788.845564 5.7005771,792.642443 L83.4572306,871.299502 C87.2541139,875.096381 91.5527176,877 96.3500433,877 C101.147369,877 105.444973,875.197325 109.142912,871.499391 L365.400058,615.241545 L621.657203,871.499391 C625.355142,875.197325 629.652746,877.095265 634.449072,877 C639.246398,877 643.545002,874.997437 647.342885,871.299502 L725.099538,793.54294 C728.896421,789.745062 730.796362,785.446463 730.796362,780.649143 C731.096195,775.752878 729.196254,771.454279 725.499315,767.757345"
-            />
-          </svg>
+            <span
+              className="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-v5-svg"
+                color="gray"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 730 1024"
+                width="1em"
+              >
+                <path
+                  d="M725.499315,767.757345 L469.242169,511.500499 L725.499315,255.243653 C729.196254,251.545719 731.096195,247.248119 731,242.4498 C731,237.653479 728.997365,233.35588 725.299427,229.558002 L647.542773,151.701495 C643.743891,147.903617 639.446287,146 634.64996,146 C629.852635,146 625.55503,147.803673 621.857092,151.500607 L365.5,407.857398 L109.241857,151.500607 C105.544917,147.803673 101.246314,145.904733 96.4499876,146 C91.6526619,146.104622 87.3550577,148.002562 83.5571748,151.701495 L5.7005771,229.457058 C1.90269428,233.255936 0,237.553535 0,242.350855 C0,247.148175 1.80175055,251.444775 5.50068853,255.143709 L261.857779,511.500499 L5.50068853,767.757345 C1.80175055,771.454279 -0.0961914123,775.752878 0,779.750645 C0.103697157,784.547965 2.00263857,788.845564 5.7005771,792.642443 L83.4572306,871.299502 C87.2541139,875.096381 91.5527176,877 96.3500433,877 C101.147369,877 105.444973,875.197325 109.142912,871.499391 L365.400058,615.241545 L621.657203,871.499391 C625.355142,875.197325 629.652746,877.095265 634.449072,877 C639.246398,877 643.545002,874.997437 647.342885,871.299502 L725.099538,793.54294 C728.896421,789.745062 730.796362,785.446463 730.796362,780.649143 C731.096195,775.752878 729.196254,771.454279 725.499315,767.757345"
+                />
+              </svg>
+               
+            </span>
+          </span>
         </span>
       </button>
     </div>
   </div>,
   <div
-    className="pf-l-split pf-m-gutter"
+    className="pf-v5-l-split pf-m-gutter"
   >
     <div
-      className="pf-l-split__item pf-m-fill"
+      className="pf-v5-l-split__item pf-m-fill"
     >
-      <input
-        aria-describedby="label-key-input-helper"
-        aria-invalid={false}
-        aria-label="Label Key"
-        className="pf-c-form-control pf-m-success"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe={true}
-        disabled={false}
-        id="label-key-input"
-        name="label-key-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        type="text"
-        value="anotherLabel"
-      />
+      <span
+        className="pf-v5-c-form-control pf-m-success"
+      >
+        <input
+          aria-describedby="label-key-input-helper"
+          aria-invalid={false}
+          aria-label="Label Key"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe={true}
+          disabled={false}
+          id="label-key-input"
+          name="label-key-input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          required={true}
+          type="text"
+          value="anotherLabel"
+        />
+        <span
+          className="pf-v5-c-form-control__utilities"
+        >
+          <span
+            className="pf-v5-c-form-control__icon pf-m-status"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              className="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 512 512"
+              width="1em"
+            >
+              <path
+                d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
       <p
         className=""
         data-ouia-component-id="OUIA-Generated-Text-3"
-        data-ouia-component-type="PF4/Text"
+        data-ouia-component-type="PF5/Text"
         data-ouia-safe={true}
         data-pf-content={true}
       >
         Key
       </p>
       <div
-        className="pf-c-form__helper-text pf-m-hidden"
+        className="pf-v5-c-form__helper-text"
       >
         <div
-          className="pf-c-helper-text"
+          className="pf-v5-c-helper-text"
           id="label-error-text"
         >
           <div
-            className="pf-c-helper-text__item pf-m-error"
+            className="pf-v5-c-helper-text__item pf-m-error"
           >
             <span
-              className="pf-c-helper-text__item-text"
+              className="pf-v5-c-helper-text__item-text"
             >
               Keys must be unique. Labels should not contain empty spaces.
             </span>
@@ -214,30 +291,55 @@ Array [
       </div>
     </div>
     <div
-      className="pf-l-split__item pf-m-fill"
+      className="pf-v5-l-split__item pf-m-fill"
     >
-      <input
-        aria-describedby="label-value-input-helper"
-        aria-invalid={false}
-        aria-label="Label Value"
-        className="pf-c-form-control pf-m-success"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe={true}
-        disabled={false}
-        id="label-value-input"
-        name="label-value-input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        type="text"
-        value="anotherValue"
-      />
+      <span
+        className="pf-v5-c-form-control pf-m-success"
+      >
+        <input
+          aria-describedby="label-value-input-helper"
+          aria-invalid={false}
+          aria-label="Label Value"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe={true}
+          disabled={false}
+          id="label-value-input"
+          name="label-value-input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          required={true}
+          type="text"
+          value="anotherValue"
+        />
+        <span
+          className="pf-v5-c-form-control__utilities"
+        >
+          <span
+            className="pf-v5-c-form-control__icon pf-m-status"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              className="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 512 512"
+              width="1em"
+            >
+              <path
+                d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
       <p
         className=""
         data-ouia-component-id="OUIA-Generated-Text-4"
-        data-ouia-component-type="PF4/Text"
+        data-ouia-component-type="PF5/Text"
         data-ouia-safe={true}
         data-pf-content={true}
       >
@@ -245,14 +347,14 @@ Array [
       </p>
     </div>
     <div
-      className="pf-l-split__item"
+      className="pf-v5-l-split__item"
     >
       <button
         aria-disabled={false}
         aria-label="Remove Label"
-        className="pf-c-button pf-m-link"
+        className="pf-v5-c-button pf-m-link"
         data-ouia-component-id="OUIA-Generated-Button-link-3"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe={true}
         disabled={false}
         onClick={[Function]}
@@ -260,26 +362,32 @@ Array [
         type="button"
       >
         <span
-          className="pf-c-button__icon pf-m-start"
+          className="pf-v5-c-button__icon pf-m-start"
         >
-          <svg
-            aria-hidden={true}
-            aria-labelledby={null}
-            fill="gray"
-            height="1em"
-            role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
-            viewBox="0 0 730 1024"
-            width="1em"
+          <span
+            className="pf-v5-c-icon pf-m-sm"
           >
-            <path
-              d="M725.499315,767.757345 L469.242169,511.500499 L725.499315,255.243653 C729.196254,251.545719 731.096195,247.248119 731,242.4498 C731,237.653479 728.997365,233.35588 725.299427,229.558002 L647.542773,151.701495 C643.743891,147.903617 639.446287,146 634.64996,146 C629.852635,146 625.55503,147.803673 621.857092,151.500607 L365.5,407.857398 L109.241857,151.500607 C105.544917,147.803673 101.246314,145.904733 96.4499876,146 C91.6526619,146.104622 87.3550577,148.002562 83.5571748,151.701495 L5.7005771,229.457058 C1.90269428,233.255936 0,237.553535 0,242.350855 C0,247.148175 1.80175055,251.444775 5.50068853,255.143709 L261.857779,511.500499 L5.50068853,767.757345 C1.80175055,771.454279 -0.0961914123,775.752878 0,779.750645 C0.103697157,784.547965 2.00263857,788.845564 5.7005771,792.642443 L83.4572306,871.299502 C87.2541139,875.096381 91.5527176,877 96.3500433,877 C101.147369,877 105.444973,875.197325 109.142912,871.499391 L365.400058,615.241545 L621.657203,871.499391 C625.355142,875.197325 629.652746,877.095265 634.449072,877 C639.246398,877 643.545002,874.997437 647.342885,871.299502 L725.099538,793.54294 C728.896421,789.745062 730.796362,785.446463 730.796362,780.649143 C731.096195,775.752878 729.196254,771.454279 725.499315,767.757345"
-            />
-          </svg>
+            <span
+              className="pf-v5-c-icon__content"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-v5-svg"
+                color="gray"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 730 1024"
+                width="1em"
+              >
+                <path
+                  d="M725.499315,767.757345 L469.242169,511.500499 L725.499315,255.243653 C729.196254,251.545719 731.096195,247.248119 731,242.4498 C731,237.653479 728.997365,233.35588 725.299427,229.558002 L647.542773,151.701495 C643.743891,147.903617 639.446287,146 634.64996,146 C629.852635,146 625.55503,147.803673 621.857092,151.500607 L365.5,407.857398 L109.241857,151.500607 C105.544917,147.803673 101.246314,145.904733 96.4499876,146 C91.6526619,146.104622 87.3550577,148.002562 83.5571748,151.701495 L5.7005771,229.457058 C1.90269428,233.255936 0,237.553535 0,242.350855 C0,247.148175 1.80175055,251.444775 5.50068853,255.143709 L261.857779,511.500499 L5.50068853,767.757345 C1.80175055,771.454279 -0.0961914123,775.752878 0,779.750645 C0.103697157,784.547965 2.00263857,788.845564 5.7005771,792.642443 L83.4572306,871.299502 C87.2541139,875.096381 91.5527176,877 96.3500433,877 C101.147369,877 105.444973,875.197325 109.142912,871.499391 L365.400058,615.241545 L621.657203,871.499391 C625.355142,875.197325 629.652746,877.095265 634.449072,877 C639.246398,877 643.545002,874.997437 647.342885,871.299502 L725.099538,793.54294 C728.896421,789.745062 730.796362,785.446463 730.796362,780.649143 C731.096195,775.752878 729.196254,771.454279 725.499315,767.757345"
+                />
+              </svg>
+               
+            </span>
+          </span>
         </span>
       </button>
     </div>
diff --git a/src/test/Recordings/Filters/__snapshots__/DurationFilter.test.tsx.snap b/src/test/Recordings/Filters/__snapshots__/DurationFilter.test.tsx.snap
index 00ba07ba11..0cf66b9e20 100644
--- a/src/test/Recordings/Filters/__snapshots__/DurationFilter.test.tsx.snap
+++ b/src/test/Recordings/Filters/__snapshots__/DurationFilter.test.tsx.snap
@@ -2,42 +2,45 @@
 
 exports[`<DurationFilter /> renders correctly 1`] = `
 <div
-  className="pf-l-flex"
+  className="pf-v5-l-flex"
 >
   <div
     className="pf-m-flex-1"
   >
-    <input
-      aria-invalid={false}
-      aria-label="duration filter"
-      className="pf-c-form-control"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-      data-ouia-component-type="PF4/TextInput"
-      data-ouia-safe={true}
-      disabled={false}
-      id="duration-input"
-      min="0"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      required={false}
-      type="number"
-      value={30}
-    />
+    <span
+      className="pf-v5-c-form-control"
+    >
+      <input
+        aria-invalid={false}
+        aria-label="duration filter"
+        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+        data-ouia-component-type="PF5/TextInput"
+        data-ouia-safe={true}
+        disabled={false}
+        id="duration-input"
+        min="0"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        required={false}
+        type="number"
+        value={30}
+      />
+    </span>
   </div>
   <div
     className=""
   >
     <div
-      className="pf-c-check"
+      className="pf-v5-c-check"
     >
       <input
         aria-invalid={false}
         checked={false}
-        className="pf-c-check__input"
+        className="pf-v5-c-check__input"
         data-ouia-component-id="OUIA-Generated-Checkbox-1"
-        data-ouia-component-type="PF4/Checkbox"
+        data-ouia-component-type="PF5/Checkbox"
         data-ouia-safe={true}
         disabled={false}
         id="continuous-checkbox"
@@ -46,7 +49,7 @@ exports[`<DurationFilter /> renders correctly 1`] = `
         type="checkbox"
       />
       <label
-        className="pf-c-check__label"
+        className="pf-v5-c-check__label"
         htmlFor="continuous-checkbox"
       >
         Continuous
diff --git a/src/test/Recordings/Filters/__snapshots__/LabelFilter.test.tsx.snap b/src/test/Recordings/Filters/__snapshots__/LabelFilter.test.tsx.snap
index bdd1ec6248..0dced73cf5 100644
--- a/src/test/Recordings/Filters/__snapshots__/LabelFilter.test.tsx.snap
+++ b/src/test/Recordings/Filters/__snapshots__/LabelFilter.test.tsx.snap
@@ -2,65 +2,66 @@
 
 exports[`<LabelFilter /> renders correctly 1`] = `
 <div
-  className="pf-c-select"
-  data-ouia-component-id="OUIA-Generated-Select-typeahead-1"
-  data-ouia-component-type="PF4/Select"
-  data-ouia-safe={true}
+  className="pf-v5-c-menu-toggle pf-m-full-width pf-m-typeahead"
 >
   <div
-    className="pf-c-select__toggle pf-m-typeahead"
-    onClick={[Function]}
-    onKeyDown={[Function]}
+    className="pf-v5-c-text-input-group pf-m-plain"
   >
     <div
-      className="pf-c-select__toggle-wrapper"
-    >
-      <input
-        aria-activedescendant={null}
-        aria-label="Filter by label..."
-        autoComplete="off"
-        className="pf-c-form-control pf-c-select__toggle-typeahead"
-        disabled={false}
-        id="pf-select-toggle-id-0-select-typeahead"
-        onChange={[Function]}
-        onClick={[Function]}
-        placeholder="Filter by label..."
-        type="text"
-        value=""
-      />
-    </div>
-    <button
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-0"
-      className="pf-c-button pf-c-select__toggle-button pf-m-plain"
-      disabled={false}
-      id="pf-select-toggle-id-0"
+      autoComplete="off"
+      className="pf-v5-c-text-input-group__main"
+      id="typeahead-label-filter"
       onClick={[Function]}
-      tabIndex={-1}
-      type="button"
     >
-      <svg
-        aria-hidden={true}
-        aria-labelledby={null}
-        className="pf-c-select__toggle-arrow"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
-        viewBox="0 0 320 512"
-        width="1em"
+      <span
+        className="pf-v5-c-text-input-group__text"
       >
-        <path
-          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        <input
+          aria-controls="typeahead-label-select"
+          aria-expanded={false}
+          aria-label="Type to filter"
+          className="pf-v5-c-text-input-group__text-input"
+          onChange={[Function]}
+          placeholder="Filter by label..."
+          role="combobox"
+          type="text"
+          value=""
         />
-      </svg>
-    </button>
+      </span>
+    </div>
+    <div
+      className="pf-v5-c-text-input-group__utilities"
+    />
   </div>
+  <button
+    aria-expanded={false}
+    aria-label="Menu toggle"
+    className="pf-v5-c-menu-toggle__button"
+    onClick={[Function]}
+    type="button"
+  >
+    <span
+      className="pf-v5-c-menu-toggle__controls"
+    >
+      <span
+        className="pf-v5-c-menu-toggle__toggle-icon"
+      >
+        <svg
+          aria-hidden={true}
+          aria-labelledby={null}
+          className="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
 </div>
 `;
diff --git a/src/test/Recordings/Filters/__snapshots__/NameFilter.test.tsx.snap b/src/test/Recordings/Filters/__snapshots__/NameFilter.test.tsx.snap
index 239a838bf2..bfc4c3f469 100644
--- a/src/test/Recordings/Filters/__snapshots__/NameFilter.test.tsx.snap
+++ b/src/test/Recordings/Filters/__snapshots__/NameFilter.test.tsx.snap
@@ -2,65 +2,66 @@
 
 exports[`<NameFilter /> renders correctly 1`] = `
 <div
-  className="pf-c-select"
-  data-ouia-component-id="OUIA-Generated-Select-typeahead-1"
-  data-ouia-component-type="PF4/Select"
-  data-ouia-safe={true}
+  className="pf-v5-c-menu-toggle pf-m-full-width pf-m-typeahead"
 >
   <div
-    className="pf-c-select__toggle pf-m-typeahead"
-    onClick={[Function]}
-    onKeyDown={[Function]}
+    className="pf-v5-c-text-input-group pf-m-plain"
   >
     <div
-      className="pf-c-select__toggle-wrapper"
-    >
-      <input
-        aria-activedescendant={null}
-        aria-label="Filter by name..."
-        autoComplete="off"
-        className="pf-c-form-control pf-c-select__toggle-typeahead"
-        disabled={false}
-        id="pf-select-toggle-id-0-select-typeahead"
-        onChange={[Function]}
-        onClick={[Function]}
-        placeholder="Filter by name..."
-        type="text"
-        value=""
-      />
-    </div>
-    <button
-      aria-expanded={false}
-      aria-haspopup="listbox"
-      aria-label="Options menu"
-      aria-labelledby=" pf-select-toggle-id-0"
-      className="pf-c-button pf-c-select__toggle-button pf-m-plain"
-      disabled={false}
-      id="pf-select-toggle-id-0"
+      autoComplete="off"
+      className="pf-v5-c-text-input-group__main"
+      id="typeahead-name-filter"
       onClick={[Function]}
-      tabIndex={-1}
-      type="button"
     >
-      <svg
-        aria-hidden={true}
-        aria-labelledby={null}
-        className="pf-c-select__toggle-arrow"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
-        viewBox="0 0 320 512"
-        width="1em"
+      <span
+        className="pf-v5-c-text-input-group__text"
       >
-        <path
-          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+        <input
+          aria-controls="typeahead-name-select"
+          aria-expanded={false}
+          aria-label="Type to filter"
+          className="pf-v5-c-text-input-group__text-input"
+          onChange={[Function]}
+          placeholder="Filter by name..."
+          role="combobox"
+          type="text"
+          value=""
         />
-      </svg>
-    </button>
+      </span>
+    </div>
+    <div
+      className="pf-v5-c-text-input-group__utilities"
+    />
   </div>
+  <button
+    aria-expanded={false}
+    aria-label="Menu toggle"
+    className="pf-v5-c-menu-toggle__button"
+    onClick={[Function]}
+    type="button"
+  >
+    <span
+      className="pf-v5-c-menu-toggle__controls"
+    >
+      <span
+        className="pf-v5-c-menu-toggle__toggle-icon"
+      >
+        <svg
+          aria-hidden={true}
+          aria-labelledby={null}
+          className="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
 </div>
 `;
diff --git a/src/test/Recordings/Filters/__snapshots__/RecordingStateFilter.test.tsx.snap b/src/test/Recordings/Filters/__snapshots__/RecordingStateFilter.test.tsx.snap
index 8450135d0f..5037ec1a33 100644
--- a/src/test/Recordings/Filters/__snapshots__/RecordingStateFilter.test.tsx.snap
+++ b/src/test/Recordings/Filters/__snapshots__/RecordingStateFilter.test.tsx.snap
@@ -1,47 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RecordingStateFilter /> renders correctly 1`] = `
-<div
-  className="pf-c-select"
-  data-ouia-component-id="OUIA-Generated-Select-checkbox-1"
-  data-ouia-component-type="PF4/Select"
-  data-ouia-safe={true}
+<button
+  aria-expanded={false}
+  className="pf-v5-c-menu-toggle"
+  disabled={false}
+  onClick={[Function]}
+  type="button"
 >
-  <button
-    aria-expanded={false}
-    aria-haspopup={null}
-    aria-label="Options menu"
-    aria-labelledby=" pf-select-toggle-id-0"
-    className="pf-c-select__toggle"
-    disabled={false}
-    id="pf-select-toggle-id-0"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
+  <span
+    className="pf-v5-c-menu-toggle__text"
+  >
+    Filter by state
+  </span>
+  <span
+    className="pf-v5-c-menu-toggle__controls"
   >
-    <div
-      className="pf-c-select__toggle-wrapper"
-    >
-      <span
-        className="pf-c-select__toggle-text"
-      >
-        Filter by state
-      </span>
-    </div>
     <span
-      className="pf-c-select__toggle-arrow"
+      className="pf-v5-c-menu-toggle__toggle-icon"
     >
       <svg
         aria-hidden={true}
         aria-labelledby={null}
+        className="pf-v5-svg"
         fill="currentColor"
         height="1em"
         role="img"
-        style={
-          Object {
-            "verticalAlign": "-0.125em",
-          }
-        }
         viewBox="0 0 320 512"
         width="1em"
       >
@@ -50,6 +34,6 @@ exports[`<RecordingStateFilter /> renders correctly 1`] = `
         />
       </svg>
     </span>
-  </button>
-</div>
+  </span>
+</button>
 `;
diff --git a/src/test/Recordings/__snapshots__/RecordingLabelsPanel.test.tsx.snap b/src/test/Recordings/__snapshots__/RecordingLabelsPanel.test.tsx.snap
index 71598011d1..250300dd26 100644
--- a/src/test/Recordings/__snapshots__/RecordingLabelsPanel.test.tsx.snap
+++ b/src/test/Recordings/__snapshots__/RecordingLabelsPanel.test.tsx.snap
@@ -2,16 +2,16 @@
 
 exports[`<RecordingLabelsPanel /> renders correctly 1`] = `
 <div
-  className="pf-c-drawer pf-m-expanded pf-m-inline"
+  className="pf-v5-c-drawer pf-m-expanded pf-m-inline"
 >
   <div
-    className="pf-c-drawer__main"
+    className="pf-v5-c-drawer__main"
   >
     <div
-      className="pf-c-drawer__content"
+      className="pf-v5-c-drawer__content"
     />
     <div
-      className="pf-c-drawer__panel pf-m-resizable"
+      className="pf-v5-c-drawer__panel pf-m-resizable"
       hidden={false}
       id="pf-drawer-panel-0"
       onTransitionEnd={[Function]}
@@ -23,7 +23,7 @@ exports[`<RecordingLabelsPanel /> renders correctly 1`] = `
         aria-valuemax={100}
         aria-valuemin={0}
         aria-valuenow={0}
-        className="pf-c-drawer__splitter pf-m-vertical"
+        className="pf-v5-c-drawer__splitter pf-m-vertical"
         onKeyDown={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
@@ -32,32 +32,32 @@ exports[`<RecordingLabelsPanel /> renders correctly 1`] = `
       >
         <div
           aria-hidden={true}
-          className="pf-c-drawer__splitter-handle"
+          className="pf-v5-c-drawer__splitter-handle"
         />
       </div>
       <div
-        className="pf-c-drawer__panel-main"
+        className="pf-v5-c-drawer__panel-main"
       >
         <div
-          className="pf-c-drawer__body"
+          className="pf-v5-c-drawer__body"
         >
           <div
-            className="pf-c-drawer__head"
+            className="pf-v5-c-drawer__head"
           >
             <div
-              className="pf-c-drawer__actions"
+              className="pf-v5-c-drawer__actions"
             >
               <div
-                className="pf-c-drawer__close"
+                className="pf-v5-c-drawer__close"
                 data-testid="hide-table-actions-panel"
                 onClick={[Function]}
               >
                 <button
                   aria-disabled={false}
                   aria-label="hide table actions panel"
-                  className="pf-c-button pf-m-plain"
+                  className="pf-v5-c-button pf-m-plain"
                   data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                  data-ouia-component-type="PF4/Button"
+                  data-ouia-component-type="PF5/Button"
                   data-ouia-safe={true}
                   disabled={false}
                   onClick={[Function]}
@@ -67,14 +67,10 @@ exports[`<RecordingLabelsPanel /> renders correctly 1`] = `
                   <svg
                     aria-hidden={true}
                     aria-labelledby={null}
+                    className="pf-v5-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
                     viewBox="0 0 352 512"
                     width="1em"
                   >
@@ -88,7 +84,7 @@ exports[`<RecordingLabelsPanel /> renders correctly 1`] = `
           </div>
         </div>
         <div
-          className="pf-c-drawer__body"
+          className="pf-v5-c-drawer__body"
         >
           <div>
             Bulk Edit Labels
diff --git a/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap b/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap
index 396f84be4a..1d6312deea 100644
--- a/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap
+++ b/src/test/Recordings/__snapshots__/Recordings.test.tsx.snap
@@ -1,93 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Recordings /> renders correctly 1`] = `
-<div>
-  Recordings
-  <article
-    className="pf-c-card"
-    data-ouia-component-id="OUIA-Generated-Card-4"
-    data-ouia-component-type="PF4/Card"
-    data-ouia-safe={true}
-    id=""
+Array [
+  <h2>
+    Unexpected Application Error!
+  </h2>,
+  <h3
+    style={
+      Object {
+        "fontStyle": "italic",
+      }
+    }
   >
-    <div
-      className="pf-c-card__body"
+    {}
+  </h3>,
+  <p>
+    💿 Hey developer 👋
+  </p>,
+  <p>
+    You can provide a way better UX than this when your app throws errors by providing your own 
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
     >
-      <div
-        className="pf-c-tabs"
-        data-ouia-component-id="OUIA-Generated-Tabs-3"
-        data-ouia-component-type="PF4/Tabs"
-        data-ouia-safe={true}
-        id="recordings"
-        onSelect={[Function]}
-      >
-        <ul
-          className="pf-c-tabs__list"
-          onScroll={[Function]}
-          role="tablist"
-        >
-          <li
-            className="pf-c-tabs__item pf-m-current"
-            role="presentation"
-          >
-            <button
-              aria-controls="pf-tab-section-active-recording-active-recordings"
-              aria-selected={true}
-              className="pf-c-tabs__link"
-              data-ouia-component-type="PF4/TabButton"
-              data-ouia-safe={true}
-              data-quickstart-id="active-recordings-tab"
-              id="pf-tab-active-recording-active-recordings"
-              onClick={[Function]}
-              role="tab"
-              type="button"
-            >
-              <span
-                className="pf-c-tabs__item-text"
-              >
-                Active Recordings
-              </span>
-            </button>
-          </li>
-          <li
-            className="pf-c-tabs__item"
-            role="presentation"
-          >
-            <button
-              aria-selected={false}
-              className="pf-c-tabs__link"
-              data-ouia-component-type="PF4/TabButton"
-              data-ouia-safe={true}
-              data-quickstart-id="archived-recordings-tab"
-              id="pf-tab-archived-recording-archived-recordings"
-              onClick={[Function]}
-              role="tab"
-              type="button"
-            >
-              <span
-                className="pf-c-tabs__item-text"
-              >
-                Archived Recordings
-              </span>
-            </button>
-          </li>
-        </ul>
-      </div>
-      <section
-        aria-labelledby="pf-tab-active-recording-active-recordings"
-        className="pf-c-tab-content"
-        data-ouia-component-type="PF4/TabContent"
-        data-ouia-safe={true}
-        hidden={false}
-        id="pf-tab-section-active-recording-active-recordings"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        <div>
-          Active Recordings Table
-        </div>
-      </section>
-    </div>
-  </article>
-</div>
+      ErrorBoundary
+    </code>
+     or
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "rgba(200,200,200, 0.5)",
+          "padding": "2px 4px",
+        }
+      }
+    >
+      errorElement
+    </code>
+     prop on your route.
+  </p>,
+]
 `;
diff --git a/src/test/Rules/__snapshots__/Rules.test.tsx.snap b/src/test/Rules/__snapshots__/Rules.test.tsx.snap
index 1d2c8488ea..28dd72e1c4 100644
--- a/src/test/Rules/__snapshots__/Rules.test.tsx.snap
+++ b/src/test/Rules/__snapshots__/Rules.test.tsx.snap
@@ -2,26 +2,27 @@
 
 exports[`<Rules /> renders correctly 1`] = `
 <div
-  className="pf-c-page__main-group"
+  className="pf-v5-c-page__main-group"
 >
   <section
-    className="pf-c-page__main-section"
+    className="pf-v5-c-page__main-section"
   >
     <nav
       aria-label="Breadcrumb"
-      className="pf-c-breadcrumb"
+      className="pf-v5-c-breadcrumb"
       data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-      data-ouia-component-type="PF4/Breadcrumb"
+      data-ouia-component-type="PF5/Breadcrumb"
       data-ouia-safe={true}
     >
       <ol
-        className="pf-c-breadcrumb__list"
+        className="pf-v5-c-breadcrumb__list"
+        role="list"
       >
         <li
-          className="pf-c-breadcrumb__item"
+          className="pf-v5-c-breadcrumb__item"
         >
           <h1
-            className="pf-c-breadcrumb__heading"
+            className="pf-v5-c-breadcrumb__heading"
           >
             Automated Rules
           </h1>
@@ -29,26 +30,30 @@ exports[`<Rules /> renders correctly 1`] = `
       </ol>
     </nav>
     <div
-      className="pf-l-stack pf-m-gutter"
+      className="pf-v5-l-stack pf-m-gutter"
     >
       <div
-        className="pf-l-stack__item"
+        className="pf-v5-l-stack__item"
       >
-        <article
-          className="pf-c-card"
+        <div
+          className="pf-v5-c-card"
           data-ouia-component-id="OUIA-Generated-Card-1"
-          data-ouia-component-type="PF4/Card"
+          data-ouia-component-type="PF5/Card"
           data-ouia-safe={true}
           data-quickstart-id="about-rules"
           id=""
         >
           <div
-            className="pf-c-card__title"
+            className="pf-v5-c-card__title"
           >
-            About Automated Rules
+            <div
+              className="pf-v5-c-card__title-text"
+            >
+              About Automated Rules
+            </div>
           </div>
           <div
-            className="pf-c-card__body"
+            className="pf-v5-c-card__body"
           >
             Automated Rules define a dynamic set of Target JVMs to connect to and start
              
@@ -83,46 +88,46 @@ exports[`<Rules /> renders correctly 1`] = `
             </a>
              to ensure you always have up-to-date information about your JVMs.
           </div>
-        </article>
+        </div>
       </div>
       <div
-        className="pf-l-stack__item"
+        className="pf-v5-l-stack__item"
       >
-        <article
-          className="pf-c-card"
+        <div
+          className="pf-v5-c-card"
           data-ouia-component-id="OUIA-Generated-Card-2"
-          data-ouia-component-type="PF4/Card"
+          data-ouia-component-type="PF5/Card"
           data-ouia-safe={true}
           id=""
         >
           <div
-            className="pf-c-card__body"
+            className="pf-v5-c-card__body"
           >
             <div
-              className="pf-c-toolbar"
+              className="pf-v5-c-toolbar"
               data-ouia-component-id="OUIA-Generated-Toolbar-1"
-              data-ouia-component-type="PF4/Toolbar"
+              data-ouia-component-type="PF5/Toolbar"
               data-ouia-safe={true}
               id="automated-rule-toolbar"
             >
               <div
-                className="pf-c-toolbar__content"
+                className="pf-v5-c-toolbar__content"
               >
                 <div
-                  className="pf-c-toolbar__content-section"
+                  className="pf-v5-c-toolbar__content-section"
                 >
                   <div
-                    className="pf-c-toolbar__group pf-m-icon-button-group"
+                    className="pf-v5-c-toolbar__group pf-m-icon-button-group"
                   >
                     <div
-                      className="pf-c-toolbar__item"
+                      className="pf-v5-c-toolbar__item"
                     >
                       <button
                         aria-disabled={false}
                         aria-label={null}
-                        className="pf-c-button pf-m-primary"
+                        className="pf-v5-c-button pf-m-primary"
                         data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                        data-ouia-component-type="PF4/Button"
+                        data-ouia-component-type="PF5/Button"
                         data-ouia-safe={true}
                         data-quickstart-id="create-rule-btn"
                         disabled={false}
@@ -136,9 +141,9 @@ exports[`<Rules /> renders correctly 1`] = `
                       <button
                         aria-disabled={false}
                         aria-label="Upload"
-                        className="pf-c-button pf-m-secondary"
+                        className="pf-v5-c-button pf-m-secondary"
                         data-ouia-component-id="OUIA-Generated-Button-secondary-1"
-                        data-ouia-component-type="PF4/Button"
+                        data-ouia-component-type="PF5/Button"
                         data-ouia-safe={true}
                         disabled={false}
                         onClick={[Function]}
@@ -148,14 +153,10 @@ exports[`<Rules /> renders correctly 1`] = `
                         <svg
                           aria-hidden={true}
                           aria-labelledby={null}
+                          className="pf-v5-svg"
                           fill="currentColor"
                           height="1em"
                           role="img"
-                          style={
-                            Object {
-                              "verticalAlign": "-0.125em",
-                            }
-                          }
                           viewBox="0 0 512 512"
                           width="1em"
                         >
@@ -167,61 +168,57 @@ exports[`<Rules /> renders correctly 1`] = `
                     </div>
                   </div>
                 </div>
-                <div
-                  className="pf-c-toolbar__expandable-content"
-                  id="automated-rule-toolbar-expandable-content-1"
-                >
-                  <div
-                    className="pf-c-toolbar__group"
-                  />
-                </div>
               </div>
               <div
-                className="pf-c-toolbar__content pf-m-hidden"
+                className="pf-v5-c-toolbar__content pf-m-hidden"
                 hidden={true}
               >
                 <div
-                  className="pf-c-toolbar__group"
+                  className="pf-v5-c-toolbar__group"
                 />
               </div>
             </div>
             <div
-              className="pf-c-empty-state"
+              className="pf-v5-c-empty-state"
             >
               <div
-                className="pf-c-empty-state__content"
+                className="pf-v5-c-empty-state__content"
               >
-                <svg
-                  aria-hidden="true"
-                  aria-labelledby={null}
-                  className="pf-c-empty-state__icon"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 512 512"
-                  width="1em"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-                <h4
-                  className="pf-c-title pf-m-lg"
-                  data-ouia-component-id="OUIA-Generated-Title-1"
-                  data-ouia-component-type="PF4/Title"
-                  data-ouia-safe={true}
+                <div
+                  className="pf-v5-c-empty-state__header"
                 >
-                  No Automated Rules
-                </h4>
+                  <div
+                    className="pf-v5-c-empty-state__icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      className="pf-v5-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    className="pf-v5-c-empty-state__title"
+                  >
+                    <h4
+                      className="pf-v5-c-empty-state__title-text"
+                    >
+                      No Automated Rules
+                    </h4>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </article>
+        </div>
       </div>
     </div>
   </section>
diff --git a/src/test/Settings/__snapshots__/AutoRefresh.test.tsx.snap b/src/test/Settings/__snapshots__/AutoRefresh.test.tsx.snap
index 5fd51ed3fb..b0592a7274 100644
--- a/src/test/Settings/__snapshots__/AutoRefresh.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/AutoRefresh.test.tsx.snap
@@ -3,79 +3,107 @@
 exports[`<AutoRefresh/> renders correctly 1`] = `
 Array [
   <div
-    className="pf-l-split pf-m-gutter"
+    className="pf-v5-l-split pf-m-gutter"
   >
     <div
-      className="pf-l-split__item pf-m-fill"
+      className="pf-v5-l-split__item pf-m-fill"
     >
-      <input
-        aria-invalid={false}
-        aria-label="Duration Picker Period Input"
-        className="pf-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe={true}
-        disabled={true}
-        id="duration-picker-period"
-        min="0"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={true}
-        type="number"
-        value={30}
-      />
+      <span
+        className="pf-v5-c-form-control pf-m-disabled"
+      >
+        <input
+          aria-invalid={false}
+          aria-label="Duration Picker Period Input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe={true}
+          disabled={true}
+          id="duration-picker-period"
+          min="0"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          required={true}
+          type="number"
+          value={30}
+        />
+      </span>
     </div>
     <div
-      className="pf-l-split__item"
+      className="pf-v5-l-split__item"
     >
-      <select
-        aria-invalid={false}
-        aria-label="Duration Picker Units Input"
-        className="pf-c-form-control"
-        data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
-        data-ouia-component-type="PF4/FormSelect"
-        data-ouia-safe={true}
-        disabled={true}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        required={false}
-        value={1000}
+      <span
+        className="pf-v5-c-form-control pf-m-disabled"
       >
-        <option
-          className=""
-          disabled={false}
+        <select
+          aria-invalid={false}
+          aria-label="Duration Picker Units Input"
+          data-ouia-component-id="OUIA-Generated-FormSelect-default-1"
+          data-ouia-component-type="PF5/FormSelect"
+          data-ouia-safe={true}
+          disabled={true}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          required={false}
           value={1000}
         >
-          Seconds
-        </option>
-        <option
-          className=""
-          disabled={false}
-          value={60000}
-        >
-          Minutes
-        </option>
-        <option
-          className=""
-          disabled={false}
-          value={3600000}
+          <option
+            className=""
+            disabled={false}
+            value={1000}
+          >
+            Seconds
+          </option>
+          <option
+            className=""
+            disabled={false}
+            value={60000}
+          >
+            Minutes
+          </option>
+          <option
+            className=""
+            disabled={false}
+            value={3600000}
+          >
+            Hours
+          </option>
+        </select>
+        <span
+          className="pf-v5-c-form-control__utilities"
         >
-          Hours
-        </option>
-      </select>
+          <span
+            className="pf-v5-c-form-control__toggle-icon"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              className="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 320 512"
+              width="1em"
+            >
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
     </div>
   </div>,
   <div
-    className="pf-c-check"
+    className="pf-v5-c-check"
   >
     <input
       aria-invalid={false}
       checked={false}
-      className="pf-c-check__input"
+      className="pf-v5-c-check__input"
       data-ouia-component-id="OUIA-Generated-Checkbox-1"
-      data-ouia-component-type="PF4/Checkbox"
+      data-ouia-component-type="PF5/Checkbox"
       data-ouia-safe={true}
       data-quickstart-id="settings-connectivity-tab-auto-refresh"
       disabled={false}
@@ -85,7 +113,7 @@ Array [
       type="checkbox"
     />
     <label
-      className="pf-c-check__label"
+      className="pf-v5-c-check__label"
       htmlFor="auto-refresh-enabled"
     >
       Enabled
diff --git a/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap b/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap
index d4fbb06c05..54481231c3 100644
--- a/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap
@@ -2,34 +2,34 @@
 
 exports[`<DeletionDialogControl/> renders correctly 1`] = `
 <div
-  className="pf-l-stack pf-m-gutter"
+  className="pf-v5-l-stack pf-m-gutter"
 >
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <div
-      className="pf-c-form__group"
+      className="pf-v5-c-form__group"
     >
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
         <div
-          className="pf-c-helper-text"
+          className="pf-v5-c-helper-text"
         >
           <div
-            className="pf-c-helper-text__item"
+            className="pf-v5-c-helper-text__item"
           >
             <span
-              className="pf-c-helper-text__item-text"
+              className="pf-v5-c-helper-text__item-text"
             >
               Enable or disable deletion dialogs by deletion type.
             </span>
           </div>
         </div>
         <label
-          className="pf-c-switch"
+          className="pf-v5-c-switch"
           data-ouia-component-id="OUIA-Generated-Switch-1"
-          data-ouia-component-type="PF4/Switch"
+          data-ouia-component-type="PF5/Switch"
           data-ouia-safe={true}
           htmlFor="all-deletion-warnings"
         >
@@ -37,60 +37,57 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
             aria-label=""
             aria-labelledby="all-deletion-warnings-on"
             checked={true}
-            className="pf-c-switch__input"
+            className="pf-v5-c-switch__input"
             disabled={false}
             id="all-deletion-warnings"
             onChange={[Function]}
             type="checkbox"
           />
           <span
-            className="pf-c-switch__toggle"
+            className="pf-v5-c-switch__toggle"
           />
           <span
             aria-hidden="true"
-            className="pf-c-switch__label pf-m-on"
+            className="pf-v5-c-switch__label pf-m-on"
             id="all-deletion-warnings-on"
           >
             All Deletion Warnings
           </span>
           <span
             aria-hidden="true"
-            className="pf-c-switch__label pf-m-off"
+            className="pf-v5-c-switch__label pf-m-off"
             id="all-deletion-warnings-off"
           >
             All Deletion Warnings
           </span>
         </label>
-        
       </div>
     </div>
   </div>
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <div
-      className="pf-c-expandable-section"
+      className="pf-v5-c-expandable-section"
     >
       <button
+        aria-controls="expandable-section-content-17034491895320ruftgh9f8k"
         aria-expanded={false}
-        className="pf-c-expandable-section__toggle"
+        className="pf-v5-c-expandable-section__toggle"
+        id="expandable-section-toggle-1703449189532iye236bh5qs"
         onClick={[Function]}
         type="button"
       >
         <span
-          className="pf-c-expandable-section__toggle-icon"
+          className="pf-v5-c-expandable-section__toggle-icon"
         >
           <svg
             aria-hidden={true}
             aria-labelledby={null}
+            className="pf-v5-svg"
             fill="currentColor"
             height="1em"
             role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
             viewBox="0 0 256 512"
             width="1em"
           >
@@ -100,23 +97,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </svg>
         </span>
         <span
-          className="pf-c-expandable-section__toggle-text"
+          className="pf-v5-c-expandable-section__toggle-text"
         >
           Show more
         </span>
       </button>
       <div
-        className="pf-c-expandable-section__content"
+        aria-labelledby="expandable-section-toggle-1703449189532iye236bh5qs"
+        className="pf-v5-c-expandable-section__content"
         hidden={true}
-        id=""
+        id="expandable-section-content-17034491895320ruftgh9f8k"
+        role="region"
       >
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-2"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteActiveRecordings"
           >
@@ -124,25 +123,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteActiveRecordings-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteActiveRecordings"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteActiveRecordings-on"
             >
               Delete Active Recording
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteActiveRecordings-off"
             >
               Delete Active Recording
@@ -150,12 +149,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-3"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteArchivedRecordings"
           >
@@ -163,25 +162,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteArchivedRecordings-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteArchivedRecordings"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteArchivedRecordings-on"
             >
               Delete Archived Recording
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteArchivedRecordings-off"
             >
               Delete Archived Recording
@@ -189,12 +188,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-4"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteAutomatedRules"
           >
@@ -202,25 +201,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteAutomatedRules-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteAutomatedRules"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteAutomatedRules-on"
             >
               Delete Automated Rule
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteAutomatedRules-off"
             >
               Delete Automated Rule
@@ -228,12 +227,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-5"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DisableAutomatedRules"
           >
@@ -241,25 +240,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DisableAutomatedRules-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DisableAutomatedRules"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DisableAutomatedRules-on"
             >
               Disable Automated Rule
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DisableAutomatedRules-off"
             >
               Disable Automated Rule
@@ -267,12 +266,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-6"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteEventTemplates"
           >
@@ -280,25 +279,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteEventTemplates-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteEventTemplates"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteEventTemplates-on"
             >
               Delete Event Template
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteEventTemplates-off"
             >
               Delete Event Template
@@ -306,12 +305,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-7"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteProbeTemplates"
           >
@@ -319,25 +318,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteProbeTemplates-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteProbeTemplates"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteProbeTemplates-on"
             >
               Delete Probe Template
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteProbeTemplates-off"
             >
               Delete Probe Template
@@ -345,12 +344,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-8"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteActiveProbes"
           >
@@ -358,25 +357,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteActiveProbes-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteActiveProbes"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteActiveProbes-on"
             >
               Remove Active Probes
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteActiveProbes-off"
             >
               Remove Active Probes
@@ -384,12 +383,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-9"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteCredentials"
           >
@@ -397,25 +396,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteCredentials-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteCredentials"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteCredentials-on"
             >
               Delete Credentials
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteCredentials-off"
             >
               Delete Credentials
@@ -423,12 +422,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-10"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteCustomTargets"
           >
@@ -436,25 +435,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteCustomTargets-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteCustomTargets"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteCustomTargets-on"
             >
               Delete Custom Targets
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteCustomTargets-off"
             >
               Delete Custom Targets
@@ -462,12 +461,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-11"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteDashboardLayout"
           >
@@ -475,25 +474,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteDashboardLayout-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteDashboardLayout"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteDashboardLayout-on"
             >
               Delete Dashboard Layouts
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteDashboardLayout-off"
             >
               Delete Dashboard Layouts
@@ -501,12 +500,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-12"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="DeleteLayoutTemplate"
           >
@@ -514,25 +513,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="DeleteLayoutTemplate-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="DeleteLayoutTemplate"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="DeleteLayoutTemplate-on"
             >
               Delete Layout Template
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="DeleteLayoutTemplate-off"
             >
               Delete Layout Template
@@ -540,12 +539,12 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-13"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ClearDashboardLayout"
           >
@@ -553,25 +552,25 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ClearDashboardLayout-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ClearDashboardLayout"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ClearDashboardLayout-on"
             >
               Clear Dashboard Layout
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ClearDashboardLayout-off"
             >
               Clear Dashboard Layout
diff --git a/src/test/Settings/__snapshots__/NotificationControl.test.tsx.snap b/src/test/Settings/__snapshots__/NotificationControl.test.tsx.snap
index 1bbb529eaa..d2915d5c67 100644
--- a/src/test/Settings/__snapshots__/NotificationControl.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/NotificationControl.test.tsx.snap
@@ -2,34 +2,34 @@
 
 exports[`<NotificationControl/> renders correctly 1`] = `
 <div
-  className="pf-l-stack pf-m-gutter"
+  className="pf-v5-l-stack pf-m-gutter"
 >
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <div
-      className="pf-c-form__group"
+      className="pf-v5-c-form__group"
     >
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
         <div
-          className="pf-c-helper-text"
+          className="pf-v5-c-helper-text"
         >
           <div
-            className="pf-c-helper-text__item"
+            className="pf-v5-c-helper-text__item"
           >
             <span
-              className="pf-c-helper-text__item-text"
+              className="pf-v5-c-helper-text__item-text"
             >
               Enable or disable all notifications.
             </span>
           </div>
         </div>
         <label
-          className="pf-c-switch"
+          className="pf-v5-c-switch"
           data-ouia-component-id="OUIA-Generated-Switch-1"
-          data-ouia-component-type="PF4/Switch"
+          data-ouia-component-type="PF5/Switch"
           data-ouia-safe={true}
           htmlFor="all-notifications"
         >
@@ -37,181 +37,184 @@ exports[`<NotificationControl/> renders correctly 1`] = `
             aria-label=""
             aria-labelledby="all-notifications-on"
             checked={true}
-            className="pf-c-switch__input"
+            className="pf-v5-c-switch__input"
             disabled={false}
             id="all-notifications"
             onChange={[Function]}
             type="checkbox"
           />
           <span
-            className="pf-c-switch__toggle"
+            className="pf-v5-c-switch__toggle"
           />
           <span
             aria-hidden="true"
-            className="pf-c-switch__label pf-m-on"
+            className="pf-v5-c-switch__label pf-m-on"
             id="all-notifications-on"
           >
             All Notifications
           </span>
           <span
             aria-hidden="true"
-            className="pf-c-switch__label pf-m-off"
+            className="pf-v5-c-switch__label pf-m-off"
             id="all-notifications-off"
           >
             All Notifications
           </span>
         </label>
-        
       </div>
     </div>
   </div>
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <div
-      className="pf-c-form__group"
+      className="pf-v5-c-form__group"
     >
       <div
-        className="pf-c-form__group-control"
+        className="pf-v5-c-form__group-control"
       >
         <div
-          className="pf-c-helper-text"
+          className="pf-v5-c-helper-text"
         >
           <div
-            className="pf-c-helper-text__item"
+            className="pf-v5-c-helper-text__item"
           >
             <span
-              className="pf-c-helper-text__item-text"
+              className="pf-v5-c-helper-text__item-text"
             >
               Control the maximum number of notification alerts that appear at once.
             </span>
           </div>
         </div>
         <div
-          className="pf-c-number-input"
+          className="pf-v5-c-number-input"
         >
           <div
-            className="pf-c-input-group"
+            className="pf-v5-c-input-group"
           >
-            <button
-              aria-disabled={false}
-              aria-label="Minus"
-              className="pf-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[Function]}
-              role={null}
-              type="button"
+            <div
+              className="pf-v5-c-input-group__item"
             >
-              <span
-                className="pf-c-number-input__icon"
+              <button
+                aria-disabled={false}
+                aria-label="Minus"
+                className="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-1"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[Function]}
+                role={null}
+                type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 448 512"
-                  width="1em"
+                <span
+                  className="pf-v5-c-number-input__icon"
                 >
-                  <path
-                    d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                  />
-                </svg>
-              </span>
-            </button>
-            <input
-              aria-invalid={false}
-              aria-label="Input"
-              className="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe={true}
-              disabled={false}
-              name="alert count"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              required={false}
-              type="number"
-              value={5}
-            />
-            <button
-              aria-disabled={false}
-              aria-label="Plus"
-              className="pf-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-2"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
-              onClick={[Function]}
-              role={null}
-              type="button"
+                  <svg
+                    aria-hidden="true"
+                    aria-labelledby={null}
+                    className="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              className="pf-v5-c-input-group__item"
             >
               <span
-                className="pf-c-number-input__icon"
+                className="pf-v5-c-form-control"
               >
-                <svg
-                  aria-hidden="true"
-                  aria-labelledby={null}
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  style={
-                    Object {
-                      "verticalAlign": "-0.125em",
-                    }
-                  }
-                  viewBox="0 0 448 512"
-                  width="1em"
-                >
-                  <path
-                    d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                  />
-                </svg>
+                <input
+                  aria-invalid={false}
+                  aria-label="Input"
+                  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                  data-ouia-component-type="PF5/TextInput"
+                  data-ouia-safe={true}
+                  disabled={false}
+                  name="alert count"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  required={false}
+                  type="number"
+                  value={5}
+                />
               </span>
-            </button>
+            </div>
+            <div
+              className="pf-v5-c-input-group__item"
+            >
+              <button
+                aria-disabled={false}
+                aria-label="Plus"
+                className="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-2"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[Function]}
+                role={null}
+                type="button"
+              >
+                <span
+                  className="pf-v5-c-number-input__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-labelledby={null}
+                    className="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
-        
       </div>
     </div>
   </div>
   <div
-    className="pf-l-stack__item"
+    className="pf-v5-l-stack__item"
   >
     <div
-      className="pf-c-expandable-section"
+      className="pf-v5-c-expandable-section"
     >
       <button
+        aria-controls="expandable-section-content-1703449188245n40np1pty9"
         aria-expanded={false}
-        className="pf-c-expandable-section__toggle"
+        className="pf-v5-c-expandable-section__toggle"
+        id="expandable-section-toggle-17034491882452ey4r8eb99n"
         onClick={[Function]}
         type="button"
       >
         <span
-          className="pf-c-expandable-section__toggle-icon"
+          className="pf-v5-c-expandable-section__toggle-icon"
         >
           <svg
             aria-hidden={true}
             aria-labelledby={null}
+            className="pf-v5-svg"
             fill="currentColor"
             height="1em"
             role="img"
-            style={
-              Object {
-                "verticalAlign": "-0.125em",
-              }
-            }
             viewBox="0 0 256 512"
             width="1em"
           >
@@ -221,23 +224,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </svg>
         </span>
         <span
-          className="pf-c-expandable-section__toggle-text"
+          className="pf-v5-c-expandable-section__toggle-text"
         >
           Show more
         </span>
       </button>
       <div
-        className="pf-c-expandable-section__content"
+        aria-labelledby="expandable-section-toggle-17034491882452ey4r8eb99n"
+        className="pf-v5-c-expandable-section__content"
         hidden={true}
-        id=""
+        id="expandable-section-content-1703449188245n40np1pty9"
+        role="region"
       >
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-2"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="WsClientActivity"
           >
@@ -245,25 +250,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="WsClientActivity-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="WsClientActivity"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="WsClientActivity-on"
             >
               WebSocket Client Activity
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="WsClientActivity-off"
             >
               WebSocket Client Activity
@@ -271,12 +276,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-3"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="TargetJvmDiscovery"
           >
@@ -284,25 +289,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="TargetJvmDiscovery-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="TargetJvmDiscovery"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="TargetJvmDiscovery-on"
             >
               Target JVM Discovery
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="TargetJvmDiscovery-off"
             >
               Target JVM Discovery
@@ -310,12 +315,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-4"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ActiveRecordingCreated"
           >
@@ -323,25 +328,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ActiveRecordingCreated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ActiveRecordingCreated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ActiveRecordingCreated-on"
             >
               Recording Created
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ActiveRecordingCreated-off"
             >
               Recording Created
@@ -349,12 +354,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-5"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ActiveRecordingStopped"
           >
@@ -362,25 +367,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ActiveRecordingStopped-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ActiveRecordingStopped"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ActiveRecordingStopped-on"
             >
               Recording Stopped
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ActiveRecordingStopped-off"
             >
               Recording Stopped
@@ -388,12 +393,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-6"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ActiveRecordingSaved"
           >
@@ -401,25 +406,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ActiveRecordingSaved-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ActiveRecordingSaved"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ActiveRecordingSaved-on"
             >
               Recording Saved
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ActiveRecordingSaved-off"
             >
               Recording Saved
@@ -427,12 +432,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-7"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ActiveRecordingDeleted"
           >
@@ -440,25 +445,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ActiveRecordingDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ActiveRecordingDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ActiveRecordingDeleted-on"
             >
               Recording Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ActiveRecordingDeleted-off"
             >
               Recording Deleted
@@ -466,12 +471,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-8"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="SnapshotCreated"
           >
@@ -479,25 +484,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="SnapshotCreated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="SnapshotCreated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="SnapshotCreated-on"
             >
               Snapshot Created
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="SnapshotCreated-off"
             >
               Snapshot Created
@@ -505,12 +510,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-9"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="SnapshotDeleted"
           >
@@ -518,25 +523,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="SnapshotDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="SnapshotDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="SnapshotDeleted-on"
             >
               Snapshot Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="SnapshotDeleted-off"
             >
               Snapshot Deleted
@@ -544,12 +549,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-10"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ArchivedRecordingCreated"
           >
@@ -557,25 +562,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ArchivedRecordingCreated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ArchivedRecordingCreated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ArchivedRecordingCreated-on"
             >
               Archived Recording Uploaded
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ArchivedRecordingCreated-off"
             >
               Archived Recording Uploaded
@@ -583,12 +588,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-11"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ArchivedRecordingDeleted"
           >
@@ -596,25 +601,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ArchivedRecordingDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ArchivedRecordingDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ArchivedRecordingDeleted-on"
             >
               Archived Recording Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ArchivedRecordingDeleted-off"
             >
               Archived Recording Deleted
@@ -622,12 +627,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-12"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="TemplateUploaded"
           >
@@ -635,25 +640,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="TemplateUploaded-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="TemplateUploaded"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="TemplateUploaded-on"
             >
               Template Created
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="TemplateUploaded-off"
             >
               Template Created
@@ -661,12 +666,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-13"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="TemplateDeleted"
           >
@@ -674,25 +679,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="TemplateDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="TemplateDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="TemplateDeleted-on"
             >
               Template Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="TemplateDeleted-off"
             >
               Template Deleted
@@ -700,12 +705,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-14"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ProbeTemplateUploaded"
           >
@@ -713,25 +718,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ProbeTemplateUploaded-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ProbeTemplateUploaded"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ProbeTemplateUploaded-on"
             >
               Probe Template Created
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ProbeTemplateUploaded-off"
             >
               Probe Template Created
@@ -739,12 +744,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-15"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ProbeTemplateDeleted"
           >
@@ -752,25 +757,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ProbeTemplateDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ProbeTemplateDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ProbeTemplateDeleted-on"
             >
               Probe Template Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ProbeTemplateDeleted-off"
             >
               Probe Template Deleted
@@ -778,12 +783,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-16"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ProbeTemplateApplied"
           >
@@ -791,25 +796,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ProbeTemplateApplied-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ProbeTemplateApplied"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ProbeTemplateApplied-on"
             >
               Probe Template Applied
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ProbeTemplateApplied-off"
             >
               Probe Template Applied
@@ -817,12 +822,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-17"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="ProbesRemoved"
           >
@@ -830,25 +835,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="ProbesRemoved-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="ProbesRemoved"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="ProbesRemoved-on"
             >
               Probes Removed from Target
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="ProbesRemoved-off"
             >
               Probes Removed from Target
@@ -856,12 +861,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-18"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="RuleCreated"
           >
@@ -869,25 +874,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="RuleCreated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="RuleCreated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="RuleCreated-on"
             >
               Automated Rule Created
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="RuleCreated-off"
             >
               Automated Rule Created
@@ -895,12 +900,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-19"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="RuleUpdated"
           >
@@ -908,25 +913,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="RuleUpdated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="RuleUpdated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="RuleUpdated-on"
             >
               Automated Rule Updated
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="RuleUpdated-off"
             >
               Automated Rule Updated
@@ -934,12 +939,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-20"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="RuleDeleted"
           >
@@ -947,25 +952,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="RuleDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="RuleDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="RuleDeleted-on"
             >
               Automated Rule Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="RuleDeleted-off"
             >
               Automated Rule Deleted
@@ -973,12 +978,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-21"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="RecordingMetadataUpdated"
           >
@@ -986,25 +991,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="RecordingMetadataUpdated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="RecordingMetadataUpdated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="RecordingMetadataUpdated-on"
             >
               Recording Metadata Updated
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="RecordingMetadataUpdated-off"
             >
               Recording Metadata Updated
@@ -1012,12 +1017,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-22"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="GrafanaConfiguration"
           >
@@ -1025,25 +1030,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="GrafanaConfiguration-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="GrafanaConfiguration"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="GrafanaConfiguration-on"
             >
               Grafana Configuration
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="GrafanaConfiguration-off"
             >
               Grafana Configuration
@@ -1051,12 +1056,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-23"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="LayoutTemplateCreated"
           >
@@ -1064,25 +1069,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="LayoutTemplateCreated-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="LayoutTemplateCreated"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="LayoutTemplateCreated-on"
             >
               Layout Template Created
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="LayoutTemplateCreated-off"
             >
               Layout Template Created
@@ -1090,12 +1095,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-24"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="TargetCredentialsStored"
           >
@@ -1103,25 +1108,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="TargetCredentialsStored-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="TargetCredentialsStored"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="TargetCredentialsStored-on"
             >
               Target Credentials Stored
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="TargetCredentialsStored-off"
             >
               Target Credentials Stored
@@ -1129,12 +1134,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-25"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="TargetCredentialsDeleted"
           >
@@ -1142,25 +1147,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="TargetCredentialsDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="TargetCredentialsDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="TargetCredentialsDeleted-on"
             >
               Target Credentials Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="TargetCredentialsDeleted-off"
             >
               Target Credentials Deleted
@@ -1168,12 +1173,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-26"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="CredentialsStored"
           >
@@ -1181,25 +1186,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="CredentialsStored-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="CredentialsStored"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="CredentialsStored-on"
             >
               Credentials Stored
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="CredentialsStored-off"
             >
               Credentials Stored
@@ -1207,12 +1212,12 @@ exports[`<NotificationControl/> renders correctly 1`] = `
           </label>
         </div>
         <div
-          className="pf-l-stack__item"
+          className="pf-v5-l-stack__item"
         >
           <label
-            className="pf-c-switch"
+            className="pf-v5-c-switch"
             data-ouia-component-id="OUIA-Generated-Switch-27"
-            data-ouia-component-type="PF4/Switch"
+            data-ouia-component-type="PF5/Switch"
             data-ouia-safe={true}
             htmlFor="CredentialsDeleted"
           >
@@ -1220,25 +1225,25 @@ exports[`<NotificationControl/> renders correctly 1`] = `
               aria-label=""
               aria-labelledby="CredentialsDeleted-on"
               checked={true}
-              className="pf-c-switch__input"
+              className="pf-v5-c-switch__input"
               disabled={false}
               id="CredentialsDeleted"
               onChange={[Function]}
               type="checkbox"
             />
             <span
-              className="pf-c-switch__toggle"
+              className="pf-v5-c-switch__toggle"
             />
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-on"
+              className="pf-v5-c-switch__label pf-m-on"
               id="CredentialsDeleted-on"
             >
               Credentials Deleted
             </span>
             <span
               aria-hidden="true"
-              className="pf-c-switch__label pf-m-off"
+              className="pf-v5-c-switch__label pf-m-off"
               id="CredentialsDeleted-off"
             >
               Credentials Deleted
diff --git a/src/test/Settings/__snapshots__/Settings.test.tsx.snap b/src/test/Settings/__snapshots__/Settings.test.tsx.snap
index c5a644e795..0c64e01f8e 100644
--- a/src/test/Settings/__snapshots__/Settings.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/Settings.test.tsx.snap
@@ -2,26 +2,27 @@
 
 exports[`<Settings/> renders correctly 1`] = `
 <div
-  className="pf-c-page__main-group"
+  className="pf-v5-c-page__main-group"
 >
   <section
-    className="pf-c-page__main-section"
+    className="pf-v5-c-page__main-section"
   >
     <nav
       aria-label="Breadcrumb"
-      className="pf-c-breadcrumb"
+      className="pf-v5-c-breadcrumb"
       data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-      data-ouia-component-type="PF4/Breadcrumb"
+      data-ouia-component-type="PF5/Breadcrumb"
       data-ouia-safe={true}
     >
       <ol
-        className="pf-c-breadcrumb__list"
+        className="pf-v5-c-breadcrumb__list"
+        role="list"
       >
         <li
-          className="pf-c-breadcrumb__item"
+          className="pf-v5-c-breadcrumb__item"
         >
           <h1
-            className="pf-c-breadcrumb__heading"
+            className="pf-v5-c-breadcrumb__heading"
           >
             Settings
           </h1>
@@ -29,50 +30,50 @@ exports[`<Settings/> renders correctly 1`] = `
       </ol>
     </nav>
     <div
-      className="pf-l-stack pf-m-gutter"
+      className="pf-v5-l-stack pf-m-gutter"
     >
       <div
-        className="pf-l-stack__item pf-m-fill"
+        className="pf-v5-l-stack__item pf-m-fill"
       >
-        <article
-          className="pf-c-card pf-m-full-height"
+        <div
+          className="pf-v5-c-card pf-m-full-height"
           data-ouia-component-id="OUIA-Generated-Card-1"
-          data-ouia-component-type="PF4/Card"
+          data-ouia-component-type="PF5/Card"
           data-ouia-safe={true}
           id=""
         >
           <div
-            className="pf-c-sidebar"
+            className="pf-v5-c-sidebar"
             tabIndex={0}
           >
             <div
-              className="pf-c-sidebar__main"
+              className="pf-v5-c-sidebar__main"
             >
               <div
-                className="pf-c-sidebar__panel"
+                className="pf-v5-c-sidebar__panel"
               >
                 <div
                   aria-label="Select setting category"
-                  className="pf-c-tabs pf-m-vertical"
+                  className="pf-v5-c-tabs pf-m-vertical"
                   data-ouia-component-id="OUIA-Generated-Tabs-1"
-                  data-ouia-component-type="PF4/Tabs"
+                  data-ouia-component-type="PF5/Tabs"
                   data-ouia-safe={true}
                   onSelect={[Function]}
                 >
                   <ul
-                    className="pf-c-tabs__list"
+                    className="pf-v5-c-tabs__list"
                     onScroll={[Function]}
                     role="tablist"
                   >
                     <li
-                      className="pf-c-tabs__item pf-m-current"
+                      className="pf-v5-c-tabs__item pf-m-current"
                       role="presentation"
                     >
                       <button
                         aria-controls="pf-tab-section-SETTINGS.CATEGORIES.GENERAL--445403487"
                         aria-selected={true}
-                        className="pf-c-tabs__link"
-                        data-ouia-component-type="PF4/TabButton"
+                        className="pf-v5-c-tabs__link"
+                        data-ouia-component-type="PF5/TabButton"
                         data-ouia-safe={true}
                         data-quickstart-id="settings-general-tab"
                         id="pf-tab-SETTINGS.CATEGORIES.GENERAL--445403487"
@@ -81,21 +82,21 @@ exports[`<Settings/> renders correctly 1`] = `
                         type="button"
                       >
                         <span
-                          className="pf-c-tabs__item-text"
+                          className="pf-v5-c-tabs__item-text"
                         >
                           General
                         </span>
                       </button>
                     </li>
                     <li
-                      className="pf-c-tabs__item"
+                      className="pf-v5-c-tabs__item"
                       role="presentation"
                     >
                       <button
                         aria-controls="pf-tab-section-SETTINGS.CATEGORIES.CONNECTIVITY--1507428482"
                         aria-selected={false}
-                        className="pf-c-tabs__link"
-                        data-ouia-component-type="PF4/TabButton"
+                        className="pf-v5-c-tabs__link"
+                        data-ouia-component-type="PF5/TabButton"
                         data-ouia-safe={true}
                         data-quickstart-id="settings-connectivity-tab"
                         id="pf-tab-SETTINGS.CATEGORIES.CONNECTIVITY--1507428482"
@@ -104,21 +105,21 @@ exports[`<Settings/> renders correctly 1`] = `
                         type="button"
                       >
                         <span
-                          className="pf-c-tabs__item-text"
+                          className="pf-v5-c-tabs__item-text"
                         >
                           Connectivity
                         </span>
                       </button>
                     </li>
                     <li
-                      className="pf-c-tabs__item"
+                      className="pf-v5-c-tabs__item"
                       role="presentation"
                     >
                       <button
                         aria-controls="pf-tab-section-SETTINGS.CATEGORIES.NOTIFICATION_MESSAGE-719517530"
                         aria-selected={false}
-                        className="pf-c-tabs__link"
-                        data-ouia-component-type="PF4/TabButton"
+                        className="pf-v5-c-tabs__link"
+                        data-ouia-component-type="PF5/TabButton"
                         data-ouia-safe={true}
                         data-quickstart-id="settings-notifications&messages-tab"
                         id="pf-tab-SETTINGS.CATEGORIES.NOTIFICATION_MESSAGE-719517530"
@@ -127,21 +128,21 @@ exports[`<Settings/> renders correctly 1`] = `
                         type="button"
                       >
                         <span
-                          className="pf-c-tabs__item-text"
+                          className="pf-v5-c-tabs__item-text"
                         >
                           Notifications & Messages
                         </span>
                       </button>
                     </li>
                     <li
-                      className="pf-c-tabs__item"
+                      className="pf-v5-c-tabs__item"
                       role="presentation"
                     >
                       <button
                         aria-controls="pf-tab-section-SETTINGS.CATEGORIES.DASHBOARD-129171981"
                         aria-selected={false}
-                        className="pf-c-tabs__link"
-                        data-ouia-component-type="PF4/TabButton"
+                        className="pf-v5-c-tabs__link"
+                        data-ouia-component-type="PF5/TabButton"
                         data-ouia-safe={true}
                         data-quickstart-id="settings-dashboard-tab"
                         id="pf-tab-SETTINGS.CATEGORIES.DASHBOARD-129171981"
@@ -150,21 +151,21 @@ exports[`<Settings/> renders correctly 1`] = `
                         type="button"
                       >
                         <span
-                          className="pf-c-tabs__item-text"
+                          className="pf-v5-c-tabs__item-text"
                         >
                           Dashboard
                         </span>
                       </button>
                     </li>
                     <li
-                      className="pf-c-tabs__item"
+                      className="pf-v5-c-tabs__item"
                       role="presentation"
                     >
                       <button
                         aria-controls="pf-tab-section-SETTINGS.CATEGORIES.ADVANCED-843151721"
                         aria-selected={false}
-                        className="pf-c-tabs__link"
-                        data-ouia-component-type="PF4/TabButton"
+                        className="pf-v5-c-tabs__link"
+                        data-ouia-component-type="PF5/TabButton"
                         data-ouia-safe={true}
                         data-quickstart-id="settings-advanced-tab"
                         id="pf-tab-SETTINGS.CATEGORIES.ADVANCED-843151721"
@@ -173,7 +174,7 @@ exports[`<Settings/> renders correctly 1`] = `
                         type="button"
                       >
                         <span
-                          className="pf-c-tabs__item-text"
+                          className="pf-v5-c-tabs__item-text"
                         >
                           Advanced
                         </span>
@@ -183,28 +184,28 @@ exports[`<Settings/> renders correctly 1`] = `
                 </div>
               </div>
               <div
-                className="pf-c-sidebar__content"
+                className="pf-v5-c-sidebar__content"
               >
                 <form
-                  className="pf-c-form settings__content"
+                  className="pf-v5-c-form settings__content"
                   noValidate={true}
                 >
                   <div
-                    className="pf-c-form__group"
+                    className="pf-v5-c-form__group"
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-v5-c-form__group-label"
                     >
                       <label
-                        className="pf-c-form__label"
+                        className="pf-v5-c-form__label"
                       >
                         <span
-                          className="pf-c-form__label-text"
+                          className="pf-v5-c-form__label-text"
                         >
                           <h2
-                            className="pf-c-title pf-m-lg"
+                            className="pf-v5-c-title pf-m-lg"
                             data-ouia-component-id="OUIA-Generated-Title-1"
-                            data-ouia-component-type="PF4/Title"
+                            data-ouia-component-type="PF5/Title"
                             data-ouia-safe={true}
                           >
                             Date & Time
@@ -214,25 +215,29 @@ exports[`<Settings/> renders correctly 1`] = `
                        
                     </div>
                     <div
-                      className="pf-c-form__group-control"
+                      className="pf-v5-c-form__group-control"
                     >
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-v5-c-form__helper-text"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-v5-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-v5-c-helper-text__item"
                           >
-                            
-                          </span>
+                            <span
+                              className="pf-v5-c-helper-text__item-text"
+                            >
+                              
+                            </span>
+                          </div>
                         </div>
                       </div>
                       <p
                         className=""
                         data-ouia-component-id="OUIA-Generated-Text-1"
-                        data-ouia-component-type="PF4/Text"
+                        data-ouia-component-type="PF5/Text"
                         data-ouia-safe={true}
                         data-pf-content={true}
                       >
@@ -241,21 +246,21 @@ exports[`<Settings/> renders correctly 1`] = `
                     </div>
                   </div>
                   <div
-                    className="pf-c-form__group"
+                    className="pf-v5-c-form__group"
                   >
                     <div
-                      className="pf-c-form__group-label"
+                      className="pf-v5-c-form__group-label"
                     >
                       <label
-                        className="pf-c-form__label"
+                        className="pf-v5-c-form__label"
                       >
                         <span
-                          className="pf-c-form__label-text"
+                          className="pf-v5-c-form__label-text"
                         >
                           <h2
-                            className="pf-c-title pf-m-lg"
+                            className="pf-v5-c-title pf-m-lg"
                             data-ouia-component-id="OUIA-Generated-Title-2"
-                            data-ouia-component-type="PF4/Title"
+                            data-ouia-component-type="PF5/Title"
                             data-ouia-safe={true}
                           >
                             Theme
@@ -265,25 +270,29 @@ exports[`<Settings/> renders correctly 1`] = `
                        
                     </div>
                     <div
-                      className="pf-c-form__group-control"
+                      className="pf-v5-c-form__group-control"
                     >
                       <div
-                        className="pf-c-helper-text"
+                        className="pf-v5-c-form__helper-text"
                       >
                         <div
-                          className="pf-c-helper-text__item"
+                          className="pf-v5-c-helper-text"
                         >
-                          <span
-                            className="pf-c-helper-text__item-text"
+                          <div
+                            className="pf-v5-c-helper-text__item"
                           >
-                            Set the current theme for web console.
-                          </span>
+                            <span
+                              className="pf-v5-c-helper-text__item-text"
+                            >
+                              Set the current theme for web console.
+                            </span>
+                          </div>
                         </div>
                       </div>
                       <p
                         className=""
                         data-ouia-component-id="OUIA-Generated-Text-2"
-                        data-ouia-component-type="PF4/Text"
+                        data-ouia-component-type="PF5/Text"
                         data-ouia-safe={true}
                         data-pf-content={true}
                       >
@@ -295,10 +304,10 @@ exports[`<Settings/> renders correctly 1`] = `
               </div>
             </div>
           </div>
-        </article>
+        </div>
       </div>
       <div
-        className="pf-l-stack__item"
+        className="pf-v5-l-stack__item"
       />
     </div>
   </section>
diff --git a/src/test/Settings/__snapshots__/WebSocketDebounce.test.tsx.snap b/src/test/Settings/__snapshots__/WebSocketDebounce.test.tsx.snap
index e73064184f..0e893c54b5 100644
--- a/src/test/Settings/__snapshots__/WebSocketDebounce.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/WebSocketDebounce.test.tsx.snap
@@ -2,100 +2,107 @@
 
 exports[`<WebSocketDebounce/> renders correctly 1`] = `
 <div
-  className="pf-c-number-input"
+  className="pf-v5-c-number-input"
 >
   <div
-    className="pf-c-input-group"
+    className="pf-v5-c-input-group"
   >
-    <button
-      aria-disabled={false}
-      aria-label="Minus"
-      className="pf-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-1"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe={true}
-      disabled={false}
-      onClick={[Function]}
-      role={null}
-      type="button"
+    <div
+      className="pf-v5-c-input-group__item"
     >
-      <span
-        className="pf-c-number-input__icon"
+      <button
+        aria-disabled={false}
+        aria-label="Minus"
+        className="pf-v5-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-1"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe={true}
+        disabled={false}
+        onClick={[Function]}
+        role={null}
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          className="pf-v5-c-number-input__icon"
         >
-          <path
-            d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
-        </svg>
-      </span>
-    </button>
-    <input
-      aria-invalid={false}
-      aria-label="Input"
-      className="pf-c-form-control"
-      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-      data-ouia-component-type="PF4/TextInput"
-      data-ouia-safe={true}
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      required={false}
-      type="number"
-      value={100}
-    />
-    <button
-      aria-disabled={false}
-      aria-label="Plus"
-      className="pf-c-button pf-m-control"
-      data-ouia-component-id="OUIA-Generated-Button-control-2"
-      data-ouia-component-type="PF4/Button"
-      data-ouia-safe={true}
-      disabled={false}
-      onClick={[Function]}
-      role={null}
-      type="button"
+          <svg
+            aria-hidden="true"
+            aria-labelledby={null}
+            className="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <div
+      className="pf-v5-c-input-group__item"
     >
       <span
-        className="pf-c-number-input__icon"
+        className="pf-v5-c-form-control"
       >
-        <svg
-          aria-hidden="true"
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 448 512"
-          width="1em"
-        >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
-        </svg>
+        <input
+          aria-invalid={false}
+          aria-label="Input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe={true}
+          disabled={false}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          required={false}
+          type="number"
+          value={100}
+        />
       </span>
-    </button>
+    </div>
+    <div
+      className="pf-v5-c-input-group__item"
+    >
+      <button
+        aria-disabled={false}
+        aria-label="Plus"
+        className="pf-v5-c-button pf-m-control"
+        data-ouia-component-id="OUIA-Generated-Button-control-2"
+        data-ouia-component-type="PF5/Button"
+        data-ouia-safe={true}
+        disabled={false}
+        onClick={[Function]}
+        role={null}
+        type="button"
+      >
+        <span
+          className="pf-v5-c-number-input__icon"
+        >
+          <svg
+            aria-hidden="true"
+            aria-labelledby={null}
+            className="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </div>
   <div
-    className="pf-c-number-input__unit"
+    className="pf-v5-c-number-input__unit"
   >
     ms
   </div>
diff --git a/src/test/Shared/Components/__snapshots__/LoadingView.test.tsx.snap b/src/test/Shared/Components/__snapshots__/LoadingView.test.tsx.snap
index 657c1c4d3b..b3e5288517 100644
--- a/src/test/Shared/Components/__snapshots__/LoadingView.test.tsx.snap
+++ b/src/test/Shared/Components/__snapshots__/LoadingView.test.tsx.snap
@@ -2,42 +2,47 @@
 
 exports[`<LoadingView /> renders correctly 1`] = `
 <div
-  className="pf-l-bullseye"
+  className="pf-v5-l-bullseye"
 >
   <div
-    className="pf-c-empty-state"
+    className="pf-v5-c-empty-state"
   >
     <div
-      className="pf-c-empty-state__content"
+      className="pf-v5-c-empty-state__content"
     >
       <div
-        className="pf-c-empty-state__icon"
+        className="pf-v5-c-empty-state__header"
       >
-        <span
-          aria-label="Contents"
-          aria-valuetext="Loading..."
-          className="pf-c-spinner pf-m-xl"
-          role="progressbar"
+        <div
+          className="pf-v5-c-empty-state__icon"
         >
-          <span
-            className="pf-c-spinner__clipper"
-          />
-          <span
-            className="pf-c-spinner__lead-ball"
-          />
-          <span
-            className="pf-c-spinner__tail-ball"
-          />
-        </span>
+          <svg
+            aria-hidden={false}
+            aria-label="Contents"
+            aria-valuetext="Loading..."
+            className="pf-v5-c-spinner pf-m-xl"
+            role="progressbar"
+            viewBox="0 0 100 100"
+          >
+            <circle
+              className="pf-v5-c-spinner__path"
+              cx="50"
+              cy="50"
+              fill="none"
+              r="45"
+            />
+          </svg>
+        </div>
+        <div
+          className="pf-v5-c-empty-state__title"
+        >
+          <h2
+            className="pf-v5-c-empty-state__title-text"
+          >
+            Loading
+          </h2>
+        </div>
       </div>
-      <h2
-        className="pf-c-title pf-m-lg"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe={true}
-      >
-        Loading
-      </h2>
     </div>
   </div>
 </div>