diff --git a/js/CODING_GUIDELINES.md b/js/CODING_GUIDELINES.md
index 7196ee6317..fbe3def221 100644
--- a/js/CODING_GUIDELINES.md
+++ b/js/CODING_GUIDELINES.md
@@ -141,28 +141,28 @@ For the Admin UI, we modify the PatternFly convention to namespace the classes a
 **Example of a CSS custom property**
 ```css
 // Modify the height of the brand image
---keycloak-admin--brand--Height: var(--pf-global--spacer--xl); 
+--keycloak-admin--brand--Height: var(--pf-v5-global--spacer--xl); 
 ```
 
 **Example**
 ```css
 // Don’t increase specificity
 // Don’t use pixel values
-.keycloak-admin--manage-columns__modal .pf-c-dropdown {
+.keycloak-admin--manage-columns__modal .pf-v5-c-dropdown {
    margin-bottom: 24px
 }
 
 // Do use a new class
 // Do use a PatternFly global spacer variable
 .keycloak-admin--manage-columns__dropdown {
-   margin-bottom: var(--pf-global--spacer--xl);
+   margin-bottom: var(--pf-v5-global--spacer--xl);
 }
 ```
 ### Using utility classes
 
 Utility classes can be used to add specific styling to a component, such as margin-bottom or padding. However, their use should be limited to one-off styling needs.  
 
-For example, instead of using the utility class for margin-right multiple times, we should define a new Admin UI class that adds this *margin-right: var(--pf-global--spacer--sm);* and in this example, the new class can set the color appropriately as well.
+For example, instead of using the utility class for margin-right multiple times, we should define a new Admin UI class that adds this *margin-right: var(--pf-v5-global--spacer--sm);* and in this example, the new class can set the color appropriately as well.
 
 **Using a utility class **
 ```css
@@ -171,8 +171,8 @@ switch (titleStatus) {
      return (
        <>
          <InfoCircleIcon
-           className="pf-u-mr-sm" // utility class 
-           color="var(--pf-global--info-color--100)"
+           className="pf-v5-u-mr-sm" // utility class 
+           color="var(--pf-v5-global--info-color--100)"
          />{" "}
          {titleText}{" "}
        </>
@@ -181,8 +181,8 @@ switch (titleStatus) {
      return (
        <>
          <InfoCircleIcon
-           className="pf-u-mr-sm"
-           color="var(--pf-global--danger-color--100)"
+           className="pf-v5-u-mr-sm"
+           color="var(--pf-v5-global--danger-color--100)"
          />{" "}
          {titleText}{" "}
        </>
diff --git a/js/apps/account-ui/package.json b/js/apps/account-ui/package.json
index e1763f4fa2..25f03839e9 100644
--- a/js/apps/account-ui/package.json
+++ b/js/apps/account-ui/package.json
@@ -17,10 +17,10 @@
     "test": "wireit"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^4.224.5",
-    "@patternfly/react-core": "^4.278.0",
-    "@patternfly/react-icons": "^4.93.7",
-    "@patternfly/react-table": "^4.113.6",
+    "@patternfly/patternfly": "^5.2.1",
+    "@patternfly/react-core": "^5.2.3",
+    "@patternfly/react-icons": "^5.2.1",
+    "@patternfly/react-table": "^5.2.4",
     "i18next": "^23.10.1",
     "i18next-http-backend": "^2.5.0",
     "keycloak-js": "workspace:*",
diff --git a/js/apps/account-ui/src/account-security/AccountRow.tsx b/js/apps/account-ui/src/account-security/AccountRow.tsx
index aa2bd1b56e..b8d7c67889 100644
--- a/js/apps/account-ui/src/account-security/AccountRow.tsx
+++ b/js/apps/account-ui/src/account-security/AccountRow.tsx
@@ -5,6 +5,7 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  Icon,
   Label,
   Split,
   SplitItem,
@@ -12,6 +13,7 @@ import {
 import { LinkIcon, UnlinkIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
 import { IconMapper, useAlerts } from "ui-shared";
+
 import { linkAccount, unLinkAccount } from "../api/methods";
 import { LinkedAccountRepresentation } from "../api/representations";
 import { useEnvironment } from "../root/KeycloakContext";
@@ -64,10 +66,10 @@ export const AccountRow = ({
           dataListCells={[
             <DataListCell key="idp">
               <Split>
-                <SplitItem className="pf-u-mr-sm">
+                <SplitItem className="pf-v5-u-mr-sm">
                   <IconMapper icon={account.providerName} />
                 </SplitItem>
-                <SplitItem className="pf-u-my-xs" isFilled>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
                   <span id={`${account.providerAlias}-idp-name`}>
                     {account.displayName}
                   </span>
@@ -76,7 +78,7 @@ export const AccountRow = ({
             </DataListCell>,
             <DataListCell key="label">
               <Split>
-                <SplitItem className="pf-u-my-xs" isFilled>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
                   <span id={`${account.providerAlias}-idp-label`}>
                     <Label color={account.social ? "blue" : "green"}>
                       {t(account.social ? "socialLogin" : "systemDefined")}
@@ -87,7 +89,7 @@ export const AccountRow = ({
             </DataListCell>,
             <DataListCell key="username" width={5}>
               <Split>
-                <SplitItem className="pf-u-my-xs" isFilled>
+                <SplitItem className="pf-v5-u-my-xs" isFilled>
                   <span id={`${account.providerAlias}-idp-username`}>
                     {account.linkedUsername}
                   </span>
@@ -107,7 +109,10 @@ export const AccountRow = ({
               variant="link"
               onClick={() => unLink(account)}
             >
-              <UnlinkIcon size="sm" /> {t("unLink")}
+              <Icon size="sm">
+                <UnlinkIcon />
+              </Icon>{" "}
+              {t("unLink")}
             </Button>
           )}
           {!isLinked && (
@@ -116,7 +121,10 @@ export const AccountRow = ({
               variant="link"
               onClick={() => link(account)}
             >
-              <LinkIcon size="sm" /> {t("link")}
+              <Icon size="sm">
+                <LinkIcon />
+              </Icon>{" "}
+              {t("link")}
             </Button>
           )}
         </DataListAction>
diff --git a/js/apps/account-ui/src/account-security/DeviceActivity.tsx b/js/apps/account-ui/src/account-security/DeviceActivity.tsx
index fa333a3c5b..70795611dc 100644
--- a/js/apps/account-ui/src/account-security/DeviceActivity.tsx
+++ b/js/apps/account-ui/src/account-security/DeviceActivity.tsx
@@ -110,7 +110,7 @@ export const DeviceActivity = () => {
       title={t("deviceActivity")}
       description={t("signedInDevicesExplanation")}
     >
-      <Split hasGutter className="pf-u-mb-lg">
+      <Split hasGutter className="pf-v5-u-mb-lg">
         <SplitItem isFilled>
           <Title headingLevel="h2" size="xl">
             {t("signedInDevices")}
@@ -149,14 +149,14 @@ export const DeviceActivity = () => {
               <DataListItemRow key={device.id} data-testid={`row-${index}`}>
                 <DataListContent
                   aria-label="device-sessions-content"
-                  className="pf-u-flex-grow-1"
+                  className="pf-v5-u-flex-grow-1"
                 >
                   <Grid hasGutter>
                     <GridItem span={1} rowSpan={2}>
                       {device.mobile ? <MobileAltIcon /> : <DesktopIcon />}
                     </GridItem>
                     <GridItem sm={8} md={9} span={10}>
-                      <span className="pf-u-mr-md session-title">
+                      <span className="pf-v5-u-mr-md session-title">
                         {device.os.toLowerCase().includes("unknown")
                           ? t("unknownOperatingSystem")
                           : device.os}{" "}
@@ -169,7 +169,7 @@ export const DeviceActivity = () => {
                       )}
                     </GridItem>
                     <GridItem
-                      className="pf-u-text-align-right"
+                      className="pf-v5-u-text-align-right"
                       sm={3}
                       md={2}
                       span={1}
diff --git a/js/apps/account-ui/src/account-security/LinkedAccounts.tsx b/js/apps/account-ui/src/account-security/LinkedAccounts.tsx
index bae3068d69..b526f8f4f6 100644
--- a/js/apps/account-ui/src/account-security/LinkedAccounts.tsx
+++ b/js/apps/account-ui/src/account-security/LinkedAccounts.tsx
@@ -38,7 +38,7 @@ export const LinkedAccounts = () => {
     >
       <Stack hasGutter>
         <StackItem>
-          <Title headingLevel="h2" className="pf-u-mb-lg" size="xl">
+          <Title headingLevel="h2" className="pf-v5-u-mb-lg" size="xl">
             {t("linkedLoginProviders")}
           </Title>
           <DataList id="linked-idps" aria-label={t("linkedLoginProviders")}>
@@ -57,7 +57,11 @@ export const LinkedAccounts = () => {
           </DataList>
         </StackItem>
         <StackItem>
-          <Title headingLevel="h2" className="pf-u-mt-xl pf-u-mb-lg" size="xl">
+          <Title
+            headingLevel="h2"
+            className="pf-v5-u-mt-xl pf-v5-u-mb-lg"
+            size="xl"
+          >
             {t("unlinkedLoginProviders")}
           </Title>
           <DataList id="unlinked-idps" aria-label={t("unlinkedLoginProviders")}>
diff --git a/js/apps/account-ui/src/account-security/SigningIn.tsx b/js/apps/account-ui/src/account-security/SigningIn.tsx
index b49e75ddec..81a9ceba30 100644
--- a/js/apps/account-ui/src/account-security/SigningIn.tsx
+++ b/js/apps/account-ui/src/account-security/SigningIn.tsx
@@ -6,15 +6,17 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   PageSection,
   Spinner,
   Split,
   SplitItem,
   Title,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from "@patternfly/react-core/deprecated";
 import { CSSProperties, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { ContinueCancelModal, useAlerts } from "ui-shared";
@@ -44,8 +46,8 @@ const MobileLink = ({ title, onClick, testid }: MobileLinkProps) => {
       <Dropdown
         isPlain
         position="right"
-        toggle={<KebabToggle onToggle={setOpen} />}
-        className="pf-u-display-none-on-lg"
+        toggle={<KebabToggle onToggle={(_event, val) => setOpen(val)} />}
+        className="pf-v5-u-display-none-on-lg"
         isOpen={open}
         dropdownItems={[
           <DropdownItem key="1" onClick={onClick}>
@@ -56,7 +58,7 @@ const MobileLink = ({ title, onClick, testid }: MobileLinkProps) => {
       <Button
         variant="link"
         onClick={onClick}
-        className="pf-u-display-none pf-u-display-inline-flex-on-lg"
+        className="pf-v5-u-display-none pf-v5-u-display-inline-flex-on-lg"
         data-testid={testid}
       >
         {title}
@@ -83,12 +85,14 @@ export const SigningIn = () => {
     credMetadata: CredentialMetadataRepresentation,
   ) => {
     const credential = credMetadata.credential;
-    const maxWidth = { "--pf-u-max-width--MaxWidth": "300px" } as CSSProperties;
+    const maxWidth = {
+      "--pf-v5-u-max-width--MaxWidth": "300px",
+    } as CSSProperties;
     const items = [
       <DataListCell
         key="title"
         data-testrole="label"
-        className="pf-u-max-width"
+        className="pf-v5-u-max-width"
         style={maxWidth}
       >
         {credential.userLabel || t(credential.type as TFuncKey)}
@@ -102,7 +106,7 @@ export const SigningIn = () => {
           data-testrole="created-at"
         >
           <Trans i18nKey="credentialCreatedAt">
-            <strong className="pf-u-mr-md"></strong>
+            <strong className="pf-v5-u-mr-md"></strong>
             {{ date: formatDate(new Date(credential.createdDate)) }}
           </Trans>
         </DataListCell>,
@@ -125,7 +129,7 @@ export const SigningIn = () => {
   return (
     <Page title={t("signingIn")} description={t("signingInDescription")}>
       {credentialUniqueCategories.map((category) => (
-        <PageSection key={category} variant="light" className="pf-u-px-0">
+        <PageSection key={category} variant="light" className="pf-v5-u-px-0">
           <Title headingLevel="h2" size="xl" id={`${category}-categ-title`}>
             {t(category as TFuncKey)}
           </Title>
@@ -133,16 +137,16 @@ export const SigningIn = () => {
             .filter((cred) => cred.category == category)
             .map((container) => (
               <>
-                <Split className="pf-u-mt-lg pf-u-mb-lg">
+                <Split className="pf-v5-u-mt-lg pf-v5-u-mb-lg">
                   <SplitItem>
                     <Title
                       headingLevel="h3"
                       size="md"
-                      className="pf-u-mb-md"
+                      className="pf-v5-u-mb-md"
                       data-testid={`${container.type}/help`}
                     >
                       <span
-                        className="cred-title pf-u-display-block"
+                        className="cred-title pf-v5-u-display-block"
                         data-testid={`${container.type}/title`}
                       >
                         {t(container.displayName as TFuncKey)}
@@ -154,7 +158,7 @@ export const SigningIn = () => {
                   </SplitItem>
                   {container.createAction && (
                     <SplitItem isFilled>
-                      <div className="pf-u-float-right">
+                      <div className="pf-v5-u-float-right">
                         <MobileLink
                           onClick={() =>
                             login({
@@ -175,7 +179,7 @@ export const SigningIn = () => {
 
                 <DataList
                   aria-label="credential list"
-                  className="pf-u-mb-xl"
+                  className="pf-v5-u-mb-xl"
                   data-testid={`${container.type}/credential-list`}
                 >
                   {container.userCredentialMetadatas.length === 0 && (
@@ -191,7 +195,7 @@ export const SigningIn = () => {
                     <DataListItem key={meta.credential.id}>
                       <DataListItemRow id={`cred-${meta.credential.id}`}>
                         <DataListItemCells
-                          className="pf-u-py-0"
+                          className="pf-v5-u-py-0"
                           dataListCells={[
                             ...credentialRowCells(meta),
                             <DataListAction
diff --git a/js/apps/account-ui/src/applications/Applications.tsx b/js/apps/account-ui/src/applications/Applications.tsx
index a6e15b1ea8..fc464b0a15 100644
--- a/js/apps/account-ui/src/applications/Applications.tsx
+++ b/js/apps/account-ui/src/applications/Applications.tsx
@@ -91,21 +91,21 @@ export const Applications = () => {
                 <DataListCell
                   key="applications-list-client-id-header"
                   width={2}
-                  className="pf-u-pt-md"
+                  className="pf-v5-u-pt-md"
                 >
                   <strong>{t("name")}</strong>
                 </DataListCell>,
                 <DataListCell
                   key="applications-list-app-type-header"
                   width={2}
-                  className="pf-u-pt-md"
+                  className="pf-v5-u-pt-md"
                 >
                   <strong>{t("applicationType")}</strong>
                 </DataListCell>,
                 <DataListCell
                   key="applications-list-status"
                   width={2}
-                  className="pf-u-pt-md"
+                  className="pf-v5-u-pt-md"
                 >
                   <strong>{t("status")}</strong>
                 </DataListCell>,
@@ -120,7 +120,7 @@ export const Applications = () => {
             data-testid="applications-list-item"
             isExpanded={application.open}
           >
-            <DataListItemRow className="pf-u-align-items-center">
+            <DataListItemRow className="pf-v5-u-align-items-center">
               <DataListToggle
                 onClick={() => toggleOpen(application.clientId)}
                 isExpanded={application.open}
@@ -128,12 +128,12 @@ export const Applications = () => {
                 aria-controls={`content-${application.clientId}`}
               />
               <DataListItemCells
-                className="pf-u-align-items-center"
+                className="pf-v5-u-align-items-center"
                 dataListCells={[
                   <DataListCell width={2} key={`client${application.clientId}`}>
                     {application.effectiveUrl && (
                       <Button
-                        className="pf-u-pl-0 title-case"
+                        className="pf-v5-u-pl-0 title-case"
                         component="a"
                         variant="link"
                         onClick={() => window.open(application.effectiveUrl)}
@@ -166,7 +166,7 @@ export const Applications = () => {
 
             <DataListContent
               id={`content-${application.clientId}`}
-              className="pf-u-pl-4xl"
+              className="pf-v5-u-pl-4xl"
               aria-label={t("applicationDetails", {
                 clientId: application.clientId,
               })}
diff --git a/js/apps/account-ui/src/components/datalist/EmptyRow.tsx b/js/apps/account-ui/src/components/datalist/EmptyRow.tsx
index 550767ae96..f91ad50bea 100644
--- a/js/apps/account-ui/src/components/datalist/EmptyRow.tsx
+++ b/js/apps/account-ui/src/components/datalist/EmptyRow.tsx
@@ -11,7 +11,7 @@ type EmptyRowProps = {
 
 export const EmptyRow = ({ message, ...props }: EmptyRowProps) => {
   return (
-    <DataListItem className="pf-u-align-items-center pf-p-b-0">
+    <DataListItem className="pf-v5-u-align-items-center pf-p-b-0">
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
diff --git a/js/apps/account-ui/src/groups/Groups.tsx b/js/apps/account-ui/src/groups/Groups.tsx
index 30d809ffba..959634d590 100644
--- a/js/apps/account-ui/src/groups/Groups.tsx
+++ b/js/apps/account-ui/src/groups/Groups.tsx
@@ -68,7 +68,7 @@ export const Groups = () => {
                     id="directMembership-checkbox"
                     data-testid="directMembership-checkbox"
                     isChecked={directMembership}
-                    onChange={(checked) => setDirectMembership(checked)}
+                    onChange={(_event, checked) => setDirectMembership(checked)}
                   />
                 </DataListCell>,
               ]}
diff --git a/js/apps/account-ui/src/resources/PermissionRequest.tsx b/js/apps/account-ui/src/resources/PermissionRequest.tsx
index 4ac319fe05..02b9d63786 100644
--- a/js/apps/account-ui/src/resources/PermissionRequest.tsx
+++ b/js/apps/account-ui/src/resources/PermissionRequest.tsx
@@ -2,23 +2,17 @@ import {
   Badge,
   Button,
   Chip,
+  Icon,
   Modal,
   ModalVariant,
   Text,
 } from "@patternfly/react-core";
 import { UserCheckIcon } from "@patternfly/react-icons";
-
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAlerts } from "ui-shared";
+
 import { fetchPermission, updateRequest } from "../api";
 import { Permission, Resource } from "../api/representations";
 import { useEnvironment } from "../root/KeycloakContext";
@@ -69,7 +63,9 @@ export const PermissionRequest = ({
   return (
     <>
       <Button variant="link" onClick={toggle}>
-        <UserCheckIcon size="lg" />
+        <Icon size="lg">
+          <UserCheckIcon />
+        </Icon>
         <Badge>{resource.shareRequests?.length}</Badge>
       </Button>
       <Modal
@@ -83,7 +79,7 @@ export const PermissionRequest = ({
           </Button>,
         ]}
       >
-        <TableComposable aria-label={t("resources")}>
+        <Table aria-label={t("resources")}>
           <Thead>
             <Tr>
               <Th>{t("requestor")}</Th>
@@ -119,7 +115,7 @@ export const PermissionRequest = ({
                     onClick={() => {
                       approveDeny(shareRequest);
                     }}
-                    className="pf-u-ml-sm"
+                    className="pf-v5-u-ml-sm"
                     variant="danger"
                   >
                     {t("deny")}
@@ -128,7 +124,7 @@ export const PermissionRequest = ({
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </Modal>
     </>
   );
diff --git a/js/apps/account-ui/src/resources/ResourceToolbar.tsx b/js/apps/account-ui/src/resources/ResourceToolbar.tsx
index 4b213aa326..e0004f41be 100644
--- a/js/apps/account-ui/src/resources/ResourceToolbar.tsx
+++ b/js/apps/account-ui/src/resources/ResourceToolbar.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import {
   Pagination,
   SearchInput,
-  ToggleTemplateProps,
+  PaginationToggleTemplateProps,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -68,7 +68,7 @@ export const ResourceToolbar = ({
             toggleTemplate={({
               firstIndex,
               lastIndex,
-            }: ToggleTemplateProps) => (
+            }: PaginationToggleTemplateProps) => (
               <b>
                 {firstIndex} - {lastIndex}
               </b>
diff --git a/js/apps/account-ui/src/resources/ResourcesTab.tsx b/js/apps/account-ui/src/resources/ResourcesTab.tsx
index f0251586f9..9ffe1f5898 100644
--- a/js/apps/account-ui/src/resources/ResourcesTab.tsx
+++ b/js/apps/account-ui/src/resources/ResourcesTab.tsx
@@ -2,9 +2,6 @@ import {
   Button,
   Chip,
   ChipGroup,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
@@ -13,6 +10,11 @@ import {
   OverflowMenuItem,
   Spinner,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from "@patternfly/react-core/deprecated";
 import {
   EditAltIcon,
   ExternalLinkAltIcon,
@@ -21,7 +23,7 @@ import {
 } from "@patternfly/react-icons";
 import {
   ExpandableRowContent,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -155,7 +157,7 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
         }
         hasNext={!!links?.next}
       />
-      <TableComposable aria-label={t("resources")}>
+      <Table aria-label={t("resources")}>
         <Thead>
           <Tr>
             <Th aria-hidden="true" />
@@ -256,7 +258,7 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                             position="right"
                             toggle={
                               <KebabToggle
-                                onToggle={(open) =>
+                                onToggle={(_event, open) =>
                                   toggleOpen(resource._id, "contextOpen", open)
                                 }
                               />
@@ -309,7 +311,7 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
                         position="right"
                         toggle={
                           <KebabToggle
-                            onToggle={(open) =>
+                            onToggle={(_event, open) =>
                               toggleOpen(resource._id, "contextOpen", open)
                             }
                           />
@@ -371,7 +373,7 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
             </Tr>
           </Tbody>
         ))}
-      </TableComposable>
+      </Table>
     </>
   );
 };
diff --git a/js/apps/account-ui/src/resources/ShareTheResource.tsx b/js/apps/account-ui/src/resources/ShareTheResource.tsx
index 6cd67a963c..f79bb4d577 100644
--- a/js/apps/account-ui/src/resources/ShareTheResource.tsx
+++ b/js/apps/account-ui/src/resources/ShareTheResource.tsx
@@ -5,7 +5,9 @@ import {
   Form,
   FormGroup,
   InputGroup,
+  InputGroupItem,
   Modal,
+  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useEffect } from "react";
@@ -16,8 +18,8 @@ import {
   useWatch,
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { FormErrorText, SelectControl, useAlerts } from "ui-shared";
 
-import { KeycloakTextInput, SelectControl, useAlerts } from "ui-shared";
 import { updateRequest } from "../api";
 import { Permission, Resource } from "../api/representations";
 import { useEnvironment } from "../root/KeycloakContext";
@@ -139,36 +141,36 @@ export const ShareTheResource = ({
         <FormGroup
           label={t("shareUser")}
           type="string"
-          helperTextInvalid={errors.usernames?.message}
           fieldId="users"
           isRequired
-          validated={
-            errors.usernames ? ValidatedOptions.error : ValidatedOptions.default
-          }
         >
           <InputGroup>
-            <KeycloakTextInput
-              id="users"
-              data-testid="users"
-              placeholder={t("usernamePlaceholder")}
-              validated={
-                errors.usernames
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-              {...register(`usernames.${fields.length - 1}.value`, {
-                validate: validateUser,
-              })}
-            />
-            <Button
-              key="add-user"
-              variant="primary"
-              data-testid="add"
-              onClick={() => append({ value: "" })}
-              isDisabled={isDisabled}
-            >
-              {t("add")}
-            </Button>
+            <InputGroupItem>
+              <TextInput
+                id="users"
+                data-testid="users"
+                placeholder={t("usernamePlaceholder")}
+                validated={
+                  errors.usernames
+                    ? ValidatedOptions.error
+                    : ValidatedOptions.default
+                }
+                {...register(`usernames.${fields.length - 1}.value`, {
+                  validate: validateUser,
+                })}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                key="add-user"
+                variant="primary"
+                data-testid="add"
+                onClick={() => append({ value: "" })}
+                isDisabled={isDisabled}
+              >
+                {t("add")}
+              </Button>
+            </InputGroupItem>
           </InputGroup>
           {fields.length > 1 && (
             <ChipGroup categoryName={t("shareWith")}>
@@ -182,6 +184,9 @@ export const ShareTheResource = ({
               )}
             </ChipGroup>
           )}
+          {errors.usernames && (
+            <FormErrorText message={errors.usernames.message!} />
+          )}
         </FormGroup>
         <FormProvider {...form}>
           <FormGroup label="" fieldId="permissions-selected">
diff --git a/js/apps/account-ui/src/root/PageNav.tsx b/js/apps/account-ui/src/root/PageNav.tsx
index 99e3c02531..7b196fb0eb 100644
--- a/js/apps/account-ui/src/root/PageNav.tsx
+++ b/js/apps/account-ui/src/root/PageNav.tsx
@@ -5,6 +5,7 @@ import {
   NavList,
   PageSidebar,
   Spinner,
+  PageSidebarBody,
 } from "@patternfly/react-core";
 import {
   PropsWithChildren,
@@ -48,8 +49,8 @@ export const PageNav = () => {
 
   usePromise((signal) => fetchContentJson({ signal, context }), setMenuItems);
   return (
-    <PageSidebar
-      nav={
+    <PageSidebar>
+      <PageSidebarBody>
         <Nav>
           <NavList>
             <Suspense fallback={<Spinner />}>
@@ -68,8 +69,8 @@ export const PageNav = () => {
             </Suspense>
           </NavList>
         </Nav>
-      }
-    />
+      </PageSidebarBody>
+    </PageSidebar>
   );
 };
 
diff --git a/js/apps/account-ui/test/account-security/linked-accounts.spec.ts b/js/apps/account-ui/test/account-security/linked-accounts.spec.ts
index bcf68a67c5..5d8eca7baf 100644
--- a/js/apps/account-ui/test/account-security/linked-accounts.spec.ts
+++ b/js/apps/account-ui/test/account-security/linked-accounts.spec.ts
@@ -93,7 +93,7 @@ test.describe("Account linking", () => {
       .click();
 
     // Expect an error shown that the account cannot be unlinked
-    await expect(page.getByLabel("Danger Alert")).toBeVisible();
+    await expect(page.getByTestId("alerts")).toBeVisible();
   });
 });
 
diff --git a/js/apps/account-ui/test/personal-info/personal-info.spec.ts b/js/apps/account-ui/test/personal-info/personal-info.spec.ts
index 79bb022b97..2527647347 100644
--- a/js/apps/account-ui/test/personal-info/personal-info.spec.ts
+++ b/js/apps/account-ui/test/personal-info/personal-info.spec.ts
@@ -68,7 +68,7 @@ test.describe("Personal info with userprofile enabled", async () => {
       "Could not update account due to validation errors",
     );
 
-    await expect(page.locator("#email2-helper")).toHaveText(
+    await expect(page.getByTestId("email2-helper")).toHaveText(
       "Invalid email address.",
     );
 
diff --git a/js/apps/admin-ui/cypress/e2e/authentication_test.spec.ts b/js/apps/admin-ui/cypress/e2e/authentication_test.spec.ts
index 5268b6f7b5..de63b230f6 100644
--- a/js/apps/admin-ui/cypress/e2e/authentication_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/authentication_test.spec.ts
@@ -78,7 +78,8 @@ describe("Authentication test", () => {
     detailPage.executionExists("Cookie");
   });
 
-  it("Should move kerberos down", () => {
+  // as of 03/28/24, drag and drop is not working
+  it.skip("Should move kerberos down", () => {
     listingPage.goToItemDetails("Copy of browser");
 
     const fromRow = "Kerberos";
diff --git a/js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts b/js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts
index 79d7ac87e8..34e545edd2 100644
--- a/js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/clients_saml_test.spec.ts
@@ -37,7 +37,7 @@ describe("Clients SAML tests", () => {
     });
 
     it("should display the saml sections on details screen", () => {
-      cy.get(".pf-c-jump-links__list").should(($ul) => {
+      cy.get(".pf-v5-c-jump-links__list").should(($ul) => {
         expect($ul)
           .to.contain("SAML capabilities")
           .to.contain("Signature and Encryption");
@@ -45,7 +45,7 @@ describe("Clients SAML tests", () => {
     });
 
     it("should save force name id format", () => {
-      cy.get(".pf-c-jump-links__list").contains("SAML capabilities").click();
+      cy.get(".pf-v5-c-jump-links__list").contains("SAML capabilities").click();
 
       cy.findByTestId("attributes.saml🍺force🍺post🍺binding").click({
         force: true,
@@ -137,14 +137,14 @@ describe("Clients SAML tests", () => {
     });
 
     it("should check SAML capabilities", () => {
-      cy.get(".pf-c-jump-links__list").contains("SAML capabilities").click();
+      cy.get(".pf-v5-c-jump-links__list").contains("SAML capabilities").click();
 
       settingsTab.assertNameIdFormatDropdown();
       settingsTab.assertSAMLCapabilitiesSwitches();
     });
 
     it("should check signature and encryption", () => {
-      cy.get(".pf-c-jump-links__list")
+      cy.get(".pf-v5-c-jump-links__list")
         .contains("Signature and Encryption")
         .click();
 
@@ -156,7 +156,7 @@ describe("Clients SAML tests", () => {
     });
 
     it("should check access settings", () => {
-      cy.get(".pf-c-jump-links__list").contains("Access settings").click();
+      cy.get(".pf-v5-c-jump-links__list").contains("Access settings").click();
 
       const validUrl =
         "http://localhost:8180/realms/master/protocol/" +
@@ -186,7 +186,7 @@ describe("Clients SAML tests", () => {
     });
 
     it("should check login settings", () => {
-      cy.get(".pf-c-jump-links__list").contains("Login settings").click();
+      cy.get(".pf-v5-c-jump-links__list").contains("Login settings").click();
 
       settingsTab.assertLoginThemeDropdown();
       settingsTab.assertLoginSettings();
diff --git a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
index 0e3792d1a8..31ad607518 100644
--- a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
@@ -114,7 +114,7 @@ describe("Clients test", () => {
     it("Should search existing client scope by assigned type", () => {
       commonPage
         .tableToolbarUtils()
-        .selectSearchType(Filter.AssignedType)
+        .selectSearchType(Filter.Name, Filter.AssignedType)
         .selectSecondarySearchType(FilterAssignedType.Default);
       commonPage
         .tableUtils()
@@ -217,13 +217,12 @@ describe("Clients test", () => {
       commonPage.tableToolbarUtils().clickSearchButton();
     });
 
-    //fails, issue https://github.com/keycloak/keycloak-admin-ui/issues/1874
     it("Should show initial items after filtering", () => {
       commonPage
         .tableToolbarUtils()
-        .selectSearchType(Filter.AssignedType)
+        .selectSearchType(Filter.Name, Filter.AssignedType)
         .selectSecondarySearchType(FilterAssignedType.Optional)
-        .selectSearchType(Filter.Name);
+        .selectSearchType(Filter.AssignedType, Filter.Name);
       commonPage
         .tableUtils()
         .checkRowItemExists(FilterAssignedType.Default, false)
diff --git a/js/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts b/js/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts
index 38bfc5f966..cebafe6b26 100644
--- a/js/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/identity_providers_saml_test.spec.ts
@@ -162,7 +162,7 @@ describe("SAML identity provider test", () => {
       listingPage.goToItemDetails(samlProviderName);
       providerSAMLSettings.enableProviderSwitch();
 
-      cy.get(".pf-c-jump-links__list").contains("SAML settings").click();
+      cy.get(".pf-v5-c-jump-links__list").contains("SAML settings").click();
       providerSAMLSettings.assertIdAndURLFields();
       providerSAMLSettings.assertNameIdPolicyFormat();
       providerSAMLSettings.assertPrincipalType();
@@ -171,7 +171,7 @@ describe("SAML identity provider test", () => {
       providerSAMLSettings.assertValidateSignatures();
       providerSAMLSettings.assertTextFields();
 
-      cy.get(".pf-c-jump-links__list")
+      cy.get(".pf-v5-c-jump-links__list")
         .contains("Requested AuthnContext Constraints")
         .click();
       providerSAMLSettings.assertAuthnContext();
diff --git a/js/apps/admin-ui/cypress/e2e/masthead_test.spec.ts b/js/apps/admin-ui/cypress/e2e/masthead_test.spec.ts
index 2d3594a00b..08e362169b 100644
--- a/js/apps/admin-ui/cypress/e2e/masthead_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/masthead_test.spec.ts
@@ -6,7 +6,7 @@ import { keycloakBefore } from "../support/util/keycloak_hooks";
 const loginPage = new LoginPage();
 const masthead = new Masthead();
 const sidebarPage = new SidebarPage();
-const helpLabel = ".pf-c-form__group-label-help";
+const helpLabel = ".pf-v5-c-form__group-label-help";
 
 describe("Masthead tests", () => {
   beforeEach(() => {
@@ -31,7 +31,7 @@ describe("Masthead tests", () => {
     it("Go to realm info", () => {
       sidebarPage.goToClients();
       masthead.toggleUsernameDropdown().clickRealmInfo();
-      cy.get(".pf-l-grid").should("contain.text", "Welcome");
+      cy.get(".pf-v5-l-grid").should("contain.text", "Welcome");
     });
 
     it("Should go to documentation page", () => {
@@ -81,7 +81,7 @@ describe("Masthead tests", () => {
     });
   });
 
-  describe.skip("Accessibility tests for masthead", () => {
+  describe("Accessibility tests for masthead", () => {
     beforeEach(() => {
       loginPage.logIn();
       keycloakBefore();
diff --git a/js/apps/admin-ui/cypress/e2e/realm_settings_general_tab_test.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_settings_general_tab_test.spec.ts
index bfa760d2de..4eff70a0e2 100644
--- a/js/apps/admin-ui/cypress/e2e/realm_settings_general_tab_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/realm_settings_general_tab_test.spec.ts
@@ -49,9 +49,12 @@ describe("Realm settings general tab tests", () => {
     sidebarPage.waitForPageLoad();
 
     // Disable realm
-    realmSettingsPage.toggleSwitch(`${realmName}-switch`);
+    const loadName = `load-disabled-${uuid()}`;
+    cy.intercept({ path: "/admin/realms/*", times: 1 }).as(loadName);
+    realmSettingsPage.toggleSwitch(`${realmName}-switch`, false);
     realmSettingsPage.disableRealm();
     masthead.checkNotificationMessage("Realm successfully updated", true);
+    cy.wait(`@${loadName}`);
     sidebarPage.waitForPageLoad();
 
     // Re-enable realm
@@ -63,7 +66,7 @@ describe("Realm settings general tab tests", () => {
     sidebarPage.goToRealmSettings();
     realmSettingsPage.clearRealmId();
     realmSettingsPage.saveGeneral();
-    cy.get("#kc-realm-id-helper").should("have.text", "Required field");
+    cy.findByTestId("realm-id-error").should("have.text", "Required field");
   });
 
   it("Modify Display name", () => {
diff --git a/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts
index 98709532b2..793adcaa8c 100644
--- a/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts
@@ -1,13 +1,15 @@
 import { v4 as uuid } from "uuid";
-import SidebarPage from "../support/pages/admin-ui/SidebarPage";
+
+import FormValidation from "../support/forms/FormValidation";
 import LoginPage from "../support/pages/LoginPage";
-import RealmSettingsPage from "../support/pages/admin-ui/manage/realm_settings/RealmSettingsPage";
 import Masthead from "../support/pages/admin-ui/Masthead";
-import { keycloakBefore } from "../support/util/keycloak_hooks";
-import adminClient from "../support/util/AdminClient";
+import SidebarPage from "../support/pages/admin-ui/SidebarPage";
 import KeysTab from "../support/pages/admin-ui/manage/realm_settings/KeysTab";
-import ModalUtils from "../support/util/ModalUtils";
+import RealmSettingsPage from "../support/pages/admin-ui/manage/realm_settings/RealmSettingsPage";
 import UserRegistration from "../support/pages/admin-ui/manage/realm_settings/UserRegistration";
+import adminClient from "../support/util/AdminClient";
+import ModalUtils from "../support/util/ModalUtils";
+import { keycloakBefore } from "../support/util/keycloak_hooks";
 
 const loginPage = new LoginPage();
 const sidebarPage = new SidebarPage();
@@ -101,10 +103,12 @@ describe("Realm settings tabs tests", () => {
     realmSettingsPage.fillReplyToEmail("replyTo@email.com");
     realmSettingsPage.fillPort("10");
     cy.findByTestId("email-tab-save").click();
-    cy.get("#smtpServer\\.from-helper").contains(
+
+    FormValidation.assertMessage(
+      realmSettingsPage.getFromInput(),
       "You must enter a valid email.",
     );
-    cy.get("#smtpServer\\.host-helper").contains("Required field");
+    FormValidation.assertRequired(realmSettingsPage.getHostInput());
 
     cy.findByTestId("email-tab-revert").click();
     cy.findByTestId("smtpServer.from").should("be.empty");
@@ -204,7 +208,7 @@ describe("Realm settings tabs tests", () => {
 
       cy.get(realmSettingsPage.supportedLocalesTypeahead)
         .click()
-        .get(".pf-c-select__menu-item")
+        .get(".pf-v5-c-select__menu-item")
         .contains("Danish")
         .click();
       cy.get("#kc-l-supported-locales").click();
@@ -234,7 +238,7 @@ describe("Realm settings tabs tests", () => {
         .contains("td", "123")
         .should("be.visible");
 
-      cy.get('td.pf-c-table__action button[aria-label="Actions"]').click();
+      cy.get(".pf-v5-c-table__action button").click();
       cy.contains("button", "Delete").click();
       cy.findByTestId("confirm").click();
       masthead.checkNotificationMessage("Successfully removed translation(s).");
@@ -281,7 +285,7 @@ describe("Realm settings tabs tests", () => {
         .contains("td", "def")
         .should("be.visible");
 
-      cy.get('td.pf-c-table__action button[aria-label="Actions"]').click();
+      cy.get(".pf-v5-c-table__action button").click();
       cy.contains("button", "Delete").click();
       cy.findByTestId("confirm").click();
 
diff --git a/js/apps/admin-ui/cypress/e2e/realm_settings_user_profile_enabled.spec.ts b/js/apps/admin-ui/cypress/e2e/realm_settings_user_profile_enabled.spec.ts
index a3e68716ad..1c9c2f57ff 100644
--- a/js/apps/admin-ui/cypress/e2e/realm_settings_user_profile_enabled.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/realm_settings_user_profile_enabled.spec.ts
@@ -24,7 +24,6 @@ const createUserPage = new CreateUserPage();
 const getUserProfileTab = () => userProfileTab.goToTab();
 const getAttributesTab = () => userProfileTab.goToAttributesTab();
 const getAttributesGroupTab = () => userProfileTab.goToAttributesGroupTab();
-const getJsonEditorTab = () => userProfileTab.goToJsonEditorTab();
 
 const usernameAttributeName = "username";
 const emailAttributeName = "email";
@@ -137,32 +136,6 @@ describe("User profile tabs", () => {
     });
   });
 
-  describe("Json Editor sub tab tests", () => {
-    const removedThree = `
-      {ctrl+a}{backspace}
-  {
-    "attributes": [
-      {
-  "name": "${emailAttributeName}"{downArrow},
-      {
-  "name": "${usernameAttributeName}",
-  "validations": {
-    "length": {
-    "min": 3,
-  "max": 255 {downArrow},
-  "username-prohibited-characters": {
-  `;
-
-    it("Removes three validators with the editor", () => {
-      getUserProfileTab();
-      getJsonEditorTab();
-      userProfileTab
-        .typeJSON(removedThree)
-        .saveJSON()
-        .assertNotificationUpdated();
-    });
-  });
-
   describe("Check attributes are displayed and editable on user create/edit", () => {
     it("Checks that not required attribute is not present when user is created with email as username and edit username set to disabled", () => {
       const attrName = "newAttribute1";
diff --git a/js/apps/admin-ui/cypress/e2e/users_test.spec.ts b/js/apps/admin-ui/cypress/e2e/users_test.spec.ts
index a9e9eb080c..51944e19d1 100644
--- a/js/apps/admin-ui/cypress/e2e/users_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/users_test.spec.ts
@@ -171,7 +171,7 @@ describe("User creation", () => {
 
     masthead.checkNotificationMessage("The user has not been saved: ");
 
-    cy.get(".pf-c-helper-text__item-text")
+    cy.get(".pf-v5-c-helper-text__item-text")
       .filter(':contains("Update of read-only attribute rejected")')
       .should("have.length", 2);
 
@@ -435,7 +435,12 @@ describe("User creation", () => {
     credentialsPage.goToCredentialsTab();
 
     cy.wait(2000);
-    listingPage.deleteItem(itemCredential);
+    cy.get("table")
+      .contains(itemCredential)
+      .parentsUntil("tbody")
+      .find(".pf-v5-c-dropdown__toggle")
+      .click();
+    cy.get("table").contains("Delete").click();
     modalUtils.checkModalTitle("Delete credentials?").confirmModal();
 
     masthead.checkNotificationMessage(
diff --git a/js/apps/admin-ui/cypress/support/forms/FormValidation.ts b/js/apps/admin-ui/cypress/support/forms/FormValidation.ts
index b8d8cac67d..b8eec8acda 100644
--- a/js/apps/admin-ui/cypress/support/forms/FormValidation.ts
+++ b/js/apps/admin-ui/cypress/support/forms/FormValidation.ts
@@ -27,7 +27,7 @@ export default class FormValidation {
   static #getHelperText(chain: Cypress.Chainable<JQuery<HTMLElement>>) {
     // A regular ID selector doesn't work here so we have to query by attribute.
     return chain
-      .invoke("attr", "id")
-      .then((id) => cy.get(`[id="${id}-helper"]`));
+      .invoke("attr", "data-testid")
+      .then((id) => cy.get(`[data-testid="${id}-helper"]`));
   }
 }
diff --git a/js/apps/admin-ui/cypress/support/forms/Select.ts b/js/apps/admin-ui/cypress/support/forms/Select.ts
index fe4faedb61..8667b15248 100644
--- a/js/apps/admin-ui/cypress/support/forms/Select.ts
+++ b/js/apps/admin-ui/cypress/support/forms/Select.ts
@@ -15,6 +15,6 @@ export default class Select {
   }
 
   static #getSelectMenu(chain: Cypress.Chainable<JQuery<HTMLElement>>) {
-    return chain.parent().get(".pf-c-select__menu");
+    return chain.parent().get(".pf-v5-c-select__menu");
   }
 }
diff --git a/js/apps/admin-ui/cypress/support/pages/CommonElements.ts b/js/apps/admin-ui/cypress/support/pages/CommonElements.ts
index 7d8b89bc5f..8ee2740102 100644
--- a/js/apps/admin-ui/cypress/support/pages/CommonElements.ts
+++ b/js/apps/admin-ui/cypress/support/pages/CommonElements.ts
@@ -10,20 +10,24 @@ export default class CommonElements {
   protected dropdownToggleBtn;
   protected dropdownSelectToggleBtn;
   protected dropdownSelectToggleItem;
+  protected tableKebabBtn;
 
   constructor(parentSelector = "") {
     this.parentSelector = trim(parentSelector) + " ";
-    this.primaryBtn = this.parentSelector + ".pf-c-button.pf-m-primary";
-    this.secondaryBtn = this.parentSelector + ".pf-c-button.pf-m-secondary";
-    this.secondaryBtnLink = this.parentSelector + ".pf-c-button.pf-m-link";
+    this.primaryBtn = this.parentSelector + ".pf-v5-c-button.pf-m-primary";
+    this.secondaryBtn = this.parentSelector + ".pf-v5-c-button.pf-m-secondary";
+    this.secondaryBtnLink = this.parentSelector + ".pf-v5-c-button.pf-m-link";
     this.dropdownMenuItem =
-      this.parentSelector + ".pf-c-dropdown__menu .pf-c-dropdown__menu-item";
+      this.parentSelector +
+      ".pf-v5-c-dropdown__menu .pf-v5-c-dropdown__menu-item";
     this.selectMenuItem =
-      this.parentSelector + ".pf-c-select__menu .pf-c-select__menu-item";
-    this.dropdownToggleBtn = this.parentSelector + ".pf-c-dropdown__toggle";
-    this.dropdownSelectToggleBtn = this.parentSelector + ".pf-c-select__toggle";
+      this.parentSelector + ".pf-v5-c-select__menu .pf-v5-c-select__menu-item";
+    this.dropdownToggleBtn = this.parentSelector + ".pf-v5-c-select__toggle";
+    this.tableKebabBtn = this.parentSelector + ".pf-v5-c-dropdown__toggle";
+    this.dropdownSelectToggleBtn =
+      this.parentSelector + ".pf-v5-c-select__toggle";
     this.dropdownSelectToggleItem =
-      this.parentSelector + ".pf-c-select__menu > li";
+      this.parentSelector + ".pf-v5-c-select__menu > li";
   }
 
   clickPrimaryBtn() {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/CreateRealmPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/CreateRealmPage.ts
index 6f2b3618fa..13e7212c39 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/CreateRealmPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/CreateRealmPage.ts
@@ -1,11 +1,16 @@
+import FormValidation from "../../forms/FormValidation";
+
 export default class CreateRealmPage {
-  #clearBtn = ".pf-c-file-upload__file-select button:last-child";
   #modalClearBtn = "clear-button";
   #realmNameInput = "realm";
-  #enabledSwitch = ".pf-c-toolbar .pf-c-switch__toggle";
-  #createBtn = '.pf-c-form__group:last-child button[type="submit"]';
-  #cancelBtn = '.pf-c-form__group:last-child button[type="button"]';
-  #codeEditor = ".pf-c-code-editor__code";
+  #enabledSwitch = ".pf-v5-c-toolbar .pf-v5-c-switch__toggle";
+  #createBtn = '.pf-v5-c-form__group:last-child button[type="submit"]';
+  #cancelBtn = '.pf-v5-c-form__group:last-child button[type="button"]';
+  #codeEditor = ".pf-v5-c-code-editor__code";
+
+  #getClearBtn() {
+    return cy.findByText("Clear");
+  }
 
   fillRealmName(realmName: string) {
     cy.findByTestId(this.#realmNameInput).clear().type(realmName);
@@ -38,17 +43,14 @@ export default class CreateRealmPage {
   }
 
   clearTextField() {
-    cy.get(this.#clearBtn).click();
+    this.#getClearBtn().click();
     cy.findByTestId(this.#modalClearBtn).click();
 
     return this;
   }
 
   verifyRealmNameFieldInvalid() {
-    cy.findByTestId(this.#realmNameInput)
-      .next("div")
-      .contains("Required field")
-      .should("have.class", "pf-m-error");
+    FormValidation.assertRequired(cy.findByTestId(this.#realmNameInput));
 
     return this;
   }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts
index e14d08c27f..6a79020e3b 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/ListingPage.ts
@@ -28,42 +28,45 @@ export enum FilterSession {
 }
 
 export default class ListingPage extends CommonElements {
-  #searchInput =
-    ".pf-c-toolbar__item .pf-c-text-input-group__text-input:visible";
-  #tableToolbar = ".pf-c-toolbar";
+  #tableToolbar = ".pf-v5-c-toolbar";
   #itemsRows = "table:visible";
   #deleteUserButton = "delete-user-btn";
   #emptyListImg = '[role="tabpanel"]:not([hidden]) [data-testid="empty-state"]';
   #emptyState = "empty-state";
-  #itemRowDrpDwn = ".pf-c-dropdown__toggle";
-  #itemRowSelect = ".pf-c-select__toggle:nth-child(1)";
-  #itemRowSelectItem = ".pf-c-select__menu-item";
-  #itemCheckbox = ".pf-c-table__check";
+  #itemRowDrpDwn = ".pf-v5-c-menu-toggle";
+  #itemRowSelect = ".pf-v5-c-select__toggle:nth-child(1)";
+  #itemRowSelectItem = ".pf-v5-c-select__menu-item";
+  #itemCheckbox = ".pf-v5-c-table__check";
   public exportBtn = '[role="menuitem"]:nth-child(1)';
   public deleteBtn = '[role="menuitem"]:nth-child(2)';
   #searchBtn =
-    ".pf-c-page__main .pf-c-toolbar__content-section button.pf-m-control:visible";
+    ".pf-v5-c-page__main .pf-v5-c-toolbar__content-section button.pf-m-control:visible";
   #listHeaderPrimaryBtn =
-    ".pf-c-page__main .pf-c-toolbar__content-section .pf-m-primary:visible";
+    ".pf-v5-c-page__main .pf-v5-c-toolbar__content-section .pf-m-primary:visible";
   #listHeaderSecondaryBtn =
-    ".pf-c-page__main .pf-c-toolbar__content-section .pf-m-link";
+    ".pf-v5-c-page__main .pf-v5-c-toolbar__content-section .pf-m-link";
   #previousPageBtn =
-    ".pf-c-pagination:not([class*=pf-m-bottom]) button[data-action=previous]";
+    ".pf-v5-c-pagination:not([class*=pf-m-bottom]) button[data-action=previous]";
   #nextPageBtn =
-    ".pf-c-pagination:not([class*=pf-m-bottom]) button[data-action=next]";
+    ".pf-v5-c-pagination:not([class*=pf-m-bottom]) button[data-action=next]";
   public tableRowItem = "tbody tr[data-ouia-component-type]:visible";
   #table = "table[aria-label]";
-  #filterSessionDropdownButton = ".pf-c-select button:nth-child(1)";
+  #filterSessionDropdownButton = ".pf-v5-c-select button:nth-child(1)";
   #filterDropdownButton = "[class*='searchtype'] button";
-  #dropdownItem = ".pf-c-dropdown__menu-item";
-  #changeTypeToButton = ".pf-c-select__toggle";
+  #kebabMenu = ".pf-v5-c-dropdown__toggle";
+  #dropdownItem = ".pf-v5-c-dropdown__menu-item";
+  #changeTypeToButton = ".pf-v5-c-select__toggle";
   #toolbarChangeType = "#change-type-dropdown";
   #tableNameColumnPrefix = "name-column-";
   #rowGroup = "table:visible tbody[role='rowgroup']";
   #tableHeaderCheckboxItemAllRows = "input[aria-label='Select all rows']";
 
   #searchBtnInModal =
-    ".pf-c-modal-box .pf-c-toolbar__content-section button.pf-m-control:visible";
+    ".pf-v5-c-modal-box .pf-v5-c-toolbar__content-section button.pf-m-control:visible";
+
+  #getSearchInput() {
+    return cy.findAllByTestId("table-search-input").last().find("input");
+  }
 
   showPreviousPageTableItems() {
     cy.get(this.#previousPageBtn).first().click();
@@ -100,13 +103,14 @@ export default class ListingPage extends CommonElements {
       cy.intercept(searchUrl).as("search");
     }
 
-    cy.get(this.#searchInput).clear();
+    this.#getSearchInput().click({ force: true });
+    this.#getSearchInput().clear();
     if (searchValue) {
-      cy.get(this.#searchInput).type(searchValue);
+      this.#getSearchInput().type(searchValue);
       cy.get(this.#searchBtn).click({ force: true });
     } else {
       // TODO: Remove else and move clickSearchButton outside of the if
-      cy.get(this.#searchInput).type("{enter}");
+      this.#getSearchInput().type("{enter}");
     }
 
     if (wait) {
@@ -117,9 +121,10 @@ export default class ListingPage extends CommonElements {
   }
 
   searchItemInModal(searchValue: string) {
-    cy.get(this.#searchInput).clear();
+    this.#getSearchInput().click({ force: true });
+    this.#getSearchInput().clear();
     if (searchValue) {
-      cy.get(this.#searchInput).type(searchValue);
+      this.#getSearchInput().type(searchValue);
     }
     cy.get(this.#searchBtnInModal).click({ force: true });
   }
@@ -133,7 +138,7 @@ export default class ListingPage extends CommonElements {
   }
 
   clickSearchBarActionButton() {
-    cy.get(this.#tableToolbar).find(this.#itemRowDrpDwn).last().click();
+    cy.get(this.#tableToolbar).find(this.#kebabMenu).last().click();
 
     return this;
   }
@@ -421,28 +426,32 @@ export default class ListingPage extends CommonElements {
 
   expandRow(index = 0) {
     this.#getRowGroup(index)
-      .find("[class='pf-c-button pf-m-plain'][id*='expandable']")
+      .find("[class='pf-v5-c-button pf-m-plain'][id*='expandable']")
       .click();
     return this;
   }
 
   collapseRow(index = 0) {
     this.#getRowGroup(index)
-      .find("[class='pf-c-button pf-m-plain pf-m-expanded'][id*='expandable']")
+      .find(
+        "[class='pf-v5-c-button pf-m-plain pf-m-expanded'][id*='expandable']",
+      )
       .click();
     return this;
   }
 
   assertExpandedRowContainText(index = 0, text: string) {
     this.#getRowGroup(index)
-      .find("tr[class='pf-c-table__expandable-row pf-m-expanded']")
+      .find("tr[class='pf-v5-c-table__expandable-row pf-m-expanded']")
       .should("contain.text", text);
     return this;
   }
 
   assertRowIsExpanded(index = 0, isExpanded: boolean) {
     this.#getRowGroup(index)
-      .find("[class='pf-c-button pf-m-plain pf-m-expanded'][id*='expandable']")
+      .find(
+        "[class='pf-v5-c-button pf-m-plain pf-m-expanded'][id*='expandable']",
+      )
       .should((!isExpanded ? "not." : "") + "exist");
     return this;
   }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts
index d79f4420d0..ca8bed4779 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/Masthead.ts
@@ -1,17 +1,17 @@
 import CommonElements from "../CommonElements";
 export default class Masthead extends CommonElements {
-  #logoBtn = ".pf-c-page__header-brand-link img";
+  #logoBtn = ".pf-v5-c-page__header-brand-link img";
   #helpBtn = "#help";
-  #closeAlertMessageBtn = ".pf-c-alert__action button";
-  #closeLastAlertMessageBtn = "li:first-child .pf-c-alert__action button";
+  #closeAlertMessageBtn = ".pf-v5-c-alert__action button";
+  #closeLastAlertMessageBtn = "li:first-child .pf-v5-c-alert__action button";
 
-  #alertMessage = ".pf-c-alert__title";
+  #alertMessage = ".pf-v5-c-alert__title";
   #userDrpDwn = "#user-dropdown";
   #userDrpDwnKebab = "#user-dropdown-kebab";
   #globalAlerts = "global-alerts";
   #documentationLink = "#link";
   #backToAdminConsoleLink = "referrer-link";
-  #userDrpdwnItem = ".pf-c-dropdown__menu-item";
+  #userDrpdwnItem = ".pf-v5-c-dropdown__menu-item";
 
   #getAlertsContainer() {
     return cy.findByTestId(this.#globalAlerts);
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/ActionToolbarPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/ActionToolbarPage.ts
index 6fbdbc7b2b..528cc73dea 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/ActionToolbarPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/ActionToolbarPage.ts
@@ -2,7 +2,7 @@ import CommonElements from "../../CommonElements";
 
 export default class ActionToolbarPage extends CommonElements {
   constructor() {
-    super(".pf-l-level.pf-m-gutter");
+    super(".pf-v5-l-level.pf-m-gutter");
   }
 
   get bearerOnlyExplainerLabelElement() {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/EmptyStatePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/EmptyStatePage.ts
index e507e0e108..71d25d5ce4 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/EmptyStatePage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/EmptyStatePage.ts
@@ -2,6 +2,6 @@ import CommonElements from "../../CommonElements";
 
 export default class EmptyStatePage extends CommonElements {
   constructor() {
-    super(".pf-c-empty-state__content");
+    super(".pf-v5-c-empty-state__content");
   }
 }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/FormPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/FormPage.ts
index 457e6424d0..8419d9fad2 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/FormPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/FormPage.ts
@@ -2,7 +2,7 @@ import CommonElements from "../../CommonElements";
 
 export default class FormPage extends CommonElements {
   constructor() {
-    super(".pf-c-form:visible");
+    super(".pf-v5-c-form:visible");
   }
 
   save() {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts
index 43079dd45f..efb00966fe 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/PageObject.ts
@@ -1,19 +1,19 @@
 export default class PageObject {
-  #selectItemSelectedIcon = ".pf-c-select__menu-item-icon";
-  #drpDwnMenuList = ".pf-c-dropdown__menu";
-  #drpDwnMenuItem = ".pf-c-dropdown__menu-item";
-  #drpDwnMenuToggleBtn = ".pf-c-dropdown__toggle";
-  #selectMenuList = ".pf-c-select__menu";
-  #selectMenuItem = ".pf-c-select__menu-item";
-  #selectMenuToggleBtn = ".pf-c-select__toggle";
-  #switchInput = ".pf-c-switch__input";
-  #formLabel = ".pf-c-form__label";
-  #chipGroup = ".pf-c-chip-group";
-  #chipGroupCloseBtn = ".pf-c-chip-group__close";
-  #chipItem = ".pf-c-chip-group__list-item";
-  #emptyStateDiv = ".pf-c-empty-state:visible";
-  #toolbarActionsButton = ".pf-c-toolbar button[aria-label='Actions']";
-  #breadcrumbItem = ".pf-c-breadcrumb .pf-c-breadcrumb__item";
+  #selectItemSelectedIcon = ".pf-v5-c-select__menu-item-icon";
+  #drpDwnMenuList = ".pf-v5-c-dropdown__menu";
+  #drpDwnMenuItem = ".pf-v5-c-dropdown__menu-item";
+  #drpDwnMenuToggleBtn = ".pf-v5-c-select__toggle";
+  #selectMenuList = ".pf-v5-c-select__menu";
+  #selectMenuItem = ".pf-v5-c-select__menu-item";
+  #selectMenuToggleBtn = ".pf-v5-c-select__toggle";
+  #switchInput = ".pf-v5-c-switch__input";
+  #formLabel = ".pf-v5-c-form__label";
+  #chipGroup = ".pf-v5-c-chip-group";
+  #chipGroupCloseBtn = ".pf-v5-c-chip-group__close";
+  #chipItem = ".pf-v5-c-chip-group__list-item";
+  #emptyStateDiv = ".pf-v5-c-empty-state:visible";
+  #toolbarActionsButton = ".pf-v5-c-toolbar button[aria-label='Actions']";
+  #breadcrumbItem = ".pf-v5-c-breadcrumb .pf-v5-c-breadcrumb__item";
 
   protected assertExist(element: Cypress.Chainable<JQuery>, exist: boolean) {
     element.should((!exist ? "not." : "") + "exist");
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TabPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TabPage.ts
index 1014d9cd6b..e0ac2d979e 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TabPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TabPage.ts
@@ -5,8 +5,8 @@ export default class TabPage extends CommonElements {
   protected tabsList: string;
 
   constructor() {
-    super(".pf-c-tabs");
-    this.tabItemSelector = ".pf-c-tabs__item";
+    super(".pf-v5-c-tabs");
+    this.tabItemSelector = ".pf-v5-c-tabs__item";
     this.tabsList = '[role="tablist"]';
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts
index 9de6fd45cb..229335adca 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TablePage.ts
@@ -4,14 +4,16 @@ export default class TablePage extends CommonElements {
   #tableRowItem: string;
   #tableRowItemChckBx: string;
   #tableHeaderRowItem: string;
+  #tableKebabMenu: string;
   #tableInModal: boolean;
-  static tableSelector = ".pf-c-table";
+  static tableSelector = ".pf-v5-c-table";
 
   constructor(parentElement?: string) {
     super(parentElement ?? TablePage.tableSelector + ":visible");
     this.#tableRowItem = this.parentSelector + "tbody tr";
     this.#tableHeaderRowItem = this.parentSelector + "thead tr";
-    this.#tableRowItemChckBx = ".pf-c-table__check";
+    this.#tableRowItemChckBx = ".pf-v5-c-table__check";
+    this.#tableKebabMenu = ".pf-v5-c-menu";
     this.#tableInModal = false;
   }
 
@@ -21,7 +23,7 @@ export default class TablePage extends CommonElements {
 
   selectRowItemCheckbox(itemName: string) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .contains(itemName)
@@ -33,7 +35,7 @@ export default class TablePage extends CommonElements {
 
   clickRowItemLink(itemName: string) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .contains(itemName)
@@ -54,20 +56,20 @@ export default class TablePage extends CommonElements {
   #getRowItemAction(itemName: string, actionItemName: string) {
     return cy
       .get(
-        (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+        (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
           this.#tableRowItem,
       )
       .contains(itemName)
       .parentsUntil("tbody")
-      .find(".pf-c-dropdown__toggle")
+      .find(".pf-v5-c-menu-toggle")
       .click()
-      .get(this.dropdownMenuItem)
+      .get(this.#tableKebabMenu)
       .contains(actionItemName);
   }
 
   typeValueToRowItem(row: number, column: number, value: string) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem +
         ":nth-child(" +
         row +
@@ -80,7 +82,7 @@ export default class TablePage extends CommonElements {
 
   clickRowItemByIndex(row: number, column: number, appendChildren?: string) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem +
         ":nth-child(" +
         row +
@@ -97,7 +99,7 @@ export default class TablePage extends CommonElements {
     appendChildren?: string,
   ) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .find("td:nth-child(" + column + ") " + appendChildren)
@@ -108,7 +110,7 @@ export default class TablePage extends CommonElements {
 
   clickHeaderItem(column: number, appendChildren?: string) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableHeaderRowItem,
     )
       .find("td:nth-child(" + column + ") " + appendChildren)
@@ -118,7 +120,7 @@ export default class TablePage extends CommonElements {
 
   checkRowItemsEqualTo(amount: number) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .its("length")
@@ -128,7 +130,7 @@ export default class TablePage extends CommonElements {
 
   checkRowItemsGreaterThan(amount: number) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .its("length")
@@ -138,7 +140,7 @@ export default class TablePage extends CommonElements {
 
   checkRowItemExists(itemName: string, exist = true) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .contains(itemName)
@@ -148,7 +150,7 @@ export default class TablePage extends CommonElements {
 
   checkRowItemValueByItemName(itemName: string, column: number, value: string) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem,
     )
       .contains(itemName)
@@ -165,7 +167,7 @@ export default class TablePage extends CommonElements {
     appendChildren?: string,
   ) {
     cy.get(
-      (this.#tableInModal ? ".pf-c-modal-box.pf-m-md " : "") +
+      (this.#tableInModal ? ".pf-v5-c-modal-box.pf-m-md " : "") +
         this.#tableRowItem +
         ":nth-child(" +
         row +
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts
index 22ca1657b9..635db0bc24 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/components/TableToolbarPage.ts
@@ -12,20 +12,21 @@ export default class TableToolbar extends CommonElements {
   #actionToggleBtn: string;
 
   constructor() {
-    super(".pf-c-toolbar:visible");
+    super(".pf-v5-c-toolbar:visible");
     this.#searchBtn =
       this.parentSelector + "button[aria-label='Search']:visible";
     this.#searchInput =
-      this.parentSelector + ".pf-c-text-input-group__text-input:visible";
+      this.parentSelector + ".pf-v5-c-text-input-group__text-input:visible";
     this.#changeTypeBtn = this.parentSelector + "#change-type-dropdown";
     this.#nextPageBtn = this.parentSelector + "button[data-action=next]";
     this.#previousPageBtn =
       this.parentSelector + "button[data-action=previous]";
     this.#searchTypeDropdownBtn =
-      this.parentSelector + "[class*='searchtype'] .pf-c-dropdown__toggle";
+      this.parentSelector +
+      ".pf-v5-c-dropdown .keycloak__client-scopes__searchtype";
     this.#searchTypeSelectToggleBtn =
-      this.parentSelector + "[class*='searchtype'] .pf-c-select__toggle";
-    this.#actionToggleBtn = this.dropdownToggleBtn + "[aria-label='Actions']";
+      this.parentSelector + "[class*='searchtype'] .pf-v5-c-select__toggle";
+    this.#actionToggleBtn = this.tableKebabBtn + "[aria-label='Actions']";
   }
 
   clickNextPageButton(isUpperButton = true) {
@@ -90,8 +91,8 @@ export default class TableToolbar extends CommonElements {
     return this;
   }
 
-  selectSearchType(itemName: Filter) {
-    cy.get(this.#searchTypeDropdownBtn).click();
+  selectSearchType(existingName: Filter, itemName: Filter) {
+    cy.contains("button", existingName).click();
     cy.get(this.dropdownMenuItem).contains(itemName).click();
     return this;
   }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/configure/realm_settings/PartialImportModal.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/configure/realm_settings/PartialImportModal.ts
index 4bd4013299..a8b521b3d3 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/configure/realm_settings/PartialImportModal.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/configure/realm_settings/PartialImportModal.ts
@@ -14,7 +14,7 @@ export default class GroupModal {
   };
 
   textArea() {
-    return cy.get(".pf-c-code-editor__code textarea");
+    return cy.get(".pf-v5-c-code-editor__code textarea");
   }
 
   importButton() {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/AttributesTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/AttributesTab.ts
index 9f9956f4dc..96fa33b39f 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/AttributesTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/AttributesTab.ts
@@ -56,7 +56,7 @@ export default class AttributesTab {
   }
 
   public revert() {
-    cy.get(".pf-c-button.pf-m-link").contains("Revert").click();
+    cy.get(".pf-v5-c-button.pf-m-link").contains("Revert").click();
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/RoleMappingTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/RoleMappingTab.ts
index 2d7c16b1cf..9f098acee5 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/RoleMappingTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/RoleMappingTab.ts
@@ -7,7 +7,7 @@ export default class RoleMappingTab {
     `no-roles-for-this-${type}-empty-action`;
   #assignRoleBtn = "assignRole";
   #unAssignBtn = "unAssignRole";
-  #unAssignDrpDwnBtn = '.pf-c-table__action li button[role="menuitem"]';
+  #unAssignDrpDwnBtn = '.pf-v5-c-table__action li button[role="menuitem"]';
   #assignBtn = "assign";
   #hideInheritedRolesBtn = "#hideInheritedRoles";
   #assignedRolesTable = "assigned-roles";
@@ -61,7 +61,7 @@ export default class RoleMappingTab {
   }
 
   selectRow(name: string, modal = false) {
-    cy.get(modal ? ".pf-c-modal-box " : "" + this.#namesColumn)
+    cy.get(modal ? ".pf-v5-c-modal-box " : "" + this.#namesColumn)
       .contains(name)
       .parent()
       .within(() => {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts
index a6ad573692..774cf3e070 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/BindFlowModal.ts
@@ -2,7 +2,7 @@ import ModalUtils from "../../../../util/ModalUtils";
 
 export default class BindFlowModal extends ModalUtils {
   #bindingType = "#bindingType";
-  #dropdownSelectToggleItem = ".pf-c-select__menu > li";
+  #dropdownSelectToggleItem = ".pf-v5-c-select__menu > li";
 
   fill(bindingType: string) {
     cy.get(this.#bindingType).click();
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/CIBAPolicyPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/CIBAPolicyPage.ts
index ab57ddb702..2e24ed4b6e 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/CIBAPolicyPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/CIBAPolicyPage.ts
@@ -14,11 +14,11 @@ export default class CIBAPolicyPage {
   }
 
   static getExpiresInput() {
-    return cy.findAllByTestId("attributes.cibaExpiresIn");
+    return cy.findByTestId("attributes.cibaExpiresIn");
   }
 
   static getIntervalInput() {
-    return cy.findAllByTestId("attributes.cibaInterval");
+    return cy.findByTestId("attributes.cibaInterval");
   }
 
   static assertSaveSuccess() {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts
index d7f82ea274..6d3d806a9e 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/FlowDetail.ts
@@ -60,7 +60,7 @@ export default class FlowDetails {
   addExecution(subFlowName: string, executionTestId: string) {
     this.#clickEditDropdownForFlow(subFlowName, "Add step");
 
-    cy.get(".pf-c-pagination").should("exist");
+    cy.get(".pf-v5-c-pagination").should("exist");
     cy.findByTestId(executionTestId).click();
     cy.findByTestId("modal-add").click();
 
@@ -90,7 +90,7 @@ export default class FlowDetails {
   }
 
   #fillSubFlowModal(subFlowName: string, name: string) {
-    cy.get(".pf-c-modal-box__title-text").contains(
+    cy.get(".pf-v5-c-modal-box__title-text").contains(
       "Add step to " + subFlowName,
     );
     cy.findByTestId("name").type(name);
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/OTPPolicies.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/OTPPolicies.ts
index 6998cd3b8f..d85099a9a1 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/OTPPolicies.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/OTPPolicies.ts
@@ -10,17 +10,14 @@ export default class OTPPolicies {
   }
 
   increaseInitialCounter() {
-    cy.get(
-      '#otpPolicyInitialCounter > .pf-c-input-group > [aria-label="Plus"]',
-    ).click();
+    cy.get('#otpPolicyInitialCounter [aria-label="Plus"]').click();
     return this;
   }
 
   checkSupportedApplications(...supportedApplications: string[]) {
-    cy.findByTestId("supportedApplications").should(
-      "have.text",
-      supportedApplications.join(""),
-    );
+    cy.findByTestId("supportedApplications")
+      .children()
+      .should("have.text", supportedApplications.join(""));
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/PasswordPolicies.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/PasswordPolicies.ts
index 27f2e4fb73..984c6578e7 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/PasswordPolicies.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/PasswordPolicies.ts
@@ -10,7 +10,7 @@ export default class PasswordPolicies {
   }
 
   addPolicy(name: string) {
-    cy.get(".pf-c-select").click().contains(name).click();
+    cy.get(".pf-v5-c-select").click().contains(name).click();
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts
index ff7e3fad74..d9119e95db 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/authentication/WebAuthnPolicies.ts
@@ -1,5 +1,6 @@
 export default class WebAuthnPolicies {
   webAuthnPolicyCreateTimeout(value: number) {
+    cy.findByTestId("webAuthnPolicyCreateTimeout").clear();
     cy.findByTestId("webAuthnPolicyCreateTimeout").type(String(value));
     return this;
   }
@@ -22,7 +23,7 @@ export default class WebAuthnPolicies {
           isPasswordLess ? prop.replace("Policy", "PolicyPasswordless") : prop
         }`,
       ).click();
-      cy.get(".pf-c-select__menu").contains(data[prop]).click();
+      cy.get(".pf-v5-c-select__menu").contains(data[prop]).click();
     }
     return this;
   }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/CreateClientScopePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/CreateClientScopePage.ts
index 243fc625ea..70fb92bdd6 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/CreateClientScopePage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/CreateClientScopePage.ts
@@ -18,8 +18,8 @@ export default class CreateClientScopePage extends CommonPage {
 
   constructor() {
     super();
-    this.settingsTab = ".pf-c-tabs__item:nth-child(1)";
-    this.mappersTab = ".pf-c-tabs__item:nth-child(2)";
+    this.settingsTab = ".pf-v5-c-tabs__item:nth-child(1)";
+    this.mappersTab = ".pf-v5-c-tabs__item:nth-child(2)";
 
     this.clientScopeNameInput = "name";
     this.clientScopeNameError = "#name-helper";
@@ -28,7 +28,7 @@ export default class CreateClientScopePage extends CommonPage {
     this.clientScopeTypeList = "#kc-protocol + ul";
     this.displayOnConsentInput = "attributes.display🍺on🍺consent🍺screen";
     this.displayOnConsentSwitch =
-      '[for="attributes.display🍺on🍺consent🍺screen"] .pf-c-switch__toggle';
+      '[for="attributes.display🍺on🍺consent🍺screen"] .pf-v5-c-switch__toggle';
     this.consentScreenTextInput = "attributes.consent🍺screen🍺text";
     this.includeInTokenSwitch = "#attributes.include🍺in🍺token🍺scope-on";
     this.displayOrderInput = "attributes.gui🍺order";
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts
index 8c42d47433..938457d2c0 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/CreateClientPage.ts
@@ -8,15 +8,15 @@ export default class CreateClientPage extends CommonPage {
   #clientNameInput = "#name";
   #clientDescriptionInput = "#kc-description";
   #alwaysDisplayInUISwitch =
-    '[for="kc-always-display-in-ui-switch"] .pf-c-switch__toggle';
+    '[for="kc-always-display-in-ui-switch"] .pf-v5-c-switch__toggle';
   #frontchannelLogoutSwitch =
-    '[for="kc-frontchannelLogout-switch"] .pf-c-switch__toggle';
+    '[for="kc-frontchannelLogout-switch"] .pf-v5-c-switch__toggle';
 
   #clientAuthenticationSwitch =
-    '[for="kc-authentication-switch"] > .pf-c-switch__toggle';
+    '[for="kc-authentication-switch"] > .pf-v5-c-switch__toggle';
   #clientAuthenticationSwitchInput = "#kc-authentication-switch";
   #clientAuthorizationSwitch =
-    '[for="kc-authorization-switch"] > .pf-c-switch__toggle';
+    '[for="kc-authorization-switch"] > .pf-v5-c-switch__toggle';
   #clientAuthorizationSwitchInput = "#kc-authorization-switch";
   #standardFlowChkBx = "#kc-flow-standard";
   #directAccessChkBx = "#kc-flow-direct";
@@ -32,23 +32,23 @@ export default class CreateClientPage extends CommonPage {
   #adminUrlInput = "adminUrl";
 
   #loginThemeDrpDwn = "#login_theme";
-  #loginThemeList = 'ul[class="pf-c-select__menu"]';
-  #consentRequiredSwitch = '[for="consentRequired"] .pf-c-switch__toggle';
+  #loginThemeList = 'ul[class="pf-v5-c-select__menu"]';
+  #consentRequiredSwitch = '[for="consentRequired"] .pf-v5-c-switch__toggle';
   #consentRequiredSwitchInput = "#consentRequired";
   #displayClientOnScreenSwitch =
-    '[for="attributes.display🍺on🍺consent🍺screen"].pf-c-switch';
+    '[for="attributes.display🍺on🍺consent🍺screen"].pf-v5-c-switch';
   #displayClientOnScreenSwitchInput =
     "#attributes\\.display🍺on🍺consent🍺screen";
   #clientConsentScreenText = "attributes.consent🍺screen🍺text";
 
   #frontChannelLogoutSwitch =
-    '[for="kc-frontchannelLogout-switch"] > .pf-c-switch__toggle';
+    '[for="kc-frontchannelLogout-switch"] > .pf-v5-c-switch__toggle';
   #frontChannelLogoutSwitchInput = "#kc-frontchannelLogout-switch";
   #frontChannelLogoutInput = "frontchannelLogoutUrl";
   #backChannelLogoutInput = "backchannelLogoutUrl";
   #backChannelLogoutRequiredSwitchInput = "#backchannelLogoutSessionRequired";
   #backChannelLogoutRevoqueSwitch =
-    '.pf-c-form__group-control [for="backchannelLogoutRevokeOfflineSessions"] > .pf-c-switch__toggle';
+    '.pf-v5-c-form__group-control [for="backchannelLogoutRevokeOfflineSessions"] > .pf-v5-c-switch__toggle';
   #backChannelLogoutRevoqueSwitchInput =
     "#backchannelLogoutRevokeOfflineSessions";
 
@@ -106,14 +106,16 @@ export default class CreateClientPage extends CommonPage {
     return this;
   }
 
-  checkClientIdRequiredMessage(exist = true) {
-    cy.get(this.#clientIdError).should((!exist ? "not." : "") + "exist");
+  checkClientIdRequiredMessage() {
+    cy.get(this.#clientIdInput)
+      .parent()
+      .should("have.class", "pf-v5-c-form-control pf-m-error");
 
     return this;
   }
 
   checkGeneralSettingsStepActive() {
-    cy.get(".pf-c-wizard__nav-link")
+    cy.get(".pf-v5-c-wizard__nav-link")
       .contains("General settings")
       .should("have.class", "pf-m-current");
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
index 0c65f325c2..85198e8d6b 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
@@ -2,14 +2,14 @@ import PageObject from "../../../../components/PageObject";
 
 export default class AdvancedTab extends PageObject {
   #clusterNodesExpandBtn =
-    ".pf-c-expandable-section .pf-c-expandable-section__toggle";
+    ".pf-v5-c-expandable-section .pf-v5-c-expandable-section__toggle";
   #testClusterAvailability = "#testClusterAvailability";
   #emptyClusterElement = "empty-state";
   #registerNodeManuallyBtn = "no-nodes-registered-empty-action";
   #deleteClusterNodeDrpDwn =
-    '[aria-label="Registered cluster nodes"] [aria-label="Actions"]';
+    '[aria-label="Registered cluster nodes"] [aria-label="Kebab toggle"]';
   #deleteClusterNodeBtn =
-    '[aria-label="Registered cluster nodes"] [role="menu"] button';
+    '[aria-label="Registered cluster nodes"] [role="menu"] [type="button"]';
   #nodeHostInput = "node";
   #addNodeConfirmBtn = "#add-node-confirm";
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/tabs/InitialAccessTokenTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/tabs/InitialAccessTokenTab.ts
index c726035d5d..7e5b71422b 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/tabs/InitialAccessTokenTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/tabs/InitialAccessTokenTab.ts
@@ -6,7 +6,7 @@ export default class InitialAccessTokenTab extends CommonPage {
   #emptyAction = "no-initial-access-tokens-empty-action";
 
   #expirationNumberInput = "expiration";
-  #expirationText = "#expiration-helper";
+  #expirationText = ".pf-v5-c-helper-text__item-text";
   #countInput = "#count input";
   #countPlusBtn = '#count [aria-label="Plus"]';
   #saveBtn = "save";
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/AdminEventsTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/AdminEventsTab.ts
index 7f7e631316..d0d7af3d04 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/AdminEventsTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/AdminEventsTab.ts
@@ -32,7 +32,8 @@ const modalUtils = new ModalUtils();
 export default class AdminEventsTab extends PageObject {
   #searchAdminEventDrpDwnBtn = "dropdown-panel-btn";
   #searchEventsBtn = "search-events-btn";
-  #operationTypesInputFld = ".pf-c-form-control.pf-c-select__toggle-typeahead";
+  #operationTypesInputFld =
+    ".pf-v5-c-form-control.pf-v5-c-select__toggle-typeahead";
   #authAttrDataRow = 'tbody > tr > [data-label="Attribute"]';
   #authValDataRow = 'tbody > tr > [data-label="Value"]';
   #refreshBtn = "refresh-btn";
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/UserEventsTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/UserEventsTab.ts
index 740d0ea46f..7e9154eaf7 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/UserEventsTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/events/tabs/UserEventsTab.ts
@@ -25,7 +25,7 @@ export default class UserEventsTab extends PageObject {
   #searchUserEventDrpDwnToggle = "dropdown-panel-btn";
   #searchUserIdInput = "#kc-userId";
   #searchEventTypeSelectToggle =
-    ".pf-c-select.keycloak__events_search__type_select";
+    ".pf-v5-c-select.keycloak__events_search__type_select";
   #searchClientInput = "#kc-client";
   #searchDateFromInput = "#kc-dateFrom";
   #searchDateToInput = "#kc-dateTo";
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/MoveGroupModal.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/MoveGroupModal.ts
index ddefae8336..958d43ee51 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/MoveGroupModal.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/MoveGroupModal.ts
@@ -2,7 +2,7 @@ import ModalUtils from "../../../../util/ModalUtils";
 
 export default class MoveGroupModal extends ModalUtils {
   #moveButton = "moveHere-button";
-  #title = ".pf-c-modal-box__title";
+  #title = ".pf-v5-c-modal-box__title";
 
   clickRow(groupName: string) {
     cy.findByTestId(groupName).click();
@@ -10,7 +10,7 @@ export default class MoveGroupModal extends ModalUtils {
   }
 
   clickRoot() {
-    cy.get(".pf-c-breadcrumb__item > button").click();
+    cy.get(".pf-v5-c-breadcrumb__item > button").click();
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/SearchGroupPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/SearchGroupPage.ts
index 01b688eb97..08d406e5ab 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/SearchGroupPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/SearchGroupPage.ts
@@ -3,7 +3,7 @@ import GroupPage from "./GroupPage";
 
 export class SearchGroupPage extends GroupPage {
   #groupSearchField = "group-search";
-  #searchButton = "[data-testid='group-search'] > button";
+  #searchButton = "[data-testid='group-search'] button[type='submit']";
   #sidebarPage = new SidebarPage();
 
   public searchGroup(groupName: string) {
@@ -19,7 +19,7 @@ export class SearchGroupPage extends GroupPage {
   }
 
   public goToGroupChildGroupsFromTree(item: string) {
-    cy.get(".pf-c-tree-view__content").contains(item).click();
+    cy.get(".pf-v5-c-tree-view__content").contains(item).click();
     this.#sidebarPage.waitForPageLoad();
     return this;
   }
@@ -35,7 +35,10 @@ export class SearchGroupPage extends GroupPage {
   }
 
   public checkTerm(searchTerm: string) {
-    cy.get(".pf-c-chip-group").children().contains(searchTerm).should("exist");
+    cy.get(".pf-v5-c-chip-group")
+      .children()
+      .contains(searchTerm)
+      .should("exist");
     return this;
   }
 }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/group_details/GroupDetailPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/group_details/GroupDetailPage.ts
index e0ba78e6d9..944e3ef6cd 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/group_details/GroupDetailPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/groups/group_details/GroupDetailPage.ts
@@ -19,7 +19,7 @@ export default class GroupDetailPage extends GroupPage {
   #memberUsernameColumn = 'tbody > tr > [data-label="Username"]';
   #actionDrpDwnItemRenameGroup = "renameGroupAction";
   #actionDrpDwnItemDeleteGroup = "deleteGroup";
-  #headerGroupName = ".pf-l-level.pf-m-gutter";
+  #headerGroupName = ".pf-v5-l-level.pf-m-gutter";
   #renameGroupModalGroupNameInput = "name";
   #renameGroupModalRenameBtn = "renameGroup";
   #permissionSwitch = "permissionSwitch";
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/CreateProviderPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/CreateProviderPage.ts
index f56ff2b67a..f87dafcb4b 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/CreateProviderPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/CreateProviderPage.ts
@@ -1,6 +1,6 @@
 export default class CreateProviderPage {
   #github = "github";
-  #clientIdField = "clientId";
+  #clientIdField = "config.clientId";
   #clientIdError = "#config\\.clientSecret-helper";
   #clientSecretField = "config.clientSecret";
   #displayName = "displayName";
@@ -123,10 +123,9 @@ export default class CreateProviderPage {
   }
 
   shouldBeSuccessful() {
-    cy.findByTestId(this.#discoveryEndpoint).should(
-      "have.class",
-      "pf-m-success",
-    );
+    cy.findByTestId(this.#discoveryEndpoint)
+      .parent()
+      .should("have.class", "pf-m-success");
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts
index b9196279e3..5d0eaef769 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseAdvancedSettingsPage.ts
@@ -58,7 +58,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
   #storedTokensReadable = "#storedTokensReadable";
   #isAccessTokenJWT = "#isAccessTokenJWT";
   #acceptsPromptNoneForwardFromClientSwitch = "#acceptsPromptNone";
-  #advancedSettingsToggle = ".pf-c-expandable-section__toggle";
+  #advancedSettingsToggle = ".pf-v5-c-expandable-section__toggle";
   #passLoginHintSwitch = "#passLoginHint";
   #passMaxAgeSwitch = "#passMaxAge";
   #passCurrentLocaleSwitch = "#passCurrentLocale";
@@ -171,7 +171,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.get(this.#firstLoginFlowSelect).click();
     super.clickSelectMenuItem(
       loginFlowOption,
-      cy.get(".pf-c-select__menu-item").contains(loginFlowOption),
+      cy.get(".pf-v5-c-select__menu-item").contains(loginFlowOption),
     );
     return this;
   }
@@ -180,7 +180,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.get(this.#postLoginFlowSelect).click();
     super.clickSelectMenuItem(
       loginFlowOption,
-      cy.get(".pf-c-select__menu-item").contains(loginFlowOption),
+      cy.get(".pf-v5-c-select__menu-item").contains(loginFlowOption),
     );
     return this;
   }
@@ -191,7 +191,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.get(this.#clientAssertionSigningAlg).click();
     super.clickSelectMenuItem(
       clientAssertionSigningAlg,
-      cy.get(".pf-c-select__menu-item").contains(clientAssertionSigningAlg),
+      cy.get(".pf-v5-c-select__menu-item").contains(clientAssertionSigningAlg),
     );
     return this;
   }
@@ -205,7 +205,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.get(this.#syncModeSelect).click();
     super.clickSelectMenuItem(
       syncModeOption,
-      cy.get(".pf-c-select__menu-item").contains(syncModeOption),
+      cy.get(".pf-v5-c-select__menu-item").contains(syncModeOption),
     );
     return this;
   }
@@ -214,7 +214,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.get(this.#promptSelect).click();
     super.clickSelectMenuItem(
       promptOption,
-      cy.get(".pf-c-select__menu-item").contains(promptOption).parent(),
+      cy.get(".pf-v5-c-select__menu-item").contains(promptOption).parent(),
     );
     return this;
   }
@@ -393,7 +393,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.findByTestId("jump-link-openid-connect-settings").click();
     cy.get(this.#clientAuth)
       .click()
-      .get(".pf-c-select__menu-item")
+      .get(".pf-v5-c-select__menu-item")
       .contains(option)
       .click();
     return this;
@@ -403,7 +403,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.findByTestId("jump-link-openid-connect-settings").click();
     cy.get(this.#clientAssertionSigningAlg)
       .click()
-      .get(".pf-c-select__menu-item")
+      .get(".pf-v5-c-select__menu-item")
       .contains(alg)
       .click();
     return this;
@@ -413,25 +413,25 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
     cy.findByTestId("jump-link-openid-connect-settings").click();
     cy.get(this.#clientAuth)
       .click()
-      .get(".pf-c-select__menu-item")
+      .get(".pf-v5-c-select__menu-item")
       .contains(ClientAuthentication.post)
       .click();
     cy.get(this.#jwtX509HeadersSwitch).should("not.exist");
     cy.get(this.#clientAuth)
       .click()
-      .get(".pf-c-select__menu-item")
+      .get(".pf-v5-c-select__menu-item")
       .contains(ClientAuthentication.basicAuth)
       .click();
     cy.get(this.#jwtX509HeadersSwitch).should("not.exist");
     cy.get(this.#clientAuth)
       .click()
-      .get(".pf-c-select__menu-item")
+      .get(".pf-v5-c-select__menu-item")
       .contains(ClientAuthentication.jwt)
       .click();
     cy.get(this.#jwtX509HeadersSwitch).should("not.exist");
     cy.get(this.#clientAuth)
       .click()
-      .get(".pf-c-select__menu-item")
+      .get(".pf-v5-c-select__menu-item")
       .contains(ClientAuthentication.jwtPrivKey)
       .click();
     cy.get(this.#jwtX509HeadersSwitch).should("exist");
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseGeneralSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseGeneralSettingsPage.ts
index 0ff04cac37..022916b118 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseGeneralSettingsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/identity_providers/ProviderBaseGeneralSettingsPage.ts
@@ -1,16 +1,17 @@
+import FormValidation from "../../../../forms/FormValidation";
 import PageObject from "../../components/PageObject";
 import Masthead from "../../Masthead";
 
 const masthead = new Masthead();
 
 export default class ProviderBaseGeneralSettingsPage extends PageObject {
-  #redirectUriGroup = ".pf-c-clipboard-copy__group";
-  protected clientIdInput = "#kc-client-id";
+  #redirectUriGroup = ".pf-v5-c-clipboard-copy__group";
+  protected clientIdInput = "config.clientId";
   protected clientSecretInput = "config.clientSecret";
   #displayOrderInput = "#kc-display-order";
   #addBtn = "createProvider";
   #cancelBtn = "cancel";
-  #requiredFieldErrorMsg = ".pf-c-form__helper-text.pf-m-error";
+  #requiredFieldErrorMsg = ".pf-v5-c-form__helper-text.pf-m-error";
   protected requiredFields: string[] = [
     this.clientIdInput,
     this.clientSecretInput,
@@ -23,9 +24,9 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
 
   public typeClientId(clientId: string) {
     if (clientId) {
-      cy.get(this.clientIdInput).type(clientId);
+      cy.findByTestId(this.clientIdInput).type(clientId);
     } else {
-      cy.get(this.clientIdInput).clear();
+      cy.findByTestId(this.clientIdInput).clear();
     }
     return this;
   }
@@ -71,7 +72,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
   }
 
   public assertClientIdInputEqual(text: string) {
-    cy.get(this.clientIdInput).should("have.text", text);
+    cy.findByTestId(this.clientIdInput).should("have.text", text);
     return this;
   }
 
@@ -93,17 +94,9 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
   protected assertCommonRequiredFields(requiredFields: string[]) {
     requiredFields.forEach((elementLocator) => {
       if (elementLocator.includes("#")) {
-        cy.get(elementLocator)
-          .parent()
-          .parent()
-          .find(this.#requiredFieldErrorMsg)
-          .should("exist");
+        FormValidation.assertRequired(cy.get(elementLocator));
       } else {
-        cy.findByTestId(elementLocator)
-          .parent()
-          .parent()
-          .find(this.#requiredFieldErrorMsg)
-          .should("exist");
+        FormValidation.assertRequired(cy.findByTestId(elementLocator));
       }
     });
     return this;
@@ -128,7 +121,7 @@ export default class ProviderBaseGeneralSettingsPage extends PageObject {
   }
 
   protected assertCommonFilledDataEqual(idpName: string) {
-    cy.get(this.clientIdInput).should(
+    cy.findByTestId(this.clientIdInput).should(
       "have.value",
       this.testData["ClientId"] + idpName,
     );
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts
index f7a779edf3..4e3c77d5c6 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/providers/ProviderPage.ts
@@ -362,7 +362,7 @@ export default class ProviderPage {
 
       case this.#roleLdapMapper:
         cy.findByTestId(this.#ldapRolesDnInput).clear().type(ldapDnValue);
-        cy.get(".pf-c-form__group")
+        cy.get(".pf-v5-c-form__group")
           .contains("Client ID")
           .parent()
           .parent()
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/AssociatedRolesPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/AssociatedRolesPage.ts
index 69524f83df..84456d5818 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/AssociatedRolesPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/AssociatedRolesPage.ts
@@ -41,7 +41,7 @@ export default class AssociatedRolesPage {
       cy.findByTestId(this.#filterTypeDropdownItem).click();
     }
 
-    cy.findByTestId(".pf-c-spinner__tail-ball").should("not.exist");
+    cy.findByTestId(".pf-v5-c-spinner__tail-ball").should("not.exist");
 
     cy.get(this.#addRoleTable)
       .contains(roleName)
@@ -63,7 +63,7 @@ export default class AssociatedRolesPage {
 
     cy.findByTestId(this.#filterTypeDropdownItem).click();
 
-    cy.findByTestId(".pf-c-spinner__tail-ball").should("not.exist");
+    cy.findByTestId(".pf-v5-c-spinner__tail-ball").should("not.exist");
 
     cy.get(this.#addRoleTable)
       .contains(roleName)
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts
index adfef646d2..c6466a2305 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_roles/CreateRealmRolePage.ts
@@ -19,8 +19,10 @@ class CreateRealmRolePage {
     return this;
   }
 
-  checkRealmRoleNameRequiredMessage(exist = true) {
-    cy.get(this.#realmRoleNameError).should((!exist ? "not." : "") + "exist");
+  checkRealmRoleNameRequiredMessage() {
+    cy.findByTestId(this.#realmRoleNameInput)
+      .parent()
+      .should("have.class", "pf-v5-c-form-control pf-m-error");
 
     return this;
   }
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
index a5f85080a5..fbeb463a0d 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
@@ -1,4 +1,6 @@
+import { v4 as uuid } from "uuid";
 import Select from "../../../../forms/Select";
+
 import CommonPage from "../../../CommonPage";
 import ListingPage from "../../ListingPage";
 import RealmSettingsEventsTab from "./tabs/RealmSettingsEventsTab";
@@ -28,7 +30,6 @@ export default class RealmSettingsPage extends CommonPage {
   adminThemeList = "#kc-admin-ui-theme + ul";
   selectEmailTheme = "#kc-email-theme";
   emailThemeList = "#kc-email-theme + ul";
-  hostInput = "smtpServer.host";
   ssoSessionIdleSelectMenu = "#kc-sso-session-idle-select-menu";
   ssoSessionIdleSelectMenuList = "#kc-sso-session-idle-select-menu > div > ul";
   ssoSessionMaxSelectMenu = "#kc-sso-session-max-select-menu";
@@ -77,7 +78,6 @@ export default class RealmSettingsPage extends CommonPage {
   duplicateEmailsSwitch = "duplicate-emails-switch";
   verifyEmailSwitch = "verify-email-switch";
   authSwitch = "email-authentication-switch";
-  fromInput = "smtpServer.from";
   enableSslCheck = "enable-ssl";
   enableStartTlsCheck = "enable-start-tls";
   addProviderDropdown = "addProviderDropdown";
@@ -185,13 +185,13 @@ export default class RealmSettingsPage extends CommonPage {
   #cancelNewClientProfile = "cancelCreateProfile";
   #createPolicyEmptyStateBtn = "no-client-policies-empty-action";
   #createPolicyBtn = "createPolicy";
-  #newClientPolicyNameInput = "client-policy-name";
+  #newClientPolicyNameInput = "name";
   #newClientPolicyDescriptionInput = "client-policy-description";
   #saveNewClientPolicyBtn = "saveCreatePolicy";
   #cancelNewClientPolicyBtn = "cancelCreatePolicy";
-  #alertMessage = ".pf-c-alert__title";
-  #modalDialogTitle = ".pf-c-modal-box__title-text";
-  #modalDialogBodyText = ".pf-c-modal-box__body";
+  #alertMessage = ".pf-v5-c-alert__title";
+  #modalDialogTitle = ".pf-v5-c-modal-box__title-text";
+  #modalDialogBodyText = ".pf-v5-c-modal-box__body";
   #deleteDialogCancelBtn = "#modal-cancel";
   #jsonEditorSaveBtn = "jsonEditor-saveBtn";
   #jsonEditorSavePoliciesBtn = "jsonEditor-policies-saveBtn";
@@ -206,9 +206,9 @@ export default class RealmSettingsPage extends CommonPage {
   #clientPolicy = 'a[href*="realm-settings/client-policies/Test/edit-policy"]';
   #reloadBtn = "reloadProfile";
   #addExecutor = "addExecutor";
-  #addExecutorDrpDwn = ".pf-c-select__toggle";
+  #addExecutorDrpDwn = ".pf-v5-c-select__toggle";
   #addExecutorDrpDwnOption = "executorType-select";
-  #addExecutorCancelBtn = ".pf-c-form__actions a";
+  #addExecutorCancelBtn = ".pf-v5-c-form__actions a";
   #addExecutorSaveBtn = "addExecutor-saveBtn";
   #availablePeriodExecutorFld = "available-period";
   #editExecutorBtn =
@@ -217,20 +217,21 @@ export default class RealmSettingsPage extends CommonPage {
 
   #listingPage = new ListingPage();
   #addCondition = "addCondition";
-  #addConditionDrpDwn = ".pf-c-select__toggle";
+  #addConditionDrpDwn = ".pf-v5-c-select__toggle";
   #addConditionDrpDwnOption = "conditionType-select";
   #addConditionCancelBtn = "addCondition-cancelBtn";
   #addConditionSaveBtn = "addCondition-saveBtn";
   #clientRolesConditionLink = "client-roles-condition-link";
   #clientScopesConditionLink = "client-scopes-condition-link";
-  #eventListenersFormLabel = ".pf-c-form__label-text";
-  #eventListenersDrpDwn = ".pf-c-select.kc_eventListeners_select";
+  #eventListenersFormLabel = ".pf-v5-c-form__label-text";
+  #eventListenersDrpDwn = ".pf-v5-c-select.kc_eventListeners_select";
   #eventListenersSaveBtn = "saveEventListenerBtn";
   #eventListenersRevertBtn = "revertEventListenerBtn";
-  #eventListenersInputFld = ".pf-c-form-control.pf-c-select__toggle-typeahead";
-  #eventListenersDrpDwnOption = ".pf-c-select__menu";
+  #eventListenersInputFld =
+    ".pf-v5-c-form-control.pf-v5-c-select__toggle-typeahead";
+  #eventListenersDrpDwnOption = ".pf-v5-c-select__menu";
   #eventListenersDrwDwnSelect =
-    ".pf-c-button.pf-c-select__toggle-button.pf-m-plain";
+    ".pf-v5-c-button.pf-v5-c-select__toggle-button.pf-m-plain";
   #eventListenerRemove = '[data-ouia-component-id="Remove"]';
   #roleSelect = "config.roles0";
   #selectScopeButton = "addValue";
@@ -275,6 +276,14 @@ export default class RealmSettingsPage extends CommonPage {
     return cy.get("#unmanagedAttributePolicy");
   }
 
+  getFromInput() {
+    return cy.findByTestId("smtpServer.from");
+  }
+
+  getHostInput() {
+    return cy.findByTestId("smtpServer.host");
+  }
+
   goToEventsTab() {
     this.tabUtils().clickTab(RealmSettingsTab.Events);
     return this.#realmSettingsEventsTab;
@@ -318,8 +327,8 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   fillHostField(host: string) {
-    cy.findByTestId(this.hostInput).clear();
-    cy.findByTestId(this.hostInput).type(host);
+    this.getHostInput().clear();
+    this.getHostInput().type(host);
     return this;
   }
 
@@ -402,10 +411,10 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   addSenderEmail(senderEmail: string) {
-    cy.findByTestId(this.fromInput).clear();
+    this.getFromInput().clear();
 
     if (senderEmail) {
-      cy.findByTestId(this.fromInput).type(senderEmail);
+      this.getFromInput().type(senderEmail);
     }
 
     return this;
@@ -453,10 +462,13 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   toggleSwitch(switchName: string, waitFor: boolean | undefined = true) {
-    cy.intercept("/admin/realms/*").as("load");
+    const loadName = `load-${uuid()}`;
+    if (waitFor) {
+      cy.intercept({ path: "/admin/realms/*", times: 1 }).as(loadName);
+    }
     cy.findByTestId(switchName).click({ force: true });
     if (waitFor) {
-      cy.wait("@load");
+      cy.wait(`@${loadName}`);
     }
 
     return this;
@@ -750,7 +762,7 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   shouldRemoveAllEventListeners() {
-    cy.get(".pf-c-button.pf-m-plain.pf-c-select__toggle-clear").click();
+    cy.get(".pf-v5-c-button.pf-m-plain.pf-v5-c-select__toggle-clear").click();
     cy.findByTestId(this.#eventListenersSaveBtn).click();
     cy.get(this.#eventListenersDrpDwn).should("not.have.text", "jboss-logging");
     cy.get(this.#eventListenersDrpDwn).should("not.have.text", "email");
@@ -918,7 +930,7 @@ export default class RealmSettingsPage extends CommonPage {
       "be.visible",
       "Success! Executor created successfully",
     );
-    cy.get('ul[class*="pf-c-data-list"]').should(
+    cy.get('ul[class*="pf-v5-c-data-list"]').should(
       "have.text",
       "secure-ciba-signed-authn-req",
     );
@@ -933,7 +945,7 @@ export default class RealmSettingsPage extends CommonPage {
     );
     cy.findByTestId(this.modalConfirm).contains("Delete");
     cy.get(this.#deleteDialogCancelBtn).contains("Cancel").click();
-    cy.get('ul[class*="pf-c-data-list"]').should(
+    cy.get('ul[class*="pf-v5-c-data-list"]').should(
       "have.text",
       "secure-ciba-signed-authn-req",
     );
@@ -977,7 +989,7 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   checkExecutorNotInList() {
-    cy.get('ul[class*="pf-c-data-list"]').should(
+    cy.get('ul[class*="pf-v5-c-data-list"]').should(
       "have.text",
       "secure-ciba-signed-authn-req",
     );
@@ -1148,7 +1160,10 @@ export default class RealmSettingsPage extends CommonPage {
       "be.visible",
       "Success! Condition created successfully",
     );
-    cy.get('ul[class*="pf-c-data-list"]').should("have.text", "client-roles");
+    cy.get('ul[class*="pf-v5-c-data-list"]').should(
+      "have.text",
+      "client-roles",
+    );
   }
 
   addClientScopes() {
@@ -1174,7 +1189,7 @@ export default class RealmSettingsPage extends CommonPage {
       "be.visible",
       "Success! Condition created successfully",
     );
-    cy.get('ul[class*="pf-c-data-list"]').contains("client-scopes");
+    cy.get('ul[class*="pf-v5-c-data-list"]').contains("client-scopes");
   }
 
   shouldEditClientRolesCondition() {
@@ -1207,7 +1222,7 @@ export default class RealmSettingsPage extends CommonPage {
   }
 
   checkConditionsListContains(name: string) {
-    cy.get('ul[class*="pf-c-data-list"]').contains(name);
+    cy.get('ul[class*="pf-v5-c-data-list"]').contains(name);
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts
index 7db7487543..3f6adaf8f5 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserProfile.ts
@@ -27,13 +27,13 @@ export default class UserProfile {
   #removeValidatorBtn = "deleteValidator";
   #deleteValidatorBtn = "confirm";
   #cancelRemovingValidatorBtn = "cancel";
-  #newAttributeRequiredField = "input#kc-required.pf-c-switch__input";
+  #newAttributeRequiredField = "input#kc-required.pf-v5-c-switch__input";
   #newAttributeUserEdit = "user-edit";
   #newAttributeAdminEdit = "admin-edit";
   #newAttributeUserView = "user-view";
   #newAttributeAdminView = "admin-view";
   #createAttributesGroupButton = "create-attributes-groups-action";
-  #newAttributesGroupNameInput = "input#kc-name";
+  #newAttributesGroupNameInput = "name";
   #newAttributesGroupDisplayNameInput = 'input[name="displayHeader"]';
   #saveNewAttributesGroupBtn = "saveGroupBtn";
 
@@ -126,7 +126,7 @@ export default class UserProfile {
   }
 
   createAttributeGroup(name: string, displayName: string) {
-    cy.get(this.#newAttributesGroupNameInput).type(name);
+    cy.findByTestId(this.#newAttributesGroupNameInput).type(name);
     cy.get(this.#newAttributesGroupDisplayNameInput).type(displayName);
     return this;
   }
@@ -143,7 +143,7 @@ export default class UserProfile {
 
   setAttributeGroup(group: string) {
     cy.get("#kc-attributeGroup").click();
-    cy.get("button.pf-c-select__menu-item").contains(group).click();
+    cy.get("button.pf-v5-c-select__menu-item").contains(group).click();
 
     return this;
   }
@@ -196,7 +196,7 @@ export default class UserProfile {
   }
 
   #textArea() {
-    return cy.get(".pf-c-code-editor__code textarea");
+    return cy.get(".pf-v5-c-code-editor__code textarea");
   }
 
   #getText() {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserRegistration.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserRegistration.ts
index 9baa16cd99..8d4e8f37d3 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserRegistration.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/UserRegistration.ts
@@ -44,7 +44,7 @@ export default class UserRegistration {
 
 export class GroupPickerDialog {
   #addButton = "add-button";
-  #title = ".pf-c-modal-box__title";
+  #title = ".pf-v5-c-modal-box__title";
 
   clickRow(groupName: string) {
     cy.findByTestId(groupName).within(() => cy.get("input").click());
@@ -52,7 +52,7 @@ export class GroupPickerDialog {
   }
 
   clickRoot() {
-    cy.get(".pf-c-breadcrumb__item > button").click();
+    cy.get(".pf-v5-c-breadcrumb__item > button").click();
     return this;
   }
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CreateUserPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CreateUserPage.ts
index 0ae12d78a9..b2df86a64f 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CreateUserPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CreateUserPage.ts
@@ -86,12 +86,12 @@ export default class CreateUserPage {
   ) {
     this.#getSelectFieldButton(attrName).should(
       "have.class",
-      "pf-c-select__toggle",
+      "pf-v5-c-select__toggle",
     );
 
     const valueToCheck = expectedValue ? expectedValue : this.emptyOptionValue;
     this.#getSelectFieldButton(attrName)
-      .find(".pf-c-select__toggle-text")
+      .find(".pf-v5-c-select__toggle-text")
       .invoke("text")
       .should("eq", valueToCheck);
 
@@ -117,7 +117,7 @@ export default class CreateUserPage {
   #getSelectOptions(attrName: string) {
     return this.#getSelectFieldButton(attrName)
       .parent()
-      .find(".pf-c-select__menu-item");
+      .find(".pf-v5-c-select__menu-item");
   }
 
   #toggleSelectField(
@@ -160,7 +160,7 @@ export default class CreateUserPage {
   }
 
   assertAttributeLabel(attrName: string, expectedText: string) {
-    cy.get(`.pf-c-form__label[for='${attrName}'] .pf-c-form__label-text`)
+    cy.get(`.pf-v5-c-form__label[for='${attrName}'] .pf-v5-c-form__label-text`)
       .contains(expectedText)
       .should("exist");
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts
index 5710875b9b..450b56d2cc 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/CredentialsPage.ts
@@ -22,7 +22,7 @@ export default class CredentialsPage {
   readonly #labelField = "userLabelFld";
   readonly #editConfirmationBtn = "editUserLabelAcceptBtn";
   readonly #showDataDialogBtn = "showDataBtn";
-  readonly #closeDataDialogBtn = '.pf-c-modal-box [aria-label^="Close"]';
+  readonly #closeDataDialogBtn = '.pf-v5-c-modal-box [aria-label^="Close"]';
 
   goToCredentialsTab() {
     cy.intercept("/admin/realms/*/users/*/credentials").as("load");
@@ -57,7 +57,7 @@ export default class CredentialsPage {
   }
 
   clickResetModalAction(index: number) {
-    cy.get("[data-testid=credential-reset-modal] .pf-c-select__menu")
+    cy.get("[data-testid=credential-reset-modal] .pf-v5-c-select__menu")
       .contains(this.#resetActions[index])
       .click();
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/user_details/tabs/IdentityProviderLinksTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/user_details/tabs/IdentityProviderLinksTab.ts
index 354a203013..78981895a5 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/user_details/tabs/IdentityProviderLinksTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/users/user_details/tabs/IdentityProviderLinksTab.ts
@@ -7,7 +7,7 @@ const masthead = new Masthead();
 export default class IdentityProviderLinksTab {
   #linkedProvidersSection = ".kc-linked-idps";
   #availableProvidersSection = ".kc-available-idps";
-  #linkAccountBtn = ".pf-c-button.pf-m-link";
+  #linkAccountBtn = ".pf-v5-c-button.pf-m-link";
   #linkAccountModalIdentityProviderInput = "idpNameInput";
   #linkAccountModalUserIdInput = "userId";
   #linkAccountModalUsernameInput = "userName";
diff --git a/js/apps/admin-ui/cypress/support/util/ModalUtils.ts b/js/apps/admin-ui/cypress/support/util/ModalUtils.ts
index 7122a9ea56..1639b6a22d 100644
--- a/js/apps/admin-ui/cypress/support/util/ModalUtils.ts
+++ b/js/apps/admin-ui/cypress/support/util/ModalUtils.ts
@@ -2,12 +2,12 @@ import PageObject from "../pages/admin-ui/components/PageObject";
 import TablePage from "../pages/admin-ui/components/TablePage";
 
 export default class ModalUtils extends PageObject {
-  #modalDiv = ".pf-c-modal-box";
-  #modalTitle = ".pf-c-modal-box .pf-c-modal-box__title-text";
-  #modalMessage = ".pf-c-modal-box .pf-c-modal-box__body";
+  #modalDiv = ".pf-v5-c-modal-box";
+  #modalTitle = ".pf-v5-c-modal-box .pf-v5-c-modal-box__title-text";
+  #modalMessage = ".pf-v5-c-modal-box .pf-v5-c-modal-box__body";
   #confirmModalBtn = "confirm";
   #cancelModalBtn = "cancel";
-  #closeModalBtn = ".pf-c-modal-box .pf-m-plain";
+  #closeModalBtn = ".pf-v5-c-modal-box .pf-m-plain";
   #copyToClipboardBtn = '[id*="copy-button"]';
   #addModalDropdownBtn = "#add-dropdown > button";
   #addModalDropdownItem = "#add-dropdown [role='menuitem']";
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
index adae9f4297..6550032217 100644
--- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
+++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
@@ -3115,3 +3115,4 @@ loginUsernamePlaceholder=Login username
 ownerHelp=Owner for this resource.
 parRequestUriLifespan=Lifetime of the Request URI for Pushed Authorization Request
 parRequestUriLifespanHelp=Number that represents the lifetime of the request URI.  The default value is 1 minute.
+identityBrokeringLink=Identity brokering link
\ No newline at end of file
diff --git a/js/apps/admin-ui/package.json b/js/apps/admin-ui/package.json
index d4db36d94b..8ada0cf968 100644
--- a/js/apps/admin-ui/package.json
+++ b/js/apps/admin-ui/package.json
@@ -62,12 +62,12 @@
   },
   "dependencies": {
     "@keycloak/keycloak-admin-client": "workspace:*",
-    "@patternfly/patternfly": "^4.224.5",
-    "@patternfly/react-code-editor": "^4.82.121",
-    "@patternfly/react-core": "^4.278.0",
-    "@patternfly/react-icons": "^4.93.7",
-    "@patternfly/react-styles": "^4.92.8",
-    "@patternfly/react-table": "^4.113.6",
+    "@patternfly/patternfly": "^5.2.1",
+    "@patternfly/react-code-editor": "^5.2.3",
+    "@patternfly/react-core": "^5.2.3",
+    "@patternfly/react-icons": "^5.2.1",
+    "@patternfly/react-styles": "^5.2.1",
+    "@patternfly/react-table": "^5.2.4",
     "admin-ui": "file:",
     "dagre": "^0.8.5",
     "file-saver": "^2.0.5",
diff --git a/js/apps/admin-ui/public/discovery-load-indicator.svg b/js/apps/admin-ui/public/discovery-load-indicator.svg
deleted file mode 100644
index 74c7d7eed6..0000000000
--- a/js/apps/admin-ui/public/discovery-load-indicator.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" fill="none" stroke="#0066cc" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform></circle></svg>
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/PageHeader.tsx b/js/apps/admin-ui/src/PageHeader.tsx
index 7fc693135c..6b7bf05cad 100644
--- a/js/apps/admin-ui/src/PageHeader.tsx
+++ b/js/apps/admin-ui/src/PageHeader.tsx
@@ -1,6 +1,5 @@
+import { Avatar, Brand } from "@patternfly/react-core";
 import {
-  Avatar,
-  Brand,
   Dropdown,
   DropdownItem,
   DropdownSeparator,
@@ -10,7 +9,7 @@ import {
   PageHeaderTools,
   PageHeaderToolsGroup,
   PageHeaderToolsItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { HelpIcon } from "@patternfly/react-icons";
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -106,7 +105,7 @@ const KebabDropdown = () => {
       id="user-dropdown-kebab"
       isPlain
       position="right"
-      toggle={<KebabToggle onToggle={setDropdownOpen} />}
+      toggle={<KebabToggle onToggle={(_event, val) => setDropdownOpen(val)} />}
       isOpen={isDropdownOpen}
       dropdownItems={kebabDropdownItems}
     />
@@ -124,7 +123,7 @@ const UserDropdown = () => {
       id="user-dropdown"
       isOpen={isDropdownOpen}
       toggle={
-        <DropdownToggle onToggle={setDropdownOpen}>
+        <DropdownToggle onToggle={(_event, val) => setDropdownOpen(val)}>
           {whoAmI.getDisplayName()}
         </DropdownToggle>
       }
diff --git a/js/apps/admin-ui/src/PageNav.tsx b/js/apps/admin-ui/src/PageNav.tsx
index b00df3e24b..0baba946c7 100644
--- a/js/apps/admin-ui/src/PageNav.tsx
+++ b/js/apps/admin-ui/src/PageNav.tsx
@@ -5,6 +5,7 @@ import {
   NavItem,
   NavList,
   PageSidebar,
+  PageSidebarBody,
 } from "@patternfly/react-core";
 import { FormEvent } from "react";
 import { useTranslation } from "react-i18next";
@@ -47,7 +48,7 @@ const LeftNav = ({ title, path, id }: LeftNavProps) => {
         id={"nav-item" + path.replace("/", "-")}
         to={`/${encodedRealm}${path}`}
         className={({ isActive }) =>
-          `pf-c-nav__link${isActive ? " pf-m-current" : ""}`
+          `pf-v5-c-nav__link${isActive ? " pf-m-current" : ""}`
         }
       >
         {t(title)}
@@ -94,10 +95,9 @@ export const PageNav = () => {
   const isOnAddRealm = !!useMatch(AddRealmRoute.path);
 
   return (
-    <PageSidebar
-      className="keycloak__page_nav__nav"
-      nav={
-        <Nav onSelect={onSelect}>
+    <PageSidebar className="keycloak__page_nav__nav">
+      <PageSidebarBody>
+        <Nav onSelect={(_event, item) => onSelect(item as SelectedItem)}>
           <NavList>
             <NavItem className="keycloak__page_nav__nav_item__realm-selector">
               <RealmSelector />
@@ -133,7 +133,7 @@ export const PageNav = () => {
             </NavGroup>
           )}
         </Nav>
-      }
-    />
+      </PageSidebarBody>
+    </PageSidebar>
   );
 };
diff --git a/js/apps/admin-ui/src/authentication/AuthenticationSection.tsx b/js/apps/admin-ui/src/authentication/AuthenticationSection.tsx
index 80b07707ef..34d98a17f0 100644
--- a/js/apps/admin-ui/src/authentication/AuthenticationSection.tsx
+++ b/js/apps/admin-ui/src/authentication/AuthenticationSection.tsx
@@ -185,7 +185,7 @@ export default function AuthenticationSection() {
         helpUrl={helpUrls.authenticationUrl}
         divider={false}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           isBox
           defaultLocation={toAuthentication({ realm: realmName, tab: "flows" })}
diff --git a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
index 81c7bc1286..5bca22f5c5 100644
--- a/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
+++ b/js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
@@ -5,8 +5,8 @@ import {
   ButtonVariant,
   Form,
   Modal,
-  SelectVariant,
 } from "@patternfly/react-core";
+import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { SelectControl } from "ui-shared";
@@ -53,7 +53,7 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
     <Modal
       title={t("bindFlow")}
       variant="small"
-      onClose={onClose}
+      onClose={() => onClose()}
       actions={[
         <Button key="confirm" data-testid="save" type="submit" form="bind-form">
           {t("save")}
diff --git a/js/apps/admin-ui/src/authentication/FlowDetails.tsx b/js/apps/admin-ui/src/authentication/FlowDetails.tsx
index d5cfe05c2b..bdbc05c121 100644
--- a/js/apps/admin-ui/src/authentication/FlowDetails.tsx
+++ b/js/apps/admin-ui/src/authentication/FlowDetails.tsx
@@ -1,4 +1,3 @@
-import AuthenticationExecutionInfoRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationExecutionInfoRepresentation";
 import AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
 import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
 import AuthenticatorConfigRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
@@ -7,7 +6,8 @@ import {
   Button,
   ButtonVariant,
   DataList,
-  DropdownItem,
+  DragDrop,
+  Droppable,
   Label,
   PageSection,
   ToggleGroup,
@@ -16,11 +16,11 @@ import {
   ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { DomainIcon, TableIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
-
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
@@ -63,8 +63,6 @@ export default function FlowDetails() {
   const [tableView, setTableView] = useState(true);
   const [flow, setFlow] = useState<AuthenticationFlowRepresentation>();
   const [executionList, setExecutionList] = useState<ExecutionList>();
-  const [dragged, setDragged] =
-    useState<AuthenticationExecutionInfoRepresentation>();
   const [liveText, setLiveText] = useState("");
 
   const [showAddExecutionDialog, setShowAddExecutionDialog] =
@@ -403,63 +401,69 @@ export default function FlowDetails() {
             </Toolbar>
             <DeleteConfirm />
             {tableView && (
-              <DataList
-                aria-label={t("flows")}
-                onDragFinish={(order) => {
-                  const withoutHeaderId = order.slice(1);
-                  setLiveText(
-                    t("onDragFinish", { list: dragged?.displayName }),
-                  );
-                  const change = executionList.getChange(
-                    dragged!,
-                    withoutHeaderId,
-                  );
-                  executeChange(dragged!, change);
-                }}
-                onDragStart={(id) => {
-                  const item = executionList.findExecution(id)!;
+              <DragDrop
+                onDrag={({ index }) => {
+                  const item = executionList.findExecution(index)!;
                   setLiveText(t("onDragStart", { item: item.displayName }));
-                  setDragged(item);
                   if (!item.isCollapsed) {
                     item.isCollapsed = true;
                     setExecutionList(executionList.clone());
                   }
+                  return true;
+                }}
+                onDragMove={({ index }) => {
+                  const dragged = executionList.findExecution(index);
+                  setLiveText(t("onDragMove", { item: dragged?.displayName }));
+                }}
+                onDrop={(source, dest) => {
+                  if (dest) {
+                    const dragged = executionList.findExecution(source.index)!;
+                    const order = executionList.order().map((ex) => ex.id!);
+                    setLiveText(
+                      t("onDragFinish", { list: dragged.displayName }),
+                    );
+
+                    const [removed] = order.splice(source.index, 1);
+                    order.splice(dest.index, 0, removed);
+                    const change = executionList.getChange(dragged, order);
+                    executeChange(dragged, change);
+                    return true;
+                  } else {
+                    setLiveText(t("onDragCancel"));
+                    return false;
+                  }
                 }}
-                onDragMove={() =>
-                  setLiveText(t("onDragMove", { item: dragged?.displayName }))
-                }
-                onDragCancel={() => setLiveText(t("onDragCancel"))}
-                itemOrder={[
-                  "header",
-                  ...executionList.order().map((ex) => ex.id!),
-                ]}
               >
-                <FlowHeader />
-                <>
-                  {executionList.expandableList.map((execution) => (
-                    <FlowRow
-                      builtIn={!!builtIn}
-                      key={execution.id}
-                      execution={execution}
-                      onRowClick={(execution) => {
-                        execution.isCollapsed = !execution.isCollapsed;
-                        setExecutionList(executionList.clone());
-                      }}
-                      onRowChange={update}
-                      onAddExecution={(execution, type) =>
-                        addExecution(execution.displayName!, type)
-                      }
-                      onAddFlow={(execution, flow) =>
-                        addFlow(execution.displayName!, flow)
-                      }
-                      onDelete={(execution) => {
-                        setSelectedExecution(execution);
-                        toggleDeleteDialog();
-                      }}
-                    />
-                  ))}
-                </>
-              </DataList>
+                <Droppable hasNoWrapper>
+                  <DataList aria-label={t("flows")}>
+                    <FlowHeader />
+                    <>
+                      {executionList.expandableList.map((execution) => (
+                        <FlowRow
+                          builtIn={!!builtIn}
+                          key={execution.id}
+                          execution={execution}
+                          onRowClick={(execution) => {
+                            execution.isCollapsed = !execution.isCollapsed;
+                            setExecutionList(executionList.clone());
+                          }}
+                          onRowChange={update}
+                          onAddExecution={(execution, type) =>
+                            addExecution(execution.displayName!, type)
+                          }
+                          onAddFlow={(execution, flow) =>
+                            addFlow(execution.displayName!, flow)
+                          }
+                          onDelete={(execution) => {
+                            setSelectedExecution(execution);
+                            toggleDeleteDialog();
+                          }}
+                        />
+                      ))}
+                    </>
+                  </DataList>
+                </Droppable>
+              </DragDrop>
             )}
             {flow && (
               <>
@@ -489,7 +493,7 @@ export default function FlowDetails() {
                 )}
               </>
             )}
-            <div className="pf-screen-reader" aria-live="assertive">
+            <div className="pf-v5-screen-reader" aria-live="assertive">
               {liveText}
             </div>
           </>
diff --git a/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx b/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx
index 0629ce0482..0add04d719 100644
--- a/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx
+++ b/js/apps/admin-ui/src/authentication/components/AddFlowDropdown.tsx
@@ -1,10 +1,10 @@
 import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
+import { Tooltip } from "@patternfly/react-core";
 import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
-  Tooltip,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { PlusIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -53,7 +53,10 @@ export const AddFlowDropdown = ({
           data-testid={`${execution.displayName}-edit-dropdown`}
           isOpen={open}
           toggle={
-            <DropdownToggle onToggle={setOpen} aria-label={t("add")}>
+            <DropdownToggle
+              onToggle={(_event, val) => setOpen(val)}
+              aria-label={t("add")}
+            >
               <PlusIcon />
             </DropdownToggle>
           }
diff --git a/js/apps/admin-ui/src/authentication/components/DraggableTable.tsx b/js/apps/admin-ui/src/authentication/components/DraggableTable.tsx
index 2328394730..238c8aa790 100644
--- a/js/apps/admin-ui/src/authentication/components/DraggableTable.tsx
+++ b/js/apps/admin-ui/src/authentication/components/DraggableTable.tsx
@@ -1,3 +1,17 @@
+import styles from "@patternfly/react-styles/css/components/DataList/data-list";
+import {
+  ActionsColumn,
+  IAction,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  type TableProps,
+} from "@patternfly/react-table";
+import type { ThInfoType } from "@patternfly/react-table/dist/esm/components/Table/base/types";
+import { get } from "lodash-es";
 import {
   DragEvent as ReactDragEvent,
   ReactNode,
@@ -6,20 +20,6 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { get } from "lodash-es";
-import {
-  ActionsColumn,
-  IAction,
-  TableComposable,
-  TableComposableProps,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
-import { ThInfoType } from "@patternfly/react-table/components/Table/base/types";
-import styles from "@patternfly/react-styles/css/components/DataList/data-list";
 
 export type Field<T> = {
   name: string;
@@ -30,7 +30,7 @@ export type Field<T> = {
 
 export type Action<T> = IAction & { isActionable?: (item: T) => boolean };
 
-type DraggableTableProps<T> = Omit<TableComposableProps, "data" | "ref"> & {
+type DraggableTableProps<T> = Omit<TableProps, "data" | "ref"> & {
   keyField: string;
   columns: Field<T>[];
   data: T[];
@@ -190,7 +190,7 @@ export function DraggableTable<T>({
   };
 
   return (
-    <TableComposable
+    <Table
       aria-label="Draggable table"
       className={state.dragging ? styles.modifiers.dragOver : ""}
       {...props}
@@ -250,6 +250,6 @@ export function DraggableTable<T>({
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 }
diff --git a/js/apps/admin-ui/src/authentication/components/ExecutionConfigModal.tsx b/js/apps/admin-ui/src/authentication/components/ExecutionConfigModal.tsx
index 38049d46e7..360b0f6d87 100644
--- a/js/apps/admin-ui/src/authentication/components/ExecutionConfigModal.tsx
+++ b/js/apps/admin-ui/src/authentication/components/ExecutionConfigModal.tsx
@@ -184,7 +184,7 @@ export const ExecutionConfigModal = ({
               </Button>
               {config && (
                 <Button
-                  className="pf-u-ml-4xl"
+                  className="pf-v5-u-ml-4xl"
                   data-testid="clear"
                   variant={ButtonVariant.link}
                   onClick={async () => {
diff --git a/js/apps/admin-ui/src/authentication/components/FlowRequirementDropdown.tsx b/js/apps/admin-ui/src/authentication/components/FlowRequirementDropdown.tsx
index 07901ad3f5..18cd9f1448 100644
--- a/js/apps/admin-ui/src/authentication/components/FlowRequirementDropdown.tsx
+++ b/js/apps/admin-ui/src/authentication/components/FlowRequirementDropdown.tsx
@@ -1,6 +1,10 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Select, SelectOption, SelectVariant } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 
 import type { ExpandableExecution } from "../execution-model";
 
@@ -28,7 +32,7 @@ export const FlowRequirementDropdown = ({
         <Select
           className="keycloak__authentication__requirement-dropdown"
           variant={SelectVariant.single}
-          onToggle={setOpen}
+          onToggle={(_event, val) => setOpen(val)}
           onSelect={(_event, value) => {
             flow.requirement = value.toString();
             onChange(flow);
diff --git a/js/apps/admin-ui/src/authentication/components/FlowRow.tsx b/js/apps/admin-ui/src/authentication/components/FlowRow.tsx
index 10b8b3a0ab..69850399ac 100644
--- a/js/apps/admin-ui/src/authentication/components/FlowRow.tsx
+++ b/js/apps/admin-ui/src/authentication/components/FlowRow.tsx
@@ -1,27 +1,27 @@
-import { useTranslation } from "react-i18next";
+import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
 import {
-  DataListItemRow,
+  Button,
+  DataListCell,
   DataListControl,
   DataListDragButton,
-  DataListItemCells,
-  DataListCell,
   DataListItem,
+  DataListItemCells,
+  DataListItemRow,
   DataListToggle,
+  Draggable,
   Text,
   TextVariants,
-  Button,
   Tooltip,
 } from "@patternfly/react-core";
 import { TrashIcon } from "@patternfly/react-icons";
-
-import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
+import { useTranslation } from "react-i18next";
 import type { ExpandableExecution } from "../execution-model";
-import type { Flow } from "./modals/AddSubFlowModal";
-import { FlowTitle } from "./FlowTitle";
-import { FlowRequirementDropdown } from "./FlowRequirementDropdown";
-import { ExecutionConfigModal } from "./ExecutionConfigModal";
 import { AddFlowDropdown } from "./AddFlowDropdown";
 import { EditFlow } from "./EditFlow";
+import { ExecutionConfigModal } from "./ExecutionConfigModal";
+import { FlowRequirementDropdown } from "./FlowRequirementDropdown";
+import { FlowTitle } from "./FlowTitle";
+import type { Flow } from "./modals/AddSubFlowModal";
 
 import "./flow-row.css";
 
@@ -52,84 +52,89 @@ export const FlowRow = ({
 
   return (
     <>
-      <DataListItem
-        className="keycloak__authentication__flow-item"
-        id={execution.id}
-        isExpanded={!execution.isCollapsed}
-        aria-labelledby={`title-id-${execution.id}`}
-      >
-        <DataListItemRow
-          className="keycloak__authentication__flow-row"
-          aria-level={execution.level! + 1}
-          role="heading"
-          aria-labelledby={execution.id}
+      <Draggable key={`draggable-${execution.id}`} hasNoWrapper>
+        <DataListItem
+          className="keycloak__authentication__flow-item"
+          id={execution.id}
+          isExpanded={!execution.isCollapsed}
+          aria-labelledby={`title-id-${execution.id}`}
         >
-          <DataListControl>
-            <DataListDragButton aria-label={t("dragHelp")} />
-          </DataListControl>
-          {hasSubList && (
-            <DataListToggle
-              onClick={() => onRowClick(execution)}
-              isExpanded={!execution.isCollapsed}
-              id={`toggle1-${execution.id}`}
-              aria-controls={execution.executionList![0].id}
-            />
-          )}
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell key={`${execution.id}-name`}>
-                {!execution.authenticationFlow && (
-                  <FlowTitle
-                    id={execution.id}
-                    key={execution.id}
-                    alias={execution.alias!}
-                    title={execution.displayName!}
-                  />
-                )}
-                {execution.authenticationFlow && (
-                  <>
-                    {execution.displayName} <br />{" "}
-                    <Text component={TextVariants.small}>
-                      {execution.alias} {execution.description}
-                    </Text>
-                  </>
-                )}
-              </DataListCell>,
-              <DataListCell key={`${execution.id}-requirement`}>
-                <FlowRequirementDropdown
-                  flow={execution}
-                  onChange={onRowChange}
-                />
-              </DataListCell>,
-              <DataListCell key={`${execution.id}-config`}>
-                <ExecutionConfigModal execution={execution} />
-                {execution.authenticationFlow && !builtIn && (
-                  <>
-                    <AddFlowDropdown
-                      execution={execution}
-                      onAddExecution={onAddExecution}
-                      onAddFlow={onAddFlow}
+          <DataListItemRow
+            className="keycloak__authentication__flow-row"
+            aria-level={execution.level! + 1}
+            role="heading"
+            aria-labelledby={execution.id}
+          >
+            <DataListControl>
+              <DataListDragButton aria-label={t("dragHelp")} />
+            </DataListControl>
+            {hasSubList && (
+              <DataListToggle
+                onClick={() => onRowClick(execution)}
+                isExpanded={!execution.isCollapsed}
+                id={`toggle1-${execution.id}`}
+                aria-controls={execution.executionList![0].id}
+              />
+            )}
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key={`${execution.id}-name`}>
+                  {!execution.authenticationFlow && (
+                    <FlowTitle
+                      id={execution.id}
+                      key={execution.id}
+                      alias={execution.alias!}
+                      title={execution.displayName!}
                     />
-                    <EditFlow execution={execution} onRowChange={onRowChange} />
-                  </>
-                )}
-                {!builtIn && (
-                  <Tooltip content={t("delete")}>
-                    <Button
-                      variant="plain"
-                      data-testid={`${execution.displayName}-delete`}
-                      aria-label={t("delete")}
-                      onClick={() => onDelete(execution)}
-                    >
-                      <TrashIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
-            ]}
-          />
-        </DataListItemRow>
-      </DataListItem>
+                  )}
+                  {execution.authenticationFlow && (
+                    <>
+                      {execution.displayName} <br />{" "}
+                      <Text component={TextVariants.small}>
+                        {execution.alias} {execution.description}
+                      </Text>
+                    </>
+                  )}
+                </DataListCell>,
+                <DataListCell key={`${execution.id}-requirement`}>
+                  <FlowRequirementDropdown
+                    flow={execution}
+                    onChange={onRowChange}
+                  />
+                </DataListCell>,
+                <DataListCell key={`${execution.id}-config`}>
+                  <ExecutionConfigModal execution={execution} />
+                  {execution.authenticationFlow && !builtIn && (
+                    <>
+                      <AddFlowDropdown
+                        execution={execution}
+                        onAddExecution={onAddExecution}
+                        onAddFlow={onAddFlow}
+                      />
+                      <EditFlow
+                        execution={execution}
+                        onRowChange={onRowChange}
+                      />
+                    </>
+                  )}
+                  {!builtIn && (
+                    <Tooltip content={t("delete")}>
+                      <Button
+                        variant="plain"
+                        data-testid={`${execution.displayName}-delete`}
+                        aria-label={t("delete")}
+                        onClick={() => onDelete(execution)}
+                      >
+                        <TrashIcon />
+                      </Button>
+                    </Tooltip>
+                  )}
+                </DataListCell>,
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </Draggable>
       {!execution.isCollapsed &&
         hasSubList &&
         execution.executionList?.map((ex) => (
diff --git a/js/apps/admin-ui/src/authentication/components/flow-diagram.css b/js/apps/admin-ui/src/authentication/components/flow-diagram.css
index bb691c38a8..ab990d7ffe 100644
--- a/js/apps/admin-ui/src/authentication/components/flow-diagram.css
+++ b/js/apps/admin-ui/src/authentication/components/flow-diagram.css
@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--pf-global--BackgroundColor--200);
+  background-color: var(--pf-v5-global--BackgroundColor--200);
   border: 0;
 }
 
@@ -28,7 +28,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--pf-global--BackgroundColor--200);
+  background-color: var(--pf-v5-global--BackgroundColor--200);
 }
 
 .keycloak__authentication__input_node.selected,
@@ -43,8 +43,8 @@
 }
 
 .edgebutton {
-  background-color: var(--pf-global--BackgroundColor--200);
-  border: 1px solid var(--pf-global--BackgroundColor--100);
+  background-color: var(--pf-v5-global--BackgroundColor--200);
+  border: 1px solid var(--pf-v5-global--BackgroundColor--100);
   border-radius: 50%;
   cursor: pointer;
   height: 33px;
diff --git a/js/apps/admin-ui/src/authentication/components/flow-header.css b/js/apps/admin-ui/src/authentication/components/flow-header.css
index 4ae3f81d7b..bcc3ee2916 100644
--- a/js/apps/admin-ui/src/authentication/components/flow-header.css
+++ b/js/apps/admin-ui/src/authentication/components/flow-header.css
@@ -1,7 +1,7 @@
 .keycloak__authentication__header-drag-button svg {
-  fill: var(--pf-global--BackgroundColor--100);
+  fill: var(--pf-v5-global--BackgroundColor--100);
 }
 
-.keycloak__authentication__header .pf-c-data-list__cell {
+.keycloak__authentication__header .pf-v5-c-data-list__cell {
   font-weight: 700;
 }
diff --git a/js/apps/admin-ui/src/authentication/components/flow-row.css b/js/apps/admin-ui/src/authentication/components/flow-row.css
index d4f51034bc..83f87b9da6 100644
--- a/js/apps/admin-ui/src/authentication/components/flow-row.css
+++ b/js/apps/admin-ui/src/authentication/components/flow-row.css
@@ -4,52 +4,52 @@
 
 .keycloak__authentication__flow-row[aria-level="1"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 2
+    var(--pf-v5-global--spacer--lg) * 2
   );
 }
 
 .keycloak__authentication__flow-row[aria-level="2"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 3
+    var(--pf-v5-global--spacer--lg) * 3
   );
 }
 .keycloak__authentication__flow-row[aria-level="3"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 4
+    var(--pf-v5-global--spacer--lg) * 4
   );
 }
 .keycloak__authentication__flow-row[aria-level="4"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 5
+    var(--pf-v5-global--spacer--lg) * 5
   );
 }
 .keycloak__authentication__flow-row[aria-level="5"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 6
+    var(--pf-v5-global--spacer--lg) * 6
   );
 }
 .keycloak__authentication__flow-row[aria-level="6"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 7
+    var(--pf-v5-global--spacer--lg) * 7
   );
 }
 .keycloak__authentication__flow-row[aria-level="7"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 8
+    var(--pf-v5-global--spacer--lg) * 8
   );
 }
 .keycloak__authentication__flow-row[aria-level="8"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 9
+    var(--pf-v5-global--spacer--lg) * 9
   );
 }
 .keycloak__authentication__flow-row[aria-level="9"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 10
+    var(--pf-v5-global--spacer--lg) * 10
   );
 }
 .keycloak__authentication__flow-row[aria-level="10"] {
   padding-left: calc(
-    var(--pf-global--spacer--lg) * 11
+    var(--pf-v5-global--spacer--lg) * 11
   );
 }
diff --git a/js/apps/admin-ui/src/authentication/components/flow-title.css b/js/apps/admin-ui/src/authentication/components/flow-title.css
index 6add421cde..abdc270314 100644
--- a/js/apps/admin-ui/src/authentication/components/flow-title.css
+++ b/js/apps/admin-ui/src/authentication/components/flow-title.css
@@ -3,7 +3,7 @@
   width: -moz-fit-content;
 }
 
-.keycloak__authentication__title .pf-c-card__body {
-  padding-bottom: var(--pf-global--spacer--sm);
-  padding-top: var(--pf-global--spacer--sm);
+.keycloak__authentication__title .pf-v5-c-card__body {
+  padding-bottom: var(--pf-v5-global--spacer--sm);
+  padding-top: var(--pf-v5-global--spacer--sm);
 }
diff --git a/js/apps/admin-ui/src/authentication/components/modals/AddStepModal.tsx b/js/apps/admin-ui/src/authentication/components/modals/AddStepModal.tsx
index 27203aef58..08a1071c03 100644
--- a/js/apps/admin-ui/src/authentication/components/modals/AddStepModal.tsx
+++ b/js/apps/admin-ui/src/authentication/components/modals/AddStepModal.tsx
@@ -27,7 +27,7 @@ const AuthenticationProviderList = ({
   setValue,
 }: AuthenticationProviderListProps) => {
   return (
-    <PageSection variant="light" className="pf-u-py-lg">
+    <PageSection variant="light" className="pf-v5-u-py-lg">
       <Form isHorizontal>
         {list?.map((provider) => (
           <Radio
diff --git a/js/apps/admin-ui/src/authentication/components/used-by.module.css b/js/apps/admin-ui/src/authentication/components/used-by.module.css
index dd9c9856be..3a314ff3f9 100644
--- a/js/apps/admin-ui/src/authentication/components/used-by.module.css
+++ b/js/apps/admin-ui/src/authentication/components/used-by.module.css
@@ -1,5 +1,5 @@
 .label {
   padding: 0;
-  font-size: var(--pf-c-table--cell--FontSize);
-  color: var(--pf-global--success-color--100);
+  font-size: var(--pf-v5-c-table--cell--FontSize);
+  color: var(--pf-v5-global--success-color--100);
 }
diff --git a/js/apps/admin-ui/src/authentication/empty-execution-state.css b/js/apps/admin-ui/src/authentication/empty-execution-state.css
index bb09a64a99..b88cf0de5b 100644
--- a/js/apps/admin-ui/src/authentication/empty-execution-state.css
+++ b/js/apps/admin-ui/src/authentication/empty-execution-state.css
@@ -1,11 +1,11 @@
 .keycloak__empty-execution-state__block {
-  padding-top: var(--pf-global--spacer--sm);
+  padding-top: var(--pf-v5-global--spacer--sm);
 }
 .keycloak__empty-execution-state__help {
   max-width: 36rem;
-  margin: 0 auto var(--pf-global--spacer--2xl);
+  margin: 0 auto var(--pf-v5-global--spacer--2xl);
 }
 
 .keycloak__empty-execution-state__help p {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
diff --git a/js/apps/admin-ui/src/authentication/execution-model.ts b/js/apps/admin-ui/src/authentication/execution-model.ts
index 672fbfd00d..772cdb70e3 100644
--- a/js/apps/admin-ui/src/authentication/execution-model.ts
+++ b/js/apps/admin-ui/src/authentication/execution-model.ts
@@ -81,21 +81,26 @@ export class ExecutionList {
   }
 
   findExecution(
-    id: string,
+    index: number,
+    currentIndex: number | undefined = 0,
     list?: ExpandableExecution[],
   ): ExpandableExecution | undefined {
-    let found = (list || this.expandableList).find((ex) => ex.id === id);
-    if (!found) {
-      for (const ex of list || this.expandableList) {
-        if (ex.executionList) {
-          found = this.findExecution(id, ex.executionList);
-          if (found) {
-            return found;
-          }
+    const l = list || this.expandableList;
+    for (let i = 0; i < l.length; i++) {
+      const ex = l[i];
+      if (currentIndex === index) {
+        return ex;
+      }
+      currentIndex++;
+      if (ex.executionList) {
+        const found = this.findExecution(index, currentIndex, ex.executionList);
+        if (found) {
+          return found;
         }
+        currentIndex += ex.executionList.length;
       }
     }
-    return found;
+    return undefined;
   }
 
   #getParentNodes(level: number, index: number) {
diff --git a/js/apps/admin-ui/src/authentication/policies/OtpPolicy.tsx b/js/apps/admin-ui/src/authentication/policies/OtpPolicy.tsx
index 7ea032b163..b65c7f2932 100644
--- a/js/apps/admin-ui/src/authentication/policies/OtpPolicy.tsx
+++ b/js/apps/admin-ui/src/authentication/policies/OtpPolicy.tsx
@@ -210,13 +210,15 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
               />
             }
           >
-            <ChipGroup data-testid="supportedApplications">
-              {supportedApplications.map((label) => (
-                <Chip key={label} isReadOnly>
-                  {label}
-                </Chip>
-              ))}
-            </ChipGroup>
+            <span data-testid="supportedApplications">
+              <ChipGroup>
+                {supportedApplications.map((label) => (
+                  <Chip key={label} isReadOnly>
+                    {label}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            </span>
           </FormGroup>
 
           {otpType === POLICY_TYPES[0] && (
diff --git a/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx b/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx
index 926903a72d..99f5edb55b 100644
--- a/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx
+++ b/js/apps/admin-ui/src/authentication/policies/PasswordPolicy.tsx
@@ -9,15 +9,15 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStatePrimary,
   PageSection,
-  Select,
-  SelectOption,
-  Title,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from "@patternfly/react-core";
+import { Select, SelectOption } from "@patternfly/react-core/deprecated";
 import { PlusCircleIcon } from "@patternfly/react-icons";
 import { useEffect, useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
@@ -56,7 +56,7 @@ const PolicySelect = ({ onSelect, selectedPolicies }: PolicySelectProps) => {
         onSelect(selection as PasswordPolicyTypeRepresentation);
         setOpen(false);
       }}
-      onToggle={(value) => setOpen(value)}
+      onToggle={(_event, value) => setOpen(value)}
       isOpen={open}
       selections={t("addPolicy")}
       isDisabled={policies?.length === 0}
@@ -128,7 +128,7 @@ export const PasswordPolicy = ({
   };
 
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       {(rows.length !== 0 || realm.passwordPolicy) && (
         <>
           <Toolbar>
@@ -180,15 +180,18 @@ export const PasswordPolicy = ({
         </>
       )}
       {!rows.length && !realm.passwordPolicy && (
-        <EmptyState data-testid="empty-state" variant="large">
-          <EmptyStateIcon icon={PlusCircleIcon} />
-          <Title headingLevel="h1" size="lg">
-            {t("noPasswordPolicies")}
-          </Title>
+        <EmptyState data-testid="empty-state" variant="lg">
+          <EmptyStateHeader
+            titleText={<>{t("noPasswordPolicies")}</>}
+            icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+            headingLevel="h1"
+          />
           <EmptyStateBody>{t("noPasswordPoliciesInstructions")}</EmptyStateBody>
-          <EmptyStatePrimary>
-            <PolicySelect onSelect={onSelect} selectedPolicies={[]} />
-          </EmptyStatePrimary>
+          <EmptyStateFooter>
+            <EmptyStateActions>
+              <PolicySelect onSelect={onSelect} selectedPolicies={[]} />
+            </EmptyStateActions>
+          </EmptyStateFooter>
         </EmptyState>
       )}
     </PageSection>
diff --git a/js/apps/admin-ui/src/authentication/policies/PolicyRow.tsx b/js/apps/admin-ui/src/authentication/policies/PolicyRow.tsx
index fc0d31520b..ef58dd87ad 100644
--- a/js/apps/admin-ui/src/authentication/policies/PolicyRow.tsx
+++ b/js/apps/admin-ui/src/authentication/policies/PolicyRow.tsx
@@ -6,14 +6,13 @@ import {
   Split,
   SplitItem,
   Switch,
+  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { MinusCircleIcon } from "@patternfly/react-icons";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { HelpItem } from "ui-shared";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import "./policy-row.css";
 
@@ -33,15 +32,13 @@ export const PolicyRow = ({
     formState: { errors },
   } = useFormContext();
 
+  const error = errors[id!];
+
   return (
     <FormGroup
       label={displayName}
       fieldId={id!}
       isRequired
-      helperTextInvalid={t("required")}
-      validated={
-        errors[id!] ? ValidatedOptions.error : ValidatedOptions.default
-      }
       labelIcon={
         <HelpItem
           helpText={t(`passwordPoliciesHelp.${id}`)}
@@ -52,13 +49,13 @@ export const PolicyRow = ({
       <Split>
         <SplitItem isFilled>
           {configType && configType !== "int" && (
-            <KeycloakTextInput
+            <TextInput
               id={id}
               data-testid={id}
               {...register(id!, { required: true })}
               defaultValue={defaultValue}
               validated={
-                errors[id!] ? ValidatedOptions.error : ValidatedOptions.default
+                error ? ValidatedOptions.error : ValidatedOptions.default
               }
             />
           )}
@@ -113,6 +110,7 @@ export const PolicyRow = ({
           </Button>
         </SplitItem>
       </Split>
+      {error && <FormErrorText message={t("required")} />}
     </FormGroup>
   );
 };
diff --git a/js/apps/admin-ui/src/authentication/policies/WebauthnPolicy.tsx b/js/apps/admin-ui/src/authentication/policies/WebauthnPolicy.tsx
index 5f2ccf3d70..b7c912524c 100644
--- a/js/apps/admin-ui/src/authentication/policies/WebauthnPolicy.tsx
+++ b/js/apps/admin-ui/src/authentication/policies/WebauthnPolicy.tsx
@@ -7,10 +7,10 @@ import {
   FormGroup,
   PageSection,
   Popover,
-  SelectVariant,
   Text,
   TextContent,
 } from "@patternfly/react-core";
+import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { QuestionCircleIcon } from "@patternfly/react-icons";
 import { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
diff --git a/js/apps/admin-ui/src/authentication/policies/otp-policy.css b/js/apps/admin-ui/src/authentication/policies/otp-policy.css
index 7d38a7cd03..f7be442f4b 100644
--- a/js/apps/admin-ui/src/authentication/policies/otp-policy.css
+++ b/js/apps/admin-ui/src/authentication/policies/otp-policy.css
@@ -1,15 +1,15 @@
 .keycloak__otp_policies_authentication__policy-type {
   display: inline-grid;
-  padding-right: var(--pf-global--spacer--lg);
+  padding-right: var(--pf-v5-global--spacer--lg);
 }
 
 .keycloak__otp_policies_authentication__number-of-digits {
   display: inline-grid;
-  padding-right: var(--pf-global--spacer--lg);
+  padding-right: var(--pf-v5-global--spacer--lg);
 }
 
 @media (min-width: 768px) {
-  .keycloak__otp_policies_authentication__form .pf-c-form__group {
-    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 11rem;
+  .keycloak__otp_policies_authentication__form .pf-v5-c-form__group {
+    --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 11rem;
   }
 }
diff --git a/js/apps/admin-ui/src/authentication/policies/policy-row.css b/js/apps/admin-ui/src/authentication/policies/policy-row.css
index 4fe6830c73..e1d7550d7a 100644
--- a/js/apps/admin-ui/src/authentication/policies/policy-row.css
+++ b/js/apps/admin-ui/src/authentication/policies/policy-row.css
@@ -1,12 +1,12 @@
 @media (min-width: 768px) {
-  .keycloak__policies_authentication__form .pf-c-form__group {
-    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
+  .keycloak__policies_authentication__form .pf-v5-c-form__group {
+    --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
   }
 }
 .keycloak__policies_authentication__minus-icon svg {
-  color: var(--pf-c-button--m-plain--Color);
+  color: var(--pf-v5-c-button--m-plain--Color);
 }
 
 .keycloak__policies_authentication__number-field {
-  --pf-c-number-input--c-form-control--Width: 10ch;
+  --pf-v5-c-number-input--c-form-control--Width: 10ch;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/authentication/policies/webauthn-policy.css b/js/apps/admin-ui/src/authentication/policies/webauthn-policy.css
index 0251c0016c..479ebf670d 100644
--- a/js/apps/admin-ui/src/authentication/policies/webauthn-policy.css
+++ b/js/apps/admin-ui/src/authentication/policies/webauthn-policy.css
@@ -1,5 +1,5 @@
 @media (min-width: 768px) {
-  .keycloak__webauthn_policies_authentication__form .pf-c-form__group {
-    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
+  .keycloak__webauthn_policies_authentication__form .pf-v5-c-form__group {
+    --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
   }
 }
diff --git a/js/apps/admin-ui/src/client-scopes/ChangeTypeDropdown.tsx b/js/apps/admin-ui/src/client-scopes/ChangeTypeDropdown.tsx
index 840c6a0319..63cab6264a 100644
--- a/js/apps/admin-ui/src/client-scopes/ChangeTypeDropdown.tsx
+++ b/js/apps/admin-ui/src/client-scopes/ChangeTypeDropdown.tsx
@@ -1,4 +1,5 @@
-import { AlertVariant, Select } from "@patternfly/react-core";
+import { AlertVariant } from "@patternfly/react-core";
+import { Select } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -36,7 +37,7 @@ export const ChangeTypeDropdown = ({
       selections={[]}
       isDisabled={selectedRows.length === 0}
       placeholderText={t("changeTypeTo")}
-      onToggle={setOpen}
+      onToggle={(_event, val) => setOpen(val)}
       onSelect={async (_, value) => {
         try {
           await Promise.all(
diff --git a/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx b/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx
index dffc8605b5..1d49d6ca9b 100644
--- a/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx
+++ b/js/apps/admin-ui/src/client-scopes/ClientScopesSection.tsx
@@ -2,12 +2,14 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   PageSection,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from "@patternfly/react-core/deprecated";
 import { cellWidth } from "@patternfly/react-table";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -191,7 +193,7 @@ export default function ClientScopesSection() {
         subKey="clientScopeExplain"
         helpUrl={helpUrls.clientScopesUrl}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <KeycloakDataTable
           key={key}
           loader={loader}
@@ -251,7 +253,11 @@ export default function ClientScopesSection() {
               </ToolbarItem>
               <ToolbarItem>
                 <Dropdown
-                  toggle={<KebabToggle onToggle={setKebabOpen} />}
+                  toggle={
+                    <KebabToggle
+                      onToggle={(_event, val) => setKebabOpen(val)}
+                    />
+                  }
                   isOpen={kebabOpen}
                   isPlain
                   dropdownItems={[
diff --git a/js/apps/admin-ui/src/client-scopes/CreateClientScope.tsx b/js/apps/admin-ui/src/client-scopes/CreateClientScope.tsx
index 982cad98d4..715e1e228b 100644
--- a/js/apps/admin-ui/src/client-scopes/CreateClientScope.tsx
+++ b/js/apps/admin-ui/src/client-scopes/CreateClientScope.tsx
@@ -56,7 +56,7 @@ export default function CreateClientScope() {
   return (
     <>
       <ViewHeader titleKey="createClientScope" />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <PageSection variant="light">
           <ScopeForm save={onSubmit} />
         </PageSection>
diff --git a/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx b/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx
index d0f88137e7..d9a5ea319d 100644
--- a/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx
+++ b/js/apps/admin-ui/src/client-scopes/EditClientScope.tsx
@@ -6,11 +6,11 @@ import {
   Alert,
   AlertVariant,
   ButtonVariant,
-  DropdownItem,
   PageSection,
   Tab,
   TabTitleText,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -234,7 +234,7 @@ export default function EditClientScope() {
         divider={false}
       />
 
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs isBox>
           <Tab
             id="settings"
diff --git a/js/apps/admin-ui/src/client-scopes/add/MapperDialog.tsx b/js/apps/admin-ui/src/client-scopes/add/MapperDialog.tsx
index f8fdc9790b..ecba19d344 100644
--- a/js/apps/admin-ui/src/client-scopes/add/MapperDialog.tsx
+++ b/js/apps/admin-ui/src/client-scopes/add/MapperDialog.tsx
@@ -141,7 +141,7 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
     >
       {!isBuiltIn && (
         <DataList
-          onSelectDataListItem={(id) => {
+          onSelectDataListItem={(_event, id) => {
             const mapper = protocolMappers.find((mapper) => mapper.id === id);
             props.onConfirm(mapper!);
             props.toggleDialog();
diff --git a/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx b/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx
index 9cf04cb05d..2fd6f6ef48 100644
--- a/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx
+++ b/js/apps/admin-ui/src/client-scopes/details/MapperList.tsx
@@ -2,7 +2,11 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { Path } from "react-router-dom";
 import { Link } from "react-router-dom";
-import { Dropdown, DropdownItem, DropdownToggle } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import { CaretDownIcon } from "@patternfly/react-icons";
 
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
@@ -112,7 +116,7 @@ export const MapperList = ({
             onSelect={() => setMapperAction(false)}
             toggle={
               <DropdownToggle
-                isPrimary
+                toggleVariant="primary"
                 id="mapperAction"
                 onToggle={() => setMapperAction(!mapperAction)}
                 toggleIndicator={CaretDownIcon}
diff --git a/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx b/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx
index d372ef76e4..f25cbc875b 100644
--- a/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx
+++ b/js/apps/admin-ui/src/client-scopes/details/MappingDetails.tsx
@@ -5,15 +5,16 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   FormGroup,
   PageSection,
+  TextInput,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useMatch, useNavigate } from "react-router-dom";
-import { KeycloakTextInput, TextControl } from "ui-shared";
+import { TextControl } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { toClient } from "../../clients/routes/Client";
@@ -200,7 +201,7 @@ export default function MappingDetails() {
             role="manage-clients"
           >
             <FormGroup label={t("mapperType")} fieldId="mapperType">
-              <KeycloakTextInput
+              <TextInput
                 type="text"
                 id="mapperType"
                 name="mapperType"
diff --git a/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx b/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx
index 8caf0f0af6..bfeaaec6b8 100644
--- a/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx
+++ b/js/apps/admin-ui/src/client-scopes/details/ScopeForm.tsx
@@ -1,5 +1,6 @@
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
-import { ActionGroup, Button, SelectVariant } from "@patternfly/react-core";
+import { ActionGroup, Button } from "@patternfly/react-core";
+import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { useEffect } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -96,7 +97,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
               )}
               label={t("dynamicScope")}
               labelIcon={t("dynamicScopeHelp")}
-              onChange={(value) => {
+              onChange={(event, value) => {
                 setDynamicRegex(
                   value ? form.getValues("name") || "" : "",
                   value,
diff --git a/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx b/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx
index 787ed7924d..0c9bd2b6fb 100644
--- a/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx
+++ b/js/apps/admin-ui/src/client-scopes/details/SearchFilter.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ToolbarItem } from "@patternfly/react-core";
 import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
   Select,
   SelectOption,
-  ToolbarItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { FilterIcon } from "@patternfly/react-icons";
 
 import {
@@ -72,7 +72,10 @@ export const SearchDropdown = ({
     <Dropdown
       className="keycloak__client-scopes__searchtype"
       toggle={
-        <DropdownToggle id="toggle-id" onToggle={setSearchToggle}>
+        <DropdownToggle
+          id="toggle-id"
+          onToggle={(_event, val) => setSearchToggle(val)}
+        >
           <FilterIcon /> {t(`clientScopeSearch.${searchType}`)}
         </DropdownToggle>
       }
@@ -107,7 +110,7 @@ export const SearchToolbar = ({
           <ToolbarItem>
             <Select
               className="keycloak__client-scopes__searchtype"
-              onToggle={setOpen}
+              onToggle={(_event, val) => setOpen(val)}
               isOpen={open}
               selections={[
                 type === AllClientScopes.none
@@ -139,7 +142,7 @@ export const SearchToolbar = ({
           <ToolbarItem>
             <Select
               className="keycloak__client-scopes__searchtype"
-              onToggle={setOpen}
+              onToggle={(_event, val) => setOpen(val)}
               isOpen={open}
               selections={[t(`protocolTypes.${protocol}`)]}
               onSelect={(_, value) => {
diff --git a/js/apps/admin-ui/src/clients/AdvancedTab.tsx b/js/apps/admin-ui/src/clients/AdvancedTab.tsx
index d6ca87b14f..69f6c0f22d 100644
--- a/js/apps/admin-ui/src/clients/AdvancedTab.tsx
+++ b/js/apps/admin-ui/src/clients/AdvancedTab.tsx
@@ -70,7 +70,7 @@ export const AdvancedTab = ({ save, client }: AdvancedProps) => {
   };
 
   return (
-    <PageSection variant="light" className="pf-u-py-0">
+    <PageSection variant="light" className="pf-v5-u-py-0">
       <ScrollForm
         label={t("jumpToSection")}
         sections={[
@@ -84,7 +84,7 @@ export const AdvancedTab = ({ save, client }: AdvancedProps) => {
             isHidden: protocol !== openIdConnect,
             panel: (
               <>
-                <Text className="pf-u-pb-lg">
+                <Text className="pf-v5-u-pb-lg">
                   {t("fineGrainOpenIdConnectConfigurationHelp")}
                 </Text>
                 <FineGrainOpenIdConnect
@@ -120,7 +120,7 @@ export const AdvancedTab = ({ save, client }: AdvancedProps) => {
             isHidden: protocol !== openIdConnect,
             panel: (
               <>
-                <Text className="pf-u-pb-lg">
+                <Text className="pf-v5-u-pb-lg">
                   {t("openIdConnectCompatibilityModesHelp")}
                 </Text>
                 <OpenIdConnectCompatibilityModes
@@ -142,7 +142,7 @@ export const AdvancedTab = ({ save, client }: AdvancedProps) => {
             isHidden: protocol === openIdConnect,
             panel: (
               <>
-                <Text className="pf-u-pb-lg">
+                <Text className="pf-v5-u-pb-lg">
                   {t("fineGrainSamlEndpointConfigHelp")}
                 </Text>
                 <FineGrainSamlEndpointConfig
@@ -169,7 +169,7 @@ export const AdvancedTab = ({ save, client }: AdvancedProps) => {
             title: t("advancedSettings"),
             panel: (
               <>
-                <Text className="pf-u-pb-lg">
+                <Text className="pf-v5-u-pb-lg">
                   {t("advancedSettings" + toUpperCase(protocol || ""))}
                 </Text>
                 <AdvancedSettings
@@ -191,7 +191,7 @@ export const AdvancedTab = ({ save, client }: AdvancedProps) => {
             title: t("authenticationOverrides"),
             panel: (
               <>
-                <Text className="pf-u-pb-lg">
+                <Text className="pf-v5-u-pb-lg">
                   {t("authenticationOverridesHelp")}
                 </Text>
                 <AuthenticationOverrides
diff --git a/js/apps/admin-ui/src/clients/ClientDetails.tsx b/js/apps/admin-ui/src/clients/ClientDetails.tsx
index ec7cbe67f7..19cca0ed41 100644
--- a/js/apps/admin-ui/src/clients/ClientDetails.tsx
+++ b/js/apps/admin-ui/src/clients/ClientDetails.tsx
@@ -3,13 +3,13 @@ import {
   AlertVariant,
   ButtonVariant,
   Divider,
-  DropdownItem,
   Label,
   PageSection,
   Tab,
   TabTitleText,
   Tooltip,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import { cloneDeep, sortBy } from "lodash-es";
 import { useMemo, useState } from "react";
@@ -413,7 +413,7 @@ export default function ClientDetails() {
           />
         )}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <FormProvider {...form}>
           <RoutableTabs
             data-testid="client-tabs"
diff --git a/js/apps/admin-ui/src/clients/ClientSessions.tsx b/js/apps/admin-ui/src/clients/ClientSessions.tsx
index 3c3a3beb67..bcdd0f653c 100644
--- a/js/apps/admin-ui/src/clients/ClientSessions.tsx
+++ b/js/apps/admin-ui/src/clients/ClientSessions.tsx
@@ -41,7 +41,7 @@ export const ClientSessions = ({ client }: ClientSessionsProps) => {
   };
 
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <SessionsTable
         loader={loader}
         hiddenColumns={["clients"]}
diff --git a/js/apps/admin-ui/src/clients/ClientSettings.tsx b/js/apps/admin-ui/src/clients/ClientSettings.tsx
index 4006fbe09f..fe79a1d936 100644
--- a/js/apps/admin-ui/src/clients/ClientSettings.tsx
+++ b/js/apps/admin-ui/src/clients/ClientSettings.tsx
@@ -29,7 +29,7 @@ export const ClientSettings = (props: ClientSettingsProps) => {
   return (
     <ScrollForm
       label={t("jumpToSection")}
-      className="pf-u-px-lg pf-u-pb-lg"
+      className="pf-v5-u-px-lg pf-v5-u-pb-lg"
       sections={[
         {
           title: t("generalSettings"),
diff --git a/js/apps/admin-ui/src/clients/ClientsSection.tsx b/js/apps/admin-ui/src/clients/ClientsSection.tsx
index 1f888d5ee1..590646b1a3 100644
--- a/js/apps/admin-ui/src/clients/ClientsSection.tsx
+++ b/js/apps/admin-ui/src/clients/ClientsSection.tsx
@@ -52,7 +52,7 @@ const ClientDetailLink = (client: ClientRepresentation) => {
       >
         {client.clientId}
         {!client.enabled && (
-          <Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
+          <Badge key={`${client.id}-disabled`} isRead className="pf-v5-u-ml-sm">
             {t("disabled")}
           </Badge>
         )}
@@ -172,7 +172,7 @@ export default function ClientsSection() {
         helpUrl={helpUrls.clientsUrl}
         divider={false}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           mountOnEnter
           isBox
diff --git a/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx b/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx
index 9e2e676631..f5c63901c5 100644
--- a/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx
+++ b/js/apps/admin-ui/src/clients/add/CapabilityConfig.tsx
@@ -6,6 +6,7 @@ import {
   GridItem,
   InputGroup,
   Switch,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -64,7 +65,7 @@ export const CapabilityConfig = ({
                   label={t("on")}
                   labelOff={t("off")}
                   isChecked={!field.value}
-                  onChange={(value) => {
+                  onChange={(_event, value) => {
                     field.onChange(!value);
                     if (!value) {
                       setValue("authorizationServicesEnabled", false);
@@ -104,7 +105,7 @@ export const CapabilityConfig = ({
                   label={t("on")}
                   labelOff={t("off")}
                   isChecked={field.value && !clientAuthentication}
-                  onChange={(value) => {
+                  onChange={(_event, value) => {
                     field.onChange(value);
                     if (value) {
                       setValue("serviceAccountsEnabled", true);
@@ -129,17 +130,21 @@ export const CapabilityConfig = ({
                   control={control}
                   render={({ field }) => (
                     <InputGroup>
-                      <Checkbox
-                        data-testid="standard"
-                        label={t("standardFlow")}
-                        id="kc-flow-standard"
-                        isChecked={field.value?.toString() === "true"}
-                        onChange={field.onChange}
-                      />
-                      <HelpItem
-                        helpText={t("standardFlowHelp")}
-                        fieldLabelId="standardFlow"
-                      />
+                      <InputGroupItem>
+                        <Checkbox
+                          data-testid="standard"
+                          label={t("standardFlow")}
+                          id="kc-flow-standard"
+                          isChecked={field.value?.toString() === "true"}
+                          onChange={field.onChange}
+                        />
+                      </InputGroupItem>
+                      <InputGroupItem>
+                        <HelpItem
+                          helpText={t("standardFlowHelp")}
+                          fieldLabelId="standardFlow"
+                        />
+                      </InputGroupItem>
                     </InputGroup>
                   )}
                 />
@@ -151,17 +156,21 @@ export const CapabilityConfig = ({
                   control={control}
                   render={({ field }) => (
                     <InputGroup>
-                      <Checkbox
-                        data-testid="direct"
-                        label={t("directAccess")}
-                        id="kc-flow-direct"
-                        isChecked={field.value}
-                        onChange={field.onChange}
-                      />
-                      <HelpItem
-                        helpText={t("directAccessHelp")}
-                        fieldLabelId="directAccess"
-                      />
+                      <InputGroupItem>
+                        <Checkbox
+                          data-testid="direct"
+                          label={t("directAccess")}
+                          id="kc-flow-direct"
+                          isChecked={field.value}
+                          onChange={field.onChange}
+                        />
+                      </InputGroupItem>
+                      <InputGroupItem>
+                        <HelpItem
+                          helpText={t("directAccessHelp")}
+                          fieldLabelId="directAccess"
+                        />
+                      </InputGroupItem>
                     </InputGroup>
                   )}
                 />
@@ -173,17 +182,21 @@ export const CapabilityConfig = ({
                   control={control}
                   render={({ field }) => (
                     <InputGroup>
-                      <Checkbox
-                        data-testid="implicit"
-                        label={t("implicitFlow")}
-                        id="kc-flow-implicit"
-                        isChecked={field.value?.toString() === "true"}
-                        onChange={field.onChange}
-                      />
-                      <HelpItem
-                        helpText={t("implicitFlowHelp")}
-                        fieldLabelId="implicitFlow"
-                      />
+                      <InputGroupItem>
+                        <Checkbox
+                          data-testid="implicit"
+                          label={t("implicitFlow")}
+                          id="kc-flow-implicit"
+                          isChecked={field.value?.toString() === "true"}
+                          onChange={field.onChange}
+                        />
+                      </InputGroupItem>
+                      <InputGroupItem>
+                        <HelpItem
+                          helpText={t("implicitFlowHelp")}
+                          fieldLabelId="implicitFlow"
+                        />
+                      </InputGroupItem>
                     </InputGroup>
                   )}
                 />
@@ -195,24 +208,28 @@ export const CapabilityConfig = ({
                   control={control}
                   render={({ field }) => (
                     <InputGroup>
-                      <Checkbox
-                        data-testid="service-account"
-                        label={t("serviceAccount")}
-                        id="kc-flow-service-account"
-                        isChecked={
-                          field.value?.toString() === "true" ||
-                          (clientAuthentication && authorization)
-                        }
-                        onChange={field.onChange}
-                        isDisabled={
-                          (clientAuthentication && !authorization) ||
-                          (!clientAuthentication && authorization)
-                        }
-                      />
-                      <HelpItem
-                        helpText={t("serviceAccountHelp")}
-                        fieldLabelId="serviceAccount"
-                      />
+                      <InputGroupItem>
+                        <Checkbox
+                          data-testid="service-account"
+                          label={t("serviceAccount")}
+                          id="kc-flow-service-account"
+                          isChecked={
+                            field.value?.toString() === "true" ||
+                            (clientAuthentication && authorization)
+                          }
+                          onChange={field.onChange}
+                          isDisabled={
+                            (clientAuthentication && !authorization) ||
+                            (!clientAuthentication && authorization)
+                          }
+                        />
+                      </InputGroupItem>
+                      <InputGroupItem>
+                        <HelpItem
+                          helpText={t("serviceAccountHelp")}
+                          fieldLabelId="serviceAccount"
+                        />
+                      </InputGroupItem>
                     </InputGroup>
                   )}
                 />
@@ -227,18 +244,22 @@ export const CapabilityConfig = ({
                     control={control}
                     render={({ field }) => (
                       <InputGroup>
-                        <Checkbox
-                          data-testid="oauth-device-authorization-grant"
-                          label={t("oauthDeviceAuthorizationGrant")}
-                          id="kc-oauth-device-authorization-grant"
-                          name="oauth2.device.authorization.grant.enabled"
-                          isChecked={field.value.toString() === "true"}
-                          onChange={field.onChange}
-                        />
-                        <HelpItem
-                          helpText={t("oauthDeviceAuthorizationGrantHelp")}
-                          fieldLabelId="oauthDeviceAuthorizationGrant"
-                        />
+                        <InputGroupItem>
+                          <Checkbox
+                            data-testid="oauth-device-authorization-grant"
+                            label={t("oauthDeviceAuthorizationGrant")}
+                            id="kc-oauth-device-authorization-grant"
+                            name="oauth2.device.authorization.grant.enabled"
+                            isChecked={field.value.toString() === "true"}
+                            onChange={field.onChange}
+                          />
+                        </InputGroupItem>
+                        <InputGroupItem>
+                          <HelpItem
+                            helpText={t("oauthDeviceAuthorizationGrantHelp")}
+                            fieldLabelId="oauthDeviceAuthorizationGrant"
+                          />
+                        </InputGroupItem>
                       </InputGroup>
                     )}
                   />
@@ -253,19 +274,23 @@ export const CapabilityConfig = ({
                   control={control}
                   render={({ field }) => (
                     <InputGroup>
-                      <Checkbox
-                        data-testid="oidc-ciba-grant"
-                        label={t("oidcCibaGrant")}
-                        id="kc-oidc-ciba-grant"
-                        name="oidc.ciba.grant.enabled"
-                        isChecked={field.value.toString() === "true"}
-                        onChange={field.onChange}
-                        isDisabled={clientAuthentication}
-                      />
-                      <HelpItem
-                        helpText={t("oidcCibaGrantHelp")}
-                        fieldLabelId="oidcCibaGrant"
-                      />
+                      <InputGroupItem>
+                        <Checkbox
+                          data-testid="oidc-ciba-grant"
+                          label={t("oidcCibaGrant")}
+                          id="kc-oidc-ciba-grant"
+                          name="oidc.ciba.grant.enabled"
+                          isChecked={field.value.toString() === "true"}
+                          onChange={field.onChange}
+                          isDisabled={clientAuthentication}
+                        />
+                      </InputGroupItem>
+                      <InputGroupItem>
+                        <HelpItem
+                          helpText={t("oidcCibaGrantHelp")}
+                          fieldLabelId="oidcCibaGrant"
+                        />
+                      </InputGroupItem>
                     </InputGroup>
                   )}
                 />
diff --git a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx b/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
index 689b67345a..632554be42 100644
--- a/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
+++ b/js/apps/admin-ui/src/clients/add/LogoutPanel.tsx
@@ -116,7 +116,7 @@ export const LogoutPanel = ({
                   label={t("on")}
                   labelOff={t("off")}
                   isChecked={field.value === "true"}
-                  onChange={(value) => field.onChange(value.toString())}
+                  onChange={(_event, value) => field.onChange(value.toString())}
                   aria-label={t("backchannelLogoutSessionRequired")}
                 />
               )}
@@ -145,7 +145,7 @@ export const LogoutPanel = ({
                   label={t("on")}
                   labelOff={t("off")}
                   isChecked={field.value === "true"}
-                  onChange={(value) => field.onChange(value.toString())}
+                  onChange={(_event, value) => field.onChange(value.toString())}
                   aria-label={t("backchannelLogoutRevokeOfflineSessions")}
                 />
               )}
diff --git a/js/apps/admin-ui/src/clients/add/NewClientForm.tsx b/js/apps/admin-ui/src/clients/add/NewClientForm.tsx
index 25e40397f7..98ccf315c5 100644
--- a/js/apps/admin-ui/src/clients/add/NewClientForm.tsx
+++ b/js/apps/admin-ui/src/clients/add/NewClientForm.tsx
@@ -1,11 +1,9 @@
+import { AlertVariant, Button, PageSection } from "@patternfly/react-core";
 import {
-  AlertVariant,
-  Button,
-  PageSection,
   Wizard,
   WizardContextConsumer,
   WizardFooter,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx b/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx
index bca33c9eb9..0e7a42b9bc 100644
--- a/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx
@@ -1,12 +1,10 @@
 import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import { ActionGroup, Button, FormGroup } from "@patternfly/react-core";
 import {
-  ActionGroup,
-  Button,
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -160,7 +158,7 @@ export const AdvancedSettings = ({
                 <Select
                   toggleId="keyForCodeExchange"
                   variant={SelectVariant.single}
-                  onToggle={setOpen}
+                  onToggle={(_event, val) => setOpen(val)}
                   isOpen={open}
                   onSelect={(_, value) => {
                     field.onChange(value);
diff --git a/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx b/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx
index ff7694157e..314894e489 100644
--- a/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/ClusteringPanel.tsx
@@ -122,7 +122,7 @@ export const ClusteringPanel = ({
         />
         <ExpandableSection
           toggleText={t("registeredClusterNodes")}
-          onToggle={setExpanded}
+          onToggle={(_event, val) => setExpanded(val)}
           isExpanded={expanded}
         >
           <KeycloakDataTable
diff --git a/js/apps/admin-ui/src/clients/advanced/OpenIdConnectCompatibilityModes.tsx b/js/apps/admin-ui/src/clients/advanced/OpenIdConnectCompatibilityModes.tsx
index 0f7c5420ac..ffa70b086f 100644
--- a/js/apps/admin-ui/src/clients/advanced/OpenIdConnectCompatibilityModes.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/OpenIdConnectCompatibilityModes.tsx
@@ -49,7 +49,7 @@ export const OpenIdConnectCompatibilityModes = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={field.value === "true"}
-              onChange={(value) => field.onChange(value.toString())}
+              onChange={(_event, value) => field.onChange(value.toString())}
               aria-label={t("excludeSessionStateFromAuthenticationResponse")}
             />
           )}
@@ -78,7 +78,7 @@ export const OpenIdConnectCompatibilityModes = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={field.value === "true"}
-              onChange={(value) => field.onChange(value.toString())}
+              onChange={(_event, value) => field.onChange(value.toString())}
               aria-label={t("excludeIssuerFromAuthenticationResponse")}
             />
           )}
@@ -107,7 +107,7 @@ export const OpenIdConnectCompatibilityModes = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={field.value === "true"}
-              onChange={(value) => field.onChange(value.toString())}
+              onChange={(_event, value) => field.onChange(value.toString())}
               aria-label={t("useRefreshTokens")}
             />
           )}
@@ -136,7 +136,7 @@ export const OpenIdConnectCompatibilityModes = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={field.value === "true"}
-              onChange={(value) => field.onChange(value.toString())}
+              onChange={(_event, value) => field.onChange(value.toString())}
               aria-label={t("useRefreshTokenForClientCredentialsGrant")}
             />
           )}
@@ -165,7 +165,7 @@ export const OpenIdConnectCompatibilityModes = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={field.value === "true"}
-              onChange={(value) => field.onChange(value.toString())}
+              onChange={(_event, value) => field.onChange(value.toString())}
               aria-label={t("useLowerCaseBearerType")}
             />
           )}
diff --git a/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx b/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx
index b69ae587ba..43cbedae92 100644
--- a/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/TokenLifespan.tsx
@@ -1,11 +1,9 @@
+import { FormGroup, Split, SplitItem } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-  Split,
-  SplitItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -60,7 +58,7 @@ export const TokenLifespan = ({
             <SplitItem>
               <Select
                 variant={SelectVariant.single}
-                onToggle={setOpen}
+                onToggle={(_event, val) => setOpen(val)}
                 isOpen={open}
                 onSelect={(_, value) => {
                   field.onChange(value);
diff --git a/js/apps/admin-ui/src/clients/authorization/AuthorizationDataModal.tsx b/js/apps/admin-ui/src/clients/authorization/AuthorizationDataModal.tsx
index 59897bebe3..2e0222df2c 100644
--- a/js/apps/admin-ui/src/clients/authorization/AuthorizationDataModal.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/AuthorizationDataModal.tsx
@@ -1,17 +1,17 @@
-import { useTranslation } from "react-i18next";
+import type AccessTokenRepresentation from "@keycloak/keycloak-admin-client/lib/defs/accessTokenRepresentation";
 import {
   Button,
   Modal,
   ModalVariant,
-  TextContent,
   Text,
+  TextArea,
+  TextContent,
   TextVariants,
 } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
 
-import type AccessTokenRepresentation from "@keycloak/keycloak-admin-client/lib/defs/accessTokenRepresentation";
-import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
-import useToggle from "../../utils/useToggle";
 import { prettyPrintJSON } from "../../util";
+import useToggle from "../../utils/useToggle";
 
 type AuthorizationDataModalProps = {
   data: AccessTokenRepresentation;
@@ -54,7 +54,7 @@ export const AuthorizationDataModal = ({
           </Button>,
         ]}
       >
-        <KeycloakTextArea readOnly rows={20} value={prettyPrintJSON(data)} />
+        <TextArea readOnly rows={20} value={prettyPrintJSON(data)} />
       </Modal>
     </>
   );
diff --git a/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx b/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx
index ec0b41f18e..52ec61db7c 100644
--- a/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx
@@ -14,16 +14,19 @@ import {
   Panel,
   PanelHeader,
   PanelMainBody,
-  Select,
-  SelectOption,
-  SelectVariant,
   Switch,
   Title,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, TextControl } from "ui-shared";
+import { FormErrorText, HelpItem, TextControl } from "ui-shared";
+
 import { ForbiddenSection } from "../../ForbiddenSection";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
@@ -220,8 +223,6 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                   <HelpItem helpText={t("rolesHelp")} fieldLabelId="roles" />
                 }
                 fieldId="realmRole"
-                validated={errors.roleIds ? "error" : "default"}
-                helperTextInvalid={t("required")}
                 isRequired={user.length === 0}
               >
                 <Controller
@@ -237,7 +238,7 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                       placeholderText={t("selectARole")}
                       variant={SelectVariant.typeaheadMulti}
                       toggleId="role"
-                      onToggle={setRoleDropdownOpen}
+                      onToggle={(_event, val) => setRoleDropdownOpen(val)}
                       selections={field.value}
                       onSelect={(_, v) => {
                         const option = v.toString();
@@ -269,6 +270,7 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                     </Select>
                   )}
                 />
+                {errors.roleIds && <FormErrorText message={t("required")} />}
               </FormGroup>
             </FormAccess>
           </PanelMainBody>
@@ -294,7 +296,7 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                   label={t("on")}
                   labelOff={t("off")}
                   isChecked={applyToResourceType}
-                  onChange={setApplyToResourceType}
+                  onChange={(_event, val) => setApplyToResourceType(val)}
                   aria-label={t("applyToResourceType")}
                 />
               </FormGroup>
@@ -344,7 +346,7 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                       render={({ field }) => (
                         <Select
                           toggleId="authScopes"
-                          onToggle={setScopesDropdownOpen}
+                          onToggle={(_event, val) => setScopesDropdownOpen(val)}
                           onSelect={(_, v) => {
                             const option = v.toString();
                             if (field.value.includes(option)) {
@@ -391,7 +393,6 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
                       fieldLabelId={`contextualAttributes`}
                     />
                   }
-                  helperTextInvalid={t("required")}
                   fieldId="contextualAttributes"
                 >
                   <KeyBasedAttributeInput
@@ -407,7 +408,7 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
           <Button
             data-testid="authorization-eval"
             id="authorization-eval"
-            className="pf-u-mr-md"
+            className="pf-v5-u-mr-md"
             isDisabled={!isValid}
             onClick={() => evaluate()}
           >
@@ -416,7 +417,7 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
           <Button
             data-testid="authorization-revert"
             id="authorization-revert"
-            className="pf-u-mr-md"
+            className="pf-v5-u-mr-md"
             variant="link"
             onClick={() => reset()}
           >
diff --git a/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluateResource.tsx b/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluateResource.tsx
index 3c38cb45eb..34e19d9e9e 100644
--- a/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluateResource.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluateResource.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import {
   ExpandableRowContent,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -59,7 +59,7 @@ export const AuthorizationEvaluateResource = ({
                 isHorizontal
                 className="keycloak_resource_details"
               >
-                <TableComposable aria-label={t("evaluationResults")}>
+                <Table aria-label={t("evaluationResults")}>
                   <Thead>
                     <Tr>
                       <Th aria-hidden="true" />
@@ -82,7 +82,7 @@ export const AuthorizationEvaluateResource = ({
                       />
                     ),
                   )}
-                </TableComposable>
+                </Table>
               </DescriptionList>
             )}
           </ExpandableRowContent>
diff --git a/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx b/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx
index de75ebe594..a41beea1ef 100644
--- a/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/AuthorizationExport.tsx
@@ -63,7 +63,7 @@ export const AuthorizationExport = () => {
       <FormAccess
         isHorizontal
         role="manage-authorization"
-        className="pf-u-mt-lg"
+        className="pf-v5-u-mt-lg"
       >
         <TextAreaControl
           name="authDetails"
diff --git a/js/apps/admin-ui/src/clients/authorization/DecisionStrategySelect.tsx b/js/apps/admin-ui/src/clients/authorization/DecisionStrategySelect.tsx
index d4a26d3eaa..cfbcf8e2d9 100644
--- a/js/apps/admin-ui/src/clients/authorization/DecisionStrategySelect.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/DecisionStrategySelect.tsx
@@ -52,7 +52,7 @@ export const DecisionStrategySelect = ({
                 name="decisionStrategy"
                 onChange={() => field.onChange(strategy)}
                 label={t(`decisionStrategies.${strategy}`)}
-                className="pf-u-mb-md"
+                className="pf-v5-u-mb-md"
               />
             ))}
           </>
diff --git a/js/apps/admin-ui/src/clients/authorization/DeleteScopeDialog.tsx b/js/apps/admin-ui/src/clients/authorization/DeleteScopeDialog.tsx
index 30e0b860b5..9aced7b97c 100644
--- a/js/apps/admin-ui/src/clients/authorization/DeleteScopeDialog.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/DeleteScopeDialog.tsx
@@ -57,11 +57,11 @@ export const DeleteScopeDialog = ({
             isInline
             isPlain
             title={t("deleteScopeWarning")}
-            className="pf-u-pt-lg"
+            className="pf-v5-u-pt-lg"
           >
-            <p className="pf-u-pt-xs">
+            <p className="pf-v5-u-pt-xs">
               {selectedScope.permissions.map((permission) => (
-                <strong key={permission.id} className="pf-u-pr-md">
+                <strong key={permission.id} className="pf-v5-u-pr-md">
                   {permission.name}
                 </strong>
               ))}
diff --git a/js/apps/admin-ui/src/clients/authorization/DetailDescription.tsx b/js/apps/admin-ui/src/clients/authorization/DetailDescription.tsx
index f74501aab6..1235858682 100644
--- a/js/apps/admin-ui/src/clients/authorization/DetailDescription.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/DetailDescription.tsx
@@ -35,11 +35,11 @@ export function DetailDescriptionLink<T>({
           const value =
             typeof element === "string" ? element : convert!(element);
           return link ? (
-            <Link key={value} to={link(element as T)} className="pf-u-pr-sm">
+            <Link key={value} to={link(element as T)} className="pf-v5-u-pr-sm">
               {value}
             </Link>
           ) : (
-            <span key={value} className="pf-u-pr-sm">
+            <span key={value} className="pf-v5-u-pr-sm">
               {value}
             </span>
           );
diff --git a/js/apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx b/js/apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx
index 5e4e68b734..94cc870340 100644
--- a/js/apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/EmptyPermissionsState.tsx
@@ -3,10 +3,11 @@ import { useTranslation } from "react-i18next";
 import {
   EmptyState,
   EmptyStateIcon,
-  Title,
   EmptyStateBody,
   Button,
   Tooltip,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from "@patternfly/react-core";
 import { PlusCircleIcon } from "@patternfly/react-icons";
 
@@ -32,7 +33,7 @@ const EmptyButton = ({
     <Button
       data-testid={`create-${permissionType}`}
       className={
-        disabled ? "keycloak__permissions__empty_state " : "" + "pf-u-m-sm"
+        disabled ? "keycloak__permissions__empty_state " : "" + "pf-v5-u-m-sm"
       }
       variant="secondary"
       onClick={() =>
@@ -81,23 +82,26 @@ export const EmptyPermissionsState = ({
 }: EmptyPermissionsStateProps) => {
   const { t } = useTranslation();
   return (
-    <EmptyState data-testid="empty-state" variant="large">
-      <EmptyStateIcon icon={PlusCircleIcon} />
-      <Title headingLevel="h1" size="lg">
-        {t("emptyPermissions")}
-      </Title>
+    <EmptyState data-testid="empty-state" variant="lg">
+      <EmptyStateHeader
+        titleText={<>{t("emptyPermissions")}</>}
+        icon={<EmptyStateIcon icon={PlusCircleIcon} />}
+        headingLevel="h1"
+      />
       <EmptyStateBody>{t("emptyPermissionInstructions")}</EmptyStateBody>
-      <TooltipEmptyButton
-        permissionType="resource"
-        disabled={isResourceEnabled}
-        clientId={clientId}
-      />
-      <br />
-      <TooltipEmptyButton
-        permissionType="scope"
-        disabled={isScopeEnabled}
-        clientId={clientId}
-      />
+      <EmptyStateFooter>
+        <TooltipEmptyButton
+          permissionType="resource"
+          disabled={isResourceEnabled}
+          clientId={clientId}
+        />
+        <br />
+        <TooltipEmptyButton
+          permissionType="scope"
+          disabled={isScopeEnabled}
+          clientId={clientId}
+        />
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
diff --git a/js/apps/admin-ui/src/clients/authorization/ImportDialog.tsx b/js/apps/admin-ui/src/clients/authorization/ImportDialog.tsx
index c48b4b018b..9513354894 100644
--- a/js/apps/admin-ui/src/clients/authorization/ImportDialog.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/ImportDialog.tsx
@@ -61,7 +61,7 @@ export const ImportDialog = ({ onConfirm, closeDialog }: ImportDialogProps) => {
       {Object.keys(imported).length !== 0 && (
         <>
           <Divider />
-          <p className="pf-u-my-lg">{t("importResources")}</p>
+          <p className="pf-v5-u-my-lg">{t("importResources")}</p>
           <Form isHorizontal>
             <FormGroup
               label={t("policyEnforcementMode")}
@@ -82,7 +82,7 @@ export const ImportDialog = ({ onConfirm, closeDialog }: ImportDialogProps) => {
                 )}
                 isChecked
                 isDisabled
-                className="pf-u-mb-md"
+                className="pf-v5-u-mb-md"
               />
             </FormGroup>
             <FormGroup
@@ -102,7 +102,7 @@ export const ImportDialog = ({ onConfirm, closeDialog }: ImportDialogProps) => {
                 isChecked
                 isDisabled
                 label={t(`decisionStrategies.${imported.decisionStrategy}`)}
-                className="pf-u-mb-md"
+                className="pf-v5-u-mb-md"
               />
             </FormGroup>
             <FormGroup
@@ -126,13 +126,13 @@ export const ImportDialog = ({ onConfirm, closeDialog }: ImportDialogProps) => {
               />
             </FormGroup>
           </Form>
-          <div className="pf-u-mt-md">
+          <div className="pf-v5-u-mt-md">
             {Object.entries(imported)
               .filter(([, value]) => Array.isArray(value))
               .map(([key, value]) => (
                 <Fragment key={key}>
                   <Divider />
-                  <p className="pf-u-my-sm">
+                  <p className="pf-v5-u-my-sm">
                     <strong>
                       {value.length} {t(key)}
                     </strong>
@@ -143,7 +143,7 @@ export const ImportDialog = ({ onConfirm, closeDialog }: ImportDialogProps) => {
           <Divider />
           <Alert
             variant="warning"
-            className="pf-u-mt-lg"
+            className="pf-v5-u-mt-lg"
             isInline
             title={t("importWarning")}
           />
diff --git a/js/apps/admin-ui/src/clients/authorization/KeyBasedAttributeInput.tsx b/js/apps/admin-ui/src/clients/authorization/KeyBasedAttributeInput.tsx
index 538930da77..0b5691a677 100644
--- a/js/apps/admin-ui/src/clients/authorization/KeyBasedAttributeInput.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/KeyBasedAttributeInput.tsx
@@ -1,26 +1,18 @@
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import type ResourceRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceRepresentation";
+import { Button, TextInput } from "@patternfly/react-core";
 import {
-  Button,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+} from "@patternfly/react-core/deprecated";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { camelCase } from "lodash-es";
+import { useEffect, useMemo, useState } from "react";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
-import type ResourceRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceRepresentation";
 import { defaultContextAttributes } from "../utils";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./key-based-attribute-input.css";
 
@@ -116,7 +108,7 @@ const ValueInput = ({
                 expandedText: t("hide"),
                 collapsedText: t("showRemaining"),
               }}
-              onToggle={(open) => toggleValueSelect(rowIndex, open)}
+              onToggle={(_event, open) => toggleValueSelect(rowIndex, open)}
               isOpen={isValueOpenArray[rowIndex]}
               variant={SelectVariant.typeahead}
               typeAheadAriaLabel={t("selectOrTypeAKey")}
@@ -133,7 +125,7 @@ const ValueInput = ({
           )}
         />
       ) : (
-        <KeycloakTextInput
+        <TextInput
           id={`${getMessageBundleKey(attribute.key)}-value`}
           className="value-input"
           defaultValue={attribute.value}
@@ -174,7 +166,7 @@ export const KeyBasedAttributeInput = ({
   const watchLastValue = watch(`${name}.${fields.length - 1}.value`, "");
 
   return (
-    <TableComposable
+    <Table
       className="kc-attributes__table"
       aria-label="Role attribute keys and values"
       variant="compact"
@@ -198,7 +190,7 @@ export const KeyBasedAttributeInput = ({
                     toggleId={`${name}.${rowIndex}.key`}
                     className="kc-attribute-key-selectable"
                     name={`${name}.${rowIndex}.key`}
-                    onToggle={(open) => toggleKeySelect(rowIndex, open)}
+                    onToggle={(_event, open) => toggleKeySelect(rowIndex, open)}
                     isOpen={isKeyOpenArray[rowIndex]}
                     variant={SelectVariant.typeahead}
                     typeAheadAriaLabel={t("selectOrTypeAKey")}
@@ -263,6 +255,6 @@ export const KeyBasedAttributeInput = ({
           </Td>
         </Tr>
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx b/js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
index 21448abdd7..5bb8235823 100644
--- a/js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
@@ -6,14 +6,7 @@ import {
   Text,
   TextVariants,
 } from "@patternfly/react-core";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
 import type PolicyProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyProviderRepresentation";
 import { isValidComponentType } from "./policy/PolicyDetails";
@@ -53,7 +46,7 @@ export const NewPolicyDialog = ({
       isOpen
       onClose={toggleDialog}
     >
-      <TableComposable aria-label={t("policies")} variant="compact">
+      <Table aria-label={t("policies")} variant="compact">
         <Thead>
           <Tr>
             <Th>{t("name")}</Th>
@@ -66,7 +59,7 @@ export const NewPolicyDialog = ({
               key={provider.type}
               data-testid={provider.type}
               onRowClick={() => onSelect(provider)}
-              isHoverable
+              isClickable
             >
               <Td>{provider.name}</Td>
               <Td>
@@ -76,7 +69,7 @@ export const NewPolicyDialog = ({
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </Modal>
   );
 };
diff --git a/js/apps/admin-ui/src/clients/authorization/PermissionDetails.tsx b/js/apps/admin-ui/src/clients/authorization/PermissionDetails.tsx
index 42c55e1ff0..a46ba9ca90 100644
--- a/js/apps/admin-ui/src/clients/authorization/PermissionDetails.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/PermissionDetails.tsx
@@ -5,26 +5,32 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   FormGroup,
   PageSection,
   Radio,
-  SelectVariant,
   Switch,
 } from "@patternfly/react-core";
+import { DropdownItem, SelectVariant } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { HelpItem, TextAreaControl, TextControl } from "ui-shared";
+import {
+  FormErrorText,
+  HelpItem,
+  TextAreaControl,
+  TextControl,
+} from "ui-shared";
+
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
-import { useFetch } from "../../utils/useFetch";
+import { useAccess } from "../../context/access/Access";
 import { toUpperCase } from "../../util";
+import { useFetch } from "../../utils/useFetch";
 import { useParams } from "../../utils/useParams";
 import { toAuthorizationTab } from "../routes/AuthenticationTab";
 import type { NewPermissionParams } from "../routes/NewPermission";
@@ -34,7 +40,6 @@ import {
 } from "../routes/PermissionDetails";
 import { ResourcesPolicySelect } from "./ResourcesPolicySelect";
 import { ScopeSelect } from "./ScopeSelect";
-import { useAccess } from "../../context/access/Access";
 
 type FormFields = PolicyRepresentation & {
   resourceType: string;
@@ -244,7 +249,7 @@ export default function PermissionDetails() {
                 label={t("on")}
                 labelOff={t("off")}
                 isChecked={applyToResourceTypeFlag}
-                onChange={setApplyToResourceTypeFlag}
+                onChange={(_event, val) => setApplyToResourceTypeFlag(val)}
                 aria-label={t("applyToResourceTypeFlag")}
               />
             </FormGroup>
@@ -270,8 +275,6 @@ export default function PermissionDetails() {
                     fieldLabelId="resources"
                   />
                 }
-                helperTextInvalid={t("required")}
-                validated={errors.resources ? "error" : "default"}
                 isRequired={permissionType !== "scope"}
               >
                 <ResourcesPolicySelect
@@ -288,6 +291,7 @@ export default function PermissionDetails() {
                   }
                   isRequired={permissionType !== "scope"}
                 />
+                {errors.resources && <FormErrorText message={t("required")} />}
               </FormGroup>
             )}
             {permissionType === "scope" && (
@@ -300,8 +304,6 @@ export default function PermissionDetails() {
                     fieldLabelId="scopesSelect"
                   />
                 }
-                helperTextInvalid={t("required")}
-                validated={errors.scopes ? "error" : "default"}
                 isRequired
               >
                 <ScopeSelect
@@ -309,6 +311,7 @@ export default function PermissionDetails() {
                   resourceId={resourcesIds?.[0]}
                   preSelected={selectedId}
                 />
+                {errors.scopes && <FormErrorText message={t("required")} />}
               </FormGroup>
             )}
             <FormGroup
@@ -355,7 +358,7 @@ export default function PermissionDetails() {
                         name="decisionStrategies"
                         onChange={() => field.onChange(strategy)}
                         label={t(`decisionStrategies.${strategy}`)}
-                        className="pf-u-mb-md"
+                        className="pf-v5-u-mb-md"
                       />
                     ))}
                   </>
@@ -363,7 +366,7 @@ export default function PermissionDetails() {
               />
             </FormGroup>
             <ActionGroup>
-              <div className="pf-u-mt-md">
+              <div className="pf-v5-u-mt-md">
                 <Button
                   variant={ButtonVariant.primary}
                   type="submit"
diff --git a/js/apps/admin-ui/src/clients/authorization/Permissions.tsx b/js/apps/admin-ui/src/clients/authorization/Permissions.tsx
index 8579335a0a..3cf3a8f363 100644
--- a/js/apps/admin-ui/src/clients/authorization/Permissions.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Permissions.tsx
@@ -5,16 +5,18 @@ import {
   AlertVariant,
   ButtonVariant,
   DescriptionList,
-  Dropdown,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownToggle,
   PageSection,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import {
   ExpandableRowContent,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -181,7 +183,7 @@ export const AuthorizationPermissions = ({
   const noData = permissions.length === 0;
   const searching = Object.keys(search).length !== 0;
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <DeleteConfirm />
       {(!noData || searching) && (
         <PaginatingTableToolbar
@@ -210,7 +212,7 @@ export const AuthorizationPermissions = ({
                     <DropdownToggle
                       onToggle={toggleCreate}
                       isDisabled={isDisabled}
-                      isPrimary
+                      toggleVariant="primary"
                       data-testid="permissionCreateDropdown"
                     >
                       {t("createPermission")}
@@ -254,7 +256,7 @@ export const AuthorizationPermissions = ({
                       {t("createScopeBasedPermission")}
                       {disabledCreate?.scopes && (
                         <Alert
-                          className="pf-u-mt-sm"
+                          className="pf-v5-u-mt-sm"
                           variant="warning"
                           isInline
                           isPlain
@@ -269,7 +271,7 @@ export const AuthorizationPermissions = ({
           }
         >
           {!noData && (
-            <TableComposable aria-label={t("resources")} variant="compact">
+            <Table aria-label={t("resources")} variant="compact">
               <Thead>
                 <Tr>
                   <Th aria-hidden="true" />
@@ -365,7 +367,7 @@ export const AuthorizationPermissions = ({
                   </Tr>
                 </Tbody>
               ))}
-            </TableComposable>
+            </Table>
           )}
         </PaginatingTableToolbar>
       )}
diff --git a/js/apps/admin-ui/src/clients/authorization/Policies.tsx b/js/apps/admin-ui/src/clients/authorization/Policies.tsx
index 54d7e44fd5..fc1145e163 100644
--- a/js/apps/admin-ui/src/clients/authorization/Policies.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Policies.tsx
@@ -10,7 +10,7 @@ import {
 } from "@patternfly/react-core";
 import {
   ExpandableRowContent,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -134,11 +134,11 @@ export const AuthorizationPolicies = ({
               isPlain
               component="p"
               title={t("deletePolicyWarning")}
-              className="pf-u-pt-lg"
+              className="pf-v5-u-pt-lg"
             >
-              <p className="pf-u-pt-xs">
+              <p className="pf-v5-u-pt-xs">
                 {selectedPolicy.dependentPolicies.map((policy) => (
-                  <strong key={policy.id} className="pf-u-pr-md">
+                  <strong key={policy.id} className="pf-v5-u-pr-md">
                     {policy.name}
                   </strong>
                 ))}
@@ -169,7 +169,7 @@ export const AuthorizationPolicies = ({
   const noData = policies.length === 0;
   const searching = Object.keys(search).length !== 0;
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <DeleteConfirm />
       {(!noData || searching) && (
         <>
@@ -218,7 +218,7 @@ export const AuthorizationPolicies = ({
             }
           >
             {!noData && (
-              <TableComposable aria-label={t("resources")} variant="compact">
+              <Table aria-label={t("resources")} variant="compact">
                 <Thead>
                   <Tr>
                     <Th aria-hidden="true" />
@@ -311,7 +311,7 @@ export const AuthorizationPolicies = ({
                     </Tr>
                   </Tbody>
                 ))}
-              </TableComposable>
+              </Table>
             )}
           </PaginatingTableToolbar>
         </>
diff --git a/js/apps/admin-ui/src/clients/authorization/ResourceDetails.tsx b/js/apps/admin-ui/src/clients/authorization/ResourceDetails.tsx
index fb39124105..45b5d98c3d 100644
--- a/js/apps/admin-ui/src/clients/authorization/ResourceDetails.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/ResourceDetails.tsx
@@ -7,10 +7,10 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   FormGroup,
   PageSection,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -127,11 +127,11 @@ export default function ResourceDetails() {
             isInline
             isPlain
             title={t("deleteResourceWarning")}
-            className="pf-u-pt-lg"
+            className="pf-v5-u-pt-lg"
           >
-            <p className="pf-u-pt-xs">
+            <p className="pf-v5-u-pt-xs">
               {permissions?.map((permission) => (
-                <strong key={permission.id} className="pf-u-pr-md">
+                <strong key={permission.id} className="pf-v5-u-pr-md">
                   {permission.name}
                 </strong>
               ))}
@@ -251,7 +251,7 @@ export default function ResourceDetails() {
               <KeyValueInput name="attributes" isDisabled={isDisabled} />
             </FormGroup>
             <ActionGroup>
-              <div className="pf-u-mt-md">
+              <div className="pf-v5-u-mt-md">
                 <Button
                   variant={ButtonVariant.primary}
                   type="submit"
diff --git a/js/apps/admin-ui/src/clients/authorization/Resources.tsx b/js/apps/admin-ui/src/clients/authorization/Resources.tsx
index 8c2d4ebe81..091e295bf3 100644
--- a/js/apps/admin-ui/src/clients/authorization/Resources.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Resources.tsx
@@ -9,7 +9,7 @@ import {
 } from "@patternfly/react-core";
 import {
   ExpandableRowContent,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -111,11 +111,11 @@ export const AuthorizationResources = ({
             isInline
             isPlain
             title={t("deleteResourceWarning")}
-            className="pf-u-pt-lg"
+            className="pf-v5-u-pt-lg"
           >
-            <p className="pf-u-pt-xs">
+            <p className="pf-v5-u-pt-xs">
               {permissions.map((permission) => (
-                <strong key={permission.id} className="pf-u-pr-md">
+                <strong key={permission.id} className="pf-v5-u-pr-md">
                   {permission.name}
                 </strong>
               ))}
@@ -146,7 +146,7 @@ export const AuthorizationResources = ({
   const noData = resources.length === 0;
   const searching = Object.keys(search).length !== 0;
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <DeleteConfirm />
       {(!noData || searching) && (
         <PaginatingTableToolbar
@@ -187,7 +187,7 @@ export const AuthorizationResources = ({
           }
         >
           {!noData && (
-            <TableComposable aria-label={t("resources")} variant="compact">
+            <Table aria-label={t("resources")} variant="compact">
               <Thead>
                 <Tr>
                   <Th aria-hidden="true" />
@@ -299,7 +299,7 @@ export const AuthorizationResources = ({
                   </Tr>
                 </Tbody>
               ))}
-            </TableComposable>
+            </Table>
           )}
         </PaginatingTableToolbar>
       )}
diff --git a/js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx b/js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
index 0c262e6810..ff3a6e6fc2 100644
--- a/js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
@@ -4,15 +4,12 @@ import type {
   Clients,
   PolicyQuery,
 } from "@keycloak/keycloak-admin-client/lib/resources/clients";
+import { Button, ButtonVariant, Chip, ChipGroup } from "@patternfly/react-core";
 import {
-  Button,
-  ButtonVariant,
-  Chip,
-  ChipGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import {
   Controller,
@@ -235,7 +232,7 @@ export const ResourcesPolicySelect = ({
           <Select
             toggleId={name}
             variant={variant}
-            onToggle={setOpen}
+            onToggle={(_event, val) => setOpen(val)}
             onFilter={(_, filter) => {
               setSearch(filter);
               return toSelectOptions();
diff --git a/js/apps/admin-ui/src/clients/authorization/ScopeDetails.tsx b/js/apps/admin-ui/src/clients/authorization/ScopeDetails.tsx
index 902cdf21c8..fbdae05bdd 100644
--- a/js/apps/admin-ui/src/clients/authorization/ScopeDetails.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/ScopeDetails.tsx
@@ -4,9 +4,9 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   PageSection,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -136,7 +136,7 @@ export default function ScopeDetails() {
               labelIcon={t("iconUriHelp")}
             />
             <ActionGroup>
-              <div className="pf-u-mt-md">
+              <div className="pf-v5-u-mt-md">
                 <Button
                   variant={ButtonVariant.primary}
                   type="submit"
diff --git a/js/apps/admin-ui/src/clients/authorization/ScopePicker.tsx b/js/apps/admin-ui/src/clients/authorization/ScopePicker.tsx
index b63babee45..849fc01115 100644
--- a/js/apps/admin-ui/src/clients/authorization/ScopePicker.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/ScopePicker.tsx
@@ -1,10 +1,10 @@
 import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/scopeRepresentation";
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -69,7 +69,7 @@ export const ScopePicker = ({ clientId }: { clientId: string }) => {
               expandedText: t("hide"),
               collapsedText: t("showRemaining"),
             }}
-            onToggle={setOpen}
+            onToggle={(_event, val) => setOpen(val)}
             isOpen={open}
             selections={field.value.map((o: Scope) => o.name)}
             onFilter={(_, value) => {
diff --git a/js/apps/admin-ui/src/clients/authorization/ScopeSelect.tsx b/js/apps/admin-ui/src/clients/authorization/ScopeSelect.tsx
index cf742abcac..58fb94ae79 100644
--- a/js/apps/admin-ui/src/clients/authorization/ScopeSelect.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/ScopeSelect.tsx
@@ -1,5 +1,9 @@
 import type ScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/scopeRepresentation";
-import { Select, SelectOption, SelectVariant } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -85,7 +89,7 @@ export const ScopeSelect = ({
         <Select
           toggleId="scopes"
           variant={SelectVariant.typeaheadMulti}
-          onToggle={setOpen}
+          onToggle={(_event, val) => setOpen(val)}
           onFilter={(_, filter) => {
             setSearch(filter);
             return toSelectOptions(scopes);
diff --git a/js/apps/admin-ui/src/clients/authorization/Scopes.tsx b/js/apps/admin-ui/src/clients/authorization/Scopes.tsx
index 693d126b78..d1c9ecbff3 100644
--- a/js/apps/admin-ui/src/clients/authorization/Scopes.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Scopes.tsx
@@ -8,7 +8,7 @@ import {
 } from "@patternfly/react-core";
 import {
   ExpandableRowContent,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -148,7 +148,7 @@ export const AuthorizationScopes = ({
   const noData = scopes.length === 0;
   const searching = search !== "";
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <DeleteScopeDialog
         clientId={clientId}
         open={deleteDialog}
@@ -184,7 +184,7 @@ export const AuthorizationScopes = ({
           }
         >
           {!noData && (
-            <TableComposable aria-label={t("scopes")} variant="compact">
+            <Table aria-label={t("scopes")} variant="compact">
               <Thead>
                 <Tr>
                   <Th aria-hidden="true" />
@@ -301,7 +301,7 @@ export const AuthorizationScopes = ({
                   </Tr>
                 </Tbody>
               ))}
-            </TableComposable>
+            </Table>
           )}
         </PaginatingTableToolbar>
       )}
diff --git a/js/apps/admin-ui/src/clients/authorization/SearchDropdown.tsx b/js/apps/admin-ui/src/clients/authorization/SearchDropdown.tsx
index c73e50a0f3..99d6d6b000 100644
--- a/js/apps/admin-ui/src/clients/authorization/SearchDropdown.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/SearchDropdown.tsx
@@ -1,11 +1,6 @@
 import type PolicyProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyProviderRepresentation";
-import {
-  ActionGroup,
-  Button,
-  Dropdown,
-  DropdownToggle,
-  Form,
-} from "@patternfly/react-core";
+import { ActionGroup, Button, Form } from "@patternfly/react-core";
+import { Dropdown, DropdownToggle } from "@patternfly/react-core/deprecated";
 import { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -56,7 +51,7 @@ export const SearchDropdown = ({
   return (
     <Dropdown
       data-testid="searchdropdown_dorpdown"
-      className="pf-u-ml-md"
+      className="pf-v5-u-ml-md"
       toggle={
         <DropdownToggle
           onToggle={toggle}
diff --git a/js/apps/admin-ui/src/clients/authorization/Settings.tsx b/js/apps/admin-ui/src/clients/authorization/Settings.tsx
index 38bee61b3a..80dd49e77f 100644
--- a/js/apps/admin-ui/src/clients/authorization/Settings.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/Settings.tsx
@@ -135,7 +135,7 @@ export const AuthorizationSettings = ({ clientId }: { clientId: string }) => {
                     name="policyEnforcementMode"
                     onChange={() => field.onChange(mode)}
                     label={t(`policyEnforcementModes.${mode}`)}
-                    className="pf-u-mb-md"
+                    className="pf-v5-u-mb-md"
                   />
                 ))}
               </>
diff --git a/js/apps/admin-ui/src/clients/authorization/detail-cell.css b/js/apps/admin-ui/src/clients/authorization/detail-cell.css
index d862d810d1..d99e493a73 100644
--- a/js/apps/admin-ui/src/clients/authorization/detail-cell.css
+++ b/js/apps/admin-ui/src/clients/authorization/detail-cell.css
@@ -1,3 +1,3 @@
 .keycloak_resource_details {
-  --pf-c-description-list--m-horizontal__term--width: 20ch;
+  --pf-v5-c-description-list--m-horizontal__term--width: 20ch;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/clients/authorization/evaluate/Results.tsx b/js/apps/admin-ui/src/clients/authorization/evaluate/Results.tsx
index 786b8508d4..cbb4967121 100644
--- a/js/apps/admin-ui/src/clients/authorization/evaluate/Results.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/evaluate/Results.tsx
@@ -5,16 +5,19 @@ import {
   Form,
   InputGroup,
   PageSection,
-  Select,
-  SelectOption,
-  SelectVariant,
   TextInput,
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
+  InputGroupItem,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { SearchIcon } from "@patternfly/react-icons";
-import { TableComposable, Th, Thead, Tr } from "@patternfly/react-table";
+import { Table, Th, Thead, Tr } from "@patternfly/react-table";
 import { KeyboardEvent, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -88,22 +91,26 @@ export const Results = ({ evaluateResult, refresh, back }: ResultProps) => {
         <ToolbarGroup className="providers-toolbar">
           <ToolbarItem>
             <InputGroup>
-              <TextInput
-                name={"inputGroupName"}
-                id={"inputGroupName"}
-                type="search"
-                aria-label={t("search")}
-                placeholder={t("search")}
-                onChange={setSearchInput}
-                onKeyDown={handleKeyDown}
-              />
-              <Button
-                variant={ButtonVariant.control}
-                aria-label={t("search")}
-                onClick={() => confirmSearchQuery()}
-              >
-                <SearchIcon />
-              </Button>
+              <InputGroupItem isFill>
+                <TextInput
+                  name={"inputGroupName"}
+                  id={"inputGroupName"}
+                  type="search"
+                  aria-label={t("search")}
+                  placeholder={t("search")}
+                  onChange={(_event, val) => setSearchInput(val)}
+                  onKeyDown={handleKeyDown}
+                />
+              </InputGroupItem>
+              <InputGroupItem>
+                <Button
+                  variant={ButtonVariant.control}
+                  aria-label={t("search")}
+                  onClick={() => confirmSearchQuery()}
+                >
+                  <SearchIcon />
+                </Button>
+              </InputGroupItem>
             </InputGroup>
           </ToolbarItem>
           <ToolbarItem>
@@ -145,7 +152,7 @@ export const Results = ({ evaluateResult, refresh, back }: ResultProps) => {
         </ToolbarGroup>
       </Toolbar>
       {!noFilteredData && (
-        <TableComposable aria-label={t("evaluationResults")}>
+        <Table aria-label={t("evaluationResults")}>
           <Thead>
             <Tr>
               <Th aria-hidden="true" />
@@ -163,7 +170,7 @@ export const Results = ({ evaluateResult, refresh, back }: ResultProps) => {
               evaluateResults={evaluateResult.results}
             />
           ))}
-        </TableComposable>
+        </Table>
       )}
       {(noFilteredData || noEvaluatedData) && (
         <>
diff --git a/js/apps/admin-ui/src/clients/authorization/key-based-attribute-input.css b/js/apps/admin-ui/src/clients/authorization/key-based-attribute-input.css
index f696fbd34f..a8f8fdd75d 100644
--- a/js/apps/admin-ui/src/clients/authorization/key-based-attribute-input.css
+++ b/js/apps/admin-ui/src/clients/authorization/key-based-attribute-input.css
@@ -1,35 +1,35 @@
 .kc-attributes__table {
   /* even though the table is borderless, make the border under the th transparent */
-  --pf-c-table--border-width--base: 0;
-  --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
+  --pf-v5-c-table--border-width--base: 0;
+  --pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
 }
 
 .kc-attributes__plus-icon {
   /* shift the button left to adjust for table cell padding */
-  margin-left: calc(var(--pf-global--spacer--md) * -1);
+  margin-left: calc(var(--pf-v5-global--spacer--md) * -1);
 }
 
-.pf-c-button.kc-attributes__minus-icon {
+.pf-v5-c-button.kc-attributes__minus-icon {
   /* shift the button left to adjust for table cell padding */
-  margin-left: calc(var(--pf-global--spacer--md) * -1);
-  color: var(--pf-c-button--m-plain--Color);
+  margin-left: calc(var(--pf-v5-global--spacer--md) * -1);
+  color: var(--pf-v5-c-button--m-plain--Color);
 }
 
 .kc-attributes__action-group {
   /* subtract the padding at the bottom of the table from the action group margin */
-  --pf-c-form__group--m-action--MarginTop: calc(
-    var(--pf-global--spacer--2xl) - var(--pf-global--spacer--sm)
+  --pf-v5-c-form__group--m-action--MarginTop: calc(
+    var(--pf-v5-global--spacer--2xl) - var(--pf-v5-global--spacer--sm)
   );
 }
 
-.pf-c-select.kc-attribute-key-selectable {
+.pf-v5-c-select.kc-attribute-key-selectable {
   width: 400px;
 }
 
-.pf-c-select.kc-attribute-value-selectable {
+.pf-v5-c-select.kc-attribute-value-selectable {
   width: 400px;
 }
 
-.pf-c-form-control.value-input {
+.pf-v5-c-form-control.value-input {
   width: 400px;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/clients/authorization/permissions.css b/js/apps/admin-ui/src/clients/authorization/permissions.css
index 5c48f89cca..d4b8758592 100644
--- a/js/apps/admin-ui/src/clients/authorization/permissions.css
+++ b/js/apps/admin-ui/src/clients/authorization/permissions.css
@@ -1,5 +1,5 @@
-.pf-c-button.keycloak__permissions__empty_state {
-  color: var(--pf-c-button--disabled--Color);
-  background-color: var(--pf-c-button--disabled--BackgroundColor);
-  --pf-c-button--after--BorderWidth: 0;
+.pf-v5-c-button.keycloak__permissions__empty_state {
+  color: var(--pf-v5-c-button--disabled--Color);
+  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
+  --pf-v5-c-button--after--BorderWidth: 0;
 }
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/Client.tsx b/js/apps/admin-ui/src/clients/authorization/policy/Client.tsx
index fb6bcbdd1b..566c786ea5 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/Client.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/Client.tsx
@@ -1,4 +1,4 @@
-import { SelectVariant } from "@patternfly/react-core";
+import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { useTranslation } from "react-i18next";
 import { ClientSelect } from "../../../components/client/ClientSelect";
 
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/ClientScope.tsx b/js/apps/admin-ui/src/clients/authorization/policy/ClientScope.tsx
index 4e892a7862..1a28bce034 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/ClientScope.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/ClientScope.tsx
@@ -1,18 +1,11 @@
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
 import { Button, Checkbox, FormGroup } from "@patternfly/react-core";
 import { MinusCircleIcon } from "@patternfly/react-icons";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import { adminClient } from "../../../admin-client";
 import { useFetch } from "../../../utils/useFetch";
@@ -66,8 +59,6 @@ export const ClientScope = () => {
         />
       }
       fieldId="clientScopes"
-      helperTextInvalid={t("requiredClientScope")}
-      validated={errors.clientScopes ? "error" : "default"}
       isRequired
     >
       <Controller
@@ -118,7 +109,7 @@ export const ClientScope = () => {
         )}
       />
       {selectedScopes.length > 0 && (
-        <TableComposable variant="compact">
+        <Table variant="compact">
           <Thead>
             <Tr>
               <Th>{t("clientScopeTitle")}</Th>
@@ -166,7 +157,10 @@ export const ClientScope = () => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
+      )}
+      {errors.clientScopes && (
+        <FormErrorText message={t("requiredClientScope")} />
       )}
     </FormGroup>
   );
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/Group.tsx b/js/apps/admin-ui/src/clients/authorization/policy/Group.tsx
index cf64f803f1..84bb0326e0 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/Group.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/Group.tsx
@@ -1,18 +1,11 @@
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import { Button, Checkbox, FormGroup } from "@patternfly/react-core";
 import { MinusCircleIcon } from "@patternfly/react-icons";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, TextControl } from "ui-shared";
+import { FormErrorText, HelpItem, TextControl } from "ui-shared";
 
 import { adminClient } from "../../../admin-client";
 import { GroupPickerDialog } from "../../../components/group/GroupPickerDialog";
@@ -71,8 +64,6 @@ export const Group = () => {
           <HelpItem helpText={t("policyGroupsHelp")} fieldLabelId="groups" />
         }
         fieldId="groups"
-        helperTextInvalid={t("requiredGroups")}
-        validated={errors.groups ? "error" : "default"}
         isRequired
       >
         <Controller
@@ -119,7 +110,7 @@ export const Group = () => {
           )}
         />
         {selectedGroups.length > 0 && (
-          <TableComposable variant="compact">
+          <Table variant="compact">
             <Thead>
               <Tr>
                 <Th>{t("groups")}</Th>
@@ -166,8 +157,9 @@ export const Group = () => {
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         )}
+        {errors.groups && <FormErrorText message={t("requiredGroups")} />}
       </FormGroup>
     </>
   );
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/LogicSelector.tsx b/js/apps/admin-ui/src/clients/authorization/policy/LogicSelector.tsx
index 887776c31d..1e15110355 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/LogicSelector.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/LogicSelector.tsx
@@ -37,7 +37,7 @@ export const LogicSelector = ({ isDisabled }: LogicSelectorProps) => {
                 name="logic"
                 onChange={() => field.onChange(type)}
                 label={t(`logicType.${type.toLowerCase()}`)}
-                className="pf-u-mb-md"
+                className="pf-v5-u-mb-md"
                 isDisabled={isDisabled}
               />
             ))}
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx b/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx
index d2ade58e0f..efcfc3b794 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx
@@ -4,9 +4,9 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   PageSection,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -206,11 +206,11 @@ export default function PolicyDetails() {
             <LogicSelector isDisabled={isDisabled} />
           </FormProvider>
           <ActionGroup>
-            <div className="pf-u-mt-md">
+            <div className="pf-v5-u-mt-md">
               <Button
                 isDisabled={isDisabled}
                 variant={ButtonVariant.primary}
-                className="pf-u-mr-md"
+                className="pf-v5-u-mr-md"
                 type="submit"
                 data-testid="save"
               >
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/Role.tsx b/js/apps/admin-ui/src/clients/authorization/policy/Role.tsx
index 1374cc9b7a..feef906439 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/Role.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/Role.tsx
@@ -1,24 +1,17 @@
 import { Button, Checkbox, FormGroup } from "@patternfly/react-core";
 import { MinusCircleIcon } from "@patternfly/react-icons";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import { adminClient } from "../../../admin-client";
+import { DefaultSwitchControl } from "../../../components/SwitchControl";
 import { AddRoleMappingModal } from "../../../components/role-mapping/AddRoleMappingModal";
 import { Row, ServiceRole } from "../../../components/role-mapping/RoleMapping";
 import { useFetch } from "../../../utils/useFetch";
 import type { RequiredIdValue } from "./ClientScope";
-import { DefaultSwitchControl } from "../../../components/SwitchControl";
 
 export const Role = () => {
   const { t } = useTranslation();
@@ -67,8 +60,6 @@ export const Role = () => {
           <HelpItem helpText={t("policyRolesHelp")} fieldLabelId="roles" />
         }
         fieldId="roles"
-        helperTextInvalid={t("requiredRoles")}
-        validated={errors.roles ? "error" : "default"}
         isRequired
       >
         <Controller
@@ -112,7 +103,7 @@ export const Role = () => {
           )}
         />
         {selectedRoles.length > 0 && (
-          <TableComposable variant="compact">
+          <Table variant="compact">
             <Thead>
               <Tr>
                 <Th>{t("roles")}</Th>
@@ -162,8 +153,9 @@ export const Role = () => {
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         )}
+        {errors.roles && <FormErrorText message={t("requiredRoles")} />}
       </FormGroup>
       <DefaultSwitchControl
         name="fetchRoles"
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/Time.tsx b/js/apps/admin-ui/src/clients/authorization/policy/Time.tsx
index 1e19ed7522..d4741356a7 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/Time.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/Time.tsx
@@ -1,6 +1,3 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
 import {
   DatePicker,
   Flex,
@@ -11,10 +8,11 @@ import {
   Split,
   SplitItem,
   TimePicker,
-  ValidatedOptions,
 } from "@patternfly/react-core";
-
-import { HelpItem } from "ui-shared";
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 const DATE_TIME_FORMAT = /(\d\d\d\d-\d\d-\d\d)? (\d\d?):(\d\d?)/;
 const padDateSegment = (value: number) => value.toString().padStart(2, "0");
@@ -172,7 +170,7 @@ export const Time = () => {
               name="repeat"
               onChange={() => setRepeat(false)}
               label={t("notRepeat")}
-              className="pf-u-mb-md"
+              className="pf-v5-u-mb-md"
             />
           </FlexItem>
           <FlexItem>
@@ -183,7 +181,7 @@ export const Time = () => {
               name="repeat"
               onChange={() => setRepeat(true)}
               label={t("repeat")}
-              className="pf-u-mb-md"
+              className="pf-v5-u-mb-md"
             />
           </FlexItem>
         </Flex>
@@ -203,12 +201,9 @@ export const Time = () => {
           <HelpItem helpText={t("startTimeHelp")} fieldLabelId="startTime" />
         }
         isRequired
-        helperTextInvalid={t("required")}
-        validated={
-          errors.notBefore ? ValidatedOptions.error : ValidatedOptions.default
-        }
       >
         <DateTime name="notBefore" />
+        {errors.notBefore && <FormErrorText message={t("required")} />}
       </FormGroup>
       <FormGroup
         label={t("expireTime")}
@@ -217,14 +212,9 @@ export const Time = () => {
           <HelpItem helpText={t("expireTimeHelp")} fieldLabelId="expireTime" />
         }
         isRequired
-        helperTextInvalid={t("required")}
-        validated={
-          errors.notOnOrAfter
-            ? ValidatedOptions.error
-            : ValidatedOptions.default
-        }
       >
         <DateTime name="notOnOrAfter" />
+        {errors.notOnOrAfter && <FormErrorText message={t("required")} />}
       </FormGroup>
     </>
   );
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/policy-details.css b/js/apps/admin-ui/src/clients/authorization/policy/policy-details.css
index 739eac6a87..f4922a92fd 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/policy-details.css
+++ b/js/apps/admin-ui/src/clients/authorization/policy/policy-details.css
@@ -1,4 +1,4 @@
 
-.pf-c-button.keycloak__client-authorization__policy-row-remove {
-  color: var(--pf-c-button--m-plain--Color);
+.pf-v5-c-button.keycloak__client-authorization__policy-row-remove {
+  color: var(--pf-v5-c-button--m-plain--Color);
 }
diff --git a/js/apps/admin-ui/src/clients/authorization/search-dropdown.css b/js/apps/admin-ui/src/clients/authorization/search-dropdown.css
index dcc16c5411..2f575f43d8 100644
--- a/js/apps/admin-ui/src/clients/authorization/search-dropdown.css
+++ b/js/apps/admin-ui/src/clients/authorization/search-dropdown.css
@@ -1,9 +1,9 @@
 .keycloak__client_authentication__searchdropdown {
-  --pf-c-dropdown__toggle--MinWidth: 21rem;
+  --pf-v5-c-dropdown__toggle--MinWidth: 21rem;
 }
 
 .keycloak__client_authentication__searchdropdown_form {
-  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
-  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
-  margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
+  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
+  --pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
+  margin: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg);
 }
diff --git a/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx b/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx
index be7d01ad3f..05a7238d8c 100644
--- a/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx
+++ b/js/apps/admin-ui/src/clients/credentials/ClientSecret.tsx
@@ -6,6 +6,7 @@ import {
   InputGroup,
   Split,
   SplitItem,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
@@ -45,13 +46,17 @@ const SecretInput = ({
     <Split hasGutter>
       <SplitItem isFilled>
         <InputGroup>
-          <PasswordInput id={id} value={secret} isReadOnly />
-          <CopyToClipboardButton
-            id={id}
-            text={secret}
-            label="clientSecret"
-            variant="control"
-          />
+          <InputGroupItem>
+            <PasswordInput id={id} value={secret} readOnly />
+          </InputGroupItem>
+          <InputGroupItem>
+            <CopyToClipboardButton
+              id={id}
+              text={secret}
+              label="clientSecret"
+              variant="control"
+            />
+          </InputGroupItem>
         </InputGroup>
       </SplitItem>
       <SplitItem>
@@ -80,7 +85,7 @@ const ExpireDateFormatter = ({ time }: { time: number }) => {
         })
       : undefined;
 
-  return <div className="pf-u-my-md">{unixTimeToString(time)}</div>;
+  return <div className="pf-v5-u-my-md">{unixTimeToString(time)}</div>;
 };
 
 export const ClientSecret = ({ client, secret, toggle }: ClientSecretProps) => {
@@ -120,7 +125,7 @@ export const ClientSecret = ({ client, secret, toggle }: ClientSecretProps) => {
       <FormGroup
         label={t("clientSecret")}
         fieldId="kc-client-secret"
-        className="pf-u-my-md"
+        className="pf-v5-u-my-md"
       >
         <SecretInput
           id="kc-client-secret"
diff --git a/js/apps/admin-ui/src/clients/credentials/Credentials.tsx b/js/apps/admin-ui/src/clients/credentials/Credentials.tsx
index c9c8cd4415..decccb3f5e 100644
--- a/js/apps/admin-ui/src/clients/credentials/Credentials.tsx
+++ b/js/apps/admin-ui/src/clients/credentials/Credentials.tsx
@@ -135,7 +135,7 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
       <FormAccess
         onSubmit={handleSubmit(save)}
         isHorizontal
-        className="pf-u-mt-md"
+        className="pf-v5-u-mt-md"
         role="manage-clients"
         fineGrainedAccess={client.access?.configure}
       >
diff --git a/js/apps/admin-ui/src/clients/initial-access/AccessTokenDialog.tsx b/js/apps/admin-ui/src/clients/initial-access/AccessTokenDialog.tsx
index 2597d3ad3f..a172ed0f5b 100644
--- a/js/apps/admin-ui/src/clients/initial-access/AccessTokenDialog.tsx
+++ b/js/apps/admin-ui/src/clients/initial-access/AccessTokenDialog.tsx
@@ -28,11 +28,11 @@ export const AccessTokenDialog = ({
     >
       <Alert
         title={t("copyInitialAccessToken")}
-        titleHeadingLevel="h2"
+        component="h2"
         isInline
         variant={AlertVariant.warning}
       />
-      <Form className="pf-u-mt-md">
+      <Form className="pf-v5-u-mt-md">
         <FormGroup label={t("initialAccessToken")} fieldId="initialAccessToken">
           <ClipboardCopy id="initialAccessToken" isReadOnly>
             {token}
diff --git a/js/apps/admin-ui/src/clients/keys/Certificate.tsx b/js/apps/admin-ui/src/clients/keys/Certificate.tsx
index c9a29e8cc5..24651fa5d8 100644
--- a/js/apps/admin-ui/src/clients/keys/Certificate.tsx
+++ b/js/apps/admin-ui/src/clients/keys/Certificate.tsx
@@ -1,10 +1,8 @@
 import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/defs/certificateRepresentation";
-import { FormGroup } from "@patternfly/react-core";
+import { FormGroup, TextArea } from "@patternfly/react-core";
 import { useId } from "react";
 import { useTranslation } from "react-i18next";
-
 import { HelpItem } from "ui-shared";
-import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 type CertificateProps = Omit<CertificateDisplayProps, "id"> & {
   plain?: boolean;
@@ -18,7 +16,7 @@ type CertificateDisplayProps = {
 const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => {
   const { t } = useTranslation();
   return (
-    <KeycloakTextArea
+    <TextArea
       readOnly
       rows={5}
       id={id}
diff --git a/js/apps/admin-ui/src/clients/keys/ExportSamlKeyDialog.tsx b/js/apps/admin-ui/src/clients/keys/ExportSamlKeyDialog.tsx
index 2e473a3c56..1d8f7312d4 100644
--- a/js/apps/admin-ui/src/clients/keys/ExportSamlKeyDialog.tsx
+++ b/js/apps/admin-ui/src/clients/keys/ExportSamlKeyDialog.tsx
@@ -81,7 +81,7 @@ export const ExportSamlKeyDialog = ({
     >
       <Form
         id="export-saml-key-form"
-        className="pf-u-pt-lg"
+        className="pf-v5-u-pt-lg"
         onSubmit={form.handleSubmit(download)}
       >
         <FormProvider {...form}>
diff --git a/js/apps/admin-ui/src/clients/keys/GenerateKeyDialog.tsx b/js/apps/admin-ui/src/clients/keys/GenerateKeyDialog.tsx
index 88d156ef39..251863eb20 100644
--- a/js/apps/admin-ui/src/clients/keys/GenerateKeyDialog.tsx
+++ b/js/apps/admin-ui/src/clients/keys/GenerateKeyDialog.tsx
@@ -68,7 +68,7 @@ export const KeyForm = ({
   ];
 
   return (
-    <Form className="pf-u-pt-lg">
+    <Form className="pf-v5-u-pt-lg">
       <SelectControl
         name="format"
         label={t("archiveFormat")}
diff --git a/js/apps/admin-ui/src/clients/keys/ImportKeyDialog.tsx b/js/apps/admin-ui/src/clients/keys/ImportKeyDialog.tsx
index 23e4ed8dce..3e5ee2d096 100644
--- a/js/apps/admin-ui/src/clients/keys/ImportKeyDialog.tsx
+++ b/js/apps/admin-ui/src/clients/keys/ImportKeyDialog.tsx
@@ -85,7 +85,7 @@ export const ImportKeyDialog = ({
       <TextContent>
         <Text>{t("generateKeysDescription")}</Text>
       </TextContent>
-      <Form className="pf-u-pt-lg">
+      <Form className="pf-v5-u-pt-lg">
         <FormProvider {...form}>
           <SelectControl
             name="keystoreFormat"
diff --git a/js/apps/admin-ui/src/clients/keys/SamlKeys.tsx b/js/apps/admin-ui/src/clients/keys/SamlKeys.tsx
index 8dcc522575..ed16032f1b 100644
--- a/js/apps/admin-ui/src/clients/keys/SamlKeys.tsx
+++ b/js/apps/admin-ui/src/clients/keys/SamlKeys.tsx
@@ -87,7 +87,7 @@ const KeySection = ({
         />
       )}
       <FormPanel title={t(title)} className="kc-form-panel__panel">
-        <TextContent className="pf-u-pb-lg">
+        <TextContent className="pf-v5-u-pb-lg">
           <Text>{t(`${title}Explain`)}</Text>
         </TextContent>
         <FormAccess role="manage-clients" isHorizontal>
@@ -110,7 +110,7 @@ const KeySection = ({
                   label={t("on")}
                   labelOff={t("off")}
                   isChecked={field.value === "true"}
-                  onChange={(value) => {
+                  onChange={(_event, value) => {
                     const v = value.toString();
                     if (v === "true") {
                       onChanged(attr);
diff --git a/js/apps/admin-ui/src/clients/registration/AddProviderDialog.tsx b/js/apps/admin-ui/src/clients/registration/AddProviderDialog.tsx
index 1d74afa67c..8ebef01cad 100644
--- a/js/apps/admin-ui/src/clients/registration/AddProviderDialog.tsx
+++ b/js/apps/admin-ui/src/clients/registration/AddProviderDialog.tsx
@@ -49,7 +49,7 @@ export const AddProviderDialog = ({
       onClose={toggleDialog}
     >
       <DataList
-        onSelectDataListItem={(id) => {
+        onSelectDataListItem={(_event, id) => {
           onConfirm(id);
           toggleDialog();
         }}
diff --git a/js/apps/admin-ui/src/clients/registration/DetailProvider.tsx b/js/apps/admin-ui/src/clients/registration/DetailProvider.tsx
index 9f48a04cf0..4f55cb2c4b 100644
--- a/js/apps/admin-ui/src/clients/registration/DetailProvider.tsx
+++ b/js/apps/admin-ui/src/clients/registration/DetailProvider.tsx
@@ -4,9 +4,9 @@ import {
   ActionGroup,
   Button,
   ButtonVariant,
-  DropdownItem,
   PageSection,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/clients/scopes/AddScopeDialog.tsx b/js/apps/admin-ui/src/clients/scopes/AddScopeDialog.tsx
index 32bf0357f0..77e2527355 100644
--- a/js/apps/admin-ui/src/clients/scopes/AddScopeDialog.tsx
+++ b/js/apps/admin-ui/src/clients/scopes/AddScopeDialog.tsx
@@ -2,16 +2,18 @@ import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/
 import {
   Button,
   ButtonVariant,
+  Modal,
+  ModalVariant,
+} from "@patternfly/react-core";
+import {
   Dropdown,
   DropdownDirection,
   DropdownItem,
   DropdownToggle,
-  Modal,
-  ModalVariant,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import {
   CaretDownIcon,
   CaretUpIcon,
@@ -177,7 +179,7 @@ export const AddScopeDialog = ({
                   <DropdownToggle
                     isDisabled={rows.length === 0}
                     onToggle={() => setAddToggle(!addToggle)}
-                    isPrimary
+                    toggleVariant="primary"
                     toggleIndicator={CaretUpIcon}
                     id="add-scope-toggle"
                   >
diff --git a/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx b/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx
index 45f0901c0b..e70ee3a4d7 100644
--- a/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx
+++ b/js/apps/admin-ui/src/clients/scopes/ClientScopes.tsx
@@ -3,11 +3,13 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import {
   Dropdown,
   DropdownItem,
   KebabToggle,
-  ToolbarItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
diff --git a/js/apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx b/js/apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx
index 07df594028..d8bcd1f6a5 100644
--- a/js/apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx
+++ b/js/apps/admin-ui/src/clients/scopes/DedicatedScopes.tsx
@@ -102,7 +102,7 @@ export default function DedicatedScopes() {
         subKey="dedicatedScopeExplain"
         divider={false}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           isBox
           mountOnEnter
diff --git a/js/apps/admin-ui/src/clients/scopes/EvaluateScopes.tsx b/js/apps/admin-ui/src/clients/scopes/EvaluateScopes.tsx
index f01badeadb..1260a85a08 100644
--- a/js/apps/admin-ui/src/clients/scopes/EvaluateScopes.tsx
+++ b/js/apps/admin-ui/src/clients/scopes/EvaluateScopes.tsx
@@ -9,9 +9,6 @@ import {
   Grid,
   GridItem,
   PageSection,
-  Select,
-  SelectOption,
-  SelectVariant,
   Split,
   SplitItem,
   Tab,
@@ -21,6 +18,11 @@ import {
   Text,
   TextContent,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { QuestionCircleIcon } from "@patternfly/react-icons";
 import { useEffect, useRef, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
diff --git a/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx b/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
index 161a3a3e95..08b9948cb2 100644
--- a/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
+++ b/js/apps/admin-ui/src/clients/scopes/GeneratedCodeTab.tsx
@@ -1,15 +1,14 @@
-import { useTranslation } from "react-i18next";
+import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import {
   CodeBlock,
   CodeBlockAction,
   EmptyState,
   EmptyStateBody,
-  Title,
+  EmptyStateHeader,
+  TextArea,
 } from "@patternfly/react-core";
-
-import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
+import { useTranslation } from "react-i18next";
 import { CopyToClipboardButton } from "./CopyToClipboardButton";
-import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 type GeneratedCodeTabProps = {
   user?: UserRepresentation;
@@ -33,7 +32,7 @@ export const GeneratedCodeTab = ({
         </CodeBlockAction>
       }
     >
-      <KeycloakTextArea
+      <TextArea
         id={`text-area-${label}`}
         rows={20}
         value={text}
@@ -41,10 +40,8 @@ export const GeneratedCodeTab = ({
       />
     </CodeBlock>
   ) : (
-    <EmptyState variant="large" id={label}>
-      <Title headingLevel="h2" size="lg">
-        {t(`${label}No`)}
-      </Title>
+    <EmptyState variant="lg" id={label}>
+      <EmptyStateHeader titleText={<>{t(`${label}No`)}</>} headingLevel="h2" />
       <EmptyStateBody>{t(`${label}IsDisabled`)}</EmptyStateBody>
     </EmptyState>
   );
diff --git a/js/apps/admin-ui/src/clients/scopes/client-scopes.css b/js/apps/admin-ui/src/clients/scopes/client-scopes.css
index 48ebef95fc..6240000fe9 100644
--- a/js/apps/admin-ui/src/clients/scopes/client-scopes.css
+++ b/js/apps/admin-ui/src/clients/scopes/client-scopes.css
@@ -4,7 +4,7 @@
 }
 
 .keycloak__client-scopes-add__add-dropdown {
-  margin-right: var(--pf-global--spacer--md);
+  margin-right: var(--pf-v5-global--spacer--md);
 }
 
 .kc-protocolType-select {
diff --git a/js/apps/admin-ui/src/clients/scopes/evaluate.css b/js/apps/admin-ui/src/clients/scopes/evaluate.css
index f75bef0fdc..40bf5b6634 100644
--- a/js/apps/admin-ui/src/clients/scopes/evaluate.css
+++ b/js/apps/admin-ui/src/clients/scopes/evaluate.css
@@ -3,9 +3,9 @@
 }
 
 .keycloak__scopes_evaluate__tabs {
-  padding-top: var(--pf-global--spacer--2xl);
+  padding-top: var(--pf-v5-global--spacer--2xl);
 }
 
-#tabs .pf-c-tabs__list {
+#tabs .pf-v5-c-tabs__list {
   max-width: 300px;
 }
diff --git a/js/apps/admin-ui/src/clients/service-account/ServiceAccount.tsx b/js/apps/admin-ui/src/clients/service-account/ServiceAccount.tsx
index b93c1778a3..d9bb335465 100644
--- a/js/apps/admin-ui/src/clients/service-account/ServiceAccount.tsx
+++ b/js/apps/admin-ui/src/clients/service-account/ServiceAccount.tsx
@@ -69,9 +69,9 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
   };
   return serviceAccount ? (
     <>
-      <PageSection className="pf-u-pb-0">
-        <InfoCircleIcon className="pf-c-alert__icon keycloak--service-account--info-text" />
-        <span className="pf-u-pl-sm">
+      <PageSection className="pf-v5-u-pb-0">
+        <InfoCircleIcon className="pf-v5-c-alert__icon keycloak--service-account--info-text" />
+        <span className="pf-v5-u-pl-sm">
           <Trans i18nKey="manageServiceAccountUser">
             {""}
             <Link
diff --git a/js/apps/admin-ui/src/clients/service-account/service-account.css b/js/apps/admin-ui/src/clients/service-account/service-account.css
index 93ad24c562..49ac5aaff8 100644
--- a/js/apps/admin-ui/src/clients/service-account/service-account.css
+++ b/js/apps/admin-ui/src/clients/service-account/service-account.css
@@ -1,6 +1,6 @@
 
 .keycloak--service-account--info-text {
-  color: var(--pf-global--info-color--100);
+  color: var(--pf-v5-global--info-color--100);
   display: inline;
-  font-size: var(--pf-global--FontSize--lg);
+  font-size: var(--pf-v5-global--FontSize--lg);
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/components/client-scope/ClientScopeTypes.tsx b/js/apps/admin-ui/src/components/client-scope/ClientScopeTypes.tsx
index 555c5ea110..f7e6ace55b 100644
--- a/js/apps/admin-ui/src/components/client-scope/ClientScopeTypes.tsx
+++ b/js/apps/admin-ui/src/components/client-scope/ClientScopeTypes.tsx
@@ -1,10 +1,11 @@
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
+
 import {
   DropdownItem,
   Select,
   SelectOption,
   SelectProps,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import type { TFunction } from "i18next";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/components/client/ClientSelect.tsx b/js/apps/admin-ui/src/components/client/ClientSelect.tsx
index 14a2cb9573..8368f08ad1 100644
--- a/js/apps/admin-ui/src/components/client/ClientSelect.tsx
+++ b/js/apps/admin-ui/src/components/client/ClientSelect.tsx
@@ -1,6 +1,6 @@
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import type { ClientQuery } from "@keycloak/keycloak-admin-client/lib/resources/clients";
-import { SelectProps, SelectVariant } from "@patternfly/react-core";
+import { SelectProps, SelectVariant } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SelectControl } from "ui-shared";
diff --git a/js/apps/admin-ui/src/components/download-dialog/DownloadDialog.tsx b/js/apps/admin-ui/src/components/download-dialog/DownloadDialog.tsx
index 3a92295011..58c5f51c7e 100644
--- a/js/apps/admin-ui/src/components/download-dialog/DownloadDialog.tsx
+++ b/js/apps/admin-ui/src/components/download-dialog/DownloadDialog.tsx
@@ -3,12 +3,15 @@ import {
   Form,
   FormGroup,
   ModalVariant,
+  Stack,
+  StackItem,
+  TextArea,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Stack,
-  StackItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { saveAs } from "file-saver";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -21,7 +24,6 @@ import { addTrailingSlash, prettyPrintJSON } from "../../util";
 import { getAuthorizationHeaders } from "../../utils/getAuthorizationHeaders";
 import { useFetch } from "../../utils/useFetch";
 import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog";
-import { KeycloakTextArea } from "../keycloak-text-area/KeycloakTextArea";
 
 type DownloadDialogProps = {
   id: string;
@@ -124,7 +126,7 @@ export const DownloadDialog = ({
               <Select
                 toggleId="type"
                 isOpen={openType}
-                onToggle={(isExpanded) => setOpenType(isExpanded)}
+                onToggle={(_event, isExpanded) => setOpenType(isExpanded)}
                 variant={SelectVariant.single}
                 value={selected}
                 selections={selected}
@@ -160,7 +162,7 @@ export const DownloadDialog = ({
                   />
                 }
               >
-                <KeycloakTextArea
+                <TextArea
                   id="details"
                   readOnly
                   rows={12}
diff --git a/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css b/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
index 37be82e882..243a9d5cf3 100644
--- a/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
+++ b/js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css
@@ -1,11 +1,11 @@
 .kc-dropdown-panel {
   background-color: transparent;
-  padding: var(--pf-global--spacer--form-element) var(--pf-global--spacer--sm)
-    var(--pf-global--spacer--form-element) var(--pf-global--spacer--sm);
-  border-color: var(--pf-global--BorderColor--300)
-    var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--200)
-    var(--pf-global--BorderColor--300);
-  border-width: var(--pf-global--BorderWidth--sm);
+  padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm)
+    var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm);
+  border-color: var(--pf-v5-global--BorderColor--300)
+    var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
+    var(--pf-v5-global--BorderColor--300);
+  border-width: var(--pf-v5-global--BorderWidth--sm);
   border-style: solid;
   text-align: left;
   cursor: pointer;
@@ -13,13 +13,13 @@
 }
 
 .kc-dropdown-panel:hover {
-  border-bottom-color: var(--pf-global--primary-color--100);
+  border-bottom-color: var(--pf-v5-global--primary-color--100);
 }
 
 .kc-dropdown-panel:focus,
 .kc-dropdown-panel:active {
-  border-bottom-color: var(--pf-global--active-color--100);
-  border-bottom-width: var(--pf-global--BorderWidth--md);
+  border-bottom-color: var(--pf-v5-global--active-color--100);
+  border-bottom-width: var(--pf-v5-global--BorderWidth--md);
 }
 
 .kc-dropdown-panel-icon {
@@ -30,7 +30,7 @@
 .kc-dropdown-panel-content {
   display: block;
   position: absolute;
-  background-color: var(--pf-global--Color--light-100);
+  background-color: var(--pf-v5-global--Color--light-100);
   min-width: 10rem;
   box-shadow: 0px 0.5rem 1rem 0px rgba(0, 0, 0, 0.2);
   padding: 0.75rem;
diff --git a/js/apps/admin-ui/src/components/dynamic/BooleanComponent.tsx b/js/apps/admin-ui/src/components/dynamic/BooleanComponent.tsx
index addbd2b6df..f978c14484 100644
--- a/js/apps/admin-ui/src/components/dynamic/BooleanComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/BooleanComponent.tsx
@@ -40,7 +40,7 @@ export const BooleanComponent = ({
               field.value === true ||
               field.value?.[0] === "true"
             }
-            onChange={(value) => field.onChange("" + value)}
+            onChange={(_event, value) => field.onChange("" + value)}
             data-testid={name}
             aria-label={t(label!)}
           />
diff --git a/js/apps/admin-ui/src/components/dynamic/GroupComponent.tsx b/js/apps/admin-ui/src/components/dynamic/GroupComponent.tsx
index bdc0760534..f7f681370f 100644
--- a/js/apps/admin-ui/src/components/dynamic/GroupComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/GroupComponent.tsx
@@ -5,6 +5,7 @@ import {
   ChipGroup,
   FormGroup,
   InputGroup,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
@@ -59,21 +60,25 @@ export const GroupComponent = ({
             isRequired={required}
           >
             <InputGroup>
-              <ChipGroup>
-                {field.value && (
-                  <Chip onClick={() => field.onChange(undefined)}>
-                    {field.value}
-                  </Chip>
-                )}
-              </ChipGroup>
-              <Button
-                id="kc-join-groups-button"
-                onClick={() => setOpen(!open)}
-                variant="secondary"
-                data-testid="join-groups-button"
-              >
-                {t("selectGroup")}
-              </Button>
+              <InputGroupItem>
+                <ChipGroup>
+                  {field.value && (
+                    <Chip onClick={() => field.onChange(undefined)}>
+                      {field.value}
+                    </Chip>
+                  )}
+                </ChipGroup>
+              </InputGroupItem>
+              <InputGroupItem>
+                <Button
+                  id="kc-join-groups-button"
+                  onClick={() => setOpen(!open)}
+                  variant="secondary"
+                  data-testid="join-groups-button"
+                >
+                  {t("selectGroup")}
+                </Button>
+              </InputGroupItem>
             </InputGroup>
           </FormGroup>
         </>
diff --git a/js/apps/admin-ui/src/components/dynamic/ListComponent.tsx b/js/apps/admin-ui/src/components/dynamic/ListComponent.tsx
index 6e76c454f7..267faf8460 100644
--- a/js/apps/admin-ui/src/components/dynamic/ListComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/ListComponent.tsx
@@ -1,9 +1,9 @@
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -41,7 +41,7 @@ export const ListComponent = ({
           <Select
             toggleId={name}
             isDisabled={isDisabled}
-            onToggle={(toggle) => setOpen(toggle)}
+            onToggle={(_event, toggle) => setOpen(toggle)}
             onSelect={(_, value) => {
               field.onChange(value as string);
               setOpen(false);
diff --git a/js/apps/admin-ui/src/components/dynamic/MapComponent.tsx b/js/apps/admin-ui/src/components/dynamic/MapComponent.tsx
index 8243c5c60c..6f2e6a7cb1 100644
--- a/js/apps/admin-ui/src/components/dynamic/MapComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/MapComponent.tsx
@@ -8,6 +8,7 @@ import {
   FlexItem,
   FormGroup,
   TextInput,
+  EmptyStateFooter,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { useEffect, useState } from "react";
@@ -101,7 +102,7 @@ export const MapComponent = ({
                 aria-label={t("key")}
                 defaultValue={attribute.key}
                 data-testid={`${fieldName}.${index}.key`}
-                onChange={(value) => updateKey(index, value)}
+                onChange={(_event, value) => updateKey(index, value)}
                 onBlur={() => update()}
               />
             </FlexItem>
@@ -115,7 +116,7 @@ export const MapComponent = ({
                 aria-label={t("value")}
                 defaultValue={attribute.value}
                 data-testid={`${fieldName}.${index}.value`}
-                onChange={(value) => updateValue(index, value)}
+                onChange={(_event, value) => updateValue(index, value)}
                 onBlur={() => update()}
               />
             </FlexItem>
@@ -137,7 +138,7 @@ export const MapComponent = ({
         <ActionListItem>
           <Button
             data-testid={`${fieldName}-add-row`}
-            className="pf-u-px-0 pf-u-mt-sm"
+            className="pf-v5-u-px-0 pf-v5-u-mt-sm"
             variant="link"
             icon={<PlusCircleIcon />}
             onClick={() => appendNew()}
@@ -150,20 +151,22 @@ export const MapComponent = ({
   ) : (
     <EmptyState
       data-testid={`${name}-empty-state`}
-      className="pf-u-p-0"
+      className="pf-v5-u-p-0"
       variant="xs"
     >
       <EmptyStateBody>{t("missingAttributes", { label })}</EmptyStateBody>
-      <Button
-        data-testid={`${name}-add-row`}
-        variant="link"
-        icon={<PlusCircleIcon />}
-        isSmall
-        onClick={appendNew}
-        isDisabled={isDisabled}
-      >
-        {t("addAttribute", { label })}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          data-testid={`${name}-add-row`}
+          variant="link"
+          icon={<PlusCircleIcon />}
+          size="sm"
+          onClick={appendNew}
+          isDisabled={isDisabled}
+        >
+          {t("addAttribute", { label })}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
diff --git a/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx b/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx
index f2e42f1c89..40c9104b87 100644
--- a/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/MultivaluedListComponent.tsx
@@ -1,9 +1,9 @@
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -57,7 +57,7 @@ export const MultiValuedListComponent = ({
             }}
             variant={SelectVariant.typeaheadMulti}
             typeAheadAriaLabel="Select"
-            onToggle={(isOpen) => setOpen(isOpen)}
+            onToggle={(_event, isOpen) => setOpen(isOpen)}
             selections={
               stringify ? stringToMultiline(field.value) : field.value
             }
diff --git a/js/apps/admin-ui/src/components/dynamic/RoleComponent.tsx b/js/apps/admin-ui/src/components/dynamic/RoleComponent.tsx
index ea3c3451a0..f798827d9f 100644
--- a/js/apps/admin-ui/src/components/dynamic/RoleComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/RoleComponent.tsx
@@ -7,13 +7,13 @@ import {
 } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import useToggle from "../../utils/useToggle";
-import { HelpItem } from "ui-shared";
 import { AddRoleMappingModal } from "../role-mapping/AddRoleMappingModal";
 import { Row, ServiceRole } from "../role-mapping/RoleMapping";
-import type { ComponentProps } from "./components";
 import { convertToName } from "./DynamicComponents";
+import type { ComponentProps } from "./components";
 
 const parseValue = (value: any) =>
   value?.includes(".") ? value.split(".") : ["", value || ""];
@@ -45,8 +45,6 @@ export const RoleComponent = ({
     <FormGroup
       label={t(label!)}
       labelIcon={<HelpItem helpText={t(helpText!)} fieldLabelId={`${label}`} />}
-      validated={errors[fieldName] ? "error" : "default"}
-      helperTextInvalid={t("required")}
       fieldId={name!}
       isRequired={required}
     >
@@ -90,6 +88,7 @@ export const RoleComponent = ({
           </Split>
         )}
       />
+      {errors[fieldName] && <FormErrorText message={t("required")} />}
     </FormGroup>
   );
 };
diff --git a/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx b/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx
index 1ace8c6ed9..83f6ae1104 100644
--- a/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx
@@ -1,11 +1,10 @@
-import { FormGroup } from "@patternfly/react-core";
+import { FormGroup, TextInput } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
 import { HelpItem } from "ui-shared";
-import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
-import type { ComponentProps } from "./components";
+
 import { convertToName } from "./DynamicComponents";
+import type { ComponentProps } from "./components";
 
 export const StringComponent = ({
   name,
@@ -25,7 +24,7 @@ export const StringComponent = ({
       fieldId={name!}
       isRequired={required}
     >
-      <KeycloakTextInput
+      <TextInput
         id={name!}
         data-testid={name}
         isDisabled={isDisabled}
diff --git a/js/apps/admin-ui/src/components/dynamic/TextComponent.tsx b/js/apps/admin-ui/src/components/dynamic/TextComponent.tsx
index fea1d1208a..0b261d0859 100644
--- a/js/apps/admin-ui/src/components/dynamic/TextComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/TextComponent.tsx
@@ -1,11 +1,10 @@
 import { FormGroup } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { HelpItem, KeycloakTextArea } from "ui-shared";
 
-import { HelpItem } from "ui-shared";
-import { KeycloakTextArea } from "../keycloak-text-area/KeycloakTextArea";
-import type { ComponentProps } from "./components";
 import { convertToName } from "./DynamicComponents";
+import type { ComponentProps } from "./components";
 
 export const TextComponent = ({
   name,
diff --git a/js/apps/admin-ui/src/components/dynamic/UserProfileAttributeListComponent.tsx b/js/apps/admin-ui/src/components/dynamic/UserProfileAttributeListComponent.tsx
index 3fb77f01d9..9dd46fe938 100644
--- a/js/apps/admin-ui/src/components/dynamic/UserProfileAttributeListComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/UserProfileAttributeListComponent.tsx
@@ -3,7 +3,7 @@ import { FormGroup } from "@patternfly/react-core";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useFetch } from "../../utils/useFetch";
@@ -48,14 +48,13 @@ export const UserProfileAttributeListComponent = ({
       isRequired={required}
       labelIcon={<HelpItem helpText={t(helpText!)} fieldLabelId={label!} />}
       fieldId={convertedName!}
-      validated={errors[convertedName!] ? "error" : "default"}
-      helperTextInvalid={t("required")}
     >
       <KeySelect
         name={convertedName}
         rules={required ? { required: true } : {}}
         selectItems={convert(config)}
       />
+      {errors[convertedName!] && <FormErrorText message={t("required")} />}
     </FormGroup>
   );
 };
diff --git a/js/apps/admin-ui/src/components/form/fixed-buttons.module.css b/js/apps/admin-ui/src/components/form/fixed-buttons.module.css
index 20aebf7724..ceba497b54 100644
--- a/js/apps/admin-ui/src/components/form/fixed-buttons.module.css
+++ b/js/apps/admin-ui/src/components/form/fixed-buttons.module.css
@@ -1,11 +1,11 @@
 .buttonGroup {
   position: fixed;
   bottom: 0px;
-  background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
-  padding-top: var(--pf-global--spacer--md);
-  padding-bottom: var(--pf-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--md);
+  background-color: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
+  padding-top: var(--pf-v5-global--spacer--md);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
+  padding-left: var(--pf-v5-global--spacer--md);
   width: 100%;
-  border-top: 1px solid var(--pf-global--BorderColor--100);
-  margin-left: calc(-1 * var(--pf-global--spacer--lg));
+  border-top: 1px solid var(--pf-v5-global--BorderColor--100);
+  margin-left: calc(-1 * var(--pf-v5-global--spacer--lg));
 }
diff --git a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
index 6980434f44..9679d3f61b 100644
--- a/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
+++ b/js/apps/admin-ui/src/components/group/GroupPickerDialog.tsx
@@ -328,7 +328,7 @@ const GroupRow = ({
             aria-label={group.name}
             checked={group.checked}
             isDisabled={isRowDisabled(group)}
-            onChange={(checked) => {
+            onChange={(_event, checked) => {
               group.checked = checked;
               let newSelectedRows: SelectableGroup[] = [];
               if (!group.checked) {
diff --git a/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx b/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
index 834a94f0a7..907d5da92b 100644
--- a/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
+++ b/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
@@ -1,13 +1,15 @@
 import {
   Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   Split,
   SplitItem,
   Switch,
   TextContent,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import { ExternalLinkAltIcon, HelpIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/components/help-enabler/help-header.css b/js/apps/admin-ui/src/components/help-enabler/help-header.css
index 406f42ca8c..db2bc78d92 100644
--- a/js/apps/admin-ui/src/components/help-enabler/help-header.css
+++ b/js/apps/admin-ui/src/components/help-enabler/help-header.css
@@ -1,16 +1,16 @@
 
 
 div.keycloak_help-header-description {
-  padding-top: var(--pf-global--spacer--lg);
+  padding-top: var(--pf-v5-global--spacer--lg);
   overflow-wrap: break-word;
   white-space: normal;
-  color: var(--pf-c-dropdown__menu-item--Color);
+  color: var(--pf-v5-c-dropdown__menu-item--Color);
 }
 
 .keycloak_help-header-switch {
-  margin-left: var(--pf-global--spacer--xl);
+  margin-left: var(--pf-v5-global--spacer--xl);
 }
 
-.keycloak_help-header-switch .pf-c-switch__toggle::before {
-  background-color: var(--pf-c-switch__toggle-icon--Color);
+.keycloak_help-header-switch .pf-v5-c-switch__toggle::before {
+  background-color: var(--pf-v5-c-switch__toggle-icon--Color);
 }
diff --git a/js/apps/admin-ui/src/components/json-file-upload/FileUploadForm.tsx b/js/apps/admin-ui/src/components/json-file-upload/FileUploadForm.tsx
index 607142329d..5666a6ea37 100644
--- a/js/apps/admin-ui/src/components/json-file-upload/FileUploadForm.tsx
+++ b/js/apps/admin-ui/src/components/json-file-upload/FileUploadForm.tsx
@@ -1,14 +1,21 @@
+import { CodeEditor, Language } from "@patternfly/react-code-editor";
+import {
+  Button,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Modal,
+  ModalVariant,
+} from "@patternfly/react-core";
 import {
   ChangeEvent,
   DragEvent as ReactDragEvent,
   MouseEvent as ReactMouseEvent,
   useState,
 } from "react";
-import { FormGroup, Modal, ModalVariant, Button } from "@patternfly/react-core";
 import { DropEvent } from "react-dropzone";
 import { useTranslation } from "react-i18next";
-import { CodeEditor, Language } from "@patternfly/react-code-editor";
-
 import { FileUpload, FileUploadProps } from "./patternfly/FileUpload";
 
 type FileUploadType = {
@@ -121,11 +128,7 @@ export const FileUploadForm = ({
         />
       )}
       {!unWrap && (
-        <FormGroup
-          label={t("resourceFile")}
-          fieldId={id}
-          helperText={t(helpText)}
-        >
+        <FormGroup label={t("resourceFile")} fieldId={id}>
           <FileUpload
             data-testid={id}
             id={id}
@@ -157,6 +160,11 @@ export const FileUploadForm = ({
               />
             )}
           </FileUpload>
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem>{t(helpText)}</HelperTextItem>
+            </HelperText>
+          </FormHelperText>
         </FormGroup>
       )}
     </>
diff --git a/js/apps/admin-ui/src/components/json-file-upload/patternfly/FileUploadField.tsx b/js/apps/admin-ui/src/components/json-file-upload/patternfly/FileUploadField.tsx
index 04a596015f..c7eee6ab79 100644
--- a/js/apps/admin-ui/src/components/json-file-upload/patternfly/FileUploadField.tsx
+++ b/js/apps/admin-ui/src/components/json-file-upload/patternfly/FileUploadField.tsx
@@ -7,6 +7,7 @@ import {
   TextArea,
   TextAreResizeOrientation,
   TextInput,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { css } from "@patternfly/react-styles";
 import styles from "@patternfly/react-styles/css/components/FileUpload/file-upload";
@@ -144,31 +145,38 @@ export const FileUploadField = ({
     >
       <div className={styles.fileUploadFileSelect}>
         <InputGroup>
-          <TextInput
-            isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
-            isDisabled={isDisabled}
-            id={`${id}-filename`}
-            name={`${id}-filename`}
-            aria-label={filenameAriaLabel}
-            placeholder={filenamePlaceholder}
-            aria-describedby={`${id}-browse-button`}
-            value={filename}
-          />
-          <Button
-            id={`${id}-browse-button`}
-            variant={ButtonVariant.control}
-            onClick={onBrowseButtonClick}
-            isDisabled={isDisabled}
-          >
-            {browseButtonText}
-          </Button>
-          <Button
-            variant={ButtonVariant.control}
-            isDisabled={isDisabled || isClearButtonDisabled}
-            onClick={onClearButtonClick}
-          >
-            {clearButtonText}
-          </Button>
+          <InputGroupItem isFill>
+            <TextInput
+              // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              isDisabled={isDisabled}
+              id={`${id}-filename`}
+              name={`${id}-filename`}
+              aria-label={filenameAriaLabel}
+              placeholder={filenamePlaceholder}
+              aria-describedby={`${id}-browse-button`}
+              value={filename}
+              readOnlyVariant="default"
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              id={`${id}-browse-button`}
+              variant={ButtonVariant.control}
+              onClick={onBrowseButtonClick}
+              isDisabled={isDisabled}
+            >
+              {browseButtonText}
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              variant={ButtonVariant.control}
+              isDisabled={isDisabled || isClearButtonDisabled}
+              onClick={onClearButtonClick}
+            >
+              {clearButtonText}
+            </Button>
+          </InputGroupItem>
         </InputGroup>
       </div>
       <div className={styles.fileUploadFileDetails}>
@@ -183,7 +191,9 @@ export const FileUploadField = ({
             name={id}
             aria-label={ariaLabel}
             value={value as string}
-            onChange={onTextAreaChange}
+            onChange={(event, newValue: string) =>
+              onTextAreaChange(newValue, event)
+            }
             onClick={onTextAreaClick}
           />
         )}
diff --git a/js/apps/admin-ui/src/components/key-value-form/KeySelect.tsx b/js/apps/admin-ui/src/components/key-value-form/KeySelect.tsx
index 2176d2eafe..bc0d48f935 100644
--- a/js/apps/admin-ui/src/components/key-value-form/KeySelect.tsx
+++ b/js/apps/admin-ui/src/components/key-value-form/KeySelect.tsx
@@ -1,8 +1,9 @@
-import { Grid, GridItem, Select, SelectOption } from "@patternfly/react-core";
+import { Grid, GridItem, TextInput } from "@patternfly/react-core";
+import { Select, SelectOption } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { UseControllerProps, useController } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { KeycloakTextInput } from "ui-shared";
+
 import useToggle from "../../utils/useToggle";
 import { DefaultValue } from "./KeyValueInput";
 
@@ -47,7 +48,7 @@ export const KeySelect = ({ selectItems, ...rest }: KeySelectProp) => {
       </GridItem>
       {custom && (
         <GridItem lg={10}>
-          <KeycloakTextInput
+          <TextInput
             id="customValue"
             data-testid={rest.name}
             placeholder={t("keyPlaceholder")}
diff --git a/js/apps/admin-ui/src/components/key-value-form/KeyValueInput.tsx b/js/apps/admin-ui/src/components/key-value-form/KeyValueInput.tsx
index a1c4d9ca00..8d8ed2d4c4 100644
--- a/js/apps/admin-ui/src/components/key-value-form/KeyValueInput.tsx
+++ b/js/apps/admin-ui/src/components/key-value-form/KeyValueInput.tsx
@@ -4,10 +4,12 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
   Grid,
   GridItem,
   HelperText,
   HelperTextItem,
+  TextInput,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { Fragment } from "react";
@@ -19,7 +21,6 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import { KeySelect } from "./KeySelect";
 import { ValueSelect } from "./ValueSelect";
 
@@ -66,11 +67,11 @@ export const KeyValueInput = ({
   return fields.length > 0 ? (
     <>
       <Grid hasGutter>
-        <GridItem className="pf-c-form__label" span={5}>
-          <span className="pf-c-form__label-text">{t("key")}</span>
+        <GridItem className="pf-v5-c-form__label" span={5}>
+          <span className="pf-v5-c-form__label-text">{t("key")}</span>
         </GridItem>
-        <GridItem className="pf-c-form__label" span={7}>
-          <span className="pf-c-form__label-text">{t("value")}</span>
+        <GridItem className="pf-v5-c-form__label" span={7}>
+          <span className="pf-v5-c-form__label-text">{t("value")}</span>
         </GridItem>
         {fields.map((attribute, index) => {
           const error = (errors as any)[name]?.[index];
@@ -87,7 +88,7 @@ export const KeyValueInput = ({
                     rules={{ required: true }}
                   />
                 ) : (
-                  <KeycloakTextInput
+                  <TextInput
                     placeholder={t("keyPlaceholder")}
                     aria-label={t("key")}
                     data-testid={`${name}-key`}
@@ -114,7 +115,7 @@ export const KeyValueInput = ({
                     rules={{ required: true }}
                   />
                 ) : (
-                  <KeycloakTextInput
+                  <TextInput
                     placeholder={t("valuePlaceholder")}
                     aria-label={t("value")}
                     data-testid={`${name}-value`}
@@ -151,7 +152,7 @@ export const KeyValueInput = ({
         <ActionListItem>
           <Button
             data-testid={`${name}-add-row`}
-            className="pf-u-px-0 pf-u-mt-sm"
+            className="pf-v5-u-px-0 pf-v5-u-mt-sm"
             variant="link"
             icon={<PlusCircleIcon />}
             onClick={appendNew}
@@ -165,20 +166,22 @@ export const KeyValueInput = ({
   ) : (
     <EmptyState
       data-testid={`${name}-empty-state`}
-      className="pf-u-p-0"
+      className="pf-v5-u-p-0"
       variant="xs"
     >
       <EmptyStateBody>{t("missingAttributes", { label })}</EmptyStateBody>
-      <Button
-        data-testid={`${name}-add-row`}
-        variant="link"
-        icon={<PlusCircleIcon />}
-        isSmall
-        onClick={appendNew}
-        isDisabled={isDisabled}
-      >
-        {t("addAttribute", { label })}
-      </Button>
+      <EmptyStateFooter>
+        <Button
+          data-testid={`${name}-add-row`}
+          variant="link"
+          icon={<PlusCircleIcon />}
+          size="sm"
+          onClick={appendNew}
+          isDisabled={isDisabled}
+        >
+          {t("addAttribute", { label })}
+        </Button>
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
diff --git a/js/apps/admin-ui/src/components/key-value-form/ValueSelect.tsx b/js/apps/admin-ui/src/components/key-value-form/ValueSelect.tsx
index 009b46927f..27ce5e2b67 100644
--- a/js/apps/admin-ui/src/components/key-value-form/ValueSelect.tsx
+++ b/js/apps/admin-ui/src/components/key-value-form/ValueSelect.tsx
@@ -1,8 +1,8 @@
-import { Select, SelectOption } from "@patternfly/react-core";
+import { TextInput } from "@patternfly/react-core";
+import { Select, SelectOption } from "@patternfly/react-core/deprecated";
 import { useMemo, useState } from "react";
 import { UseControllerProps, useController } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { KeycloakTextInput } from "ui-shared";
 
 import { DefaultValue } from "./KeyValueInput";
 
@@ -27,7 +27,7 @@ export const ValueSelect = ({
 
   return defaultItem?.values ? (
     <Select
-      onToggle={(isOpen) => setOpen(isOpen)}
+      onToggle={(_event, isOpen) => setOpen(isOpen)}
       isOpen={open}
       onSelect={(_, value) => {
         field.onChange(value);
@@ -41,7 +41,7 @@ export const ValueSelect = ({
       ))}
     </Select>
   ) : (
-    <KeycloakTextInput
+    <TextInput
       aria-label={t("customValue")}
       data-testid={rest.name}
       {...field}
diff --git a/js/apps/admin-ui/src/components/keycloak-card/ClickableCard.tsx b/js/apps/admin-ui/src/components/keycloak-card/ClickableCard.tsx
index 7cd1e821a9..d325e1d850 100644
--- a/js/apps/admin-ui/src/components/keycloak-card/ClickableCard.tsx
+++ b/js/apps/admin-ui/src/components/keycloak-card/ClickableCard.tsx
@@ -21,7 +21,7 @@ export const ClickableCard = ({
       role="button"
       aria-pressed="false"
       tabIndex={0}
-      isSelectableRaised
+      isSelectable
       onKeyDown={onKeyDown}
       onClick={onClick}
       {...rest}
diff --git a/js/apps/admin-ui/src/components/keycloak-card/KeycloakCard.tsx b/js/apps/admin-ui/src/components/keycloak-card/KeycloakCard.tsx
index d510ec355a..7556509913 100644
--- a/js/apps/admin-ui/src/components/keycloak-card/KeycloakCard.tsx
+++ b/js/apps/admin-ui/src/components/keycloak-card/KeycloakCard.tsx
@@ -1,16 +1,14 @@
 import {
   Card,
-  CardActions,
   CardBody,
   CardFooter,
   CardHeader,
   CardTitle,
-  Dropdown,
   Flex,
   FlexItem,
-  KebabToggle,
   Label,
 } from "@patternfly/react-core";
+import { Dropdown, KebabToggle } from "@patternfly/react-core/deprecated";
 import { ReactElement, useState } from "react";
 import { Link, To } from "react-router-dom";
 
@@ -41,9 +39,9 @@ export const KeycloakCard = ({
 
   return (
     <Card isSelectable>
-      <CardHeader>
-        <CardActions>
-          {dropdownItems && (
+      <CardHeader
+        actions={{
+          actions: dropdownItems ? (
             <Dropdown
               data-testid={`${title}-dropdown`}
               isPlain
@@ -52,8 +50,11 @@ export const KeycloakCard = ({
               isOpen={isDropdownOpen}
               dropdownItems={dropdownItems}
             />
-          )}
-        </CardActions>
+          ) : undefined,
+          hasNoOffset: false,
+          className: undefined,
+        }}
+      >
         <CardTitle data-testid="keycloak-card-title">
           <Link to={to}>{title}</Link>
         </CardTitle>
diff --git a/js/apps/admin-ui/src/components/keycloak-card/keycloak-card.css b/js/apps/admin-ui/src/components/keycloak-card/keycloak-card.css
index 550a27a8a1..5939202123 100644
--- a/js/apps/admin-ui/src/components/keycloak-card/keycloak-card.css
+++ b/js/apps/admin-ui/src/components/keycloak-card/keycloak-card.css
@@ -1,3 +1,3 @@
 .keycloak-admin--keycloak-card__footer-text {
-  --pf-l-flex--spacer: var(--pf-l-flex--spacer--lg);
+  --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--lg);
 }
diff --git a/js/apps/admin-ui/src/components/keycloak-text-area/KeycloakTextArea.tsx b/js/apps/admin-ui/src/components/keycloak-text-area/KeycloakTextArea.tsx
deleted file mode 100644
index 5981bed378..0000000000
--- a/js/apps/admin-ui/src/components/keycloak-text-area/KeycloakTextArea.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TextArea, TextAreaProps } from "@patternfly/react-core";
-import { ComponentProps, forwardRef, HTMLProps } from "react";
-
-// PatternFly changes the signature of the 'onChange' handler for textarea elements.
-// This causes issues with React Hook Form as it expects the default signature for a textarea element.
-// So we have to create this wrapper component that takes care of converting these signatures for us.
-
-export type KeycloakTextAreaProps = Omit<
-  ComponentProps<typeof TextArea>,
-  "onChange"
-> &
-  Pick<HTMLProps<HTMLTextAreaElement>, "onChange">;
-
-export const KeycloakTextArea = forwardRef<
-  HTMLTextAreaElement,
-  KeycloakTextAreaProps
->(({ onChange, ...props }, ref) => {
-  const onChangeForward: TextAreaProps["onChange"] = (_, event) =>
-    onChange?.(event);
-
-  return <TextArea {...props} ref={ref} onChange={onChangeForward} />;
-});
-
-// We need to fake the displayName to match what PatternFly expects.
-// This is because PatternFly uses it to filter children in certain aspects.
-// This is a stupid approach, but it's not like we can change that.
-KeycloakTextArea.displayName = "TextArea";
diff --git a/js/apps/admin-ui/src/components/keycloak-text-input/KeycloakTextInput.tsx b/js/apps/admin-ui/src/components/keycloak-text-input/KeycloakTextInput.tsx
deleted file mode 100644
index 8cce9cd873..0000000000
--- a/js/apps/admin-ui/src/components/keycloak-text-input/KeycloakTextInput.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TextInput, TextInputProps } from "@patternfly/react-core";
-import { ComponentProps, forwardRef, HTMLProps } from "react";
-
-// PatternFly changes the signature of the 'onChange' handler for input elements.
-// This causes issues with React Hook Form as it expects the default signature for an input element.
-// So we have to create this wrapper component that takes care of converting these signatures for us.
-
-export type KeycloakTextInputProps = Omit<
-  ComponentProps<typeof TextInput>,
-  "onChange"
-> &
-  Pick<HTMLProps<HTMLInputElement>, "onChange">;
-
-export const KeycloakTextInput = forwardRef<
-  HTMLInputElement,
-  KeycloakTextInputProps
->(({ onChange, ...props }, ref) => {
-  const onChangeForward: TextInputProps["onChange"] = (_, event) =>
-    onChange?.(event);
-
-  return <TextInput {...props} ref={ref} onChange={onChangeForward} />;
-});
-
-// We need to fake the displayName to match what PatternFly expects.
-// This is because PatternFly uses it to filter children in certain aspects.
-// This is a stupid approach, but it's not like we can change that.
-KeycloakTextInput.displayName = "TextInput";
diff --git a/js/apps/admin-ui/src/components/list-empty-state/ListEmptyState.tsx b/js/apps/admin-ui/src/components/list-empty-state/ListEmptyState.tsx
index 3b400d1967..7319bd6252 100644
--- a/js/apps/admin-ui/src/components/list-empty-state/ListEmptyState.tsx
+++ b/js/apps/admin-ui/src/components/list-empty-state/ListEmptyState.tsx
@@ -3,10 +3,11 @@ import {
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
-  Title,
   Button,
   ButtonVariant,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from "@patternfly/react-core";
 import type { SVGIconProps } from "@patternfly/react-icons/dist/js/createIcon";
 import { PlusCircleIcon, SearchIcon } from "@patternfly/react-icons";
@@ -41,45 +42,45 @@ export const ListEmptyState = ({
   isDisabled = false,
 }: ListEmptyStateProps) => {
   return (
-    <EmptyState data-testid="empty-state" variant="large">
+    <EmptyState data-testid="empty-state" variant="lg">
       {hasIcon && isSearchVariant ? (
         <EmptyStateIcon icon={SearchIcon} />
       ) : (
         hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
       )}
-      <Title headingLevel="h1" size="lg">
-        {message}
-      </Title>
+      <EmptyStateHeader titleText={message} headingLevel="h1" />
       <EmptyStateBody>{instructions}</EmptyStateBody>
-      {primaryActionText && (
-        <Button
-          data-testid={`${message
-            .replace(/\W+/g, "-")
-            .toLowerCase()}-empty-action`}
-          variant="primary"
-          onClick={onPrimaryAction}
-          isDisabled={isDisabled}
-        >
-          {primaryActionText}
-        </Button>
-      )}
-      {secondaryActions && (
-        <EmptyStateSecondaryActions>
-          {secondaryActions.map((action) => (
-            <Button
-              key={action.text}
-              data-testid={`${action.text
-                .replace(/\W+/g, "-")
-                .toLowerCase()}-empty-action`}
-              variant={action.type || ButtonVariant.secondary}
-              onClick={action.onClick}
-              isDisabled={isDisabled}
-            >
-              {action.text}
-            </Button>
-          ))}
-        </EmptyStateSecondaryActions>
-      )}
+      <EmptyStateFooter>
+        {primaryActionText && (
+          <Button
+            data-testid={`${message
+              .replace(/\W+/g, "-")
+              .toLowerCase()}-empty-action`}
+            variant="primary"
+            onClick={onPrimaryAction}
+            isDisabled={isDisabled}
+          >
+            {primaryActionText}
+          </Button>
+        )}
+        {secondaryActions && (
+          <EmptyStateActions>
+            {secondaryActions.map((action) => (
+              <Button
+                key={action.text}
+                data-testid={`${action.text
+                  .replace(/\W+/g, "-")
+                  .toLowerCase()}-empty-action`}
+                variant={action.type || ButtonVariant.secondary}
+                onClick={action.onClick}
+                isDisabled={isDisabled}
+              >
+                {action.text}
+              </Button>
+            ))}
+          </EmptyStateActions>
+        )}
+      </EmptyStateFooter>
     </EmptyState>
   );
 };
diff --git a/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx b/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx
index 8b2b770695..be9d01002d 100644
--- a/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx
+++ b/js/apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx
@@ -4,6 +4,7 @@ import {
   InputGroup,
   TextInput,
   TextInputProps,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { Fragment, useEffect, useMemo } from "react";
@@ -88,24 +89,28 @@ export const MultiLineInput = ({
       {fields.map((value, index) => (
         <Fragment key={index}>
           <InputGroup>
-            <TextInput
-              data-testid={name + index}
-              onChange={(value) => updateValue(index, value)}
-              name={`${name}.${index}.value`}
-              value={value}
-              isDisabled={isDisabled}
-              {...rest}
-            />
-            <Button
-              data-testid={"remove" + index}
-              variant={ButtonVariant.link}
-              onClick={() => remove(index)}
-              tabIndex={-1}
-              aria-label={t("remove")}
-              isDisabled={fields.length === 1 || isDisabled}
-            >
-              <MinusCircleIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                data-testid={name + index}
+                onChange={(_event, value) => updateValue(index, value)}
+                name={`${name}.${index}.value`}
+                value={value}
+                isDisabled={isDisabled}
+                {...rest}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                data-testid={"remove" + index}
+                variant={ButtonVariant.link}
+                onClick={() => remove(index)}
+                tabIndex={-1}
+                aria-label={t("remove")}
+                isDisabled={fields.length === 1 || isDisabled}
+              >
+                <MinusCircleIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
           {index === fields.length - 1 && (
             <Button
diff --git a/js/apps/admin-ui/src/components/permission-tab/PermissionTab.tsx b/js/apps/admin-ui/src/components/permission-tab/PermissionTab.tsx
index fc30c02971..85e1166f28 100644
--- a/js/apps/admin-ui/src/components/permission-tab/PermissionTab.tsx
+++ b/js/apps/admin-ui/src/components/permission-tab/PermissionTab.tsx
@@ -10,7 +10,7 @@ import {
 } from "@patternfly/react-core";
 import {
   ActionsColumn,
-  TableComposable,
+  Table,
   Tbody,
   Td,
   Th,
@@ -130,7 +130,7 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
         <CardTitle>{t("permissions")}</CardTitle>
         <CardBody>
           {t(`${type}PermissionsHint`)}
-          <Form isHorizontal className="pf-u-pt-md">
+          <Form isHorizontal className="pf-v5-u-pt-md">
             <FormGroup
               hasNoPaddingTop
               className="permission-label"
@@ -149,7 +149,7 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
                 label={t("on")}
                 labelOff={t("off")}
                 isChecked={permission.enabled}
-                onChange={async (enabled) => {
+                onChange={async (_event, enabled) => {
                   if (enabled) {
                     const permission = await togglePermissionEnabled(enabled);
                     setPermission(permission);
@@ -165,7 +165,7 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
       </Card>
       {permission.enabled && (
         <>
-          <Card isFlat className="pf-u-mt-lg">
+          <Card isFlat className="pf-v5-u-mt-lg">
             <CardTitle>{t("permissionsList")}</CardTitle>
             <CardBody>
               <Trans i18nKey="permissionsListIntro">
@@ -181,11 +181,8 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
             </CardBody>
           </Card>
           <Card isFlat className="keycloak__permission__permission-table">
-            <CardBody className="pf-u-p-0">
-              <TableComposable
-                aria-label={t("permissionsList")}
-                variant="compact"
-              >
+            <CardBody className="pf-v5-u-p-0">
+              <Table aria-label={t("permissionsList")} variant="compact">
                 <Thead>
                   <Tr>
                     <Th id="permissionsScopeName">
@@ -237,7 +234,7 @@ export const PermissionsTab = ({ id, type }: PermissionsTabProps) => {
                     </Tr>
                   ))}
                 </Tbody>
-              </TableComposable>
+              </Table>
             </CardBody>
           </Card>
         </>
diff --git a/js/apps/admin-ui/src/components/permission-tab/permissions-tab.css b/js/apps/admin-ui/src/components/permission-tab/permissions-tab.css
index 691bcbc71e..e473ba9e97 100644
--- a/js/apps/admin-ui/src/components/permission-tab/permissions-tab.css
+++ b/js/apps/admin-ui/src/components/permission-tab/permissions-tab.css
@@ -1,9 +1,9 @@
 
-.permission-label > .pf-c-form__group-label {
+.permission-label > .pf-v5-c-form__group-label {
   width: 120%;
 }
 
-.keycloak__permission__permission-table.pf-c-card {
+.keycloak__permission__permission-table.pf-v5-c-card {
   border-top: 0;
   border-bottom: 0;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx b/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx
index 63314df76c..670244526c 100644
--- a/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx
+++ b/js/apps/admin-ui/src/components/realm-selector/RealmSelector.tsx
@@ -1,12 +1,6 @@
 import {
   Button,
-  ContextSelector,
-  ContextSelectorItem,
-  ContextSelectorItemProps,
   Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   Label,
   Spinner,
   Split,
@@ -14,6 +8,14 @@ import {
   Stack,
   StackItem,
 } from "@patternfly/react-core";
+import {
+  ContextSelector,
+  ContextSelectorItem,
+  ContextSelectorItemProps,
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import { CheckIcon } from "@patternfly/react-icons";
 import { Fragment, useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -64,7 +66,7 @@ const RealmText = ({ name, displayName, showIsRecent }: RealmTextProps) => {
       <SplitItem isFilled>
         <Stack>
           {displayName ? (
-            <StackItem className="pf-u-font-weight-bold" isFilled>
+            <StackItem className="pf-v5-u-font-weight-bold" isFilled>
               {label(t, displayName)}
             </StackItem>
           ) : null}
@@ -155,7 +157,7 @@ export const RealmSelector = () => {
       screenReaderLabel={label(t, realmDisplayName, realm)}
       onToggle={() => setOpen(!open)}
       searchInputValue={search}
-      onSearchInputChange={(value) => setSearch(value)}
+      onSearchInputChange={(event, value) => setSearch(value)}
       className="keycloak__realm_selector__context_selector"
       footer={
         whoAmI.canCreateRealm() && (
diff --git a/js/apps/admin-ui/src/components/realm-selector/realm-selector.css b/js/apps/admin-ui/src/components/realm-selector/realm-selector.css
index deb2da0778..cfce7d8b27 100644
--- a/js/apps/admin-ui/src/components/realm-selector/realm-selector.css
+++ b/js/apps/admin-ui/src/components/realm-selector/realm-selector.css
@@ -1,35 +1,35 @@
 .keycloak__realm_selector_dropdown__toggle {
-  --pf-c-dropdown__toggle--Color: var(--pf-c-nav__link--m-current--Color);
-  --pf-c-dropdown__toggle--BackgroundColor: var(
-    --pf-global--BackgroundColor--dark-100
+  --pf-v5-c-dropdown__toggle--Color: var(--pf-v5-c-nav__link--m-current--Color);
+  --pf-v5-c-dropdown__toggle--BackgroundColor: var(
+    --pf-v5-global--BackgroundColor--dark-100
   );
-  --pf-c-dropdown__toggle--before--BorderTopColor: var(
-    --pf-global--BorderColor--200
+  --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(
+    --pf-v5-global--BorderColor--200
   );
-  --pf-c-dropdown__toggle--before--BorderRightColor: var(
-    --pf-global--BorderColor--200
+  --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(
+    --pf-v5-global--BorderColor--200
   );
-  --pf-c-dropdown__toggle--before--BorderBottomColor: var(
-    --pf-global--BorderColor--100
+  --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(
+    --pf-v5-global--BorderColor--100
   );
-  --pf-c-dropdown__toggle--before--BorderLeftColor: var(
-    --pf-global--BorderColor--200
+  --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(
+    --pf-v5-global--BorderColor--200
   );
   width: 100%;
 }
 
-.keycloak__realm_selector__dropdown .pf-c-dropdown__menu {
+.keycloak__realm_selector__dropdown .pf-v5-c-dropdown__menu {
   min-width: 0;
   width: 15.125rem;
 
 }
-.keycloak__realm_selector__dropdown .pf-c-dropdown__menu .pf-m-fill {
+.keycloak__realm_selector__dropdown .pf-v5-c-dropdown__menu .pf-m-fill {
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.pf-c-context-selector.keycloak__realm_selector__context_selector {
-  --pf-c-context-selector__toggle--Color: var(--pf-c-nav__link--m-current--Color);
+.pf-v5-c-context-selector.keycloak__realm_selector__context_selector {
+  --pf-v5-c-context-selector__toggle--Color: var(--pf-v5-c-nav__link--m-current--Color);
 }
 
 .keycloak__realm_selector__dropdown {
@@ -41,9 +41,9 @@
   text-align: left;
 }
 
-.pf-c-nav__item.keycloak__page_nav__nav_item__realm-selector {
-  margin-top: var(--pf-c-nav__link--PaddingTop);
-  padding-right: var(--pf-c-nav__link--PaddingRight);
-  margin-bottom: var(--pf-c-nav__link--PaddingBottom);
-  padding-left: var(--pf-c-nav__link--PaddingLeft);
+.pf-v5-c-nav__item.keycloak__page_nav__nav_item__realm-selector {
+  margin-top: var(--pf-v5-c-nav__link--PaddingTop);
+  padding-right: var(--pf-v5-c-nav__link--PaddingRight);
+  margin-bottom: var(--pf-v5-c-nav__link--PaddingBottom);
+  padding-left: var(--pf-v5-c-nav__link--PaddingLeft);
 }
diff --git a/js/apps/admin-ui/src/components/role-form/RoleForm.tsx b/js/apps/admin-ui/src/components/role-form/RoleForm.tsx
index 298c7cb40b..86ea8f1091 100644
--- a/js/apps/admin-ui/src/components/role-form/RoleForm.tsx
+++ b/js/apps/admin-ui/src/components/role-form/RoleForm.tsx
@@ -38,7 +38,7 @@ export const RoleForm = ({
           isHorizontal
           onSubmit={handleSubmit(onSubmit)}
           role={role}
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
         >
           <TextControl
             name="name"
diff --git a/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx b/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx
index bbd54e8a47..42b5760af1 100644
--- a/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx
+++ b/js/apps/admin-ui/src/components/role-mapping/AddRoleMappingModal.tsx
@@ -1,12 +1,14 @@
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   Modal,
   ModalVariant,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import { FilterIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -151,7 +153,7 @@ export const AddRoleMappingModal = ({
                 data-testid="filter-type-dropdown"
                 toggle={
                   <DropdownToggle
-                    onToggle={setSearchToggle}
+                    onToggle={(_event, val) => setSearchToggle(val)}
                     icon={<FilterIcon />}
                   >
                     {filterType === "roles"
diff --git a/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx b/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
index 4490f0218e..b9fd1b6b7c 100644
--- a/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
+++ b/js/apps/admin-ui/src/components/role-mapping/RoleMapping.tsx
@@ -190,7 +190,7 @@ export const RoleMapping = ({
                 id="hideInheritedRoles"
                 data-testid="hideInheritedRoles"
                 isChecked={hide}
-                onChange={(check) => {
+                onChange={(_event, check) => {
                   setHide(check);
                   refresh();
                 }}
diff --git a/js/apps/admin-ui/src/components/role-mapping/role-mapping.css b/js/apps/admin-ui/src/components/role-mapping/role-mapping.css
index a3d9a84e91..bab4c16eb0 100644
--- a/js/apps/admin-ui/src/components/role-mapping/role-mapping.css
+++ b/js/apps/admin-ui/src/components/role-mapping/role-mapping.css
@@ -1,5 +1,5 @@
 
 
 .keycloak-admin--role-mapping__client-name {
-  margin-right: var(--pf-global--spacer--sm);
+  margin-right: var(--pf-v5-global--spacer--sm);
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/components/roles-list/RolesList.css b/js/apps/admin-ui/src/components/roles-list/RolesList.css
index f1c178b043..8cf1812272 100644
--- a/js/apps/admin-ui/src/components/roles-list/RolesList.css
+++ b/js/apps/admin-ui/src/components/roles-list/RolesList.css
@@ -2,41 +2,41 @@
   padding-left: 0px;
 }
 
-.pf-c-button.pf-m-link.kc-groups-link {
-  font-size: var(--pf-global--FontSize--sm);
+.pf-v5-c-button.pf-m-link.kc-groups-link {
+  font-size: var(--pf-v5-global--FontSize--sm);
   padding-left: 0px;
-  padding-right: var(--pf-global--spacer--xs);
+  padding-right: var(--pf-v5-global--spacer--xs);
   padding-top: 0px;
 }
 
-.pf-c-button.pf-m-link.kc-users-link {
-  font-size: var(--pf-global--FontSize--sm);
-  padding-left: var(--pf-global--spacer--xs);
-  padding-right: var(--pf-global--spacer--xs);
+.pf-v5-c-button.pf-m-link.kc-users-link {
+  font-size: var(--pf-v5-global--FontSize--sm);
+  padding-left: var(--pf-v5-global--spacer--xs);
+  padding-right: var(--pf-v5-global--spacer--xs);
   padding-top: 0px;
 }
 
-.pf-c-button.pf-m-link.kc-groups-link-empty-state {
-  padding-left: var(--pf-global--spacer--xs);
-  padding-right: var(--pf-global--spacer--xs);
+.pf-v5-c-button.pf-m-link.kc-groups-link-empty-state {
+  padding-left: var(--pf-v5-global--spacer--xs);
+  padding-right: var(--pf-v5-global--spacer--xs);
 }
 
-.pf-c-button.pf-m-link.kc-users-link-empty-state {
-  padding-left: var(--pf-global--spacer--xs);
-  padding-right: var(--pf-global--spacer--xs);
+.pf-v5-c-button.pf-m-link.kc-users-link-empty-state {
+  padding-left: var(--pf-v5-global--spacer--xs);
+  padding-right: var(--pf-v5-global--spacer--xs);
 }
 
-.pf-c-chip-group.kc-filter-chip-group__table {
-  margin-left: var(--pf-global--spacer--md);
-  margin-bottom: var(--pf-global--spacer--md);
+.pf-v5-c-chip-group.kc-filter-chip-group__table {
+  margin-left: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
 
-button#default-role-help-icon.pf-c-form__group-label-help {
-  margin-left: var(--pf-global--spacer--xs);
+button#default-role-help-icon.pf-v5-c-form__group-label-help {
+  margin-left: var(--pf-v5-global--spacer--xs);
   vertical-align: middle;
 }
 
-.pf-c-tab-content.kc-attributes-tab {
-  padding-left: var(--pf-global--spacer--xl);
-  padding-top: var(--pf-global--spacer--lg);
+.pf-v5-c-tab-content.kc-attributes-tab {
+  padding-left: var(--pf-v5-global--spacer--xl);
+  padding-top: var(--pf-v5-global--spacer--lg);
 }
diff --git a/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx b/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx
index 57e4fc6b16..bd5535be24 100644
--- a/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx
+++ b/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx
@@ -91,8 +91,8 @@ export const RoutableTabs = ({
       }}
       {...otherProps}
     >
-      {children}
-      {matchedTabs.map((t) => (
+      {children as any}
+      {matchedTabs.map<any>((t) => (
         <DynamicTab key={t.id} eventKey={t.pathname} title={t.id}>
           <PageHandler page={t} providerType={TAB_PROVIDER} />
         </DynamicTab>
diff --git a/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx b/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx
index ca9f7928f0..6c87c2e385 100644
--- a/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/js/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -7,12 +7,14 @@ import {
   IFormatter,
   IRow,
   ITransform,
+  TableVariant,
+} from "@patternfly/react-table";
+import {
   Table,
   TableBody,
   TableHeader,
   TableProps,
-  TableVariant,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 import { cloneDeep, differenceBy, get } from "lodash-es";
 import {
   ComponentClass,
@@ -303,7 +305,7 @@ export function KeycloakDataTable<T>({
   useEffect(() => {
     if (canSelectAll) {
       const checkboxes = document
-        .getElementsByClassName("pf-c-table__check")
+        .getElementsByClassName("pf-v5-c-table__check")
         .item(0);
       if (checkboxes) {
         const checkAllCheckbox = checkboxes.children!.item(
diff --git a/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx b/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx
index 682abe2766..baacdb518a 100644
--- a/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx
+++ b/js/apps/admin-ui/src/components/table-toolbar/PaginatingTableToolbar.tsx
@@ -1,6 +1,6 @@
 import {
   Pagination,
-  ToggleTemplateProps,
+  PaginationToggleTemplateProps,
   ToolbarItem,
 } from "@patternfly/react-core";
 import { PropsWithChildren, ReactNode } from "react";
@@ -44,10 +44,13 @@ const KeycloakPagination = ({
     <Pagination
       widgetId={id}
       titles={{
-        paginationTitle: `${t("pagination")} ${variant} `,
+        paginationAriaLabel: `${t("pagination")} ${variant} `,
       }}
       isCompact
-      toggleTemplate={({ firstIndex, lastIndex }: ToggleTemplateProps) => (
+      toggleTemplate={({
+        firstIndex,
+        lastIndex,
+      }: PaginationToggleTemplateProps) => (
         <b>
           {firstIndex} - {lastIndex}
         </b>
@@ -88,7 +91,7 @@ export const PaginatingTableToolbar = ({
       subToolbar={subToolbar}
       toolbarItemFooter={
         count !== 0 ? (
-          <ToolbarItem>
+          <ToolbarItem variant="pagination">
             <KeycloakPagination count={count} variant="bottom" {...rest} />
           </ToolbarItem>
         ) : null
diff --git a/js/apps/admin-ui/src/components/table-toolbar/TableToolbar.tsx b/js/apps/admin-ui/src/components/table-toolbar/TableToolbar.tsx
index b874fc94e1..167691dda9 100644
--- a/js/apps/admin-ui/src/components/table-toolbar/TableToolbar.tsx
+++ b/js/apps/admin-ui/src/components/table-toolbar/TableToolbar.tsx
@@ -58,6 +58,7 @@ export const TableToolbar = ({
                 {searchTypeComponent}
                 {inputGroupPlaceholder && (
                   <SearchInput
+                    data-testid="table-search-input"
                     placeholder={inputGroupPlaceholder}
                     aria-label={t("search")}
                     value={searchValue}
diff --git a/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx b/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx
index 688e7cdc1b..8c3be1074a 100644
--- a/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx
+++ b/js/apps/admin-ui/src/components/time-selector/TimeSelector.tsx
@@ -1,15 +1,17 @@
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  DropdownProps,
-  Select,
-  SelectOption,
-  SelectVariant,
   Split,
   SplitItem,
   TextInput,
   TextInputProps,
 } from "@patternfly/react-core";
+import {
+  DropdownProps,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 
 export type Unit = "second" | "minute" | "hour" | "day";
 
@@ -123,7 +125,7 @@ export const TimeSelector = ({
           min={min || 0}
           value={timeValue}
           className={`${className}-input`}
-          onChange={(value) => {
+          onChange={(_event, value) => {
             updateTimeout("" === value ? value : parseInt(value));
           }}
         />
diff --git a/js/apps/admin-ui/src/components/time-selector/TimeSelectorControl.tsx b/js/apps/admin-ui/src/components/time-selector/TimeSelectorControl.tsx
index e37622b442..b1c13f64a6 100644
--- a/js/apps/admin-ui/src/components/time-selector/TimeSelectorControl.tsx
+++ b/js/apps/admin-ui/src/components/time-selector/TimeSelectorControl.tsx
@@ -7,7 +7,7 @@ import {
   UseControllerProps,
   useFormContext,
 } from "react-hook-form";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 import { TimeSelector, TimeSelectorProps } from "./TimeSelector";
 
 export type NumberControlOption = {
@@ -40,6 +40,9 @@ export const TimeSelectorControl = <
     control,
     formState: { errors },
   } = useFormContext();
+
+  const error = errors[name];
+
   return (
     <FormGroup
       isRequired={controller.rules?.required === true}
@@ -50,10 +53,6 @@ export const TimeSelectorControl = <
           <HelpItem helpText={labelIcon} fieldLabelId={name} />
         ) : undefined
       }
-      helperTextInvalid={errors[name]?.message as string}
-      validated={
-        errors[name] ? ValidatedOptions.error : ValidatedOptions.default
-      }
     >
       <Controller
         {...controller}
@@ -67,11 +66,12 @@ export const TimeSelectorControl = <
             value={field.value}
             onChange={field.onChange}
             validated={
-              errors[name] ? ValidatedOptions.error : ValidatedOptions.default
+              error ? ValidatedOptions.error : ValidatedOptions.default
             }
           />
         )}
       />
+      {error && <FormErrorText message={error.message as string} />}
     </FormGroup>
   );
 };
diff --git a/js/apps/admin-ui/src/components/users/UserDataTable.tsx b/js/apps/admin-ui/src/components/users/UserDataTable.tsx
index 1db1d31baa..85acabccdb 100644
--- a/js/apps/admin-ui/src/components/users/UserDataTable.tsx
+++ b/js/apps/admin-ui/src/components/users/UserDataTable.tsx
@@ -244,7 +244,7 @@ export function UserDataTable() {
             {Object.values(activeFilters).map((entry) => {
               return (
                 <ChipGroup
-                  className="pf-u-mt-md pf-u-mr-md"
+                  className="pf-v5-u-mt-md pf-v5-u-mr-md"
                   key={entry.name}
                   categoryName={
                     entry.displayName.length ? entry.displayName : entry.name
@@ -339,7 +339,7 @@ export function UserDataTable() {
               <Toolbar>
                 <ToolbarContent>{toolbar()}</ToolbarContent>
               </Toolbar>
-              <EmptyState data-testid="empty-state" variant="large">
+              <EmptyState data-testid="empty-state" variant="lg">
                 <TextContent className="kc-search-users-text">
                   <Text>{t("searchForUserDescription")}</Text>
                 </TextContent>
diff --git a/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx b/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
index 47fcc34c44..33310c2eff 100644
--- a/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
+++ b/js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx
@@ -6,13 +6,17 @@ import {
   Button,
   ButtonVariant,
   InputGroup,
+  InputGroupItem,
+  Text,
+  TextContent,
+  TextInput,
+  TextVariants,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Text,
-  TextContent,
-  TextVariants,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { CheckIcon } from "@patternfly/react-icons";
 import { ReactNode, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -21,7 +25,6 @@ import { Form } from "react-router-dom";
 import { label } from "ui-shared";
 
 import { useAlerts } from "../alert/Alerts";
-import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import { UserAttribute } from "./UserDataTable";
 
 type UserDataTableAttributeSearchFormProps = {
@@ -132,7 +135,7 @@ export function UserDataTableAttributeSearchForm({
         <Select
           data-testid="search-attribute-name"
           variant={SelectVariant.typeahead}
-          onToggle={(isOpen) => setSelectAttributeKeyOpen(isOpen)}
+          onToggle={(_event, isOpen) => setSelectAttributeKeyOpen(isOpen)}
           selections={getValues().displayName}
           onSelect={(_, selectedValue) => {
             setValue("displayName", selectedValue.toString());
@@ -166,7 +169,7 @@ export function UserDataTableAttributeSearchForm({
       );
     } else {
       return (
-        <KeycloakTextInput
+        <TextInput
           id="name"
           placeholder={t("keyPlaceholder")}
           validated={errors.name && "error"}
@@ -205,27 +208,31 @@ export function UserDataTableAttributeSearchForm({
       </div>
       <div className="user-attribute-search-form-right">
         <InputGroup>
-          <KeycloakTextInput
-            id="value"
-            placeholder={t("valuePlaceholder")}
-            validated={errors.value && "error"}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                addToFilter();
-              }
-            }}
-            {...register("value", {
-              required: true,
-              validate: isAttributeValueValid,
-            })}
-          />
-          <Button
-            variant="control"
-            icon={<CheckIcon />}
-            onClick={addToFilter}
-            aria-label={t("addToFilter")}
-          />
+          <InputGroupItem>
+            <TextInput
+              id="value"
+              placeholder={t("valuePlaceholder")}
+              validated={errors.value && "error"}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  addToFilter();
+                }
+              }}
+              {...register("value", {
+                required: true,
+                validate: isAttributeValueValid,
+              })}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              variant="control"
+              icon={<CheckIcon />}
+              onClick={addToFilter}
+              aria-label={t("addToFilter")}
+            />
+          </InputGroupItem>
         </InputGroup>
       </div>
       {createAttributeSearchChips()}
diff --git a/js/apps/admin-ui/src/components/users/UserDataTableToolbarItems.tsx b/js/apps/admin-ui/src/components/users/UserDataTableToolbarItems.tsx
index 3b9765eab4..72c39ca693 100644
--- a/js/apps/admin-ui/src/components/users/UserDataTableToolbarItems.tsx
+++ b/js/apps/admin-ui/src/components/users/UserDataTableToolbarItems.tsx
@@ -3,13 +3,16 @@ import type { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs
 import {
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownItem,
   InputGroup,
-  KebabToggle,
   SearchInput,
   ToolbarItem,
+  InputGroupItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from "@patternfly/react-core/deprecated";
 import { ArrowRightIcon } from "@patternfly/react-icons";
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -76,13 +79,15 @@ export function UserDataTableToolbarItems({
     return (
       <ToolbarItem>
         <InputGroup>
-          <SearchDropdown
-            searchType={searchType}
-            onSelect={(searchType) => {
-              clearAllFilters();
-              setSearchType(searchType);
-            }}
-          />
+          <InputGroupItem>
+            <SearchDropdown
+              searchType={searchType}
+              onSelect={(searchType) => {
+                clearAllFilters();
+                setSearchType(searchType);
+              }}
+            />
+          </InputGroupItem>
           {searchType === "default" && defaultSearchInput()}
           {searchType === "attribute" && attributeSearchInput()}
         </InputGroup>
@@ -94,6 +99,7 @@ export function UserDataTableToolbarItems({
     return (
       <ToolbarItem>
         <SearchInput
+          data-testid="table-search-input"
           placeholder={t("searchForUser")}
           aria-label={t("search")}
           value={searchUser}
@@ -164,7 +170,7 @@ export function UserDataTableToolbarItems({
   ) : (
     <ToolbarItem>
       <Dropdown
-        toggle={<KebabToggle onToggle={(open) => setKebabOpen(open)} />}
+        toggle={<KebabToggle onToggle={(_event, open) => setKebabOpen(open)} />}
         isOpen={kebabOpen}
         isPlain
         dropdownItems={[
diff --git a/js/apps/admin-ui/src/components/users/UserSelect.tsx b/js/apps/admin-ui/src/components/users/UserSelect.tsx
index dd03ea72a3..55e85b755e 100644
--- a/js/apps/admin-ui/src/components/users/UserSelect.tsx
+++ b/js/apps/admin-ui/src/components/users/UserSelect.tsx
@@ -1,16 +1,16 @@
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import type { UserQuery } from "@keycloak/keycloak-admin-client/lib/resources/users";
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { debounce } from "lodash-es";
 import { useCallback, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { useFetch } from "../../utils/useFetch";
@@ -83,8 +83,6 @@ export const UserSelect = ({
       isRequired={isRequired}
       labelIcon={<HelpItem helpText={helpText!} fieldLabelId={label!} />}
       fieldId={name!}
-      validated={errors[name!] ? "error" : "default"}
-      helperTextInvalid={t("required")}
     >
       <Controller
         name={name!}
@@ -129,6 +127,7 @@ export const UserSelect = ({
           </Select>
         )}
       />
+      {errors[name!] && <FormErrorText message={t("required")} />}
     </FormGroup>
   );
 };
diff --git a/js/apps/admin-ui/src/components/view-header/ViewHeader.tsx b/js/apps/admin-ui/src/components/view-header/ViewHeader.tsx
index de3c3739a8..b515cdd49a 100644
--- a/js/apps/admin-ui/src/components/view-header/ViewHeader.tsx
+++ b/js/apps/admin-ui/src/components/view-header/ViewHeader.tsx
@@ -2,9 +2,6 @@ import {
   Badge,
   Button,
   Divider,
-  Dropdown,
-  DropdownPosition,
-  DropdownToggle,
   Level,
   LevelItem,
   PageSection,
@@ -15,6 +12,11 @@ import {
   ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownPosition,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import {
   ReactElement,
   ReactNode,
@@ -92,7 +94,7 @@ export const ViewHeader = ({
           <LevelItem>
             <Level>
               <LevelItem>
-                <TextContent className="pf-u-mr-sm">
+                <TextContent className="pf-v5-u-mr-sm">
                   <Text
                     className={className}
                     component="h1"
@@ -121,7 +123,7 @@ export const ViewHeader = ({
             </Level>
           </LevelItem>
           <LevelItem>
-            <Toolbar className="pf-u-p-0">
+            <Toolbar className="pf-v5-u-p-0">
               <ToolbarContent>
                 {onToggle && (
                   <ToolbarItem>
@@ -130,11 +132,11 @@ export const ViewHeader = ({
                       data-testid={`${titleKey}-switch`}
                       label={t("enabled")}
                       labelOff={t("disabled")}
-                      className="pf-u-mr-lg"
+                      className="pf-v5-u-mr-lg"
                       isDisabled={isReadOnly}
                       isChecked={isEnabled}
                       aria-label={t("enabled")}
-                      onChange={(value) => {
+                      onChange={(_event, value) => {
                         onToggle(value);
                       }}
                     />
@@ -182,7 +184,7 @@ export const ViewHeader = ({
                   title={t("learnMore")}
                   href={helpUrl}
                   isInline
-                  className="pf-u-ml-md"
+                  className="pf-v5-u-ml-md"
                 />
               )}
             </Text>
@@ -194,7 +196,7 @@ export const ViewHeader = ({
             toggle={
               <DropdownToggle
                 onToggle={() => onLowerDropdownToggle()}
-                isPrimary
+                toggleVariant="primary"
                 id="ufToggleId"
               >
                 {t(lowerDropdownMenuTitle)}
diff --git a/js/apps/admin-ui/src/components/wizard-section-header/wizard-section-header.css b/js/apps/admin-ui/src/components/wizard-section-header/wizard-section-header.css
index e3a69adb4b..491e780d0b 100644
--- a/js/apps/admin-ui/src/components/wizard-section-header/wizard-section-header.css
+++ b/js/apps/admin-ui/src/components/wizard-section-header/wizard-section-header.css
@@ -1,10 +1,10 @@
 .kc-wizard-section-header__title {
-  margin-bottom: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }
 .kc-wizard-section-header__title--has-description {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .kc-wizard-section-header__description {
-  margin-bottom: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }
diff --git a/js/apps/admin-ui/src/dashboard/Dashboard.tsx b/js/apps/admin-ui/src/dashboard/Dashboard.tsx
index 7767d16bd8..3d5e08b44d 100644
--- a/js/apps/admin-ui/src/dashboard/Dashboard.tsx
+++ b/js/apps/admin-ui/src/dashboard/Dashboard.tsx
@@ -27,6 +27,7 @@ import {
   TextContent,
   TextVariants,
   Title,
+  EmptyStateHeader,
 } from "@patternfly/react-core";
 
 import FeatureRepresentation, {
@@ -61,18 +62,14 @@ const EmptyDashboard = () => {
 
   return (
     <PageSection variant="light">
-      <EmptyState variant="large">
+      <EmptyState variant="lg">
         <Brand
           src={environment.resourceUrl + brandImage}
           alt="Keycloak icon"
           className="keycloak__dashboard_icon"
         />
-        <Title headingLevel="h2" size="3xl">
-          {t("welcome")}
-        </Title>
-        <Title headingLevel="h1" size="4xl">
-          {realmDisplayInfo}
-        </Title>
+        <EmptyStateHeader titleText={<>{t("welcome")}</>} headingLevel="h2" />
+        <EmptyStateHeader titleText={realmDisplayInfo} headingLevel="h1" />
         <EmptyStateBody>{t("introduction")}</EmptyStateBody>
       </EmptyState>
     </PageSection>
@@ -86,7 +83,7 @@ type FeatureItemProps = {
 const FeatureItem = ({ feature }: FeatureItemProps) => {
   const { t } = useTranslation();
   return (
-    <ListItem className="pf-u-mb-sm">
+    <ListItem className="pf-v5-u-mb-sm">
       {feature.name}&nbsp;
       {feature.type === FeatureType.Experimental && (
         <Label color="orange">{t("experimental")}</Label>
@@ -146,11 +143,11 @@ const Dashboard = () => {
   return (
     <>
       <PageSection variant="light">
-        <TextContent className="pf-u-mr-sm">
+        <TextContent className="pf-v5-u-mr-sm">
           <Text component="h1">{t("realmNameTitle", { name: realm })}</Text>
         </TextContent>
       </PageSection>
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           data-testid="dashboard-tabs"
           defaultLocation={toDashboard({
@@ -167,22 +164,22 @@ const Dashboard = () => {
             {...welcomeTab}
           >
             <PageSection variant="light">
-              <div className="pf-l-grid pf-u-ml-lg">
-                <div className="pf-l-grid__item pf-m-12-col">
+              <div className="pf-v5-l-grid pf-v5-u-ml-lg">
+                <div className="pf-v5-l-grid__item pf-m-12-col">
                   <Title
-                    className="pf-u-font-weight-bold"
+                    className="pf-v5-u-font-weight-bold"
                     headingLevel="h2"
                     size="3xl"
                   >
                     {t("welcomeTo", { realmDisplayInfo })}
                   </Title>
                 </div>
-                <div className="pf-l-grid__item keycloak__dashboard_welcome_tab">
+                <div className="pf-v5-l-grid__item keycloak__dashboard_welcome_tab">
                   <Text component={TextVariants.h3}>{t("welcomeText")}</Text>
                 </div>
-                <div className="pf-l-grid__item pf-m-10-col pf-u-mt-md">
+                <div className="pf-v5-l-grid__item pf-m-10-col pf-v5-u-mt-md">
                   <Button
-                    className="pf-u-px-lg pf-u-py-sm"
+                    className="pf-v5-u-px-lg pf-v5-u-py-sm"
                     component="a"
                     href={helpUrls.documentation}
                     target="_blank"
@@ -191,7 +188,7 @@ const Dashboard = () => {
                     {t("viewDocumentation")}
                   </Button>
                 </div>
-                <ActionList className="pf-u-mt-sm">
+                <ActionList className="pf-v5-u-mt-sm">
                   <ActionListItem>
                     <Button
                       component="a"
diff --git a/js/apps/admin-ui/src/dashboard/ProviderInfo.tsx b/js/apps/admin-ui/src/dashboard/ProviderInfo.tsx
index da96fc6364..74c76c882c 100644
--- a/js/apps/admin-ui/src/dashboard/ProviderInfo.tsx
+++ b/js/apps/admin-ui/src/dashboard/ProviderInfo.tsx
@@ -1,14 +1,7 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ExpandableSection, PageSection } from "@patternfly/react-core";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
@@ -42,7 +35,7 @@ export const ProviderInfo = () => {
         inputGroupPlaceholder={t("search")}
         inputGroupOnEnter={setFilter}
       >
-        <TableComposable variant="compact">
+        <Table variant="compact">
           <Thead>
             <Tr>
               <Th width={20}>{t("spi")}</Th>
@@ -70,7 +63,7 @@ export const ProviderInfo = () => {
                                   : t("showMore")
                               }
                             >
-                              <TableComposable borders={false}>
+                              <Table borders={false}>
                                 <Tbody>
                                   {Object.entries(operationalInfo).map(
                                     ([key, value]) => (
@@ -81,7 +74,7 @@ export const ProviderInfo = () => {
                                     ),
                                   )}
                                 </Tbody>
-                              </TableComposable>
+                              </Table>
                             </ExpandableSection>
                           ) : null}
                         </li>
@@ -92,7 +85,7 @@ export const ProviderInfo = () => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </TableToolbar>
     </PageSection>
   );
diff --git a/js/apps/admin-ui/src/dashboard/dashboard.css b/js/apps/admin-ui/src/dashboard/dashboard.css
index 1cff5457f1..d24b10bdf6 100644
--- a/js/apps/admin-ui/src/dashboard/dashboard.css
+++ b/js/apps/admin-ui/src/dashboard/dashboard.css
@@ -8,5 +8,5 @@
 
 .keycloak__dashboard_welcome_tab {
   max-width: 38%;
-  margin-top: var(--pf-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
 }
diff --git a/js/apps/admin-ui/src/events/AdminEvents.tsx b/js/apps/admin-ui/src/events/AdminEvents.tsx
index aafe612e94..a17271132f 100644
--- a/js/apps/admin-ui/src/events/AdminEvents.tsx
+++ b/js/apps/admin-ui/src/events/AdminEvents.tsx
@@ -12,17 +12,18 @@ import {
   FormGroup,
   Modal,
   ModalVariant,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
+import { TableVariant, cellWidth } from "@patternfly/react-table";
 import {
   Table,
   TableBody,
   TableHeader,
-  TableVariant,
-  cellWidth,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 import { pickBy } from "lodash-es";
 import { PropsWithChildren, useMemo, useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -275,7 +276,7 @@ export const AdminEvents = () => {
                             }}
                             variant={SelectVariant.typeaheadMulti}
                             typeAheadAriaLabel="Select"
-                            onToggle={(isOpen) =>
+                            onToggle={(_event, isOpen) =>
                               setSelectResourceTypesOpen(isOpen)
                             }
                             selections={field.value}
@@ -340,7 +341,7 @@ export const AdminEvents = () => {
                             }}
                             variant={SelectVariant.typeaheadMulti}
                             typeAheadAriaLabel="Select"
-                            onToggle={(isOpen) =>
+                            onToggle={(_event, isOpen) =>
                               setSelectOperationTypesOpen(isOpen)
                             }
                             selections={field.value}
@@ -403,7 +404,7 @@ export const AdminEvents = () => {
                         control={control}
                         render={({ field }) => (
                           <DatePicker
-                            className="pf-u-w-100"
+                            className="pf-v5-u-w-100"
                             value={field.value}
                             onChange={(_, value) => field.onChange(value)}
                             inputProps={{ id: "kc-dateFrom" }}
@@ -421,7 +422,7 @@ export const AdminEvents = () => {
                         control={control}
                         render={({ field }) => (
                           <DatePicker
-                            className="pf-u-w-100"
+                            className="pf-v5-u-w-100"
                             value={field.value}
                             onChange={(_, value) => field.onChange(value)}
                             inputProps={{ id: "kc-dateTo" }}
@@ -451,7 +452,7 @@ export const AdminEvents = () => {
               </FlexItem>
               <FlexItem>
                 {Object.entries(activeFilters).length > 0 && (
-                  <div className="keycloak__searchChips pf-u-ml-md">
+                  <div className="keycloak__searchChips pf-v5-u-ml-md">
                     {Object.entries(activeFilters).map((filter) => {
                       const [key, value] = filter as [
                         keyof AdminEventSearchForm,
@@ -460,7 +461,7 @@ export const AdminEvents = () => {
 
                       return (
                         <ChipGroup
-                          className="pf-u-mt-md pf-u-mr-md"
+                          className="pf-v5-u-mt-md pf-v5-u-mr-md"
                           key={key}
                           categoryName={filterLabels[key]}
                           isClosable
diff --git a/js/apps/admin-ui/src/events/EventsSection.tsx b/js/apps/admin-ui/src/events/EventsSection.tsx
index 5fc66d9249..edb728f8f0 100644
--- a/js/apps/admin-ui/src/events/EventsSection.tsx
+++ b/js/apps/admin-ui/src/events/EventsSection.tsx
@@ -16,13 +16,15 @@ import {
   Form,
   FormGroup,
   PageSection,
-  Select,
-  SelectOption,
-  SelectVariant,
   Tab,
   TabTitleText,
   Tooltip,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
 import { cellWidth, expandable } from "@patternfly/react-table";
 import { pickBy } from "lodash-es";
@@ -267,7 +269,7 @@ export default function EventsSection() {
                         }}
                         variant={SelectVariant.typeaheadMulti}
                         typeAheadAriaLabel="Select"
-                        onToggle={(isOpen) => setSelectOpen(isOpen)}
+                        onToggle={(_event, isOpen) => setSelectOpen(isOpen)}
                         selections={field.value}
                         onSelect={(_, selectedValue) => {
                           const option = selectedValue.toString() as EventType;
@@ -325,7 +327,7 @@ export default function EventsSection() {
                     control={control}
                     render={({ field }) => (
                       <DatePicker
-                        className="pf-u-w-100"
+                        className="pf-v5-u-w-100"
                         value={field.value}
                         onChange={(_, value) => field.onChange(value)}
                         inputProps={{ id: "kc-dateFrom" }}
@@ -343,7 +345,7 @@ export default function EventsSection() {
                     control={control}
                     render={({ field }) => (
                       <DatePicker
-                        className="pf-u-w-100"
+                        className="pf-v5-u-w-100"
                         value={field.value}
                         onChange={(_, value) => field.onChange(value)}
                         inputProps={{ id: "kc-dateTo" }}
@@ -378,7 +380,7 @@ export default function EventsSection() {
           </FlexItem>
           <FlexItem>
             {Object.entries(activeFilters).length > 0 && (
-              <div className="keycloak__searchChips pf-u-ml-md">
+              <div className="keycloak__searchChips pf-v5-u-ml-md">
                 {Object.entries(activeFilters).map((filter) => {
                   const [key, value] = filter as [
                     keyof UserEventSearchForm,
@@ -387,7 +389,7 @@ export default function EventsSection() {
 
                   return (
                     <ChipGroup
-                      className="pf-u-mt-md pf-u-mr-md"
+                      className="pf-v5-u-mt-md pf-v5-u-mr-md"
                       key={key}
                       categoryName={filterLabels[key]}
                       isClosable
@@ -433,7 +435,7 @@ export default function EventsSection() {
         helpUrl={helpUrls.eventsUrl}
         divider={false}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           isBox
           defaultLocation={toEvents({ realm, tab: "user-events" })}
diff --git a/js/apps/admin-ui/src/events/events.css b/js/apps/admin-ui/src/events/events.css
index 823e3f024e..2775625419 100644
--- a/js/apps/admin-ui/src/events/events.css
+++ b/js/apps/admin-ui/src/events/events.css
@@ -1,21 +1,21 @@
 .keycloak_eventsection_details {
-  --pf-c-description-list--m-horizontal__term--width: 30ch;
+  --pf-v5-c-description-list--m-horizontal__term--width: 30ch;
 }
 
 .keycloak__events_search__form {
-  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
-  margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg)
-    var(--pf-global--spacer--lg);
-  --pf-c-form__group--m-action--MarginTop: 0rem;
-  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
+  --pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
+  margin: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg)
+    var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-form__group--m-action--MarginTop: 0rem;
+  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
 }
 
 .keycloak__events_search__form_label {
-  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
+  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
   line-height: 0px;
 }
 
-.keycloak__events_search__type_select .pf-c-select__menu {
+.keycloak__events_search__type_select .pf-v5-c-select__menu {
   max-height: 200px;
   overflow: auto;
 }
diff --git a/js/apps/admin-ui/src/groups/GroupsSection.css b/js/apps/admin-ui/src/groups/GroupsSection.css
index 41eb77c6cb..7ba543dbb1 100644
--- a/js/apps/admin-ui/src/groups/GroupsSection.css
+++ b/js/apps/admin-ui/src/groups/GroupsSection.css
@@ -4,7 +4,7 @@
 }
 
 .keycloak-admin--groups__member-count svg {
-  color: var(--pf-global--Color--200);
-  font-size: var(--pf-global--FontSize--md);
-  margin-right: var(--pf-global--spacer--sm);
+  color: var(--pf-v5-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--md);
+  margin-right: var(--pf-v5-global--spacer--sm);
 }
diff --git a/js/apps/admin-ui/src/groups/GroupsSection.tsx b/js/apps/admin-ui/src/groups/GroupsSection.tsx
index 8631ced048..c44e65563b 100644
--- a/js/apps/admin-ui/src/groups/GroupsSection.tsx
+++ b/js/apps/admin-ui/src/groups/GroupsSection.tsx
@@ -6,7 +6,6 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelContent,
-  DropdownItem,
   PageSection,
   PageSectionVariants,
   Tab,
@@ -14,6 +13,7 @@ import {
   Tabs,
   Tooltip,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { AngleLeftIcon, TreeIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -128,7 +128,7 @@ export default function GroupsSection() {
           handleModalToggle={() => setRename(undefined)}
         />
       )}
-      <PageSection variant={PageSectionVariants.light} className="pf-u-p-0">
+      <PageSection variant={PageSectionVariants.light} className="pf-v5-u-p-0">
         <Drawer isInline isExpanded={open} key={key} position="left">
           <DrawerContent
             panelContent={
diff --git a/js/apps/admin-ui/src/groups/Members.tsx b/js/apps/admin-ui/src/groups/Members.tsx
index b6e148e4df..55ecf0a55d 100644
--- a/js/apps/admin-ui/src/groups/Members.tsx
+++ b/js/apps/admin-ui/src/groups/Members.tsx
@@ -5,11 +5,13 @@ import {
   AlertVariant,
   Button,
   Checkbox,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import {
   Dropdown,
   DropdownItem,
   KebabToggle,
-  ToolbarItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { uniqBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/groups/components/CheckableTreeView.tsx b/js/apps/admin-ui/src/groups/components/CheckableTreeView.tsx
index 3e0b401d02..43d84ee3eb 100644
--- a/js/apps/admin-ui/src/groups/components/CheckableTreeView.tsx
+++ b/js/apps/admin-ui/src/groups/components/CheckableTreeView.tsx
@@ -87,5 +87,5 @@ export const CheckableTreeView = ({
   };
 
   const mapped = state.options.map((item) => mapTree(item));
-  return <TreeView data={mapped} onCheck={onCheck} hasChecks />;
+  return <TreeView data={mapped} onCheck={onCheck} hasCheckboxes />;
 };
diff --git a/js/apps/admin-ui/src/groups/components/GroupToolbar.tsx b/js/apps/admin-ui/src/groups/components/GroupToolbar.tsx
index 7d6bb8ffea..f541898dfa 100644
--- a/js/apps/admin-ui/src/groups/components/GroupToolbar.tsx
+++ b/js/apps/admin-ui/src/groups/components/GroupToolbar.tsx
@@ -1,11 +1,10 @@
 import { useTranslation } from "react-i18next";
+import { Button, ToolbarItem } from "@patternfly/react-core";
 import {
-  Button,
   Dropdown,
   DropdownItem,
   KebabToggle,
-  ToolbarItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 
 import { useSubGroups } from "../SubGroupsContext";
 import { useAccess } from "../../context/access/Access";
diff --git a/js/apps/admin-ui/src/groups/components/GroupTree.tsx b/js/apps/admin-ui/src/groups/components/GroupTree.tsx
index 44cb3e96e5..978b72594a 100644
--- a/js/apps/admin-ui/src/groups/components/GroupTree.tsx
+++ b/js/apps/admin-ui/src/groups/components/GroupTree.tsx
@@ -3,16 +3,19 @@ import {
   AlertVariant,
   Button,
   Checkbox,
+  InputGroup,
+  Tooltip,
+  TreeView,
+  TreeViewDataItem,
+  InputGroupItem,
+} from "@patternfly/react-core";
+import {
   Dropdown,
   DropdownItem,
   DropdownPosition,
   DropdownSeparator,
-  InputGroup,
   KebabToggle,
-  Tooltip,
-  TreeView,
-  TreeViewDataItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { AngleRightIcon } from "@patternfly/react-icons";
 import { unionBy } from "lodash-es";
 import { useRef, useState } from "react";
@@ -292,17 +295,21 @@ export const GroupTree = ({
       inputGroupPlaceholder={t("searchForGroups")}
       inputGroupOnEnter={setSearch}
       toolbarItem={
-        <InputGroup className="pf-u-pt-sm">
-          <Checkbox
-            id="exact"
-            data-testid="exact-search"
-            name="exact"
-            isChecked={exact}
-            onChange={(value) => setExact(value)}
-          />
-          <label htmlFor="exact" className="pf-u-pl-sm">
-            {t("exactSearch")}
-          </label>
+        <InputGroup className="pf-v5-u-pt-sm">
+          <InputGroupItem>
+            <Checkbox
+              id="exact"
+              data-testid="exact-search"
+              name="exact"
+              isChecked={exact}
+              onChange={(_event, value) => setExact(value)}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <label htmlFor="exact" className="pf-v5-u-pl-sm">
+              {t("exactSearch")}
+            </label>
+          </InputGroupItem>
         </InputGroup>
       }
     >
diff --git a/js/apps/admin-ui/src/groups/components/group-tree.css b/js/apps/admin-ui/src/groups/components/group-tree.css
index 579da88a4d..9bfe7cbf5d 100644
--- a/js/apps/admin-ui/src/groups/components/group-tree.css
+++ b/js/apps/admin-ui/src/groups/components/group-tree.css
@@ -1,4 +1,4 @@
-.keycloak_groups_treeview .pf-c-tree-view__node-text {
+.keycloak_groups_treeview .pf-v5-c-tree-view__node-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx b/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx
index ce7b9f3b12..653c1ef84e 100644
--- a/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx
+++ b/js/apps/admin-ui/src/identity-providers/IdentityProvidersSection.tsx
@@ -6,10 +6,6 @@ import {
   Button,
   ButtonVariant,
   CardTitle,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
   Gallery,
   PageSection,
   Split,
@@ -19,6 +15,12 @@ import {
   TextVariants,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownToggle,
+} from "@patternfly/react-core/deprecated";
 import { groupBy, sortBy } from "lodash-es";
 import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -61,7 +63,7 @@ const DetailLink = (identityProvider: IdentityProviderRepresentation) => {
         <Badge
           key={`${identityProvider.providerId}-disabled`}
           isRead
-          className="pf-u-ml-sm"
+          className="pf-v5-u-ml-sm"
         >
           {t("disabled")}
         </Badge>
@@ -175,7 +177,7 @@ export default function IdentityProvidersSection() {
       />
       <PageSection
         variant={!hasProviders ? "default" : "light"}
-        className={!hasProviders ? "" : "pf-u-p-0"}
+        className={!hasProviders ? "" : "pf-v5-u-p-0"}
       >
         {!hasProviders && (
           <>
@@ -185,11 +187,11 @@ export default function IdentityProvidersSection() {
             {Object.keys(identityProviders).map((group) => (
               <Fragment key={group}>
                 <TextContent>
-                  <Text className="pf-u-mt-lg" component={TextVariants.h2}>
+                  <Text className="pf-v5-u-mt-lg" component={TextVariants.h2}>
                     {group}:
                   </Text>
                 </TextContent>
-                <hr className="pf-u-mb-lg" />
+                <hr className="pf-v5-u-mb-lg" />
                 <Gallery hasGutter>
                   {sortBy(identityProviders[group], "name").map((provider) => (
                     <ClickableCard
@@ -227,7 +229,7 @@ export default function IdentityProvidersSection() {
                     toggle={
                       <DropdownToggle
                         onToggle={() => setAddProviderOpen(!addProviderOpen)}
-                        isPrimary
+                        toggleVariant="primary"
                       >
                         {t("addProvider")}
                       </DropdownToggle>
diff --git a/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx b/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx
index ba44dc6c6c..b9d6bb4399 100644
--- a/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx
+++ b/js/apps/admin-ui/src/identity-providers/ManageOrderDialog.tsx
@@ -9,6 +9,10 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  DragDrop,
+  Draggable,
+  DraggableItemPosition,
+  Droppable,
   Modal,
   ModalVariant,
   Text,
@@ -30,35 +34,46 @@ export const ManageOrderDialog = ({ onClose }: ManageOrderDialogProps) => {
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
 
-  const [alias, setAlias] = useState("");
   const [liveText, setLiveText] = useState("");
   const [providers, setProviders] =
     useState<IdentityProviderRepresentation[]>();
   const [order, setOrder] = useState<string[]>([]);
 
-  const onDragStart = (id: string) => {
-    setAlias(id);
-    setLiveText(t("onDragStart", { item: id }));
+  const onDragStart = ({ index }: DraggableItemPosition) => {
+    setLiveText(t("onDragStart", { item: order[index] }));
+    return true;
   };
 
-  const onDragMove = () => {
-    setLiveText(t("onDragMove", { item: alias }));
+  const onDragMove = ({ index }: DraggableItemPosition) => {
+    setLiveText(t("onDragMove", { item: order[index] }));
   };
 
-  const onDragCancel = () => {
-    setLiveText(t("onDragCancel"));
-  };
-
-  const onDragFinish = (providerOrder: string[]) => {
-    setLiveText(t("onDragFinish", { list: providerOrder }));
-    setOrder(providerOrder);
+  const onDragFinish = (
+    source: DraggableItemPosition,
+    dest?: DraggableItemPosition,
+  ) => {
+    if (dest) {
+      const result = [...order];
+      const [removed] = result.splice(source.index, 1);
+      result.splice(dest.index, 0, removed);
+      setLiveText(t("onDragFinish", { list: result }));
+      setOrder(result);
+      return true;
+    } else {
+      setLiveText(t("onDragCancel"));
+      return false;
+    }
   };
 
   useFetch(
     () => adminClient.identityProviders.find(),
     (providers) => {
-      setProviders(sortBy(providers, ["config.guiOrder", "alias"]));
-      setOrder(providers.map((provider) => provider.alias!));
+      setProviders(providers);
+      setOrder(
+        sortBy(providers, ["config.guiOrder", "alias"]).map(
+          (provider) => provider.alias!,
+        ),
+      );
     },
     [],
   );
@@ -108,45 +123,43 @@ export const ManageOrderDialog = ({ onClose }: ManageOrderDialogProps) => {
         </Button>,
       ]}
     >
-      <TextContent className="pf-u-pb-lg">
+      <TextContent className="pf-v5-u-pb-lg">
         <Text>{t("orderDialogIntro")}</Text>
       </TextContent>
 
-      <DataList
-        aria-label={t("manageOrderTableAria")}
-        data-testid="manageOrderDataList"
-        isCompact
-        onDragFinish={onDragFinish}
-        onDragStart={onDragStart}
+      <DragDrop
+        onDrag={onDragStart}
         onDragMove={onDragMove}
-        onDragCancel={onDragCancel}
-        itemOrder={order}
+        onDrop={onDragFinish}
       >
-        {sortBy(providers, "config.guiOrder", "alias").map((provider) => (
-          <DataListItem
-            aria-label={provider.alias}
-            id={provider.alias}
-            key={provider.alias}
+        <Droppable hasNoWrapper>
+          <DataList
+            aria-label={t("manageOrderTableAria")}
+            data-testid="manageOrderDataList"
+            isCompact
           >
-            <DataListItemRow>
-              <DataListControl>
-                <DataListDragButton aria-label={t("dragHelp")} />
-              </DataListControl>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell
-                    key={provider.alias}
-                    data-testid={provider.alias}
-                  >
-                    {provider.alias}
-                  </DataListCell>,
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        ))}
-      </DataList>
-      <div className="pf-screen-reader" aria-live="assertive">
+            {order.map((alias) => (
+              <Draggable hasNoWrapper key={alias}>
+                <DataListItem aria-label={alias} id={alias}>
+                  <DataListItemRow>
+                    <DataListControl>
+                      <DataListDragButton aria-label={t("dragHelp")} />
+                    </DataListControl>
+                    <DataListItemCells
+                      dataListCells={[
+                        <DataListCell key={alias} data-testid={alias}>
+                          {alias}
+                        </DataListCell>,
+                      ]}
+                    />
+                  </DataListItemRow>
+                </DataListItem>
+              </Draggable>
+            ))}
+          </DataList>
+        </Droppable>
+      </DragDrop>
+      <div className="pf-v5-screen-reader" aria-live="assertive">
         {liveText}
       </div>
     </Modal>
diff --git a/js/apps/admin-ui/src/identity-providers/add/AddMapper.tsx b/js/apps/admin-ui/src/identity-providers/add/AddMapper.tsx
index b77360d914..4b8912e031 100644
--- a/js/apps/admin-ui/src/identity-providers/add/AddMapper.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/AddMapper.tsx
@@ -6,9 +6,9 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   PageSection,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -194,7 +194,7 @@ export default function AddMapper() {
         role="manage-identity-providers"
         isHorizontal
         onSubmit={handleSubmit(save)}
-        className="pf-u-mt-lg"
+        className="pf-v5-u-mt-lg"
       >
         <FormProvider {...form}>
           {id && (
diff --git a/js/apps/admin-ui/src/identity-providers/add/AddMapperForm.tsx b/js/apps/admin-ui/src/identity-providers/add/AddMapperForm.tsx
index 9d1ff58e09..b8781b309d 100644
--- a/js/apps/admin-ui/src/identity-providers/add/AddMapperForm.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/AddMapperForm.tsx
@@ -1,11 +1,11 @@
 import type IdentityProviderMapperRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderMapperRepresentation";
 import type { IdentityProviderMapperTypeRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/identityProviderMapperTypeRepresentation";
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/identity-providers/add/AdvancedSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/AdvancedSettings.tsx
index 098cf39cc2..0cb8976d2a 100644
--- a/js/apps/admin-ui/src/identity-providers/add/AdvancedSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/AdvancedSettings.tsx
@@ -2,19 +2,21 @@ import type AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-clie
 import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
 import {
   FormGroup,
+  Switch,
+  TextInput,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
-  ValidatedOptions,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, SelectControl } from "ui-shared";
+import { FormErrorText, HelpItem, SelectControl } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useFetch } from "../../utils/useFetch";
 import useIsFeatureEnabled, { Feature } from "../../utils/useIsFeatureEnabled";
 import type { FieldProps } from "../component/FormGroupField";
@@ -160,7 +162,7 @@ export const AdvancedSettings = ({ isOIDC, isSAML }: AdvancedSettingsProps) => {
                 label={t("on")}
                 labelOff={t("off")}
                 isChecked={field.value === "true"}
-                onChange={(value) => {
+                onChange={(_event, value) => {
                   field.onChange(value.toString());
                 }}
               />
@@ -180,14 +182,8 @@ export const AdvancedSettings = ({ isOIDC, isSAML }: AdvancedSettingsProps) => {
             }
             fieldId="kc-claim-filter-name"
             isRequired
-            validated={
-              errors.config?.claimFilterName
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
-            helperTextInvalid={t("required")}
           >
-            <KeycloakTextInput
+            <TextInput
               isRequired
               id="kc-claim-filter-name"
               data-testid="claimFilterName"
@@ -198,6 +194,9 @@ export const AdvancedSettings = ({ isOIDC, isSAML }: AdvancedSettingsProps) => {
               }
               {...register("config.claimFilterName", { required: true })}
             />
+            {errors.config?.claimFilterName && (
+              <FormErrorText message={t("required")} />
+            )}
           </FormGroup>
           <FormGroup
             label={t("claimFilterValue")}
@@ -209,14 +208,8 @@ export const AdvancedSettings = ({ isOIDC, isSAML }: AdvancedSettingsProps) => {
             }
             fieldId="kc-claim-filter-value"
             isRequired
-            validated={
-              errors.config?.claimFilterValue
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
-            helperTextInvalid={t("required")}
           >
-            <KeycloakTextInput
+            <TextInput
               isRequired
               id="kc-claim-filter-value"
               data-testid="claimFilterValue"
@@ -227,6 +220,9 @@ export const AdvancedSettings = ({ isOIDC, isSAML }: AdvancedSettingsProps) => {
               }
               {...register("config.claimFilterValue", { required: true })}
             />
+            {errors.config?.claimFilterValue && (
+              <FormErrorText message={t("required")} />
+            )}
           </FormGroup>
         </>
       )}
@@ -254,7 +250,7 @@ export const AdvancedSettings = ({ isOIDC, isSAML }: AdvancedSettingsProps) => {
                 label={t("on")}
                 labelOff={t("off")}
                 isChecked={field.value === "true"}
-                onChange={(value) => {
+                onChange={(_event, value) => {
                   field.onChange(value.toString());
                   // if field is checked, set sync mode to import
                   if (value) {
diff --git a/js/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx
index e03a36bc02..f37ebc287d 100644
--- a/js/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/DescriptorSettings.tsx
@@ -44,7 +44,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
   });
 
   return (
-    <div className="pf-c-form pf-m-horizontal">
+    <div className="pf-v5-c-form pf-m-horizontal">
       <FormProvider {...form}>
         <TextControl
           name="config.entityId"
@@ -333,7 +333,7 @@ export const DescriptorSettings = ({ readOnly }: DescriptorSettingsProps) => {
     <ExpandableSection
       className="keycloak__discovery-settings__metadata"
       toggleText={isExpanded ? t("hideMetaData") : t("showMetaData")}
-      onToggle={(isOpen) => setIsExpanded(isOpen)}
+      onToggle={(_event, isOpen) => setIsExpanded(isOpen)}
       isExpanded={isExpanded}
     >
       <Fields readOnly={readOnly} />
diff --git a/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
index 0f724be18b..5df5161a67 100644
--- a/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/DetailSettings.tsx
@@ -5,14 +5,16 @@ import {
   Button,
   ButtonVariant,
   Divider,
-  DropdownItem,
-  DropdownSeparator,
   Form,
   PageSection,
   Tab,
   TabTitleText,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  DropdownItem,
+  DropdownSeparator,
+} from "@patternfly/react-core/deprecated";
 import { useMemo, useState } from "react";
 import {
   Controller,
@@ -445,7 +447,7 @@ export default function DetailSettings() {
       panel: (
         <>
           <DiscoverySettings readOnly={false} />
-          <Form isHorizontal className="pf-u-py-lg">
+          <Form isHorizontal className="pf-v5-u-py-lg">
             <Divider />
             <OIDCAuthentication create={false} />
           </Form>
@@ -505,7 +507,7 @@ export default function DetailSettings() {
         )}
       />
 
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs isBox defaultLocation={toTab("settings")}>
           <Tab
             id="settings"
@@ -514,7 +516,7 @@ export default function DetailSettings() {
           >
             <ScrollForm
               label={t("jumpToSection")}
-              className="pf-u-px-lg"
+              className="pf-v5-u-px-lg"
               sections={sections}
             />
           </Tab>
diff --git a/js/apps/admin-ui/src/identity-providers/add/DiscoverySettings.tsx b/js/apps/admin-ui/src/identity-providers/add/DiscoverySettings.tsx
index de8124e2e6..d67ce931ac 100644
--- a/js/apps/admin-ui/src/identity-providers/add/DiscoverySettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/DiscoverySettings.tsx
@@ -32,7 +32,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
   });
 
   return (
-    <div className="pf-c-form pf-m-horizontal">
+    <div className="pf-v5-c-form pf-m-horizontal">
       <TextControl
         name="config.authorizationUrl"
         label={t("authorizationUrl")}
diff --git a/js/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx b/js/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
index 844bd51b80..00c245065d 100644
--- a/js/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
@@ -3,10 +3,12 @@ import {
   Form,
   FormGroup,
   NumberInput,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx b/js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx
index 43365c0b3c..ee812472ec 100644
--- a/js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx
@@ -1,9 +1,9 @@
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/identity-providers/add/OpenIdConnectSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/OpenIdConnectSettings.tsx
index 31f8a5e514..ca1757d879 100644
--- a/js/apps/admin-ui/src/identity-providers/add/OpenIdConnectSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/OpenIdConnectSettings.tsx
@@ -1,7 +1,7 @@
 import { FormGroup, Title } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
@@ -63,8 +63,6 @@ export const OpenIdConnectSettings = () => {
                 fieldLabelId="importConfig"
               />
             }
-            validated={errors.discoveryError ? "error" : "default"}
-            helperTextInvalid={errors.discoveryError?.message as string}
           >
             <JsonFileUpload
               id="kc-import-config"
@@ -74,6 +72,11 @@ export const OpenIdConnectSettings = () => {
               validated={errors.discoveryError ? "error" : "default"}
               onChange={(value) => fileUpload(value)}
             />
+            {errors.discoveryError && (
+              <FormErrorText
+                message={errors.discoveryError.message as string}
+              />
+            )}
           </FormGroup>
         }
       >
diff --git a/js/apps/admin-ui/src/identity-providers/add/ReqAuthnConstraintsSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/ReqAuthnConstraintsSettings.tsx
index 4f5fb709bc..bc1d94e01c 100644
--- a/js/apps/admin-ui/src/identity-providers/add/ReqAuthnConstraintsSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/ReqAuthnConstraintsSettings.tsx
@@ -1,9 +1,9 @@
+import { FormGroup } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -35,7 +35,7 @@ export const ReqAuthnConstraints = () => {
               toggleId="comparison"
               required
               direction="up"
-              onToggle={(isExpanded) => setComparisonOpen(isExpanded)}
+              onToggle={(_event, isExpanded) => setComparisonOpen(isExpanded)}
               onSelect={(_, value) => {
                 field.onChange(value.toString());
                 setComparisonOpen(false);
diff --git a/js/apps/admin-ui/src/identity-providers/add/SamlConnectSettings.tsx b/js/apps/admin-ui/src/identity-providers/add/SamlConnectSettings.tsx
index 3111906b03..1ef9c2a5bb 100644
--- a/js/apps/admin-ui/src/identity-providers/add/SamlConnectSettings.tsx
+++ b/js/apps/admin-ui/src/identity-providers/add/SamlConnectSettings.tsx
@@ -3,7 +3,8 @@ import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client
 import { FormGroup, Title } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, TextControl } from "ui-shared";
+import { FormErrorText, HelpItem, TextControl } from "ui-shared";
+
 import { adminClient } from "../../admin-client";
 import { FileUploadForm } from "../../components/json-file-upload/FileUploadForm";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -100,8 +101,6 @@ export const SamlConnectSettings = () => {
                 fieldLabelId="importConfig"
               />
             }
-            validated={errors.discoveryError ? "error" : "default"}
-            helperTextInvalid={errors.discoveryError?.message}
           >
             <FileUploadForm
               id="kc-import-config"
@@ -111,6 +110,11 @@ export const SamlConnectSettings = () => {
               validated={errors.discoveryError ? "error" : "default"}
               onChange={(value) => fileUpload(value)}
             />
+            {errors.discoveryError && (
+              <FormErrorText
+                message={errors.discoveryError.message as string}
+              />
+            )}
           </FormGroup>
         }
       >
diff --git a/js/apps/admin-ui/src/identity-providers/add/discovery-settings.css b/js/apps/admin-ui/src/identity-providers/add/discovery-settings.css
index a7f7d43a25..82985246f9 100644
--- a/js/apps/admin-ui/src/identity-providers/add/discovery-settings.css
+++ b/js/apps/admin-ui/src/identity-providers/add/discovery-settings.css
@@ -1,5 +1,5 @@
-.keycloak__discovery-settings__metadata .pf-c-expandable-section__toggle {
-  margin-left: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth);
+.keycloak__discovery-settings__metadata .pf-v5-c-expandable-section__toggle {
+  margin-left: var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth);
 }
 
 input#kc-role {
@@ -8,5 +8,5 @@ input#kc-role {
 }
 
 h1.kc-add-mapper-title {
-  margin-left: calc(-1 * var(--pf-global--spacer--md));
+  margin-left: calc(-1 * var(--pf-v5-global--spacer--md));
 }
diff --git a/js/apps/admin-ui/src/identity-providers/add/saml-general-settings.css b/js/apps/admin-ui/src/identity-providers/add/saml-general-settings.css
index 514c0ee076..aea186e1bd 100644
--- a/js/apps/admin-ui/src/identity-providers/add/saml-general-settings.css
+++ b/js/apps/admin-ui/src/identity-providers/add/saml-general-settings.css
@@ -1,3 +1,3 @@
-.keycloak__identity-providers__saml_link > .pf-c-form__group-control {
-  padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+.keycloak__identity-providers__saml_link > .pf-v5-c-form__group-control {
+  padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/identity-providers/component/ClientIdSecret.tsx b/js/apps/admin-ui/src/identity-providers/component/ClientIdSecret.tsx
index 86105afd33..8b6d2af716 100644
--- a/js/apps/admin-ui/src/identity-providers/component/ClientIdSecret.tsx
+++ b/js/apps/admin-ui/src/identity-providers/component/ClientIdSecret.tsx
@@ -1,9 +1,5 @@
-import IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
-import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
-import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, PasswordControl } from "ui-shared";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import { PasswordControl, TextControl } from "ui-shared";
 
 export const ClientIdSecret = ({
   secretRequired = true,
@@ -14,34 +10,16 @@ export const ClientIdSecret = ({
 }) => {
   const { t } = useTranslation();
 
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<IdentityProviderRepresentation>();
-
   return (
     <>
-      <FormGroup
+      <TextControl
+        name="config.clientId"
         label={t("clientId")}
-        labelIcon={
-          <HelpItem helpText={t("clientIdHelp")} fieldLabelId="clientId" />
-        }
-        fieldId="kc-client-id"
-        isRequired
-        validated={
-          errors.config?.clientId
-            ? ValidatedOptions.error
-            : ValidatedOptions.default
-        }
-        helperTextInvalid={t("required")}
-      >
-        <KeycloakTextInput
-          isRequired
-          id="kc-client-id"
-          data-testid="clientId"
-          {...register("config.clientId", { required: true })}
-        />
-      </FormGroup>
+        labelIcon={t("clientIdHelp")}
+        rules={{
+          required: t("required"),
+        }}
+      />
       <PasswordControl
         name="config.clientSecret"
         label={t("clientSecret")}
diff --git a/js/apps/admin-ui/src/identity-providers/component/DiscoveryEndpointField.tsx b/js/apps/admin-ui/src/identity-providers/component/DiscoveryEndpointField.tsx
index 8474e42b7e..c228d80751 100644
--- a/js/apps/admin-ui/src/identity-providers/component/DiscoveryEndpointField.tsx
+++ b/js/apps/admin-ui/src/identity-providers/component/DiscoveryEndpointField.tsx
@@ -1,4 +1,4 @@
-import { FormGroup, Switch } from "@patternfly/react-core";
+import { FormGroup, Spinner, Switch } from "@patternfly/react-core";
 import debouncePromise from "p-debounce";
 import { ReactNode, useMemo, useState } from "react";
 import { useFormContext } from "react-hook-form";
@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { HelpItem, TextControl } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
-import environment from "../../environment";
 
 type DiscoveryEndpointFieldProps = {
   id: string;
@@ -75,7 +74,7 @@ export const DiscoveryEndpointField = ({
           label={t("on")}
           labelOff={t("off")}
           isChecked={discovery}
-          onChange={(checked) => {
+          onChange={(_event, checked) => {
             clearErrors("discoveryError");
             setDiscovery(checked);
           }}
@@ -108,11 +107,7 @@ export const DiscoveryEndpointField = ({
                 ? "default"
                 : "success"
           }
-          customIconUrl={
-            discovering
-              ? environment.resourceUrl + "/discovery-load-indicator.svg"
-              : ""
-          }
+          customIcon={discovering ? <Spinner isInline /> : undefined}
           rules={{
             required: t("required"),
             validate: (value: string) => discoverDebounced(value),
diff --git a/js/apps/admin-ui/src/identity-providers/component/DisplayOrder.tsx b/js/apps/admin-ui/src/identity-providers/component/DisplayOrder.tsx
index fd07fb1773..6d719badc0 100644
--- a/js/apps/admin-ui/src/identity-providers/component/DisplayOrder.tsx
+++ b/js/apps/admin-ui/src/identity-providers/component/DisplayOrder.tsx
@@ -31,7 +31,7 @@ export const DisplayOrder = () => {
             value={field.value}
             data-testid="displayOrder"
             min={0}
-            onChange={(value) => {
+            onChange={(_event, value) => {
               const num = Number(value);
               field.onChange(value === "" ? value : num < 0 ? 0 : num);
             }}
diff --git a/js/apps/admin-ui/src/identity-providers/component/SwitchField.tsx b/js/apps/admin-ui/src/identity-providers/component/SwitchField.tsx
index e0dbe7dcba..aa6c1f38fe 100644
--- a/js/apps/admin-ui/src/identity-providers/component/SwitchField.tsx
+++ b/js/apps/admin-ui/src/identity-providers/component/SwitchField.tsx
@@ -38,7 +38,7 @@ export const SwitchField = ({
                 ? field.value === "true"
                 : (field.value as boolean)
             }
-            onChange={(value) =>
+            onChange={(_event, value) =>
               field.onChange(fieldType === "string" ? "" + value : value)
             }
             isDisabled={isReadOnly}
diff --git a/js/apps/admin-ui/src/identity-providers/component/TextField.tsx b/js/apps/admin-ui/src/identity-providers/component/TextField.tsx
index 9d23dab36d..1acc53ad6c 100644
--- a/js/apps/admin-ui/src/identity-providers/component/TextField.tsx
+++ b/js/apps/admin-ui/src/identity-providers/component/TextField.tsx
@@ -1,16 +1,16 @@
+import { TextInput } from "@patternfly/react-core";
 import { useFormContext } from "react-hook-form";
 
 import { FieldProps, FormGroupField } from "./FormGroupField";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export const TextField = ({ label, field, isReadOnly = false }: FieldProps) => {
   const { register } = useFormContext();
   return (
     <FormGroupField label={label}>
-      <KeycloakTextInput
+      <TextInput
         id={label}
         data-testid={label}
-        isReadOnly={isReadOnly}
+        readOnly={isReadOnly}
         {...register(field)}
       />
     </FormGroupField>
diff --git a/js/apps/admin-ui/src/index.css b/js/apps/admin-ui/src/index.css
index b50f8c4283..a43eced1d3 100644
--- a/js/apps/admin-ui/src/index.css
+++ b/js/apps/admin-ui/src/index.css
@@ -4,7 +4,7 @@ img.keycloak__pageheader_brand {
 
 .keycloak__form {
   max-width: 1024px;
-  padding-bottom: var(--pf-global--spacer--4xl);
+  padding-bottom: var(--pf-v5-global--spacer--4xl);
 }
 
 input[type="checkbox"] {
@@ -16,17 +16,17 @@ input[type="checkbox"] {
 .keycloak__form_actions {
   position: fixed;
   bottom: 0px;
-  background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
-  padding-top: var(--pf-global--spacer--md);
-  padding-bottom: var(--pf-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--md);
+  background-color: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
+  padding-top: var(--pf-v5-global--spacer--md);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
+  padding-left: var(--pf-v5-global--spacer--md);
   width: 100%;
-  border-top: 1px solid var(--pf-global--BorderColor--100);
-  margin-left: calc(-1 * var(--pf-global--spacer--lg));
+  border-top: 1px solid var(--pf-v5-global--BorderColor--100);
+  margin-left: calc(-1 * var(--pf-v5-global--spacer--lg));
 }
 
 .keycloak__section_intro__help {
-  padding: var(--pf-global--spacer--md) 0 var(--pf-global--spacer--lg);
-  color: var(--pf-global--primary-color--100);
+  padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--lg);
+  color: var(--pf-v5-global--primary-color--100);
   width: fit-content;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/page-nav.css b/js/apps/admin-ui/src/page-nav.css
index bd9d20827c..0c3e8df4b3 100644
--- a/js/apps/admin-ui/src/page-nav.css
+++ b/js/apps/admin-ui/src/page-nav.css
@@ -1,5 +1,5 @@
 
 .keycloak__page_nav__nav {
-  --pf-c-page__sidebar--Transition: all 50ms cubic-bezier(.42, 0, .58, 1);
+  --pf-v5-c-page__sidebar--Transition: all 50ms cubic-bezier(.42, 0, .58, 1);
   overflow: inherit;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/page/Page.tsx b/js/apps/admin-ui/src/page/Page.tsx
index b58be17355..4cacf14da1 100644
--- a/js/apps/admin-ui/src/page/Page.tsx
+++ b/js/apps/admin-ui/src/page/Page.tsx
@@ -1,4 +1,5 @@
-import { ButtonVariant, DropdownItem } from "@patternfly/react-core";
+import { ButtonVariant } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { adminClient } from "../admin-client";
diff --git a/js/apps/admin-ui/src/page/PageList.tsx b/js/apps/admin-ui/src/page/PageList.tsx
index 056a1deece..190b395674 100644
--- a/js/apps/admin-ui/src/page/PageList.tsx
+++ b/js/apps/admin-ui/src/page/PageList.tsx
@@ -85,7 +85,7 @@ export default function PageList() {
   });
 
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <DeleteConfirm />
       <ViewHeader titleKey={page.id} subKey={page.helpText} divider={false} />
       <KeycloakDataTable
diff --git a/js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx b/js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx
index b5b3a24b5d..dee779025a 100644
--- a/js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx
+++ b/js/apps/admin-ui/src/realm-roles/RealmRoleTabs.tsx
@@ -3,11 +3,11 @@ import type RoleRepresentation from "@keycloak/keycloak-admin-client/lib/defs/ro
 import {
   AlertVariant,
   ButtonVariant,
-  DropdownItem,
   PageSection,
   Tab,
   TabTitleText,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import {
   FormProvider,
@@ -337,7 +337,7 @@ export default function RealmRoleTabs() {
         dropdownItems={dropdownItems}
         divider={false}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <FormProvider {...form}>
           <RoutableTabs isBox mountOnEnter defaultLocation={toTab("details")}>
             <Tab
diff --git a/js/apps/admin-ui/src/realm-settings/ClientProfileForm.tsx b/js/apps/admin-ui/src/realm-settings/ClientProfileForm.tsx
index c5d3bb25e1..bf67f0bcec 100644
--- a/js/apps/admin-ui/src/realm-settings/ClientProfileForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/ClientProfileForm.tsx
@@ -11,7 +11,6 @@ import {
   DataListItemCells,
   DataListItemRow,
   Divider,
-  DropdownItem,
   Flex,
   FlexItem,
   Label,
@@ -19,6 +18,7 @@ import {
   Text,
   TextVariants,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
 import { Fragment, useMemo, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
@@ -217,7 +217,7 @@ export default function ClientProfileForm() {
       />
       <PageSection variant="light">
         <FormProvider {...form}>
-          <FormAccess isHorizontal role="view-realm" className="pf-u-mt-lg">
+          <FormAccess isHorizontal role="view-realm" className="pf-v5-u-mt-lg">
             <TextControl
               name="name"
               label={t("newClientProfileName")}
diff --git a/js/apps/admin-ui/src/realm-settings/DefaultGroupsTab.tsx b/js/apps/admin-ui/src/realm-settings/DefaultGroupsTab.tsx
index eb1c5fcdad..c6c2ff33fb 100644
--- a/js/apps/admin-ui/src/realm-settings/DefaultGroupsTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/DefaultGroupsTab.tsx
@@ -3,14 +3,16 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Popover,
   Text,
   TextContent,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from "@patternfly/react-core/deprecated";
 import { QuestionCircleIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
@@ -141,7 +143,7 @@ export const DefaultsGroupsTab = () => {
           <TextContent
             className="keycloak__section_intro__help"
             style={{
-              paddingLeft: "var(--pf-c-page__main-section--PaddingLeft)",
+              paddingLeft: "var(--pf-v5-c-page__main-section--PaddingLeft)",
             }}
           >
             <Text>
@@ -222,8 +224,10 @@ export const DefaultsGroupsTab = () => {
               <Trans i18nKey="noDefaultGroupsInstructions">
                 {" "}
                 <Link
-                  className="pf-u-font-weight-light"
+                  className="pf-v5-u-font-weight-light"
                   to={toUserFederation({ realm })}
+                  role="navigation"
+                  aria-label={t("identityBrokeringLink")}
                 />
                 Add groups...
               </Trans>
diff --git a/js/apps/admin-ui/src/realm-settings/EmailTab.tsx b/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
index 832131ad80..9cf2089a81 100644
--- a/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/EmailTab.tsx
@@ -99,7 +99,7 @@ export const RealmSettingsEmailTab = ({
           <FormAccess
             isHorizontal
             role="manage-realm"
-            className="pf-u-mt-lg"
+            className="pf-v5-u-mt-lg"
             onSubmit={handleSubmit(save)}
           >
             <TextControl
@@ -154,7 +154,7 @@ export const RealmSettingsEmailTab = ({
           <FormAccess
             isHorizontal
             role="manage-realm"
-            className="pf-u-mt-lg"
+            className="pf-v5-u-mt-lg"
             onSubmit={handleSubmit(save)}
           >
             <TextControl
@@ -180,7 +180,7 @@ export const RealmSettingsEmailTab = ({
                     data-testid="enable-ssl"
                     label={t("enableSSL")}
                     isChecked={field.value === "true"}
-                    onChange={(value) => field.onChange("" + value)}
+                    onChange={(_event, value) => field.onChange("" + value)}
                   />
                 )}
               />
@@ -194,7 +194,7 @@ export const RealmSettingsEmailTab = ({
                     data-testid="enable-start-tls"
                     label={t("enableStartTLS")}
                     isChecked={field.value === "true"}
-                    onChange={(value) => field.onChange("" + value)}
+                    onChange={(_event, value) => field.onChange("" + value)}
                   />
                 )}
               />
diff --git a/js/apps/admin-ui/src/realm-settings/ExecutorForm.tsx b/js/apps/admin-ui/src/realm-settings/ExecutorForm.tsx
index 41794cd4e2..4d500cf2aa 100644
--- a/js/apps/admin-ui/src/realm-settings/ExecutorForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/ExecutorForm.tsx
@@ -7,10 +7,12 @@ import {
   Button,
   FormGroup,
   PageSection,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -158,7 +160,7 @@ export default function ExecutorForm() {
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           isReadOnly={!!globalProfile}
         >
           <FormGroup
@@ -186,7 +188,9 @@ export default function ExecutorForm() {
                 <Select
                   toggleId="kc-executor"
                   placeholderText="Select an executor"
-                  onToggle={(isOpen) => setSelectExecutorTypeOpen(isOpen)}
+                  onToggle={(_event, isOpen) =>
+                    setSelectExecutorTypeOpen(isOpen)
+                  }
                   onSelect={(_, value) => {
                     reset({ ...defaultValues, executor: value.toString() });
                     const selectedExecutor = executorTypes?.filter(
diff --git a/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx b/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
index 79475c49e6..e90f84548c 100644
--- a/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
@@ -15,7 +15,7 @@ import {
 import { useEffect, useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, SelectControl, TextControl } from "ui-shared";
+import { FormErrorText, HelpItem, SelectControl, TextControl } from "ui-shared";
 
 import { adminClient } from "../admin-client";
 import { DefaultSwitchControl } from "../components/SwitchControl";
@@ -135,13 +135,7 @@ function RealmSettingsGeneralTabForm({
           className="pf-u-mt-lg"
           onSubmit={onSubmit}
         >
-          <FormGroup
-            label={t("realmId")}
-            fieldId="kc-realm-id"
-            isRequired
-            validated={errors.realm ? "error" : "default"}
-            helperTextInvalid={errors.realm?.message}
-          >
+          <FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
             <Controller
               name="realm"
               control={control}
@@ -158,6 +152,12 @@ function RealmSettingsGeneralTabForm({
                 </ClipboardCopy>
               )}
             />
+            {errors.realm && (
+              <FormErrorText
+                data-testid="realm-id-error"
+                message={errors.realm.message as string}
+              />
+            )}
           </FormGroup>
           <TextControl name="displayName" label={t("displayName")} />
           <TextControl name="displayNameHtml" label={t("htmlDisplayName")} />
diff --git a/js/apps/admin-ui/src/realm-settings/LoginTab.tsx b/js/apps/admin-ui/src/realm-settings/LoginTab.tsx
index 7acc8b1cf5..45d31152e2 100644
--- a/js/apps/admin-ui/src/realm-settings/LoginTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/LoginTab.tsx
@@ -69,7 +69,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.registrationAllowed}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue({ registrationAllowed: value });
               }}
               aria-label={t("registrationAllowed")}
@@ -94,7 +94,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.resetPasswordAllowed}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue({ resetPasswordAllowed: value });
               }}
               aria-label={t("resetPasswordAllowed")}
@@ -118,7 +118,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.rememberMe}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue({ rememberMe: value });
               }}
               aria-label={t("rememberMe")}
@@ -146,7 +146,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.registrationEmailAsUsername}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue([
                   {
                     registrationEmailAsUsername: value,
@@ -177,7 +177,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.loginWithEmailAllowed}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue([
                   {
                     loginWithEmailAllowed: value,
@@ -205,7 +205,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.duplicateEmailsAllowed}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue({
                   duplicateEmailsAllowed: value,
                 });
@@ -235,7 +235,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.verifyEmail}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue({ verifyEmail: value });
               }}
               aria-label={t("verifyEmail")}
@@ -266,7 +266,7 @@ export const RealmSettingsLoginTab = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={realm.editUsernameAllowed}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 updateSwitchValue({ editUsernameAllowed: value });
               }}
               aria-label={t("editUsernameAllowed")}
diff --git a/js/apps/admin-ui/src/realm-settings/NewClientPolicyCondition.tsx b/js/apps/admin-ui/src/realm-settings/NewClientPolicyCondition.tsx
index 0c0338beac..56fd35908c 100644
--- a/js/apps/admin-ui/src/realm-settings/NewClientPolicyCondition.tsx
+++ b/js/apps/admin-ui/src/realm-settings/NewClientPolicyCondition.tsx
@@ -8,10 +8,12 @@ import {
   Button,
   FormGroup,
   PageSection,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { camelCase } from "lodash-es";
 import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -176,7 +178,7 @@ export default function NewClientPolicyCondition() {
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={form.handleSubmit(save)}
         >
           <FormGroup
@@ -204,7 +206,7 @@ export default function NewClientPolicyCondition() {
                   data-testid="conditionType-select"
                   toggleId="provider"
                   isDisabled={!!conditionName}
-                  onToggle={(toggle) => setOpenConditionType(toggle)}
+                  onToggle={(_event, toggle) => setOpenConditionType(toggle)}
                   onSelect={(_, value) => {
                     field.onChange(value);
                     setConditionProperties(
diff --git a/js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx b/js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx
index 91c10e6154..eb8d3a558e 100644
--- a/js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/NewClientPolicyForm.tsx
@@ -11,29 +11,26 @@ import {
   DataListItemCells,
   DataListItemRow,
   Divider,
-  DropdownItem,
   Flex,
   FlexItem,
   FormGroup,
   PageSection,
   Text,
   TextVariants,
-  ValidatedOptions,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { HelpItem } from "ui-shared";
+import { HelpItem, KeycloakTextArea, TextControl } from "ui-shared";
 
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { FormAccess } from "../components/form/FormAccess";
 import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
-import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
@@ -455,292 +452,282 @@ export default function NewClientPolicyForm() {
           onSubmit={handleSubmit(save)}
           isHorizontal
           role="view-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
         >
-          <FormGroup
-            label={t("name")}
-            fieldId="kc-client-profile-name"
-            isRequired
-            helperTextInvalid={form.formState.errors.name?.message}
-            validated={
-              form.formState.errors.name
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
-          >
-            <KeycloakTextInput
-              id="kc-client-profile-name"
-              data-testid="client-policy-name"
-              validated={
-                form.formState.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-              {...form.register("name", {
+          <FormProvider {...form}>
+            <TextControl
+              name="name"
+              label={t("name")}
+              rules={{
                 required: { value: true, message: t("required") },
                 validate: (value) =>
                   policies?.some((policy) => policy.name === value)
                     ? t("createClientProfileNameHelperText").toString()
                     : true,
-              })}
+              }}
             />
-          </FormGroup>
-          <FormGroup label={t("description")} fieldId="kc-description">
-            <KeycloakTextArea
-              aria-label={t("description")}
-              id="kc-client-policy-description"
-              data-testid="client-policy-description"
-              {...form.register("description")}
-            />
-          </FormGroup>
-          <ActionGroup>
-            <Button
-              variant="primary"
-              type="submit"
-              data-testid="saveCreatePolicy"
-              isDisabled={!form.formState.isValid}
-            >
-              {t("save")}
-            </Button>
-            <Button
-              id="cancelCreatePolicy"
-              variant="link"
-              onClick={() =>
-                showAddConditionsAndProfilesForm || policyName
-                  ? reset()
-                  : navigate(
-                      toClientPolicies({
-                        realm,
-                        tab: "policies",
-                      }),
-                    )
-              }
-              data-testid="cancelCreatePolicy"
-            >
-              {showAddConditionsAndProfilesForm ? t("reload") : t("cancel")}
-            </Button>
-          </ActionGroup>
-          {(showAddConditionsAndProfilesForm || form.formState.isSubmitted) && (
-            <>
-              <Flex>
-                <FlexItem>
-                  <Text className="kc-conditions" component={TextVariants.h1}>
-                    {t("conditions")}
-                    <HelpItem
-                      helpText={t("conditionsHelp")}
-                      fieldLabelId="conditions"
-                    />
-                  </Text>
-                </FlexItem>
-                <FlexItem align={{ default: "alignRight" }}>
-                  <Button
-                    id="addCondition"
-                    component={(props) => (
-                      <Link
-                        {...props}
-                        to={toNewClientPolicyCondition({
+            <FormGroup label={t("description")} fieldId="kc-description">
+              <KeycloakTextArea
+                aria-label={t("description")}
+                id="kc-client-policy-description"
+                data-testid="client-policy-description"
+                {...form.register("description")}
+              />
+            </FormGroup>
+            <ActionGroup>
+              <Button
+                variant="primary"
+                type="submit"
+                data-testid="saveCreatePolicy"
+                isDisabled={!form.formState.isValid}
+              >
+                {t("save")}
+              </Button>
+              <Button
+                id="cancelCreatePolicy"
+                variant="link"
+                onClick={() =>
+                  showAddConditionsAndProfilesForm || policyName
+                    ? reset()
+                    : navigate(
+                        toClientPolicies({
                           realm,
-                          policyName: policyName!,
-                        })}
-                      ></Link>
-                    )}
-                    variant="link"
-                    className="kc-addCondition"
-                    data-testid="addCondition"
-                    icon={<PlusCircleIcon />}
-                  >
-                    {t("addCondition")}
-                  </Button>
-                </FlexItem>
-              </Flex>
-              {policyConditions.length > 0 ? (
-                <DataList aria-label={t("conditions")} isCompact>
-                  {policyConditions.map((condition, idx) => (
-                    <DataListItem
-                      aria-labelledby="conditions-list-item"
-                      key={`list-item-${idx}`}
-                      id={condition.condition}
-                      data-testid="conditions-list-item"
+                          tab: "policies",
+                        }),
+                      )
+                }
+                data-testid="cancelCreatePolicy"
+              >
+                {showAddConditionsAndProfilesForm ? t("reload") : t("cancel")}
+              </Button>
+            </ActionGroup>
+            {(showAddConditionsAndProfilesForm ||
+              form.formState.isSubmitted) && (
+              <>
+                <Flex>
+                  <FlexItem>
+                    <Text className="kc-conditions" component={TextVariants.h1}>
+                      {t("conditions")}
+                      <HelpItem
+                        helpText={t("conditionsHelp")}
+                        fieldLabelId="conditions"
+                      />
+                    </Text>
+                  </FlexItem>
+                  <FlexItem align={{ default: "alignRight" }}>
+                    <Button
+                      id="addCondition"
+                      component={(props) => (
+                        <Link
+                          {...props}
+                          to={toNewClientPolicyCondition({
+                            realm,
+                            policyName: policyName!,
+                          })}
+                        ></Link>
+                      )}
+                      variant="link"
+                      className="kc-addCondition"
+                      data-testid="addCondition"
+                      icon={<PlusCircleIcon />}
                     >
-                      <DataListItemRow data-testid="conditions-list-row">
-                        <DataListItemCells
-                          dataListCells={[
-                            <DataListCell
-                              key={`name-${idx}`}
-                              data-testid="condition-type"
-                            >
-                              {Object.keys(condition.configuration!).length !==
-                              0 ? (
-                                <Link
-                                  key={condition.condition}
-                                  data-testid={`${condition.condition}-condition-link`}
-                                  to={toEditClientPolicyCondition({
-                                    realm,
-                                    conditionName: condition.condition!,
-                                    policyName: policyName,
-                                  })}
-                                  className="kc-condition-link"
-                                >
-                                  {condition.condition}
-                                </Link>
-                              ) : (
-                                condition.condition
-                              )}
-                              {conditionTypes?.map(
-                                (type) =>
-                                  type.id === condition.condition && (
+                      {t("addCondition")}
+                    </Button>
+                  </FlexItem>
+                </Flex>
+                {policyConditions.length > 0 ? (
+                  <DataList aria-label={t("conditions")} isCompact>
+                    {policyConditions.map((condition, idx) => (
+                      <DataListItem
+                        aria-labelledby="conditions-list-item"
+                        key={`list-item-${idx}`}
+                        id={condition.condition}
+                        data-testid="conditions-list-item"
+                      >
+                        <DataListItemRow data-testid="conditions-list-row">
+                          <DataListItemCells
+                            dataListCells={[
+                              <DataListCell
+                                key={`name-${idx}`}
+                                data-testid="condition-type"
+                              >
+                                {Object.keys(condition.configuration!)
+                                  .length !== 0 ? (
+                                  <Link
+                                    key={condition.condition}
+                                    data-testid={`${condition.condition}-condition-link`}
+                                    to={toEditClientPolicyCondition({
+                                      realm,
+                                      conditionName: condition.condition!,
+                                      policyName: policyName,
+                                    })}
+                                    className="kc-condition-link"
+                                  >
+                                    {condition.condition}
+                                  </Link>
+                                ) : (
+                                  condition.condition
+                                )}
+                                {conditionTypes?.map(
+                                  (type) =>
+                                    type.id === condition.condition && (
+                                      <>
+                                        <HelpItem
+                                          helpText={type.helpText}
+                                          fieldLabelId={condition.condition}
+                                        />
+                                        <Button
+                                          variant="link"
+                                          aria-label="remove-condition"
+                                          isInline
+                                          icon={
+                                            <TrashIcon
+                                              className="kc-conditionType-trash-icon"
+                                              data-testid={`delete-${condition.condition}-condition`}
+                                              onClick={() => {
+                                                toggleDeleteConditionDialog();
+                                                setConditionToDelete({
+                                                  idx: idx,
+                                                  name: type.id!,
+                                                });
+                                              }}
+                                            />
+                                          }
+                                        ></Button>
+                                      </>
+                                    ),
+                                )}
+                              </DataListCell>,
+                            ]}
+                          />
+                        </DataListItemRow>
+                      </DataListItem>
+                    ))}
+                  </DataList>
+                ) : (
+                  <>
+                    <Divider />
+                    <Text
+                      className="kc-emptyConditions"
+                      component={TextVariants.h2}
+                    >
+                      {t("emptyConditions")}
+                    </Text>
+                  </>
+                )}
+              </>
+            )}
+            {(showAddConditionsAndProfilesForm ||
+              form.formState.isSubmitted) && (
+              <>
+                <Flex>
+                  <FlexItem>
+                    <Text
+                      className="kc-client-profiles"
+                      component={TextVariants.h1}
+                    >
+                      {t("clientProfiles")}
+                      <HelpItem
+                        helpText={t("clientProfilesHelp")}
+                        fieldLabelId="clientProfiles"
+                      />
+                    </Text>
+                  </FlexItem>
+                  <FlexItem align={{ default: "alignRight" }}>
+                    <Button
+                      id="addClientProfile"
+                      variant="link"
+                      className="kc-addClientProfile"
+                      data-testid="addClientProfile"
+                      icon={<PlusCircleIcon />}
+                      onClick={toggleModal}
+                    >
+                      {t("addClientProfile")}
+                    </Button>
+                  </FlexItem>
+                </Flex>
+                {policyProfiles.length > 0 ? (
+                  <DataList aria-label={t("profiles")} isCompact>
+                    {policyProfiles.map((profile, idx) => (
+                      <DataListItem
+                        aria-labelledby={`${profile}-profile-list-item`}
+                        key={profile}
+                        id={`${profile}-profile-list-item`}
+                        data-testid={"profile-list-item"}
+                      >
+                        <DataListItemRow data-testid="profile-list-row">
+                          <DataListItemCells
+                            dataListCells={[
+                              <DataListCell
+                                key="name"
+                                data-testid="profile-name"
+                              >
+                                {profile && (
+                                  <Link
+                                    key={profile}
+                                    data-testid="profile-name-link"
+                                    to={toClientProfile({
+                                      realm,
+                                      profileName: profile,
+                                    })}
+                                    className="kc-profile-link"
+                                  >
+                                    {profile}
+                                  </Link>
+                                )}
+                                {policyProfiles
+                                  .filter((type) => type === profile)
+                                  .map((type) => (
                                     <>
                                       <HelpItem
-                                        helpText={type.helpText}
-                                        fieldLabelId={condition.condition}
+                                        helpText={
+                                          clientProfiles.find(
+                                            (profile) => type === profile.name,
+                                          )?.description
+                                        }
+                                        fieldLabelId={profile}
                                       />
                                       <Button
                                         variant="link"
-                                        aria-label="remove-condition"
+                                        aria-label="remove-client-profile"
                                         isInline
                                         icon={
                                           <TrashIcon
                                             className="kc-conditionType-trash-icon"
-                                            data-testid={`delete-${condition.condition}-condition`}
+                                            data-testid="deleteClientProfileDropdown"
                                             onClick={() => {
-                                              toggleDeleteConditionDialog();
-                                              setConditionToDelete({
+                                              toggleDeleteProfileDialog();
+                                              setProfileToDelete({
                                                 idx: idx,
-                                                name: type.id!,
+                                                name: type!,
                                               });
                                             }}
                                           />
                                         }
                                       ></Button>
                                     </>
-                                  ),
-                              )}
-                            </DataListCell>,
-                          ]}
-                        />
-                      </DataListItemRow>
-                    </DataListItem>
-                  ))}
-                </DataList>
-              ) : (
-                <>
-                  <Divider />
-                  <Text
-                    className="kc-emptyConditions"
-                    component={TextVariants.h2}
-                  >
-                    {t("emptyConditions")}
-                  </Text>
-                </>
-              )}
-            </>
-          )}
-          {(showAddConditionsAndProfilesForm || form.formState.isSubmitted) && (
-            <>
-              <Flex>
-                <FlexItem>
-                  <Text
-                    className="kc-client-profiles"
-                    component={TextVariants.h1}
-                  >
-                    {t("clientProfiles")}
-                    <HelpItem
-                      helpText={t("clientProfilesHelp")}
-                      fieldLabelId="clientProfiles"
-                    />
-                  </Text>
-                </FlexItem>
-                <FlexItem align={{ default: "alignRight" }}>
-                  <Button
-                    id="addClientProfile"
-                    variant="link"
-                    className="kc-addClientProfile"
-                    data-testid="addClientProfile"
-                    icon={<PlusCircleIcon />}
-                    onClick={toggleModal}
-                  >
-                    {t("addClientProfile")}
-                  </Button>
-                </FlexItem>
-              </Flex>
-              {policyProfiles.length > 0 ? (
-                <DataList aria-label={t("profiles")} isCompact>
-                  {policyProfiles.map((profile, idx) => (
-                    <DataListItem
-                      aria-labelledby={`${profile}-profile-list-item`}
-                      key={profile}
-                      id={`${profile}-profile-list-item`}
-                      data-testid={"profile-list-item"}
+                                  ))}
+                              </DataListCell>,
+                            ]}
+                          />
+                        </DataListItemRow>
+                      </DataListItem>
+                    ))}
+                  </DataList>
+                ) : (
+                  <>
+                    <Divider />
+                    <Text
+                      className="kc-emptyClientProfiles"
+                      component={TextVariants.h2}
                     >
-                      <DataListItemRow data-testid="profile-list-row">
-                        <DataListItemCells
-                          dataListCells={[
-                            <DataListCell key="name" data-testid="profile-name">
-                              {profile && (
-                                <Link
-                                  key={profile}
-                                  data-testid="profile-name-link"
-                                  to={toClientProfile({
-                                    realm,
-                                    profileName: profile,
-                                  })}
-                                  className="kc-profile-link"
-                                >
-                                  {profile}
-                                </Link>
-                              )}
-                              {policyProfiles
-                                .filter((type) => type === profile)
-                                .map((type) => (
-                                  <>
-                                    <HelpItem
-                                      helpText={
-                                        clientProfiles.find(
-                                          (profile) => type === profile.name,
-                                        )?.description
-                                      }
-                                      fieldLabelId={profile}
-                                    />
-                                    <Button
-                                      variant="link"
-                                      aria-label="remove-client-profile"
-                                      isInline
-                                      icon={
-                                        <TrashIcon
-                                          className="kc-conditionType-trash-icon"
-                                          data-testid="deleteClientProfileDropdown"
-                                          onClick={() => {
-                                            toggleDeleteProfileDialog();
-                                            setProfileToDelete({
-                                              idx: idx,
-                                              name: type!,
-                                            });
-                                          }}
-                                        />
-                                      }
-                                    ></Button>
-                                  </>
-                                ))}
-                            </DataListCell>,
-                          ]}
-                        />
-                      </DataListItemRow>
-                    </DataListItem>
-                  ))}
-                </DataList>
-              ) : (
-                <>
-                  <Divider />
-                  <Text
-                    className="kc-emptyClientProfiles"
-                    component={TextVariants.h2}
-                  >
-                    {t("emptyProfiles")}
-                  </Text>
-                </>
-              )}
-            </>
-          )}
+                      {t("emptyProfiles")}
+                    </Text>
+                  </>
+                )}
+              </>
+            )}
+          </FormProvider>
         </FormAccess>
       </PageSection>
     </>
diff --git a/js/apps/admin-ui/src/realm-settings/PartialExport.tsx b/js/apps/admin-ui/src/realm-settings/PartialExport.tsx
index baa98b7e3a..439d6ffca9 100644
--- a/js/apps/admin-ui/src/realm-settings/PartialExport.tsx
+++ b/js/apps/admin-ui/src/realm-settings/PartialExport.tsx
@@ -108,7 +108,7 @@ export const PartialExportDialog = ({
             id="include-groups-and-roles-check"
             data-testid="include-groups-and-roles-check"
             isChecked={exportGroupsAndRoles}
-            onChange={setExportGroupsAndRoles}
+            onChange={(_event, val) => setExportGroupsAndRoles(val)}
             label={t("on")}
             labelOff={t("off")}
             aria-label={t("includeGroupsAndRoles")}
@@ -122,7 +122,7 @@ export const PartialExportDialog = ({
           <Switch
             id="include-clients-check"
             data-testid="include-clients-check"
-            onChange={setExportClients}
+            onChange={(_event, val) => setExportClients(val)}
             isChecked={exportClients}
             label={t("on")}
             labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/realm-settings/PartialImport.tsx b/js/apps/admin-ui/src/realm-settings/PartialImport.tsx
index 6e329dcf91..3e7e02ebc0 100644
--- a/js/apps/admin-ui/src/realm-settings/PartialImport.tsx
+++ b/js/apps/admin-ui/src/realm-settings/PartialImport.tsx
@@ -19,14 +19,16 @@ import {
   Label,
   Modal,
   ModalVariant,
-  Select,
-  SelectOption,
-  SelectOptionObject,
   Stack,
   StackItem,
   Text,
   TextContent,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectOptionObject,
+} from "@patternfly/react-core/deprecated";
 import {
   ChangeEvent,
   FormEvent,
@@ -231,7 +233,9 @@ export const PartialImportDialog = (props: PartialImportProps) => {
                   aria-labelledby={`${resource}-checkbox`}
                   name={resource}
                   isChecked={resourcesToImport[resource]}
-                  onChange={handleResourceCheckBox}
+                  onChange={(event, checked: boolean) =>
+                    handleResourceCheckBox(checked, event)
+                  }
                   data-testid={resource + "-checkbox"}
                 />
               </DataListCell>,
diff --git a/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx b/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx
index b1bd6f9c9a..2b701ea832 100644
--- a/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/PoliciesTab.tsx
@@ -122,7 +122,7 @@ export const PoliciesTab = () => {
               label={t("enabled")}
               labelOff={t("disabled")}
               isChecked={field.value}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 if (!value) {
                   toggleDisableDialog();
                 } else {
@@ -206,7 +206,7 @@ export const PoliciesTab = () => {
               label={t("policiesConfigTypes.formView")}
               id="formView-policiesView"
               data-testid="formView-policiesView"
-              className="kc-form-radio-btn pf-u-mr-sm pf-u-ml-sm"
+              className="kc-form-radio-btn pf-v5-u-mr-sm pf-v5-u-ml-sm"
             />
           </FlexItem>
           <FlexItem>
@@ -278,7 +278,7 @@ export const PoliciesTab = () => {
         />
       ) : (
         <>
-          <div className="pf-u-mt-md pf-u-ml-lg">
+          <div className="pf-v5-u-mt-md pf-v5-u-ml-lg">
             <CodeEditor
               isLineNumbersVisible
               isLanguageLabelVisible
@@ -289,10 +289,10 @@ export const PoliciesTab = () => {
               onChange={setCode}
             />
           </div>
-          <div className="pf-u-mt-md">
+          <div className="pf-v5-u-mt-md">
             <Button
               variant={ButtonVariant.primary}
-              className="pf-u-mr-md pf-u-ml-lg"
+              className="pf-v5-u-mr-md pf-v5-u-ml-lg"
               data-testid="jsonEditor-policies-saveBtn"
               onClick={save}
             >
diff --git a/js/apps/admin-ui/src/realm-settings/ProfilesTab.tsx b/js/apps/admin-ui/src/realm-settings/ProfilesTab.tsx
index 7684ed3763..90176a8d5a 100644
--- a/js/apps/admin-ui/src/realm-settings/ProfilesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/ProfilesTab.tsx
@@ -179,7 +179,7 @@ export default function ProfilesTab() {
               onChange={() => setShow(false)}
               label={t("profilesConfigTypes.formView")}
               id="formView-profilesView"
-              className="kc-form-radio-btn pf-u-mr-sm pf-u-ml-sm"
+              className="kc-form-radio-btn pf-v5-u-mr-sm pf-v5-u-ml-sm"
               data-testid="formView-profilesView"
             />
           </FlexItem>
@@ -249,7 +249,7 @@ export default function ProfilesTab() {
         />
       ) : (
         <FormGroup fieldId={"jsonEditor"}>
-          <div className="pf-u-mt-md pf-u-ml-lg">
+          <div className="pf-v5-u-mt-md pf-v5-u-ml-lg">
             <CodeEditor
               isLineNumbersVisible
               isLanguageLabelVisible
@@ -263,10 +263,10 @@ export default function ProfilesTab() {
             />
           </div>
           <ActionGroup>
-            <div className="pf-u-mt-md">
+            <div className="pf-v5-u-mt-md">
               <Button
                 variant={ButtonVariant.primary}
-                className="pf-u-mr-md pf-u-ml-lg"
+                className="pf-v5-u-mr-md pf-v5-u-ml-lg"
                 onClick={save}
                 data-testid="jsonEditor-saveBtn"
               >
diff --git a/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx b/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
index a7a9faa1b4..f9df89fd17 100644
--- a/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
+++ b/js/apps/admin-ui/src/realm-settings/RealmSettingsTabs.tsx
@@ -2,13 +2,15 @@ import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/r
 import {
   AlertVariant,
   ButtonVariant,
-  DropdownItem,
-  DropdownSeparator,
   PageSection,
   Tab,
   TabTitleText,
   Tooltip,
 } from "@patternfly/react-core";
+import {
+  DropdownItem,
+  DropdownSeparator,
+} from "@patternfly/react-core/deprecated";
 import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -342,7 +344,7 @@ export const RealmSettingsTabs = ({
           />
         )}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           isBox
           mountOnEnter
diff --git a/js/apps/admin-ui/src/realm-settings/SessionsTab.tsx b/js/apps/admin-ui/src/realm-settings/SessionsTab.tsx
index ab4e01e43f..7b73917669 100644
--- a/js/apps/admin-ui/src/realm-settings/SessionsTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/SessionsTab.tsx
@@ -161,7 +161,7 @@ export const RealmSettingsSessionsTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={handleSubmit(save)}
         >
           <FormGroup
@@ -222,7 +222,7 @@ export const RealmSettingsSessionsTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={handleSubmit(save)}
         >
           <FormGroup
@@ -315,7 +315,7 @@ export const RealmSettingsSessionsTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={handleSubmit(save)}
         >
           <FormGroup
diff --git a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
index 01965f7991..1c706953d1 100644
--- a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
@@ -4,10 +4,12 @@ import {
   Button,
   FormGroup,
   PageSection,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -46,7 +48,7 @@ export const RealmSettingsThemesTab = ({
       <FormAccess
         isHorizontal
         role="manage-realm"
-        className="pf-u-mt-lg"
+        className="pf-v5-u-mt-lg"
         onSubmit={handleSubmit(save)}
       >
         <FormGroup
diff --git a/js/apps/admin-ui/src/realm-settings/TokensTab.tsx b/js/apps/admin-ui/src/realm-settings/TokensTab.tsx
index 14ce4d844e..7cf20f1cb8 100644
--- a/js/apps/admin-ui/src/realm-settings/TokensTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/TokensTab.tsx
@@ -3,21 +3,27 @@ import {
   ActionGroup,
   Button,
   FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
   NumberInput,
   PageSection,
+  Switch,
+  Text,
+  TextInput,
+  TextVariants,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
-  Text,
-  TextVariants,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useEffect, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormPanel, HelpItem } from "ui-shared";
+
 import { FormAccess } from "../components/form/FormAccess";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import {
   TimeSelector,
   toHumanFormat,
@@ -194,7 +200,7 @@ export const RealmSettingsTokensTab = ({
                   />
                 }
               >
-                <KeycloakTextInput
+                <TextInput
                   id="shortVerificationUri"
                   placeholder={t("shortVerificationUri")}
                   {...form.register("attributes.shortVerificationUri")}
@@ -236,7 +242,7 @@ export const RealmSettingsTokensTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={form.handleSubmit(save)}
         >
           <FormGroup
@@ -308,15 +314,12 @@ export const RealmSettingsTokensTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={form.handleSubmit(save)}
         >
           <FormGroup
             label={t("accessTokenLifespan")}
             fieldId="accessTokenLifespan"
-            helperText={t("recommendedSsoTimeout", {
-              time: toHumanFormat(ssoSessionIdleTimeout!, whoAmI.getLocale()),
-            })}
             labelIcon={
               <HelpItem
                 helpText={t("accessTokenLifespanHelp")}
@@ -343,6 +346,18 @@ export const RealmSettingsTokensTab = ({
                 />
               )}
             />
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem>
+                  {t("recommendedSsoTimeout", {
+                    time: toHumanFormat(
+                      ssoSessionIdleTimeout!,
+                      whoAmI.getLocale(),
+                    ),
+                  })}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
           </FormGroup>
 
           <FormGroup
@@ -431,7 +446,7 @@ export const RealmSettingsTokensTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg"
+          className="pf-v5-u-mt-lg"
           onSubmit={form.handleSubmit(save)}
         >
           <FormGroup
diff --git a/js/apps/admin-ui/src/realm-settings/event-config/EventConfigForm.tsx b/js/apps/admin-ui/src/realm-settings/event-config/EventConfigForm.tsx
index fadb94cd8c..a8463b7942 100644
--- a/js/apps/admin-ui/src/realm-settings/event-config/EventConfigForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/event-config/EventConfigForm.tsx
@@ -69,7 +69,7 @@ export const EventConfigForm = ({
               label={t("on")}
               labelOff={t("off")}
               isChecked={field.value}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 if (!value) {
                   toggleDisableDialog();
                 } else {
diff --git a/js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx b/js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx
index 745b061983..4341a7411b 100644
--- a/js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx
@@ -1,4 +1,5 @@
-import { ActionGroup, Button, SelectVariant } from "@patternfly/react-core";
+import { ActionGroup, Button } from "@patternfly/react-core";
+import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { SelectControl } from "ui-shared";
diff --git a/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx b/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
index 77ef851d27..5a42726257 100644
--- a/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
@@ -1,13 +1,11 @@
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import type { KeyMetadataRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/keyMetadataRepresentation";
+import { Button, ButtonVariant, PageSection } from "@patternfly/react-core";
 import {
-  Button,
-  ButtonVariant,
-  PageSection,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { FilterIcon } from "@patternfly/react-icons";
 import { cellWidth } from "@patternfly/react-table";
 import { useState } from "react";
diff --git a/js/apps/admin-ui/src/realm-settings/keys/KeysProvidersTab.tsx b/js/apps/admin-ui/src/realm-settings/keys/KeysProvidersTab.tsx
index 71b4db7e28..1ace147691 100644
--- a/js/apps/admin-ui/src/realm-settings/keys/KeysProvidersTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/keys/KeysProvidersTab.tsx
@@ -11,6 +11,7 @@ import {
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { SearchIcon } from "@patternfly/react-icons";
 import { KeyboardEvent, useMemo, useState } from "react";
@@ -161,23 +162,29 @@ export const KeysProvidersTab = ({
           <ToolbarGroup className="providers-toolbar">
             <ToolbarItem>
               <InputGroup>
-                <TextInput
-                  name={"inputGroupName"}
-                  id={"inputGroupName"}
-                  data-testid="provider-search-input"
-                  type="search"
-                  aria-label={t("search")}
-                  placeholder={t("search")}
-                  onChange={handleInputChange}
-                  onKeyDown={handleKeyDown}
-                />
-                <Button
-                  variant={ButtonVariant.control}
-                  aria-label={t("search")}
-                  onClick={onSearch}
-                >
-                  <SearchIcon />
-                </Button>
+                <InputGroupItem isFill>
+                  <TextInput
+                    name={"inputGroupName"}
+                    id={"inputGroupName"}
+                    data-testid="provider-search-input"
+                    type="search"
+                    aria-label={t("search")}
+                    placeholder={t("search")}
+                    onChange={(_event, value: string) =>
+                      handleInputChange(value)
+                    }
+                    onKeyDown={handleKeyDown}
+                  />
+                </InputGroupItem>
+                <InputGroupItem>
+                  <Button
+                    variant={ButtonVariant.control}
+                    aria-label={t("search")}
+                    onClick={onSearch}
+                  >
+                    <SearchIcon />
+                  </Button>
+                </InputGroupItem>
               </InputGroup>
             </ToolbarItem>
             <ToolbarItem>
diff --git a/js/apps/admin-ui/src/realm-settings/keys/key-providers/KeyProvidersPicker.tsx b/js/apps/admin-ui/src/realm-settings/keys/key-providers/KeyProvidersPicker.tsx
index 38d7d7c67f..de5cfe85e7 100644
--- a/js/apps/admin-ui/src/realm-settings/keys/key-providers/KeyProvidersPicker.tsx
+++ b/js/apps/admin-ui/src/realm-settings/keys/key-providers/KeyProvidersPicker.tsx
@@ -26,7 +26,7 @@ export const KeyProvidersPicker = ({
   return (
     <Modal variant="medium" title={t("addProvider")} isOpen onClose={onClose}>
       <DataList
-        onSelectDataListItem={(id) => {
+        onSelectDataListItem={(_event, id) => {
           onConfirm(id);
         }}
         aria-label={t("addPredefinedMappers")}
diff --git a/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx b/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
index 3047bb3be9..b7ab458acc 100644
--- a/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
+++ b/js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx
@@ -8,19 +8,23 @@ import {
   FlexItem,
   Form,
   FormGroup,
+  Text,
+  TextContent,
+  TextInput,
+  TextVariants,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Text,
-  TextContent,
-  TextVariants,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { pickBy } from "lodash-es";
 import { useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+
 import { adminClient } from "../../admin-client";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import DropdownPanel from "../../components/dropdown-panel/DropdownPanel";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -29,7 +33,6 @@ import { useWhoAmI } from "../../context/whoami/WhoAmI";
 import { DEFAULT_LOCALE } from "../../i18n/i18n";
 import { localeToDisplayName } from "../../util";
 import useLocaleSort, { mapByKey } from "../../utils/useLocaleSort";
-import DropdownPanel from "../../components/dropdown-panel/DropdownPanel";
 
 type EffectiveMessageBundlesProps = {
   defaultSupportedLocales: string[];
@@ -203,7 +206,7 @@ export const EffectiveMessageBundles = ({
         <FlexItem>
           <TextContent>
             <Text
-              className="pf-u-mb-md pf-u-mt-0 pf-u-mr-md"
+              className="pf-v5-u-mb-md pf-v5-u-mt-0 pf-v5-u-mr-md"
               component={TextVariants.p}
             >
               {t("effectiveMessageBundlesDescription")}
@@ -220,7 +223,7 @@ export const EffectiveMessageBundles = ({
           >
             <Form
               isHorizontal
-              className="pf-u-w-25vw"
+              className="pf-v5-u-w-25vw"
               data-testid="effectiveMessageBundlesSearchForm"
               onSubmit={(e) => e.preventDefault()}
             >
@@ -242,7 +245,7 @@ export const EffectiveMessageBundles = ({
                       }}
                       variant={SelectVariant.single}
                       typeAheadAriaLabel="Select"
-                      onToggle={setSelectThemesOpen}
+                      onToggle={(_event, val) => setSelectThemesOpen(val)}
                       selections={field.value}
                       onSelect={(_, selectedValue) => {
                         field.onChange(selectedValue.toString());
@@ -307,7 +310,7 @@ export const EffectiveMessageBundles = ({
                       }}
                       variant={SelectVariant.single}
                       typeAheadAriaLabel="Select"
-                      onToggle={setSelectThemeTypeOpen}
+                      onToggle={(_event, val) => setSelectThemeTypeOpen(val)}
                       selections={field.value}
                       onSelect={(_, selectedValue) => {
                         field.onChange(selectedValue.toString());
@@ -368,7 +371,7 @@ export const EffectiveMessageBundles = ({
                       }}
                       variant={SelectVariant.single}
                       typeAheadAriaLabel="Select"
-                      onToggle={setSelectLanguageOpen}
+                      onToggle={(_event, val) => setSelectLanguageOpen(val)}
                       selections={field.value}
                       onSelect={(_, selectedValue) => {
                         field.onChange(selectedValue.toString());
@@ -424,7 +427,7 @@ export const EffectiveMessageBundles = ({
                   control={control}
                   render={({ field }) => (
                     <div>
-                      <KeycloakTextInput
+                      <TextInput
                         id="kc-hasWords"
                         data-testid="effective-message-bundles-hasWords-searchField"
                         value={field.value.join(" ")}
@@ -462,7 +465,7 @@ export const EffectiveMessageBundles = ({
                   )}
                 />
               </FormGroup>
-              <ActionGroup className="pf-u-mt-sm">
+              <ActionGroup className="pf-v5-u-mt-sm">
                 <Button
                   variant={"primary"}
                   onClick={() => {
@@ -496,7 +499,7 @@ export const EffectiveMessageBundles = ({
                 ];
                 return (
                   <ChipGroup
-                    className="pf-u-mt-md pf-u-mr-md"
+                    className="pf-v5-u-mt-md pf-v5-u-mr-md"
                     key={key}
                     categoryName={filterLabels[key]}
                     isClosable
@@ -534,7 +537,7 @@ export const EffectiveMessageBundles = ({
   if (!searchPerformed) {
     return (
       <>
-        <div className="pf-u-py-lg pf-u-pl-md">
+        <div className="pf-v5-u-py-lg pf-v5-u-pl-md">
           {effectiveMessageBunldesSearchFormDisplay()}
         </div>
         <Divider />
diff --git a/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx b/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx
index e7841ecf76..84faa7c680 100644
--- a/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/localization/LocalizationTab.tsx
@@ -3,14 +3,16 @@ import {
   ActionGroup,
   Button,
   FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
   Switch,
   Tab,
   TabTitleText,
   Tabs,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -93,7 +95,7 @@ export const LocalizationTab = ({
         <FormAccess
           isHorizontal
           role="manage-realm"
-          className="pf-u-mt-lg pf-u-ml-md"
+          className="pf-v5-u-mt-lg pf-v5-u-ml-md"
           onSubmit={handleSubmit(save)}
         >
           <FormGroup
@@ -113,7 +115,7 @@ export const LocalizationTab = ({
               render={({ field }) => (
                 <Switch
                   id="kc-l-internationalization"
-                  className="pf-u-mt-sm"
+                  className="pf-v5-u-mt-sm"
                   label={t("enabled")}
                   labelOff={t("disabled")}
                   isChecked={field.value}
@@ -141,7 +143,7 @@ export const LocalizationTab = ({
                   render={({ field }) => (
                     <Select
                       toggleId="kc-l-supported-locales"
-                      onToggle={(open) => {
+                      onToggle={(_event, open) => {
                         setSupportedLocalesOpen(open);
                       }}
                       onSelect={(_, v) => {
diff --git a/js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx b/js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx
index 44ab0d569b..ee9ef3db0b 100644
--- a/js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx
+++ b/js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx
@@ -3,20 +3,23 @@ import {
   Button,
   ButtonVariant,
   Divider,
-  Dropdown,
-  DropdownItem,
   Form,
   FormGroup,
+  TextContent,
+  Text,
+  ToolbarItem,
+  TextVariants,
+  TextInput,
+} from "@patternfly/react-core";
+import {
+  Dropdown,
+  DropdownItem,
   KebabToggle,
   Select,
   SelectGroup,
   SelectOption,
   SelectVariant,
-  TextContent,
-  Text,
-  ToolbarItem,
-  TextVariants,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import {
   CheckIcon,
   PencilAltIcon,
@@ -27,23 +30,22 @@ import {
   ActionsColumn,
   IRow,
   IRowCell,
-  Table,
   Tbody,
   Td,
   Th,
   Thead,
   Tr,
 } from "@patternfly/react-table";
+import { Table } from "@patternfly/react-table/deprecated";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import { cloneDeep, isEqual, uniqWith } from "lodash-es";
-import { ChangeEvent, useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState, type FormEvent } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { KeyValueType } from "../../components/key-value-form/key-value-convert";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { PaginatingTableToolbar } from "../../components/table-toolbar/PaginatingTableToolbar";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -333,7 +335,10 @@ export const RealmOverrides = ({
         />
       )}
       <TextContent>
-        <Text className="pf-u-mt-lg pf-u-ml-md" component={TextVariants.p}>
+        <Text
+          className="pf-v5-u-mt-lg pf-v5-u-ml-md"
+          component={TextVariants.p}
+        >
           {t("realmOverridesDescription")}
         </Text>
       </TextContent>
@@ -402,7 +407,9 @@ export const RealmOverrides = ({
               className="kc-filter-by-locale-select"
               variant={SelectVariant.single}
               isDisabled={!internationalizationEnabled}
-              onToggle={(isExpanded) => setFilterDropdownOpen(isExpanded)}
+              onToggle={(_event, isExpanded) =>
+                setFilterDropdownOpen(isExpanded)
+              }
               onSelect={(_, value) => {
                 setSelectMenuLocale(value.toString());
                 setSelectMenuValueSelected(true);
@@ -446,7 +453,7 @@ export const RealmOverrides = ({
           >
             <Thead>
               <Tr>
-                <Th className="pf-u-px-lg">
+                <Th className="pf-v5-u-px-lg">
                   <input
                     type="checkbox"
                     aria-label={t("selectAll")}
@@ -455,8 +462,8 @@ export const RealmOverrides = ({
                     data-testid="selectAll"
                   />
                 </Th>
-                <Th className="pf-u-py-lg">{t("key")}</Th>
-                <Th className="pf-u-py-lg">{t("value")}</Th>
+                <Th className="pf-v5-u-py-lg">{t("key")}</Th>
+                <Th className="pf-v5-u-py-lg">{t("value")}</Th>
                 <Th aria-hidden="true" />
               </Tr>
             </Thead>
@@ -464,7 +471,7 @@ export const RealmOverrides = ({
               {tableRows.map((row, rowIndex) => (
                 <Tr key={(row.cells?.[0] as IRowCell).props.value}>
                   <Td
-                    className="pf-u-px-lg"
+                    className="pf-v5-u-px-lg"
                     select={{
                       rowIndex,
                       onSelect: (event) =>
@@ -477,11 +484,11 @@ export const RealmOverrides = ({
                       ),
                     }}
                   />
-                  <Td className="pf-m-sm pf-u-px-sm" dataLabel={t("key")}>
+                  <Td className="pf-m-sm pf-v5-u-px-sm" dataLabel={t("key")}>
                     {(row.cells?.[0] as IRowCell).props.value}
                   </Td>
                   <Td
-                    className="pf-m-sm pf-u-px-sm"
+                    className="pf-m-sm pf-v5-u-px-sm"
                     dataLabel={t("value")}
                     key={rowIndex}
                   >
@@ -494,20 +501,21 @@ export const RealmOverrides = ({
                     >
                       <FormGroup
                         fieldId="kc-translationValue"
-                        className="pf-u-display-inline-block"
+                        className="pf-v5-u-display-inline-block"
                       >
                         {editStates[rowIndex] ? (
                           <>
-                            <KeycloakTextInput
+                            <TextInput
                               aria-label={t("editTranslationValue")}
                               type="text"
-                              className="pf-u-w-initial"
+                              className="pf-v5-u-w-initial"
                               data-testid={`editTranslationValueInput-${rowIndex}`}
                               value={formValue}
                               onChange={(
-                                event: ChangeEvent<HTMLInputElement>,
+                                event: FormEvent<HTMLInputElement>,
+                                value: string,
                               ) => {
-                                setFormValue(event.target.value);
+                                setFormValue(value);
                               }}
                               key={`edit-input-${rowIndex}`}
                             />
diff --git a/js/apps/admin-ui/src/realm-settings/partial-export.css b/js/apps/admin-ui/src/realm-settings/partial-export.css
index 79bb8d493b..f9ee106630 100644
--- a/js/apps/admin-ui/src/realm-settings/partial-export.css
+++ b/js/apps/admin-ui/src/realm-settings/partial-export.css
@@ -1,4 +1,4 @@
 
 .keycloak__realm-settings__partial-import_form {
-  padding: var(--pf-global--spacer--lg) 0 var(--pf-global--spacer--lg) 0;
+  padding: var(--pf-v5-global--spacer--lg) 0 var(--pf-v5-global--spacer--lg) 0;
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/realm-settings/realm-settings-section.css b/js/apps/admin-ui/src/realm-settings/realm-settings-section.css
index 8efe4a13f9..9b19159713 100644
--- a/js/apps/admin-ui/src/realm-settings/realm-settings-section.css
+++ b/js/apps/admin-ui/src/realm-settings/realm-settings-section.css
@@ -1,109 +1,109 @@
-.pf-c-card.pf-m-flat.kc-login-screen,
-.pf-c-card.pf-m-flat.kc-email-settings,
-.pf-c-card.pf-m-flat.kc-user-info-settings,
-.pf-c-card.pf-m-flat.kc-email-template,
-.pf-c-card.pf-m-flat.kc-email-connection,
-.pf-c-card.pf-m-flat.kc-message-bundles,
-.pf-c-card.pf-m-flat.kc-sso-session-template,
-.pf-c-card.pf-m-flat.kc-client-session-template,
-.pf-c-card.pf-m-flat.kc-offline-session-template,
-.pf-c-card.pf-m-flat.kc-login-settings-template {
+.pf-v5-c-card.pf-m-flat.kc-login-screen,
+.pf-v5-c-card.pf-m-flat.kc-email-settings,
+.pf-v5-c-card.pf-m-flat.kc-user-info-settings,
+.pf-v5-c-card.pf-m-flat.kc-email-template,
+.pf-v5-c-card.pf-m-flat.kc-email-connection,
+.pf-v5-c-card.pf-m-flat.kc-message-bundles,
+.pf-v5-c-card.pf-m-flat.kc-sso-session-template,
+.pf-v5-c-card.pf-m-flat.kc-client-session-template,
+.pf-v5-c-card.pf-m-flat.kc-offline-session-template,
+.pf-v5-c-card.pf-m-flat.kc-login-settings-template {
   border: none;
   margin-top: 0px;
   margin-bottom: 0px;
-  padding-bottom: var(--pf-global--spacer--sm);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
 }
 
-article.pf-c-card.pf-m-flat.kc-email-template
-  > .pf-c-card__header.kc-form-panel__header,
-article.pf-c-card.pf-m-flat.kc-email-connection
-  > .pf-c-card__header.kc-form-panel__header {
+article.pf-v5-c-card.pf-m-flat.kc-email-template
+  > .pf-v5-c-card__header.kc-form-panel__header,
+article.pf-v5-c-card.pf-m-flat.kc-email-connection
+  > .pf-v5-c-card__header.kc-form-panel__header {
   margin-top: 0px;
   margin-bottom: 0px;
   padding-left: 0px;
   padding-bottom: 0px;
 }
 
-.kc-login-screen > div.pf-c-card__header.kc-form-panel__header,
-.kc-email-settings > div.pf-c-card__header.kc-form-panel__header,
-.kc-email-template > div.pf-c-card__header.kc-form-panel__header,
-.kc-user-info-settings > div.pf-c-card__header.kc-form-panel__header {
+.kc-login-screen > div.pf-v5-c-card__header.kc-form-panel__header,
+.kc-email-settings > div.pf-v5-c-card__header.kc-form-panel__header,
+.kc-email-template > div.pf-v5-c-card__header.kc-form-panel__header,
+.kc-user-info-settings > div.pf-v5-c-card__header.kc-form-panel__header {
   padding-bottom: 0px;
   padding-left: 0px;
   padding-top: 0px;
 }
 
-.kc-email-settings > div.pf-c-card__body.kc-form-panel__body,
-.kc-email-template > div.pf-c-card__body.kc-form-panel__body,
-.kc-login-screen > div.pf-c-card__body.kc-form-panel__body,
-.kc-user-info-settings > div.pf-c-card__body.kc-form-panel__body {
+.kc-email-settings > div.pf-v5-c-card__body.kc-form-panel__body,
+.kc-email-template > div.pf-v5-c-card__body.kc-form-panel__body,
+.kc-login-screen > div.pf-v5-c-card__body.kc-form-panel__body,
+.kc-user-info-settings > div.pf-v5-c-card__body.kc-form-panel__body {
   padding-left: 0px;
-  padding-bottom: var(--pf-global--spacer--2xl);
+  padding-bottom: var(--pf-v5-global--spacer--2xl);
 }
 
-button.kc-certificate.pf-c-button.pf-m-secondary {
-  margin-left: var(--pf-global--spacer--md);
+button.kc-certificate.pf-v5-c-button.pf-m-secondary {
+  margin-left: var(--pf-v5-global--spacer--md);
 }
 
-.pf-c-data-list__item-row.test {
+.pf-v5-c-data-list__item-row.test {
   font-weight: bold;
 }
 
-.pf-c-data-list__item-content.data-list-cells {
-  margin-left: var(--pf-global--spacer--xl);
+.pf-v5-c-data-list__item-content.data-list-cells {
+  margin-left: var(--pf-v5-global--spacer--xl);
 }
 
-button.pf-c-data-list__item-draggable-button.pf-m-disabled.header-drag-button {
+button.pf-v5-c-data-list__item-draggable-button.pf-m-disabled.header-drag-button {
   display: none;
 }
 
-button.pf-c-data-list__item-draggable-button.row-drag-button {
-  padding-top: var(--pf-global--spacer--md);
+button.pf-v5-c-data-list__item-draggable-button.row-drag-button {
+  padding-top: var(--pf-v5-global--spacer--md);
 }
 
-.pf-c-data-list__item-control {
+.pf-v5-c-data-list__item-control {
   margin-right: 0px;
 }
 
-.pf-c-data-list__item-row.test {
+.pf-v5-c-data-list__item-row.test {
   font-weight: bold;
 }
 
-button.pf-c-button.pf-m-link.add-provider {
+button.pf-v5-c-button.pf-m-link.add-provider {
   padding: 0px;
 }
 
-.pf-c-toolbar__group.providers-toolbar {
-  padding-left: var(--pf-c-toolbar__content--PaddingLeft);
+.pf-v5-c-toolbar__group.providers-toolbar {
+  padding-left: var(--pf-v5-c-toolbar__content--PaddingLeft);
 }
 
-div#login-action-timeout-label > .pf-c-form__group-label,
-div#offline-session-max-label > .pf-c-form__group-label {
+div#login-action-timeout-label > .pf-v5-c-form__group-label,
+div#offline-session-max-label > .pf-v5-c-form__group-label {
   width: 90%;
 }
 
-div#offline-session-max-label > .pf-c-form__group-label {
+div#offline-session-max-label > .pf-v5-c-form__group-label {
   width: 85%;
 }
 
-.pf-c-content.messageBundleDescription {
+.pf-v5-c-content.messageBundleDescription {
   max-width: 1024px;
-  padding-bottom: var(--pf-global--spacer--lg);
+  padding-bottom: var(--pf-v5-global--spacer--lg);
 }
 
-.kc-message-bundles > .pf-c-card__body.kc-form-panel__body > div.tableBorder {
+.kc-message-bundles > .pf-v5-c-card__body.kc-form-panel__body > div.tableBorder {
   border-style: solid;
   border-width: 1px;
-  border-color: var(--pf-global--BorderColor--100);
+  border-color: var(--pf-v5-global--BorderColor--100);
   max-width: 1024px;
 }
 
-.pf-c-form__group.kc-email-form-group {
+.pf-v5-c-form__group.kc-email-form-group {
   display: inline-block !important;
 }
 
-.pf-c-content.kc-provide-email-text {
-  padding-bottom: var(--pf-global--spacer--md);
+.pf-v5-c-content.kc-provide-email-text {
+  padding-bottom: var(--pf-v5-global--spacer--md);
 }
 
 .kc-sso-session-idle-input,
@@ -145,34 +145,34 @@ div#offline-session-max-label > .pf-c-form__group-label {
   width: 170px;
 }
 
-article.pf-c-card.pf-m-flat.kc-sso-session-template
-  > .pf-c-card__header.kc-form-panel__header,
-article.pf-c-card.pf-m-flat.kc-sso-session-template
-  > .pf-c-card__body.kc-form-panel__body,
-article.pf-c-card.pf-m-flat.kc-client-session-template
-  > .pf-c-card__header.kc-form-panel__header,
-article.pf-c-card.pf-m-flat.kc-client-session-template
-  > .pf-c-card__body.kc-form-panel__body,
-article.pf-c-card.pf-m-flat.kc-offline-session-template
-  > .pf-c-card__header.kc-form-panel__header,
-article.pf-c-card.pf-m-flat.kc-offline-session-template
-  > .pf-c-card__body.kc-form-panel__body,
-article.pf-c-card.pf-m-flat.kc-login-settings-template
-  > .pf-c-card__header.kc-form-panel__header,
-article.pf-c-card.pf-m-flat.kc-login-settings-template
-  > .pf-c-card__body.kc-form-panel__body,
-article.pf-c-card.pf-m-flat.kc-email-connection
-  > .pf-c-card__body.kc-form-panel__body {
+article.pf-v5-c-card.pf-m-flat.kc-sso-session-template
+  > .pf-v5-c-card__header.kc-form-panel__header,
+article.pf-v5-c-card.pf-m-flat.kc-sso-session-template
+  > .pf-v5-c-card__body.kc-form-panel__body,
+article.pf-v5-c-card.pf-m-flat.kc-client-session-template
+  > .pf-v5-c-card__header.kc-form-panel__header,
+article.pf-v5-c-card.pf-m-flat.kc-client-session-template
+  > .pf-v5-c-card__body.kc-form-panel__body,
+article.pf-v5-c-card.pf-m-flat.kc-offline-session-template
+  > .pf-v5-c-card__header.kc-form-panel__header,
+article.pf-v5-c-card.pf-m-flat.kc-offline-session-template
+  > .pf-v5-c-card__body.kc-form-panel__body,
+article.pf-v5-c-card.pf-m-flat.kc-login-settings-template
+  > .pf-v5-c-card__header.kc-form-panel__header,
+article.pf-v5-c-card.pf-m-flat.kc-login-settings-template
+  > .pf-v5-c-card__body.kc-form-panel__body,
+article.pf-v5-c-card.pf-m-flat.kc-email-connection
+  > .pf-v5-c-card__body.kc-form-panel__body {
   padding: 0px;
 }
 
 .kc-override-action-tokens-subtitle {
-  font-size: var(--pf-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   font-weight: bold;
 }
 
 .kc-row-drag-button {
-  padding: var(--pf-global--spacer--sm);
+  padding: var(--pf-v5-global--spacer--sm);
 }
 
 .kc-profiles-config-section {
@@ -188,15 +188,15 @@ article.pf-c-card.pf-m-flat.kc-email-connection
 }
 
 .kc-emptyExecutors {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .kc-emptyConditions {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .kc-emptyClientProfiles {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .kc-action-dropdown {
@@ -208,8 +208,8 @@ article.pf-c-card.pf-m-flat.kc-email-connection
 }
 
 .kc-unclickable-executor {
-  font-size: var(--pf-global--FontSize--md);
-  padding: 0 var(--pf-global--spacer--md) 0 var(--pf-global--spacer--md);
+  font-size: var(--pf-v5-global--FontSize--md);
+  padding: 0 var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--md);
 }
 
 .kc-backToPolicies,
@@ -223,7 +223,7 @@ article.pf-c-card.pf-m-flat.kc-email-connection
 
 .kc-executor-trash-icon {
   margin-left: 0.5rem;
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .kc-executor-trash-icon:hover {
@@ -236,7 +236,7 @@ article.pf-c-card.pf-m-flat.kc-email-connection
 
 .kc-conditionType-trash-icon {
   margin-left: 0.5rem;
-  color: var(--pf-global--Color--400);
+  color: var(--pf-v5-global--Color--400);
 }
 
 .kc-conditionType-trash-icon:hover {
@@ -254,14 +254,14 @@ input#kc-scopes {
 }
 
 .kc-client-scopes-chip-group {
-  margin-right: var(--pf-global--spacer--2xl);
+  margin-right: var(--pf-v5-global--spacer--2xl);
   max-width: 585px;
   min-width: 585px;
   padding-left: none;
 }
 
 .kc-join-group-modal-check {
-  margin-right: var(--pf-global--spacer--sm);
+  margin-right: var(--pf-v5-global--spacer--sm);
 }
 
 .kc-requiredFor {
@@ -273,7 +273,7 @@ input#kc-scopes {
 }
 
 .kc-emptyValidators {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
   margin-left: 25px;
 }
 
@@ -295,5 +295,5 @@ input#kc-scopes {
 }
 
 .kc-attribute-display-name-iconBtn:hover {
-  color: var(--pf-c-button--m-primary--active--BackgroundColor);
+  color: var(--pf-v5-c-button--m-primary--active--BackgroundColor);
 }
diff --git a/js/apps/admin-ui/src/realm-settings/security-defences/BruteForceDetection.tsx b/js/apps/admin-ui/src/realm-settings/security-defences/BruteForceDetection.tsx
index b480d89649..b1c96ab3c4 100644
--- a/js/apps/admin-ui/src/realm-settings/security-defences/BruteForceDetection.tsx
+++ b/js/apps/admin-ui/src/realm-settings/security-defences/BruteForceDetection.tsx
@@ -1,12 +1,10 @@
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import { ActionGroup, Button, FormGroup } from "@patternfly/react-core";
 import {
-  ActionGroup,
-  Button,
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupForm.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupForm.tsx
index 66a1092152..c24bd8f9ef 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupForm.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupForm.tsx
@@ -11,12 +11,11 @@ import { useEffect, useMemo } from "react";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
+import { TextControl } from "ui-shared";
 
 import { FormAccess } from "../../components/form/FormAccess";
-import { HelpItem } from "ui-shared";
-import type { KeyValueType } from "../../components/key-value-form/key-value-convert";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import type { KeyValueType } from "../../components/key-value-form/key-value-convert";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import type { EditAttributesGroupParams } from "../routes/EditAttributesGroup";
@@ -112,79 +111,54 @@ export default function AttributesGroupForm() {
       />
       <PageSection variant="light" onSubmit={form.handleSubmit(onSubmit)}>
         <FormAccess isHorizontal role="manage-realm">
-          <FormGroup
-            label={t("nameField")}
-            fieldId="kc-name"
-            isRequired
-            helperTextInvalid={t("required")}
-            validated={form.formState.errors.name ? "error" : "default"}
-            labelIcon={
-              <HelpItem helpText={t("nameHintHelp")} fieldLabelId="nameField" />
-            }
-          >
-            <KeycloakTextInput
-              id="kc-name"
-              isReadOnly={!!matchingGroup}
-              {...form.register("name", { required: true })}
+          <FormProvider {...form}>
+            <TextControl
+              name="name"
+              label={t("nameField")}
+              labelIcon={t("nameHintHelp")}
+              rules={{ required: t("required") }}
+              readOnly={!!matchingGroup}
             />
             {!!matchingGroup && (
               <input type="hidden" {...form.register("name")} />
             )}
-          </FormGroup>
-          <FormGroup
-            label={t("displayHeaderField")}
-            fieldId="kc-display-header"
-            labelIcon={
-              <HelpItem
-                helpText={t("displayHeaderHintHelp")}
-                fieldLabelId="displayHeaderField"
-              />
-            }
-          >
-            <KeycloakTextInput
-              id="kc-display-header"
-              {...form.register("displayHeader")}
+            <TextControl
+              name="displayHeader"
+              label={t("displayHeaderField")}
+              labelIcon={t("displayHeaderHintHelp")}
             />
-          </FormGroup>
-          <FormGroup
-            label={t("displayDescriptionField")}
-            fieldId="kc-display-description"
-            labelIcon={
-              <HelpItem
-                helpText={t("displayDescriptionHintHelp")}
-                fieldLabelId="displayDescriptionField"
-              />
-            }
-          >
-            <KeycloakTextInput
-              id="kc-display-description"
-              {...form.register("displayDescription")}
+            <TextControl
+              name="displayDescription"
+              label={t("displayDescriptionField")}
+              labelIcon={t("displayDescriptionHintHelp")}
             />
-          </FormGroup>
-          <TextContent>
-            <Text component="h2">{t("annotationsText")}</Text>
-          </TextContent>
-          <FormGroup label={t("annotationsText")} fieldId="kc-annotations">
-            <FormProvider {...form}>
+            <TextContent>
+              <Text component="h2">{t("annotationsText")}</Text>
+            </TextContent>
+            <FormGroup label={t("annotationsText")} fieldId="kc-annotations">
               <KeyValueInput label={t("annotationsText")} name="annotations" />
-            </FormProvider>
-          </FormGroup>
-          <ActionGroup>
-            <Button variant="primary" type="submit" data-testid="saveGroupBtn">
-              {t("save")}
-            </Button>
-            <Button
-              variant="link"
-              component={(props) => (
-                <Link
-                  {...props}
-                  to={toUserProfile({ realm, tab: "attributes-group" })}
-                />
-              )}
-            >
-              {t("cancel")}
-            </Button>
-          </ActionGroup>
+            </FormGroup>
+            <ActionGroup>
+              <Button
+                variant="primary"
+                type="submit"
+                data-testid="saveGroupBtn"
+              >
+                {t("save")}
+              </Button>
+              <Button
+                variant="link"
+                component={(props) => (
+                  <Link
+                    {...props}
+                    to={toUserProfile({ realm, tab: "attributes-group" })}
+                  />
+                )}
+              >
+                {t("cancel")}
+              </Button>
+            </ActionGroup>
+          </FormProvider>
         </FormAccess>
       </PageSection>
     </>
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupTab.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupTab.tsx
index 71ffe19bb3..e469dd8ec9 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesGroupTab.tsx
@@ -65,7 +65,7 @@ export const AttributesGroupTab = () => {
   }
 
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <DeleteConfirm />
       <KeycloakDataTable
         key={key}
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx
index f4441beb0d..e137bcd3b5 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/AttributesTab.tsx
@@ -4,13 +4,15 @@ import {
   Button,
   ButtonVariant,
   Divider,
-  Select,
-  SelectOption,
-  SelectVariant,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
 } from "@patternfly/react-core";
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from "@patternfly/react-core/deprecated";
 import { FilterIcon } from "@patternfly/react-icons";
 import { uniqBy } from "lodash-es";
 import { useMemo, useState } from "react";
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
index c3f10f2d02..73dbc2b701 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AddTranslationsDialog.tsx
@@ -12,7 +12,8 @@ import {
   TextContent,
   TextVariants,
 } from "@patternfly/react-core";
-import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import { Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import { Table } from "@patternfly/react-table/deprecated";
 import { SearchIcon } from "@patternfly/react-icons";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -191,14 +192,14 @@ export const AddTranslationsDialog = ({
               <TextControl
                 name="key"
                 label={t("translationKey")}
-                className="pf-u-mt-md"
+                className="pf-v5-u-mt-md"
                 data-testid="translation-key"
                 isDisabled
               />
               <FlexItem>
                 <TextContent>
                   <Text
-                    className="pf-u-font-size-sm pf-u-font-weight-bold"
+                    className="pf-v5-u-font-size-sm pf-v5-u-font-weight-bold"
                     component={TextVariants.p}
                   >
                     {t("translationsTableHeading")}
@@ -245,10 +246,10 @@ export const AddTranslationsDialog = ({
                     >
                       <Thead>
                         <Tr>
-                          <Th className="pf-u-py-lg">
+                          <Th className="pf-v5-u-py-lg">
                             {t("supportedLanguagesTableColumnName")}
                           </Th>
-                          <Th className="pf-u-py-lg">
+                          <Th className="pf-v5-u-py-lg">
                             {t("translationTableColumnName")}
                           </Th>
                           <Th aria-hidden="true" />
@@ -262,7 +263,7 @@ export const AddTranslationsDialog = ({
                           return (
                             <Tr key={index}>
                               <Td
-                                className="pf-m-sm pf-u-px-sm"
+                                className="pf-m-sm pf-v5-u-px-sm"
                                 dataLabel={t("supportedLanguage")}
                               >
                                 <FormGroup fieldId="kc-supportedLanguage">
@@ -271,7 +272,10 @@ export const AddTranslationsDialog = ({
                                     whoAmI.getLocale(),
                                   )}
                                   {locale === defaultLocales.toString() && (
-                                    <Label className="pf-u-ml-xs" color="blue">
+                                    <Label
+                                      className="pf-v5-u-ml-xs"
+                                      color="blue"
+                                    >
                                       {t("defaultLanguage")}
                                     </Label>
                                   )}
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
index fd6eb2bd36..db1494fc45 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx
@@ -1,6 +1,6 @@
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
-import type { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
+import type { UserProfileConfig } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
 import {
   Button,
   Divider,
@@ -8,31 +8,34 @@ import {
   Grid,
   GridItem,
   Radio,
+  Switch,
+  TextInput,
+  Tooltip,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
-  Tooltip,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
+import { GlobeRouteIcon } from "@patternfly/react-icons";
 import { isEqual } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { FormErrorText, HelpItem } from "ui-shared";
 
 import { adminClient } from "../../../admin-client";
 import { FormAccess } from "../../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSpinner";
-import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
+import { useRealm } from "../../../context/realm-context/RealmContext";
 import { useFetch } from "../../../utils/useFetch";
 import { useParams } from "../../../utils/useParams";
-import { USERNAME_EMAIL } from "../../NewAttributeSettings";
-import "../../realm-settings-section.css";
-import { GlobeRouteIcon } from "@patternfly/react-icons";
-import { AddTranslationsDialog } from "./AddTranslationsDialog";
 import useToggle from "../../../utils/useToggle";
+import { USERNAME_EMAIL } from "../../NewAttributeSettings";
 import { AttributeParams } from "../../routes/Attribute";
-import { useRealm } from "../../../context/realm-context/RealmContext";
+import { AddTranslationsDialog } from "./AddTranslationsDialog";
+
+import "../../realm-settings-section.css";
 
 const REQUIRED_FOR = [
   { label: "requiredForLabel.both", value: ["admin", "user"] },
@@ -83,14 +86,14 @@ export const AttributeGeneralSettings = ({
   const displayNameRegex = /\$\{([^}]+)\}/;
 
   const handleAttributeNameChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.FormEvent<HTMLInputElement>,
+    value: string,
   ) => {
-    const newAttributeName = event.target.value;
-    setNewAttributeName(newAttributeName);
+    setNewAttributeName(value);
 
     const newDisplayName =
-      newAttributeName !== "" && realm?.internationalizationEnabled
-        ? "${profile.attributes." + `${newAttributeName}}`
+      value !== "" && realm?.internationalizationEnabled
+        ? "${profile.attributes." + `${value}}`
         : "";
 
     setGeneratedDisplayName(newDisplayName);
@@ -195,10 +198,8 @@ export const AttributeGeneralSettings = ({
           }
           fieldId="kc-attribute-name"
           isRequired
-          validated={form.formState.errors.name ? "error" : "default"}
-          helperTextInvalid={t("validateAttributeName")}
         >
-          <KeycloakTextInput
+          <TextInput
             isRequired
             id="kc-attribute-name"
             defaultValue=""
@@ -208,6 +209,9 @@ export const AttributeGeneralSettings = ({
             {...form.register("name", { required: true })}
             onChange={handleAttributeNameChange}
           />
+          {form.formState.errors.name && (
+            <FormErrorText message={t("validateAttributeName")} />
+          )}
         </FormGroup>
         <FormGroup
           label={t("attributeDisplayName")}
@@ -221,7 +225,7 @@ export const AttributeGeneralSettings = ({
         >
           <Grid hasGutter>
             <GridItem span={realm?.internationalizationEnabled ? 11 : 12}>
-              <KeycloakTextInput
+              <TextInput
                 id="kc-attribute-display-name"
                 data-testid="attribute-display-name"
                 isDisabled={
@@ -255,7 +259,7 @@ export const AttributeGeneralSettings = ({
                 />
                 <Tooltip
                   content={t("addAttributeTranslationTooltip")}
-                  reference={tooltipRef}
+                  triggerRef={tooltipRef}
                 />
               </GridItem>
             )}
@@ -325,7 +329,7 @@ export const AttributeGeneralSettings = ({
                 name="enabledWhen"
                 label={t("always")}
                 onChange={() => setHasSelector(false)}
-                className="pf-u-mb-md"
+                className="pf-v5-u-mb-md"
               />
               <Radio
                 id="scopesAsRequested"
@@ -334,7 +338,7 @@ export const AttributeGeneralSettings = ({
                 name="enabledWhen"
                 label={t("scopesAsRequested")}
                 onChange={() => setHasSelector(true)}
-                className="pf-u-mb-md"
+                className="pf-v5-u-mb-md"
               />
             </FormGroup>
             {hasSelector && (
@@ -354,7 +358,9 @@ export const AttributeGeneralSettings = ({
                         expandedText: t("hide"),
                         collapsedText: t("showRemaining"),
                       }}
-                      onToggle={(isOpen) => setSelectEnabledWhenOpen(isOpen)}
+                      onToggle={(_event, isOpen) =>
+                        setSelectEnabledWhenOpen(isOpen)
+                      }
                       selections={field.value}
                       onSelect={(_, selectedValue) => {
                         const option = selectedValue.toString();
@@ -469,7 +475,7 @@ export const AttributeGeneralSettings = ({
                     name="requiredWhen"
                     label={t("always")}
                     onChange={() => setHasRequiredScopes(false)}
-                    className="pf-u-mb-md"
+                    className="pf-v5-u-mb-md"
                   />
                   <Radio
                     id="requiredScopesAsRequested"
@@ -478,7 +484,7 @@ export const AttributeGeneralSettings = ({
                     name="requiredWhen"
                     label={t("scopesAsRequested")}
                     onChange={() => setHasRequiredScopes(true)}
-                    className="pf-u-mb-md"
+                    className="pf-v5-u-mb-md"
                   />
                 </FormGroup>
                 {hasRequiredScopes && (
@@ -498,7 +504,7 @@ export const AttributeGeneralSettings = ({
                             expandedText: t("hide"),
                             collapsedText: t("showRemaining"),
                           }}
-                          onToggle={(isOpen) =>
+                          onToggle={(_event, isOpen) =>
                             setSelectRequiredForOpen(isOpen)
                           }
                           selections={field.value}
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeValidations.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeValidations.tsx
index a3f7448eb8..d10d453b9f 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeValidations.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/AttributeValidations.tsx
@@ -6,14 +6,7 @@ import {
   TextVariants,
 } from "@patternfly/react-core";
 import { PlusCircleIcon } from "@patternfly/react-icons";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useEffect, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -96,7 +89,7 @@ export const AttributeValidations = () => {
         </Button>
         <Divider />
         {validators.length !== 0 ? (
-          <TableComposable>
+          <Table>
             <Thead>
               <Tr>
                 <Th>{t("validatorColNames.colName")}</Th>
@@ -129,7 +122,7 @@ export const AttributeValidations = () => {
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         ) : (
           <Text className="kc-emptyValidators" component={TextVariants.p}>
             {t("emptyValidators")}
diff --git a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/ValidatorSelect.tsx b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/ValidatorSelect.tsx
index 3c03827e5e..9b784f1f3c 100644
--- a/js/apps/admin-ui/src/realm-settings/user-profile/attribute/ValidatorSelect.tsx
+++ b/js/apps/admin-ui/src/realm-settings/user-profile/attribute/ValidatorSelect.tsx
@@ -1,5 +1,6 @@
 import ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentTypeRepresentation";
-import { FormGroup, Select, SelectOption } from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
+import { Select, SelectOption } from "@patternfly/react-core/deprecated";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useServerInfo } from "../../../context/server-info/ServerInfoProvider";
diff --git a/js/apps/admin-ui/src/sessions/RevocationModal.tsx b/js/apps/admin-ui/src/sessions/RevocationModal.tsx
index 1a6ec5e6fd..1f41e98144 100644
--- a/js/apps/admin-ui/src/sessions/RevocationModal.tsx
+++ b/js/apps/admin-ui/src/sessions/RevocationModal.tsx
@@ -9,7 +9,7 @@ import {
   Modal,
   ModalVariant,
   TextContent,
-  ValidatedOptions,
+  TextInput,
 } from "@patternfly/react-core";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -17,9 +17,7 @@ import { useTranslation } from "react-i18next";
 
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../context/realm-context/RealmContext";
-import { emailRegexPattern } from "../util";
 import { useFetch } from "../utils/useFetch";
 
 type RevocationModalProps = {
@@ -35,11 +33,7 @@ export const RevocationModal = ({
   const { addAlert } = useAlerts();
 
   const { realm: realmName } = useRealm();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
+  const { register, handleSubmit } = useForm();
   const [realm, setRealm] = useState<RealmRepresentation>();
 
   const [key, setKey] = useState(0);
@@ -195,14 +189,11 @@ export const RevocationModal = ({
           label={t("notBefore")}
           name="notBefore"
           fieldId="not-before"
-          validated={
-            errors.email ? ValidatedOptions.error : ValidatedOptions.default
-          }
         >
-          <KeycloakTextInput
+          <TextInput
             data-testid="not-before-input"
             autoFocus
-            isReadOnly
+            readOnly
             value={
               realm?.notBefore === 0
                 ? (t("none") as string)
@@ -210,13 +201,7 @@ export const RevocationModal = ({
             }
             type="text"
             id="not-before"
-            {...register("notBefore", {
-              required: true,
-              pattern: emailRegexPattern,
-            })}
-            validated={
-              errors.email ? ValidatedOptions.error : ValidatedOptions.default
-            }
+            {...register("notBefore")}
           />
         </FormGroup>
       </Form>
diff --git a/js/apps/admin-ui/src/sessions/SessionsSection.css b/js/apps/admin-ui/src/sessions/SessionsSection.css
index df6e25b530..8cc606604a 100644
--- a/js/apps/admin-ui/src/sessions/SessionsSection.css
+++ b/js/apps/admin-ui/src/sessions/SessionsSection.css
@@ -3,6 +3,6 @@
   width: 300px;
 }
 
-.pf-c-form__group.kc-revocation-modal-form-group {
+.pf-v5-c-form__group.kc-revocation-modal-form-group {
   display: inline-block !important;
 }
diff --git a/js/apps/admin-ui/src/sessions/SessionsSection.tsx b/js/apps/admin-ui/src/sessions/SessionsSection.tsx
index c55174d796..0bad690c73 100644
--- a/js/apps/admin-ui/src/sessions/SessionsSection.tsx
+++ b/js/apps/admin-ui/src/sessions/SessionsSection.tsx
@@ -1,10 +1,10 @@
 import UserSessionRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userSessionRepresentation";
+import { PageSection } from "@patternfly/react-core";
 import {
   DropdownItem,
-  PageSection,
   Select,
   SelectOption,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { FilterIcon } from "@patternfly/react-icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -133,7 +133,7 @@ export default function SessionsSection() {
         subKey="sessionExplain"
         helpUrl={helpUrls.sessionsUrl}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         {revocationModalOpen && (
           <RevocationModal
             handleModalToggle={handleRevocationModalToggle}
diff --git a/js/apps/admin-ui/src/user-federation/CreateUserFederationLdapSettings.tsx b/js/apps/admin-ui/src/user-federation/CreateUserFederationLdapSettings.tsx
index aacdf03323..79db5316d0 100644
--- a/js/apps/admin-ui/src/user-federation/CreateUserFederationLdapSettings.tsx
+++ b/js/apps/admin-ui/src/user-federation/CreateUserFederationLdapSettings.tsx
@@ -38,7 +38,7 @@ export default function CreateUserFederationLdapSettings() {
         noDivider
         save={() => form.handleSubmit(onSubmit)()}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <PageSection variant="light">
           <UserFederationLdapForm onSubmit={onSubmit} />
         </PageSection>
diff --git a/js/apps/admin-ui/src/user-federation/ManagePriorityDialog.tsx b/js/apps/admin-ui/src/user-federation/ManagePriorityDialog.tsx
index bc909e2029..3e1e5cec6d 100644
--- a/js/apps/admin-ui/src/user-federation/ManagePriorityDialog.tsx
+++ b/js/apps/admin-ui/src/user-federation/ManagePriorityDialog.tsx
@@ -9,6 +9,10 @@ import {
   DataListItem,
   DataListItemCells,
   DataListItemRow,
+  DragDrop,
+  Draggable,
+  DraggableItemPosition,
+  Droppable,
   Modal,
   ModalVariant,
   Text,
@@ -17,7 +21,6 @@ import {
 import { sortBy } from "lodash-es";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
 
@@ -33,28 +36,37 @@ export const ManagePriorityDialog = ({
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
 
-  const [id, setId] = useState("");
   const [liveText, setLiveText] = useState("");
   const [order, setOrder] = useState(
-    components.map((component) => component.name!),
+    sortBy(components, "config.priority", "name").map(
+      (component) => component.name!,
+    ),
   );
 
-  const onDragStart = (id: string) => {
-    setId(id);
-    setLiveText(t("onDragStart", { item: id }));
+  const onDragStart = ({ index }: DraggableItemPosition) => {
+    setLiveText(t("onDragStart", { item: order[index] }));
+    return true;
   };
 
-  const onDragMove = () => {
-    setLiveText(t("onDragMove", { item: id }));
+  const onDragMove = ({ index }: DraggableItemPosition) => {
+    setLiveText(t("onDragMove", { item: order[index] }));
   };
 
-  const onDragCancel = () => {
-    setLiveText(t("onDragCancel"));
-  };
-
-  const onDragFinish = (providerOrder: string[]) => {
-    setLiveText(t("onDragFinish", { list: providerOrder }));
-    setOrder(providerOrder);
+  const onDragFinish = (
+    source: DraggableItemPosition,
+    dest?: DraggableItemPosition,
+  ) => {
+    if (dest) {
+      const result = [...order];
+      const [removed] = result.splice(source.index, 1);
+      result.splice(dest.index, 0, removed);
+      setLiveText(t("onDragFinish", { list: result }));
+      setOrder(result);
+      return true;
+    } else {
+      setLiveText(t("onDragCancel"));
+      return false;
+    }
   };
 
   return (
@@ -99,45 +111,43 @@ export const ManagePriorityDialog = ({
         </Button>,
       ]}
     >
-      <TextContent className="pf-u-pb-lg">
+      <TextContent className="pf-v5-u-pb-lg">
         <Text>{t("managePriorityInfo")}</Text>
       </TextContent>
 
-      <DataList
-        aria-label={t("manageOrderTableAria")}
-        data-testid="manageOrderDataList"
-        isCompact
-        onDragFinish={onDragFinish}
-        onDragStart={onDragStart}
+      <DragDrop
+        onDrag={onDragStart}
         onDragMove={onDragMove}
-        onDragCancel={onDragCancel}
-        itemOrder={order}
+        onDrop={onDragFinish}
       >
-        {sortBy(components, "config.priority", "name").map((component) => (
-          <DataListItem
-            aria-label={component.name}
-            id={component.name}
-            key={component.name}
+        <Droppable hasNoWrapper>
+          <DataList
+            aria-label={t("manageOrderTableAria")}
+            data-testid="manageOrderDataList"
+            isCompact
           >
-            <DataListItemRow>
-              <DataListControl>
-                <DataListDragButton aria-label={t("dragHelp")} />
-              </DataListControl>
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell
-                    key={component.name}
-                    data-testid={component.name}
-                  >
-                    {component.name}
-                  </DataListCell>,
-                ]}
-              />
-            </DataListItemRow>
-          </DataListItem>
-        ))}
-      </DataList>
-      <div className="pf-screen-reader" aria-live="assertive">
+            {order.map((name) => (
+              <Draggable key={name} hasNoWrapper>
+                <DataListItem aria-label={name} id={name}>
+                  <DataListItemRow>
+                    <DataListControl>
+                      <DataListDragButton aria-label={t("dragHelp")} />
+                    </DataListControl>
+                    <DataListItemCells
+                      dataListCells={[
+                        <DataListCell key={name} data-testid={name}>
+                          {name}
+                        </DataListCell>,
+                      ]}
+                    />
+                  </DataListItemRow>
+                </DataListItem>
+              </Draggable>
+            ))}
+          </DataList>
+        </Droppable>
+      </DragDrop>
+      <div className="pf-v5-screen-reader" aria-live="assertive">
         {liveText}
       </div>
     </Modal>
diff --git a/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx b/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx
index b3722d30ec..721a6c27f5 100644
--- a/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx
+++ b/js/apps/admin-ui/src/user-federation/UserFederationKerberosWizard.tsx
@@ -1,4 +1,4 @@
-import { Wizard } from "@patternfly/react-core";
+import { Wizard } from "@patternfly/react-core/deprecated";
 import { useTranslation } from "react-i18next";
 
 import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired";
diff --git a/js/apps/admin-ui/src/user-federation/UserFederationLdapSettings.tsx b/js/apps/admin-ui/src/user-federation/UserFederationLdapSettings.tsx
index b6ad1ce934..7ca1815970 100644
--- a/js/apps/admin-ui/src/user-federation/UserFederationLdapSettings.tsx
+++ b/js/apps/admin-ui/src/user-federation/UserFederationLdapSettings.tsx
@@ -101,7 +101,7 @@ export default function UserFederationLdapSettings() {
         editMode={component.config?.editMode}
         save={() => form.handleSubmit(onSubmit)()}
       />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <RoutableTabs
           defaultLocation={toUserFederationLdap({
             realm,
diff --git a/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx b/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx
index 0003840924..fe235c306f 100644
--- a/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx
+++ b/js/apps/admin-ui/src/user-federation/UserFederationLdapWizard.tsx
@@ -1,10 +1,10 @@
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
+import { Button } from "@patternfly/react-core";
 import {
-  Button,
   Wizard,
   WizardContextConsumer,
   WizardFooter,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
diff --git a/js/apps/admin-ui/src/user-federation/UserFederationSection.tsx b/js/apps/admin-ui/src/user-federation/UserFederationSection.tsx
index 9ccb6571cf..de781a1675 100644
--- a/js/apps/admin-ui/src/user-federation/UserFederationSection.tsx
+++ b/js/apps/admin-ui/src/user-federation/UserFederationSection.tsx
@@ -3,9 +3,9 @@ import {
   AlertVariant,
   ButtonVariant,
   CardTitle,
-  DropdownItem,
   Gallery,
   GalleryItem,
+  Icon,
   PageSection,
   Split,
   SplitItem,
@@ -13,6 +13,7 @@ import {
   TextContent,
   TextVariants,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { DatabaseIcon } from "@patternfly/react-icons";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -200,11 +201,11 @@ export default function UserFederationSection() {
               <Text component={TextVariants.p}>{t("getStarted")}</Text>
             </TextContent>
             <TextContent>
-              <Text className="pf-u-mt-lg" component={TextVariants.h2}>
+              <Text className="pf-v5-u-mt-lg" component={TextVariants.h2}>
                 {t("providers")}
               </Text>
             </TextContent>
-            <hr className="pf-u-mb-lg" />
+            <hr className="pf-v5-u-mb-lg" />
             <Gallery hasGutter>
               {providers.map((p) => (
                 <ClickableCard
@@ -219,7 +220,9 @@ export default function UserFederationSection() {
                   <CardTitle>
                     <Split hasGutter>
                       <SplitItem>
-                        <DatabaseIcon size="lg" />
+                        <Icon size="lg">
+                          <DatabaseIcon />
+                        </Icon>
                       </SplitItem>
                       <SplitItem isFilled>
                         {t("addProvider", {
diff --git a/js/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx b/js/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx
index 298dafbc8d..b90b4cbbdc 100644
--- a/js/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx
+++ b/js/apps/admin-ui/src/user-federation/custom/SyncSettings.tsx
@@ -31,7 +31,7 @@ export const SyncSettings = () => {
             <Switch
               id="kc-periodic-full-sync"
               data-testid="periodic-full-sync"
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 field.onChange(value ? "604800" : "-1");
               }}
               isChecked={field.value !== "-1"}
@@ -71,7 +71,7 @@ export const SyncSettings = () => {
             <Switch
               id="kc-periodic-changed-users-sync"
               data-testid="periodic-changed-users-sync"
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 field.onChange(value ? "86400" : "-1");
               }}
               isChecked={field.value !== "-1"}
diff --git a/js/apps/admin-ui/src/user-federation/custom/custom-provider-settings.css b/js/apps/admin-ui/src/user-federation/custom/custom-provider-settings.css
index d848f0db70..76b685cbb1 100644
--- a/js/apps/admin-ui/src/user-federation/custom/custom-provider-settings.css
+++ b/js/apps/admin-ui/src/user-federation/custom/custom-provider-settings.css
@@ -1,3 +1,3 @@
 .keycloak__user-federation__custom-form {
-  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 12rem;
+  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 12rem;
 }
diff --git a/js/apps/admin-ui/src/user-federation/kerberos/KerberosSettingsRequired.tsx b/js/apps/admin-ui/src/user-federation/kerberos/KerberosSettingsRequired.tsx
index 0bfdf8e829..4ec85d475a 100644
--- a/js/apps/admin-ui/src/user-federation/kerberos/KerberosSettingsRequired.tsx
+++ b/js/apps/admin-ui/src/user-federation/kerberos/KerberosSettingsRequired.tsx
@@ -1,10 +1,9 @@
+import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { isEqual } from "lodash-es";
 import { useState } from "react";
 import {
@@ -17,7 +16,6 @@ import { useTranslation } from "react-i18next";
 import { HelpItem, TextControl } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { FormAccess } from "../../components/form/FormAccess";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useFetch } from "../../utils/useFetch";
@@ -63,21 +61,17 @@ export const KerberosSettingsRequired = ({
       {/* Required settings */}
       <FormAccess role="manage-realm" isHorizontal>
         {/* These hidden fields are required so data object written back matches data retrieved */}
-        <KeycloakTextInput
+        <TextInput
           hidden
           defaultValue="kerberos"
           {...form.register("providerId")}
         />
-        <KeycloakTextInput
+        <TextInput
           hidden
           defaultValue="org.keycloak.storage.UserStorageProvider"
           {...form.register("providerType")}
         />
-        <KeycloakTextInput
-          hidden
-          defaultValue={realm}
-          {...form.register("parentId")}
-        />
+        <TextInput hidden defaultValue={realm} {...form.register("parentId")} />
         <TextControl
           name="name"
           label={t("uiDisplayName")}
@@ -126,7 +120,7 @@ export const KerberosSettingsRequired = ({
               <Switch
                 id={"kc-debug"}
                 data-testid="debug"
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value?.[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
@@ -154,7 +148,7 @@ export const KerberosSettingsRequired = ({
               <Switch
                 id={"kc-allow-password-authentication"}
                 data-testid="allow-password-authentication"
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value?.[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
@@ -221,7 +215,7 @@ export const KerberosSettingsRequired = ({
               <Switch
                 id={"kc-update-first-login"}
                 data-testid="update-first-login"
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value?.[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsAdvanced.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsAdvanced.tsx
index 674ee6e6eb..66a604cd3f 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsAdvanced.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsAdvanced.tsx
@@ -81,7 +81,7 @@ export const LdapSettingsAdvanced = ({
                 id={"kc-enable-ldapv3-password"}
                 data-testid="ldapv3-password"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
@@ -111,7 +111,7 @@ export const LdapSettingsAdvanced = ({
                 id={"kc-validate-password-policy"}
                 data-testid="password-policy"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
@@ -141,7 +141,7 @@ export const LdapSettingsAdvanced = ({
                 id={"kc-trust-email"}
                 data-testid="trust-email"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx
index b1d2eed505..68e04e29b0 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsConnection.tsx
@@ -3,11 +3,13 @@ import {
   AlertVariant,
   Button,
   FormGroup,
+  Switch,
+} from "@patternfly/react-core";
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { get, isEqual } from "lodash-es";
 import { useState } from "react";
 import {
@@ -128,7 +130,7 @@ export const LdapSettingsConnection = ({
                 id={"kc-enable-start-tls"}
                 data-testid="enable-start-tls"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
@@ -190,7 +192,7 @@ export const LdapSettingsConnection = ({
                 id={"kc-connection-pooling"}
                 data-testid="connection-pooling"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx
index e153d730e4..b69eb43996 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsGeneral.tsx
@@ -1,10 +1,10 @@
 import ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
+import { FormGroup, TextInput } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -12,7 +12,6 @@ import { HelpItem, TextControl } from "ui-shared";
 
 import { adminClient } from "../../admin-client";
 import { FormAccess } from "../../components/form/FormAccess";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useFetch } from "../../utils/useFetch";
@@ -108,21 +107,17 @@ export const LdapSettingsGeneral = ({
       )}
       <FormAccess role="manage-realm" isHorizontal>
         {/* These hidden fields are required so data object written back matches data retrieved */}
-        <KeycloakTextInput
+        <TextInput
           hidden
           defaultValue="ldap"
           {...form.register("providerId")}
         />
-        <KeycloakTextInput
+        <TextInput
           hidden
           defaultValue="org.keycloak.storage.UserStorageProvider"
           {...form.register("providerType")}
         />
-        <KeycloakTextInput
-          hidden
-          defaultValue={realm}
-          {...form.register("parentId")}
-        />
+        <TextInput hidden defaultValue={realm} {...form.register("parentId")} />
         <TextControl
           name="name"
           label={t("uiDisplayName")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx
index 9b750f427f..d8ad44bee2 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx
@@ -60,7 +60,7 @@ export const LdapSettingsKerberosIntegration = ({
                 id="kc-allow-kerberos-authentication"
                 data-testid="allow-kerberos-auth"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
@@ -119,7 +119,7 @@ export const LdapSettingsKerberosIntegration = ({
                     id="kc-debug"
                     data-testid="debug"
                     isDisabled={false}
-                    onChange={(value) => field.onChange([`${value}`])}
+                    onChange={(_event, value) => field.onChange([`${value}`])}
                     isChecked={field.value[0] === "true"}
                     label={t("on")}
                     labelOff={t("off")}
@@ -150,7 +150,7 @@ export const LdapSettingsKerberosIntegration = ({
                 id="kc-use-kerberos-password-authentication"
                 data-testid="use-kerberos-pw-auth"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx
index 243af13286..ddcb9a197f 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx
@@ -1,14 +1,14 @@
+import { FormGroup, Switch } from "@patternfly/react-core";
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectVariant,
-  Switch,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem, TextControl } from "ui-shared";
+import { FormErrorText, HelpItem, TextControl } from "ui-shared";
+
 import { FormAccess } from "../../components/form/FormAccess";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
 
@@ -51,14 +51,6 @@ export const LdapSettingsSearching = ({
           }
           fieldId="kc-edit-mode"
           isRequired
-          validated={
-            (form.formState.errors.config as any)?.editMode?.[0]
-              ? "error"
-              : "default"
-          }
-          helperTextInvalid={
-            (form.formState.errors.config as any)?.editMode?.[0].message
-          }
         >
           <Controller
             name="config.editMode[0]"
@@ -108,6 +100,13 @@ export const LdapSettingsSearching = ({
               </Select>
             )}
           />
+          {(form.formState.errors.config as any)?.editMode?.[0] && (
+            <FormErrorText
+              message={
+                (form.formState.errors.config as any)?.editMode?.[0].message
+              }
+            />
+          )}
         </FormGroup>
         <TextControl
           name="config.usersDn.0"
@@ -230,7 +229,7 @@ export const LdapSettingsSearching = ({
                 id="kc-ui-pagination"
                 data-testid="ui-pagination"
                 isDisabled={false}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 label={t("on")}
                 labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSynchronization.tsx b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSynchronization.tsx
index bdb0847345..4f1adcc2a6 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSynchronization.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSynchronization.tsx
@@ -54,7 +54,7 @@ export const LdapSettingsSynchronization = ({
                 name="importEnabled"
                 label={t("on")}
                 labelOff={t("off")}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 isDisabled={false}
                 aria-label={t("importUsers")}
@@ -83,7 +83,7 @@ export const LdapSettingsSynchronization = ({
                 data-testid="syncRegistrations"
                 label={t("on")}
                 labelOff={t("off")}
-                onChange={(value) => field.onChange([`${value}`])}
+                onChange={(_event, value) => field.onChange([`${value}`])}
                 isChecked={field.value[0] === "true"}
                 aria-label={t("syncRegistrations")}
               />
@@ -117,7 +117,7 @@ export const LdapSettingsSynchronization = ({
                 id="kc-periodic-full-sync"
                 data-testid="periodic-full-sync"
                 isDisabled={false}
-                onChange={(value) => field.onChange(value)}
+                onChange={(_event, value) => field.onChange(value)}
                 isChecked={field.value === true}
                 label={t("on")}
                 labelOff={t("off")}
@@ -156,7 +156,7 @@ export const LdapSettingsSynchronization = ({
                 id="kc-periodic-changed-users-sync"
                 data-testid="periodic-changed-users-sync"
                 isDisabled={false}
-                onChange={(value) => field.onChange(value)}
+                onChange={(_event, value) => field.onChange(value)}
                 isChecked={field.value === true}
                 label={t("on")}
                 labelOff={t("off")}
diff --git a/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx b/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
index 0520badcde..d13a55e9fb 100644
--- a/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
+++ b/js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
@@ -6,18 +6,22 @@ import {
   AlertVariant,
   Button,
   ButtonVariant,
-  DropdownItem,
   FormGroup,
   PageSection,
+  TextInput,
+} from "@patternfly/react-core";
+import {
+  DropdownItem,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { HelpItem, TextControl } from "ui-shared";
+
 import { adminClient } from "../../../admin-client";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { useConfirmDialog } from "../../../components/confirm-dialog/ConfirmDialog";
@@ -27,7 +31,6 @@ import {
 } from "../../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../../components/form/FormAccess";
 import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSpinner";
-import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useRealm } from "../../../context/realm-context/RealmContext";
 import { convertFormValuesToObject, convertToFormValues } from "../../../util";
@@ -219,13 +222,13 @@ export default function LdapMapperDetails() {
               isDisabled={!isNew}
               rules={{ required: t("required") }}
             />
-            <KeycloakTextInput
+            <TextInput
               hidden
               defaultValue={isNew ? id : mapping ? mapping.parentId : ""}
               data-testid="ldap-mapper-parentId"
               {...form.register("parentId")}
             />
-            <KeycloakTextInput
+            <TextInput
               hidden
               defaultValue="org.keycloak.storage.ldap.mappers.LDAPStorageMapper"
               data-testid="ldap-mapper-provider-type"
diff --git a/js/apps/admin-ui/src/user-federation/shared/ExtendedHeader.tsx b/js/apps/admin-ui/src/user-federation/shared/ExtendedHeader.tsx
index 3cd994f35b..dbf58f06ab 100644
--- a/js/apps/admin-ui/src/user-federation/shared/ExtendedHeader.tsx
+++ b/js/apps/admin-ui/src/user-federation/shared/ExtendedHeader.tsx
@@ -1,8 +1,8 @@
+import { AlertVariant } from "@patternfly/react-core";
 import {
-  AlertVariant,
   DropdownItem,
   DropdownSeparator,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
diff --git a/js/apps/admin-ui/src/user-federation/shared/Header.tsx b/js/apps/admin-ui/src/user-federation/shared/Header.tsx
index 938743c5c9..39b714f51c 100644
--- a/js/apps/admin-ui/src/user-federation/shared/Header.tsx
+++ b/js/apps/admin-ui/src/user-federation/shared/Header.tsx
@@ -1,8 +1,5 @@
-import {
-  AlertVariant,
-  ButtonVariant,
-  DropdownItem,
-} from "@patternfly/react-core";
+import { AlertVariant, ButtonVariant } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { ReactElement } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/user-federation/shared/SettingsCache.tsx b/js/apps/admin-ui/src/user-federation/shared/SettingsCache.tsx
index 0be0638cd5..38bc077503 100644
--- a/js/apps/admin-ui/src/user-federation/shared/SettingsCache.tsx
+++ b/js/apps/admin-ui/src/user-federation/shared/SettingsCache.tsx
@@ -1,10 +1,9 @@
+import { FormGroup, NumberInput } from "@patternfly/react-core";
 import {
-  FormGroup,
-  NumberInput,
   Select,
   SelectOption,
   SelectVariant,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { isEqual } from "lodash-es";
 import { Controller, UseFormReturn, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/user-federation/user-federation.css b/js/apps/admin-ui/src/user-federation/user-federation.css
index 22165b9a80..592c71796b 100644
--- a/js/apps/admin-ui/src/user-federation/user-federation.css
+++ b/js/apps/admin-ui/src/user-federation/user-federation.css
@@ -1,5 +1,5 @@
 .keycloak__user-federation__dropdown {
-  margin-top: var(--pf-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
 }
 
 .keycloak-admin--user-federation__gallery-item {
diff --git a/js/apps/admin-ui/src/user/EditUser.tsx b/js/apps/admin-ui/src/user/EditUser.tsx
index eccec6d3c8..55b9fde3f4 100644
--- a/js/apps/admin-ui/src/user/EditUser.tsx
+++ b/js/apps/admin-ui/src/user/EditUser.tsx
@@ -6,13 +6,13 @@ import RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmR
 import {
   AlertVariant,
   ButtonVariant,
-  DropdownItem,
   Label,
   PageSection,
   Tab,
   TabTitleText,
   Tooltip,
 } from "@patternfly/react-core";
+import { DropdownItem } from "@patternfly/react-core/deprecated";
 import { InfoCircleIcon } from "@patternfly/react-icons";
 import { TFunction } from "i18next";
 import { useState } from "react";
@@ -298,7 +298,7 @@ export default function EditUser() {
         isEnabled={user.enabled}
       />
 
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <UserProfileProvider>
           <FormProvider {...form}>
             <RoutableTabs
diff --git a/js/apps/admin-ui/src/user/UserCredentials.tsx b/js/apps/admin-ui/src/user/UserCredentials.tsx
index 66234d45de..2ab80e8ba5 100644
--- a/js/apps/admin-ui/src/user/UserCredentials.tsx
+++ b/js/apps/admin-ui/src/user/UserCredentials.tsx
@@ -9,14 +9,7 @@ import {
   PageSectionVariants,
 } from "@patternfly/react-core";
 import styles from "@patternfly/react-styles/css/components/Table/table";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import {
   Fragment,
   DragEvent as ReactDragEvent,
@@ -426,7 +419,7 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
       )}
       {groupedUserCredentials.length !== 0 && (
         <PageSection variant={PageSectionVariants.light}>
-          <TableComposable variant={"compact"}>
+          <Table variant={"compact"}>
             <Thead>
               <Tr className="kc-table-header">
                 <Th>
@@ -552,12 +545,12 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
                 </Fragment>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </PageSection>
       )}
       {useFederatedCredentials && hasCredentialTypes && (
         <PageSection variant={PageSectionVariants.light}>
-          <TableComposable variant="compact">
+          <Table variant="compact">
             <Thead>
               <Tr>
                 <Th>{t("type")}</Th>
@@ -584,7 +577,7 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </PageSection>
       )}
       {emptyState && (
diff --git a/js/apps/admin-ui/src/user/UserForm.tsx b/js/apps/admin-ui/src/user/UserForm.tsx
index 754e5b92db..3deede9b5f 100644
--- a/js/apps/admin-ui/src/user/UserForm.tsx
+++ b/js/apps/admin-ui/src/user/UserForm.tsx
@@ -10,7 +10,9 @@ import {
   ChipGroup,
   FormGroup,
   InputGroup,
+  InputGroupItem,
   Switch,
+  TextInput,
 } from "@patternfly/react-core";
 import { TFunction } from "i18next";
 import { useEffect, useState } from "react";
@@ -18,17 +20,18 @@ import { Controller, FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import {
+  FormErrorText,
   HelpItem,
   SwitchControl,
   TextControl,
   UserProfileFields,
 } from "ui-shared";
+
 import { adminClient } from "../admin-client";
 import { DefaultSwitchControl } from "../components/SwitchControl";
 import { useAlerts } from "../components/alert/Alerts";
 import { FormAccess } from "../components/form/FormAccess";
 import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useAccess } from "../context/access/Access";
 import { emailRegexPattern } from "../util";
 import useFormatDate from "../utils/useFormatDate";
@@ -135,7 +138,7 @@ export const UserForm = ({
       onSubmit={handleSubmit(save)}
       role="query-users"
       fineGrainedAccess={user?.access?.manage}
-      className="pf-u-mt-lg"
+      className="pf-v5-u-mt-lg"
     >
       <FormProvider {...form}>
         {open && (
@@ -157,7 +160,7 @@ export const UserForm = ({
         {user?.id && (
           <>
             <FormGroup label={t("id")} fieldId="kc-id" isRequired>
-              <KeycloakTextInput
+              <TextInput
                 id={user.id}
                 aria-label={t("userID")}
                 value={user.id}
@@ -169,7 +172,7 @@ export const UserForm = ({
               fieldId="kc-created-at"
               isRequired
             >
-              <KeycloakTextInput
+              <TextInput
                 value={formatDate(new Date(user.createdTimestamp!))}
                 id="kc-created-at"
                 readOnly
@@ -265,7 +268,7 @@ export const UserForm = ({
             <Switch
               data-testid="user-locked-switch"
               id="temporaryLocked"
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 unLockUser();
                 setLocked(value);
               }}
@@ -280,8 +283,6 @@ export const UserForm = ({
           <FormGroup
             label={t("groups")}
             fieldId="kc-groups"
-            validated={errors.requiredActions ? "error" : "default"}
-            helperTextInvalid={t("required")}
             labelIcon={
               <HelpItem helpText={t("groupsHelp")} fieldLabelId="groups" />
             }
@@ -292,27 +293,34 @@ export const UserForm = ({
               control={control}
               render={() => (
                 <InputGroup>
-                  <ChipGroup categoryName={" "}>
-                    {selectedGroups.map((currentChip) => (
-                      <Chip
-                        key={currentChip.id}
-                        onClick={() => deleteItem(currentChip.name!)}
-                      >
-                        {currentChip.path}
-                      </Chip>
-                    ))}
-                  </ChipGroup>
-                  <Button
-                    id="kc-join-groups-button"
-                    onClick={toggleModal}
-                    variant="secondary"
-                    data-testid="join-groups-button"
-                  >
-                    {t("joinGroups")}
-                  </Button>
+                  <InputGroupItem>
+                    <ChipGroup categoryName={" "}>
+                      {selectedGroups.map((currentChip) => (
+                        <Chip
+                          key={currentChip.id}
+                          onClick={() => deleteItem(currentChip.name!)}
+                        >
+                          {currentChip.path}
+                        </Chip>
+                      ))}
+                    </ChipGroup>
+                  </InputGroupItem>
+                  <InputGroupItem>
+                    <Button
+                      id="kc-join-groups-button"
+                      onClick={toggleModal}
+                      variant="secondary"
+                      data-testid="join-groups-button"
+                    >
+                      {t("joinGroups")}
+                    </Button>
+                  </InputGroupItem>
                 </InputGroup>
               )}
             />
+            {errors.requiredActions && (
+              <FormErrorText message={t("required")} />
+            )}
           </FormGroup>
         )}
 
diff --git a/js/apps/admin-ui/src/user/UserIdPModal.tsx b/js/apps/admin-ui/src/user/UserIdPModal.tsx
index 93f3b6c3bd..f3d96d207d 100644
--- a/js/apps/admin-ui/src/user/UserIdPModal.tsx
+++ b/js/apps/admin-ui/src/user/UserIdPModal.tsx
@@ -7,14 +7,15 @@ import {
   FormGroup,
   Modal,
   ModalVariant,
+  TextInput,
 } from "@patternfly/react-core";
 import { capitalize } from "lodash-es";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { TextControl } from "ui-shared";
+
 import { adminClient } from "../admin-client";
 import { useAlerts } from "../components/alert/Alerts";
-import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
 type UserIdpModalProps = {
   userId: string;
@@ -88,7 +89,7 @@ export const UserIdpModal = ({
       <Form id="group-form" onSubmit={handleSubmit(onSubmit)}>
         <FormProvider {...form}>
           <FormGroup label={t("identityProvider")} fieldId="identityProvider">
-            <KeycloakTextInput
+            <TextInput
               id="identityProvider"
               data-testid="idpNameInput"
               value={capitalize(federatedId)}
diff --git a/js/apps/admin-ui/src/user/UserIdentityProviderLinks.tsx b/js/apps/admin-ui/src/user/UserIdentityProviderLinks.tsx
index d2fef1516f..e460ed63c6 100644
--- a/js/apps/admin-ui/src/user/UserIdentityProviderLinks.tsx
+++ b/js/apps/admin-ui/src/user/UserIdentityProviderLinks.tsx
@@ -184,7 +184,7 @@ export const UserIdentityProviderLinks = ({
         />
       )}
       <UnlinkConfirm />
-      <PageSection variant="light" className="pf-u-p-0">
+      <PageSection variant="light" className="pf-v5-u-p-0">
         <FormPanel title={t("linkedIdPs")} className="kc-linked-idps">
           <TextContent>
             <Text className="kc-available-idps-text">
diff --git a/js/apps/admin-ui/src/user/UserSessions.tsx b/js/apps/admin-ui/src/user/UserSessions.tsx
index cd5cd3c396..64e7422418 100644
--- a/js/apps/admin-ui/src/user/UserSessions.tsx
+++ b/js/apps/admin-ui/src/user/UserSessions.tsx
@@ -15,7 +15,7 @@ export const UserSessions = () => {
   const loader = () => adminClient.users.listSessions({ id, realm });
 
   return (
-    <PageSection variant="light" className="pf-u-p-0">
+    <PageSection variant="light" className="pf-v5-u-p-0">
       <SessionsTable
         loader={loader}
         hiddenColumns={["username", "type"]}
diff --git a/js/apps/admin-ui/src/user/UsersSection.tsx b/js/apps/admin-ui/src/user/UsersSection.tsx
index b3f67b0750..ab24f85cec 100644
--- a/js/apps/admin-ui/src/user/UsersSection.tsx
+++ b/js/apps/admin-ui/src/user/UsersSection.tsx
@@ -47,7 +47,7 @@ export default function UsersSection() {
       <PageSection
         data-testid="users-page"
         variant="light"
-        className="pf-u-p-0"
+        className="pf-v5-u-p-0"
       >
         <RoutableTabs
           data-testid="user-tabs"
diff --git a/js/apps/admin-ui/src/user/details/SearchFilter.tsx b/js/apps/admin-ui/src/user/details/SearchFilter.tsx
index d669c84cea..c6adeb1d33 100644
--- a/js/apps/admin-ui/src/user/details/SearchFilter.tsx
+++ b/js/apps/admin-ui/src/user/details/SearchFilter.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ToolbarItem } from "@patternfly/react-core";
 import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
   Select,
   SelectOption,
-  ToolbarItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { FilterIcon } from "@patternfly/react-icons";
 
 export type SearchType = "default" | "attribute";
@@ -43,7 +43,10 @@ export const SearchDropdown = ({
     <Dropdown
       className="keycloak__users__searchtype"
       toggle={
-        <DropdownToggle id="toggle-id" onToggle={setSearchToggle}>
+        <DropdownToggle
+          id="toggle-id"
+          onToggle={(_event, val) => setSearchToggle(val)}
+        >
           <FilterIcon /> {t(`searchType.${searchType}`)}
         </DropdownToggle>
       }
@@ -65,7 +68,7 @@ export const SearchToolbar = ({ searchType, onSelect }: SearchToolbarProps) => {
       <ToolbarItem>
         <Select
           className="keycloak__users__searchtype"
-          onToggle={setOpen}
+          onToggle={(_event, val) => setOpen(val)}
           isOpen={open}
           selections={[t("default"), t("attribute")]}
           onSelect={() => setOpen(false)}
diff --git a/js/apps/admin-ui/src/user/user-credentials.css b/js/apps/admin-ui/src/user/user-credentials.css
index 0e6c2207e0..d92f752305 100644
--- a/js/apps/admin-ui/src/user/user-credentials.css
+++ b/js/apps/admin-ui/src/user/user-credentials.css
@@ -1,7 +1,7 @@
 
 
 .kc-edit-icon {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
   margin-left: 5px;
 }
 
@@ -19,7 +19,7 @@
 }
 
 .kc-editUserLabel-btn, .kc-editUserLabel-cancelBtn {
-  color: var(--pf-global--Color--200) !important;
+  color: var(--pf-v5-global--Color--200) !important;
 }
 
 .kc-editUserLabel-btn {
@@ -38,7 +38,7 @@
   padding-left: 8px !important;
 }
 
-.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row)>:last-child {
+.pf-v5-c-table.pf-m-compact tr:not(.pf-v5-c-table__expandable-row)>:last-child {
   overflow-wrap: anywhere;
 }
 
@@ -78,5 +78,5 @@ tr.kc-table-header th {
 }
 
 td.one-row button svg {
-  color: var(--pf-c-button--disabled--Color);
+  color: var(--pf-v5-c-button--disabled--Color);
 }
\ No newline at end of file
diff --git a/js/apps/admin-ui/src/user/user-credentials/CredentialDataDialog.tsx b/js/apps/admin-ui/src/user/user-credentials/CredentialDataDialog.tsx
index 64be65db34..13d9aadc58 100644
--- a/js/apps/admin-ui/src/user/user-credentials/CredentialDataDialog.tsx
+++ b/js/apps/admin-ui/src/user/user-credentials/CredentialDataDialog.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from "react-i18next";
 import { Modal, ModalVariant } from "@patternfly/react-core";
+import { TableVariant } from "@patternfly/react-table";
 import {
   Table,
   TableBody,
   TableHeader,
-  TableVariant,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 type CredentialDataDialogProps = {
   credentialData: [string, string][];
diff --git a/js/apps/admin-ui/src/user/user-credentials/CredentialRow.tsx b/js/apps/admin-ui/src/user/user-credentials/CredentialRow.tsx
index 40f730628b..02a06ce060 100644
--- a/js/apps/admin-ui/src/user/user-credentials/CredentialRow.tsx
+++ b/js/apps/admin-ui/src/user/user-credentials/CredentialRow.tsx
@@ -1,13 +1,13 @@
 import { ReactNode, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Td } from "@patternfly/react-table";
+import { Button } from "@patternfly/react-core";
 import {
-  Button,
   Dropdown,
   DropdownPosition,
   KebabToggle,
   DropdownItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 
 import type CredentialRepresentation from "@keycloak/keycloak-admin-client/lib/defs/credentialRepresentation";
 import useToggle from "../../utils/useToggle";
diff --git a/js/apps/admin-ui/src/user/user-credentials/InlineLabelEdit.tsx b/js/apps/admin-ui/src/user/user-credentials/InlineLabelEdit.tsx
index 894e1d3dce..910d1b966a 100644
--- a/js/apps/admin-ui/src/user/user-credentials/InlineLabelEdit.tsx
+++ b/js/apps/admin-ui/src/user/user-credentials/InlineLabelEdit.tsx
@@ -1,12 +1,16 @@
 import type CredentialRepresentation from "@keycloak/keycloak-admin-client/lib/defs/credentialRepresentation";
-import { AlertVariant, Button, Form, FormGroup } from "@patternfly/react-core";
+import {
+  AlertVariant,
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+} from "@patternfly/react-core";
 import { CheckIcon, PencilAltIcon, TimesIcon } from "@patternfly/react-icons";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type UserLabelForm = {
   userLabel: string;
@@ -56,7 +60,7 @@ export const InlineLabelEdit = ({
         <div className="kc-form-group-userLabel">
           {isEditable ? (
             <>
-              <KeycloakTextInput
+              <TextInput
                 data-testid="userLabelFld"
                 defaultValue={credential.userLabel}
                 className="kc-userLabel"
diff --git a/js/apps/admin-ui/src/user/user-credentials/RequiredActionMultiSelect.tsx b/js/apps/admin-ui/src/user/user-credentials/RequiredActionMultiSelect.tsx
index 17d92c6286..b5b0fe545d 100644
--- a/js/apps/admin-ui/src/user/user-credentials/RequiredActionMultiSelect.tsx
+++ b/js/apps/admin-ui/src/user/user-credentials/RequiredActionMultiSelect.tsx
@@ -1,5 +1,5 @@
 import type RequiredActionProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/requiredActionProviderRepresentation";
-import { SelectVariant } from "@patternfly/react-core";
+import { SelectVariant } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { FieldPathByValue, FieldValues } from "react-hook-form";
 import { useTranslation } from "react-i18next";
diff --git a/js/apps/admin-ui/src/user/user-credentials/ResetPasswordDialog.tsx b/js/apps/admin-ui/src/user/user-credentials/ResetPasswordDialog.tsx
index da2f0a5b65..b86f65bd55 100644
--- a/js/apps/admin-ui/src/user/user-credentials/ResetPasswordDialog.tsx
+++ b/js/apps/admin-ui/src/user/user-credentials/ResetPasswordDialog.tsx
@@ -5,11 +5,11 @@ import {
   ButtonVariant,
   Form,
   FormGroup,
-  ValidatedOptions,
 } from "@patternfly/react-core";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { PasswordInput } from "ui-shared";
+import { FormErrorText, PasswordInput } from "ui-shared";
+
 import { adminClient } from "../../admin-client";
 import { DefaultSwitchControl } from "../../components/SwitchControl";
 import { useAlerts } from "../../components/alert/Alerts";
@@ -148,12 +148,6 @@ export const ResetPasswordDialog = ({
             name="password"
             label={t("password")}
             fieldId="password"
-            helperTextInvalid={t("required")}
-            validated={
-              errors.password
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
             isRequired
           >
             <PasswordInput
@@ -171,6 +165,7 @@ export const ResetPasswordDialog = ({
               }}
               {...rest}
             />
+            {errors.password && <FormErrorText message={t("required")} />}
           </FormGroup>
           <FormGroup
             name="passwordConfirmation"
@@ -180,12 +175,6 @@ export const ResetPasswordDialog = ({
                 : t("passwordConfirmation")
             }
             fieldId="passwordConfirmation"
-            helperTextInvalid={errors.passwordConfirmation?.message}
-            validated={
-              errors.passwordConfirmation
-                ? ValidatedOptions.error
-                : ValidatedOptions.default
-            }
             isRequired
           >
             <PasswordInput
@@ -198,6 +187,11 @@ export const ResetPasswordDialog = ({
                   t("confirmPasswordDoesNotMatch").toString(),
               })}
             />
+            {errors.passwordConfirmation && (
+              <FormErrorText
+                message={errors.passwordConfirmation.message as string}
+              />
+            )}
           </FormGroup>
           <FormProvider {...form}>
             <DefaultSwitchControl
diff --git a/js/apps/admin-ui/src/user/user-section.css b/js/apps/admin-ui/src/user/user-section.css
index b9324f9323..b0fe41c672 100644
--- a/js/apps/admin-ui/src/user/user-section.css
+++ b/js/apps/admin-ui/src/user/user-section.css
@@ -1,14 +1,14 @@
 .keycloak__user-section__email-verified {
-  color: var(--pf-global--danger-color--100);
+  color: var(--pf-v5-global--danger-color--100);
 }
 
-button.pf-c-button.pf-m-primary.kc-join-group-button {
-  margin-left: var(--pf-global--spacer--md);
-  margin-right: var(--pf-global--spacer--xl);
+button.pf-v5-c-button.pf-m-primary.kc-join-group-button {
+  margin-left: var(--pf-v5-global--spacer--md);
+  margin-right: var(--pf-v5-global--spacer--xl);
 }
 
-.kc-consents-chip-group .pf-c-chip-group,
-kc-consents-chip-group .pf-c-chip-group__list {
+.kc-consents-chip-group .pf-v5-c-chip-group,
+kc-consents-chip-group .pf-v5-c-chip-group__list {
   width: 100%;
 }
 
@@ -17,95 +17,95 @@ button#kc-join-groups-button {
 }
 
 .kc-join-group-modal-check {
-  margin-right: var(--pf-global--spacer--sm);
+  margin-right: var(--pf-v5-global--spacer--sm);
 }
 
 .join-group-dialog-row-m-disabled {
   pointer-events: none;
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .kc-who-will-appear-button {
-  margin-left: var(--pf-global--spacer--md);
+  margin-left: var(--pf-v5-global--spacer--md);
 }
 
-.pf-c-chip.kc-consents-chip::before {
+.pf-v5-c-chip.kc-consents-chip::before {
   padding: 0px;
   border: 0;
 }
 
-.pf-c-chip.kc-consents-chip {
+.pf-v5-c-chip.kc-consents-chip {
   padding: 0px;
 }
 
-.kc-consents-chip-group .pf-c-chip-group__list-item {
+.kc-consents-chip-group .pf-v5-c-chip-group__list-item {
   margin-right: 0px;
 }
 
-.kc-consents-chip > .pf-c-chip__text {
-  font-size: var(--pf-c-table--cell--FontSize);
+.kc-consents-chip > .pf-v5-c-chip__text {
+  font-size: var(--pf-v5-c-table--cell--FontSize);
   max-width: 100%;
 }
 
-.pf-c-chip-group.kc-consents-chip-group
-  > div.pf-c-chip-group__main
-  > ul.pf-c-chip-group__list
+.pf-v5-c-chip-group.kc-consents-chip-group
+  > div.pf-v5-c-chip-group__main
+  > ul.pf-v5-c-chip-group__list
   li:first-child
-  .pf-c-chip__text::before {
+  .pf-v5-c-chip__text::before {
   content: "";
 }
 
-.pf-c-chip-group.kc-consents-chip-group
-  > div.pf-c-chip-group__main
-  > ul.pf-c-chip-group__list
-  .pf-c-chip__text::before {
+.pf-v5-c-chip-group.kc-consents-chip-group
+  > div.pf-v5-c-chip-group__main
+  > ul.pf-v5-c-chip-group__list
+  .pf-v5-c-chip__text::before {
   content: ", ";
 }
 
-div.pf-c-chip-group.kc-consents-chip-group
-  > div.pf-c-chip-group__main
-  > ul.pf-c-chip-group__list
-  > li.pf-c-chip-group__list-item:last-child
-  > button.pf-c-chip.pf-m-overflow::before {
+div.pf-v5-c-chip-group.kc-consents-chip-group
+  > div.pf-v5-c-chip-group__main
+  > ul.pf-v5-c-chip-group__list
+  > li.pf-v5-c-chip-group__list-item:last-child
+  > button.pf-v5-c-chip.pf-m-overflow::before {
   content: "";
-  margin-left: var(--pf-global--spacer--sm);
+  margin-left: var(--pf-v5-global--spacer--sm);
 }
 
-div.pf-c-chip-group.kc-consents-chip-group
-  > div.pf-c-chip-group__main
-  > ul.pf-c-chip-group__list
-  > li.pf-c-chip-group__list-item:last-child
-  > button.pf-c-chip.pf-m-overflow
+div.pf-v5-c-chip-group.kc-consents-chip-group
+  > div.pf-v5-c-chip-group__main
+  > ul.pf-v5-c-chip-group__list
+  > li.pf-v5-c-chip-group__list-item:last-child
+  > button.pf-v5-c-chip.pf-m-overflow
   > span::before {
   content: "";
-  margin-left: var(--pf-global--spacer--sm);
+  margin-left: var(--pf-v5-global--spacer--sm);
 }
 
 .kc-search-users-text {
-  margin-left: var(--pf-global--spacer--md);
-  color: var(--pf-global--Color--300);
+  margin-left: var(--pf-v5-global--spacer--md);
+  color: var(--pf-v5-global--Color--300);
 }
 
-article.pf-c-card.pf-m-flat.kc-linked-idps,
-article.pf-c-card.pf-m-flat.kc-available-idps {
+article.pf-v5-c-card.pf-m-flat.kc-linked-idps,
+article.pf-v5-c-card.pf-m-flat.kc-available-idps {
   border: 0px;
 }
 
-article.pf-c-card.pf-m-flat.kc-linked-idps > div > div > h1 {
+article.pf-v5-c-card.pf-m-flat.kc-linked-idps > div > div > h1 {
   margin-bottom: 0px;
 }
 
-article.pf-c-card.pf-m-flat.kc-available-idps > div > div > h1 {
+article.pf-v5-c-card.pf-m-flat.kc-available-idps > div > div > h1 {
   margin-bottom: 0px;
 }
 
 .kc-available-idps-text {
-  color: var(--pf-global--Color--200);
-  margin-top: var(--pf-global--spacer--sm);
+  color: var(--pf-v5-global--Color--200);
+  margin-top: var(--pf-v5-global--spacer--sm);
 }
 
 .kc-linked-idps-text {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .kc-no-providers-text {
@@ -113,30 +113,30 @@ article.pf-c-card.pf-m-flat.kc-available-idps > div > div > h1 {
 }
 
 .keycloak__user-credentials__reset-form {
-  --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 13rem;
+  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 13rem;
 }
 
-.pf-c-card__header.kc-form-panel__header {
+.pf-v5-c-card__header.kc-form-panel__header {
   padding-bottom: 0;
 }
 
-.pf-c-card__body.kc-form-panel__body {
+.pf-v5-c-card__body.kc-form-panel__body {
   padding-bottom: 0;
 }
 
-.pf-c-content.kc-no-providers-text {
+.pf-v5-c-content.kc-no-providers-text {
   margin-top: calc(
-    var(--pf-global--spacer--2xl) - var(--pf-global--spacer--sm)
+    var(--pf-v5-global--spacer--2xl) - var(--pf-v5-global--spacer--sm)
   );
-  margin-right: var(--pf-global--spacer--md);
-  margin-bottom: var(--pf-global--spacer--2xl);
+  margin-right: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v5-global--spacer--2xl);
 }
 
 .kc-username-view-header {
   overflow-wrap: anywhere;
 }
 
-.pf-c-table tbody > tr > * {
+.pf-v5-c-table tbody > tr > * {
   white-space: nowrap;
 }
 
diff --git a/js/libs/keycloak-masthead/package.json b/js/libs/keycloak-masthead/package.json
index dd1388a045..53a0e4a0b9 100644
--- a/js/libs/keycloak-masthead/package.json
+++ b/js/libs/keycloak-masthead/package.json
@@ -40,8 +40,8 @@
     }
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.278.0",
-    "@patternfly/react-styles": "^4.92.8",
+    "@patternfly/react-core": "^5.2.3",
+    "@patternfly/react-styles": "^5.2.1",
     "keycloak-js": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/js/libs/keycloak-masthead/src/KeycloakDropdown.tsx b/js/libs/keycloak-masthead/src/KeycloakDropdown.tsx
index a260bc5d5e..4c67898343 100644
--- a/js/libs/keycloak-masthead/src/KeycloakDropdown.tsx
+++ b/js/libs/keycloak-masthead/src/KeycloakDropdown.tsx
@@ -4,7 +4,7 @@ import {
   DropdownProps,
   DropdownToggle,
   KebabToggle,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 
 type KeycloakDropdownProps = Omit<DropdownProps, "toggle"> & {
   isKebab?: boolean;
@@ -27,9 +27,13 @@ export const KeycloakDropdown = ({
       position="right"
       toggle={
         isKebab ? (
-          <KebabToggle onToggle={setOpen}>{title}</KebabToggle>
+          <KebabToggle onToggle={(_event, val) => setOpen(val)}>
+            {title}
+          </KebabToggle>
         ) : (
-          <DropdownToggle onToggle={setOpen}>{title}</DropdownToggle>
+          <DropdownToggle onToggle={(_event, val) => setOpen(val)}>
+            {title}
+          </DropdownToggle>
         )
       }
       isOpen={open}
diff --git a/js/libs/keycloak-masthead/src/Masthead.tsx b/js/libs/keycloak-masthead/src/Masthead.tsx
index 98f08dfac6..5c1d98d943 100644
--- a/js/libs/keycloak-masthead/src/Masthead.tsx
+++ b/js/libs/keycloak-masthead/src/Masthead.tsx
@@ -1,15 +1,12 @@
+import { Avatar, AvatarProps, Brand, BrandProps } from "@patternfly/react-core";
 import {
-  Avatar,
-  AvatarProps,
-  Brand,
-  BrandProps,
   DropdownItem,
   PageHeader,
   PageHeaderProps,
   PageHeaderTools,
   PageHeaderToolsGroup,
   PageHeaderToolsItem,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { ReactNode } from "react";
 
 import { KeycloakDropdown } from "./KeycloakDropdown";
@@ -55,7 +52,7 @@ const KeycloakMasthead = ({
     extraItems.push(
       <DropdownItem
         key="manageAccount"
-        onClick={() => keycloak?.accountManagement()}
+        onClick={() => keycloak.accountManagement()}
       >
         {t("manageAccount")}
       </DropdownItem>,
@@ -63,13 +60,13 @@ const KeycloakMasthead = ({
   }
   if (hasLogout) {
     extraItems.push(
-      <DropdownItem key="signOut" onClick={() => keycloak?.logout()}>
+      <DropdownItem key="signOut" onClick={() => keycloak.logout()}>
         {t("signOut")}
       </DropdownItem>,
     );
   }
 
-  const picture = keycloak?.tokenParsed?.picture;
+  const picture = keycloak.tokenParsed?.picture;
   return (
     <PageHeader
       {...rest}
@@ -104,7 +101,7 @@ const KeycloakMasthead = ({
                 dropDownItems={[...dropdownItems, extraItems]}
                 title={
                   hasUsername
-                    ? loggedInUserName(keycloak?.tokenParsed, t)
+                    ? loggedInUserName(keycloak.tokenParsed, t)
                     : undefined
                 }
               />
diff --git a/js/libs/ui-shared/package.json b/js/libs/ui-shared/package.json
index 213ee2f0fb..b6284e5d5f 100644
--- a/js/libs/ui-shared/package.json
+++ b/js/libs/ui-shared/package.json
@@ -41,8 +41,8 @@
   },
   "dependencies": {
     "@keycloak/keycloak-admin-client": "workspace:*",
-    "@patternfly/react-core": "^4.278.0",
-    "@patternfly/react-icons": "^4.93.7",
+    "@patternfly/react-core": "^5.2.3",
+    "@patternfly/react-icons": "^5.2.1",
     "i18next": "^23.10.1",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
diff --git a/js/libs/ui-shared/src/controls/FormErrorText.tsx b/js/libs/ui-shared/src/controls/FormErrorText.tsx
new file mode 100644
index 0000000000..17f29e4745
--- /dev/null
+++ b/js/libs/ui-shared/src/controls/FormErrorText.tsx
@@ -0,0 +1,23 @@
+import {
+  FormHelperText,
+  FormHelperTextProps,
+  HelperText,
+  HelperTextItem,
+} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+
+export type FormErrorTextProps = FormHelperTextProps & {
+  message: string;
+};
+
+export const FormErrorText = ({ message, ...props }: FormErrorTextProps) => {
+  return (
+    <FormHelperText {...props}>
+      <HelperText>
+        <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+          {message}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+};
diff --git a/js/libs/ui-shared/src/controls/FormLabel.tsx b/js/libs/ui-shared/src/controls/FormLabel.tsx
index da9b199c40..126b857f08 100644
--- a/js/libs/ui-shared/src/controls/FormLabel.tsx
+++ b/js/libs/ui-shared/src/controls/FormLabel.tsx
@@ -1,10 +1,7 @@
-import {
-  FormGroup,
-  FormGroupProps,
-  ValidatedOptions,
-} from "@patternfly/react-core";
+import { FormGroup, FormGroupProps } from "@patternfly/react-core";
 import { PropsWithChildren, ReactNode } from "react";
 import { FieldError, FieldValues, Merge } from "react-hook-form";
+import { FormErrorText } from "./FormErrorText";
 import { HelpItem } from "./HelpItem";
 
 export type FieldProps<T extends FieldValues = FieldValues> = {
@@ -33,10 +30,11 @@ export const FormLabel = ({
         <HelpItem helpText={labelIcon} fieldLabelId={name} />
       ) : undefined
     }
-    helperTextInvalid={error?.message}
-    validated={error ? ValidatedOptions.error : ValidatedOptions.default}
     {...rest}
   >
     {children}
+    {error && (
+      <FormErrorText data-testid={`${name}-helper`} message={error.message} />
+    )}
   </FormGroup>
 );
diff --git a/js/libs/ui-shared/src/controls/HelpItem.tsx b/js/libs/ui-shared/src/controls/HelpItem.tsx
index 823ea39357..875345c39b 100644
--- a/js/libs/ui-shared/src/controls/HelpItem.tsx
+++ b/js/libs/ui-shared/src/controls/HelpItem.tsx
@@ -1,4 +1,4 @@
-import { Popover } from "@patternfly/react-core";
+import { Icon, Popover } from "@patternfly/react-core";
 import { HelpIcon } from "@patternfly/react-icons";
 import { ReactNode } from "react";
 import { useHelp } from "../context/HelpContext";
@@ -25,12 +25,18 @@ export const HelpItem = ({
             data-testid={`help-label-${fieldLabelId}`}
             aria-label={fieldLabelId}
             onClick={(e) => e.preventDefault()}
-            className="pf-c-form__group-label-help"
+            className="pf-v5-c-form__group-label-help"
           >
-            <HelpIcon noVerticalAlign={noVerticalAlign} />
+            <Icon isInline={noVerticalAlign}>
+              <HelpIcon />
+            </Icon>
           </button>
         )}
-        {unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
+        {unWrap && (
+          <Icon isInline={noVerticalAlign}>
+            <HelpIcon />
+          </Icon>
+        )}
       </>
     </Popover>
   ) : null;
diff --git a/js/libs/ui-shared/src/controls/PasswordControl.tsx b/js/libs/ui-shared/src/controls/PasswordControl.tsx
index 7a05a096f2..13c53ab64d 100644
--- a/js/libs/ui-shared/src/controls/PasswordControl.tsx
+++ b/js/libs/ui-shared/src/controls/PasswordControl.tsx
@@ -1,4 +1,9 @@
-import { ValidatedOptions } from "@patternfly/react-core";
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions,
+} from "@patternfly/react-core";
 import {
   FieldPath,
   FieldValues,
@@ -42,7 +47,6 @@ export const PasswordControl = <
       labelIcon={labelIcon}
       isRequired={required}
       error={fieldState.error}
-      helperText={props.helperText}
     >
       <PasswordInput
         isRequired={required}
@@ -55,6 +59,13 @@ export const PasswordControl = <
         {...rest}
         {...field}
       />
+      {props.helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{props.helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormLabel>
   );
 };
diff --git a/js/libs/ui-shared/src/controls/PasswordInput.tsx b/js/libs/ui-shared/src/controls/PasswordInput.tsx
index d860399664..5c2d702433 100644
--- a/js/libs/ui-shared/src/controls/PasswordInput.tsx
+++ b/js/libs/ui-shared/src/controls/PasswordInput.tsx
@@ -1,13 +1,15 @@
-import { Button, InputGroup } from "@patternfly/react-core";
-import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
-import { forwardRef, MutableRefObject, Ref, useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
-  KeycloakTextInput,
-  KeycloakTextInputProps,
-} from "../keycloak-text-input/KeycloakTextInput";
+  Button,
+  InputGroup,
+  InputGroupItem,
+  TextInput,
+  type TextInputProps,
+} from "@patternfly/react-core";
+import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
+import { MutableRefObject, Ref, forwardRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 
-export type PasswordInputProps = KeycloakTextInputProps & {
+export type PasswordInputProps = TextInputProps & {
   hasReveal?: boolean;
 };
 
@@ -20,11 +22,13 @@ const PasswordInputBase = ({
   const [hidePassword, setHidePassword] = useState(true);
   return (
     <InputGroup>
-      <KeycloakTextInput
-        {...rest}
-        type={hidePassword ? "password" : "text"}
-        ref={innerRef}
-      />
+      <InputGroupItem>
+        <TextInput
+          {...rest}
+          type={hidePassword ? "password" : "text"}
+          ref={innerRef}
+        />
+      </InputGroupItem>
       {hasReveal && (
         <Button
           variant="control"
diff --git a/js/libs/ui-shared/src/controls/SelectControl.tsx b/js/libs/ui-shared/src/controls/SelectControl.tsx
index 4014e68427..445c9500f4 100644
--- a/js/libs/ui-shared/src/controls/SelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/SelectControl.tsx
@@ -1,10 +1,10 @@
+import { ValidatedOptions } from "@patternfly/react-core";
 import {
   Select,
   SelectOption,
   SelectProps,
   SelectVariant,
-  ValidatedOptions,
-} from "@patternfly/react-core";
+} from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import {
   Controller,
@@ -99,7 +99,7 @@ export const SelectControl = <
           <Select
             {...rest}
             toggleId={name.slice(name.lastIndexOf(".") + 1)}
-            onToggle={(isOpen) => setOpen(isOpen)}
+            onToggle={(_event, isOpen) => setOpen(isOpen)}
             selections={
               isSelectBasedOptions(options)
                 ? options
diff --git a/js/libs/ui-shared/src/controls/SwitchControl.tsx b/js/libs/ui-shared/src/controls/SwitchControl.tsx
index 63dbf8344a..9fc51aaa9b 100644
--- a/js/libs/ui-shared/src/controls/SwitchControl.tsx
+++ b/js/libs/ui-shared/src/controls/SwitchControl.tsx
@@ -50,9 +50,9 @@ export const SwitchControl = <
             data-testid={props.name}
             label={props.labelOn}
             isChecked={props.stringify ? value === "true" : value}
-            onChange={(checked, e) => {
+            onChange={(e, checked) => {
               const value = props.stringify ? checked.toString() : checked;
-              props.onChange?.(checked, e);
+              props.onChange?.(e, checked);
               onChange(value);
             }}
           />
diff --git a/js/libs/ui-shared/src/controls/TextAreaControl.tsx b/js/libs/ui-shared/src/controls/TextAreaControl.tsx
index b0c677be1d..bfa2586858 100644
--- a/js/libs/ui-shared/src/controls/TextAreaControl.tsx
+++ b/js/libs/ui-shared/src/controls/TextAreaControl.tsx
@@ -1,13 +1,17 @@
-import { TextAreaProps, ValidatedOptions } from "@patternfly/react-core";
+import {
+  TextArea,
+  TextAreaProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
 import {
   FieldPath,
   FieldValues,
   PathValue,
-  useController,
   UseControllerProps,
+  useController,
 } from "react-hook-form";
+
 import { FormLabel } from "./FormLabel";
-import { KeycloakTextArea } from "./keycloak-text-area/KeycloakTextArea";
 
 export type TextAreaControlProps<
   T extends FieldValues,
@@ -41,7 +45,7 @@ export const TextAreaControl = <
       name={props.name}
       error={fieldState.error}
     >
-      <KeycloakTextArea
+      <TextArea
         isRequired={required}
         id={props.name}
         data-testid={props.name}
diff --git a/js/libs/ui-shared/src/controls/TextControl.tsx b/js/libs/ui-shared/src/controls/TextControl.tsx
index ffb08e9339..b29e10f690 100644
--- a/js/libs/ui-shared/src/controls/TextControl.tsx
+++ b/js/libs/ui-shared/src/controls/TextControl.tsx
@@ -1,15 +1,21 @@
-import { TextInputProps, ValidatedOptions } from "@patternfly/react-core";
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  TextInputProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import { ReactNode } from "react";
 import {
   FieldPath,
   FieldValues,
   PathValue,
-  useController,
   UseControllerProps,
+  useController,
 } from "react-hook-form";
 
-import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import { FormLabel } from "./FormLabel";
-import { ReactNode } from "react";
 
 export type TextControlProps<
   T extends FieldValues,
@@ -44,9 +50,8 @@ export const TextControl = <
       labelIcon={labelIcon}
       isRequired={required}
       error={fieldState.error}
-      helperText={props.helperText}
     >
-      <KeycloakTextInput
+      <TextInput
         isRequired={required}
         id={props.name}
         data-testid={props.name}
@@ -57,6 +62,13 @@ export const TextControl = <
         {...rest}
         {...field}
       />
+      {props.helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{props.helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormLabel>
   );
 };
diff --git a/js/libs/ui-shared/src/controls/keycloak-text-area/KeycloakTextArea.tsx b/js/libs/ui-shared/src/controls/keycloak-text-area/KeycloakTextArea.tsx
index 5981bed378..a4c07af53a 100644
--- a/js/libs/ui-shared/src/controls/keycloak-text-area/KeycloakTextArea.tsx
+++ b/js/libs/ui-shared/src/controls/keycloak-text-area/KeycloakTextArea.tsx
@@ -1,27 +1,23 @@
-import { TextArea, TextAreaProps } from "@patternfly/react-core";
-import { ComponentProps, forwardRef, HTMLProps } from "react";
+// TODO: Remove code once the following issue has been fixed:
+// https://github.com/patternfly/patternfly-react/issues/10192
+import { TextArea } from "@patternfly/react-core";
+import {
+  ComponentProps,
+  HTMLProps,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
 
-// PatternFly changes the signature of the 'onChange' handler for textarea elements.
+// PatternFly changes the signature of the 'onFocus' and 'onBlur' handlers for textarea elements.
 // This causes issues with React Hook Form as it expects the default signature for a textarea element.
 // So we have to create this wrapper component that takes care of converting these signatures for us.
 
 export type KeycloakTextAreaProps = Omit<
   ComponentProps<typeof TextArea>,
-  "onChange"
+  "onFocus" | "onBlur"
 > &
-  Pick<HTMLProps<HTMLTextAreaElement>, "onChange">;
+  Pick<HTMLProps<HTMLTextAreaElement>, "onFocus" | "onBlur">;
 
-export const KeycloakTextArea = forwardRef<
-  HTMLTextAreaElement,
-  KeycloakTextAreaProps
->(({ onChange, ...props }, ref) => {
-  const onChangeForward: TextAreaProps["onChange"] = (_, event) =>
-    onChange?.(event);
-
-  return <TextArea {...props} ref={ref} onChange={onChangeForward} />;
-});
-
-// We need to fake the displayName to match what PatternFly expects.
-// This is because PatternFly uses it to filter children in certain aspects.
-// This is a stupid approach, but it's not like we can change that.
-KeycloakTextArea.displayName = "TextArea";
+export const KeycloakTextArea = TextArea as ForwardRefExoticComponent<
+  KeycloakTextAreaProps & RefAttributes<HTMLTextAreaElement>
+>;
diff --git a/js/libs/ui-shared/src/icons/IconMapper.tsx b/js/libs/ui-shared/src/icons/IconMapper.tsx
index 7fd60aa2bc..8f8af27c3f 100644
--- a/js/libs/ui-shared/src/icons/IconMapper.tsx
+++ b/js/libs/ui-shared/src/icons/IconMapper.tsx
@@ -1,3 +1,4 @@
+import { Icon } from "@patternfly/react-core";
 import {
   BitbucketIcon,
   CubeIcon,
@@ -19,8 +20,12 @@ type IconMapperProps = {
 };
 
 export const IconMapper = ({ icon }: IconMapperProps) => {
-  const Icon = getIcon(icon);
-  return <Icon size="lg" alt={icon} />;
+  const SpecificIcon = getIcon(icon);
+  return (
+    <Icon size="lg">
+      <SpecificIcon alt={icon} />
+    </Icon>
+  );
 };
 
 function getIcon(icon: string) {
diff --git a/js/libs/ui-shared/src/keycloak-text-input/KeycloakTextInput.tsx b/js/libs/ui-shared/src/keycloak-text-input/KeycloakTextInput.tsx
deleted file mode 100644
index 8cce9cd873..0000000000
--- a/js/libs/ui-shared/src/keycloak-text-input/KeycloakTextInput.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TextInput, TextInputProps } from "@patternfly/react-core";
-import { ComponentProps, forwardRef, HTMLProps } from "react";
-
-// PatternFly changes the signature of the 'onChange' handler for input elements.
-// This causes issues with React Hook Form as it expects the default signature for an input element.
-// So we have to create this wrapper component that takes care of converting these signatures for us.
-
-export type KeycloakTextInputProps = Omit<
-  ComponentProps<typeof TextInput>,
-  "onChange"
-> &
-  Pick<HTMLProps<HTMLInputElement>, "onChange">;
-
-export const KeycloakTextInput = forwardRef<
-  HTMLInputElement,
-  KeycloakTextInputProps
->(({ onChange, ...props }, ref) => {
-  const onChangeForward: TextInputProps["onChange"] = (_, event) =>
-    onChange?.(event);
-
-  return <TextInput {...props} ref={ref} onChange={onChangeForward} />;
-});
-
-// We need to fake the displayName to match what PatternFly expects.
-// This is because PatternFly uses it to filter children in certain aspects.
-// This is a stupid approach, but it's not like we can change that.
-KeycloakTextInput.displayName = "TextInput";
diff --git a/js/libs/ui-shared/src/main.ts b/js/libs/ui-shared/src/main.ts
index d1ee975504..ff6ff9b324 100644
--- a/js/libs/ui-shared/src/main.ts
+++ b/js/libs/ui-shared/src/main.ts
@@ -1,33 +1,39 @@
+export { AlertProvider, useAlerts } from "./alerts/Alerts";
+export { Help, useHelp } from "./context/HelpContext";
 export { ContinueCancelModal } from "./continue-cancel/ContinueCancelModal";
+export {
+  FormErrorText,
+  type FormErrorTextProps,
+} from "./controls/FormErrorText";
+export { HelpItem } from "./controls/HelpItem";
+export { NumberControl } from "./controls/NumberControl";
+export { PasswordControl } from "./controls/PasswordControl";
+export { PasswordInput } from "./controls/PasswordInput";
 export { SelectControl } from "./controls/SelectControl";
 export type { SelectControlOption } from "./controls/SelectControl";
 export {
   SwitchControl,
   type SwitchControlProps,
 } from "./controls/SwitchControl";
-export { TextControl } from "./controls/TextControl";
 export { TextAreaControl } from "./controls/TextAreaControl";
-export { NumberControl } from "./controls/NumberControl";
-export { HelpItem } from "./controls/HelpItem";
-export { useHelp, Help } from "./context/HelpContext";
-export { KeycloakTextInput } from "./keycloak-text-input/KeycloakTextInput";
-export { KeycloakTextArea } from "./controls/keycloak-text-area/KeycloakTextArea";
-export { AlertProvider, useAlerts } from "./alerts/Alerts";
+export { TextControl } from "./controls/TextControl";
+export {
+  KeycloakTextArea,
+  type KeycloakTextAreaProps,
+} from "./controls/keycloak-text-area/KeycloakTextArea";
 export { IconMapper } from "./icons/IconMapper";
-export { useStoredState } from "./utils/useStoredState";
-export { isDefined } from "./utils/isDefined";
-export { createNamedContext } from "./utils/createNamedContext";
-export { useRequiredContext } from "./utils/useRequiredContext";
+export { FormPanel } from "./scroll-form/FormPanel";
+export { ScrollForm, mainPageContentId } from "./scroll-form/ScrollForm";
 export { UserProfileFields } from "./user-profile/UserProfileFields";
 export {
-  setUserProfileServerError,
-  isUserProfileError,
-  label,
   beerify,
   debeerify,
+  isUserProfileError,
+  label,
+  setUserProfileServerError,
 } from "./user-profile/utils";
 export type { UserFormFields } from "./user-profile/utils";
-export { ScrollForm, mainPageContentId } from "./scroll-form/ScrollForm";
-export { FormPanel } from "./scroll-form/FormPanel";
-export { PasswordControl } from "./controls/PasswordControl";
-export { PasswordInput } from "./controls/PasswordInput";
+export { createNamedContext } from "./utils/createNamedContext";
+export { isDefined } from "./utils/isDefined";
+export { useRequiredContext } from "./utils/useRequiredContext";
+export { useStoredState } from "./utils/useStoredState";
diff --git a/js/libs/ui-shared/src/scroll-form/ScrollForm.tsx b/js/libs/ui-shared/src/scroll-form/ScrollForm.tsx
index 4c6c47c3aa..6329500a27 100644
--- a/js/libs/ui-shared/src/scroll-form/ScrollForm.tsx
+++ b/js/libs/ui-shared/src/scroll-form/ScrollForm.tsx
@@ -71,7 +71,7 @@ export const ScrollForm = ({
           <JumpLinks
             isVertical
             // scrollableSelector has to point to the id of the element whose scrollTop changes
-            // to scroll the entire main section, it has to be the pf-c-page__main
+            // to scroll the entire main section, it has to be the pf-v5-c-page__main
             scrollableSelector={`#${mainPageContentId}`}
             label={label}
             offset={100}
diff --git a/js/libs/ui-shared/src/scroll-form/ScrollPanel.tsx b/js/libs/ui-shared/src/scroll-form/ScrollPanel.tsx
index a0517f3ddb..e717f0950d 100644
--- a/js/libs/ui-shared/src/scroll-form/ScrollPanel.tsx
+++ b/js/libs/ui-shared/src/scroll-form/ScrollPanel.tsx
@@ -11,7 +11,7 @@ type ScrollPanelProps = HTMLProps<HTMLFormElement> & {
 export const ScrollPanel = (props: ScrollPanelProps) => {
   const { title, children, scrollId, ...rest } = props;
   return (
-    <section {...rest} style={{ marginTop: "var(--pf-global--spacer--lg)" }}>
+    <section {...rest} style={{ marginTop: "var(--pf-v5-global--spacer--lg)" }}>
       <>
         <FormTitle id={scrollId} title={title} />
         {children}
diff --git a/js/libs/ui-shared/src/scroll-form/form-title.module.css b/js/libs/ui-shared/src/scroll-form/form-title.module.css
index 8c1fbfa9bf..8e1e2ff955 100644
--- a/js/libs/ui-shared/src/scroll-form/form-title.module.css
+++ b/js/libs/ui-shared/src/scroll-form/form-title.module.css
@@ -1,4 +1,4 @@
 
 .title {
-  margin-bottom: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-v5-global--spacer--lg);
 }
\ No newline at end of file
diff --git a/js/libs/ui-shared/src/scroll-form/scroll-form.module.css b/js/libs/ui-shared/src/scroll-form/scroll-form.module.css
index 78ec5feead..5cdb9f0b03 100644
--- a/js/libs/ui-shared/src/scroll-form/scroll-form.module.css
+++ b/js/libs/ui-shared/src/scroll-form/scroll-form.module.css
@@ -1,5 +1,5 @@
 .panel {
-  margin-top: var(--pf-global--spacer--lg);
+  margin-top: var(--pf-v5-global--spacer--lg);
 }
 
 .sticky {
diff --git a/js/libs/ui-shared/src/user-profile/MultiInputComponent.tsx b/js/libs/ui-shared/src/user-profile/MultiInputComponent.tsx
index 63faeebf68..ace70f10c0 100644
--- a/js/libs/ui-shared/src/user-profile/MultiInputComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/MultiInputComponent.tsx
@@ -5,6 +5,7 @@ import {
   TextInput,
   TextInputProps,
   TextInputTypes,
+  InputGroupItem,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 import { type TFunction } from "i18next";
@@ -102,25 +103,29 @@ const MultiLineInput = ({
       {fields.map((value, index) => (
         <Fragment key={index}>
           <InputGroup>
-            <TextInput
-              data-testid={name + index}
-              onChange={(value) => updateValue(index, value)}
-              name={`${name}.${index}.value`}
-              value={value}
-              isDisabled={isDisabled}
-              type={type}
-              {...rest}
-            />
-            <Button
-              data-testid={"remove" + index}
-              variant={ButtonVariant.link}
-              onClick={() => remove(index)}
-              tabIndex={-1}
-              aria-label={t("remove")}
-              isDisabled={fields.length === 1 || isDisabled}
-            >
-              <MinusCircleIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                data-testid={name + index}
+                onChange={(_event, value) => updateValue(index, value)}
+                name={`${name}.${index}.value`}
+                value={value}
+                isDisabled={isDisabled}
+                type={type}
+                {...rest}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                data-testid={"remove" + index}
+                variant={ButtonVariant.link}
+                onClick={() => remove(index)}
+                tabIndex={-1}
+                aria-label={t("remove")}
+                isDisabled={fields.length === 1 || isDisabled}
+              >
+                <MinusCircleIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
           {index === fields.length - 1 && (
             <Button
diff --git a/js/libs/ui-shared/src/user-profile/SelectComponent.tsx b/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
index edbecb2c24..1e8559b914 100644
--- a/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/SelectComponent.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption } from "@patternfly/react-core";
+import { Select, SelectOption } from "@patternfly/react-core/deprecated";
 import { useState } from "react";
 import { Controller, ControllerRenderProps } from "react-hook-form";
 import {
@@ -53,7 +53,7 @@ export const SelectComponent = (props: UserProfileFieldProps) => {
         render={({ field }) => (
           <Select
             toggleId={attribute.name}
-            onToggle={(b) => setOpen(b)}
+            onToggle={(_event, b) => setOpen(b)}
             isCreatable
             onCreateOption={(value) => setValue(value, field)}
             onSelect={(_, value) => {
diff --git a/js/libs/ui-shared/src/user-profile/TextComponent.tsx b/js/libs/ui-shared/src/user-profile/TextComponent.tsx
index aac5d7e490..6a1338c650 100644
--- a/js/libs/ui-shared/src/user-profile/TextComponent.tsx
+++ b/js/libs/ui-shared/src/user-profile/TextComponent.tsx
@@ -1,5 +1,5 @@
-import { TextInputTypes } from "@patternfly/react-core";
-import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
+import { TextInput, TextInputTypes } from "@patternfly/react-core";
+
 import { UserProfileFieldProps } from "./UserProfileFields";
 import { UserProfileGroup } from "./UserProfileGroup";
 import { fieldName, isRequiredAttribute } from "./utils";
@@ -13,7 +13,7 @@ export const TextComponent = (props: UserProfileFieldProps) => {
 
   return (
     <UserProfileGroup {...props}>
-      <KeycloakTextInput
+      <TextInput
         id={attribute.name}
         data-testid={attribute.name}
         type={type}
diff --git a/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx b/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx
index 9aef0c72f9..e1fc2e0711 100644
--- a/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx
+++ b/js/libs/ui-shared/src/user-profile/UserProfileFields.tsx
@@ -141,9 +141,9 @@ export const UserProfileFields = ({
         .map(({ group, attributes }) => ({
           title: label(t, group.displayHeader, group.name) || t("general"),
           panel: (
-            <div className="pf-c-form">
+            <div className="pf-v5-c-form">
               {group.displayDescription && (
-                <Text className="pf-u-pb-lg">
+                <Text className="pf-v5-u-pb-lg">
                   {label(t, group.displayDescription, "")}
                 </Text>
               )}
diff --git a/js/libs/ui-shared/src/user-profile/UserProfileGroup.tsx b/js/libs/ui-shared/src/user-profile/UserProfileGroup.tsx
index 23e0fc0ecf..bed646db8c 100644
--- a/js/libs/ui-shared/src/user-profile/UserProfileGroup.tsx
+++ b/js/libs/ui-shared/src/user-profile/UserProfileGroup.tsx
@@ -5,6 +5,7 @@ import { get } from "lodash-es";
 import { PropsWithChildren, ReactNode } from "react";
 import { UseFormReturn } from "react-hook-form";
 
+import { FormErrorText } from "../controls/FormErrorText";
 import { HelpItem } from "../controls/HelpItem";
 import {
   UserFormFields,
@@ -33,16 +34,13 @@ export const UserProfileGroup = ({
   } = form;
 
   const component = renderer?.(attribute);
+  const error = get(errors, fieldName(attribute.name));
   return (
     <FormGroup
       key={attribute.name}
       label={labelAttribute(t, attribute) || ""}
       fieldId={attribute.name}
       isRequired={isRequiredAttribute(attribute)}
-      validated={get(errors, fieldName(attribute.name)) ? "error" : "default"}
-      helperTextInvalid={t(
-        get(errors, fieldName(attribute.name))?.message as string,
-      )}
       labelIcon={
         helpText ? (
           <HelpItem helpText={helpText} fieldLabelId={attribute.name!} />
@@ -57,6 +55,12 @@ export const UserProfileGroup = ({
       ) : (
         children
       )}
+      {error && (
+        <FormErrorText
+          data-testid={`${attribute.name}-helper`}
+          message={error.message as string}
+        />
+      )}
     </FormGroup>
   );
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2ce351810..e5a2b66876 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,17 +69,17 @@ importers:
   js/apps/account-ui:
     dependencies:
       '@patternfly/patternfly':
-        specifier: ^4.224.5
-        version: 4.224.5
+        specifier: ^5.2.1
+        version: 5.2.1
       '@patternfly/react-core':
-        specifier: ^4.278.0
-        version: 4.278.1(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.3
+        version: 5.2.3(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-icons':
-        specifier: ^4.93.7
-        version: 4.93.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.1
+        version: 5.2.1(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-table':
-        specifier: ^4.113.6
-        version: 4.113.6(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.4
+        version: 5.2.4(react-dom@18.2.0)(react@18.2.0)
       i18next:
         specifier: ^23.10.1
         version: 23.10.1
@@ -151,26 +151,26 @@ importers:
         specifier: workspace:*
         version: link:../../libs/keycloak-admin-client
       '@patternfly/patternfly':
-        specifier: ^4.224.5
-        version: 4.224.5
+        specifier: ^5.2.1
+        version: 5.2.1
       '@patternfly/react-code-editor':
-        specifier: ^4.82.121
-        version: 4.82.121(react-dom@18.2.0)(react-monaco-editor@0.51.0)(react@18.2.0)
+        specifier: ^5.2.3
+        version: 5.2.3(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-core':
-        specifier: ^4.278.0
-        version: 4.278.1(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.3
+        version: 5.2.3(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-icons':
-        specifier: ^4.93.7
-        version: 4.93.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.1
+        version: 5.2.1(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-styles':
-        specifier: ^4.92.8
-        version: 4.92.8
+        specifier: ^5.2.1
+        version: 5.2.1
       '@patternfly/react-table':
-        specifier: ^4.113.6
-        version: 4.113.6(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.4
+        version: 5.2.4(react-dom@18.2.0)(react@18.2.0)
       admin-ui:
         specifier: 'file:'
-        version: file:js/apps/admin-ui(@types/react@18.2.65)(react-monaco-editor@0.51.0)
+        version: file:js/apps/admin-ui(@types/react@18.2.65)
       dagre:
         specifier: ^0.8.5
         version: 0.8.5
@@ -394,11 +394,11 @@ importers:
   js/libs/keycloak-masthead:
     dependencies:
       '@patternfly/react-core':
-        specifier: ^4.278.0
-        version: 4.278.1(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.3
+        version: 5.2.3(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-styles':
-        specifier: ^4.92.8
-        version: 4.92.8
+        specifier: ^5.2.1
+        version: 5.2.1
       keycloak-js:
         specifier: workspace:*
         version: link:../keycloak-js
@@ -437,11 +437,11 @@ importers:
         specifier: workspace:*
         version: link:../keycloak-admin-client
       '@patternfly/react-core':
-        specifier: ^4.278.0
-        version: 4.278.1(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.3
+        version: 5.2.3(react-dom@18.2.0)(react@18.2.0)
       '@patternfly/react-icons':
-        specifier: ^4.93.7
-        version: 4.93.7(react-dom@18.2.0)(react@18.2.0)
+        specifier: ^5.2.1
+        version: 5.2.1(react-dom@18.2.0)(react@18.2.0)
       i18next:
         specifier: ^23.10.1
         version: 23.10.1
@@ -1425,6 +1425,28 @@ packages:
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
     dev: true
 
+  /@monaco-editor/loader@1.4.0(monaco-editor@0.47.0):
+    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+    dependencies:
+      monaco-editor: 0.47.0
+      state-local: 1.0.7
+    dev: false
+
+  /@monaco-editor/react@4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.47.0)
+      monaco-editor: 0.47.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1559,21 +1581,22 @@ packages:
     resolution: {integrity: sha512-n5xFjyj1J4eIFZ7XeU6K44POKRAuDlO5yALPbn084y+jPy1j861AaQ+zIUbzCi4IzBlHrvoXVKij7p1zy7Ditg==}
     dev: false
 
-  /@patternfly/react-code-editor@4.82.121(react-dom@18.2.0)(react-monaco-editor@0.51.0)(react@18.2.0):
-    resolution: {integrity: sha512-c6RYoXK4vlU6jBnshVx8zw/MHeUU37/WdnO3e5n5tf7Vxkhv/0H+YwMZ2YR6zuCq8UD4dG0+cl7W6HUC1ZgBVA==}
+  /@patternfly/react-code-editor@5.2.3(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aO9BrWOMVu5vxCEnV66XmWHTWGLThfe4WYBpgytmy8kMbEd/qi5y3quJb8HRWP+osUfa+2m/+1fWAn9qgA2pQg==}
     peerDependencies:
-      react: ^16.8 || ^17 || ^18
-      react-dom: ^16.8 || ^17 || ^18
-      react-monaco-editor: ^0.51.0
+      react: ^17 || ^18
+      react-dom: ^17 || ^18
     dependencies:
-      '@patternfly/react-core': 4.278.1(react-dom@18.2.0)(react@18.2.0)
-      '@patternfly/react-icons': 4.93.7(react-dom@18.2.0)(react@18.2.0)
-      '@patternfly/react-styles': 4.92.8
+      '@monaco-editor/react': 4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-core': 5.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-icons': 5.2.1(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-styles': 5.2.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-dropzone: 9.0.0(react@18.2.0)
-      react-monaco-editor: 0.51.0(@types/react@18.2.65)(monaco-editor@0.47.0)(react@18.2.0)
+      react-dropzone: 14.2.3(react@18.2.0)
       tslib: 2.6.2
+    transitivePeerDependencies:
+      - monaco-editor
     dev: false
 
   /@patternfly/react-core@4.278.1(react-dom@18.2.0)(react@18.2.0):
@@ -1593,6 +1616,22 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@patternfly/react-core@5.2.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-MJeOLyJFbZPV+cj4LjL15nUuhJUwFuqLFiv6f2YubRqHl/+z05oM0byhwfm/qu2VnKByY6X6lu3Hp+hMTZcbOA==}
+    peerDependencies:
+      react: ^17 || ^18
+      react-dom: ^17 || ^18
+    dependencies:
+      '@patternfly/react-icons': 5.2.1(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-styles': 5.2.1
+      '@patternfly/react-tokens': 5.2.1
+      focus-trap: 7.5.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-dropzone: 14.2.3(react@18.2.0)
+      tslib: 2.6.2
+    dev: false
+
   /@patternfly/react-icons@4.93.7(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3kr35dgba7Qz5CSzmfH0rIjSvBC5xkmiknf3SvVUVxaiVA7KRowID8viYHeZlf3v/Oa3sEewaH830Q0t+nWsZQ==}
     peerDependencies:
@@ -1603,20 +1642,34 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@patternfly/react-icons@5.2.1(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aeJ0X+U2NDe8UmI5eQiT0iuR/wmUq97UkDtx3HoZcpRb9T6eUBfysllxjRqHS8rOOspdU8OWq+CUhQ/E2ZDibg==}
+    peerDependencies:
+      react: ^17 || ^18
+      react-dom: ^17 || ^18
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@patternfly/react-styles@4.92.8:
     resolution: {integrity: sha512-K4lUU8O4HiCX9NeuNUIrPgN3wlGERCxJVio+PAjd8hpJD/PKnjFfOJ9u6/Cii3qLy/5ZviWPRNHbGiwA/+YUhg==}
     dev: false
 
-  /@patternfly/react-table@4.113.6(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-09TfJISmJVsCH0pTSFtHY0PBWVJpffT0DJT8WvMNttU/vpC7XJVdeXi+yWaIUoqfgZvL0c7Cmu5rUT97zUODJQ==}
+  /@patternfly/react-styles@5.2.1:
+    resolution: {integrity: sha512-GT96hzI1QenBhq6Pfc51kxnj9aVLjL1zSLukKZXcYVe0HPOy0BFm90bT1Fo4e/z7V9cDYw4SqSX1XLc3O4jsTw==}
+    dev: false
+
+  /@patternfly/react-table@5.2.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-WCt4I6XYKRHXcasDqcOX70ctkgPVBAvlOv67KhaZsedxUU+B2NT1kiI7Jr7tD4SrR+jQs0MCF/bbRk1QM+rBqg==}
     peerDependencies:
-      react: ^16.8 || ^17 || ^18
-      react-dom: ^16.8 || ^17 || ^18
+      react: ^17 || ^18
+      react-dom: ^17 || ^18
     dependencies:
-      '@patternfly/react-core': 4.278.1(react-dom@18.2.0)(react@18.2.0)
-      '@patternfly/react-icons': 4.93.7(react-dom@18.2.0)(react@18.2.0)
-      '@patternfly/react-styles': 4.92.8
-      '@patternfly/react-tokens': 4.94.7
+      '@patternfly/react-core': 5.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-icons': 5.2.1(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-styles': 5.2.1
+      '@patternfly/react-tokens': 5.2.1
       lodash: 4.17.21
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -1627,6 +1680,10 @@ packages:
     resolution: {integrity: sha512-h+ducOLDMSxcuec3+YY3x+stM5ZUSnrl/lC/eVmjypil2El08NuE2MNEPMQWdhrod6VRRZFMNqZw/m82iv6U1A==}
     dev: false
 
+  /@patternfly/react-tokens@5.2.1:
+    resolution: {integrity: sha512-8GYz/jnJTGAWUJt5eRAW5dtyiHPKETeFJBPGHaUQnvi/t1ZAkoy8i4Kd/RlHsDC7ktiu813SKCmlzwBwldAHKg==}
+    dev: false
+
   /@pkgr/utils@2.4.2:
     resolution: {integrity: sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -5424,6 +5481,12 @@ packages:
       tabbable: 5.3.3
     dev: false
 
+  /focus-trap@7.5.2:
+    resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==}
+    dependencies:
+      tabbable: 6.2.0
+    dev: false
+
   /font-awesome-sass@4.7.0:
     resolution: {integrity: sha512-apO2Nw3XP/Zv7fLxa+MnPnvJ/GdkH6qWrLrtN5oQrFL7RPprzHKROjN94jgyoxM+T7PQBhY9F/SwOKbBaLyXxg==}
     requiresBuild: true
@@ -7596,19 +7659,6 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
-  /react-monaco-editor@0.51.0(@types/react@18.2.65)(monaco-editor@0.47.0)(react@18.2.0):
-    resolution: {integrity: sha512-6jx1V8p6gHVKJHFaTvicOtmlhFjOJhekobeNd92ZAo7F5UvAin1cF7bxWLCKgtxClYZ7CB3Ar284Kpbhj22FpQ==}
-    peerDependencies:
-      '@types/react': '>=17 <= 18'
-      monaco-editor: ^0.34.1
-      react: '>=17 <= 18'
-    dependencies:
-      '@types/react': 18.2.65
-      monaco-editor: 0.47.0
-      prop-types: 15.8.1
-      react: 18.2.0
-    dev: false
-
   /react-router-dom@6.22.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==}
     engines: {node: '>=14.0.0'}
@@ -8142,6 +8192,10 @@ packages:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
 
+  /state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+    dev: false
+
   /std-env@3.6.0:
     resolution: {integrity: sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg==}
     dev: true
@@ -8338,6 +8392,10 @@ packages:
     resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==}
     dev: false
 
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: false
+
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -9357,18 +9415,18 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  file:js/apps/admin-ui(@types/react@18.2.65)(react-monaco-editor@0.51.0):
+  file:js/apps/admin-ui(@types/react@18.2.65):
     resolution: {directory: js/apps/admin-ui, type: directory}
     id: file:js/apps/admin-ui
     name: admin-ui
     dependencies:
       '@keycloak/keycloak-admin-client': link:js/libs/keycloak-admin-client
-      '@patternfly/patternfly': 4.224.5
-      '@patternfly/react-code-editor': 4.82.121(react-dom@18.2.0)(react-monaco-editor@0.51.0)(react@18.2.0)
-      '@patternfly/react-core': 4.278.1(react-dom@18.2.0)(react@18.2.0)
-      '@patternfly/react-icons': 4.93.7(react-dom@18.2.0)(react@18.2.0)
-      '@patternfly/react-styles': 4.92.8
-      '@patternfly/react-table': 4.113.6(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/patternfly': 5.2.1
+      '@patternfly/react-code-editor': 5.2.3(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-core': 5.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-icons': 5.2.1(react-dom@18.2.0)(react@18.2.0)
+      '@patternfly/react-styles': 5.2.1
+      '@patternfly/react-table': 5.2.4(react-dom@18.2.0)(react@18.2.0)
       dagre: 0.8.5
       file-saver: 2.0.5
       file-selector: 0.6.0
@@ -9392,6 +9450,5 @@ packages:
       - '@types/react'
       - encoding
       - immer
-      - react-monaco-editor
       - react-native
     dev: false
diff --git a/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/page/AbstractPatternFlyAlert.java b/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/page/AbstractPatternFlyAlert.java
index 90e653008e..943779b1c2 100644
--- a/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/page/AbstractPatternFlyAlert.java
+++ b/testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/page/AbstractPatternFlyAlert.java
@@ -41,7 +41,7 @@ import static org.keycloak.testsuite.util.WaitUtils.PAGELOAD_TIMEOUT_MILLIS;
  * @author tkyjovsk
  */
 public abstract class AbstractPatternFlyAlert {
-    public static final String ALERT_CLASS_NAME = "alert";
+    public static final String ALERT_CLASS_NAME = "pf-v5-c-alert";
 
     protected final Logger log = Logger.getLogger(this.getClass());
 
diff --git a/testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/adapter/example/cors/CorsExampleAdapterTest.java b/testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/adapter/example/cors/CorsExampleAdapterTest.java
index a1dd9dbc97..3c3a42049f 100644
--- a/testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/adapter/example/cors/CorsExampleAdapterTest.java
+++ b/testsuite/integration-arquillian/tests/base/src/test/java/org/keycloak/testsuite/adapter/example/cors/CorsExampleAdapterTest.java
@@ -170,7 +170,7 @@ public class CorsExampleAdapterTest extends AbstractExampleAdapterTest {
                 "/auth/admin/master/console/#/master/info");
         jsDriverTestRealmLoginPage.form().login("admin", "admin");
         // just get the first list description which is the version
-        List<WebElement> elements = jsDriver.findElements(By.xpath(".//dd[@class='pf-c-description-list__description']"));
+        List<WebElement> elements = jsDriver.findElements(By.xpath(".//dd[@class='pf-v5-c-description-list__description']"));
         if (!elements.isEmpty()) {
             return elements.get(0).getText();
         }
diff --git a/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/AbstractLoggedInPage.java b/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/AbstractLoggedInPage.java
index f8b1fd0735..e46b2e30da 100644
--- a/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/AbstractLoggedInPage.java
+++ b/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/AbstractLoggedInPage.java
@@ -36,7 +36,7 @@ import static org.keycloak.testsuite.util.UIUtils.getTextFromElement;
 public abstract class AbstractLoggedInPage extends AbstractAccountPage {
     public static final String ACCOUNT_SECURITY_ID = "account-security";
 
-    @FindBy(xpath = "//div[@id='app']//header[@class='pf-c-page__header']")
+    @FindBy(xpath = "//div[@id='app']//header[@class='pf-v5-c-page__header']")
     private LoggedInPageHeader header;
 
     @FindBy(id = "page-sidebar")
@@ -48,7 +48,7 @@ public abstract class AbstractLoggedInPage extends AbstractAccountPage {
     @Page
     private ContinueCancelModal modal;
 
-    @FindBy(className = "pf-c-title")
+    @FindBy(className = "pf-v5-c-title")
     private WebElement pageTitle;
 
     @FindBy(id = "refresh-page")
diff --git a/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/MyResourcesPage.java b/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/MyResourcesPage.java
index fa67c9d50c..0d6bbaa8d1 100644
--- a/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/MyResourcesPage.java
+++ b/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/MyResourcesPage.java
@@ -140,7 +140,7 @@ public class MyResourcesPage extends AbstractLoggedInPage {
 
         final WebElement tab = sharedWithMe.findElement(By.xpath("./.."));
         //test to see that the tab is really clicked
-        assertEquals("pf-c-tabs__item pf-m-current", tab.getAttribute("class"));
+        assertEquals("pf-v5-c-tabs__item pf-m-current", tab.getAttribute("class"));
     }
 
     public boolean containsResource(String resourceName) {
@@ -150,15 +150,15 @@ public class MyResourcesPage extends AbstractLoggedInPage {
     public void createShare(String userName) {
         driver.findElement(By.id("username")).sendKeys(userName);
         driver.findElement(By.id("add")).click();
-        driver.findElement(By.className("pf-c-select__toggle-typeahead")).click();
-        driver.findElement(By.xpath("//button[@class='pf-c-select__menu-item' and text()='Scope A']")).click();
+        driver.findElement(By.className("pf-v5-c-select__toggle-typeahead")).click();
+        driver.findElement(By.xpath("//button[@class='pf-v5-c-select__menu-item' and text()='Scope A']")).click();
         driver.findElement(By.id("done")).click();
         waitForModalFadeOut();
     }
 
     public void removeAllPermissions() {
         assertThat(getScopesTexts(), containsInAnyOrder("Scope A", "Scope B"));
-        driver.findElement(By.className("pf-c-select__toggle-clear")).click();
+        driver.findElement(By.className("pf-v5-c-select__toggle-clear")).click();
         driver.findElement(By.id("save-0")).click();
         driver.findElement(By.id("done")).click();
         waitForModalFadeOut();
@@ -173,10 +173,10 @@ public class MyResourcesPage extends AbstractLoggedInPage {
     }
 
     private void waitForModalFadeIn() {
-        waitGui().until().element(By.className("pf-c-modal-box")).is().present();
+        waitGui().until().element(By.className("pf-v5-c-modal-box")).is().present();
     }
 
     private void waitForModalFadeOut() {
-        waitGui().until().element(By.className("pf-c-backdrop")).is().not().present();
+        waitGui().until().element(By.className("pf-v5-c-backdrop")).is().not().present();
     }
 }
diff --git a/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/fragment/ContentAlert.java b/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/fragment/ContentAlert.java
index b88e38aecd..c0d4c0ead6 100644
--- a/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/fragment/ContentAlert.java
+++ b/testsuite/integration-arquillian/tests/other/base-ui/src/main/java/org/keycloak/testsuite/ui/account3/page/fragment/ContentAlert.java
@@ -34,7 +34,7 @@ import static org.keycloak.testsuite.util.WaitUtils.waitUntilElementIsNotPresent
  * @author Vaclav Muzikar <vmuzikar@redhat.com>
  */
 public class ContentAlert {
-    private static final String ROOT_ID = "//ul[@class='pf-c-alert-group pf-m-toast']/li[1]";
+    private static final String ROOT_ID = "//ul[@data-testid='alerts']/li[1]";
 
     //The first alert from the alert group is what we are interested in.
     @FindBy(xpath = ROOT_ID + "//div")
@@ -122,10 +122,10 @@ public class ContentAlert {
         @Root
         private WebElement root;
 
-        @FindBy(className = "pf-c-alert__title")
+        @FindBy(className = "pf-v5-c-alert__title")
         private WebElement messageElement;
 
-        @FindBy(className = "pf-c-alert__action")
+        @FindBy(className = "pf-v5-c-alert__action")
         private WebElement closeBtn;
 
         public WebElement getRoot() {