diff --git a/web/src/admin/AdminInterface.ts b/web/src/admin/AdminInterface.ts
index fa6d4efa5..cc7f1e000 100644
--- a/web/src/admin/AdminInterface.ts
+++ b/web/src/admin/AdminInterface.ts
@@ -68,21 +68,21 @@ export class AdminInterface extends Interface {
             PFButton,
             PFDrawer,
             css`
-                .pf-c-page__main,
-                .pf-c-drawer__content,
-                .pf-c-page__drawer {
+                .pf-v5-c-page__main,
+                .pf-v5-c-drawer__content,
+                .pf-v5-c-page__drawer {
                     z-index: auto !important;
                     background-color: transparent;
                 }
                 .display-none {
                     display: none;
                 }
-                .pf-c-page {
-                    background-color: var(--pf-c-page--BackgroundColor) !important;
+                .pf-v5-c-page {
+                    background-color: var(--pf-v5-c-page--BackgroundColor) !important;
                 }
                 /* Global page background colour */
-                :host([theme="dark"]) .pf-c-page {
-                    --pf-c-page--BackgroundColor: var(--ak-dark-background);
+                :host([theme="dark"]) .pf-v5-c-page {
+                    --pf-v5-c-page--BackgroundColor: var(--ak-dark-background);
                 }
             `,
         ];
@@ -123,9 +123,9 @@ export class AdminInterface extends Interface {
 
     render(): TemplateResult {
         return html` <ak-locale-context>
-            <div class="pf-c-page">
+            <div class="pf-v5-c-page">
                 <ak-sidebar
-                    class="pf-c-page__sidebar ${this.sidebarOpen
+                    class="pf-v5-c-page__sidebar ${this.sidebarOpen
                         ? "pf-m-expanded"
                         : "pf-m-collapsed"} ${this.activeTheme === UiThemeEnum.Light
                         ? "pf-m-light"
@@ -133,19 +133,19 @@ export class AdminInterface extends Interface {
                 >
                     ${this.renderSidebarItems()}
                 </ak-sidebar>
-                <div class="pf-c-page__drawer">
+                <div class="pf-v5-c-page__drawer">
                     <div
-                        class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
+                        class="pf-v5-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
                             ? "pf-m-expanded"
                             : "pf-m-collapsed"}"
                     >
-                        <div class="pf-c-drawer__main">
-                            <div class="pf-c-drawer__content">
-                                <div class="pf-c-drawer__body">
-                                    <main class="pf-c-page__main">
+                        <div class="pf-v5-c-drawer__main">
+                            <div class="pf-v5-c-drawer__content">
+                                <div class="pf-v5-c-drawer__body">
+                                    <main class="pf-v5-c-page__main">
                                         <ak-router-outlet
                                             role="main"
-                                            class="pf-c-page__main"
+                                            class="pf-v5-c-page__main"
                                             tabindex="-1"
                                             id="main-content"
                                             defaultUrl="/administration/overview"
@@ -156,14 +156,14 @@ export class AdminInterface extends Interface {
                                 </div>
                             </div>
                             <ak-notification-drawer
-                                class="pf-c-drawer__panel pf-m-width-33 ${this
+                                class="pf-v5-c-drawer__panel pf-m-width-33 ${this
                                     .notificationDrawerOpen
                                     ? ""
                                     : "display-none"}"
                                 ?hidden=${!this.notificationDrawerOpen}
                             ></ak-notification-drawer>
                             <ak-api-drawer
-                                class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
+                                class="pf-v5-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
                                     ? ""
                                     : "display-none"}"
                                 ?hidden=${!this.apiDrawerOpen}
diff --git a/web/src/admin/DebugPage.ts b/web/src/admin/DebugPage.ts
index 68db6ae27..e3ce23ead 100644
--- a/web/src/admin/DebugPage.ts
+++ b/web/src/admin/DebugPage.ts
@@ -25,13 +25,13 @@ export class DebugPage extends AKElement {
     render(): TemplateResult {
         return html`
             <ak-page-header icon="pf-icon pf-icon-user" header="Debug"> </ak-page-header>
-            <section class="pf-c-page__main-section">
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-l-grid__item pf-m-3-col pf-c-card">
-                        <div class="pf-c-card__title">Sentry</div>
-                        <div class="pf-c-card__body">
+            <section class="pf-v5-c-page__main-section">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-l-grid__item pf-m-3-col pf-v5-c-card">
+                        <div class="pf-v5-c-card__title">Sentry</div>
+                        <div class="pf-v5-c-card__body">
                             <button
-                                class="pf-c-button pf-m-primary"
+                                class="pf-v5-c-button pf-m-primary"
                                 @click=${() => {
                                     Sentry.captureException(new Error("test error"));
                                 }}
@@ -40,11 +40,11 @@ export class DebugPage extends AKElement {
                             </button>
                         </div>
                     </div>
-                    <div class="pf-l-grid__item pf-m-3-col pf-c-card">
-                        <div class="pf-c-card__title">Misc</div>
-                        <div class="pf-c-card__body">
+                    <div class="pf-v5-l-grid__item pf-m-3-col pf-v5-c-card">
+                        <div class="pf-v5-c-card__title">Misc</div>
+                        <div class="pf-v5-c-card__body">
                             <button
-                                class="pf-c-button pf-m-primary"
+                                class="pf-v5-c-button pf-m-primary"
                                 @click=${() => {
                                     new AdminApi(DEFAULT_CONFIG)
                                         .adminSystemCreate()
diff --git a/web/src/admin/admin-overview/AdminOverviewPage.ts b/web/src/admin/admin-overview/AdminOverviewPage.ts
index a892cbdf3..9849502ee 100644
--- a/web/src/admin/admin-overview/AdminOverviewPage.ts
+++ b/web/src/admin/admin-overview/AdminOverviewPage.ts
@@ -72,22 +72,22 @@ export class AdminOverviewPage extends AKElement {
         return html`<ak-page-header icon="" header="" description=${msg("General system status")}>
                 <span slot="header"> ${msg(str`Welcome, ${name}.`)} </span>
             </ak-page-header>
-            <section class="pf-c-page__main-section">
-                <div class="pf-l-grid pf-m-gutter">
+            <section class="pf-v5-c-page__main-section">
+                <div class="pf-v5-l-grid pf-m-gutter">
                     <!-- row 1 -->
-                    <div class="pf-l-grid__item pf-m-6-col pf-l-grid pf-m-gutter">
+                    <div class="pf-v5-l-grid__item pf-m-6-col pf-v5-l-grid pf-m-gutter">
                         <div
-                            class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container"
+                            class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container"
                         >
                             <ak-aggregate-card
                                 icon="fa fa-share"
                                 header=${msg("Quick actions")}
                                 .isCenter=${false}
                             >
-                                <ul class="pf-c-list">
+                                <ul class="pf-v5-c-list">
                                     <li>
                                         <a
-                                            class="pf-u-mb-xl"
+                                            class="pf-v5-u-mb-xl"
                                             href=${paramURL("/core/applications", {
                                                 createForm: true,
                                             })}
@@ -95,26 +95,26 @@ export class AdminOverviewPage extends AKElement {
                                         >
                                     </li>
                                     <li>
-                                        <a class="pf-u-mb-xl" href=${paramURL("/events/log")}
+                                        <a class="pf-v5-u-mb-xl" href=${paramURL("/events/log")}
                                             >${msg("Check the logs")}</a
                                         >
                                     </li>
                                     <li>
                                         <a
-                                            class="pf-u-mb-xl"
+                                            class="pf-v5-u-mb-xl"
                                             target="_blank"
                                             href="https://goauthentik.io/integrations/"
                                             >${msg("Explore integrations")}</a
                                         >
                                     </li>
                                     <li>
-                                        <a class="pf-u-mb-xl" href=${paramURL("/identity/users")}
+                                        <a class="pf-v5-u-mb-xl" href=${paramURL("/identity/users")}
                                             >${msg("Manage users")}</a
                                         >
                                     </li>
                                     <li>
                                         <a
-                                            class="pf-u-mb-xl"
+                                            class="pf-v5-u-mb-xl"
                                             target="_blank"
                                             href="https://goauthentik.io/docs/releases/${versionFamily()}#fixed-in-${VERSION.replaceAll(
                                                 ".",
@@ -127,7 +127,7 @@ export class AdminOverviewPage extends AKElement {
                             </ak-aggregate-card>
                         </div>
                         <div
-                            class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container"
+                            class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container"
                         >
                             <ak-aggregate-card
                                 icon="pf-icon pf-icon-zone"
@@ -138,40 +138,40 @@ export class AdminOverviewPage extends AKElement {
                             </ak-aggregate-card>
                         </div>
                         <div
-                            class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl graph-container"
+                            class="pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl graph-container"
                         >
                             <ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}>
                                 <ak-admin-status-chart-sync></ak-admin-status-chart-sync>
                             </ak-aggregate-card>
                         </div>
-                        <div class="pf-l-grid__item pf-m-12-col row-divider">
+                        <div class="pf-v5-l-grid__item pf-m-12-col row-divider">
                             <hr />
                         </div>
                         <div
-                            class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
+                            class="pf-v5-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
                         >
                             <ak-admin-status-system> </ak-admin-status-system>
                         </div>
                         <div
-                            class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
+                            class="pf-v5-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
                         >
                             <ak-admin-status-version> </ak-admin-status-version>
                         </div>
                         <div
-                            class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
+                            class="pf-v5-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
                         >
                             <ak-admin-status-card-workers> </ak-admin-status-card-workers>
                         </div>
                     </div>
-                    <div class="pf-l-grid__item pf-m-6-col">
+                    <div class="pf-v5-l-grid__item pf-m-6-col">
                         <ak-recent-events pageSize="6"></ak-recent-events>
                     </div>
-                    <div class="pf-l-grid__item pf-m-12-col row-divider">
+                    <div class="pf-v5-l-grid__item pf-m-12-col row-divider">
                         <hr />
                     </div>
                     <!-- row 3 -->
                     <div
-                        class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-8-col-on-2xl big-graph-container"
+                        class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-8-col-on-2xl big-graph-container"
                     >
                         <ak-aggregate-card
                             icon="pf-icon pf-icon-server"
@@ -183,7 +183,7 @@ export class AdminOverviewPage extends AKElement {
                         </ak-aggregate-card>
                     </div>
                     <div
-                        class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl big-graph-container"
+                        class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl big-graph-container"
                     >
                         <ak-aggregate-card
                             icon="pf-icon pf-icon-server"
diff --git a/web/src/admin/admin-overview/DashboardUserPage.ts b/web/src/admin/admin-overview/DashboardUserPage.ts
index 721873767..6ffe679dc 100644
--- a/web/src/admin/admin-overview/DashboardUserPage.ts
+++ b/web/src/admin/admin-overview/DashboardUserPage.ts
@@ -43,10 +43,10 @@ export class DashboardUserPage extends AKElement {
     render(): TemplateResult {
         return html`<ak-page-header icon="pf-icon pf-icon-user" header=${msg("User statistics")}>
             </ak-page-header>
-            <section class="pf-c-page__main-section">
-                <div class="pf-l-grid pf-m-gutter">
+            <section class="pf-v5-c-page__main-section">
+                <div class="pf-v5-l-grid pf-m-gutter">
                     <div
-                        class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container"
+                        class="pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container"
                     >
                         <ak-aggregate-card header=${msg("Users created per day in the last month")}>
                             <ak-charts-admin-model-per-day
@@ -58,12 +58,12 @@ export class DashboardUserPage extends AKElement {
                             </ak-charts-admin-model-per-day>
                         </ak-aggregate-card>
                     </div>
-                    <div class="pf-l-grid__item pf-m-12-col row-divider">
+                    <div class="pf-v5-l-grid__item pf-m-12-col row-divider">
                         <hr />
                     </div>
                     <!-- row 2 -->
                     <div
-                        class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
+                        class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
                     >
                         <ak-aggregate-card header=${msg("Logins per day in the last month")}>
                             <ak-charts-admin-model-per-day action=${EventActions.Login}>
@@ -71,7 +71,7 @@ export class DashboardUserPage extends AKElement {
                         </ak-aggregate-card>
                     </div>
                     <div
-                        class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
+                        class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
                     >
                         <ak-aggregate-card header=${msg("Failed Logins per day in the last month")}>
                             <ak-charts-admin-model-per-day action=${EventActions.LoginFailed}>
diff --git a/web/src/admin/admin-overview/TopApplicationsTable.ts b/web/src/admin/admin-overview/TopApplicationsTable.ts
index d2d827796..800be893c 100644
--- a/web/src/admin/admin-overview/TopApplicationsTable.ts
+++ b/web/src/admin/admin-overview/TopApplicationsTable.ts
@@ -44,7 +44,7 @@ export class TopApplicationsTable extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<table class="pf-c-table pf-m-compact" role="grid">
+        return html`<table class="pf-v5-c-table pf-m-compact" role="grid">
             <thead>
                 <tr role="row">
                     <th role="columnheader" scope="col">${msg("Application")}</th>
diff --git a/web/src/admin/admin-overview/cards/RecentEventsCard.ts b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
index 11c197dd8..825e5e651 100644
--- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts
+++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
@@ -40,12 +40,12 @@ export class RecentEventsCard extends Table<Event> {
         return super.styles.concat(
             PFCard,
             css`
-                .pf-c-card__title {
-                    --pf-c-card__title--FontFamily: var(
-                        --pf-global--FontFamily--heading--sans-serif
+                .pf-v5-c-card__title {
+                    --pf-v5-c-card__title--FontFamily: var(
+                        --pf-v5-global--FontFamily--heading--sans-serif
                     );
-                    --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
-                    --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
+                    --pf-v5-c-card__title--FontSize: var(--pf-v5-global--FontSize--md);
+                    --pf-v5-c-card__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
                 }
             `,
         );
@@ -62,7 +62,7 @@ export class RecentEventsCard extends Table<Event> {
     }
 
     renderToolbar(): TemplateResult {
-        return html`<div class="pf-c-card__title">
+        return html`<div class="pf-v5-c-card__title">
             <i class="pf-icon pf-icon-catalog"></i>&nbsp;${msg("Recent events")}
         </div>`;
     }
diff --git a/web/src/admin/applications/ApplicationCheckAccessForm.ts b/web/src/admin/applications/ApplicationCheckAccessForm.ts
index 90beb3786..e909fd21c 100644
--- a/web/src/admin/applications/ApplicationCheckAccessForm.ts
+++ b/web/src/admin/applications/ApplicationCheckAccessForm.ts
@@ -54,9 +54,9 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
     renderResult(): TemplateResult {
         return html`
             <ak-form-element-horizontal label=${msg("Passing")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <span class="pf-c-form__label-text">
+                        <span class="pf-v5-c-form__label-text">
                             <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
                                 ${this.result?.passing ? msg("Yes") : msg("No")}
                             </ak-label>
@@ -65,44 +65,44 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
                 </div>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Messages")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
                         <ul>
                             ${(this.result?.messages || []).length > 0
                                 ? this.result?.messages?.map((m) => {
                                       return html`<li>
-                                          <span class="pf-c-form__label-text">${m}</span>
+                                          <span class="pf-v5-c-form__label-text">${m}</span>
                                       </li>`;
                                   })
                                 : html`<li>
-                                      <span class="pf-c-form__label-text">-</span>
+                                      <span class="pf-v5-c-form__label-text">-</span>
                                   </li>`}
                         </ul>
                     </div>
                 </div>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Log messages")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <dl class="pf-c-description-list pf-m-horizontal">
+                        <dl class="pf-v5-c-description-list pf-m-horizontal">
                             ${(this.result?.logMessages || []).length > 0
                                 ? this.result?.logMessages?.map((m) => {
-                                      return html`<div class="pf-c-description-list__group">
-                                          <dt class="pf-c-description-list__term">
-                                              <span class="pf-c-description-list__text"
+                                      return html`<div class="pf-v5-c-description-list__group">
+                                          <dt class="pf-v5-c-description-list__term">
+                                              <span class="pf-v5-c-description-list__text"
                                                   >${m.log_level}</span
                                               >
                                           </dt>
-                                          <dd class="pf-c-description-list__description">
-                                              <div class="pf-c-description-list__text">
+                                          <dd class="pf-v5-c-description-list__description">
+                                              <div class="pf-v5-c-description-list__text">
                                                   ${m.event}
                                               </div>
                                           </dd>
                                       </div>`;
                                   })
-                                : html`<div class="pf-c-description-list__group">
-                                      <dt class="pf-c-description-list__term">
-                                          <span class="pf-c-description-list__text"
+                                : html`<div class="pf-v5-c-description-list__group">
+                                      <dt class="pf-v5-c-description-list__term">
+                                          <span class="pf-v5-c-description-list__text"
                                               >${msg("No log messages.")}</span
                                           >
                                       </dt>
diff --git a/web/src/admin/applications/ApplicationViewPage.ts b/web/src/admin/applications/ApplicationViewPage.ts
index f65182ca7..624653e15 100644
--- a/web/src/admin/applications/ApplicationViewPage.ts
+++ b/web/src/admin/applications/ApplicationViewPage.ts
@@ -102,31 +102,31 @@ export class ApplicationViewPage extends AKElement {
         }
         return html`<ak-tabs>
             ${this.missingOutpost
-                ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                       ${msg("Warning: Application is not used by any Outpost.")}
                   </div>`
                 : html``}
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
+                <div class="pf-v5-l-grid pf-m-gutter">
                     <div
-                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
+                        class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
                     >
-                        <div class="pf-c-card__title">${msg("Related")}</div>
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list">
+                        <div class="pf-v5-c-card__title">${msg("Related")}</div>
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list">
                                 ${this.application.providerObj
-                                    ? html`<div class="pf-c-description-list__group">
-                                          <dt class="pf-c-description-list__term">
-                                              <span class="pf-c-description-list__text"
+                                    ? html`<div class="pf-v5-c-description-list__group">
+                                          <dt class="pf-v5-c-description-list__term">
+                                              <span class="pf-v5-c-description-list__text"
                                                   >${msg("Provider")}</span
                                               >
                                           </dt>
-                                          <dd class="pf-c-description-list__description">
-                                              <div class="pf-c-description-list__text">
+                                          <dd class="pf-v5-c-description-list__description">
+                                              <div class="pf-v5-c-description-list__text">
                                                   <a
                                                       href="#/core/providers/${this.application
                                                           .providerObj?.pk}"
@@ -139,15 +139,15 @@ export class ApplicationViewPage extends AKElement {
                                       </div>`
                                     : html``}
                                 ${(this.application.backchannelProvidersObj || []).length > 0
-                                    ? html`<div class="pf-c-description-list__group">
-                                          <dt class="pf-c-description-list__term">
-                                              <span class="pf-c-description-list__text"
+                                    ? html`<div class="pf-v5-c-description-list__group">
+                                          <dt class="pf-v5-c-description-list__term">
+                                              <span class="pf-v5-c-description-list__text"
                                                   >${msg("Backchannel Providers")}</span
                                               >
                                           </dt>
-                                          <dd class="pf-c-description-list__description">
-                                              <div class="pf-c-description-list__text">
-                                                  <ul class="pf-c-list">
+                                          <dd class="pf-v5-c-description-list__description">
+                                              <div class="pf-v5-c-description-list__text">
+                                                  <ul class="pf-v5-c-list">
                                                       ${this.application.backchannelProvidersObj.map(
                                                           (provider) => {
                                                               return html`
@@ -167,26 +167,26 @@ export class ApplicationViewPage extends AKElement {
                                           </dd>
                                       </div>`
                                     : html``}
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Policy engine mode")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.application.policyEngineMode?.toUpperCase()}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Edit")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             <ak-forms-modal>
                                                 <span slot="submit"> ${msg("Update")} </span>
                                                 <span slot="header">
@@ -199,7 +199,7 @@ export class ApplicationViewPage extends AKElement {
                                                 </ak-application-form>
                                                 <button
                                                     slot="trigger"
-                                                    class="pf-c-button pf-m-secondary"
+                                                    class="pf-v5-c-button pf-m-secondary"
                                                 >
                                                     ${msg("Edit")}
                                                 </button>
@@ -207,14 +207,14 @@ export class ApplicationViewPage extends AKElement {
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Check access")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
                                                 <span slot="submit"> ${msg("Check")} </span>
                                                 <span slot="header">
@@ -227,7 +227,7 @@ export class ApplicationViewPage extends AKElement {
                                                 </ak-application-check-access-form>
                                                 <button
                                                     slot="trigger"
-                                                    class="pf-c-button pf-m-secondary"
+                                                    class="pf-v5-c-button pf-m-secondary"
                                                 >
                                                     ${msg("Test")}
                                                 </button>
@@ -236,19 +236,19 @@ export class ApplicationViewPage extends AKElement {
                                     </dd>
                                 </div>
                                 ${this.application.launchUrl
-                                    ? html`<div class="pf-c-description-list__group">
-                                          <dt class="pf-c-description-list__term">
-                                              <span class="pf-c-description-list__text"
+                                    ? html`<div class="pf-v5-c-description-list__group">
+                                          <dt class="pf-v5-c-description-list__term">
+                                              <span class="pf-v5-c-description-list__text"
                                                   >${msg("Launch")}</span
                                               >
                                           </dt>
-                                          <dd class="pf-c-description-list__description">
-                                              <div class="pf-c-description-list__text">
+                                          <dd class="pf-v5-c-description-list__description">
+                                              <div class="pf-v5-c-description-list__text">
                                                   <a
                                                       target="_blank"
                                                       href=${this.application.launchUrl}
                                                       slot="trigger"
-                                                      class="pf-c-button pf-m-secondary"
+                                                      class="pf-v5-c-button pf-m-secondary"
                                                   >
                                                       ${msg("Launch")}
                                                   </a>
@@ -260,12 +260,12 @@ export class ApplicationViewPage extends AKElement {
                         </div>
                     </div>
                     <div
-                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
+                        class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
                     >
-                        <div class="pf-c-card__title">
+                        <div class="pf-v5-c-card__title">
                             ${msg("Logins over the last week (per 8 hours)")}
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             ${this.application &&
                             html` <ak-charts-application-authorize
                                 applicationSlug=${this.application.slug}
@@ -273,9 +273,9 @@ export class ApplicationViewPage extends AKElement {
                             </ak-charts-application-authorize>`}
                         </div>
                     </div>
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">${msg("Changelog")}</div>
-                        <div class="pf-c-card__body">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">${msg("Changelog")}</div>
+                        <div class="pf-v5-c-card__body">
                             <ak-object-changelog
                                 targetModelPk=${this.application.pk || ""}
                                 targetModelApp="authentik_core"
@@ -289,10 +289,10 @@ export class ApplicationViewPage extends AKElement {
             <section
                 slot="page-policy-bindings"
                 data-tab-title="${msg("Policy / Group / User Bindings")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__title">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__title">
                         ${msg("These policies control which users can access this application.")}
                     </div>
                     <ak-bound-policies-list .target=${this.application.pk}>
diff --git a/web/src/admin/applications/ProviderSelectModal.ts b/web/src/admin/applications/ProviderSelectModal.ts
index 02367f0dd..2604a8b3b 100644
--- a/web/src/admin/applications/ProviderSelectModal.ts
+++ b/web/src/admin/applications/ProviderSelectModal.ts
@@ -56,15 +56,15 @@ export class ProviderSelectModal extends TableModal<Provider> {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">
                         ${msg("Select providers to add to application")}
                     </h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
-            <footer class="pf-c-modal-box__footer">
+            <section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${async () => {
                         await this.confirm(this.selectedElements);
diff --git a/web/src/admin/applications/wizard/ApplicationWizard.ts b/web/src/admin/applications/wizard/ApplicationWizard.ts
index d8ceb9749..6b7d0c827 100644
--- a/web/src/admin/applications/wizard/ApplicationWizard.ts
+++ b/web/src/admin/applications/wizard/ApplicationWizard.ts
@@ -54,7 +54,7 @@ export class ApplicationWizard extends AKElement {
                 }}
             >
                 ${this.showButton
-                    ? html`<button slot="trigger" class="pf-c-button pf-m-primary">
+                    ? html`<button slot="trigger" class="pf-v5-c-button pf-m-primary">
                           ${this.createText}
                       </button>`
                     : html``}
diff --git a/web/src/admin/applications/wizard/InitialApplicationWizardPage.ts b/web/src/admin/applications/wizard/InitialApplicationWizardPage.ts
index 1e4388e70..36a7e4bc6 100644
--- a/web/src/admin/applications/wizard/InitialApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/InitialApplicationWizardPage.ts
@@ -50,22 +50,22 @@ export class InitialApplicationWizardPage extends WizardFormPage {
 
     renderForm(): TemplateResult {
         return html`
-            <form class="pf-c-form pf-m-horizontal">
+            <form class="pf-v5-c-form pf-m-horizontal">
                 <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
-                    <input type="text" value="" class="pf-c-form-control" required />
-                    <p class="pf-c-form__helper-text">${msg("Application's display Name.")}</p>
+                    <input type="text" value="" class="pf-v5-c-form-control" required />
+                    <p class="pf-v5-c-form__helper-text">${msg("Application's display Name.")}</p>
                 </ak-form-element-horizontal>
                 <ak-form-group ?expanded=${true}>
                     <span slot="header"> ${msg("Additional UI settings")} </span>
-                    <div slot="body" class="pf-c-form">
+                    <div slot="body" class="pf-v5-c-form">
                         <ak-form-element-horizontal
                             label=${msg("Description")}
                             name="metaDescription"
                         >
-                            <textarea class="pf-c-form-control"></textarea>
+                            <textarea class="pf-v5-c-form-control"></textarea>
                         </ak-form-element-horizontal>
                         <ak-form-element-horizontal label=${msg("Publisher")} name="metaPublisher">
-                            <input type="text" value="" class="pf-c-form-control" />
+                            <input type="text" value="" class="pf-v5-c-form-control" />
                         </ak-form-element-horizontal>
                     </div>
                 </ak-form-group>
diff --git a/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts b/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts
index ff55cb67c..16edfdbf0 100644
--- a/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts
@@ -59,11 +59,11 @@ export class TypeApplicationWizardPage extends WizardPage {
     }
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.applicationTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${type.component}
@@ -76,8 +76,8 @@ export class TypeApplicationWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
diff --git a/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts b/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts
index 89c4a5ec8..378bd004c 100644
--- a/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts
@@ -64,9 +64,9 @@ export class TypeLDAPApplicationWizardPage extends WizardFormPage {
     renderForm(): TemplateResult {
         const domainParts = window.location.hostname.split(".");
         const defaultBaseDN = domainParts.map((part) => `dc=${part}`).join(",");
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Base DN")} name="baseDN" ?required=${true}>
-                <input type="text" value="${defaultBaseDN}" class="pf-c-form-control" required />
+                <input type="text" value="${defaultBaseDN}" class="pf-v5-c-form-control" required />
             </ak-form-element-horizontal>
         </form> `;
     }
diff --git a/web/src/admin/applications/wizard/link/TypeLinkApplicationWizardPage.ts b/web/src/admin/applications/wizard/link/TypeLinkApplicationWizardPage.ts
index c91133a45..c1ee4ffe6 100644
--- a/web/src/admin/applications/wizard/link/TypeLinkApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/link/TypeLinkApplicationWizardPage.ts
@@ -17,10 +17,10 @@ export class TypeLinkApplicationWizardPage extends WizardFormPage {
 
     renderForm(): TemplateResult {
         return html`
-            <form class="pf-c-form pf-m-horizontal">
+            <form class="pf-v5-c-form pf-m-horizontal">
                 <ak-form-element-horizontal label=${msg("Link")} ?required=${true} name="link">
-                    <input type="text" value="" class="pf-c-form-control" required />
-                    <p class="pf-c-form__helper-text">
+                    <input type="text" value="" class="pf-v5-c-form-control" required />
+                    <p class="pf-v5-c-form__helper-text">
                         ${msg("URL which will be opened when a user clicks on the application.")}
                     </p>
                 </ak-form-element-horizontal>
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts
index a2e08c2aa..93b1ed641 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts
@@ -19,7 +19,7 @@ export class TypeOAuthAPIApplicationWizardPage extends WizardPage {
     sidebarLabel = () => msg("Method details");
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <p>
                 ${msg(
                     "This configuration can be used to authenticate to authentik with other APIs other otherwise programmatically.",
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts
index bb19272e9..c98c28e8e 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts
@@ -56,11 +56,11 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
     sidebarLabel = () => msg("Application type");
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.applicationTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${type.component}
@@ -75,8 +75,8 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form> `;
diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthImplicitApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthImplicitApplicationWizardPage.ts
index c1fa0f3cf..646091fcc 100644
--- a/web/src/admin/applications/wizard/oauth/TypeOAuthImplicitApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/oauth/TypeOAuthImplicitApplicationWizardPage.ts
@@ -10,6 +10,6 @@ export class TypeOAuthImplicitApplicationWizardPage extends WizardFormPage {
     sidebarLabel = () => msg("Method details");
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">some stuff idk</form> `;
+        return html`<form class="pf-v5-c-form pf-m-horizontal">some stuff idk</form> `;
     }
 }
diff --git a/web/src/admin/applications/wizard/proxy/TypeProxyApplicationWizardPage.ts b/web/src/admin/applications/wizard/proxy/TypeProxyApplicationWizardPage.ts
index 43db7c56c..a7a199d81 100644
--- a/web/src/admin/applications/wizard/proxy/TypeProxyApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/proxy/TypeProxyApplicationWizardPage.ts
@@ -48,14 +48,14 @@ export class TypeProxyApplicationWizardPage extends WizardFormPage {
     };
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal
                 label=${msg("External domain")}
                 name="externalHost"
                 ?required=${true}
             >
-                <input type="text" value="" class="pf-c-form-control" required />
-                <p class="pf-c-form__helper-text">
+                <input type="text" value="" class="pf-v5-c-form-control" required />
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("External domain you will be accessing the domain from.")}
                 </p>
             </ak-form-element-horizontal>
diff --git a/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts b/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts
index 2ef4d6972..93e9d86a7 100644
--- a/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts
@@ -38,11 +38,11 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
     sidebarLabel = () => msg("Application type");
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.applicationTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${type.component}
@@ -57,8 +57,8 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form> `;
diff --git a/web/src/admin/applications/wizard/saml/TypeSAMLConfigApplicationWizardPage.ts b/web/src/admin/applications/wizard/saml/TypeSAMLConfigApplicationWizardPage.ts
index ad269ac63..86d1e29b0 100644
--- a/web/src/admin/applications/wizard/saml/TypeSAMLConfigApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/saml/TypeSAMLConfigApplicationWizardPage.ts
@@ -43,10 +43,10 @@ export class TypeSAMLApplicationWizardPage extends WizardFormPage {
     };
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("ACS URL")} name="acsUrl" ?required=${true}>
-                <input type="text" value="" class="pf-c-form-control" required />
-                <p class="pf-c-form__helper-text">
+                <input type="text" value="" class="pf-v5-c-form-control" required />
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "URL that authentik will redirect back to after successful authentication.",
                     )}
diff --git a/web/src/admin/applications/wizard/saml/TypeSAMLImportApplicationWizardPage.ts b/web/src/admin/applications/wizard/saml/TypeSAMLImportApplicationWizardPage.ts
index c3ddfda79..2988ee3dc 100644
--- a/web/src/admin/applications/wizard/saml/TypeSAMLImportApplicationWizardPage.ts
+++ b/web/src/admin/applications/wizard/saml/TypeSAMLImportApplicationWizardPage.ts
@@ -48,9 +48,9 @@ export class TypeSAMLImportApplicationWizardPage extends WizardFormPage {
     };
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Metadata")} name="metadata">
-                <input type="file" value="" class="pf-c-form-control" />
+                <input type="file" value="" class="pf-v5-c-form-control" />
             </ak-form-element-horizontal>
         </form> `;
     }
diff --git a/web/src/admin/crypto/CertificateGenerateForm.ts b/web/src/admin/crypto/CertificateGenerateForm.ts
index 000c18462..1aafe3a9d 100644
--- a/web/src/admin/crypto/CertificateGenerateForm.ts
+++ b/web/src/admin/crypto/CertificateGenerateForm.ts
@@ -26,11 +26,11 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
                 name="commonName"
                 ?required=${true}
             >
-                <input type="text" class="pf-c-form-control" required />
+                <input type="text" class="pf-v5-c-form-control" required />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Subject-alt name")} name="subjectAltName">
-                <input class="pf-c-form-control" type="text" />
-                <p class="pf-c-form__helper-text">
+                <input class="pf-v5-c-form-control" type="text" />
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Optional, comma-separated SubjectAlt Names.")}
                 </p>
             </ak-form-element-horizontal>
@@ -39,7 +39,7 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
                 name="validityDays"
                 ?required=${true}
             >
-                <input class="pf-c-form-control" type="number" value="365" />
+                <input class="pf-v5-c-form-control" type="number" value="365" />
             </ak-form-element-horizontal>`;
     }
 }
diff --git a/web/src/admin/crypto/CertificateKeyPairForm.ts b/web/src/admin/crypto/CertificateKeyPairForm.ts
index 9b46b0696..6bb9a3cea 100644
--- a/web/src/admin/crypto/CertificateKeyPairForm.ts
+++ b/web/src/admin/crypto/CertificateKeyPairForm.ts
@@ -40,12 +40,12 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -55,16 +55,16 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
                 ?writeOnly=${this.instance !== undefined}
                 ?required=${true}
             >
-                <textarea class="pf-c-form-control" required></textarea>
-                <p class="pf-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
+                <textarea class="pf-v5-c-form-control" required></textarea>
+                <p class="pf-v5-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 name="keyData"
                 ?writeOnly=${this.instance !== undefined}
                 label=${msg("Private Key")}
             >
-                <textarea class="pf-c-form-control"></textarea>
-                <p class="pf-c-form__helper-text">
+                <textarea class="pf-v5-c-form-control"></textarea>
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Optional Private Key. If this is set, you can use this keypair for encryption.",
                     )}
diff --git a/web/src/admin/enterprise/EnterpriseLicenseForm.ts b/web/src/admin/enterprise/EnterpriseLicenseForm.ts
index c54c59423..4c928de58 100644
--- a/web/src/admin/enterprise/EnterpriseLicenseForm.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseForm.ts
@@ -46,12 +46,12 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
 
     renderForm(): TemplateResult {
         // prettier-ignore
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Install ID")}>
-                <input class="pf-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" />
+                <input class="pf-v5-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="key" ?writeOnly=${this.instance !== undefined} label=${msg("License key")}>
-                <textarea class="pf-c-form-control"></textarea>
+                <textarea class="pf-v5-c-form-control"></textarea>
             </ak-form-element-horizontal>
         </form>`;
     }
diff --git a/web/src/admin/events/EventListPage.ts b/web/src/admin/events/EventListPage.ts
index 4d42e8c74..8a5ddf41d 100644
--- a/web/src/admin/events/EventListPage.ts
+++ b/web/src/admin/events/EventListPage.ts
@@ -86,7 +86,7 @@ export class EventListPage extends TablePage<Event> {
 
     renderExpanded(item: Event): TemplateResult {
         return html` <td role="cell" colspan="3">
-                <div class="pf-c-table__expandable-row-content">
+                <div class="pf-v5-c-table__expandable-row-content">
                     <ak-event-info .event=${item as EventWithContext}></ak-event-info>
                 </div>
             </td>
diff --git a/web/src/admin/events/RuleForm.ts b/web/src/admin/events/RuleForm.ts
index b0d0c017c..7e345ecc1 100644
--- a/web/src/admin/events/RuleForm.ts
+++ b/web/src/admin/events/RuleForm.ts
@@ -58,12 +58,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -91,7 +91,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                     ?blankable=${true}
                 >
                 </ak-search-select>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Select the group of users which the alerts are sent to. If no group is selected the rule is disabled.",
                     )}
@@ -102,7 +102,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                 ?required=${true}
                 name="transports"
             >
-                <select class="pf-c-form-control" multiple>
+                <select class="pf-v5-c-form-control" multiple>
                     ${this.eventTransports?.results.map((transport) => {
                         const selected = Array.from(this.instance?.transports || []).some((su) => {
                             return su == transport.pk;
@@ -112,12 +112,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
                         </option>`;
                     })}
                 </select>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Select which transports should be used to notify the user. If none are selected, the notification will only be shown in the authentik UI.",
                     )}
                 </p>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Hold control/command to select multiple items.")}
                 </p>
             </ak-form-element-horizontal>
diff --git a/web/src/admin/events/TransportForm.ts b/web/src/admin/events/TransportForm.ts
index 5042be939..c8b6605e2 100644
--- a/web/src/admin/events/TransportForm.ts
+++ b/web/src/admin/events/TransportForm.ts
@@ -68,12 +68,12 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -114,7 +114,7 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.webhookUrl)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
@@ -151,20 +151,20 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                 </ak-search-select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="sendOnce">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.sendOnce, false)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Send once")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Send once")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Only send notification once, for example when sending a webhook into a chat channel.",
                     )}
diff --git a/web/src/admin/flows/BoundStagesList.ts b/web/src/admin/flows/BoundStagesList.ts
index 9394145e4..3cdb90ddf 100644
--- a/web/src/admin/flows/BoundStagesList.ts
+++ b/web/src/admin/flows/BoundStagesList.ts
@@ -65,7 +65,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 });
             }}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+            <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
                 ${msg("Delete")}
             </button>
         </ak-forms-delete-bulk>`;
@@ -87,7 +87,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                         type=${ifDefined(item.stageObj?.component)}
                     >
                     </ak-proxy-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">
+                    <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
                         ${msg("Edit Stage")}
                     </button>
                 </ak-forms-modal>
@@ -96,7 +96,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                     <span slot="header"> ${msg("Update Stage binding")} </span>
                     <ak-stage-binding-form slot="form" .instancePk=${item.pk}>
                     </ak-stage-binding-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">
+                    <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
                         ${msg("Edit Binding")}
                     </button>
                 </ak-forms-modal>`,
@@ -106,8 +106,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
     renderExpanded(item: FlowStageBinding): TemplateResult {
         return html` <td></td>
             <td role="cell" colspan="4">
-                <div class="pf-c-table__expandable-row-content">
-                    <div class="pf-c-content">
+                <div class="pf-v5-c-table__expandable-row-content">
+                    <div class="pf-v5-c-content">
                         <p>
                             ${msg(
                                 "These bindings control if this stage will be applied to the flow.",
@@ -130,7 +130,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                         <span slot="header"> ${msg("Create Stage binding")} </span>
                         <ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
                         </ak-stage-binding-form>
-                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                        <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                             ${msg("Bind stage")}
                         </button>
                     </ak-forms-modal>
@@ -151,7 +151,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 <span slot="header"> ${msg("Create Stage binding")} </span>
                 <ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
                 </ak-stage-binding-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                     ${msg("Bind existing stage")}
                 </button>
             </ak-forms-modal>
diff --git a/web/src/admin/flows/FlowForm.ts b/web/src/admin/flows/FlowForm.ts
index 2bc32bde5..117853d00 100644
--- a/web/src/admin/flows/FlowForm.ts
+++ b/web/src/admin/flows/FlowForm.ts
@@ -78,12 +78,12 @@ export class FlowForm extends ModelForm<Flow, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -91,26 +91,26 @@ export class FlowForm extends ModelForm<Flow, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.title)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
-                <p class="pf-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p>
+                <p class="pf-v5-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
-                <p class="pf-c-form__helper-text">${msg("Visible in the URL.")}</p>
+                <p class="pf-v5-c-form__helper-text">${msg("Visible in the URL.")}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${msg("Designation")}
                 ?required=${true}
                 name="designation"
             >
-                <select class="pf-c-form-control">
+                <select class="pf-v5-c-form-control">
                     <option value="" ?selected=${this.instance?.designation === undefined}>
                         ---------
                     </option>
@@ -160,7 +160,7 @@ export class FlowForm extends ModelForm<Flow, string> {
                         ${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
                     </option>
                 </select>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.",
                     )}
@@ -171,7 +171,7 @@ export class FlowForm extends ModelForm<Flow, string> {
                 ?required=${true}
                 name="authentication"
             >
-                <select class="pf-c-form-control">
+                <select class="pf-v5-c-form-control">
                     <option
                         value=${AuthenticationEnum.None}
                         ?selected=${this.instance?.authentication === AuthenticationEnum.None}
@@ -200,28 +200,28 @@ export class FlowForm extends ModelForm<Flow, string> {
                         ${msg("Require superuser.")}
                     </option>
                 </select>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Required authentication level for this flow.")}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-group>
                 <span slot="header"> ${msg("Behavior settings")} </span>
-                <div slot="body" class="pf-c-form">
+                <div slot="body" class="pf-v5-c-form">
                     <ak-form-element-horizontal name="compatibilityMode">
-                        <label class="pf-c-switch">
+                        <label class="pf-v5-c-switch">
                             <input
-                                class="pf-c-switch__input"
+                                class="pf-v5-c-switch__input"
                                 type="checkbox"
                                 ?checked=${first(this.instance?.compatibilityMode, false)}
                             />
-                            <span class="pf-c-switch__toggle">
-                                <span class="pf-c-switch__toggle-icon">
+                            <span class="pf-v5-c-switch__toggle">
+                                <span class="pf-v5-c-switch__toggle-icon">
                                     <i class="fas fa-check" aria-hidden="true"></i>
                                 </span>
                             </span>
-                            <span class="pf-c-switch__label">${msg("Compatibility mode")}</span>
+                            <span class="pf-v5-c-switch__label">${msg("Compatibility mode")}</span>
                         </label>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg(
                                 "Increases compatibility with password managers and mobile devices.",
                             )}
@@ -260,7 +260,7 @@ export class FlowForm extends ModelForm<Flow, string> {
                             .value=${this.instance?.deniedAction}
                         >
                         </ak-radio>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg(
                                 "Decides the response when a policy denies access to this flow for a user.",
                             )}
@@ -297,13 +297,13 @@ export class FlowForm extends ModelForm<Flow, string> {
             </ak-form-group>
             <ak-form-group>
                 <span slot="header"> ${msg("Appearance settings")} </span>
-                <div slot="body" class="pf-c-form">
+                <div slot="body" class="pf-v5-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Layout")}
                         ?required=${true}
                         name="layout"
                     >
-                        <select class="pf-c-form-control">
+                        <select class="pf-v5-c-form-control">
                             <option
                                 value=${LayoutEnum.Stacked}
                                 ?selected=${this.instance?.layout === LayoutEnum.Stacked}
@@ -341,26 +341,26 @@ export class FlowForm extends ModelForm<Flow, string> {
                                   label=${msg("Background")}
                                   name="background"
                               >
-                                  <input type="file" value="" class="pf-c-form-control" />
+                                  <input type="file" value="" class="pf-v5-c-form-control" />
                                   ${this.instance?.background
                                       ? html`
-                                            <p class="pf-c-form__helper-text">
+                                            <p class="pf-v5-c-form__helper-text">
                                                 ${msg("Currently set to:")}
                                                 ${this.instance?.background}
                                             </p>
                                         `
                                       : html``}
 
-                                  <p class="pf-c-form__helper-text">
+                                  <p class="pf-v5-c-form__helper-text">
                                       ${msg("Background shown during execution.")}
                                   </p>
                               </ak-form-element-horizontal>
                               ${this.instance?.background
                                   ? html`
                                         <ak-form-element-horizontal>
-                                            <label class="pf-c-switch">
+                                            <label class="pf-v5-c-switch">
                                                 <input
-                                                    class="pf-c-switch__input"
+                                                    class="pf-v5-c-switch__input"
                                                     type="checkbox"
                                                     @change=${(ev: Event) => {
                                                         const target =
@@ -368,19 +368,19 @@ export class FlowForm extends ModelForm<Flow, string> {
                                                         this.clearBackground = target.checked;
                                                     }}
                                                 />
-                                                <span class="pf-c-switch__toggle">
-                                                    <span class="pf-c-switch__toggle-icon">
+                                                <span class="pf-v5-c-switch__toggle">
+                                                    <span class="pf-v5-c-switch__toggle-icon">
                                                         <i
                                                             class="fas fa-check"
                                                             aria-hidden="true"
                                                         ></i>
                                                     </span>
                                                 </span>
-                                                <span class="pf-c-switch__label">
+                                                <span class="pf-v5-c-switch__label">
                                                     ${msg("Clear background")}
                                                 </span>
                                             </label>
-                                            <p class="pf-c-form__helper-text">
+                                            <p class="pf-v5-c-form__helper-text">
                                                 ${msg("Delete currently set background image.")}
                                             </p>
                                         </ak-form-element-horizontal>
@@ -393,9 +393,9 @@ export class FlowForm extends ModelForm<Flow, string> {
                               <input
                                   type="text"
                                   value="${first(this.instance?.background, "")}"
-                                  class="pf-c-form-control"
+                                  class="pf-v5-c-form-control"
                               />
-                              <p class="pf-c-form__helper-text">
+                              <p class="pf-v5-c-form__helper-text">
                                   ${msg("Background shown during execution.")}
                               </p>
                           </ak-form-element-horizontal>`}
diff --git a/web/src/admin/flows/FlowImportForm.ts b/web/src/admin/flows/FlowImportForm.ts
index 3db49d056..0c3307e08 100644
--- a/web/src/admin/flows/FlowImportForm.ts
+++ b/web/src/admin/flows/FlowImportForm.ts
@@ -43,9 +43,9 @@ export class FlowImportForm extends Form<Flow> {
     renderResult(): TemplateResult {
         return html`
             <ak-form-element-horizontal label=${msg("Successful")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <span class="pf-c-form__label-text">
+                        <span class="pf-v5-c-form__label-text">
                             <ak-label color=${this.result?.success ? PFColor.Green : PFColor.Red}>
                                 ${this.result?.success ? msg("Yes") : msg("No")}
                             </ak-label>
@@ -54,27 +54,27 @@ export class FlowImportForm extends Form<Flow> {
                 </div>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Log messages")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <dl class="pf-c-description-list pf-m-horizontal">
+                        <dl class="pf-v5-c-description-list pf-m-horizontal">
                             ${(this.result?.logs || []).length > 0
                                 ? this.result?.logs?.map((m) => {
-                                      return html`<div class="pf-c-description-list__group">
-                                          <dt class="pf-c-description-list__term">
-                                              <span class="pf-c-description-list__text"
+                                      return html`<div class="pf-v5-c-description-list__group">
+                                          <dt class="pf-v5-c-description-list__term">
+                                              <span class="pf-v5-c-description-list__text"
                                                   >${m.log_level}</span
                                               >
                                           </dt>
-                                          <dd class="pf-c-description-list__description">
-                                              <div class="pf-c-description-list__text">
+                                          <dd class="pf-v5-c-description-list__description">
+                                              <div class="pf-v5-c-description-list__text">
                                                   ${m.event}
                                               </div>
                                           </dd>
                                       </div>`;
                                   })
-                                : html`<div class="pf-c-description-list__group">
-                                      <dt class="pf-c-description-list__term">
-                                          <span class="pf-c-description-list__text"
+                                : html`<div class="pf-v5-c-description-list__group">
+                                      <dt class="pf-v5-c-description-list__term">
+                                          <span class="pf-v5-c-description-list__text"
                                               >${msg("No log messages.")}</span
                                           >
                                       </dt>
@@ -88,8 +88,8 @@ export class FlowImportForm extends Form<Flow> {
 
     renderInlineForm(): TemplateResult {
         return html`<ak-form-element-horizontal label=${msg("Flow")} name="flow">
-                <input type="file" value="" class="pf-c-form-control" />
-                <p class="pf-c-form__helper-text">
+                <input type="file" value="" class="pf-v5-c-form-control" />
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         ".yaml files, which can be found on goauthentik.io and can be exported by authentik.",
                     )}
diff --git a/web/src/admin/flows/FlowViewPage.ts b/web/src/admin/flows/FlowViewPage.ts
index ee88ff2e3..ed72bb2d7 100644
--- a/web/src/admin/flows/FlowViewPage.ts
+++ b/web/src/admin/flows/FlowViewPage.ts
@@ -64,23 +64,23 @@ export class FlowViewPage extends AKElement {
                 <div
                     slot="page-overview"
                     data-tab-title="${msg("Flow Overview")}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                 >
-                    <div class="pf-l-grid pf-m-gutter">
+                    <div class="pf-v5-l-grid pf-m-gutter">
                         <div
-                            class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
+                            class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
                         >
-                            <div class="pf-c-card__title">${msg("Related actions")}</div>
-                            <div class="pf-c-card__body">
-                                <dl class="pf-c-description-list">
-                                    <div class="pf-c-description-list__group">
-                                        <dt class="pf-c-description-list__term">
-                                            <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-card__title">${msg("Related actions")}</div>
+                            <div class="pf-v5-c-card__body">
+                                <dl class="pf-v5-c-description-list">
+                                    <div class="pf-v5-c-description-list__group">
+                                        <dt class="pf-v5-c-description-list__term">
+                                            <span class="pf-v5-c-description-list__text"
                                                 >${msg("Edit")}</span
                                             >
                                         </dt>
-                                        <dd class="pf-c-description-list__description">
-                                            <div class="pf-c-description-list__text">
+                                        <dd class="pf-v5-c-description-list__description">
+                                            <div class="pf-v5-c-description-list__text">
                                                 <ak-forms-modal>
                                                     <span slot="submit"> ${msg("Update")} </span>
                                                     <span slot="header">
@@ -93,22 +93,22 @@ export class FlowViewPage extends AKElement {
                                                     </ak-flow-form>
                                                     <button
                                                         slot="trigger"
-                                                        class="pf-c-button pf-m-block pf-m-secondary"
+                                                        class="pf-v5-c-button pf-m-block pf-m-secondary"
                                                     >
                                                         ${msg("Edit")}
                                                     </button>
                                                 </ak-forms-modal>
                                             </div>
                                         </dd>
-                                        <dt class="pf-c-description-list__term">
-                                            <span class="pf-c-description-list__text"
+                                        <dt class="pf-v5-c-description-list__term">
+                                            <span class="pf-v5-c-description-list__text"
                                                 >${msg("Execute flow")}</span
                                             >
                                         </dt>
-                                        <dd class="pf-c-description-list__description">
-                                            <div class="pf-c-description-list__text">
+                                        <dd class="pf-v5-c-description-list__description">
+                                            <div class="pf-v5-c-description-list__text">
                                                 <button
-                                                    class="pf-c-button pf-m-block pf-m-primary"
+                                                    class="pf-v5-c-button pf-m-block pf-m-primary"
                                                     @click=${() => {
                                                         const finalURL = `${
                                                             window.location.origin
@@ -121,7 +121,7 @@ export class FlowViewPage extends AKElement {
                                                     ${msg("Normal")}
                                                 </button>
                                                 <button
-                                                    class="pf-c-button pf-m-block pf-m-secondary"
+                                                    class="pf-v5-c-button pf-m-block pf-m-secondary"
                                                     @click=${() => {
                                                         new FlowsApi(DEFAULT_CONFIG)
                                                             .flowsInstancesExecuteRetrieve({
@@ -140,7 +140,7 @@ export class FlowViewPage extends AKElement {
                                                     ${msg("with current user")}
                                                 </button>
                                                 <button
-                                                    class="pf-c-button pf-m-block pf-m-secondary"
+                                                    class="pf-v5-c-button pf-m-block pf-m-secondary"
                                                     @click=${() => {
                                                         new FlowsApi(DEFAULT_CONFIG)
                                                             .flowsInstancesExecuteRetrieve({
@@ -168,15 +168,15 @@ export class FlowViewPage extends AKElement {
                                                 </button>
                                             </div>
                                         </dd>
-                                        <dt class="pf-c-description-list__term">
-                                            <span class="pf-c-description-list__text"
+                                        <dt class="pf-v5-c-description-list__term">
+                                            <span class="pf-v5-c-description-list__text"
                                                 >${msg("Export flow")}</span
                                             >
                                         </dt>
-                                        <dd class="pf-c-description-list__description">
-                                            <div class="pf-c-description-list__text">
+                                        <dd class="pf-v5-c-description-list__description">
+                                            <div class="pf-v5-c-description-list__text">
                                                 <a
-                                                    class="pf-c-button pf-m-block pf-m-secondary"
+                                                    class="pf-v5-c-button pf-m-block pf-m-secondary"
                                                     href=${this.flow.exportUrl}
                                                 >
                                                     ${msg("Export")}
@@ -188,18 +188,18 @@ export class FlowViewPage extends AKElement {
                             </div>
                         </div>
                         <div
-                            class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
+                            class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
                         >
-                            <div class="pf-c-card__title">${msg("Diagram")}</div>
-                            <div class="pf-c-card__body">
+                            <div class="pf-v5-c-card__title">${msg("Diagram")}</div>
+                            <div class="pf-v5-c-card__body">
                                 <ak-flow-diagram flowSlug=${this.flow.slug}> </ak-flow-diagram>
                             </div>
                         </div>
                         <div
-                            class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
+                            class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
                         >
-                            <div class="pf-c-card__title">${msg("Changelog")}</div>
-                            <div class="pf-c-card__body">
+                            <div class="pf-v5-c-card__title">${msg("Changelog")}</div>
+                            <div class="pf-v5-c-card__body">
                                 <ak-object-changelog
                                     targetModelPk=${this.flow.pk || ""}
                                     targetModelApp="authentik_flows"
@@ -213,10 +213,10 @@ export class FlowViewPage extends AKElement {
                 <div
                     slot="page-stage-bindings"
                     data-tab-title="${msg("Stage Bindings")}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                 >
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__body">
+                    <div class="pf-v5-c-card">
+                        <div class="pf-v5-c-card__body">
                             <ak-bound-stages-list .target=${this.flow.pk}> </ak-bound-stages-list>
                         </div>
                     </div>
@@ -224,13 +224,13 @@ export class FlowViewPage extends AKElement {
                 <div
                     slot="page-policy-bindings"
                     data-tab-title="${msg("Policy / Group / User Bindings")}"
-                    class="pf-c-page__main-section pf-m-no-padding-mobile"
+                    class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                 >
-                    <div class="pf-c-card">
-                        <div class="pf-c-card__title">
+                    <div class="pf-v5-c-card">
+                        <div class="pf-v5-c-card__title">
                             ${msg("These bindings control which users can access this flow.")}
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             <ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
                             </ak-bound-policies-list>
                         </div>
diff --git a/web/src/admin/flows/StageBindingForm.ts b/web/src/admin/flows/StageBindingForm.ts
index 8c5492be2..3666256f2 100644
--- a/web/src/admin/flows/StageBindingForm.ts
+++ b/web/src/admin/flows/StageBindingForm.ts
@@ -92,7 +92,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.renderTarget()}
             <ak-form-element-horizontal label=${msg("Stage")} ?required=${true} name="stage">
                 <ak-search-select
@@ -125,43 +125,43 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                 <input
                     type="number"
                     value="${first(this.instance?.order, this.defaultOrder)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="evaluateOnPlan">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.evaluateOnPlan, false)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Evaluate when flow is planned")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Evaluate when flow is planned")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Evaluate policies during the Flow planning process.")}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="reEvaluatePolicies">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.reEvaluatePolicies, true)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Evaluate when stage is run")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Evaluate when stage is run")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Evaluate policies before the Stage is present to the user.")}
                 </p>
             </ak-form-element-horizontal>
@@ -196,7 +196,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
                     .value=${this.instance?.invalidResponseAction}
                 >
                 </ak-radio>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Configure how the flow executor should handle an invalid response to a challenge given by this bound stage.",
                     )}
diff --git a/web/src/admin/groups/GroupForm.ts b/web/src/admin/groups/GroupForm.ts
index d849d67f8..28ea12ddf 100644
--- a/web/src/admin/groups/GroupForm.ts
+++ b/web/src/admin/groups/GroupForm.ts
@@ -20,10 +20,10 @@ import { CoreApi, CoreGroupsListRequest, Group } from "@goauthentik/api";
 export class GroupForm extends ModelForm<Group, string> {
     static get styles(): CSSResult[] {
         return super.styles.concat(css`
-            .pf-c-button.pf-m-control {
+            .pf-v5-c-button.pf-m-control {
                 height: 100%;
             }
-            .pf-c-form-control {
+            .pf-v5-c-form-control {
                 height: auto !important;
             }
         `);
@@ -58,30 +58,30 @@ export class GroupForm extends ModelForm<Group, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="isSuperuser">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.isSuperuser, false)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Is superuser")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Is superuser")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Users added to this group will be superusers.")}
                 </p>
             </ak-form-element-horizontal>
@@ -123,7 +123,7 @@ export class GroupForm extends ModelForm<Group, string> {
                     value="${YAML.stringify(first(this.instance?.attributes, {}))}"
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
             </ak-form-element-horizontal>
diff --git a/web/src/admin/groups/GroupViewPage.ts b/web/src/admin/groups/GroupViewPage.ts
index 0cbdcee5e..949915911 100644
--- a/web/src/admin/groups/GroupViewPage.ts
+++ b/web/src/admin/groups/GroupViewPage.ts
@@ -84,35 +84,35 @@ export class GroupViewPage extends AKElement {
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
+                <div class="pf-v5-l-grid pf-m-gutter">
                     <div
-                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
+                        class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
                     >
-                        <div class="pf-c-card__title">${msg("Group Info")}</div>
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list pf-m-2-col">
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                        <div class="pf-v5-c-card__title">${msg("Group Info")}</div>
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list pf-m-2-col">
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Name")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.group.name}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Superuser")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             <ak-label
                                                 color=${this.group.isSuperuser
                                                     ? PFColor.Green
@@ -123,23 +123,23 @@ export class GroupViewPage extends AKElement {
                                 </div>
                             </dl>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-forms-modal>
                                 <span slot="submit"> ${msg("Update")} </span>
                                 <span slot="header"> ${msg("Update Group")} </span>
                                 <ak-group-form slot="form" .instancePk=${this.group.pk}>
                                 </ak-group-form>
-                                <button slot="trigger" class="pf-m-primary pf-c-button">
+                                <button slot="trigger" class="pf-m-primary pf-v5-c-button">
                                     ${msg("Edit")}
                                 </button>
                             </ak-forms-modal>
                         </div>
                     </div>
                     <div
-                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl"
+                        class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl"
                     >
-                        <div class="pf-c-card__title">${msg("Notes")}</div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__title">${msg("Notes")}</div>
+                        <div class="pf-v5-c-card__body">
                             ${Object.hasOwn(this.group?.attributes || {}, "notes")
                                 ? html`${this.group.attributes?.notes}`
                                 : html`
@@ -152,10 +152,10 @@ export class GroupViewPage extends AKElement {
                         </div>
                     </div>
                     <div
-                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
+                        class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
                     >
-                        <div class="pf-c-card__title">${msg("Changelog")}</div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__title">${msg("Changelog")}</div>
+                        <div class="pf-v5-c-card__body">
                             <ak-object-changelog
                                 targetModelPk=${this.group.pk}
                                 targetModelApp="authentik_core"
@@ -169,10 +169,10 @@ export class GroupViewPage extends AKElement {
             <section
                 slot="page-users"
                 data-tab-title="${msg("Users")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-user-related-list .targetGroup=${this.group}> </ak-user-related-list>
                     </div>
                 </div>
diff --git a/web/src/admin/groups/MemberSelectModal.ts b/web/src/admin/groups/MemberSelectModal.ts
index 1d5a53cc7..68637420f 100644
--- a/web/src/admin/groups/MemberSelectModal.ts
+++ b/web/src/admin/groups/MemberSelectModal.ts
@@ -60,13 +60,13 @@ export class MemberSelectTable extends TableModal<User> {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">${msg("Select users to add")}</h1>
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">${msg("Select users to add")}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
-            <footer class="pf-c-modal-box__footer">
+            <section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
                         return this.confirm(this.selectedElements).then(() => {
diff --git a/web/src/admin/outposts/OutpostDeploymentModal.ts b/web/src/admin/outposts/OutpostDeploymentModal.ts
index effa687cf..28c894d5f 100644
--- a/web/src/admin/outposts/OutpostDeploymentModal.ts
+++ b/web/src/admin/outposts/OutpostDeploymentModal.ts
@@ -15,10 +15,10 @@ export class OutpostDeploymentModal extends ModalButton {
     outpost?: Outpost;
 
     renderModalInner(): TemplateResult {
-        return html`<div class="pf-c-modal-box__header">
-                <h1 class="pf-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1>
+        return html`<div class="pf-v5-c-modal-box__header">
+                <h1 class="pf-v5-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1>
             </div>
-            <div class="pf-c-modal-box__body">
+            <div class="pf-v5-c-modal-box__body">
                 <p>
                     <a
                         target="_blank"
@@ -26,21 +26,21 @@ export class OutpostDeploymentModal extends ModalButton {
                         >${msg("View deployment documentation")}</a
                     >
                 </p>
-                <form class="pf-c-form">
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label">
-                            <span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
+                <form class="pf-v5-c-form">
+                    <div class="pf-v5-c-form__group">
+                        <label class="pf-v5-c-form__label">
+                            <span class="pf-v5-c-form__label-text">AUTHENTIK_HOST</span>
                         </label>
                         <input
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             readonly
                             type="text"
                             value="${document.location.origin}"
                         />
                     </div>
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label">
-                            <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
+                    <div class="pf-v5-c-form__group">
+                        <label class="pf-v5-c-form__label">
+                            <span class="pf-v5-c-form__label-text">AUTHENTIK_TOKEN</span>
                         </label>
                         <div>
                             <ak-token-copy-button
@@ -56,11 +56,11 @@ export class OutpostDeploymentModal extends ModalButton {
                             "If your authentik Instance is using a self-signed certificate, set this value.",
                         )}
                     </h3>
-                    <div class="pf-c-form__group">
-                        <label class="pf-c-form__label">
-                            <span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
+                    <div class="pf-v5-c-form__group">
+                        <label class="pf-v5-c-form__label">
+                            <span class="pf-v5-c-form__label-text">AUTHENTIK_INSECURE</span>
                         </label>
-                        <input class="pf-c-form-control" readonly type="text" value="true" />
+                        <input class="pf-v5-c-form-control" readonly type="text" value="true" />
                     </div>
                     ${this.outpost?.type == OutpostTypeEnum.Proxy
                         ? html`
@@ -69,14 +69,14 @@ export class OutpostDeploymentModal extends ModalButton {
                                       "If your authentik_host setting does not match the URL you want to login with, add this setting.",
                                   )}
                               </h3>
-                              <div class="pf-c-form__group">
-                                  <label class="pf-c-form__label">
-                                      <span class="pf-c-form__label-text"
+                              <div class="pf-v5-c-form__group">
+                                  <label class="pf-v5-c-form__label">
+                                      <span class="pf-v5-c-form__label-text"
                                           >AUTHENTIK_HOST_BROWSER</span
                                       >
                                   </label>
                                   <input
-                                      class="pf-c-form-control"
+                                      class="pf-v5-c-form-control"
                                       readonly
                                       type="text"
                                       value="${document.location.origin}"
@@ -86,9 +86,9 @@ export class OutpostDeploymentModal extends ModalButton {
                         : html``}
                 </form>
             </div>
-            <footer class="pf-c-modal-box__footer pf-m-align-left">
+            <footer class="pf-v5-c-modal-box__footer pf-m-align-left">
                 <button
-                    class="pf-c-button pf-m-primary"
+                    class="pf-v5-c-button pf-m-primary"
                     @click=${() => {
                         this.open = false;
                     }}
diff --git a/web/src/admin/outposts/OutpostForm.ts b/web/src/admin/outposts/OutpostForm.ts
index 079e79f64..0d9924489 100644
--- a/web/src/admin/outposts/OutpostForm.ts
+++ b/web/src/admin/outposts/OutpostForm.ts
@@ -99,18 +99,18 @@ export class OutpostForm extends ModelForm<Outpost, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
                 <select
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     @change=${(ev: Event) => {
                         const target = ev.target as HTMLSelectElement;
                         this.type = target.selectedOptions[0].value as OutpostTypeEnum;
@@ -170,12 +170,12 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                     ?blankable=${true}
                 >
                 </ak-search-select>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Selecting an integration enables the management of the outpost by authentik.",
                     )}
                 </p>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     See
                     <a target="_blank" href="${docLink("/docs/outposts?utm_source=authentik")}"
                         >documentation</a
@@ -187,7 +187,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                 ?required=${!this.embedded}
                 name="providers"
             >
-                <select class="pf-c-form-control" multiple>
+                <select class="pf-v5-c-form-control" multiple>
                     ${this.providers?.results.map((provider) => {
                         const selected = Array.from(this.instance?.providers || []).some((sp) => {
                             return sp == provider.pk;
@@ -201,10 +201,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                         </option>`;
                     })}
                 </select>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("You can only select providers that match the type of the outpost.")}
                 </p>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Hold control/command to select multiple items.")}
                 </p>
             </ak-form-element-horizontal>
@@ -215,10 +215,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                         this.instance ? this.instance.config : this.defaultConfig?.config,
                     )}"
                 ></ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("See more here:")}&nbsp;
                     <a
                         target="_blank"
diff --git a/web/src/admin/outposts/OutpostHealth.ts b/web/src/admin/outposts/OutpostHealth.ts
index 1a9710175..909f7f120 100644
--- a/web/src/admin/outposts/OutpostHealth.ts
+++ b/web/src/admin/outposts/OutpostHealth.ts
@@ -39,25 +39,25 @@ export class OutpostHealthElement extends AKElement {
                 8,
             )})`;
         }
-        return html`<dl class="pf-c-description-list pf-m-compact">
-            <div class="pf-c-description-list__group">
-                <dt class="pf-c-description-list__term">
-                    <span class="pf-c-description-list__text">${msg("Last seen")}</span>
+        return html`<dl class="pf-v5-c-description-list pf-m-compact">
+            <div class="pf-v5-c-description-list__group">
+                <dt class="pf-v5-c-description-list__term">
+                    <span class="pf-v5-c-description-list__text">${msg("Last seen")}</span>
                 </dt>
-                <dd class="pf-c-description-list__description">
-                    <div class="pf-c-description-list__text">
+                <dd class="pf-v5-c-description-list__description">
+                    <div class="pf-v5-c-description-list__text">
                         <ak-label color=${PFColor.Green} ?compact=${true}>
                             ${this.outpostHealth.lastSeen?.toLocaleTimeString()}
                         </ak-label>
                     </div>
                 </dd>
             </div>
-            <div class="pf-c-description-list__group">
-                <dt class="pf-c-description-list__term">
-                    <span class="pf-c-description-list__text">${msg("Version")}</span>
+            <div class="pf-v5-c-description-list__group">
+                <dt class="pf-v5-c-description-list__term">
+                    <span class="pf-v5-c-description-list__text">${msg("Version")}</span>
                 </dt>
-                <dd class="pf-c-description-list__description">
-                    <div class="pf-c-description-list__text">
+                <dd class="pf-v5-c-description-list__description">
+                    <div class="pf-v5-c-description-list__text">
                         ${this.outpostHealth.versionOutdated
                             ? html`<ak-label color=${PFColor.Red} ?compact=${true}
                                   >${msg(
@@ -70,12 +70,12 @@ export class OutpostHealthElement extends AKElement {
                     </div>
                 </dd>
             </div>
-            <div class="pf-c-description-list__group">
-                <dt class="pf-c-description-list__term">
-                    <span class="pf-c-description-list__text">${msg("Hostname")}</span>
+            <div class="pf-v5-c-description-list__group">
+                <dt class="pf-v5-c-description-list__term">
+                    <span class="pf-v5-c-description-list__text">${msg("Hostname")}</span>
                 </dt>
-                <dd class="pf-c-description-list__description">
-                    <div class="pf-c-description-list__text">${this.outpostHealth.hostname}</div>
+                <dd class="pf-v5-c-description-list__description">
+                    <div class="pf-v5-c-description-list__text">${this.outpostHealth.hostname}</div>
                 </dd>
             </div>
         </dl> `;
diff --git a/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts b/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
index afa0c1be3..ed3e99328 100644
--- a/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
@@ -45,30 +45,30 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="local">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.local, false)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Local")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Local")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "If enabled, use the local connection. Required Docker socket/Kubernetes Integration.",
                     )}
@@ -80,23 +80,23 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
                     value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}"
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="verifySsl">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.verifySsl, true)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label"
+                    <span class="pf-v5-c-switch__label"
                         >${msg("Verify Kubernetes API SSL Certificate")}</span
                     >
                 </label>
diff --git a/web/src/admin/outposts/ServiceConnectionWizard.ts b/web/src/admin/outposts/ServiceConnectionWizard.ts
index 5f221fee3..0fb802a00 100644
--- a/web/src/admin/outposts/ServiceConnectionWizard.ts
+++ b/web/src/admin/outposts/ServiceConnectionWizard.ts
@@ -41,11 +41,11 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
     };
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.connectionTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${`${type.component}-${type.modelName}`}
@@ -57,10 +57,10 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
+                    <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
                         >${type.name}</label
                     >
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
@@ -107,7 +107,7 @@ export class ServiceConnectionWizard extends AKElement {
                         </ak-wizard-page-form>
                     `;
                 })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
             </ak-wizard>
         `;
     }
diff --git a/web/src/admin/policies/BoundPoliciesList.ts b/web/src/admin/policies/BoundPoliciesList.ts
index 8a7dffc2b..b0201cd28 100644
--- a/web/src/admin/policies/BoundPoliciesList.ts
+++ b/web/src/admin/policies/BoundPoliciesList.ts
@@ -85,7 +85,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                     type=${ifDefined(item.policyObj?.component)}
                 >
                 </ak-proxy-form>
-                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
                     ${msg("Edit Policy")}
                 </button>
             </ak-forms-modal>`;
@@ -94,7 +94,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 <span slot="submit"> ${msg("Update")} </span>
                 <span slot="header"> ${msg("Update Group")} </span>
                 <ak-group-form slot="form" .instancePk=${item.groupObj?.pk}> </ak-group-form>
-                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
                     ${msg("Edit Group")}
                 </button>
             </ak-forms-modal>`;
@@ -103,7 +103,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 <span slot="submit"> ${msg("Update")} </span>
                 <span slot="header"> ${msg("Update User")} </span>
                 <ak-user-form slot="form" .instancePk=${item.userObj?.pk}> </ak-user-form>
-                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
                     ${msg("Edit User")}
                 </button>
             </ak-forms-modal>`;
@@ -137,7 +137,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 });
             }}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+            <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
                 ${msg("Delete")}
             </button>
         </ak-forms-delete-bulk>`;
@@ -162,7 +162,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                         ?policyOnly=${this.policyOnly}
                     >
                     </ak-policy-binding-form>
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">
+                    <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
                         ${msg("Edit Binding")}
                     </button>
                 </ak-forms-modal>`,
@@ -183,7 +183,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                             ?policyOnly=${this.policyOnly}
                         >
                         </ak-policy-binding-form>
-                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                        <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                             ${msg("Create Binding")}
                         </button>
                     </ak-forms-modal>
@@ -207,7 +207,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                     ?policyOnly=${this.policyOnly}
                 >
                 </ak-policy-binding-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                     ${msg("Bind existing policy")}
                 </button>
             </ak-forms-modal> `;
diff --git a/web/src/admin/policies/PolicyTestForm.ts b/web/src/admin/policies/PolicyTestForm.ts
index b8dd38712..23691a985 100644
--- a/web/src/admin/policies/PolicyTestForm.ts
+++ b/web/src/admin/policies/PolicyTestForm.ts
@@ -54,9 +54,9 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
     renderResult(): TemplateResult {
         return html`
             <ak-form-element-horizontal label=${msg("Passing")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <span class="pf-c-form__label-text">
+                        <span class="pf-v5-c-form__label-text">
                             <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
                                 ${this.result?.passing ? msg("Yes") : msg("No")}
                             </ak-label>
@@ -65,17 +65,17 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                 </div>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Messages")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
                         <ul>
                             ${(this.result?.messages || []).length > 0
                                 ? this.result?.messages?.map((m) => {
                                       return html`<li>
-                                          <span class="pf-c-form__label-text">${m}</span>
+                                          <span class="pf-v5-c-form__label-text">${m}</span>
                                       </li>`;
                                   })
                                 : html`<li>
-                                      <span class="pf-c-form__label-text">-</span>
+                                      <span class="pf-v5-c-form__label-text">-</span>
                                   </li>`}
                         </ul>
                     </div>
@@ -83,27 +83,27 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
             </ak-form-element-horizontal>
 
             <ak-form-element-horizontal label=${msg("Log messages")}>
-                <div class="pf-c-form__group-label">
+                <div class="pf-v5-c-form__group-label">
                     <div class="c-form__horizontal-group">
-                        <dl class="pf-c-description-list pf-m-horizontal">
+                        <dl class="pf-v5-c-description-list pf-m-horizontal">
                             ${(this.result?.logMessages || []).length > 0
                                 ? this.result?.logMessages?.map((m) => {
-                                      return html`<div class="pf-c-description-list__group">
-                                          <dt class="pf-c-description-list__term">
-                                              <span class="pf-c-description-list__text"
+                                      return html`<div class="pf-v5-c-description-list__group">
+                                          <dt class="pf-v5-c-description-list__term">
+                                              <span class="pf-v5-c-description-list__text"
                                                   >${m.log_level}</span
                                               >
                                           </dt>
-                                          <dd class="pf-c-description-list__description">
-                                              <div class="pf-c-description-list__text">
+                                          <dd class="pf-v5-c-description-list__description">
+                                              <div class="pf-v5-c-description-list__text">
                                                   ${m.event}
                                               </div>
                                           </dd>
                                       </div>`;
                                   })
-                                : html`<div class="pf-c-description-list__group">
-                                      <dt class="pf-c-description-list__term">
-                                          <span class="pf-c-description-list__text"
+                                : html`<div class="pf-v5-c-description-list__group">
+                                      <dt class="pf-v5-c-description-list__term">
+                                          <span class="pf-v5-c-description-list__text"
                                               >${msg("No log messages.")}</span
                                           >
                                       </dt>
@@ -149,7 +149,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                     value=${YAML.stringify(first(this.request?.context, {}))}
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
             </ak-form-element-horizontal>
diff --git a/web/src/admin/policies/PolicyWizard.ts b/web/src/admin/policies/PolicyWizard.ts
index c1a36fe53..e7300ee8a 100644
--- a/web/src/admin/policies/PolicyWizard.ts
+++ b/web/src/admin/policies/PolicyWizard.ts
@@ -47,11 +47,11 @@ export class InitialPolicyWizardPage extends WizardPage {
     };
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.policyTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${`${type.component}-${type.modelName}`}
@@ -70,10 +70,10 @@ export class InitialPolicyWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
+                    <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
                         >${type.name}</label
                     >
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
@@ -144,7 +144,7 @@ export class PolicyWizard extends AKElement {
                           ></ak-policy-binding-form>
                       </ak-wizard-page-form>`
                     : html``}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
             </ak-wizard>
         `;
     }
diff --git a/web/src/admin/policies/reputation/ReputationListPage.ts b/web/src/admin/policies/reputation/ReputationListPage.ts
index c2144a436..88318c7e5 100644
--- a/web/src/admin/policies/reputation/ReputationListPage.ts
+++ b/web/src/admin/policies/reputation/ReputationListPage.ts
@@ -71,7 +71,7 @@ export class ReputationListPage extends TablePage<Reputation> {
                 });
             }}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+            <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
                 ${msg("Delete")}
             </button>
         </ak-forms-delete-bulk>`;
diff --git a/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts b/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
index 359e76799..4e7b53638 100644
--- a/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
@@ -41,12 +41,12 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -58,10 +58,10 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.objectField)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Field of the user object this value is written to.")}
                 </p>
             </ak-form-element-horizontal>
@@ -72,7 +72,7 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
             >
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Expression using Python.")}
                     <a
                         target="_blank"
diff --git a/web/src/admin/property-mappings/PropertyMappingNotification.ts b/web/src/admin/property-mappings/PropertyMappingNotification.ts
index 36c9344f5..4db7a561c 100644
--- a/web/src/admin/property-mappings/PropertyMappingNotification.ts
+++ b/web/src/admin/property-mappings/PropertyMappingNotification.ts
@@ -41,12 +41,12 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -57,7 +57,7 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
             >
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Expression using Python.")}
                     <a
                         target="_blank"
diff --git a/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts b/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
index 54f7c07d8..22a9ab7e5 100644
--- a/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
@@ -41,12 +41,12 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -58,10 +58,10 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.samlName)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Attribute name used for SAML Assertions. Can be a URN OID, a schema reference, or a any other string. If this property mapping is used for NameID Property, this field is discarded.",
                     )}
@@ -71,9 +71,9 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.friendlyName || "")}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Optionally set the 'FriendlyName' value of the Assertion attribute.")}
                 </p>
             </ak-form-element-horizontal>
@@ -84,7 +84,7 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
             >
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Expression using Python.")}
                     <a
                         target="_blank"
diff --git a/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts b/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
index 36c5df7a5..b8158a61f 100644
--- a/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
@@ -41,12 +41,12 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -57,7 +57,7 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
             >
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Expression using Python.")}
                     <a
                         target="_blank"
diff --git a/web/src/admin/property-mappings/PropertyMappingScopeForm.ts b/web/src/admin/property-mappings/PropertyMappingScopeForm.ts
index 945f0b01e..1d6401ca5 100644
--- a/web/src/admin/property-mappings/PropertyMappingScopeForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingScopeForm.ts
@@ -41,12 +41,12 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -58,10 +58,10 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.scopeName)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Scope which the client can specify to access these properties.")}
                 </p>
             </ak-form-element-horizontal>
@@ -69,9 +69,9 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.description)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Description shown to the user when consenting. If left empty, the user won't be informed.",
                     )}
@@ -84,7 +84,7 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
             >
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Expression using Python.")}
                     <a
                         target="_blank"
diff --git a/web/src/admin/property-mappings/PropertyMappingTestForm.ts b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
index 10617238f..32f866161 100644
--- a/web/src/admin/property-mappings/PropertyMappingTestForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
@@ -55,9 +55,9 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                       value="${ifDefined(this.result?.result)}"
                   >
                   </ak-codemirror>`
-                : html` <div class="pf-c-form__group-label">
+                : html` <div class="pf-v5-c-form__group-label">
                       <div class="c-form__horizontal-group">
-                          <span class="pf-c-form__label-text">${this.result?.result}</span>
+                          <span class="pf-v5-c-form__label-text">${this.result?.result}</span>
                       </div>
                   </div>`}
         </ak-form-element-horizontal>`;
@@ -76,7 +76,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
     renderExampleLDAP(): TemplateResult {
         return html`
             <button
-                class="pf-c-button pf-m-secondary"
+                class="pf-v5-c-button pf-m-secondary"
                 role="button"
                 @click=${() => {
                     this.request = {
@@ -97,7 +97,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                 ${msg("Active Directory User")}
             </button>
             <button
-                class="pf-c-button pf-m-secondary"
+                class="pf-v5-c-button pf-m-secondary"
                 role="button"
                 @click=${() => {
                     this.request = {
@@ -152,7 +152,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                     value=${YAML.stringify(first(this.request?.context, {}))}
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">${this.renderExampleButtons()}</p>
+                <p class="pf-v5-c-form__helper-text">${this.renderExampleButtons()}</p>
             </ak-form-element-horizontal>
             ${this.result ? this.renderResult() : html``}`;
     }
diff --git a/web/src/admin/property-mappings/PropertyMappingWizard.ts b/web/src/admin/property-mappings/PropertyMappingWizard.ts
index 9086546a0..f6838b9ba 100644
--- a/web/src/admin/property-mappings/PropertyMappingWizard.ts
+++ b/web/src/admin/property-mappings/PropertyMappingWizard.ts
@@ -44,11 +44,11 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
     };
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.mappingTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${`${type.component}-${type.modelName}`}
@@ -60,10 +60,10 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
+                    <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
                         >${type.name}</label
                     >
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
@@ -107,7 +107,7 @@ export class PropertyMappingWizard extends AKElement {
                         </ak-wizard-page-form>
                     `;
                 })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">${msg("Create")}</button>
             </ak-wizard>
         `;
     }
diff --git a/web/src/admin/providers/ProviderWizard.ts b/web/src/admin/providers/ProviderWizard.ts
index a65945354..df4c66658 100644
--- a/web/src/admin/providers/ProviderWizard.ts
+++ b/web/src/admin/providers/ProviderWizard.ts
@@ -46,16 +46,16 @@ export class InitialProviderWizardPage extends WizardPage {
     };
 
     renderHint(): TemplateResult {
-        return html`<div class="pf-c-hint">
-                <div class="pf-c-hint__title">${msg("Try the new application wizard")}</div>
-                <div class="pf-c-hint__body">
+        return html`<div class="pf-v5-c-hint">
+                <div class="pf-v5-c-hint__title">${msg("Try the new application wizard")}</div>
+                <div class="pf-v5-c-hint__body">
                     ${msg(
                         "The new application wizard greatly simplifies the steps required to create applications and providers.",
                     )}
                 </div>
-                <div class="pf-c-hint__footer">
+                <div class="pf-v5-c-hint__footer">
                     <a
-                        class="pf-c-button pf-m-link pf-m-inline"
+                        class="pf-v5-c-button pf-m-link pf-m-inline"
                         href=${paramURL("/core/applications", {
                             createForm: true,
                         })}
@@ -67,11 +67,11 @@ export class InitialProviderWizardPage extends WizardPage {
     }
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.providerTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${type.component}
@@ -80,8 +80,8 @@ export class InitialProviderWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
@@ -133,7 +133,7 @@ export class ProviderWizard extends AKElement {
                         </ak-wizard-page-form>
                     `;
                 })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
             </ak-wizard>
         `;
     }
diff --git a/web/src/admin/providers/RelatedApplicationButton.ts b/web/src/admin/providers/RelatedApplicationButton.ts
index 4e225eeb8..4765d6c57 100644
--- a/web/src/admin/providers/RelatedApplicationButton.ts
+++ b/web/src/admin/providers/RelatedApplicationButton.ts
@@ -31,7 +31,7 @@ export class RelatedApplicationButton extends AKElement {
             <span slot="submit"> ${msg("Create")} </span>
             <span slot="header"> ${msg("Create Application")} </span>
             <ak-application-form slot="form" .provider=${this.provider?.pk}> </ak-application-form>
-            <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
+            <button slot="trigger" class="pf-v5-c-button pf-m-primary">${msg("Create")}</button>
         </ak-forms-modal>`;
     }
 }
diff --git a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts b/web/src/admin/providers/ldap/LDAPProviderViewPage.ts
index f644bb7c5..0af6333e7 100644
--- a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderViewPage.ts
@@ -89,10 +89,10 @@ export class LDAPProviderViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-object-changelog
                             targetModelPk=${this.provider?.pk || ""}
                             targetModelName=${this.provider?.metaModelName || ""}
@@ -111,109 +111,109 @@ export class LDAPProviderViewPage extends AKElement {
         return html`
             ${
                 this.provider?.outpostSet.length < 1
-                    ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                    ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                           ${msg("Warning: Provider is not used by any Outpost.")}
                       </div>`
                     : html``
             }
-            <div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
-                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__body">
-                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg("Name")}</span>
+            <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__body">
+                        <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.name}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Assigned to application")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         <ak-provider-related-application
                                             .provider=${this.provider}
                                         ></ak-provider-related-application>
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Base DN")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.baseDn}
                                     </div>
                                 </dd>
                             </div>
                         </dl>
                     </div>
-                    <div class="pf-c-card__footer">
+                    <div class="pf-v5-c-card__footer">
                         <ak-forms-modal>
                             <span slot="submit"> ${msg("Update")} </span>
                             <span slot="header"> ${msg("Update LDAP Provider")} </span>
                             <ak-provider-ldap-form slot="form" .instancePk=${this.provider.pk}>
                             </ak-provider-ldap-form>
-                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                            <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                 ${msg("Edit")}
                             </button>
                         </ak-forms-modal>
                     </div>
                 </div>
-                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__title">
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__title">
                         ${msg("How to connect")}
                     </div>
-                    <div class="pf-c-card__body">
+                    <div class="pf-v5-c-card__body">
                         <p>
                             ${msg("Connect to the LDAP Server on port 389:")}
                         </p>
-                        <ul class="pf-c-list">
+                        <ul class="pf-v5-c-list">
                             <li>${msg("Check the IP of the Kubernetes service, or")}</li>
                             <li>${msg("The Host IP of the docker host")}</li>
                         </ul>
-                        <form class="pf-c-form">
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text">${msg("Bind DN")}</span>
+                        <form class="pf-v5-c-form">
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text">${msg("Bind DN")}</span>
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value=${`cn=${this.me?.user
                                         .username},ou=users,${this.provider?.baseDn?.toLowerCase()}`}
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text">${msg(
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text">${msg(
                                         "Bind Password",
                                     )}</span>
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="Your authentik password"
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text">${msg("Search base")}</span>
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text">${msg("Search base")}</span>
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value=${ifDefined(this.provider?.baseDn?.toLowerCase())}
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
index 920e71ceb..42a6d9245 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
@@ -116,10 +116,10 @@ export class OAuth2ProviderViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-object-changelog
                             targetModelPk=${this.provider?.pk || ""}
                             targetModelName=${this.provider?.metaModelName || ""}
@@ -137,77 +137,77 @@ export class OAuth2ProviderViewPage extends AKElement {
         }
         return html` ${this.provider?.assignedApplicationName
                 ? html``
-                : html`<div slot="header" class="pf-c-banner pf-m-warning">
+                : html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by an Application.")}
                   </div>`}
-            <div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
+            <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
                 <div
-                    class="pf-c-card pf-l-grid__item pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
+                    class="pf-v5-c-card pf-v5-l-grid__item pf-v5-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
                 >
-                    <div class="pf-c-card__body">
-                        <dl class="pf-c-description-list">
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg("Name")}</span>
+                    <div class="pf-v5-c-card__body">
+                        <dl class="pf-v5-c-description-list">
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.name}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Assigned to application")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         <ak-provider-related-application .provider=${this.provider}>
                                         </ak-provider-related-application>
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Client type")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${convertToTitle(this.provider.clientType || "")}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Client ID")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.clientId}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Redirect URIs")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.redirectUris}
                                     </div>
                                 </dd>
                             </div>
                         </dl>
                     </div>
-                    <div class="pf-c-card__footer">
+                    <div class="pf-v5-c-card__footer">
                         <ak-forms-modal>
                             <span slot="submit"> ${msg("Update")} </span>
                             <span slot="header"> ${msg("Update OAuth2 Provider")} </span>
@@ -216,96 +216,96 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 .instancePk=${this.provider.pk || 0}
                             >
                             </ak-provider-oauth2-form>
-                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                            <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                 ${msg("Edit")}
                             </button>
                         </ak-forms-modal>
                     </div>
                 </div>
-                <div class="pf-c-card pf-l-grid__item pf-m-7-col">
-                    <div class="pf-c-card__body">
-                        <form class="pf-c-form">
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text"
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-7-col">
+                    <div class="pf-v5-c-card__body">
+                        <form class="pf-v5-c-form">
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text"
                                         >${msg("OpenID Configuration URL")}</span
                                     >
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.providerInfo || msg("-")}"
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text"
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text"
                                         >${msg("OpenID Configuration Issuer")}</span
                                     >
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.issuer || msg("-")}"
                                 />
                             </div>
                             <hr />
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text"
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text"
                                         >${msg("Authorize URL")}</span
                                     >
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.authorize || msg("-")}"
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text">${msg("Token URL")}</span>
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text">${msg("Token URL")}</span>
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.token || msg("-")}"
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text"
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text"
                                         >${msg("Userinfo URL")}</span
                                     >
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.userInfo || msg("-")}"
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text">${msg("Logout URL")}</span>
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text">${msg("Logout URL")}</span>
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.logout || msg("-")}"
                                 />
                             </div>
-                            <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
-                                    <span class="pf-c-form__label-text">${msg("JWKS URL")}</span>
+                            <div class="pf-v5-c-form__group">
+                                <label class="pf-v5-c-form__label">
+                                    <span class="pf-v5-c-form__label-text">${msg("JWKS URL")}</span>
                                 </label>
                                 <input
-                                    class="pf-c-form-control"
+                                    class="pf-v5-c-form-control"
                                     readonly
                                     type="text"
                                     value="${this.providerUrls?.jwks || msg("-")}"
@@ -315,9 +315,9 @@ export class OAuth2ProviderViewPage extends AKElement {
                     </div>
                 </div>
                 <div
-                    class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
+                    class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
                 >
-                    <div class="pf-c-card__body">
+                    <div class="pf-v5-c-card__body">
                         <ak-markdown
                             .replacers=${[
                                 (input: string) => {
@@ -342,13 +342,13 @@ export class OAuth2ProviderViewPage extends AKElement {
             return html``;
         }
         return html` <div
-            class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
+            class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
         >
-            <div class="pf-c-card">
-                <div class="pf-c-card__title">
+            <div class="pf-v5-c-card">
+                <div class="pf-v5-c-card__title">
                     ${msg("Example JWT payload (for currently authenticated user)")}
                 </div>
-                <div class="pf-c-card__body">
+                <div class="pf-v5-c-card__body">
                     ${this.preview
                         ? html`<pre>${JSON.stringify(this.preview?.preview, null, 4)}</pre>`
                         : html` <ak-empty-state ?loading=${true}></ak-empty-state> `}
diff --git a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts b/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
index 2451cfa1e..97deb1edb 100644
--- a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderViewPage.ts
@@ -174,7 +174,7 @@ export class ProxyProviderViewPage extends AKElement {
                 return html`<section
                     slot="page-${convertToSlug(server.label)}"
                     data-tab-title="${server.label}"
-                    class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
+                    class="pf-v5-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                 >
                     <ak-markdown .replacers=${replacers} .md=${server.md}></ak-markdown>
                 </section>`;
@@ -196,10 +196,10 @@ export class ProxyProviderViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-object-changelog
                             targetModelPk=${this.provider?.pk || ""}
                             targetModelName=${this.provider?.metaModelName || ""}
@@ -216,17 +216,17 @@ export class ProxyProviderViewPage extends AKElement {
             return html``;
         }
         return html`<div
-            class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
+            class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
         >
-            <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                <div class="pf-c-card__body">
-                    <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                        <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                                <span class="pf-c-description-list__text">${msg("Client ID")}</span>
+            <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                <div class="pf-v5-c-card__body">
+                    <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                        <div class="pf-v5-c-description-list__group">
+                            <dt class="pf-v5-c-description-list__term">
+                                <span class="pf-v5-c-description-list__text">${msg("Client ID")}</span>
                             </dt>
-                            <dd class="pf-c-description-list__description">
-                                <div class="pf-c-description-list__text">
+                            <dd class="pf-v5-c-description-list__description">
+                                <div class="pf-v5-c-description-list__text">
                                     <pre>${this.provider.clientId}</pre>
                                 </div>
                             </dd>
@@ -234,8 +234,8 @@ export class ProxyProviderViewPage extends AKElement {
                     </dl>
                 </div>
             </div>
-            <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                <div class="pf-c-card__body">
+            <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                <div class="pf-v5-c-card__body">
                     <ak-markdown .md=${MDHeaderAuthentication}></ak-markdown>
                 </div>
             </div>
@@ -248,76 +248,76 @@ export class ProxyProviderViewPage extends AKElement {
         }
         return html`${this.provider?.assignedApplicationName
                 ? html``
-                : html`<div slot="header" class="pf-c-banner pf-m-warning">
+                : html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by an Application.")}
                   </div>`}
             ${this.provider?.outpostSet.length < 1
-                ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by any Outpost.")}
                   </div>`
                 : html``}
-            <div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
-                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__body">
-                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg("Name")}</span>
+            <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__body">
+                        <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.name}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Assigned to application")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         <ak-provider-related-application
                                             .provider=${this.provider}
                                         ></ak-provider-related-application>
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Internal Host")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.internalHost}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("External Host")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         <a target="_blank" href="${this.provider.externalHost}"
                                             >${this.provider.externalHost}</a
                                         >
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Basic-Auth")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         <ak-label
                                             color=${this.provider.basicAuthEnabled
                                                 ? PFColor.Green
@@ -330,19 +330,19 @@ export class ProxyProviderViewPage extends AKElement {
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg("Mode")}</span>
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg("Mode")}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${ModeToLabel(this.provider.mode || ProxyMode.Proxy)}
                                     </div>
                                 </dd>
                             </div>
                         </dl>
                     </div>
-                    <div class="pf-c-card__footer">
+                    <div class="pf-v5-c-card__footer">
                         <ak-forms-modal>
                             <span slot="submit"> ${msg("Update")} </span>
                             <span slot="header"> ${msg("Update Proxy Provider")} </span>
@@ -351,25 +351,25 @@ export class ProxyProviderViewPage extends AKElement {
                                 .instancePk=${this.provider.pk || 0}
                             >
                             </ak-provider-proxy-form>
-                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                            <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                 ${msg("Edit")}
                             </button>
                         </ak-forms-modal>
                     </div>
                 </div>
-                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__title">${msg("Protocol Settings")}</div>
-                    <div class="pf-c-card__body">
-                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__title">${msg("Protocol Settings")}</div>
+                    <div class="pf-v5-c-card__body">
+                        <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Allowed Redirect URIs")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
-                                        <ul class="pf-c-list">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
+                                        <ul class="pf-v5-c-list">
                                             ${this.provider.redirectUris.split("\n").map((url) => {
                                                 return html`<li><pre>${url}</pre></li>`;
                                             })}
@@ -380,9 +380,9 @@ export class ProxyProviderViewPage extends AKElement {
                         </dl>
                     </div>
                 </div>
-                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__title">${msg("Setup")}</div>
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__title">${msg("Setup")}</div>
+                    <div class="pf-v5-c-card__body">
                         ${isForward(this.provider?.mode || ProxyMode.Proxy)
                             ? html` ${this.renderConfig()} `
                             : html` <p>${msg("No additional setup is required.")}</p> `}
diff --git a/web/src/admin/providers/radius/RadiusProviderViewPage.ts b/web/src/admin/providers/radius/RadiusProviderViewPage.ts
index b62600a97..10934c059 100644
--- a/web/src/admin/providers/radius/RadiusProviderViewPage.ts
+++ b/web/src/admin/providers/radius/RadiusProviderViewPage.ts
@@ -76,59 +76,59 @@ export class RadiusProviderViewPage extends AKElement {
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
                 ${this.provider?.outpostSet.length < 1
-                    ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                    ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                           ${msg("Warning: Provider is not used by any Outpost.")}
                       </div>`
                     : html``}
-                <div class="pf-u-display-flex pf-u-justify-content-center">
-                    <div class="pf-u-w-75">
-                        <div class="pf-c-card">
-                            <div class="pf-c-card__body">
-                                <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                    <div class="pf-c-description-list__group">
-                                        <dt class="pf-c-description-list__term">
-                                            <span class="pf-c-description-list__text"
+                <div class="pf-v5-u-display-flex pf-v5-u-justify-content-center">
+                    <div class="pf-v5-u-w-75">
+                        <div class="pf-v5-c-card">
+                            <div class="pf-v5-c-card__body">
+                                <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                                    <div class="pf-v5-c-description-list__group">
+                                        <dt class="pf-v5-c-description-list__term">
+                                            <span class="pf-v5-c-description-list__text"
                                                 >${msg("Name")}</span
                                             >
                                         </dt>
-                                        <dd class="pf-c-description-list__description">
-                                            <div class="pf-c-description-list__text">
+                                        <dd class="pf-v5-c-description-list__description">
+                                            <div class="pf-v5-c-description-list__text">
                                                 ${this.provider.name}
                                             </div>
                                         </dd>
                                     </div>
-                                    <div class="pf-c-description-list__group">
-                                        <dt class="pf-c-description-list__term">
-                                            <span class="pf-c-description-list__text"
+                                    <div class="pf-v5-c-description-list__group">
+                                        <dt class="pf-v5-c-description-list__term">
+                                            <span class="pf-v5-c-description-list__text"
                                                 >${msg("Assigned to application")}</span
                                             >
                                         </dt>
-                                        <dd class="pf-c-description-list__description">
-                                            <div class="pf-c-description-list__text">
+                                        <dd class="pf-v5-c-description-list__description">
+                                            <div class="pf-v5-c-description-list__text">
                                                 <ak-provider-related-application
                                                     .provider=${this.provider}
                                                 ></ak-provider-related-application>
                                             </div>
                                         </dd>
                                     </div>
-                                    <div class="pf-c-description-list__group">
-                                        <dt class="pf-c-description-list__term">
-                                            <span class="pf-c-description-list__text"
+                                    <div class="pf-v5-c-description-list__group">
+                                        <dt class="pf-v5-c-description-list__term">
+                                            <span class="pf-v5-c-description-list__text"
                                                 >${msg("Client Networks")}</span
                                             >
                                         </dt>
-                                        <dd class="pf-c-description-list__description">
-                                            <div class="pf-c-description-list__text">
+                                        <dd class="pf-v5-c-description-list__description">
+                                            <div class="pf-v5-c-description-list__text">
                                                 ${this.provider.clientNetworks}
                                             </div>
                                         </dd>
                                     </div>
                                 </dl>
                             </div>
-                            <div class="pf-c-card__footer">
+                            <div class="pf-v5-c-card__footer">
                                 <ak-forms-modal>
                                     <span slot="submit"> ${msg("Update")} </span>
                                     <span slot="header"> ${msg("Update Radius Provider")} </span>
@@ -137,7 +137,7 @@ export class RadiusProviderViewPage extends AKElement {
                                         .instancePk=${this.provider.pk}
                                     >
                                     </ak-provider-radius-form>
-                                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                                    <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                         ${msg("Edit")}
                                     </button>
                                 </ak-forms-modal>
@@ -149,10 +149,10 @@ export class RadiusProviderViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-object-changelog
                             targetModelPk=${this.provider.pk || ""}
                             targetModelApp="authentik_providers_radius"
diff --git a/web/src/admin/providers/saml/SAMLProviderViewPage.ts b/web/src/admin/providers/saml/SAMLProviderViewPage.ts
index 3e8d773ef..7bd36684d 100644
--- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts
+++ b/web/src/admin/providers/saml/SAMLProviderViewPage.ts
@@ -121,14 +121,14 @@ export class SAMLProviderViewPage extends AKElement {
         const relatedObjects = [];
         if (this.provider?.assignedApplicationName) {
             relatedObjects.push(
-                html`<div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                        <span class="pf-c-description-list__text">${msg("Metadata")}</span>
+                html`<div class="pf-v5-c-description-list__group">
+                    <dt class="pf-v5-c-description-list__term">
+                        <span class="pf-v5-c-description-list__text">${msg("Metadata")}</span>
                     </dt>
-                    <dd class="pf-c-description-list__description">
-                        <div class="pf-c-description-list__text">
+                    <dd class="pf-v5-c-description-list__description">
+                        <div class="pf-v5-c-description-list__text">
                             <a
-                                class="pf-c-button pf-m-primary"
+                                class="pf-v5-c-button pf-m-primary"
                                 target="_blank"
                                 href=${ifDefined(this.provider?.urlDownloadMetadata)}
                             >
@@ -159,16 +159,16 @@ export class SAMLProviderViewPage extends AKElement {
         }
         if (this.signer) {
             relatedObjects.push(
-                html`<div class="pf-c-description-list__group">
-                    <dt class="pf-c-description-list__term">
-                        <span class="pf-c-description-list__text"
+                html`<div class="pf-v5-c-description-list__group">
+                    <dt class="pf-v5-c-description-list__term">
+                        <span class="pf-v5-c-description-list__text"
                             >${msg("Download signing certificate")}</span
                         >
                     </dt>
-                    <dd class="pf-c-description-list__description">
-                        <div class="pf-c-description-list__text">
+                    <dd class="pf-v5-c-description-list__description">
+                        <div class="pf-v5-c-description-list__text">
                             <a
-                                class="pf-c-button pf-m-primary"
+                                class="pf-v5-c-button pf-m-primary"
                                 href=${this.signer.certificateDownloadUrl}
                                 >${msg("Download")}</a
                             >
@@ -177,10 +177,10 @@ export class SAMLProviderViewPage extends AKElement {
                 </div>`,
             );
         }
-        return html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-            <div class="pf-c-card__title">${msg("Related objects")}</div>
-            <div class="pf-c-card__body">
-                <dl class="pf-c-description-list pf-m-2-col">
+        return html` <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+            <div class="pf-v5-c-card__title">${msg("Related objects")}</div>
+            <div class="pf-v5-c-card__body">
+                <dl class="pf-v5-c-description-list pf-m-2-col">
                     ${relatedObjects.length > 0 ? relatedObjects : html`-`}
                 </dl>
             </div>
@@ -214,10 +214,10 @@ export class SAMLProviderViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-object-changelog
                             targetModelPk=${this.provider?.pk || ""}
                             targetModelName=${this.provider?.metaModelName || ""}
@@ -236,83 +236,83 @@ export class SAMLProviderViewPage extends AKElement {
         return html`${
             this.provider?.assignedApplicationName
                 ? html``
-                : html`<div slot="header" class="pf-c-banner pf-m-warning">
+                : html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by an Application.")}
                   </div>`
         }
-            <div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
-                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__body">
-                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg("Name")}</span>
+            <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__body">
+                        <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.name}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text"
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text"
                                         >${msg("Assigned to application")}</span
                                     >
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         <ak-provider-related-application
                                             .provider=${this.provider}
                                         ></ak-provider-related-application>
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg(
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg(
                                         "ACS URL",
                                     )}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.acsUrl}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg(
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg(
                                         "Audience",
                                     )}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.audience || "-"}
                                     </div>
                                 </dd>
                             </div>
-                            <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${msg(
+                            <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${msg(
                                         "Issuer",
                                     )}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
                                         ${this.provider.issuer}
                                     </div>
                                 </dd>
                             </div>
                         </dl>
                     </div>
-                    <div class="pf-c-card__footer">
+                    <div class="pf-v5-c-card__footer">
                         <ak-forms-modal>
                             <span slot="submit"> ${msg("Update")} </span>
                             <span slot="header"> ${msg("Update SAML Provider")} </span>
                             <ak-provider-saml-form slot="form" .instancePk=${this.provider.pk || 0}>
                             </ak-provider-saml-form>
-                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                            <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                 ${msg("Edit")}
                             </button>
                         </ak-forms-modal>
@@ -321,83 +321,83 @@ export class SAMLProviderViewPage extends AKElement {
                 ${this.renderRelatedObjects()}
                 ${
                     this.provider.assignedApplicationName
-                        ? html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                              <div class="pf-c-card__title">${msg("SAML Configuration")}</div>
-                              <div class="pf-c-card__body">
-                                  <form class="pf-c-form">
-                                      <div class="pf-c-form__group">
-                                          <label class="pf-c-form__label">
-                                              <span class="pf-c-form__label-text"
+                        ? html` <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                              <div class="pf-v5-c-card__title">${msg("SAML Configuration")}</div>
+                              <div class="pf-v5-c-card__body">
+                                  <form class="pf-v5-c-form">
+                                      <div class="pf-v5-c-form__group">
+                                          <label class="pf-v5-c-form__label">
+                                              <span class="pf-v5-c-form__label-text"
                                                   >${msg("EntityID/Issuer")}</span
                                               >
                                           </label>
                                           <input
-                                              class="pf-c-form-control"
+                                              class="pf-v5-c-form-control"
                                               readonly
                                               type="text"
                                               value="${ifDefined(this.provider?.issuer)}"
                                           />
                                       </div>
-                                      <div class="pf-c-form__group">
-                                          <label class="pf-c-form__label">
-                                              <span class="pf-c-form__label-text"
+                                      <div class="pf-v5-c-form__group">
+                                          <label class="pf-v5-c-form__label">
+                                              <span class="pf-v5-c-form__label-text"
                                                   >${msg("SSO URL (Post)")}</span
                                               >
                                           </label>
                                           <input
-                                              class="pf-c-form-control"
+                                              class="pf-v5-c-form-control"
                                               readonly
                                               type="text"
                                               value="${ifDefined(this.provider.urlSsoPost)}"
                                           />
                                       </div>
-                                      <div class="pf-c-form__group">
-                                          <label class="pf-c-form__label">
-                                              <span class="pf-c-form__label-text"
+                                      <div class="pf-v5-c-form__group">
+                                          <label class="pf-v5-c-form__label">
+                                              <span class="pf-v5-c-form__label-text"
                                                   >${msg("SSO URL (Redirect)")}</span
                                               >
                                           </label>
                                           <input
-                                              class="pf-c-form-control"
+                                              class="pf-v5-c-form-control"
                                               readonly
                                               type="text"
                                               value="${ifDefined(this.provider.urlSsoRedirect)}"
                                           />
                                       </div>
-                                      <div class="pf-c-form__group">
-                                          <label class="pf-c-form__label">
-                                              <span class="pf-c-form__label-text"
+                                      <div class="pf-v5-c-form__group">
+                                          <label class="pf-v5-c-form__label">
+                                              <span class="pf-v5-c-form__label-text"
                                                   >${msg("SSO URL (IdP-initiated Login)")}</span
                                               >
                                           </label>
                                           <input
-                                              class="pf-c-form-control"
+                                              class="pf-v5-c-form-control"
                                               readonly
                                               type="text"
                                               value="${ifDefined(this.provider.urlSsoInit)}"
                                           />
                                       </div>
-                                      <div class="pf-c-form__group">
-                                          <label class="pf-c-form__label">
-                                              <span class="pf-c-form__label-text"
+                                      <div class="pf-v5-c-form__group">
+                                          <label class="pf-v5-c-form__label">
+                                              <span class="pf-v5-c-form__label-text"
                                                   >${msg("SLO URL (Post)")}</span
                                               >
                                           </label>
                                           <input
-                                              class="pf-c-form-control"
+                                              class="pf-v5-c-form-control"
                                               readonly
                                               type="text"
                                               value="${ifDefined(this.provider.urlSloPost)}"
                                           />
                                       </div>
-                                      <div class="pf-c-form__group">
-                                          <label class="pf-c-form__label">
-                                              <span class="pf-c-form__label-text"
+                                      <div class="pf-v5-c-form__group">
+                                          <label class="pf-v5-c-form__label">
+                                              <span class="pf-v5-c-form__label-text"
                                                   >${msg("SLO URL (Redirect)")}</span
                                               >
                                           </label>
                                           <input
-                                              class="pf-c-form-control"
+                                              class="pf-v5-c-form-control"
                                               readonly
                                               type="text"
                                               value="${ifDefined(this.provider.urlSloRedirect)}"
@@ -430,13 +430,13 @@ export class SAMLProviderViewPage extends AKElement {
                       }}
                   >
                       <div
-                          class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
+                          class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
                       >
-                          <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                              <div class="pf-c-card__title">${msg("SAML Metadata")}</div>
-                              <div class="pf-c-card__body">
+                          <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                              <div class="pf-v5-c-card__title">${msg("SAML Metadata")}</div>
+                              <div class="pf-v5-c-card__body">
                                   <a
-                                      class="pf-c-button pf-m-primary"
+                                      class="pf-v5-c-button pf-m-primary"
                                       target="_blank"
                                       href=${this.provider.urlDownloadMetadata}
                                   >
@@ -462,7 +462,7 @@ export class SAMLProviderViewPage extends AKElement {
                                       ${msg("Copy download URL")}
                                   </ak-action-button>
                               </div>
-                              <div class="pf-c-card__footer">
+                              <div class="pf-v5-c-card__footer">
                                   <ak-codemirror
                                       mode="xml"
                                       ?readOnly=${true}
@@ -481,36 +481,36 @@ export class SAMLProviderViewPage extends AKElement {
             return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
         }
         return html` <div
-            class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
+            class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
         >
-            <div class="pf-c-card">
-                <div class="pf-c-card__title">${msg("Example SAML attributes")}</div>
-                <div class="pf-c-card__body">
-                    <dl class="pf-c-description-list pf-m-2-col-on-lg">
-                        <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                                <span class="pf-c-description-list__text"
+            <div class="pf-v5-c-card">
+                <div class="pf-v5-c-card__title">${msg("Example SAML attributes")}</div>
+                <div class="pf-v5-c-card__body">
+                    <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
+                        <div class="pf-v5-c-description-list__group">
+                            <dt class="pf-v5-c-description-list__term">
+                                <span class="pf-v5-c-description-list__text"
                                     >${msg("NameID attribute")}</span
                                 >
                             </dt>
-                            <dd class="pf-c-description-list__description">
-                                <div class="pf-c-description-list__text">
+                            <dd class="pf-v5-c-description-list__description">
+                                <div class="pf-v5-c-description-list__text">
                                     ${this.preview?.nameID}
                                 </div>
                             </dd>
                         </div>
                     </dl>
                 </div>
-                <div class="pf-c-card__body">
-                    <dl class="pf-c-description-list pf-m-2-col-on-lg">
+                <div class="pf-v5-c-card__body">
+                    <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
                         ${this.preview?.attributes.map((attr) => {
-                            return html` <div class="pf-c-description-list__group">
-                                <dt class="pf-c-description-list__term">
-                                    <span class="pf-c-description-list__text">${attr.Name}</span>
+                            return html` <div class="pf-v5-c-description-list__group">
+                                <dt class="pf-v5-c-description-list__term">
+                                    <span class="pf-v5-c-description-list__text">${attr.Name}</span>
                                 </dt>
-                                <dd class="pf-c-description-list__description">
-                                    <div class="pf-c-description-list__text">
-                                        <ul class="pf-c-list">
+                                <dd class="pf-v5-c-description-list__description">
+                                    <div class="pf-v5-c-description-list__text">
+                                        <ul class="pf-v5-c-list">
                                             ${attr.Value.map((value) => {
                                                 return html` <li><pre>${value}</pre></li> `;
                                             })}
diff --git a/web/src/admin/providers/scim/SCIMProviderForm.ts b/web/src/admin/providers/scim/SCIMProviderForm.ts
index 20a736ca5..9312eefff 100644
--- a/web/src/admin/providers/scim/SCIMProviderForm.ts
+++ b/web/src/admin/providers/scim/SCIMProviderForm.ts
@@ -61,26 +61,26 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
             <ak-form-group .expanded=${true}>
                 <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+                <div slot="body" class="pf-v5-c-form">
                     <ak-form-element-horizontal label=${msg("URL")} ?required=${true} name="url">
                         <input
                             type="text"
                             value="${first(this.instance?.url, "")}"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             required
                         />
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg("SCIM base url, usually ends in /v2.")}
                         </p>
                     </ak-form-element-horizontal>
@@ -92,10 +92,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
                         <input
                             type="text"
                             value="${first(this.instance?.token, "")}"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             required
                         />
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg(
                                 "Token to authenticate with. Currently only bearer authentication is supported.",
                             )}
@@ -105,20 +105,20 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
             </ak-form-group>
             <ak-form-group ?expanded=${true}>
                 <span slot="header">${msg("User filtering")}</span>
-                <div slot="body" class="pf-c-form">
+                <div slot="body" class="pf-v5-c-form">
                     <ak-form-element-horizontal name="excludeUsersServiceAccount">
-                        <label class="pf-c-switch">
+                        <label class="pf-v5-c-switch">
                             <input
-                                class="pf-c-switch__input"
+                                class="pf-v5-c-switch__input"
                                 type="checkbox"
                                 ?checked=${first(this.instance?.excludeUsersServiceAccount, true)}
                             />
-                            <span class="pf-c-switch__toggle">
-                                <span class="pf-c-switch__toggle-icon">
+                            <span class="pf-v5-c-switch__toggle">
+                                <span class="pf-v5-c-switch__toggle-icon">
                                     <i class="fas fa-check" aria-hidden="true"></i>
                                 </span>
                             </span>
-                            <span class="pf-c-switch__label"
+                            <span class="pf-v5-c-switch__label"
                                 >${msg("Exclude service accounts")}</span
                             >
                         </label>
@@ -149,7 +149,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
                             ?blankable=${true}
                         >
                         </ak-search-select>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg("Only sync users within the selected group.")}
                         </p>
                     </ak-form-element-horizontal>
@@ -157,13 +157,13 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
             </ak-form-group>
             <ak-form-group ?expanded=${true}>
                 <span slot="header"> ${msg("Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+                <div slot="body" class="pf-v5-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         ?required=${true}
                         name="propertyMappings"
                     >
-                        <select class="pf-c-form-control" multiple>
+                        <select class="pf-v5-c-form-control" multiple>
                             ${this.propertyMappings?.results.map((mapping) => {
                                 let selected = false;
                                 if (!this.instance?.propertyMappings) {
@@ -185,10 +185,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
                                 </option>`;
                             })}
                         </select>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg("Property mappings used to user mapping.")}
                         </p>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg("Hold control/command to select multiple items.")}
                         </p>
                     </ak-form-element-horizontal>
@@ -197,7 +197,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
                         ?required=${true}
                         name="propertyMappingsGroup"
                     >
-                        <select class="pf-c-form-control" multiple>
+                        <select class="pf-v5-c-form-control" multiple>
                             ${this.propertyMappings?.results.map((mapping) => {
                                 let selected = false;
                                 if (!this.instance?.propertyMappingsGroup) {
@@ -218,10 +218,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
                                 </option>`;
                             })}
                         </select>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg("Property mappings used to group creation.")}
                         </p>
-                        <p class="pf-c-form__helper-text">
+                        <p class="pf-v5-c-form__helper-text">
                             ${msg("Hold control/command to select multiple items.")}
                         </p>
                     </ak-form-element-horizontal>
diff --git a/web/src/admin/providers/scim/SCIMProviderViewPage.ts b/web/src/admin/providers/scim/SCIMProviderViewPage.ts
index 8a4d7fe0b..922395422 100644
--- a/web/src/admin/providers/scim/SCIMProviderViewPage.ts
+++ b/web/src/admin/providers/scim/SCIMProviderViewPage.ts
@@ -101,10 +101,10 @@ export class SCIMProviderViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card">
+                    <div class="pf-v5-c-card__body">
                         <ak-object-changelog
                             targetModelPk=${this.provider?.pk || ""}
                             targetModelName=${this.provider?.metaModelName || ""}
@@ -120,66 +120,66 @@ export class SCIMProviderViewPage extends AKElement {
         if (!this.provider) {
             return html``;
         }
-        return html`<div slot="header" class="pf-c-banner pf-m-info">
+        return html`<div slot="header" class="pf-v5-c-banner pf-m-info">
                 ${msg("SCIM provider is in preview.")}
             </div>
             ${!this.provider?.assignedBackchannelApplicationName
-                ? html`<div slot="header" class="pf-c-banner pf-m-warning">
+                ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
                       ${msg(
                           "Warning: Provider is not assigned to an application as backchannel provider.",
                       )}
                   </div>`
                 : html``}
-            <div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
-                <div class="pf-l-grid__item pf-m-7-col pf-l-stack pf-m-gutter">
-                    <div class="pf-c-card pf-m-12-col pf-l-stack__item">
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+            <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
+                <div class="pf-v5-l-grid__item pf-m-7-col pf-v5-l-stack pf-m-gutter">
+                    <div class="pf-v5-c-card pf-m-12-col pf-v5-l-stack__item">
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Name")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.provider.name}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("URL")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.provider.url}
                                         </div>
                                     </dd>
                                 </div>
                             </dl>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-forms-modal>
                                 <span slot="submit"> ${msg("Update")} </span>
                                 <span slot="header"> ${msg("Update SCIM Provider")} </span>
                                 <ak-provider-scim-form slot="form" .instancePk=${this.provider.pk}>
                                 </ak-provider-scim-form>
-                                <button slot="trigger" class="pf-c-button pf-m-primary">
+                                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                     ${msg("Edit")}
                                 </button>
                             </ak-forms-modal>
                         </div>
                     </div>
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col pf-l-stack__item">
-                        <div class="pf-c-card__title">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-v5-l-stack__item">
+                        <div class="pf-v5-c-card__title">
                             <p>${msg("Sync status")}</p>
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             ${this.syncState
-                                ? html` <ul class="pf-c-list">
+                                ? html` <ul class="pf-v5-c-list">
                                       ${this.syncState.messages.map((m) => {
                                           return html`<li>${m}</li>`;
                                       })}
@@ -187,7 +187,7 @@ export class SCIMProviderViewPage extends AKElement {
                                 : html` ${msg("Sync not run yet.")} `}
                         </div>
 
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-action-button
                                 class="pf-m-secondary"
                                 .apiRequest=${() => {
@@ -211,8 +211,8 @@ export class SCIMProviderViewPage extends AKElement {
                         </div>
                     </div>
                 </div>
-                <div class="pf-c-card pf-l-grid__item pf-m-5-col">
-                    <div class="pf-c-card__body">
+                <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-5-col">
+                    <div class="pf-v5-c-card__body">
                         <ak-markdown .md=${MDSCIMProvider}></ak-markdown>
                     </div>
                 </div>
diff --git a/web/src/admin/sources/SourceWizard.ts b/web/src/admin/sources/SourceWizard.ts
index 9719b7d59..4b3f6e477 100644
--- a/web/src/admin/sources/SourceWizard.ts
+++ b/web/src/admin/sources/SourceWizard.ts
@@ -43,11 +43,11 @@ export class InitialSourceWizardPage extends WizardPage {
     };
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.sourceTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${`${type.component}-${type.modelName}`}
@@ -59,10 +59,10 @@ export class InitialSourceWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
+                    <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
                         >${type.name}</label
                     >
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
@@ -108,7 +108,7 @@ export class SourceWizard extends AKElement {
                         </ak-wizard-page-form>
                     `;
                 })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">${msg("Create")}</button>
             </ak-wizard>
         `;
     }
diff --git a/web/src/admin/sources/ldap/LDAPSourceViewPage.ts b/web/src/admin/sources/ldap/LDAPSourceViewPage.ts
index 2c74bc5f2..39e15cf0e 100644
--- a/web/src/admin/sources/ldap/LDAPSourceViewPage.ts
+++ b/web/src/admin/sources/ldap/LDAPSourceViewPage.ts
@@ -63,7 +63,7 @@ export class LDAPSourceViewPage extends AKElement {
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                 @activate=${() => {
                     new SourcesApi(DEFAULT_CONFIG)
                         .sourcesLdapSyncStatusList({
@@ -74,42 +74,42 @@ export class LDAPSourceViewPage extends AKElement {
                         });
                 }}
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list pf-m-2-col-on-lg">
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Name")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.name}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Server URI")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.serverUri}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Base DN")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             <ul>
                                                 <li>${this.source.baseDn}</li>
                                             </ul>
@@ -118,27 +118,27 @@ export class LDAPSourceViewPage extends AKElement {
                                 </div>
                             </dl>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-forms-modal>
                                 <span slot="submit"> ${msg("Update")} </span>
                                 <span slot="header"> ${msg("Update LDAP Source")} </span>
                                 <ak-source-ldap-form slot="form" .instancePk=${this.source.slug}>
                                 </ak-source-ldap-form>
-                                <button slot="trigger" class="pf-c-button pf-m-primary">
+                                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                     ${msg("Edit")}
                                 </button>
                             </ak-forms-modal>
                         </div>
                     </div>
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">
                             <p>${msg("Sync status")}</p>
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             ${this.syncState.length < 1
                                 ? html`<p>${msg("Not synced yet.")}</p>`
                                 : html`
-                                      <ul class="pf-c-list">
+                                      <ul class="pf-v5-c-list">
                                           ${this.syncState.map((task) => {
                                               let header = "";
                                               if (task.status === TaskStatusEnum.Warning) {
@@ -152,7 +152,7 @@ export class LDAPSourceViewPage extends AKElement {
                                               }
                                               return html`<li>
                                                   <p>${task.taskName}</p>
-                                                  <ul class="pf-c-list">
+                                                  <ul class="pf-v5-c-list">
                                                       <li>${header}</li>
                                                       ${task.messages.map((m) => {
                                                           return html`<li>${m}</li>`;
@@ -163,7 +163,7 @@ export class LDAPSourceViewPage extends AKElement {
                                       </ul>
                                   `}
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-action-button
                                 class="pf-m-secondary"
                                 .apiRequest=${() => {
@@ -191,11 +191,11 @@ export class LDAPSourceViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
                             <ak-object-changelog
                                 targetModelPk=${this.source.pk || ""}
                                 targetModelApp="authentik_sources_ldap"
diff --git a/web/src/admin/sources/oauth/OAuthSourceViewPage.ts b/web/src/admin/sources/oauth/OAuthSourceViewPage.ts
index 3bfa5cdaf..b2f149250 100644
--- a/web/src/admin/sources/oauth/OAuthSourceViewPage.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceViewPage.ts
@@ -95,82 +95,82 @@ export class OAuthSourceViewPage extends AKElement {
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">${msg("Details")}</div>
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list pf-m-2-col-on-lg">
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">${msg("Details")}</div>
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Name")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.name}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Provider Type")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${ProviderToLabel(this.source.providerType)}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Callback URL")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <code class="pf-c-description-list__text"
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <code class="pf-v5-c-description-list__text"
                                             >${this.source.callbackUrl}</code
                                         >
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Access Key")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.consumerKey}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Authorization URL")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.type?.authorizationUrl ||
                                             this.source.authorizationUrl}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Token URL")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.type?.accessTokenUrl ||
                                             this.source.accessTokenUrl}
                                         </div>
@@ -178,21 +178,21 @@ export class OAuthSourceViewPage extends AKElement {
                                 </div>
                             </dl>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-forms-modal>
                                 <span slot="submit"> ${msg("Update")} </span>
                                 <span slot="header"> ${msg("Update OAuth Source")} </span>
                                 <ak-source-oauth-form slot="form" .instancePk=${this.source.slug}>
                                 </ak-source-oauth-form>
-                                <button slot="trigger" class="pf-c-button pf-m-primary">
+                                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                     ${msg("Edit")}
                                 </button>
                             </ak-forms-modal>
                         </div>
                     </div>
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">${msg("Diagram")}</div>
-                        <div class="pf-c-card__body">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">${msg("Diagram")}</div>
+                        <div class="pf-v5-c-card__body">
                             <ak-source-oauth-diagram
                                 .source=${this.source}
                             ></ak-source-oauth-diagram>
@@ -203,11 +203,11 @@ export class OAuthSourceViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
                             <ak-object-changelog
                                 targetModelPk=${this.source.pk || ""}
                                 targetModelApp="authentik_sources_oauth"
@@ -221,17 +221,17 @@ export class OAuthSourceViewPage extends AKElement {
             <div
                 slot="page-policy-binding"
                 data-tab-title="${msg("Policy Bindings")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">
                             ${msg(
                                 `These bindings control which users can access this source.
             You can only use policies here as access is checked before the user is authenticated.`,
                             )}
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
                             </ak-bound-policies-list>
                         </div>
diff --git a/web/src/admin/sources/plex/PlexSourceViewPage.ts b/web/src/admin/sources/plex/PlexSourceViewPage.ts
index 51db79d27..b4d753de1 100644
--- a/web/src/admin/sources/plex/PlexSourceViewPage.ts
+++ b/web/src/admin/sources/plex/PlexSourceViewPage.ts
@@ -59,33 +59,33 @@ export class PlexSourceViewPage extends AKElement {
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list pf-m-2-col-on-lg">
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Name")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.name}
                                         </div>
                                     </dd>
                                 </div>
                             </dl>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-forms-modal>
                                 <span slot="submit"> ${msg("Update")} </span>
                                 <span slot="header"> ${msg("Update Plex Source")} </span>
                                 <ak-source-plex-form slot="form" .instancePk=${this.source.slug}>
                                 </ak-source-plex-form>
-                                <button slot="trigger" class="pf-c-button pf-m-primary">
+                                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                     ${msg("Edit")}
                                 </button>
                             </ak-forms-modal>
@@ -96,11 +96,11 @@ export class PlexSourceViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
                             <ak-object-changelog
                                 targetModelPk=${this.source.pk || ""}
                                 targetModelApp="authentik_sources_plex"
@@ -114,17 +114,17 @@ export class PlexSourceViewPage extends AKElement {
             <div
                 slot="page-policy-binding"
                 data-tab-title="${msg("Policy Bindings")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">
                             ${msg(
                                 `These bindings control which users can access this source.
             You can only use policies here as access is checked before the user is authenticated.`,
                             )}
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
                             </ak-bound-policies-list>
                         </div>
diff --git a/web/src/admin/sources/saml/SAMLSourceViewPage.ts b/web/src/admin/sources/saml/SAMLSourceViewPage.ts
index b85768242..c5510bdba 100644
--- a/web/src/admin/sources/saml/SAMLSourceViewPage.ts
+++ b/web/src/admin/sources/saml/SAMLSourceViewPage.ts
@@ -63,69 +63,69 @@ export class SAMLSourceViewPage extends AKElement {
             <section
                 slot="page-overview"
                 data-tab-title="${msg("Overview")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
-                            <dl class="pf-c-description-list pf-m-3-col-on-lg">
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
+                            <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Name")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.name}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("SSO URL")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.ssoUrl}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("SLO URL")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.sloUrl}
                                         </div>
                                     </dd>
                                 </div>
-                                <div class="pf-c-description-list__group">
-                                    <dt class="pf-c-description-list__term">
-                                        <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-description-list__group">
+                                    <dt class="pf-v5-c-description-list__term">
+                                        <span class="pf-v5-c-description-list__text"
                                             >${msg("Issuer")}</span
                                         >
                                     </dt>
-                                    <dd class="pf-c-description-list__description">
-                                        <div class="pf-c-description-list__text">
+                                    <dd class="pf-v5-c-description-list__description">
+                                        <div class="pf-v5-c-description-list__text">
                                             ${this.source.issuer}
                                         </div>
                                     </dd>
                                 </div>
                             </dl>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <ak-forms-modal>
                                 <span slot="submit"> ${msg("Update")} </span>
                                 <span slot="header"> ${msg("Update SAML Source")} </span>
                                 <ak-source-saml-form slot="form" .instancePk=${this.source.slug}>
                                 </ak-source-saml-form>
-                                <button slot="trigger" class="pf-c-button pf-m-primary">
+                                <button slot="trigger" class="pf-v5-c-button pf-m-primary">
                                     ${msg("Edit")}
                                 </button>
                             </ak-forms-modal>
@@ -136,11 +136,11 @@ export class SAMLSourceViewPage extends AKElement {
             <section
                 slot="page-changelog"
                 data-tab-title="${msg("Changelog")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
                             <ak-object-changelog
                                 targetModelPk=${this.source.pk || ""}
                                 targetModelApp="authentik_sources_saml"
@@ -154,7 +154,7 @@ export class SAMLSourceViewPage extends AKElement {
             <section
                 slot="page-metadata"
                 data-tab-title="${msg("Metadata")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                 @activate=${() => {
                     new SourcesApi(DEFAULT_CONFIG)
                         .sourcesSamlMetadataRetrieve({
@@ -165,18 +165,18 @@ export class SAMLSourceViewPage extends AKElement {
                         });
                 }}
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__body">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__body">
                             <ak-codemirror
                                 mode="xml"
                                 ?readOnly=${true}
                                 value="${ifDefined(this.metadata?.metadata)}"
                             ></ak-codemirror>
                         </div>
-                        <div class="pf-c-card__footer">
+                        <div class="pf-v5-c-card__footer">
                             <a
-                                class="pf-c-button pf-m-primary"
+                                class="pf-v5-c-button pf-m-primary"
                                 target="_blank"
                                 href=${ifDefined(this.metadata?.downloadUrl)}
                             >
@@ -189,17 +189,17 @@ export class SAMLSourceViewPage extends AKElement {
             <div
                 slot="page-policy-bindings"
                 data-tab-title="${msg("Policy Bindings")}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
+                class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
             >
-                <div class="pf-l-grid pf-m-gutter">
-                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                        <div class="pf-c-card__title">
+                <div class="pf-v5-l-grid pf-m-gutter">
+                    <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                        <div class="pf-v5-c-card__title">
                             ${msg(
                                 `These bindings control which users can access this source.
             You can only use policies here as access is checked before the user is authenticated.`,
                             )}
                         </div>
-                        <div class="pf-c-card__body">
+                        <div class="pf-v5-c-card__body">
                             <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
                             </ak-bound-policies-list>
                         </div>
diff --git a/web/src/admin/stages/StageWizard.ts b/web/src/admin/stages/StageWizard.ts
index 3ace712e4..dab4cade3 100644
--- a/web/src/admin/stages/StageWizard.ts
+++ b/web/src/admin/stages/StageWizard.ts
@@ -60,11 +60,11 @@ export class InitialStageWizardPage extends WizardPage {
     };
 
     render(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             ${this.stageTypes.map((type) => {
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="type"
                         id=${`${type.component}-${type.modelName}`}
@@ -83,10 +83,10 @@ export class InitialStageWizardPage extends WizardPage {
                             this.host.isValid = true;
                         }}
                     />
-                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
+                    <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
                         >${type.name}</label
                     >
-                    <span class="pf-c-radio__description">${type.description}</span>
+                    <span class="pf-v5-c-radio__description">${type.description}</span>
                 </div>`;
             })}
         </form>`;
@@ -155,7 +155,7 @@ export class StageWizard extends AKElement {
                           ></ak-stage-binding-form>
                       </ak-wizard-page-form>`
                     : html``}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
+                <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
             </ak-wizard>
         `;
     }
diff --git a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
index 3fe57ba44..f0f305d94 100644
--- a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
+++ b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
@@ -42,7 +42,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
     }
 
     renderForm(): TemplateResult {
-        return html` <form class="pf-c-form pf-m-horizontal">
+        return html` <form class="pf-v5-c-form pf-m-horizontal">
             ${this.instance?.adminIntegrationKey !== "" ? this.renderFormAutomatic() : html``}
             ${this.renderFormManual()}
         </form>`;
@@ -77,7 +77,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
                 >
                 </ak-search-select>
 
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("The user in authentik this device will be assigned to.")}
                 </p>
             </ak-form-element-horizontal>
@@ -86,8 +86,8 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
                 ?required=${true}
                 name="duoUserId"
             >
-                <input type="text" class="pf-c-form-control" required />
-                <p class="pf-c-form__helper-text">
+                <input type="text" class="pf-v5-c-form-control" required />
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("The user ID in Duo, can be found in the URL after clicking on a user.")}
                 </p>
             </ak-form-element-horizontal>`;
diff --git a/web/src/admin/stages/invitation/InvitationListLink.ts b/web/src/admin/stages/invitation/InvitationListLink.ts
index 6f96db4f5..314fc94d7 100644
--- a/web/src/admin/stages/invitation/InvitationListLink.ts
+++ b/web/src/admin/stages/invitation/InvitationListLink.ts
@@ -34,14 +34,14 @@ export class InvitationListLink extends AKElement {
     }
 
     renderFlowSelector(): TemplateResult {
-        return html`<div class="pf-c-description-list__group">
-            <dt class="pf-c-description-list__term">
-                <span class="pf-c-description-list__text">${msg("Select an enrollment flow")}</span>
+        return html`<div class="pf-v5-c-description-list__group">
+            <dt class="pf-v5-c-description-list__term">
+                <span class="pf-v5-c-description-list__text">${msg("Select an enrollment flow")}</span>
             </dt>
-            <dd class="pf-c-description-list__description">
-                <div class="pf-c-description-list__text">
+            <dd class="pf-v5-c-description-list__description">
+                <div class="pf-v5-c-description-list__text">
                     <select
-                        class="pf-c-form-control"
+                        class="pf-v5-c-form-control"
                         @change=${(ev: Event) => {
                             const current = (ev.target as HTMLInputElement).value;
                             this.selectedFlow = current;
@@ -86,18 +86,18 @@ export class InvitationListLink extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<dl class="pf-c-description-list pf-m-horizontal">
+        return html`<dl class="pf-v5-c-description-list pf-m-horizontal">
             ${this.invitation?.flow === undefined ? this.renderFlowSelector() : html``}
-            <div class="pf-c-description-list__group">
-                <dt class="pf-c-description-list__term">
-                    <span class="pf-c-description-list__text"
+            <div class="pf-v5-c-description-list__group">
+                <dt class="pf-v5-c-description-list__term">
+                    <span class="pf-v5-c-description-list__text"
                         >${msg("Link to use the invitation.")}</span
                     >
                 </dt>
-                <dd class="pf-c-description-list__description">
-                    <div class="pf-c-description-list__text">
+                <dd class="pf-v5-c-description-list__description">
+                    <div class="pf-v5-c-description-list__text">
                         <input
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             readonly
                             type="text"
                             value=${this.renderLink()}
diff --git a/web/src/admin/stages/prompt/PromptForm.ts b/web/src/admin/stages/prompt/PromptForm.ts
index 21c982fe4..1850834b5 100644
--- a/web/src/admin/stages/prompt/PromptForm.ts
+++ b/web/src/admin/stages/prompt/PromptForm.ts
@@ -239,18 +239,18 @@ export class PromptForm extends ModelForm<Prompt, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<div class="pf-l-grid pf-m-gutter">
-            <div class="pf-l-grid__item pf-m-6-col">${this.renderEditForm()}</div>
-            <div class="pf-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
+        return html`<div class="pf-v5-l-grid pf-m-gutter">
+            <div class="pf-v5-l-grid__item pf-m-6-col">${this.renderEditForm()}</div>
+            <div class="pf-v5-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
         </div> `;
     }
 
     renderPreview(): TemplateResult {
         return html`
-            <h3 class="pf-c-title pf-m-lg">${msg("Preview")}</h3>
-            <div class="pf-l-grid pf-m-gutter">
-                <div class="pf-c-card pf-m-selectable pf-m-selected pf-l-grid__item pf-m-12-col">
-                    <div class="pf-c-card__body">
+            <h3 class="pf-v5-c-title pf-m-lg">${msg("Preview")}</h3>
+            <div class="pf-v5-l-grid pf-m-gutter">
+                <div class="pf-v5-c-card pf-m-selectable pf-m-selected pf-v5-l-grid__item pf-m-12-col">
+                    <div class="pf-v5-c-card__body">
                         <ak-stage-prompt
                             .host=${new PreviewStageHost(this)}
                             .challenge=${this.preview}
@@ -260,9 +260,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
                 </div>
                 ${this.previewError
                     ? html`
-                          <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                              <div class="pf-c-card__body">${msg("Preview errors")}</div>
-                              <div class="pf-c-card__body">
+                          <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                              <div class="pf-v5-c-card__body">${msg("Preview errors")}</div>
+                              <div class="pf-v5-c-card__body">
                                   ${this.previewError.map((err) => html`<pre>${err}</pre>`)}
                               </div>
                           </div>
@@ -270,9 +270,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
                     : html``}
                 ${this.previewResult
                     ? html`
-                          <div class="pf-c-card pf-l-grid__item pf-m-12-col">
-                              <div class="pf-c-card__body">${msg("Data preview")}</div>
-                              <div class="pf-c-card__body">
+                          <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
+                              <div class="pf-v5-c-card__body">${msg("Data preview")}</div>
+                              <div class="pf-v5-c-card__body">
                                   <pre>${JSON.stringify(this.previewResult, undefined, 4)}</pre>
                               </div>
                           </div>
@@ -283,18 +283,18 @@ export class PromptForm extends ModelForm<Prompt, string> {
     }
 
     renderEditForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                     @input=${() => {
                         this._shouldRefresh = true;
                     }}
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Unique name of this field, used for selecting fields in prompt stages.")}
                 </p>
             </ak-form-element-horizontal>
@@ -302,16 +302,16 @@ export class PromptForm extends ModelForm<Prompt, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.fieldKey)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                     @input=${() => {
                         this._shouldRefresh = true;
                     }}
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Name of the form field, also used to store the value.")}
                 </p>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "When used in conjunction with a User Write stage, use attributes.foo to write attributes.",
                     )}
@@ -321,19 +321,19 @@ export class PromptForm extends ModelForm<Prompt, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.label)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                     @input=${() => {
                         this._shouldRefresh = true;
                     }}
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Label shown next to/above the prompt.")}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
                 <select
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     @change=${() => {
                         this._shouldRefresh = true;
                     }}
@@ -342,43 +342,43 @@ export class PromptForm extends ModelForm<Prompt, string> {
                 </select>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="required">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.required, false)}
                         @change=${() => {
                             this._shouldRefresh = true;
                         }}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Required")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Required")}</span>
                 </label>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="placeholderExpression">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.placeholderExpression, false)}
                         @change=${() => {
                             this._shouldRefresh = true;
                         }}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label"
+                    <span class="pf-v5-c-switch__label"
                         >${msg("Interpret placeholder as expression")}</span
                     >
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         `When checked, the placeholder will be evaluated in the same way a property mapping is.
             If the evaluation fails, the placeholder itself is returned.`,
@@ -394,7 +394,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
                     }}
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         `Optionally provide a short hint that describes the expected input value.
             When creating a fixed choice field, enable interpreting as expression and return a
@@ -403,22 +403,22 @@ export class PromptForm extends ModelForm<Prompt, string> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="initialValueExpression">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.initialValueExpression, false)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label"
+                    <span class="pf-v5-c-switch__label"
                         >${msg("Interpret initial value as expression")}</span
                     >
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         `When checked, the initial value will be evaluated in the same way a property mapping is.
             If the evaluation fails, the initial value itself is returned.`,
@@ -428,7 +428,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
             <ak-form-element-horizontal label=${msg("Initial value")} name="initialValue">
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.initialValue)}">
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         `Optionally pre-fill the input with an initial value.
             When creating a fixed choice field, enable interpreting as expression and
@@ -445,13 +445,13 @@ export class PromptForm extends ModelForm<Prompt, string> {
                     }}
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">${msg("Any HTML can be used.")}</p>
+                <p class="pf-v5-c-form__helper-text">${msg("Any HTML can be used.")}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
                 <input
                     type="number"
                     value="${first(this.instance?.order, 0)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
diff --git a/web/src/admin/system-tasks/SystemTaskListPage.ts b/web/src/admin/system-tasks/SystemTaskListPage.ts
index f180f63cc..570a18ea1 100644
--- a/web/src/admin/system-tasks/SystemTaskListPage.ts
+++ b/web/src/admin/system-tasks/SystemTaskListPage.ts
@@ -82,24 +82,24 @@ export class SystemTaskListPage extends TablePage<Task> {
 
     renderExpanded(item: Task): TemplateResult {
         return html` <td role="cell" colspan="3">
-                <div class="pf-c-table__expandable-row-content">
-                    <dl class="pf-c-description-list pf-m-horizontal">
-                        <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                                <span class="pf-c-description-list__text">${msg("Duration")}</span>
+                <div class="pf-v5-c-table__expandable-row-content">
+                    <dl class="pf-v5-c-description-list pf-m-horizontal">
+                        <div class="pf-v5-c-description-list__group">
+                            <dt class="pf-v5-c-description-list__term">
+                                <span class="pf-v5-c-description-list__text">${msg("Duration")}</span>
                             </dt>
-                            <dd class="pf-c-description-list__description">
-                                <div class="pf-c-description-list__text">
+                            <dd class="pf-v5-c-description-list__description">
+                                <div class="pf-v5-c-description-list__text">
                                     ${msg(str`${item.taskDuration.toFixed(2)} seconds`)}
                                 </div>
                             </dd>
                         </div>
-                        <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                                <span class="pf-c-description-list__text">${msg("Messages")}</span>
+                        <div class="pf-v5-c-description-list__group">
+                            <dt class="pf-v5-c-description-list__term">
+                                <span class="pf-v5-c-description-list__text">${msg("Messages")}</span>
                             </dt>
-                            <dd class="pf-c-description-list__description">
-                                <div class="pf-c-description-list__text">
+                            <dd class="pf-v5-c-description-list__description">
+                                <div class="pf-v5-c-description-list__text">
                                     ${item.messages.map((m) => {
                                         return html`<li>${m}</li>`;
                                     })}
diff --git a/web/src/admin/users/GroupSelectModal.ts b/web/src/admin/users/GroupSelectModal.ts
index 350095c9b..43bc08c29 100644
--- a/web/src/admin/users/GroupSelectModal.ts
+++ b/web/src/admin/users/GroupSelectModal.ts
@@ -67,22 +67,22 @@ export class GroupSelectModal extends TableModal<Group> {
 
     renderModalInner(): TemplateResult {
         const willSuperuser = this.selectedElements.filter((g) => g.isSuperuser).length > 0;
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">${msg("Select groups to add user to")}</h1>
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">${msg("Select groups to add user to")}</h1>
                 </div>
             </section>
             ${willSuperuser
                 ? html`
-                      <div class="pf-c-banner pf-m-warning">
+                      <div class="pf-v5-c-banner pf-m-warning">
                           ${msg(
                               "Warning: Adding the user to the selected group(s) will give them superuser permissions.",
                           )}
                       </div>
                   `
                 : html``}
-            <section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
-            <footer class="pf-c-modal-box__footer">
+            <section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
                         return this.confirm(this.selectedElements).then(() => {
diff --git a/web/src/admin/users/ServiceAccountForm.ts b/web/src/admin/users/ServiceAccountForm.ts
index b5a0dc9b7..8bdcfb344 100644
--- a/web/src/admin/users/ServiceAccountForm.ts
+++ b/web/src/admin/users/ServiceAccountForm.ts
@@ -40,38 +40,38 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
                 ?required=${true}
                 name="name"
             >
-                <input type="text" value="" class="pf-c-form-control" required />
-                <p class="pf-c-form__helper-text">
+                <input type="text" value="" class="pf-v5-c-form-control" required />
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("User's primary identifier. 150 characters or fewer.")}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="createGroup">
-                <label class="pf-c-switch">
-                    <input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                <label class="pf-v5-c-switch">
+                    <input class="pf-v5-c-switch__input" type="checkbox" ?checked=${true} />
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Create group")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Create group")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Enabling this toggle will create a group named after the user, with the user as member.",
                     )}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="expiring">
-                <label class="pf-c-switch">
-                    <input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                <label class="pf-v5-c-switch">
+                    <input class="pf-v5-c-switch__input" type="checkbox" ?checked=${true} />
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Expiring")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Expiring")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "If this is selected, the token will expire. Upon expiration, the token will be rotated.",
                     )}
@@ -82,7 +82,7 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
                     type="datetime-local"
                     data-type="datetime-local"
                     value="${dateTimeLocal(new Date(Date.now() + 1000 * 60 ** 2 * 24 * 360))}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
             </ak-form-element-horizontal>`;
     }
@@ -93,13 +93,13 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
                     "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page.",
                 )}
             </p>
-            <form class="pf-c-form pf-m-horizontal">
+            <form class="pf-v5-c-form pf-m-horizontal">
                 <ak-form-element-horizontal label=${msg("Username")}>
                     <input
                         type="text"
                         readonly
                         value=${ifDefined(this.result?.username)}
-                        class="pf-c-form-control"
+                        class="pf-v5-c-form-control"
                     />
                 </ak-form-element-horizontal>
                 <ak-form-element-horizontal label=${msg("Password")}>
@@ -107,9 +107,9 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
                         type="text"
                         readonly
                         value=${ifDefined(this.result?.token)}
-                        class="pf-c-form-control"
+                        class="pf-v5-c-form-control"
                     />
-                    <p class="pf-c-form__helper-text">
+                    <p class="pf-v5-c-form__helper-text">
                         ${msg(
                             "Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.",
                         )}
diff --git a/web/src/admin/users/UserActiveForm.ts b/web/src/admin/users/UserActiveForm.ts
index 659d5897e..750b2935a 100644
--- a/web/src/admin/users/UserActiveForm.ts
+++ b/web/src/admin/users/UserActiveForm.ts
@@ -24,13 +24,13 @@ export class UserActiveForm extends DeleteForm {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">${msg(str`Update ${this.objectLabel}`)}</h1>
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">${msg(str`Update ${this.objectLabel}`)}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">
-                <form class="pf-c-form pf-m-horizontal">
+            <section class="pf-v5-c-modal-box__body pf-m-light">
+                <form class="pf-v5-c-form pf-m-horizontal">
                     <p>
                         ${msg(
                             str`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`,
@@ -38,7 +38,7 @@ export class UserActiveForm extends DeleteForm {
                     </p>
                 </form>
             </section>
-            <footer class="pf-c-modal-box__footer">
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
                         return this.confirm();
diff --git a/web/src/admin/users/UserForm.ts b/web/src/admin/users/UserForm.ts
index b2cdef833..5778a123e 100644
--- a/web/src/admin/users/UserForm.ts
+++ b/web/src/admin/users/UserForm.ts
@@ -23,10 +23,10 @@ export class UserForm extends ModelForm<User, number> {
 
     static get styles(): CSSResult[] {
         return super.styles.concat(css`
-            .pf-c-button.pf-m-control {
+            .pf-v5-c-button.pf-m-control {
                 height: 100%;
             }
-            .pf-c-form-control {
+            .pf-v5-c-form-control {
                 height: auto !important;
             }
         `);
@@ -64,15 +64,15 @@ export class UserForm extends ModelForm<User, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Username")} ?required=${true} name="username">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.username)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("User's primary identifier. 150 characters or fewer.")}
                 </p>
             </ak-form-element-horizontal>
@@ -80,9 +80,9 @@ export class UserForm extends ModelForm<User, number> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
-                <p class="pf-c-form__helper-text">${msg("User's display name.")}</p>
+                <p class="pf-v5-c-form__helper-text">${msg("User's display name.")}</p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("User type")} ?required=${true} name="type">
                 <ak-radio
@@ -119,24 +119,24 @@ export class UserForm extends ModelForm<User, number> {
                     type="email"
                     autocomplete="off"
                     value="${ifDefined(this.instance?.email)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
             </ak-form-element-horizontal>
             <ak-form-element-horizontal name="isActive">
-                <label class="pf-c-switch">
+                <label class="pf-v5-c-switch">
                     <input
-                        class="pf-c-switch__input"
+                        class="pf-v5-c-switch__input"
                         type="checkbox"
                         ?checked=${first(this.instance?.isActive, true)}
                     />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
+                    <span class="pf-v5-c-switch__toggle">
+                        <span class="pf-v5-c-switch__toggle-icon">
                             <i class="fas fa-check" aria-hidden="true"></i>
                         </span>
                     </span>
-                    <span class="pf-c-switch__label">${msg("Is active")}</span>
+                    <span class="pf-v5-c-switch__label">${msg("Is active")}</span>
                 </label>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg(
                         "Designates whether this user should be treated as active. Unselect this instead of deleting accounts.",
                     )}
@@ -146,7 +146,7 @@ export class UserForm extends ModelForm<User, number> {
                 <input
                     type="text"
                     value="${first(this.instance?.path, "users")}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -162,7 +162,7 @@ export class UserForm extends ModelForm<User, number> {
                     )}"
                 >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">
+                <p class="pf-v5-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
             </ak-form-element-horizontal>
diff --git a/web/src/admin/users/UserPasswordForm.ts b/web/src/admin/users/UserPasswordForm.ts
index e96d2486f..99f5f5557 100644
--- a/web/src/admin/users/UserPasswordForm.ts
+++ b/web/src/admin/users/UserPasswordForm.ts
@@ -31,7 +31,7 @@ export class UserPasswordForm extends Form<UserPasswordSetRequest> {
             ?required=${true}
             name="password"
         >
-            <input type="password" value="" class="pf-c-form-control" required />
+            <input type="password" value="" class="pf-v5-c-form-control" required />
         </ak-form-element-horizontal>`;
     }
 }
diff --git a/web/src/components/events/ObjectChangelog.ts b/web/src/components/events/ObjectChangelog.ts
index 160a98d73..bb03ed7a4 100644
--- a/web/src/components/events/ObjectChangelog.ts
+++ b/web/src/components/events/ObjectChangelog.ts
@@ -87,7 +87,7 @@ export class ObjectChangelog extends Table<Event> {
 
     renderExpanded(item: Event): TemplateResult {
         return html` <td role="cell" colspan="4">
-                <div class="pf-c-table__expandable-row-content">
+                <div class="pf-v5-c-table__expandable-row-content">
                     <ak-event-info .event=${item as EventWithContext}></ak-event-info>
                 </div>
             </td>
diff --git a/web/src/components/events/UserEvents.ts b/web/src/components/events/UserEvents.ts
index 8b8065792..18fccf7bf 100644
--- a/web/src/components/events/UserEvents.ts
+++ b/web/src/components/events/UserEvents.ts
@@ -59,7 +59,7 @@ export class UserEvents extends Table<Event> {
 
     renderExpanded(item: Event): TemplateResult {
         return html` <td role="cell" colspan="4">
-                <div class="pf-c-table__expandable-row-content">
+                <div class="pf-v5-c-table__expandable-row-content">
                     <ak-event-info .event=${item as EventWithContext}></ak-event-info>
                 </div>
             </td>
diff --git a/web/src/elements/Alert.ts b/web/src/elements/Alert.ts
index e75d2c393..5f1e965e8 100644
--- a/web/src/elements/Alert.ts
+++ b/web/src/elements/Alert.ts
@@ -26,11 +26,11 @@ export class Alert extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-alert ${this.inline ? "pf-m-inline" : ""} ${this.level}">
-            <div class="pf-c-alert__icon">
+        return html`<div class="pf-v5-c-alert ${this.inline ? "pf-m-inline" : ""} ${this.level}">
+            <div class="pf-v5-c-alert__icon">
                 <i class="fas fa-exclamation-circle"></i>
             </div>
-            <h4 class="pf-c-alert__title">
+            <h4 class="pf-v5-c-alert__title">
                 <slot></slot>
             </h4>
         </div>`;
diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts
index d4f0657fa..3c5abfdce 100644
--- a/web/src/elements/CodeMirror.ts
+++ b/web/src/elements/CodeMirror.ts
@@ -98,7 +98,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
         this.themeLight = EditorView.theme(
             {
                 "&": {
-                    backgroundColor: "var(--pf-global--BackgroundColor--light-300)",
+                    backgroundColor: "var(--pf-v5-global--BackgroundColor--light-300)",
                 },
             },
             { dark: false },
diff --git a/web/src/elements/Divider.ts b/web/src/elements/Divider.ts
index 3f90bb1c7..931cddc80 100644
--- a/web/src/elements/Divider.ts
+++ b/web/src/elements/Divider.ts
@@ -21,7 +21,7 @@ export class Divider extends AKElement {
                 .separator::after {
                     content: "";
                     flex: 1;
-                    border-bottom: 1px solid var(--pf-global--Color--100);
+                    border-bottom: 1px solid var(--pf-v5-global--Color--100);
                 }
 
                 .separator:not(:empty)::before {
diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts
index f419d4e2f..5a73f05ea 100644
--- a/web/src/elements/EmptyState.ts
+++ b/web/src/elements/EmptyState.ts
@@ -27,22 +27,22 @@ export class EmptyState extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
-            <div class="pf-c-empty-state__content">
+        return html`<div class="pf-v5-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
+            <div class="pf-v5-c-empty-state__content">
                 ${this.loading
-                    ? html`<div class="pf-c-empty-state__icon">
+                    ? html`<div class="pf-v5-c-empty-state__icon">
                           <ak-spinner size=${PFSize.XLarge}></ak-spinner>
                       </div>`
                     : html`<i
                           class="pf-icon fa ${this.icon ||
-                          "fa-question-circle"} pf-c-empty-state__icon"
+                          "fa-question-circle"} pf-v5-c-empty-state__icon"
                           aria-hidden="true"
                       ></i>`}
-                <h1 class="pf-c-title pf-m-lg">${this.header}</h1>
-                <div class="pf-c-empty-state__body">
+                <h1 class="pf-v5-c-title pf-m-lg">${this.header}</h1>
+                <div class="pf-v5-c-empty-state__body">
                     <slot name="body"></slot>
                 </div>
-                <div class="pf-c-empty-state__primary">
+                <div class="pf-v5-c-empty-state__primary">
                     <slot name="primary"></slot>
                 </div>
             </div>
diff --git a/web/src/elements/Expand.ts b/web/src/elements/Expand.ts
index 1cc162999..cd1c71d63 100644
--- a/web/src/elements/Expand.ts
+++ b/web/src/elements/Expand.ts
@@ -32,26 +32,26 @@ export class Expand extends AKElement {
 
     render(): TemplateResult {
         return html`<div
-            class="pf-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded
+            class="pf-v5-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded
                 ? "pf-m-expanded"
                 : ""}"
         >
             <button
                 type="button"
-                class="pf-c-expandable-section__toggle"
+                class="pf-v5-c-expandable-section__toggle"
                 aria-expanded="${this.expanded}"
                 @click=${() => {
                     this.expanded = !this.expanded;
                 }}
             >
-                <span class="pf-c-expandable-section__toggle-icon">
+                <span class="pf-v5-c-expandable-section__toggle-icon">
                     <i class="fas fa-angle-right" aria-hidden="true"></i>
                 </span>
-                <span class="pf-c-expandable-section__toggle-text"
+                <span class="pf-v5-c-expandable-section__toggle-text"
                     >${this.expanded ? this.textOpen : this.textClosed}</span
                 >
             </button>
-            <div class="pf-c-expandable-section__content" ?hidden=${!this.expanded}>
+            <div class="pf-v5-c-expandable-section__content" ?hidden=${!this.expanded}>
                 <slot></slot>
             </div>
         </div>`;
diff --git a/web/src/elements/Label.ts b/web/src/elements/Label.ts
index 51438c740..0561ff24c 100644
--- a/web/src/elements/Label.ts
+++ b/web/src/elements/Label.ts
@@ -44,9 +44,9 @@ export class Label extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<span class="pf-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
-            <span class="pf-c-label__content">
-                <span class="pf-c-label__icon">
+        return html`<span class="pf-v5-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
+            <span class="pf-v5-c-label__content">
+                <span class="pf-v5-c-label__icon">
                     <i
                         class="fas fa-fw ${this.icon || this.getDefaultIcon()}"
                         aria-hidden="true"
diff --git a/web/src/elements/LoadingOverlay.ts b/web/src/elements/LoadingOverlay.ts
index 25ed89667..8a966a266 100644
--- a/web/src/elements/LoadingOverlay.ts
+++ b/web/src/elements/LoadingOverlay.ts
@@ -22,7 +22,7 @@ export class LoadingOverlay extends AKElement {
                     justify-content: center;
                     align-items: center;
                     position: absolute;
-                    background-color: var(--pf-global--BackgroundColor--dark-transparent-200);
+                    background-color: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
                     z-index: 1;
                 }
                 :host([topMost]) {
diff --git a/web/src/elements/Markdown.ts b/web/src/elements/Markdown.ts
index 4ee60b9c4..f8971416f 100644
--- a/web/src/elements/Markdown.ts
+++ b/web/src/elements/Markdown.ts
@@ -58,7 +58,7 @@ export class Markdown extends AKElement {
     }
 
     replaceList(input: string): string {
-        return input.replace("<ul>", "<ul class='pf-c-list'>");
+        return input.replace("<ul>", "<ul class='pf-v5-c-list'>");
     }
 
     replaceRelativeLinks(input: string, md: MarkdownDocument): string {
diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts
index 1f7539085..33c8dbf45 100644
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@@ -69,14 +69,14 @@ export class PageHeader extends AKElement {
                     flex-direction: row;
                     min-height: 114px;
                 }
-                .pf-c-button.pf-m-plain {
+                .pf-v5-c-button.pf-m-plain {
                     background-color: transparent;
                     border-radius: 0px;
                 }
-                .pf-c-page__main-section.pf-m-light {
+                .pf-v5-c-page__main-section.pf-m-light {
                     background-color: transparent;
                 }
-                .pf-c-page__main-section {
+                .pf-v5-c-page__main-section {
                     flex-grow: 1;
                     display: flex;
                     flex-direction: column;
@@ -90,7 +90,7 @@ export class PageHeader extends AKElement {
                     font-size: 24px;
                 }
                 .notification-trigger.has-notifications {
-                    color: var(--pf-global--active-color--100);
+                    color: var(--pf-v5-global--active-color--100);
                 }
                 h1 {
                     display: flex;
@@ -138,7 +138,7 @@ export class PageHeader extends AKElement {
         return html` <ak-enterprise-status interface="admin"></ak-enterprise-status>
             <div class="bar">
                 <button
-                    class="sidebar-trigger pf-c-button pf-m-plain"
+                    class="sidebar-trigger pf-v5-c-button pf-m-plain"
                     @click=${() => {
                         this.dispatchEvent(
                             new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
@@ -150,8 +150,8 @@ export class PageHeader extends AKElement {
                 >
                     <i class="fas fa-bars"></i>
                 </button>
-                <section class="pf-c-page__main-section pf-m-light">
-                    <div class="pf-c-content">
+                <section class="pf-v5-c-page__main-section pf-m-light">
+                    <div class="pf-v5-c-content">
                         <h1>
                             <slot name="icon">${this.renderIcon()}</slot>&nbsp;
                             <slot name="header">${this.header}</slot>
@@ -160,7 +160,7 @@ export class PageHeader extends AKElement {
                     </div>
                 </section>
                 <button
-                    class="notification-trigger pf-c-button pf-m-plain"
+                    class="notification-trigger pf-v5-c-button pf-m-plain"
                     @click=${() => {
                         this.dispatchEvent(
                             new CustomEvent(EVENT_API_DRAWER_TOGGLE, {
@@ -175,7 +175,7 @@ export class PageHeader extends AKElement {
                     </pf-tooltip>
                 </button>
                 <button
-                    class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications
+                    class="notification-trigger pf-v5-c-button pf-m-plain ${this.hasNotifications
                         ? "has-notifications"
                         : ""}"
                     @click=${() => {
diff --git a/web/src/elements/Spinner.ts b/web/src/elements/Spinner.ts
index 7483aff27..9c03bfda3 100644
--- a/web/src/elements/Spinner.ts
+++ b/web/src/elements/Spinner.ts
@@ -24,13 +24,13 @@ export class Spinner extends AKElement {
 
     render(): TemplateResult {
         return html`<span
-            class="pf-c-spinner ${this.size.toString()}"
+            class="pf-v5-c-spinner ${this.size.toString()}"
             role="progressbar"
             aria-valuetext="${msg("Loading...")}"
         >
-            <span class="pf-c-spinner__clipper"></span>
-            <span class="pf-c-spinner__lead-ball"></span>
-            <span class="pf-c-spinner__tail-ball"></span>
+            <span class="pf-v5-c-spinner__clipper"></span>
+            <span class="pf-v5-c-spinner__lead-ball"></span>
+            <span class="pf-v5-c-spinner__tail-ball"></span>
         </span>`;
     }
 }
diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index 74440897f..2e7e0e2ae 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -32,10 +32,10 @@ export class Tabs extends AKElement {
                 :host([vertical]) {
                     display: flex;
                 }
-                :host([vertical]) .pf-c-tabs {
+                :host([vertical]) .pf-v5-c-tabs {
                     width: auto !important;
                 }
-                :host([vertical]) .pf-c-tabs__list {
+                :host([vertical]) .pf-v5-c-tabs__list {
                     height: 100%;
                 }
                 :host([vertical]) .pf-c-tabs .pf-c-tabs__list::before {
@@ -81,9 +81,9 @@ export class Tabs extends AKElement {
 
     renderTab(page: Element): TemplateResult {
         const slot = page.attributes.getNamedItem("slot")?.value;
-        return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
-            <button class="pf-c-tabs__link" @click=${() => this.onClick(slot)}>
-                <span class="pf-c-tabs__item-text"> ${page.getAttribute("data-tab-title")} </span>
+        return html` <li class="pf-v5-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
+            <button class="pf-v5-c-tabs__link" @click=${() => this.onClick(slot)}>
+                <span class="pf-v5-c-tabs__item-text"> ${page.getAttribute("data-tab-title")} </span>
             </button>
         </li>`;
     }
@@ -106,8 +106,8 @@ export class Tabs extends AKElement {
             const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
             this.onClick(wantedPage);
         }
-        return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
-                <ul class="pf-c-tabs__list">
+        return html`<div class="pf-v5-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
+                <ul class="pf-v5-c-tabs__list">
                     ${pages.map((page) => this.renderTab(page))}
                 </ul>
             </div>
diff --git a/web/src/elements/TreeView.ts b/web/src/elements/TreeView.ts
index 115a1045a..829b4fcc4 100644
--- a/web/src/elements/TreeView.ts
+++ b/web/src/elements/TreeView.ts
@@ -71,13 +71,13 @@ export class TreeViewNode extends AKElement {
         const shouldRenderChildren = (this.item?.childItems || []).length > 0 && this.open;
         return html`
             <li
-                class="pf-c-tree-view__list-item ${this.open ? "pf-m-expanded" : ""}"
+                class="pf-v5-c-tree-view__list-item ${this.open ? "pf-m-expanded" : ""}"
                 role="treeitem"
                 tabindex="0"
             >
-                <div class="pf-c-tree-view__content">
+                <div class="pf-v5-c-tree-view__content">
                     <button
-                        class="pf-c-tree-view__node ${this.host?.activeNode === this
+                        class="pf-v5-c-tree-view__node ${this.host?.activeNode === this
                             ? "pf-m-current"
                             : ""}"
                         @click=${() => {
@@ -93,10 +93,10 @@ export class TreeViewNode extends AKElement {
                             );
                         }}
                     >
-                        <div class="pf-c-tree-view__node-container">
+                        <div class="pf-v5-c-tree-view__node-container">
                             ${this.openable
                                 ? html` <button
-                                      class="pf-c-tree-view__node-toggle"
+                                      class="pf-v5-c-tree-view__node-toggle"
                                       @click=${(e: Event) => {
                                           if (this.openable) {
                                               this.open = !this.open;
@@ -104,22 +104,22 @@ export class TreeViewNode extends AKElement {
                                           }
                                       }}
                                   >
-                                      <span class="pf-c-tree-view__node-toggle-icon">
+                                      <span class="pf-v5-c-tree-view__node-toggle-icon">
                                           <i class="fas fa-angle-right" aria-hidden="true"></i>
                                       </span>
                                   </button>`
                                 : html``}
-                            <span class="pf-c-tree-view__node-icon">
+                            <span class="pf-v5-c-tree-view__node-icon">
                                 <i
                                     class="fas ${this.open ? "fa-folder-open" : "fa-folder"}"
                                     aria-hidden="true"
                                 ></i>
                             </span>
-                            <span class="pf-c-tree-view__node-text">${this.item?.label}</span>
+                            <span class="pf-v5-c-tree-view__node-text">${this.item?.label}</span>
                         </div>
                     </button>
                 </div>
-                <ul class="pf-c-tree-view__list" role="group" ?hidden=${!shouldRenderChildren}>
+                <ul class="pf-v5-c-tree-view__list" role="group" ?hidden=${!shouldRenderChildren}>
                     ${this.item?.childItems.map((item) => {
                         return html`<ak-treeview-node
                             .item=${item}
@@ -193,8 +193,8 @@ export class TreeView extends AKElement {
 
     render(): TemplateResult {
         const rootItem = this.parse(this.items);
-        return html`<div class="pf-c-tree-view pf-m-guides">
-            <ul class="pf-c-tree-view__list" role="tree">
+        return html`<div class="pf-v5-c-tree-view pf-m-guides">
+            <ul class="pf-v5-c-tree-view__list" role="tree">
                 <ak-treeview-node
                     .item=${rootItem}
                     activePath=${this.activePath}
diff --git a/web/src/elements/buttons/Dropdown.ts b/web/src/elements/buttons/Dropdown.ts
index bcfc29c48..c99cf7593 100644
--- a/web/src/elements/buttons/Dropdown.ts
+++ b/web/src/elements/buttons/Dropdown.ts
@@ -10,8 +10,8 @@ export class DropdownButton extends AKElement {
 
     constructor() {
         super();
-        this.menu = this.querySelector<HTMLElement>(".pf-c-dropdown__menu");
-        this.querySelectorAll("button.pf-c-dropdown__toggle").forEach((btn) => {
+        this.menu = this.querySelector<HTMLElement>(".pf-v5-c-dropdown__menu");
+        this.querySelectorAll("button.pf-v5-c-dropdown__toggle").forEach((btn) => {
             btn.addEventListener("click", () => {
                 if (!this.menu) return;
                 this.menu.hidden = !this.menu.hidden;
diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 9a2b4fd0d..945bfc62b 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -19,9 +19,9 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 export const MODAL_BUTTON_STYLES = css`
     :host {
         text-align: left;
-        font-size: var(--pf-global--FontSize--md);
+        font-size: var(--pf-v5-global--FontSize--md);
     }
-    .pf-c-modal-box > .pf-c-button + * {
+    .pf-v5-c-modal-box > .pf-v5-c-button + * {
         margin-right: 0;
     }
     /* fix multiple selects height */
@@ -106,14 +106,14 @@ export class ModalButton extends AKElement {
 
     renderModal(): TemplateResult {
         return html`<div
-            class="pf-c-backdrop"
+            class="pf-v5-c-backdrop"
             @click=${(e: PointerEvent) => {
                 e.stopPropagation();
             }}
         >
-            <div class="pf-l-bullseye">
+            <div class="pf-v5-l-bullseye">
                 <div
-                    class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
+                    class="pf-v5-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
                     role="dialog"
                     aria-modal="true"
                 >
@@ -122,7 +122,7 @@ export class ModalButton extends AKElement {
                             this.resetForms();
                             this.open = false;
                         }}
-                        class="pf-c-button pf-m-plain"
+                        class="pf-v5-c-button pf-m-plain"
                         type="button"
                         aria-label="Close dialog"
                     >
diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts
index a3997655f..d8c7cf73d 100644
--- a/web/src/elements/cards/AggregateCard.ts
+++ b/web/src/elements/cards/AggregateCard.ts
@@ -28,28 +28,28 @@ export class AggregateCard extends AKElement {
     static get styles(): CSSResult[] {
         return [PFBase, PFCard, PFFlex].concat([
             css`
-                .pf-c-card.pf-c-card-aggregate {
+                .pf-v5-c-card.pf-v5-c-card-aggregate {
                     height: 100%;
                 }
-                .pf-c-card__header {
+                .pf-v5-c-card__header {
                     flex-wrap: nowrap;
                 }
                 .center-value {
-                    font-size: var(--pf-global--icon--FontSize--lg);
+                    font-size: var(--pf-v5-global--icon--FontSize--lg);
                     text-align: center;
                 }
                 .subtext {
-                    font-size: var(--pf-global--FontSize--sm);
+                    font-size: var(--pf-v5-global--FontSize--sm);
                 }
-                .pf-c-card__body {
+                .pf-v5-c-card__body {
                     overflow-x: scroll;
-                    padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2);
-                    padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2);
+                    padding-left: calc(var(--pf-v5-c-card--child--PaddingLeft) / 2);
+                    padding-right: calc(var(--pf-v5-c-card--child--PaddingRight) / 2);
                 }
-                .pf-c-card__header,
-                .pf-c-card__title,
-                .pf-c-card__body,
-                .pf-c-card__footer {
+                .pf-v5-c-card__header,
+                .pf-v5-c-card__title,
+                .pf-v5-c-card__body,
+                .pf-v5-c-card__footer {
                     padding-bottom: 0;
                 }
             `,
@@ -73,14 +73,14 @@ export class AggregateCard extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-card pf-c-card-aggregate">
-            <div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
-                <div class="pf-c-card__title">
+        return html`<div class="pf-v5-c-card pf-v5-c-card-aggregate">
+            <div class="pf-v5-c-card__header pf-v5-l-flex pf-m-justify-content-space-between">
+                <div class="pf-v5-c-card__title">
                     <i class="${ifDefined(this.icon)}"></i>&nbsp;${this.renderHeader()}
                 </div>
                 ${this.renderHeaderLink()}
             </div>
-            <div class="pf-c-card__body ${this.isCenter ? "center-value" : ""}">
+            <div class="pf-v5-c-card__body ${this.isCenter ? "center-value" : ""}">
                 ${this.renderInner()}
                 ${this.subtext ? html`<p class="subtext">${this.subtext}</p>` : html``}
             </div>
diff --git a/web/src/elements/chips/Chip.ts b/web/src/elements/chips/Chip.ts
index 20bf56e67..595305df9 100644
--- a/web/src/elements/chips/Chip.ts
+++ b/web/src/elements/chips/Chip.ts
@@ -22,14 +22,14 @@ export class Chip extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<li class="pf-c-chip-group__list-item">
-            <div class="pf-c-chip">
-                <span class="pf-c-chip__text">
+        return html`<li class="pf-v5-c-chip-group__list-item">
+            <div class="pf-v5-c-chip">
+                <span class="pf-v5-c-chip__text">
                     <slot></slot>
                 </span>
                 ${this.removable
                     ? html`<button
-                          class="pf-c-button pf-m-plain"
+                          class="pf-v5-c-button pf-m-plain"
                           type="button"
                           @click=${() => {
                               this.dispatchEvent(
diff --git a/web/src/elements/chips/ChipGroup.ts b/web/src/elements/chips/ChipGroup.ts
index e74fa1516..d47ac4b95 100644
--- a/web/src/elements/chips/ChipGroup.ts
+++ b/web/src/elements/chips/ChipGroup.ts
@@ -21,7 +21,7 @@ export class ChipGroup extends AKElement {
                 ::slotted(*) {
                     margin: 0 2px;
                 }
-                .pf-c-chip-group {
+                .pf-v5-c-chip-group {
                     margin-bottom: 8px;
                 }
             `,
@@ -44,9 +44,9 @@ export class ChipGroup extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-chip-group">
-            <div class="pf-c-chip-group__main">
-                <ul class="pf-c-chip-group__list" role="list">
+        return html`<div class="pf-v5-c-chip-group">
+            <div class="pf-v5-c-chip-group__main">
+                <ul class="pf-v5-c-chip-group__list" role="list">
                     <slot></slot>
                 </ul>
             </div>
diff --git a/web/src/elements/enterprise/EnterpriseStatusBanner.ts b/web/src/elements/enterprise/EnterpriseStatusBanner.ts
index 0ac115457..f31aae43e 100644
--- a/web/src/elements/enterprise/EnterpriseStatusBanner.ts
+++ b/web/src/elements/enterprise/EnterpriseStatusBanner.ts
@@ -28,7 +28,7 @@ export class EnterpriseStatusBanner extends AKElement {
     }
 
     renderBanner(): TemplateResult {
-        return html`<div class="pf-c-banner ${this.summary?.readOnly ? "pf-m-red" : "pf-m-gold"}">
+        return html`<div class="pf-v5-c-banner ${this.summary?.readOnly ? "pf-m-red" : "pf-m-gold"}">
             ${msg("Warning: The current user count has exceeded the configured licenses.")}
             <a href="/if/admin/#/enterprise/licenses"> ${msg("Click here for more info.")} </a>
         </div>`;
diff --git a/web/src/elements/forms/ConfirmationForm.ts b/web/src/elements/forms/ConfirmationForm.ts
index a977cdbe3..5a1182dc9 100644
--- a/web/src/elements/forms/ConfirmationForm.ts
+++ b/web/src/elements/forms/ConfirmationForm.ts
@@ -54,19 +54,19 @@ export class ConfirmationForm extends ModalButton {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">
                         <slot name="header"></slot>
                     </h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">
-                <form class="pf-c-form pf-m-horizontal">
-                    <slot class="pf-c-content" name="body"></slot>
+            <section class="pf-v5-c-modal-box__body pf-m-light">
+                <form class="pf-v5-c-form pf-m-horizontal">
+                    <slot class="pf-v5-c-content" name="body"></slot>
                 </form>
             </section>
-            <footer class="pf-c-modal-box__footer">
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
                         return this.confirm();
diff --git a/web/src/elements/forms/DeleteBulkForm.ts b/web/src/elements/forms/DeleteBulkForm.ts
index 5d56f19c0..7e3b7da1e 100644
--- a/web/src/elements/forms/DeleteBulkForm.ts
+++ b/web/src/elements/forms/DeleteBulkForm.ts
@@ -78,7 +78,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
             return this.renderUsedBy(this.usedByData.get(item) || []);
         };
         return html`<td role="cell" colspan="2">
-            <div class="pf-c-table__expandable-row-content">
+            <div class="pf-v5-c-table__expandable-row-content">
                 ${this.usedBy
                     ? until(handler(), html`<ak-spinner size=${PFSize.Large}></ak-spinner>`)
                     : html``}
@@ -90,7 +90,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
         if (usedBy.length < 1) {
             return html`<span>${msg("Not used by any other object.")}</span>`;
         }
-        return html`<ul class="pf-c-list">
+        return html`<ul class="pf-v5-c-list">
             ${usedBy.map((ub) => {
                 let consequence = "";
                 switch (ub.action) {
@@ -182,18 +182,18 @@ export class DeleteBulkForm<T> extends ModalButton {
     }
 
     renderModalInner(): TemplateResult {
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">
                         ${this.actionLabel
                             ? this.actionLabel
                             : msg(str`Delete ${this.objectLabel}`)}
                     </h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">
-                <form class="pf-c-form pf-m-horizontal">
-                    <p class="pf-c-title">
+            <section class="pf-v5-c-modal-box__body pf-m-light">
+                <form class="pf-v5-c-form pf-m-horizontal">
+                    <p class="pf-v5-c-title">
                         ${this.actionSubtext
                             ? this.actionSubtext
                             : msg(
@@ -203,7 +203,7 @@ export class DeleteBulkForm<T> extends ModalButton {
                     <slot name="notice"></slot>
                 </form>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">
+            <section class="pf-v5-c-modal-box__body pf-m-light">
                 <ak-delete-objects-table
                     .objects=${this.objects}
                     .usedBy=${this.usedBy}
@@ -211,7 +211,7 @@ export class DeleteBulkForm<T> extends ModalButton {
                 >
                 </ak-delete-objects-table>
             </section>
-            <footer class="pf-c-modal-box__footer">
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
                         return this.confirm();
diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 2c4a3a4f2..79dd1817f 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -70,13 +70,13 @@ export class DeleteForm extends ModalButton {
         } else {
             objName = "";
         }
-        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1>
+        return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1>
                 </div>
             </section>
-            <section class="pf-c-modal-box__body pf-m-light">
-                <form class="pf-c-form pf-m-horizontal">
+            <section class="pf-v5-c-modal-box__body pf-m-light">
+                <form class="pf-v5-c-form pf-m-horizontal">
                     <p>
                         ${msg(str`Are you sure you want to delete ${this.objectLabel} ${objName}?`)}
                     </p>
@@ -89,10 +89,10 @@ export class DeleteForm extends ModalButton {
                               return html``;
                           }
                           return html`
-                              <section class="pf-c-modal-box__body pf-m-light">
-                                  <form class="pf-c-form pf-m-horizontal">
+                              <section class="pf-v5-c-modal-box__body pf-m-light">
+                                  <form class="pf-v5-c-form pf-m-horizontal">
                                       <p>${msg(str`The following objects use ${objName}`)}</p>
-                                      <ul class="pf-c-list">
+                                      <ul class="pf-v5-c-list">
                                           ${usedBy.map((ub) => {
                                               let consequence = "";
                                               switch (ub.action) {
@@ -126,7 +126,7 @@ export class DeleteForm extends ModalButton {
                       }),
                   )
                 : html``}
-            <footer class="pf-c-modal-box__footer">
+            <footer class="pf-v5-c-modal-box__footer">
                 <ak-spinner-button
                     .callAction=${() => {
                         return this.confirm();
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 6c69365a7..18a12d576 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -283,7 +283,7 @@ export abstract class Form<T> extends AKElement {
     renderForm(): TemplateResult {
         const inline = this.renderInlineForm();
         if (inline) {
-            return html`<form class="pf-c-form pf-m-horizontal" @submit=${this.submit}>
+            return html`<form class="pf-v5-c-form pf-m-horizontal" @submit=${this.submit}>
                 ${inline}
             </form>`;
         }
@@ -302,13 +302,13 @@ export abstract class Form<T> extends AKElement {
         if (!this.nonFieldErrors) {
             return html``;
         }
-        return html`<div class="pf-c-form__alert">
+        return html`<div class="pf-v5-c-form__alert">
             ${this.nonFieldErrors.map((err) => {
-                return html`<div class="pf-c-alert pf-m-inline pf-m-danger">
-                    <div class="pf-c-alert__icon">
+                return html`<div class="pf-v5-c-alert pf-m-inline pf-m-danger">
+                    <div class="pf-v5-c-alert__icon">
                         <i class="fas fa-exclamation-circle"></i>
                     </div>
-                    <h4 class="pf-c-alert__title">${err}</h4>
+                    <h4 class="pf-v5-c-alert__title">${err}</h4>
                 </div>`;
             })}
         </div>`;
diff --git a/web/src/elements/forms/FormElement.ts b/web/src/elements/forms/FormElement.ts
index b910caa90..6a91851e2 100644
--- a/web/src/elements/forms/FormElement.ts
+++ b/web/src/elements/forms/FormElement.ts
@@ -31,16 +31,16 @@ export class FormElement extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-form__group">
-            <label class="pf-c-form__label">
-                <span class="pf-c-form__label-text">${this.label}</span>
+        return html`<div class="pf-v5-c-form__group">
+            <label class="pf-v5-c-form__label">
+                <span class="pf-v5-c-form__label-text">${this.label}</span>
                 ${this.required
-                    ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>`
+                    ? html`<span class="pf-v5-c-form__label-required" aria-hidden="true">*</span>`
                     : html``}
             </label>
             <slot></slot>
             ${(this.errors || []).map((error) => {
-                return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`;
+                return html`<p class="pf-v5-c-form__helper-text pf-m-error">${error.string}</p>`;
             })}
         </div>`;
     }
diff --git a/web/src/elements/forms/FormGroup.ts b/web/src/elements/forms/FormGroup.ts
index 347a06a40..07556abff 100644
--- a/web/src/elements/forms/FormGroup.ts
+++ b/web/src/elements/forms/FormGroup.ts
@@ -28,11 +28,11 @@ export class FormGroup extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-form__field-group ${this.expanded ? "pf-m-expanded" : ""}">
-            <div class="pf-c-form__field-group-toggle">
-                <div class="pf-c-form__field-group-toggle-button">
+        return html`<div class="pf-v5-c-form__field-group ${this.expanded ? "pf-m-expanded" : ""}">
+            <div class="pf-v5-c-form__field-group-toggle">
+                <div class="pf-v5-c-form__field-group-toggle-button">
                     <button
-                        class="pf-c-button pf-m-plain"
+                        class="pf-v5-c-button pf-m-plain"
                         type="button"
                         aria-expanded="${this.expanded}"
                         aria-label="Details"
@@ -40,25 +40,25 @@ export class FormGroup extends AKElement {
                             this.expanded = !this.expanded;
                         }}
                     >
-                        <span class="pf-c-form__field-group-toggle-icon">
+                        <span class="pf-v5-c-form__field-group-toggle-icon">
                             <i class="fas fa-angle-right" aria-hidden="true"></i>
                         </span>
                     </button>
                 </div>
             </div>
-            <div class="pf-c-form__field-group-header">
-                <div class="pf-c-form__field-group-header-main">
-                    <div class="pf-c-form__field-group-header-title">
-                        <div class="pf-c-form__field-group-header-title-text">
+            <div class="pf-v5-c-form__field-group-header">
+                <div class="pf-v5-c-form__field-group-header-main">
+                    <div class="pf-v5-c-form__field-group-header-title">
+                        <div class="pf-v5-c-form__field-group-header-title-text">
                             <slot name="header"></slot>
                         </div>
                     </div>
-                    <div class="pf-c-form__field-group-header-description">
+                    <div class="pf-v5-c-form__field-group-header-description">
                         <slot name="description"></slot>
                     </div>
                 </div>
             </div>
-            <slot ?hidden=${!this.expanded} class="pf-c-form__field-group-body" name="body"></slot>
+            <slot ?hidden=${!this.expanded} class="pf-v5-c-form__field-group-body" name="body"></slot>
         </div>`;
     }
 }
diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts
index 3709536b0..c142e3276 100644
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/web/src/elements/forms/HorizontalFormElement.ts
@@ -23,14 +23,14 @@ export class HorizontalFormElement extends AKElement {
             PFForm,
             PFFormControl,
             css`
-                .pf-c-form__group {
+                .pf-v5-c-form__group {
                     display: grid;
                     grid-template-columns:
-                        var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth)
-                        var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+                        var(--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth)
+                        var(--pf-v5-c-form--m-horizontal__group-control--md--GridColumnWidth);
                 }
-                .pf-c-form__group-label {
-                    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+                .pf-v5-c-form__group-label {
+                    padding-top: var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop);
                 }
             `,
         ];
@@ -116,35 +116,35 @@ export class HorizontalFormElement extends AKElement {
 
     render(): TemplateResult {
         this.updated();
-        return html`<div class="pf-c-form__group">
-            <div class="pf-c-form__group-label">
-                <label class="pf-c-form__label">
-                    <span class="pf-c-form__label-text">${this.label}</span>
+        return html`<div class="pf-v5-c-form__group">
+            <div class="pf-v5-c-form__group-label">
+                <label class="pf-v5-c-form__label">
+                    <span class="pf-v5-c-form__label-text">${this.label}</span>
                     ${this.required
-                        ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>`
+                        ? html`<span class="pf-v5-c-form__label-required" aria-hidden="true">*</span>`
                         : html``}
                 </label>
             </div>
-            <div class="pf-c-form__group-control">
+            <div class="pf-v5-c-form__group-control">
                 ${this.writeOnly && !this.writeOnlyActivated
-                    ? html`<div class="pf-c-form__horizontal-group">
+                    ? html`<div class="pf-v5-c-form__horizontal-group">
                           <input
-                              class="pf-c-form-control"
+                              class="pf-v5-c-form-control"
                               type="password"
                               disabled
                               value="**************"
                           />
                       </div>`
                     : html``}
-                <slot class="pf-c-form__horizontal-group"></slot>
-                <div class="pf-c-form__horizontal-group">
+                <slot class="pf-v5-c-form__horizontal-group"></slot>
+                <div class="pf-v5-c-form__horizontal-group">
                     ${this.writeOnly
-                        ? html`<p class="pf-c-form__helper-text" aria-live="polite">
+                        ? html`<p class="pf-v5-c-form__helper-text" aria-live="polite">
                               ${msg("Click to change value")}
                           </p>`
                         : html``}
                     ${this.errorMessages.map((message) => {
-                        return html`<p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
+                        return html`<p class="pf-v5-c-form__helper-text pf-m-error" aria-live="polite">
                             ${message}
                         </p>`;
                     })}
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index 1930b7d75..89b661cdf 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -57,16 +57,16 @@ export class ModalForm extends ModalButton {
         return html`${this.loading
                 ? html`<ak-loading-overlay ?topMost=${true}></ak-loading-overlay>`
                 : html``}
-            <section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1 class="pf-c-title pf-m-2xl">
+            <section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
+                <div class="pf-v5-c-content">
+                    <h1 class="pf-v5-c-title pf-m-2xl">
                         <slot name="header"></slot>
                     </h1>
                 </div>
             </section>
             <slot name="above-form"></slot>
             <section
-                class="pf-c-modal-box__body"
+                class="pf-v5-c-modal-box__body"
                 @scroll=${() => {
                     window.dispatchEvent(
                         new CustomEvent("scroll", {
@@ -77,7 +77,7 @@ export class ModalForm extends ModalButton {
             >
                 <slot name="form"></slot>
             </section>
-            <footer class="pf-c-modal-box__footer">
+            <footer class="pf-v5-c-modal-box__footer">
                 ${this.showSubmitButton
                     ? html`<ak-spinner-button
                               .callAction=${() => {
diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts
index 55b60a3ac..880c6474d 100644
--- a/web/src/elements/forms/Radio.ts
+++ b/web/src/elements/forms/Radio.ts
@@ -31,9 +31,9 @@ export class Radio<T> extends AKElement {
             PFRadio,
             PFForm,
             css`
-                .pf-c-form__group-control {
+                .pf-v5-c-form__group-control {
                     padding-top: calc(
-                        var(--pf-c-form--m-horizontal__group-label--md--PaddingTop) * 1.3
+                        var(--pf-v5-c-form--m-horizontal__group-label--md--PaddingTop) * 1.3
                     );
                 }
             `,
@@ -47,12 +47,12 @@ export class Radio<T> extends AKElement {
                 this.value = def[0].value;
             }
         }
-        return html`<div class="pf-c-form__group-control pf-m-stack">
+        return html`<div class="pf-v5-c-form__group-control pf-m-stack">
             ${this.options.map((opt) => {
                 const elId = `${this.name}-${opt.value}`;
-                return html`<div class="pf-c-radio">
+                return html`<div class="pf-v5-c-radio">
                     <input
-                        class="pf-c-radio__input"
+                        class="pf-v5-c-radio__input"
                         type="radio"
                         name="${this.name}"
                         id=${elId}
@@ -68,9 +68,9 @@ export class Radio<T> extends AKElement {
                         }}
                         .checked=${opt.value === this.value}
                     />
-                    <label class="pf-c-radio__label" for=${elId}>${opt.label}</label>
+                    <label class="pf-v5-c-radio__label" for=${elId}>${opt.label}</label>
                     ${opt.description
-                        ? html`<span class="pf-c-radio__description">${opt.description}</span>`
+                        ? html`<span class="pf-v5-c-radio__description">${opt.description}</span>`
                         : html``}
                 </div>`;
             })}
diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
index 6c8865ca1..6f4206d01 100644
--- a/web/src/elements/forms/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect.ts
@@ -83,7 +83,7 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
             this.open = false;
             this.shadowRoot
                 ?.querySelectorAll<HTMLInputElement>(
-                    ".pf-c-form-control.pf-c-select__toggle-typeahead",
+                    ".pf-v5-c-form-control.pf-v5-c-select__toggle-typeahead",
                 )
                 .forEach((input) => {
                     input.blur();
@@ -165,7 +165,7 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
      * Also to move it to the correct position we're getting this elements's position and use that
      * to position the menu
      * The other downside this has is that, since we're rendering outside of a shadow root,
-     * the pf-c-dropdown CSS needs to be loaded on the body.
+     * the pf-v5-c-dropdown CSS needs to be loaded on the body.
      */
     renderMenu(): void {
         if (!this.objects) {
@@ -192,7 +192,7 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
                 return html`
                     <li>
                         <button
-                            class="pf-c-dropdown__menu-item ${desc === undefined
+                            class="pf-v5-c-dropdown__menu-item ${desc === undefined
                                 ? ""
                                 : "pf-m-description"}"
                             role="option"
@@ -205,10 +205,10 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
                             ${desc === undefined
                                 ? this.renderElement(obj)
                                 : html`
-                                      <div class="pf-c-dropdown__menu-item-main">
+                                      <div class="pf-v5-c-dropdown__menu-item-main">
                                           ${this.renderElement(obj)}
                                       </div>
-                                      <div class="pf-c-dropdown__menu-item-description">
+                                      <div class="pf-v5-c-dropdown__menu-item-description">
                                           ${desc}
                                       </div>
                                   `}
@@ -219,14 +219,14 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
         };
         render(
             html`<div
-                class="pf-c-dropdown pf-m-expanded"
+                class="pf-v5-c-dropdown pf-m-expanded"
                 style="position: fixed; inset: 0px auto auto 0px; z-index: 9999; transform: translate(${pos.x}px, ${pos.y +
                 this.offsetHeight}px); width: ${pos.width}px; ${this.open
                     ? ""
                     : "visibility: hidden;"}"
             >
                 <ul
-                    class="pf-c-dropdown__menu pf-m-static"
+                    class="pf-v5-c-dropdown__menu pf-m-static"
                     role="listbox"
                     style="max-height:50vh;overflow-y:auto;"
                     id=${this.dropdownUID}
@@ -236,7 +236,7 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
                         ? html`
                               <li>
                                   <button
-                                      class="pf-c-dropdown__menu-item"
+                                      class="pf-v5-c-dropdown__menu-item"
                                       role="option"
                                       @click=${() => {
                                           this.selectedObject = undefined;
@@ -252,8 +252,8 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
                     ${shouldRenderGroups
                         ? html`${groupedItems.map(([group, items], idx) => {
                               return html`
-                                  <section class="pf-c-dropdown__group">
-                                      <h1 class="pf-c-dropdown__group-title">${group}</h1>
+                                  <section class="pf-v5-c-dropdown__group">
+                                      <h1 class="pf-v5-c-dropdown__group-title">${group}</h1>
                                       <ul>
                                           ${renderGroup(items, idx)}
                                       </ul>
@@ -278,11 +278,11 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
         } else if (this.blankable) {
             value = this.emptyOption;
         }
-        return html`<div class="pf-c-select">
-            <div class="pf-c-select__toggle pf-m-typeahead">
-                <div class="pf-c-select__toggle-wrapper">
+        return html`<div class="pf-v5-c-select">
+            <div class="pf-v5-c-select__toggle pf-m-typeahead">
+                <div class="pf-v5-c-select__toggle-wrapper">
                     <input
-                        class="pf-c-form-control pf-c-select__toggle-typeahead"
+                        class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
                         type="text"
                         placeholder=${this.placeholder}
                         spellcheck="false"
@@ -306,7 +306,7 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
                             // Check if we're losing focus to one of our dropdown items, and if such don't blur
                             if (ev.relatedTarget instanceof HTMLButtonElement) {
                                 const parentMenu = ev.relatedTarget.closest(
-                                    "ul.pf-c-dropdown__menu.pf-m-static",
+                                    "ul.pf-v5-c-dropdown__menu.pf-m-static",
                                 );
                                 if (parentMenu && parentMenu.id === this.dropdownUID) {
                                     return;
diff --git a/web/src/elements/messages/Message.ts b/web/src/elements/messages/Message.ts
index 8ee266a90..ac82e6691 100644
--- a/web/src/elements/messages/Message.ts
+++ b/web/src/elements/messages/Message.ts
@@ -47,24 +47,24 @@ export class Message extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<li class="pf-c-alert-group__item">
+        return html`<li class="pf-v5-c-alert-group__item">
             <div
-                class="pf-c-alert pf-m-${this.message?.level} ${this.message?.level ===
+                class="pf-v5-c-alert pf-m-${this.message?.level} ${this.message?.level ===
                 MessageLevel.error
                     ? "pf-m-danger"
                     : ""}"
             >
-                <div class="pf-c-alert__icon">
+                <div class="pf-v5-c-alert__icon">
                     <i class="${this.message ? LEVEL_ICON_MAP[this.message.level] : ""}"></i>
                 </div>
-                <p class="pf-c-alert__title">${this.message?.message}</p>
+                <p class="pf-v5-c-alert__title">${this.message?.message}</p>
                 ${this.message?.description &&
-                html`<div class="pf-c-alert__description">
+                html`<div class="pf-v5-c-alert__description">
                     <p>${this.message.description}</p>
                 </div>`}
-                <div class="pf-c-alert__action">
+                <div class="pf-v5-c-alert__action">
                     <button
-                        class="pf-c-button pf-m-plain"
+                        class="pf-v5-c-button pf-m-plain"
                         type="button"
                         @click=${() => {
                             if (!this.message) return;
diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts
index fd1939bd9..4cef564dd 100644
--- a/web/src/elements/messages/MessageContainer.ts
+++ b/web/src/elements/messages/MessageContainer.ts
@@ -65,7 +65,7 @@ export class MessageContainer extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<ul class="pf-c-alert-group pf-m-toast">
+        return html`<ul class="pf-v5-c-alert-group pf-m-toast">
             ${this.messages.map((m) => {
                 return html`<ak-message
                     .message=${m}
diff --git a/web/src/elements/notifications/APIDrawer.ts b/web/src/elements/notifications/APIDrawer.ts
index 8f93bd8d2..a8fdebd7b 100644
--- a/web/src/elements/notifications/APIDrawer.ts
+++ b/web/src/elements/notifications/APIDrawer.ts
@@ -25,16 +25,16 @@ export class APIDrawer extends AKElement {
             PFContent,
             PFDropdown,
             css`
-                .pf-c-notification-drawer__header {
+                .pf-v5-c-notification-drawer__header {
                     height: 114px;
                     align-items: center;
                 }
-                .pf-c-notification-drawer__header-action,
-                .pf-c-notification-drawer__header-action-close,
-                .pf-c-notification-drawer__header-action-close > .pf-c-button.pf-m-plain {
+                .pf-v5-c-notification-drawer__header-action,
+                .pf-v5-c-notification-drawer__header-action-close,
+                .pf-v5-c-notification-drawer__header-action-close > .pf-v5-c-button.pf-m-plain {
                     height: 100%;
                 }
-                .pf-c-notification-drawer__list-item-description {
+                .pf-v5-c-notification-drawer__list-item-description {
                     white-space: pre-wrap;
                     font-family: monospace;
                 }
@@ -57,14 +57,14 @@ export class APIDrawer extends AKElement {
     }
 
     renderItem(item: RequestInfo): TemplateResult {
-        return html`<li class="pf-c-notification-drawer__list-item pf-m-read">
-            <div class="pf-c-notification-drawer__list-item-header">
-                <h2 class="pf-c-notification-drawer__list-item-header-title">
+        return html`<li class="pf-v5-c-notification-drawer__list-item pf-m-read">
+            <div class="pf-v5-c-notification-drawer__list-item-header">
+                <h2 class="pf-v5-c-notification-drawer__list-item-header-title">
                     ${item.method}: ${item.status}
                 </h2>
             </div>
             <a
-                class="pf-c-notification-drawer__list-item-description"
+                class="pf-v5-c-notification-drawer__list-item-description"
                 target="_blank"
                 href=${item.path}
                 >${item.path}</a
@@ -73,17 +73,17 @@ export class APIDrawer extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-drawer__body pf-m-no-padding">
-            <div class="pf-c-notification-drawer">
-                <div class="pf-c-notification-drawer__header">
+        return html`<div class="pf-v5-c-drawer__body pf-m-no-padding">
+            <div class="pf-v5-c-notification-drawer">
+                <div class="pf-v5-c-notification-drawer__header">
                     <div class="text">
-                        <h1 class="pf-c-notification-drawer__header-title">
+                        <h1 class="pf-v5-c-notification-drawer__header-title">
                             ${msg("API Requests")}
                         </h1>
                         <a href="/api/v3/" target="_blank">${msg("Open API Browser")}</a>
                     </div>
-                    <div class="pf-c-notification-drawer__header-action">
-                        <div class="pf-c-notification-drawer__header-action-close">
+                    <div class="pf-v5-c-notification-drawer__header-action">
+                        <div class="pf-v5-c-notification-drawer__header-action-close">
                             <button
                                 @click=${() => {
                                     this.dispatchEvent(
@@ -93,7 +93,7 @@ export class APIDrawer extends AKElement {
                                         }),
                                     );
                                 }}
-                                class="pf-c-button pf-m-plain"
+                                class="pf-v5-c-button pf-m-plain"
                                 type="button"
                                 aria-label="Close"
                             >
@@ -102,8 +102,8 @@ export class APIDrawer extends AKElement {
                         </div>
                     </div>
                 </div>
-                <div class="pf-c-notification-drawer__body">
-                    <ul class="pf-c-notification-drawer__list">
+                <div class="pf-v5-c-notification-drawer__body">
+                    <ul class="pf-v5-c-notification-drawer__list">
                         ${this.requests.map((n) => this.renderItem(n))}
                     </ul>
                 </div>
diff --git a/web/src/elements/oauth/UserRefreshList.ts b/web/src/elements/oauth/UserRefreshList.ts
index 288bf032b..d800872fa 100644
--- a/web/src/elements/oauth/UserRefreshList.ts
+++ b/web/src/elements/oauth/UserRefreshList.ts
@@ -47,9 +47,9 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
 
     renderExpanded(item: TokenModel): TemplateResult {
         return html` <td role="cell" colspan="4">
-                <div class="pf-c-table__expandable-row-content">
-                    <div class="pf-l-flex">
-                        <div class="pf-l-flex__item">
+                <div class="pf-v5-c-table__expandable-row-content">
+                    <div class="pf-v5-l-flex">
+                        <div class="pf-v5-l-flex__item">
                             <h3>${msg("ID Token")}</h3>
                             <pre>${item.idToken}</pre>
                         </div>
@@ -76,7 +76,7 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
                 });
             }}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+            <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
                 ${msg("Delete")}
             </button>
         </ak-forms-delete-bulk>`;
diff --git a/web/src/elements/router/Router404.ts b/web/src/elements/router/Router404.ts
index ce0292fc8..9fc56aa7e 100644
--- a/web/src/elements/router/Router404.ts
+++ b/web/src/elements/router/Router404.ts
@@ -18,14 +18,14 @@ export class Router404 extends AKElement {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-empty-state pf-m-full-height">
-            <div class="pf-c-empty-state__content">
-                <i class="fas fa-question-circle pf-c-empty-state__icon" aria-hidden="true"></i>
-                <h1 class="pf-c-title pf-m-lg">${msg("Not found")}</h1>
-                <div class="pf-c-empty-state__body">
+        return html`<div class="pf-v5-c-empty-state pf-m-full-height">
+            <div class="pf-v5-c-empty-state__content">
+                <i class="fas fa-question-circle pf-v5-c-empty-state__icon" aria-hidden="true"></i>
+                <h1 class="pf-v5-c-title pf-m-lg">${msg("Not found")}</h1>
+                <div class="pf-v5-c-empty-state__body">
                     ${msg(str`The URL "${this.url}" was not found.`)}
                 </div>
-                <a href="#/" class="pf-c-button pf-m-primary" type="button"
+                <a href="#/" class="pf-v5-c-button pf-m-primary" type="button"
                     >${msg("Return home")}</a
                 >
             </div>
diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts
index 8aa54e013..f5d78ff60 100644
--- a/web/src/elements/router/RouterOutlet.ts
+++ b/web/src/elements/router/RouterOutlet.ts
@@ -103,7 +103,7 @@ export class RouterOutlet extends AKElement {
         if (!matchedRoute) {
             console.debug(`authentik/router: route "${activeUrl}" not defined`);
             const route = new Route(RegExp(""), async () => {
-                return html`<div class="pf-c-page__main">
+                return html`<div class="pf-v5-c-page__main">
                     <ak-router-404 url=${activeUrl}></ak-router-404>
                 </div>`;
             });
diff --git a/web/src/elements/sidebar/Sidebar.ts b/web/src/elements/sidebar/Sidebar.ts
index 69604b13f..9bd93e482 100644
--- a/web/src/elements/sidebar/Sidebar.ts
+++ b/web/src/elements/sidebar/Sidebar.ts
@@ -22,19 +22,19 @@ export class Sidebar extends AKElement {
                 :host {
                     z-index: 100;
                 }
-                .pf-c-nav__link.pf-m-current::after,
-                .pf-c-nav__link.pf-m-current:hover::after,
-                .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
-                    --pf-c-nav__link--m-current--after--BorderColor: #fd4b2d;
+                .pf-v5-c-nav__link.pf-m-current::after,
+                .pf-v5-c-nav__link.pf-m-current:hover::after,
+                .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after {
+                    --pf-v5-c-nav__link--m-current--after--BorderColor: #fd4b2d;
                 }
                 :host([theme="light"]) {
                     border-right-color: transparent !important;
                 }
 
-                .pf-c-nav__section + .pf-c-nav__section {
-                    --pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm);
+                .pf-v5-c-nav__section + .pf-v5-c-nav__section {
+                    --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
                 }
-                .pf-c-nav__list .sidebar-brand {
+                .pf-v5-c-nav__list .sidebar-brand {
                     max-height: 82px;
                     margin-bottom: -0.5rem;
                 }
@@ -45,21 +45,21 @@ export class Sidebar extends AKElement {
                     height: 100%;
                     overflow-y: hidden;
                 }
-                .pf-c-nav__list {
+                .pf-v5-c-nav__list {
                     flex-grow: 1;
                     overflow-y: auto;
                 }
 
-                .pf-c-nav__link {
-                    --pf-c-nav__link--PaddingTop: 0.5rem;
-                    --pf-c-nav__link--PaddingRight: 0.5rem;
-                    --pf-c-nav__link--PaddingBottom: 0.5rem;
+                .pf-v5-c-nav__link {
+                    --pf-v5-c-nav__link--PaddingTop: 0.5rem;
+                    --pf-v5-c-nav__link--PaddingRight: 0.5rem;
+                    --pf-v5-c-nav__link--PaddingBottom: 0.5rem;
                 }
-                .pf-c-nav__section-title {
+                .pf-v5-c-nav__section-title {
                     font-size: 12px;
                 }
-                .pf-c-nav__item {
-                    --pf-c-nav__item--MarginTop: 0px;
+                .pf-v5-c-nav__item {
+                    --pf-v5-c-nav__item--MarginTop: 0px;
                 }
             `,
         ];
@@ -67,11 +67,11 @@ export class Sidebar extends AKElement {
 
     render(): TemplateResult {
         return html`<nav
-            class="pf-c-nav ${this.activeTheme === UiThemeEnum.Light ? "pf-m-light" : ""}"
+            class="pf-v5-c-nav ${this.activeTheme === UiThemeEnum.Light ? "pf-m-light" : ""}"
             aria-label="Global"
         >
             <ak-sidebar-brand></ak-sidebar-brand>
-            <ul class="pf-c-nav__list">
+            <ul class="pf-v5-c-nav__list">
                 <slot></slot>
             </ul>
             <ak-sidebar-user></ak-sidebar-user>
diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts
index fa442b36c..a7a293944 100644
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@@ -42,12 +42,12 @@ export class SidebarBrand extends AKElement {
                     height: 114px;
                     min-height: 114px;
                 }
-                .pf-c-brand img {
+                .pf-v5-c-brand img {
                     width: 100%;
                     padding: 0 0.5rem;
                     height: 42px;
                 }
-                button.pf-c-button.sidebar-trigger {
+                button.pf-v5-c-button.sidebar-trigger {
                     background-color: transparent;
                     border-radius: 0px;
                     height: 100%;
@@ -68,7 +68,7 @@ export class SidebarBrand extends AKElement {
         return html` ${window.innerWidth <= MIN_WIDTH
                 ? html`
                       <button
-                          class="sidebar-trigger pf-c-button"
+                          class="sidebar-trigger pf-v5-c-button"
                           @click=${() => {
                               this.dispatchEvent(
                                   new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
@@ -82,8 +82,8 @@ export class SidebarBrand extends AKElement {
                       </button>
                   `
                 : html``}
-            <a href="#/" class="pf-c-page__header-brand-link">
-                <div class="pf-c-brand ak-brand">
+            <a href="#/" class="pf-v5-c-page__header-brand-link">
+                <div class="pf-v5-c-brand ak-brand">
                     <img
                         src="${first(
                             rootInterface()?.tenant?.brandingLogo,
diff --git a/web/src/elements/sidebar/SidebarItem.ts b/web/src/elements/sidebar/SidebarItem.ts
index 9d5374736..32470430c 100644
--- a/web/src/elements/sidebar/SidebarItem.ts
+++ b/web/src/elements/sidebar/SidebarItem.ts
@@ -21,23 +21,23 @@ export class SidebarItem extends AKElement {
                     z-index: 100;
                     box-shadow: none !important;
                 }
-                :host([highlight]) .pf-c-nav__item {
+                :host([highlight]) .pf-v5-c-nav__item {
                     background-color: var(--ak-accent);
                     margin: 16px;
                 }
-                :host([highlight]) .pf-c-nav__item .pf-c-nav__link {
+                :host([highlight]) .pf-v5-c-nav__item .pf-v5-c-nav__link {
                     padding-left: 0.5rem;
                 }
-                .pf-c-nav__link.pf-m-current::after,
-                .pf-c-nav__link.pf-m-current:hover::after,
-                .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
-                    --pf-c-nav__link--m-current--after--BorderColor: #fd4b2d;
+                .pf-v5-c-nav__link.pf-m-current::after,
+                .pf-v5-c-nav__link.pf-m-current:hover::after,
+                .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after {
+                    --pf-v5-c-nav__link--m-current--after--BorderColor: #fd4b2d;
                 }
 
-                .pf-c-nav__section + .pf-c-nav__section {
-                    --pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm);
+                .pf-v5-c-nav__section + .pf-v5-c-nav__section {
+                    --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
                 }
-                .pf-c-nav__list .sidebar-brand {
+                .pf-v5-c-nav__list .sidebar-brand {
                     max-height: 82px;
                     margin-bottom: -0.5rem;
                 }
@@ -48,21 +48,21 @@ export class SidebarItem extends AKElement {
                     height: 100%;
                     overflow-y: hidden;
                 }
-                .pf-c-nav__list {
+                .pf-v5-c-nav__list {
                     flex-grow: 1;
                     overflow-y: auto;
                 }
 
-                .pf-c-nav__link {
-                    --pf-c-nav__link--PaddingTop: 0.5rem;
-                    --pf-c-nav__link--PaddingRight: 0.5rem;
-                    --pf-c-nav__link--PaddingBottom: 0.5rem;
+                .pf-v5-c-nav__link {
+                    --pf-v5-c-nav__link--PaddingTop: 0.5rem;
+                    --pf-v5-c-nav__link--PaddingRight: 0.5rem;
+                    --pf-v5-c-nav__link--PaddingBottom: 0.5rem;
                 }
-                .pf-c-nav__section-title {
+                .pf-v5-c-nav__section-title {
                     font-size: 12px;
                 }
-                .pf-c-nav__item {
-                    --pf-c-nav__item--MarginTop: 0px;
+                .pf-v5-c-nav__item {
+                    --pf-v5-c-nav__item--MarginTop: 0px;
                 }
             `,
         ];
@@ -147,41 +147,41 @@ export class SidebarItem extends AKElement {
     renderInner(): TemplateResult {
         if (this.childItems.length > 0) {
             return html`<li
-                class="pf-c-nav__item ${this.expanded ? "pf-m-expandable pf-m-expanded" : ""}"
+                class="pf-v5-c-nav__item ${this.expanded ? "pf-m-expandable pf-m-expanded" : ""}"
             >
                 <button
-                    class="pf-c-nav__link"
+                    class="pf-v5-c-nav__link"
                     aria-expanded="true"
                     @click=${() => {
                         this.expanded = !this.expanded;
                     }}
                 >
                     <slot name="label"></slot>
-                    <span class="pf-c-nav__toggle">
-                        <span class="pf-c-nav__toggle-icon">
+                    <span class="pf-v5-c-nav__toggle">
+                        <span class="pf-v5-c-nav__toggle-icon">
                             <i class="fas fa-angle-right" aria-hidden="true"></i>
                         </span>
                     </span>
                 </button>
-                <section class="pf-c-nav__subnav" ?hidden=${!this.expanded}>
-                    <ul class="pf-c-nav__list">
+                <section class="pf-v5-c-nav__subnav" ?hidden=${!this.expanded}>
+                    <ul class="pf-v5-c-nav__list">
                         <slot></slot>
                     </ul>
                 </section>
             </li>`;
         }
-        return html`<li class="pf-c-nav__item">
+        return html`<li class="pf-v5-c-nav__item">
             ${this.path
                 ? html`
                       <a
                           href="${this.isAbsoluteLink ? "" : "#"}${this.path}"
-                          class="pf-c-nav__link ${this.isActive ? "pf-m-current" : ""}"
+                          class="pf-v5-c-nav__link ${this.isActive ? "pf-m-current" : ""}"
                       >
                           <slot name="label"></slot>
                       </a>
                   `
                 : html`
-                      <span class="pf-c-nav__link">
+                      <span class="pf-v5-c-nav__link">
                           <slot name="label"></slot>
                       </span>
                   `}
diff --git a/web/src/elements/sidebar/SidebarUser.ts b/web/src/elements/sidebar/SidebarUser.ts
index 97cdad27b..2786f7572 100644
--- a/web/src/elements/sidebar/SidebarUser.ts
+++ b/web/src/elements/sidebar/SidebarUser.ts
@@ -24,7 +24,7 @@ export class SidebarUser extends AKElement {
                     flex-direction: row;
                     justify-content: space-between;
                 }
-                .pf-c-nav__link {
+                .pf-v5-c-nav__link {
                     align-items: center;
                     display: flex;
                     justify-content: center;
@@ -35,11 +35,11 @@ export class SidebarUser extends AKElement {
 
     render(): TemplateResult {
         return html`
-            <a href="/if/user/#/settings" class="pf-c-nav__link user-avatar" id="user-settings">
+            <a href="/if/user/#/settings" class="pf-v5-c-nav__link user-avatar" id="user-settings">
                 ${until(
                     me().then((u) => {
                         return html`<img
-                            class="pf-c-avatar"
+                            class="pf-v5-c-avatar"
                             src="${ifDefined(u.user.avatar)}"
                             alt=""
                         />`;
@@ -47,7 +47,7 @@ export class SidebarUser extends AKElement {
                     html``,
                 )}
             </a>
-            <a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
+            <a href="/flows/-/default/invalidation/" class="pf-v5-c-nav__link user-logout" id="logout">
                 <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
             </a>
         `;
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index b9cf20b14..46dc02550 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -61,12 +61,12 @@ export class TableColumn {
 
     renderSortable(table: Table<unknown>): TemplateResult {
         return html` <button
-            class="pf-c-table__button"
+            class="pf-v5-c-table__button"
             @click=${() => this.headerClickHandler(table)}
         >
-            <div class="pf-c-table__button-content">
-                <span class="pf-c-table__text">${this.title}</span>
-                <span class="pf-c-table__sort-indicator">
+            <div class="pf-v5-c-table__button-content">
+                <span class="pf-v5-c-table__text">${this.title}</span>
+                <span class="pf-v5-c-table__sort-indicator">
                     <i class="fas ${this.getSortIndicator(table)}"></i>
                 </span>
             </div>
@@ -78,7 +78,7 @@ export class TableColumn {
             role="columnheader"
             scope="col"
             class="
-                ${this.orderBy ? "pf-c-table__sort " : " "}
+                ${this.orderBy ? "pf-v5-c-table__sort " : " "}
                 ${table.order === this.orderBy || table.order === `-${this.orderBy}`
                 ? "pf-m-selected "
                 : ""}
@@ -161,11 +161,11 @@ export abstract class Table<T> extends AKElement {
             PFDropdown,
             PFPagination,
             css`
-                .pf-c-table thead .pf-c-table__check {
+                .pf-v5-c-table thead .pf-v5-c-table__check {
                     min-width: 3rem;
                 }
-                .pf-c-table tbody .pf-c-table__check input {
-                    margin-top: calc(var(--pf-c-table__check--input--MarginTop) + 1px);
+                .pf-v5-c-table tbody .pf-v5-c-table__check input {
+                    margin-top: calc(var(--pf-v5-c-table__check--input--MarginTop) + 1px);
                 }
             `,
         ];
@@ -235,7 +235,7 @@ export abstract class Table<T> extends AKElement {
     private renderLoading(): TemplateResult {
         return html`<tr role="row">
             <td role="cell" colspan="25">
-                <div class="pf-l-bullseye">
+                <div class="pf-v5-l-bullseye">
                     <ak-empty-state ?loading="${true}" header=${msg("Loading")}> </ak-empty-state>
                 </div>
             </td>
@@ -246,7 +246,7 @@ export abstract class Table<T> extends AKElement {
         return html`<tbody role="rowgroup">
             <tr role="row">
                 <td role="cell" colspan="8">
-                    <div class="pf-l-bullseye">
+                    <div class="pf-v5-l-bullseye">
                         ${inner
                             ? inner
                             : html`<ak-empty-state
@@ -338,7 +338,7 @@ export abstract class Table<T> extends AKElement {
                     @click=${itemSelectHandler}
                 >
                     ${this.checkbox
-                        ? html`<td class="pf-c-table__check" role="cell">
+                        ? html`<td class="pf-v5-c-table__check" role="cell">
                               <label class="ignore-click"
                                   ><input
                                       type="checkbox"
@@ -352,9 +352,9 @@ export abstract class Table<T> extends AKElement {
                           </td>`
                         : html``}
                     ${this.expandable
-                        ? html`<td class="pf-c-table__toggle" role="cell">
+                        ? html`<td class="pf-v5-c-table__toggle" role="cell">
                               <button
-                                  class="pf-c-button pf-m-plain ${this.expandedElements.indexOf(
+                                  class="pf-v5-c-button pf-m-plain ${this.expandedElements.indexOf(
                                       item,
                                   ) > -1
                                       ? "pf-m-expanded"
@@ -372,7 +372,7 @@ export abstract class Table<T> extends AKElement {
                                       this.requestUpdate();
                                   }}
                               >
-                                  <div class="pf-c-table__toggle-icon">
+                                  <div class="pf-v5-c-table__toggle-icon">
                                       &nbsp;<i class="fas fa-angle-down" aria-hidden="true"></i
                                       >&nbsp;
                                   </div>
@@ -384,7 +384,7 @@ export abstract class Table<T> extends AKElement {
                     })}
                 </tr>
                 <tr
-                    class="pf-c-table__expandable-row ${this.expandedElements.indexOf(item) > -1
+                    class="pf-v5-c-table__expandable-row ${this.expandedElements.indexOf(item) > -1
                         ? "pf-m-expanded"
                         : ""}"
                     role="row"
@@ -420,7 +420,7 @@ export abstract class Table<T> extends AKElement {
             return html``;
         }
         return html`<ak-table-search
-            class="pf-c-toolbar__item pf-m-search-filter"
+            class="pf-v5-c-toolbar__item pf-m-search-filter"
             value=${ifDefined(this.search)}
             .onSearch=${(value: string) => {
                 this.search = value;
@@ -439,15 +439,15 @@ export abstract class Table<T> extends AKElement {
     }
 
     renderToolbarContainer(): TemplateResult {
-        return html`<div class="pf-c-toolbar">
-            <div class="pf-c-toolbar__content">
-                <div class="pf-c-toolbar__group pf-m-search-filter">${this.renderSearch()}</div>
-                <div class="pf-c-toolbar__bulk-select">${this.renderToolbar()}</div>
-                <div class="pf-c-toolbar__group">${this.renderToolbarAfter()}</div>
-                <div class="pf-c-toolbar__group">${this.renderToolbarSelected()}</div>
+        return html`<div class="pf-v5-c-toolbar">
+            <div class="pf-v5-c-toolbar__content">
+                <div class="pf-v5-c-toolbar__group pf-m-search-filter">${this.renderSearch()}</div>
+                <div class="pf-v5-c-toolbar__bulk-select">${this.renderToolbar()}</div>
+                <div class="pf-v5-c-toolbar__group">${this.renderToolbarAfter()}</div>
+                <div class="pf-v5-c-toolbar__group">${this.renderToolbarSelected()}</div>
                 ${this.paginated
                     ? html`<ak-table-pagination
-                          class="pf-c-toolbar__item pf-m-pagination"
+                          class="pf-v5-c-toolbar__item pf-m-pagination"
                           .pages=${this.data?.pagination}
                           .pageChangeHandler=${(page: number) => {
                               this.page = page;
@@ -474,11 +474,11 @@ export abstract class Table<T> extends AKElement {
                   </ak-chip-group>`
                 : html``}
             ${this.renderToolbarContainer()}
-            <table class="pf-c-table pf-m-compact pf-m-grid-md pf-m-expandable">
+            <table class="pf-v5-c-table pf-m-compact pf-m-grid-md pf-m-expandable">
                 <thead>
                     <tr role="row">
                         ${this.checkbox
-                            ? html`<td class="pf-c-table__check" role="cell">
+                            ? html`<td class="pf-v5-c-table__check" role="cell">
                                   <input
                                       name="select-all"
                                       type="checkbox"
@@ -504,9 +504,9 @@ export abstract class Table<T> extends AKElement {
                 ${this.renderRows()}
             </table>
             ${this.paginated
-                ? html` <div class="pf-c-pagination pf-m-bottom">
+                ? html` <div class="pf-v5-c-pagination pf-m-bottom">
                       <ak-table-pagination
-                          class="pf-c-toolbar__item pf-m-pagination"
+                          class="pf-v5-c-toolbar__item pf-m-pagination"
                           .pages=${this.data?.pagination}
                           .pageChangeHandler=${(page: number) => {
                               this.page = page;
diff --git a/web/src/elements/table/TableModal.ts b/web/src/elements/table/TableModal.ts
index 328f5ffdf..5e2686220 100644
--- a/web/src/elements/table/TableModal.ts
+++ b/web/src/elements/table/TableModal.ts
@@ -66,16 +66,16 @@ export abstract class TableModal<T> extends Table<T> {
 
     renderModal(): TemplateResult {
         return html`<div
-            class="pf-c-backdrop"
+            class="pf-v5-c-backdrop"
             @click=${(e: PointerEvent) => {
                 e.stopPropagation();
             }}
         >
-            <div class="pf-l-bullseye">
-                <div class="pf-c-modal-box ${this.size}" role="dialog" aria-modal="true">
+            <div class="pf-v5-l-bullseye">
+                <div class="pf-v5-c-modal-box ${this.size}" role="dialog" aria-modal="true">
                     <button
                         @click=${() => (this.open = false)}
-                        class="pf-c-button pf-m-plain"
+                        class="pf-v5-c-button pf-m-plain"
                         type="button"
                         aria-label="Close dialog"
                     >
diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts
index 8ca297fe6..f9c6f9a30 100644
--- a/web/src/elements/table/TablePage.ts
+++ b/web/src/elements/table/TablePage.ts
@@ -64,7 +64,7 @@ export abstract class TablePage<T> extends Table<T> {
                     search: "",
                 });
             }}
-            class="pf-c-button pf-m-link"
+            class="pf-v5-c-button pf-m-link"
         >
             ${msg("Clear search")}
         </button>`;
@@ -86,12 +86,12 @@ export abstract class TablePage<T> extends Table<T> {
             >
             </ak-page-header>
             ${this.renderSectionBefore()}
-            <section class="pf-c-page__main-section pf-m-no-padding-mobile">
-                <div class="pf-c-sidebar pf-m-gutter">
-                    <div class="pf-c-sidebar__main">
+            <section class="pf-v5-c-page__main-section pf-m-no-padding-mobile">
+                <div class="pf-v5-c-sidebar pf-m-gutter">
+                    <div class="pf-v5-c-sidebar__main">
                         ${this.renderSidebarBefore()}
-                        <div class="pf-c-sidebar__content">
-                            <div class="pf-c-card">${this.renderTable()}</div>
+                        <div class="pf-v5-c-sidebar__content">
+                            <div class="pf-v5-c-card">${this.renderTable()}</div>
                         </div>
                         ${this.renderSidebarAfter()}
                     </div>
diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts
index d53c5a03d..0ad84a6f8 100644
--- a/web/src/elements/table/TablePagination.ts
+++ b/web/src/elements/table/TablePagination.ts
@@ -26,12 +26,12 @@ export class TablePagination extends AKElement {
             PFButton,
             PFPagination,
             css`
-                :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button {
-                    color: var(--pf-c-button--m-plain--disabled--Color);
-                    --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--Color);
+                :host([theme="dark"]) .pf-v5-c-pagination__nav-control .pf-v5-c-button {
+                    color: var(--pf-v5-c-button--m-plain--disabled--Color);
+                    --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--Color);
                 }
-                :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button:disabled {
-                    color: var(--pf-c-button--disabled--Color);
+                :host([theme="dark"]) .pf-v5-c-pagination__nav-control .pf-v5-c-button:disabled {
+                    color: var(--pf-v5-c-button--disabled--Color);
                 }
             `,
         ];
@@ -41,21 +41,21 @@ export class TablePagination extends AKElement {
         if (!this.pages) {
             return html``;
         }
-        return html` <div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
-            <div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
-                <div class="pf-c-options-menu">
-                    <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
-                        <span class="pf-c-options-menu__toggle-text">
+        return html` <div class="pf-v5-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
+            <div class="pf-v5-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
+                <div class="pf-v5-c-options-menu">
+                    <div class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain">
+                        <span class="pf-v5-c-options-menu__toggle-text">
                             ${msg(
                                 str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`,
                             )}
                         </span>
                     </div>
                 </div>
-                <nav class="pf-c-pagination__nav" aria-label="Pagination">
-                    <div class="pf-c-pagination__nav-control pf-m-prev">
+                <nav class="pf-v5-c-pagination__nav" aria-label="Pagination">
+                    <div class="pf-v5-c-pagination__nav-control pf-m-prev">
                         <button
-                            class="pf-c-button pf-m-plain"
+                            class="pf-v5-c-button pf-m-plain"
                             @click=${() => {
                                 this.pageChangeHandler(this.pages?.previous || 0);
                             }}
@@ -65,9 +65,9 @@ export class TablePagination extends AKElement {
                             <i class="fas fa-angle-left" aria-hidden="true"></i>
                         </button>
                     </div>
-                    <div class="pf-c-pagination__nav-control pf-m-next">
+                    <div class="pf-v5-c-pagination__nav-control pf-m-next">
                         <button
-                            class="pf-c-button pf-m-plain"
+                            class="pf-v5-c-button pf-m-plain"
                             @click=${() => {
                                 this.pageChangeHandler(this.pages?.next || 0);
                             }}
diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts
index 3ad92089a..33cb70a15 100644
--- a/web/src/elements/table/TableSearch.ts
+++ b/web/src/elements/table/TableSearch.ts
@@ -36,7 +36,7 @@ export class TableSearch extends AKElement {
 
     render(): TemplateResult {
         return html`<form
-            class="pf-c-input-group"
+            class="pf-v5-c-input-group"
             method="GET"
             @submit=${(e: Event) => {
                 e.preventDefault();
@@ -48,7 +48,7 @@ export class TableSearch extends AKElement {
             }}
         >
             <input
-                class="pf-c-form-control"
+                class="pf-v5-c-form-control"
                 name="search"
                 type="search"
                 placeholder=${msg("Search...")}
@@ -59,7 +59,7 @@ export class TableSearch extends AKElement {
                 }}
             />
             <button
-                class="pf-c-button pf-m-control"
+                class="pf-v5-c-button pf-m-control"
                 type="reset"
                 @click=${() => {
                     if (!this.onSearch) return;
@@ -68,7 +68,7 @@ export class TableSearch extends AKElement {
             >
                 <i class="fas fa-times" aria-hidden="true"></i>
             </button>
-            <button class="pf-c-button pf-m-control" type="submit">
+            <button class="pf-v5-c-button pf-m-control" type="submit">
                 <i class="fas fa-search" aria-hidden="true"></i>
             </button>
         </form>`;
diff --git a/web/src/elements/user/SessionList.ts b/web/src/elements/user/SessionList.ts
index b0861763d..c3f239ac7 100644
--- a/web/src/elements/user/SessionList.ts
+++ b/web/src/elements/user/SessionList.ts
@@ -56,7 +56,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
                 });
             }}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+            <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
                 ${msg("Delete")}
             </button>
         </ak-forms-delete-bulk>`;
diff --git a/web/src/elements/user/UserConsentList.ts b/web/src/elements/user/UserConsentList.ts
index 56a59ebe1..6b528aee1 100644
--- a/web/src/elements/user/UserConsentList.ts
+++ b/web/src/elements/user/UserConsentList.ts
@@ -51,7 +51,7 @@ export class UserConsentList extends Table<UserConsent> {
                 });
             }}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+            <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
                 ${msg("Delete")}
             </button>
         </ak-forms-delete-bulk>`;
diff --git a/web/src/elements/wizard/ActionWizardPage.ts b/web/src/elements/wizard/ActionWizardPage.ts
index e1217a6fa..24b8b7b7d 100644
--- a/web/src/elements/wizard/ActionWizardPage.ts
+++ b/web/src/elements/wizard/ActionWizardPage.ts
@@ -90,13 +90,13 @@ export class ActionWizardPage extends WizardPage {
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-l-bullseye">
-            <div class="pf-c-empty-state pf-m-lg">
-                <div class="pf-c-empty-state__content">
-                    <i class="fas fa- fa-cogs pf-c-empty-state__icon" aria-hidden="true"></i>
-                    <h1 class="pf-c-title pf-m-lg">${this.currentStep?.action.displayName}</h1>
-                    <div class="pf-c-empty-state__body">
-                        <ol class="pf-c-progress-stepper pf-m-vertical">
+        return html`<div class="pf-v5-l-bullseye">
+            <div class="pf-v5-c-empty-state pf-m-lg">
+                <div class="pf-v5-c-empty-state__content">
+                    <i class="fas fa- fa-cogs pf-v5-c-empty-state__icon" aria-hidden="true"></i>
+                    <h1 class="pf-v5-c-title pf-m-lg">${this.currentStep?.action.displayName}</h1>
+                    <div class="pf-v5-c-empty-state__body">
+                        <ol class="pf-v5-c-progress-stepper pf-m-vertical">
                             ${this.states.map((state) => {
                                 let cls = "";
                                 switch (state.state) {
@@ -116,19 +116,19 @@ export class ActionWizardPage extends WizardPage {
                                 if (state.idx === this.currentStep?.idx) {
                                     cls += " pf-m-current";
                                 }
-                                return html` <li class="pf-c-progress-stepper__step ${cls}">
-                                    <div class="pf-c-progress-stepper__step-connector">
-                                        <span class="pf-c-progress-stepper__step-icon">
+                                return html` <li class="pf-v5-c-progress-stepper__step ${cls}">
+                                    <div class="pf-v5-c-progress-stepper__step-connector">
+                                        <span class="pf-v5-c-progress-stepper__step-icon">
                                             <i class="fas fa-check-circle" aria-hidden="true"></i>
                                         </span>
                                     </div>
-                                    <div class="pf-c-progress-stepper__step-main">
-                                        <div class="pf-c-progress-stepper__step-title">
+                                    <div class="pf-v5-c-progress-stepper__step-main">
+                                        <div class="pf-v5-c-progress-stepper__step-title">
                                             ${state.action.displayName}
                                         </div>
                                         ${state.action.subText
                                             ? html`<div
-                                                  class="pf-c-progress-stepper__step-description"
+                                                  class="pf-v5-c-progress-stepper__step-description"
                                               >
                                                   ${state.action.subText}
                                               </div>`
diff --git a/web/src/elements/wizard/Wizard.ts b/web/src/elements/wizard/Wizard.ts
index 95fc88a8c..50cc53701 100644
--- a/web/src/elements/wizard/Wizard.ts
+++ b/web/src/elements/wizard/Wizard.ts
@@ -127,11 +127,11 @@ export class Wizard extends ModalButton {
             this.steps = this.steps.concat("ak-wizard-page-action");
             lastPage = currentIndex === this.steps.length - 1;
         }
-        return html`<div class="pf-c-wizard">
-            <div class="pf-c-wizard__header">
+        return html`<div class="pf-v5-c-wizard">
+            <div class="pf-v5-c-wizard__header">
                 ${this.canCancel
                     ? html`<button
-                          class="pf-c-button pf-m-plain pf-c-wizard__close"
+                          class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
                           type="button"
                           aria-label="${msg("Close")}"
                           @click=${() => {
@@ -141,21 +141,21 @@ export class Wizard extends ModalButton {
                           <i class="fas fa-times" aria-hidden="true"></i>
                       </button>`
                     : html``}
-                <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">${this.header}</h1>
-                <p class="pf-c-wizard__description">${this.description}</p>
+                <h1 class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title">${this.header}</h1>
+                <p class="pf-v5-c-wizard__description">${this.description}</p>
             </div>
-            <div class="pf-c-wizard__outer-wrap">
-                <div class="pf-c-wizard__inner-wrap">
-                    <nav class="pf-c-wizard__nav">
-                        <ol class="pf-c-wizard__nav-list">
+            <div class="pf-v5-c-wizard__outer-wrap">
+                <div class="pf-v5-c-wizard__inner-wrap">
+                    <nav class="pf-v5-c-wizard__nav">
+                        <ol class="pf-v5-c-wizard__nav-list">
                             ${this.steps.map((step, idx) => {
                                 const currentIdx = this.currentStep
                                     ? this.steps.indexOf(this.currentStep.slot)
                                     : 0;
                                 return html`
-                                    <li class="pf-c-wizard__nav-item">
+                                    <li class="pf-v5-c-wizard__nav-item">
                                         <button
-                                            class="pf-c-wizard__nav-link ${idx === currentIdx
+                                            class="pf-v5-c-wizard__nav-link ${idx === currentIdx
                                                 ? "pf-m-current"
                                                 : ""}"
                                             ?disabled=${currentIdx < idx}
@@ -177,15 +177,15 @@ export class Wizard extends ModalButton {
                             })}
                         </ol>
                     </nav>
-                    <main class="pf-c-wizard__main">
-                        <div class="pf-c-wizard__main-body">
+                    <main class="pf-v5-c-wizard__main">
+                        <div class="pf-v5-c-wizard__main-body">
                             <slot name=${this.currentStep?.slot || this.steps[0]}></slot>
                         </div>
                     </main>
                 </div>
-                <footer class="pf-c-wizard__footer">
+                <footer class="pf-v5-c-wizard__footer">
                     <button
-                        class="pf-c-button pf-m-primary"
+                        class="pf-v5-c-button pf-m-primary"
                         type="submit"
                         ?disabled=${!this.isValid}
                         @click=${async () => {
@@ -212,7 +212,7 @@ export class Wizard extends ModalButton {
                     this.canBack
                         ? html`
                               <button
-                                  class="pf-c-button pf-m-secondary"
+                                  class="pf-v5-c-button pf-m-secondary"
                                   type="button"
                                   @click=${() => {
                                       const prevPage = this.querySelector<WizardPage>(
@@ -228,9 +228,9 @@ export class Wizard extends ModalButton {
                           `
                         : html``}
                     ${this.canCancel
-                        ? html`<div class="pf-c-wizard__footer-cancel">
+                        ? html`<div class="pf-v5-c-wizard__footer-cancel">
                               <button
-                                  class="pf-c-button pf-m-link"
+                                  class="pf-v5-c-button pf-m-link"
                                   type="button"
                                   @click=${() => {
                                       this.reset();
diff --git a/web/src/flow/FlowInspector.ts b/web/src/flow/FlowInspector.ts
index 377fc4ad9..28d6f8dda 100644
--- a/web/src/flow/FlowInspector.ts
+++ b/web/src/flow/FlowInspector.ts
@@ -86,20 +86,20 @@ export class FlowInspector extends AKElement {
     }
 
     renderAccessDenied(): TemplateResult {
-        return html`<div class="pf-c-drawer__body pf-m-no-padding">
-            <div class="pf-c-notification-drawer">
-                <div class="pf-c-notification-drawer__header">
+        return html`<div class="pf-v5-c-drawer__body pf-m-no-padding">
+            <div class="pf-v5-c-notification-drawer">
+                <div class="pf-v5-c-notification-drawer__header">
                     <div class="text">
-                        <h1 class="pf-c-notification-drawer__header-title">
+                        <h1 class="pf-v5-c-notification-drawer__header-title">
                             ${msg("Flow inspector")}
                         </h1>
                     </div>
                 </div>
-                <div class="pf-c-notification-drawer__body">
-                    <div class="pf-l-stack pf-m-gutter">
-                        <div class="pf-l-stack__item">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__body">${this.error?.statusText}</div>
+                <div class="pf-v5-c-notification-drawer__body">
+                    <div class="pf-v5-l-stack pf-m-gutter">
+                        <div class="pf-v5-l-stack__item">
+                            <div class="pf-v5-c-card">
+                                <div class="pf-v5-c-card__body">${this.error?.statusText}</div>
                             </div>
                         </div>
                     </div>
@@ -116,16 +116,16 @@ export class FlowInspector extends AKElement {
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<div class="pf-c-drawer__body pf-m-no-padding">
-            <div class="pf-c-notification-drawer">
-                <div class="pf-c-notification-drawer__header">
+        return html`<div class="pf-v5-c-drawer__body pf-m-no-padding">
+            <div class="pf-v5-c-notification-drawer">
+                <div class="pf-v5-c-notification-drawer__header">
                     <div class="text">
-                        <h1 class="pf-c-notification-drawer__header-title">
+                        <h1 class="pf-v5-c-notification-drawer__header-title">
                             ${msg("Flow inspector")}
                         </h1>
                     </div>
-                    <div class="pf-c-notification-drawer__header-action">
-                        <div class="pf-c-notification-drawer__header-action-close">
+                    <div class="pf-v5-c-notification-drawer__header-action">
+                        <div class="pf-v5-c-notification-drawer__header-action-close">
                             <button
                                 @click=${() => {
                                     this.dispatchEvent(
@@ -135,7 +135,7 @@ export class FlowInspector extends AKElement {
                                         }),
                                     );
                                 }}
-                                class="pf-c-button pf-m-plain"
+                                class="pf-v5-c-button pf-m-plain"
                                 type="button"
                                 aria-label=${msg("Close")}
                             >
@@ -144,56 +144,56 @@ export class FlowInspector extends AKElement {
                         </div>
                     </div>
                 </div>
-                <div class="pf-c-notification-drawer__body">
-                    <div class="pf-l-stack pf-m-gutter">
-                        <div class="pf-l-stack__item">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__header">
-                                    <div class="pf-c-card__title">${msg("Next stage")}</div>
+                <div class="pf-v5-c-notification-drawer__body">
+                    <div class="pf-v5-l-stack pf-m-gutter">
+                        <div class="pf-v5-l-stack__item">
+                            <div class="pf-v5-c-card">
+                                <div class="pf-v5-c-card__header">
+                                    <div class="pf-v5-c-card__title">${msg("Next stage")}</div>
                                 </div>
-                                <div class="pf-c-card__body">
-                                    <dl class="pf-c-description-list">
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
+                                <div class="pf-v5-c-card__body">
+                                    <dl class="pf-v5-c-description-list">
+                                        <div class="pf-v5-c-description-list__group">
+                                            <dt class="pf-v5-c-description-list__term">
+                                                <span class="pf-v5-c-description-list__text"
                                                     >${msg("Stage name")}</span
                                                 >
                                             </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
+                                            <dd class="pf-v5-c-description-list__description">
+                                                <div class="pf-v5-c-description-list__text">
                                                     ${this.state.currentPlan?.nextPlannedStage
                                                         ?.stageObj?.name || "-"}
                                                 </div>
                                             </dd>
                                         </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
+                                        <div class="pf-v5-c-description-list__group">
+                                            <dt class="pf-v5-c-description-list__term">
+                                                <span class="pf-v5-c-description-list__text"
                                                     >${msg("Stage kind")}</span
                                                 >
                                             </dt>
-                                            <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">
+                                            <dd class="pf-v5-c-description-list__description">
+                                                <div class="pf-v5-c-description-list__text">
                                                     ${this.state.currentPlan?.nextPlannedStage
                                                         ?.stageObj?.verboseName || "-"}
                                                 </div>
                                             </dd>
                                         </div>
-                                        <div class="pf-c-description-list__group">
-                                            <dt class="pf-c-description-list__term">
-                                                <span class="pf-c-description-list__text"
+                                        <div class="pf-v5-c-description-list__group">
+                                            <dt class="pf-v5-c-description-list__term">
+                                                <span class="pf-v5-c-description-list__text"
                                                     >${msg("Stage object")}</span
                                                 >
                                             </dt>
-                                            <dd class="pf-c-description-list__description">
+                                            <dd class="pf-v5-c-description-list__description">
                                                 ${this.state.isCompleted
                                                     ? html` <div
-                                                          class="pf-c-description-list__text"
+                                                          class="pf-v5-c-description-list__text"
                                                       >
                                                           ${msg("This flow is completed.")}
                                                       </div>`
                                                     : html`<ak-expand>
-                                                          <pre class="pf-c-description-list__text">
+                                                          <pre class="pf-v5-c-description-list__text">
 ${JSON.stringify(this.getStage(this.state.currentPlan?.nextPlannedStage?.stageObj), null, 4)}</pre
                                                           >
                                                       </ak-expand>`}
@@ -203,31 +203,31 @@ ${JSON.stringify(this.getStage(this.state.currentPlan?.nextPlannedStage?.stageOb
                                 </div>
                             </div>
                         </div>
-                        <div class="pf-l-stack__item">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__header">
-                                    <div class="pf-c-card__title">${msg("Plan history")}</div>
+                        <div class="pf-v5-l-stack__item">
+                            <div class="pf-v5-c-card">
+                                <div class="pf-v5-c-card__header">
+                                    <div class="pf-v5-c-card__title">${msg("Plan history")}</div>
                                 </div>
-                                <div class="pf-c-card__body">
-                                    <ol class="pf-c-progress-stepper pf-m-vertical">
+                                <div class="pf-v5-c-card__body">
+                                    <ol class="pf-v5-c-progress-stepper pf-m-vertical">
                                         ${this.state.plans.map((plan) => {
                                             return html`<li
-                                                class="pf-c-progress-stepper__step pf-m-success"
+                                                class="pf-v5-c-progress-stepper__step pf-m-success"
                                             >
-                                                <div class="pf-c-progress-stepper__step-connector">
-                                                    <span class="pf-c-progress-stepper__step-icon">
+                                                <div class="pf-v5-c-progress-stepper__step-connector">
+                                                    <span class="pf-v5-c-progress-stepper__step-icon">
                                                         <i
                                                             class="fas fa-check-circle"
                                                             aria-hidden="true"
                                                         ></i>
                                                     </span>
                                                 </div>
-                                                <div class="pf-c-progress-stepper__step-main">
-                                                    <div class="pf-c-progress-stepper__step-title">
+                                                <div class="pf-v5-c-progress-stepper__step-main">
+                                                    <div class="pf-v5-c-progress-stepper__step-title">
                                                         ${plan.currentStage.stageObj?.name}
                                                     </div>
                                                     <div
-                                                        class="pf-c-progress-stepper__step-description"
+                                                        class="pf-v5-c-progress-stepper__step-description"
                                                     >
                                                         ${plan.currentStage.stageObj?.verboseName}
                                                     </div>
@@ -237,13 +237,13 @@ ${JSON.stringify(this.getStage(this.state.currentPlan?.nextPlannedStage?.stageOb
                                         ${this.state.currentPlan?.currentStage &&
                                         !this.state.isCompleted
                                             ? html` <li
-                                                  class="pf-c-progress-stepper__step pf-m-current pf-m-info"
+                                                  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
                                               >
                                                   <div
-                                                      class="pf-c-progress-stepper__step-connector"
+                                                      class="pf-v5-c-progress-stepper__step-connector"
                                                   >
                                                       <span
-                                                          class="pf-c-progress-stepper__step-icon"
+                                                          class="pf-v5-c-progress-stepper__step-icon"
                                                       >
                                                           <i
                                                               class="pficon pf-icon-resources-full"
@@ -251,15 +251,15 @@ ${JSON.stringify(this.getStage(this.state.currentPlan?.nextPlannedStage?.stageOb
                                                           ></i>
                                                       </span>
                                                   </div>
-                                                  <div class="pf-c-progress-stepper__step-main">
+                                                  <div class="pf-v5-c-progress-stepper__step-main">
                                                       <div
-                                                          class="pf-c-progress-stepper__step-title"
+                                                          class="pf-v5-c-progress-stepper__step-title"
                                                       >
                                                           ${this.state.currentPlan?.currentStage
                                                               ?.stageObj?.name}
                                                       </div>
                                                       <div
-                                                          class="pf-c-progress-stepper__step-description"
+                                                          class="pf-v5-c-progress-stepper__step-description"
                                                       >
                                                           ${this.state.currentPlan?.currentStage
                                                               ?.stageObj?.verboseName}
@@ -270,24 +270,24 @@ ${JSON.stringify(this.getStage(this.state.currentPlan?.nextPlannedStage?.stageOb
                                         ${this.state.currentPlan?.nextPlannedStage &&
                                         !this.state.isCompleted
                                             ? html`<li
-                                                  class="pf-c-progress-stepper__step pf-m-pending"
+                                                  class="pf-v5-c-progress-stepper__step pf-m-pending"
                                               >
                                                   <div
-                                                      class="pf-c-progress-stepper__step-connector"
+                                                      class="pf-v5-c-progress-stepper__step-connector"
                                                   >
                                                       <span
-                                                          class="pf-c-progress-stepper__step-icon"
+                                                          class="pf-v5-c-progress-stepper__step-icon"
                                                       ></span>
                                                   </div>
-                                                  <div class="pf-c-progress-stepper__step-main">
+                                                  <div class="pf-v5-c-progress-stepper__step-main">
                                                       <div
-                                                          class="pf-c-progress-stepper__step-title"
+                                                          class="pf-v5-c-progress-stepper__step-title"
                                                       >
                                                           ${this.state.currentPlan.nextPlannedStage
                                                               .stageObj?.name}
                                                       </div>
                                                       <div
-                                                          class="pf-c-progress-stepper__step-description"
+                                                          class="pf-v5-c-progress-stepper__step-description"
                                                       >
                                                           ${this.state.currentPlan?.nextPlannedStage
                                                               ?.stageObj?.verboseName}
@@ -299,26 +299,26 @@ ${JSON.stringify(this.getStage(this.state.currentPlan?.nextPlannedStage?.stageOb
                                 </div>
                             </div>
                         </div>
-                        <div class="pf-l-stack__item">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__header">
-                                    <div class="pf-c-card__title">
+                        <div class="pf-v5-l-stack__item">
+                            <div class="pf-v5-c-card">
+                                <div class="pf-v5-c-card__header">
+                                    <div class="pf-v5-c-card__title">
                                         ${msg("Current plan context")}
                                     </div>
                                 </div>
-                                <div class="pf-c-card__body">
+                                <div class="pf-v5-c-card__body">
                                     <pre>
 ${JSON.stringify(this.state.currentPlan?.planContext, null, 4)}</pre
                                     >
                                 </div>
                             </div>
                         </div>
-                        <div class="pf-l-stack__item">
-                            <div class="pf-c-card">
-                                <div class="pf-c-card__header">
-                                    <div class="pf-c-card__title">${msg("Session ID")}</div>
+                        <div class="pf-v5-l-stack__item">
+                            <div class="pf-v5-c-card">
+                                <div class="pf-v5-c-card__header">
+                                    <div class="pf-v5-c-card__title">${msg("Session ID")}</div>
                                 </div>
-                                <div class="pf-c-card__body">
+                                <div class="pf-v5-c-card__body">
                                     <code class="break">${this.state.currentPlan?.sessionId}</code>
                                 </div>
                             </div>
diff --git a/web/src/flow/FormStatic.ts b/web/src/flow/FormStatic.ts
index 77ee93b54..68970f074 100644
--- a/web/src/flow/FormStatic.ts
+++ b/web/src/flow/FormStatic.ts
@@ -21,7 +21,7 @@ export class FormStatic extends AKElement {
             css`
                 /* Form with user */
                 .form-control-static {
-                    margin-top: var(--pf-global--spacer--sm);
+                    margin-top: var(--pf-v5-global--spacer--sm);
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
@@ -31,12 +31,12 @@ export class FormStatic extends AKElement {
                     align-items: center;
                 }
                 .form-control-static img {
-                    margin-right: var(--pf-global--spacer--xs);
+                    margin-right: var(--pf-v5-global--spacer--xs);
                 }
                 .form-control-static a {
-                    padding-top: var(--pf-global--spacer--xs);
-                    padding-bottom: var(--pf-global--spacer--xs);
-                    line-height: var(--pf-global--spacer--xl);
+                    padding-top: var(--pf-v5-global--spacer--xs);
+                    padding-bottom: var(--pf-v5-global--spacer--xs);
+                    line-height: var(--pf-v5-global--spacer--xl);
                 }
             `,
         ];
@@ -50,7 +50,7 @@ export class FormStatic extends AKElement {
             <div class="form-control-static">
                 <div class="avatar">
                     <img
-                        class="pf-c-avatar"
+                        class="pf-v5-c-avatar"
                         src="${ifDefined(this.userAvatar)}"
                         alt="${msg("User's avatar")}"
                     />
diff --git a/web/src/flow/providers/oauth2/DeviceCode.ts b/web/src/flow/providers/oauth2/DeviceCode.ts
index 179952258..81759c8f4 100644
--- a/web/src/flow/providers/oauth2/DeviceCode.ts
+++ b/web/src/flow/providers/oauth2/DeviceCode.ts
@@ -33,12 +33,12 @@ export class OAuth2DeviceCode extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
@@ -47,7 +47,7 @@ export class OAuth2DeviceCode extends BaseStage<
                     <ak-form-element
                         label="${msg("Code")}"
                         ?required="${true}"
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["code"]}
                     >
                         <input
@@ -58,21 +58,21 @@ export class OAuth2DeviceCode extends BaseStage<
                             placeholder="${msg("Please enter your Code")}"
                             autofocus=""
                             autocomplete="off"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             value=""
                             required
                         />
                     </ak-form-element>
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/sources/apple/AppleLoginInit.ts b/web/src/flow/sources/apple/AppleLoginInit.ts
index 339530244..686c88717 100644
--- a/web/src/flow/sources/apple/AppleLoginInit.ts
+++ b/web/src/flow/sources/apple/AppleLoginInit.ts
@@ -52,15 +52,15 @@ export class AppleLoginInit extends BaseStage<AppleLoginChallenge, AppleChalleng
     }
 
     render(): TemplateResult {
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${msg("Authenticating with Apple...")}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${msg("Authenticating with Apple...")}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form">
                     <ak-empty-state ?loading="${true}"> </ak-empty-state>
                     ${!this.isModalShown
                         ? html`<button
-                              class="pf-c-button pf-m-primary pf-m-block"
+                              class="pf-v5-c-button pf-m-primary pf-m-block"
                               @click=${() => {
                                   AppleID.auth.signIn();
                               }}
@@ -70,8 +70,8 @@ export class AppleLoginInit extends BaseStage<AppleLoginChallenge, AppleChalleng
                         : html``}
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/sources/plex/PlexLoginInit.ts b/web/src/flow/sources/plex/PlexLoginInit.ts
index 7ac10a648..0a745815d 100644
--- a/web/src/flow/sources/plex/PlexLoginInit.ts
+++ b/web/src/flow/sources/plex/PlexLoginInit.ts
@@ -66,11 +66,11 @@ export class PlexLoginInit extends BaseStage<
     }
 
     render(): TemplateResult {
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${msg("Authenticating with Plex...")}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${msg("Authenticating with Plex...")}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form">
                     <ak-empty-state
                         ?loading="${true}"
                         header=${msg("Waiting for authentication...")}
@@ -79,7 +79,7 @@ export class PlexLoginInit extends BaseStage<
                     <hr />
                     <p>${msg("If no Plex popup opens, click the button below.")}</p>
                     <button
-                        class="pf-c-button pf-m-block pf-m-primary"
+                        class="pf-v5-c-button pf-m-block pf-m-primary"
                         type="button"
                         @click=${() => {
                             window.open(this.authUrl, "_blank");
@@ -89,8 +89,8 @@ export class PlexLoginInit extends BaseStage<
                     </button>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/RedirectStage.ts b/web/src/flow/stages/RedirectStage.ts
index 50e24d9be..b2e3965d2 100644
--- a/web/src/flow/stages/RedirectStage.ts
+++ b/web/src/flow/stages/RedirectStage.ts
@@ -73,19 +73,19 @@ export class RedirectStage extends BaseStage<RedirectChallenge, FlowChallengeRes
         if (this.startedRedirect || !this.promptUser) {
             return this.renderLoading();
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${msg("Redirect")}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${msg("Redirect")}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form">
-                    <div class="pf-c-form__group">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form">
+                    <div class="pf-v5-c-form__group">
                         <p>${msg("You're about to be redirect to the following URL.")}</p>
                         <code>${this.getURL()}</code>
                     </div>
-                    <div class="pf-c-form__group pf-m-action">
+                    <div class="pf-v5-c-form__group pf-m-action">
                         <a
                             type="submit"
-                            class="pf-c-button pf-m-primary pf-m-block"
+                            class="pf-v5-c-button pf-m-primary pf-m-block"
                             href=${this.challenge.to}
                             @click=${() => {
                                 this.startedRedirect = true;
@@ -96,8 +96,8 @@ export class RedirectStage extends BaseStage<RedirectChallenge, FlowChallengeRes
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer> `;
     }
 }
diff --git a/web/src/flow/stages/access_denied/AccessDeniedStage.ts b/web/src/flow/stages/access_denied/AccessDeniedStage.ts
index b73cbdee9..7d8f1d17f 100644
--- a/web/src/flow/stages/access_denied/AccessDeniedStage.ts
+++ b/web/src/flow/stages/access_denied/AccessDeniedStage.ts
@@ -45,11 +45,11 @@ export class AccessDeniedIcon extends AKElement {
     }
 
     render(): TemplateResult {
-        return html` <div class="pf-c-form__group">
+        return html` <div class="pf-v5-c-form__group">
             <p class="big-icon">
                 <i class="pf-icon pf-icon-error-circle-o"></i>
             </p>
-            <h3 class="pf-c-title pf-m-3xl reason">${msg("Request has been denied.")}</h3>
+            <h3 class="pf-v5-c-title pf-m-3xl reason">${msg("Request has been denied.")}</h3>
             ${this.errorMessage
                 ? html`<hr />
                       <p>${this.errorMessage}</p>`
@@ -72,13 +72,13 @@ export class AccessDeniedStage extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form">
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -94,8 +94,8 @@ export class AccessDeniedStage extends BaseStage<
                     </ak-stage-access-denied-icon>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
index 2a8cd82c8..e1bdf2234 100644
--- a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
+++ b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
@@ -66,18 +66,18 @@ export class AuthenticatorDuoStage extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -98,10 +98,10 @@ export class AuthenticatorDuoStage extends BaseStage<
                     </p>
                     <a href=${this.challenge.activationCode}>${msg("Duo activation")}</a>
 
-                    <div class="pf-c-form__group pf-m-action">
+                    <div class="pf-v5-c-form__group pf-m-action">
                         <button
                             type="button"
-                            class="pf-c-button pf-m-primary pf-m-block"
+                            class="pf-v5-c-button pf-m-primary pf-m-block"
                             @click=${() => {
                                 this.checkEnrollStatus();
                             }}
@@ -111,8 +111,8 @@ export class AuthenticatorDuoStage extends BaseStage<
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts b/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts
index 82b09ba03..b31eeeae8 100644
--- a/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts
+++ b/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts
@@ -31,18 +31,18 @@ export class AuthenticatorSMSStage extends BaseStage<
     }
 
     renderPhoneNumber(): TemplateResult {
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -55,7 +55,7 @@ export class AuthenticatorSMSStage extends BaseStage<
                     <ak-form-element
                         label="${msg("Phone number")}"
                         ?required="${true}"
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["phone_number"]}
                     >
                         <input
@@ -64,7 +64,7 @@ export class AuthenticatorSMSStage extends BaseStage<
                             placeholder="${msg("Please enter your Phone number.")}"
                             autofocus=""
                             autocomplete="tel"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             required
                         />
                     </ak-form-element>
@@ -73,31 +73,31 @@ export class AuthenticatorSMSStage extends BaseStage<
                               this.challenge?.responseErrors?.non_field_errors || [],
                           )
                         : html``}
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 
     renderCode(): TemplateResult {
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -110,7 +110,7 @@ export class AuthenticatorSMSStage extends BaseStage<
                     <ak-form-element
                         label="${msg("Code")}"
                         ?required="${true}"
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["code"]}
                     >
                         <!-- @ts-ignore -->
@@ -122,7 +122,7 @@ export class AuthenticatorSMSStage extends BaseStage<
                             placeholder="${msg("Please enter the code you received via SMS")}"
                             autofocus=""
                             autocomplete="one-time-code"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             required
                         />
                     </ak-form-element>
@@ -131,15 +131,15 @@ export class AuthenticatorSMSStage extends BaseStage<
                               this.challenge?.responseErrors?.non_field_errors || [],
                           )
                         : html``}
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 
diff --git a/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts
index a9975e873..017ab67b9 100644
--- a/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts
+++ b/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts
@@ -40,10 +40,10 @@ export class AuthenticatorStaticStage extends BaseStage<
                     columns: 2;
                     -webkit-columns: 2;
                     -moz-columns: 2;
-                    margin-left: var(--pf-global--spacer--xs);
+                    margin-left: var(--pf-v5-global--spacer--xs);
                 }
                 ul li {
-                    font-size: var(--pf-global--FontSize--2xl);
+                    font-size: var(--pf-v5-global--FontSize--2xl);
                     font-family: monospace;
                     margin: 0 2rem;
                 }
@@ -56,18 +56,18 @@ export class AuthenticatorStaticStage extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -77,7 +77,7 @@ export class AuthenticatorStaticStage extends BaseStage<
                             >
                         </div>
                     </ak-form-static>
-                    <ak-form-element label="" class="pf-c-form__group">
+                    <ak-form-element label="" class="pf-v5-c-form__group">
                         <ul>
                             ${this.challenge.codes.map((token) => {
                                 return html`<li>${token}</li>`;
@@ -86,15 +86,15 @@ export class AuthenticatorStaticStage extends BaseStage<
                     </ak-form-element>
                     <p>${msg("Make sure to keep these tokens in a safe place.")}</p>
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
index 38030c10a..0a33fdbb6 100644
--- a/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+++ b/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts
@@ -51,18 +51,18 @@ export class AuthenticatorTOTPStage extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -78,7 +78,7 @@ export class AuthenticatorTOTPStage extends BaseStage<
                             <qr-code data="${this.challenge.configUrl}"></qr-code>
                             <button
                                 type="button"
-                                class="pf-c-button pf-m-secondary pf-m-progress pf-m-in-progress"
+                                class="pf-v5-c-button pf-m-secondary pf-m-progress pf-m-in-progress"
                                 @click=${(e: Event) => {
                                     e.preventDefault();
                                     if (!this.challenge?.configUrl) return;
@@ -99,7 +99,7 @@ export class AuthenticatorTOTPStage extends BaseStage<
                                         });
                                 }}
                             >
-                                <span class="pf-c-button__progress"
+                                <span class="pf-v5-c-button__progress"
                                     ><i class="fas fa-copy"></i
                                 ></span>
                                 ${msg("Copy")}
@@ -109,7 +109,7 @@ export class AuthenticatorTOTPStage extends BaseStage<
                     <ak-form-element
                         label="${msg("Code")}"
                         ?required="${true}"
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["code"]}
                     >
                         <!-- @ts-ignore -->
@@ -121,20 +121,20 @@ export class AuthenticatorTOTPStage extends BaseStage<
                             placeholder="${msg("Please enter your TOTP Code")}"
                             autofocus=""
                             autocomplete="one-time-code"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             required
                         />
                     </ak-form-element>
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
index 351b890d6..a0775a1ab 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
+++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts
@@ -150,7 +150,7 @@ export class AuthenticatorValidateStage
             ${this.challenge?.deviceChallenges.map((challenges) => {
                 return html`<li>
                     <button
-                        class="pf-c-button authenticator-button"
+                        class="pf-v5-c-button authenticator-button"
                         type="button"
                         @click=${() => {
                             this.selectedDeviceChallenge = challenges;
@@ -168,7 +168,7 @@ export class AuthenticatorValidateStage
             ${this.challenge?.configurationStages.map((stage) => {
                 return html`<li>
                     <button
-                        class="pf-c-button authenticator-button"
+                        class="pf-v5-c-button authenticator-button"
                         type="button"
                         @click=${() => {
                             this.submit({
@@ -243,15 +243,15 @@ export class AuthenticatorValidateStage
             );
             this.selectedDeviceChallenge = totpChallenge;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
             ${this.selectedDeviceChallenge
                 ? this.renderDeviceChallenge()
-                : html`<div class="pf-c-login__main-body">
-                          <form class="pf-c-form">
+                : html`<div class="pf-v5-c-login__main-body">
+                          <form class="pf-v5-c-form">
                               <ak-form-static
-                                  class="pf-c-form__group"
+                                  class="pf-v5-c-form__group"
                                   userAvatar="${this.challenge.pendingUserAvatar}"
                                   user=${this.challenge.pendingUser}
                               >
@@ -276,8 +276,8 @@ export class AuthenticatorValidateStage
                           </form>
                           ${this.renderDevicePicker()}
                       </div>
-                      <footer class="pf-c-login__main-footer">
-                          <ul class="pf-c-login__main-footer-links"></ul>
+                      <footer class="pf-v5-c-login__main-footer">
+                          <ul class="pf-v5-c-login__main-footer-links"></ul>
                       </footer>`}`;
     }
 }
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
index 183c1ce20..f09bc6956 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
+++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
@@ -61,15 +61,15 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<div class="pf-c-login__main-body">
+        return html`<div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -99,7 +99,7 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
                             ? msg("Static token")
                             : msg("Authentication code")}"
                         ?required="${true}"
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["code"]}
                     >
                         <!-- @ts-ignore -->
@@ -117,25 +117,25 @@ export class AuthenticatorValidateStageWebCode extends BaseStage<
                             placeholder="${msg("Please enter your code")}"
                             autofocus=""
                             autocomplete="one-time-code"
-                            class="pf-c-form-control"
+                            class="pf-v5-c-form-control"
                             value="${PasswordManagerPrefill.totp || ""}"
                             required
                         />
                     </ak-form-element>
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links">
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links">
                     ${this.showBackButton
-                        ? html`<li class="pf-c-login__main-footer-links-item">
+                        ? html`<li class="pf-v5-c-login__main-footer-links-item">
                               <button
-                                  class="pf-c-button pf-m-secondary pf-m-block"
+                                  class="pf-v5-c-button pf-m-secondary pf-m-block"
                                   @click=${() => {
                                       if (!this.host) return;
                                       (
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
index 23d9e68f3..2f54882ef 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
+++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
@@ -49,15 +49,15 @@ export class AuthenticatorValidateStageWebDuo extends BaseStage<
             </ak-empty-state>`;
         }
         const errors = this.challenge.responseErrors?.duo || [];
-        return html`<div class="pf-c-login__main-body">
+        return html`<div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -81,12 +81,12 @@ export class AuthenticatorValidateStageWebDuo extends BaseStage<
                         : html`${msg("Sending Duo push notification")}`}
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links">
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links">
                     ${this.showBackButton
-                        ? html`<li class="pf-c-login__main-footer-links-item">
+                        ? html`<li class="pf-v5-c-login__main-footer-links-item">
                               <button
-                                  class="pf-c-button pf-m-secondary pf-m-block"
+                                  class="pf-v5-c-button pf-m-secondary pf-m-block"
                                   @click=${() => {
                                       if (!this.host) return;
                                       (
diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
index fdb749981..80d36287b 100644
--- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
+++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
@@ -110,12 +110,12 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-login__main-body">
+        return html`<div class="pf-v5-c-login__main-body">
                 ${this.authenticateMessage
-                    ? html`<div class="pf-c-form__group pf-m-action">
+                    ? html`<div class="pf-v5-c-form__group pf-m-action">
                           <p class="pf-m-block">${this.authenticateMessage}</p>
                           <button
-                              class="pf-c-button pf-m-primary pf-m-block"
+                              class="pf-v5-c-button pf-m-primary pf-m-block"
                               @click=${() => {
                                   this.authenticateWrapper();
                               }}
@@ -123,18 +123,18 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage<
                               ${msg("Retry authentication")}
                           </button>
                       </div>`
-                    : html`<div class="pf-c-form__group pf-m-action">
+                    : html`<div class="pf-v5-c-form__group pf-m-action">
                           <p class="pf-m-block">&nbsp;</p>
                           <p class="pf-m-block">&nbsp;</p>
                           <p class="pf-m-block">&nbsp;</p>
                       </div> `}
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links">
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links">
                     ${this.showBackButton
-                        ? html`<li class="pf-c-login__main-footer-links-item">
+                        ? html`<li class="pf-v5-c-login__main-footer-links-item">
                               <button
-                                  class="pf-c-button pf-m-secondary pf-m-block"
+                                  class="pf-v5-c-button pf-m-secondary pf-m-block"
                                   @click=${() => {
                                       if (!this.host) return;
                                       (
diff --git a/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts b/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
index a82f10bce..9a25263ce 100644
--- a/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
+++ b/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
@@ -101,22 +101,22 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage<
     }
 
     render(): TemplateResult {
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">
                     ${this.challenge?.flowInfo?.title}
                 </h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 ${
                     this.registerRunning
-                        ? html`<div class="pf-c-empty-state__content">
-                              <div class="pf-l-bullseye">
-                                  <div class="pf-l-bullseye__item">
+                        ? html`<div class="pf-v5-c-empty-state__content">
+                              <div class="pf-v5-l-bullseye">
+                                  <div class="pf-v5-l-bullseye__item">
                                       <ak-spinner size="${PFSize.XLarge}"></ak-spinner>
                                   </div>
                               </div>
                           </div>`
-                        : html` <div class="pf-c-form__group pf-m-action">
+                        : html` <div class="pf-v5-c-form__group pf-m-action">
                               ${this.challenge?.responseErrors
                                   ? html`<p class="pf-m-block">
                                         ${this.challenge.responseErrors["response"][0].string}
@@ -124,7 +124,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage<
                                   : html``}
                               <p class="pf-m-block">${this.registerMessage}</p>
                               <button
-                                  class="pf-c-button pf-m-primary pf-m-block"
+                                  class="pf-v5-c-button pf-m-primary pf-m-block"
                                   @click=${() => {
                                       this.registerWrapper();
                                   }}
@@ -135,8 +135,8 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage<
                 }
             </div>
         </div>
-        <footer class="pf-c-login__main-footer">
-            <ul class="pf-c-login__main-footer-links">
+        <footer class="pf-v5-c-login__main-footer">
+            <ul class="pf-v5-c-login__main-footer-links">
             </ul>
         </footer>`;
     }
diff --git a/web/src/flow/stages/autosubmit/AutosubmitStage.ts b/web/src/flow/stages/autosubmit/AutosubmitStage.ts
index 742d23618..22a102a82 100644
--- a/web/src/flow/stages/autosubmit/AutosubmitStage.ts
+++ b/web/src/flow/stages/autosubmit/AutosubmitStage.ts
@@ -38,11 +38,11 @@ export class AutosubmitStage extends BaseStage<
         if (this.challenge.title && this.challenge.title !== "") {
             title = this.challenge.title;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form" action="${this.challenge.url}" method="POST">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form" action="${this.challenge.url}" method="POST">
                     ${Object.entries(this.challenge.attrs).map(([key, value]) => {
                         return html`<input
                             type="hidden"
@@ -51,15 +51,15 @@ export class AutosubmitStage extends BaseStage<
                         />`;
                     })}
                     <ak-empty-state ?loading="${true}"> </ak-empty-state>
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/base.ts b/web/src/flow/stages/base.ts
index 90a568592..393acdbd6 100644
--- a/web/src/flow/stages/base.ts
+++ b/web/src/flow/stages/base.ts
@@ -56,13 +56,13 @@ export class BaseStage<Tin, Tout> extends AKElement {
         if (!errors) {
             return html``;
         }
-        return html`<div class="pf-c-form__alert">
+        return html`<div class="pf-v5-c-form__alert">
             ${errors.map((err) => {
-                return html`<div class="pf-c-alert pf-m-inline pf-m-danger">
-                    <div class="pf-c-alert__icon">
+                return html`<div class="pf-v5-c-alert pf-m-inline pf-m-danger">
+                    <div class="pf-v5-c-alert__icon">
                         <i class="fas fa-exclamation-circle"></i>
                     </div>
-                    <h4 class="pf-c-alert__title">${err.string}</h4>
+                    <h4 class="pf-v5-c-alert__title">${err.string}</h4>
                 </div>`;
             })}
         </div>`;
diff --git a/web/src/flow/stages/captcha/CaptchaStage.ts b/web/src/flow/stages/captcha/CaptchaStage.ts
index 7690fc626..4569f3287 100644
--- a/web/src/flow/stages/captcha/CaptchaStage.ts
+++ b/web/src/flow/stages/captcha/CaptchaStage.ts
@@ -127,13 +127,13 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form">
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -151,8 +151,8 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
                           </div>`}
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/consent/ConsentStage.ts b/web/src/flow/stages/consent/ConsentStage.ts
index ced544b4b..23265a2e8 100644
--- a/web/src/flow/stages/consent/ConsentStage.ts
+++ b/web/src/flow/stages/consent/ConsentStage.ts
@@ -39,16 +39,16 @@ export class ConsentStage extends BaseStage<ConsentChallenge, ConsentChallengeRe
 
     renderNoPrevious(): TemplateResult {
         return html`
-            <div class="pf-c-form__group">
-                <h3 id="header-text" class="pf-c-title pf-m-xl pf-u-mb-xl">
+            <div class="pf-v5-c-form__group">
+                <h3 id="header-text" class="pf-v5-c-title pf-m-xl pf-v5-u-mb-xl">
                     ${this.challenge.headerText}
                 </h3>
                 ${this.challenge.permissions.length > 0
                     ? html`
-                          <p class="pf-u-mb-sm">
+                          <p class="pf-v5-u-mb-sm">
                               ${msg("Application requires following permissions:")}
                           </p>
-                          <ul class="pf-c-list" id="permissions">
+                          <ul class="pf-v5-c-list" id="permissions">
                               ${this.renderPermissions(this.challenge.permissions)}
                           </ul>
                       `
@@ -59,28 +59,28 @@ export class ConsentStage extends BaseStage<ConsentChallenge, ConsentChallengeRe
 
     renderAdditional(): TemplateResult {
         return html`
-            <div class="pf-c-form__group">
-                <h3 id="header-text" class="pf-c-title pf-m-xl pf-u-mb-xl">
+            <div class="pf-v5-c-form__group">
+                <h3 id="header-text" class="pf-v5-c-title pf-m-xl pf-v5-u-mb-xl">
                     ${this.challenge.headerText}
                 </h3>
                 ${this.challenge.permissions.length > 0
                     ? html`
-                          <p class="pf-u-mb-sm">
+                          <p class="pf-v5-u-mb-sm">
                               ${msg("Application already has access to the following permissions:")}
                           </p>
-                          <ul class="pf-c-list" id="permissions">
+                          <ul class="pf-v5-c-list" id="permissions">
                               ${this.renderPermissions(this.challenge.permissions)}
                           </ul>
                       `
                     : html``}
             </div>
-            <div class="pf-c-form__group pf-u-mt-md">
+            <div class="pf-v5-c-form__group pf-v5-u-mt-md">
                 ${this.challenge.additionalPermissions.length > 0
                     ? html`
-                          <strong class="pf-u-mb-sm">
+                          <strong class="pf-v5-u-mb-sm">
                               ${msg("Application requires following new permissions:")}
                           </strong>
-                          <ul class="pf-c-list" id="permissions">
+                          <ul class="pf-v5-c-list" id="permissions">
                               ${this.renderPermissions(this.challenge.additionalPermissions)}
                           </ul>
                       `
@@ -94,12 +94,12 @@ export class ConsentStage extends BaseStage<ConsentChallenge, ConsentChallengeRe
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e, {
                             token: this.challenge.token,
@@ -107,7 +107,7 @@ export class ConsentStage extends BaseStage<ConsentChallenge, ConsentChallengeRe
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -121,15 +121,15 @@ export class ConsentStage extends BaseStage<ConsentChallenge, ConsentChallengeRe
                         ? this.renderAdditional()
                         : this.renderNoPrevious()}
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/dummy/DummyStage.ts b/web/src/flow/stages/dummy/DummyStage.ts
index 7fb5895a1..277b9d618 100644
--- a/web/src/flow/stages/dummy/DummyStage.ts
+++ b/web/src/flow/stages/dummy/DummyStage.ts
@@ -26,25 +26,25 @@ export class DummyStage extends BaseStage<DummyChallenge, DummyChallengeResponse
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/email/EmailStage.ts b/web/src/flow/stages/email/EmailStage.ts
index fe25e5ce5..09413389a 100644
--- a/web/src/flow/stages/email/EmailStage.ts
+++ b/web/src/flow/stages/email/EmailStage.ts
@@ -25,29 +25,29 @@ export class EmailStage extends BaseStage<EmailChallenge, EmailChallengeResponse
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
-                    <div class="pf-c-form__group">
+                    <div class="pf-v5-c-form__group">
                         <p>${msg("Check your Inbox for a verification email.")}</p>
                     </div>
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Send Email again.")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts
index 49b530026..ab3811b99 100644
--- a/web/src/flow/stages/identification/IdentificationStage.ts
+++ b/web/src/flow/stages/identification/IdentificationStage.ts
@@ -46,18 +46,18 @@ export class IdentificationStage extends BaseStage<
     static get styles(): CSSResult[] {
         return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
             /* login page's icons */
-            .pf-c-login__main-footer-links-item button {
+            .pf-v5-c-login__main-footer-links-item button {
                 background-color: transparent;
                 border: 0;
                 display: flex;
                 align-items: stretch;
             }
-            .pf-c-login__main-footer-links-item img {
-                fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
+            .pf-v5-c-login__main-footer-links-item img {
+                fill: var(--pf-v5-c-login__main-footer-links-item-link-svg--Fill);
                 width: 100px;
-                max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
+                max-width: var(--pf-v5-c-login__main-footer-links-item-link-svg--Width);
                 height: 100%;
-                max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
+                max-height: var(--pf-v5-c-login__main-footer-links-item-link-svg--Height);
             }
         `);
     }
@@ -162,16 +162,16 @@ export class IdentificationStage extends BaseStage<
 
     renderSource(source: LoginSource): TemplateResult {
         const icon = renderSourceIcon(source.name, source.iconUrl);
-        return html`<li class="pf-c-login__main-footer-links-item">
+        return html`<li class="pf-v5-c-login__main-footer-links-item">
             <button
                 type="button"
                 @click=${() => {
                     if (!this.host) return;
                     this.host.challenge = source.challenge;
                 }}
-                class=${this.challenge.showSourceLabels ? "pf-c-button pf-m-link" : ""}
+                class=${this.challenge.showSourceLabels ? "pf-v5-c-button pf-m-link" : ""}
             >
-                <span class="pf-c-button__icon pf-m-start">${icon}</span>
+                <span class="pf-v5-c-button__icon pf-m-start">${icon}</span>
                 ${this.challenge.showSourceLabels ? source.name : ""}
             </button>
         </li>`;
@@ -181,15 +181,15 @@ export class IdentificationStage extends BaseStage<
         if (!this.challenge?.enrollUrl && !this.challenge?.recoveryUrl) {
             return html``;
         }
-        return html`<div class="pf-c-login__main-footer-band">
+        return html`<div class="pf-v5-c-login__main-footer-band">
             ${this.challenge.enrollUrl
-                ? html`<p class="pf-c-login__main-footer-band-item">
+                ? html`<p class="pf-v5-c-login__main-footer-band-item">
                       ${msg("Need an account?")}
                       <a id="enroll" href="${this.challenge.enrollUrl}">${msg("Sign up.")}</a>
                   </p>`
                 : html``}
             ${this.challenge.recoveryUrl
-                ? html`<p class="pf-c-login__main-footer-band-item">
+                ? html`<p class="pf-v5-c-login__main-footer-band-item">
                       <a id="recovery" href="${this.challenge.recoveryUrl}"
                           >${msg("Forgot username or password?")}</a
                       >
@@ -217,7 +217,7 @@ export class IdentificationStage extends BaseStage<
         return html`<ak-form-element
                 label=${label}
                 ?required="${true}"
-                class="pf-c-form__group"
+                class="pf-v5-c-form__group"
                 .errors=${(this.challenge.responseErrors || {})["uid_field"]}
             >
                 <input
@@ -226,7 +226,7 @@ export class IdentificationStage extends BaseStage<
                     placeholder=${label}
                     autofocus=""
                     autocomplete="username"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element>
@@ -235,7 +235,7 @@ export class IdentificationStage extends BaseStage<
                       <ak-form-element
                           label="${msg("Password")}"
                           ?required="${true}"
-                          class="pf-c-form__group"
+                          class="pf-v5-c-form__group"
                           .errors=${(this.challenge.responseErrors || {})["password"]}
                       >
                           <input
@@ -243,7 +243,7 @@ export class IdentificationStage extends BaseStage<
                               name="password"
                               placeholder="${msg("Password")}"
                               autocomplete="current-password"
-                              class="pf-c-form-control"
+                              class="pf-v5-c-form-control"
                               required
                               value=${PasswordManagerPrefill.password || ""}
                           />
@@ -253,8 +253,8 @@ export class IdentificationStage extends BaseStage<
             ${"non_field_errors" in (this.challenge?.responseErrors || {})
                 ? this.renderNonFieldErrors(this.challenge?.responseErrors?.non_field_errors || [])
                 : html``}
-            <div class="pf-c-form__group pf-m-action">
-                <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+            <div class="pf-v5-c-form__group pf-m-action">
+                <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                     ${this.challenge.primaryAction}
                 </button>
             </div>
@@ -263,7 +263,7 @@ export class IdentificationStage extends BaseStage<
                       <div>
                           <a
                               href=${this.challenge.passwordlessUrl}
-                              class="pf-c-button pf-m-secondary pf-m-block"
+                              class="pf-v5-c-button pf-m-secondary pf-m-block"
                           >
                               ${msg("Use a security key")}
                           </a>
@@ -276,12 +276,12 @@ export class IdentificationStage extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
@@ -294,8 +294,8 @@ export class IdentificationStage extends BaseStage<
                     ${this.renderInput()}
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links">
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links">
                     ${(this.challenge.sources || []).map((source) => {
                         return this.renderSource(source);
                     })}
diff --git a/web/src/flow/stages/password/PasswordStage.ts b/web/src/flow/stages/password/PasswordStage.ts
index 774a1f5b3..fcc335fd5 100644
--- a/web/src/flow/stages/password/PasswordStage.ts
+++ b/web/src/flow/stages/password/PasswordStage.ts
@@ -35,7 +35,7 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
         this.input.placeholder = msg("Please enter your password");
         this.input.autofocus = true;
         this.input.autocomplete = "current-password";
-        this.input.classList.add("pf-c-form-control");
+        this.input.classList.add("pf-v5-c-form-control");
         this.input.required = true;
         this.input.value = PasswordManagerPrefill.password || "";
         // This is somewhat of a crude way to get autofocus, but in most cases the `autofocus` attribute
@@ -76,18 +76,18 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
                 >
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -106,7 +106,7 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
                     <ak-form-element
                         label="${msg("Password")}"
                         ?required="${true}"
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         .errors=${(this.challenge?.responseErrors || {})["password"]}
                     >
                         ${this.renderInput()}
@@ -118,15 +118,15 @@ export class PasswordStage extends BaseStage<PasswordChallenge, PasswordChalleng
                           >`
                         : ""}
 
-                    <div class="pf-c-form__group pf-m-action">
-                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+                    <div class="pf-v5-c-form__group pf-m-action">
+                        <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                             ${msg("Continue")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/prompt/PromptStage.ts b/web/src/flow/stages/prompt/PromptStage.ts
index 877d02119..9ed8d1262 100644
--- a/web/src/flow/stages/prompt/PromptStage.ts
+++ b/web/src/flow/stages/prompt/PromptStage.ts
@@ -57,7 +57,7 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
                     autocomplete="off"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -66,7 +66,7 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
                     autocomplete="off"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                 >
 ${prompt.initialValue}</textarea
@@ -76,7 +76,7 @@ ${prompt.initialValue}</textarea
                     type="text"
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?readonly=${true}
                     value="${prompt.initialValue}"
                 />`;
@@ -84,7 +84,7 @@ ${prompt.initialValue}</textarea
                 return html`<textarea
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     readonly
                 >
 ${prompt.initialValue}</textarea
@@ -95,7 +95,7 @@ ${prompt.initialValue}</textarea
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
                     autocomplete="username"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -104,7 +104,7 @@ ${prompt.initialValue}</textarea
                     type="email"
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -114,7 +114,7 @@ ${prompt.initialValue}</textarea
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
                     autocomplete="new-password"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                 />`;
             case PromptTypeEnum.Number:
@@ -122,7 +122,7 @@ ${prompt.initialValue}</textarea
                     type="number"
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -131,7 +131,7 @@ ${prompt.initialValue}</textarea
                     type="date"
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -140,7 +140,7 @@ ${prompt.initialValue}</textarea
                     type="datetime"
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -149,7 +149,7 @@ ${prompt.initialValue}</textarea
                     type="file"
                     name="${prompt.fieldKey}"
                     placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                     value="${prompt.initialValue}"
                 />`;
@@ -160,13 +160,13 @@ ${prompt.initialValue}</textarea
                     type="hidden"
                     name="${prompt.fieldKey}"
                     value="${prompt.initialValue}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     ?required=${prompt.required}
                 />`;
             case PromptTypeEnum.Static:
                 return html`<p>${unsafeHTML(prompt.initialValue)}</p>`;
             case PromptTypeEnum.Dropdown:
-                return html`<select class="pf-c-form-control" name="${prompt.fieldKey}">
+                return html`<select class="pf-v5-c-form-control" name="${prompt.fieldKey}">
                     ${prompt.choices?.map((choice) => {
                         return html`<option
                             value="${choice}"
@@ -179,17 +179,17 @@ ${prompt.initialValue}</textarea
             case PromptTypeEnum.RadioButtonGroup:
                 return html`${(prompt.choices || []).map((choice) => {
                     const id = `${prompt.fieldKey}-${choice}`;
-                    return html`<div class="pf-c-check">
+                    return html`<div class="pf-v5-c-check">
                         <input
                             type="radio"
-                            class="pf-c-check__input"
+                            class="pf-v5-c-check__input"
                             name="${prompt.fieldKey}"
                             id="${id}"
                             ?checked="${prompt.initialValue === choice}"
                             ?required="${prompt.required}"
                             value="${choice}"
                         />
-                        <label class="pf-c-check__label" for=${id}>${choice}</label>
+                        <label class="pf-v5-c-check__label" for=${id}>${choice}</label>
                     </div> `;
                 })}`;
             case PromptTypeEnum.AkLocale: {
@@ -209,7 +209,7 @@ ${prompt.initialValue}</textarea
                         </option> `,
                 );
 
-                return html`<select class="pf-c-form-control" name="${prompt.fieldKey}">
+                return html`<select class="pf-v5-c-form-control" name="${prompt.fieldKey}">
                     <option value="" ?selected=${prompt.initialValue === ""}>
                         ${msg("Auto-detect (based on your browser)")}
                     </option>
@@ -225,7 +225,7 @@ ${prompt.initialValue}</textarea
         if (prompt.subText === "") {
             return html``;
         }
-        return html`<p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>`;
+        return html`<p class="pf-v5-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>`;
     }
 
     shouldRenderInWrapper(prompt: StagePrompt): boolean {
@@ -243,27 +243,27 @@ ${prompt.initialValue}</textarea
     renderField(prompt: StagePrompt): TemplateResult {
         // Checkbox is rendered differently
         if (prompt.type === PromptTypeEnum.Checkbox) {
-            return html`<div class="pf-c-check">
+            return html`<div class="pf-v5-c-check">
                 <input
                     type="checkbox"
-                    class="pf-c-check__input"
+                    class="pf-v5-c-check__input"
                     id="${prompt.fieldKey}"
                     name="${prompt.fieldKey}"
                     ?checked=${prompt.initialValue !== ""}
                     ?required=${prompt.required}
                 />
-                <label class="pf-c-check__label" for="${prompt.fieldKey}">${prompt.label}</label>
+                <label class="pf-v5-c-check__label" for="${prompt.fieldKey}">${prompt.label}</label>
                 ${prompt.required
-                    ? html`<p class="pf-c-form__helper-text">${msg("Required.")}</p>`
+                    ? html`<p class="pf-v5-c-form__helper-text">${msg("Required.")}</p>`
                     : html``}
-                <p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>
+                <p class="pf-v5-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>
             </div>`;
         }
         if (this.shouldRenderInWrapper(prompt)) {
             return html`<ak-form-element
                 label="${prompt.label}"
                 ?required="${prompt.required}"
-                class="pf-c-form__group"
+                class="pf-v5-c-form__group"
                 .errors=${(this.challenge?.responseErrors || {})[prompt.fieldKey]}
             >
                 ${this.renderPromptInner(prompt)} ${this.renderPromptHelpText(prompt)}
@@ -273,8 +273,8 @@ ${prompt.initialValue}</textarea
     }
 
     renderContinue(): TemplateResult {
-        return html` <div class="pf-c-form__group pf-m-action">
-            <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
+        return html` <div class="pf-v5-c-form__group pf-m-action">
+            <button type="submit" class="pf-v5-c-button pf-m-primary pf-m-block">
                 ${msg("Continue")}
             </button>
         </div>`;
@@ -285,12 +285,12 @@ ${prompt.initialValue}</textarea
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
+            <div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
@@ -306,8 +306,8 @@ ${prompt.initialValue}</textarea
                     ${this.renderContinue()}
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/flow/stages/user_login/UserLoginStage.ts b/web/src/flow/stages/user_login/UserLoginStage.ts
index b42961c9d..d079e0d8f 100644
--- a/web/src/flow/stages/user_login/UserLoginStage.ts
+++ b/web/src/flow/stages/user_login/UserLoginStage.ts
@@ -32,13 +32,13 @@ export class PasswordStage extends BaseStage<
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<header class="pf-c-login__main-header">
-                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
+        return html`<header class="pf-v5-c-login__main-header">
+                <h1 class="pf-v5-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
             </header>
-            <div class="pf-c-login__main-body">
-                <form class="pf-c-form">
+            <div class="pf-v5-c-login__main-body">
+                <form class="pf-v5-c-form">
                     <ak-form-static
-                        class="pf-c-form__group"
+                        class="pf-v5-c-form__group"
                         userAvatar="${this.challenge.pendingUserAvatar}"
                         user=${this.challenge.pendingUser}
                     >
@@ -48,25 +48,25 @@ export class PasswordStage extends BaseStage<
                             >
                         </div>
                     </ak-form-static>
-                    <div class="pf-c-form__group">
-                        <h3 id="header-text" class="pf-c-title pf-m-xl pf-u-mb-xl">
+                    <div class="pf-v5-c-form__group">
+                        <h3 id="header-text" class="pf-v5-c-title pf-m-xl pf-v5-u-mb-xl">
                             ${msg("Stay signed in?")}
                         </h3>
-                        <p class="pf-u-mb-sm">
+                        <p class="pf-v5-u-mb-sm">
                             ${msg(
                                 "Select Yes to reduce the number of times you're asked to sign in.",
                             )}
                         </p>
                     </div>
 
-                    <div class="pf-c-form__group pf-m-action">
+                    <div class="pf-v5-c-form__group pf-m-action">
                         <button
                             @click=${(e: Event) => {
                                 this.submitForm(e, {
                                     rememberMe: true,
                                 });
                             }}
-                            class="pf-c-button pf-m-primary"
+                            class="pf-v5-c-button pf-m-primary"
                         >
                             ${msg("Yes")}
                         </button>
@@ -76,15 +76,15 @@ export class PasswordStage extends BaseStage<
                                     rememberMe: false,
                                 });
                             }}
-                            class="pf-c-button pf-m-secondary"
+                            class="pf-v5-c-button pf-m-secondary"
                         >
                             ${msg("No")}
                         </button>
                     </div>
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/standalone/api-browser/index.ts b/web/src/standalone/api-browser/index.ts
index b0c5849ed..7ae7a00d6 100644
--- a/web/src/standalone/api-browser/index.ts
+++ b/web/src/standalone/api-browser/index.ts
@@ -41,9 +41,9 @@ export class APIBrowser extends Interface {
             const style = getComputedStyle(document.documentElement);
             if (ev.detail === UiThemeEnum.Light) {
                 this.bgColor = style
-                    .getPropertyValue("--pf-global--BackgroundColor--light-300")
+                    .getPropertyValue("--pf-v5-global--BackgroundColor--light-300")
                     .trim();
-                this.textColor = style.getPropertyValue("--pf-global--Color--300").trim();
+                this.textColor = style.getPropertyValue("--pf-v5-global--Color--300").trim();
             } else {
                 this.bgColor = style.getPropertyValue("--ak-dark-background").trim();
                 this.textColor = style.getPropertyValue("--ak-dark-foreground").trim();
diff --git a/web/src/standalone/loading/index.ts b/web/src/standalone/loading/index.ts
index 907a05140..a58bc15bf 100644
--- a/web/src/standalone/loading/index.ts
+++ b/web/src/standalone/loading/index.ts
@@ -34,20 +34,20 @@ export class Loading extends Interface {
 
     render(): TemplateResult {
         return html` <section
-            class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl"
+            class="ak-static-page pf-v5-c-page__main-section pf-m-no-padding-mobile pf-m-xl"
         >
-            <div class="pf-c-empty-state" style="height: 100vh;">
-                <div class="pf-c-empty-state__content">
+            <div class="pf-v5-c-empty-state" style="height: 100vh;">
+                <div class="pf-v5-c-empty-state__content">
                     <span
-                        class="pf-c-spinner pf-m-xl"
+                        class="pf-v5-c-spinner pf-m-xl"
                         role="progressbar"
                         aria-valuetext="${msg("Loading...")}"
                     >
-                        <span class="pf-c-spinner__clipper"></span>
-                        <span class="pf-c-spinner__lead-ball"></span>
-                        <span class="pf-c-spinner__tail-ball"></span>
+                        <span class="pf-v5-c-spinner__clipper"></span>
+                        <span class="pf-v5-c-spinner__lead-ball"></span>
+                        <span class="pf-v5-c-spinner__tail-ball"></span>
                     </span>
-                    <h1 class="pf-c-title pf-m-lg">${msg("Loading...")}</h1>
+                    <h1 class="pf-v5-c-title pf-m-lg">${msg("Loading...")}</h1>
                 </div>
             </div>
         </section>`;
diff --git a/web/src/user/LibraryPage/ApplicationEmptyState.ts b/web/src/user/LibraryPage/ApplicationEmptyState.ts
index 11871c139..748054453 100644
--- a/web/src/user/LibraryPage/ApplicationEmptyState.ts
+++ b/web/src/user/LibraryPage/ApplicationEmptyState.ts
@@ -46,15 +46,15 @@ export class LibraryPageApplicationEmptyList extends AKElement {
             createForm: true,
         });
         return html`
-            <div class="pf-u-pt-lg">
+            <div class="pf-v5-u-pt-lg">
                 <a
                     aria-disabled="false"
-                    class="cta pf-c-button pf-m-secondary"
+                    class="cta pf-v5-c-button pf-m-secondary"
                     href="/if/admin/${href}"
                     >${msg("Create a new application")}</a
                 >
             </div>
-            <div class="pf-c-empty-state__body">
+            <div class="pf-v5-c-empty-state__body">
                 <a href="${docLink("/docs/applications")}" target="_blank"
                     >${msg("Refer to documentation")}</a
                 >
@@ -63,11 +63,11 @@ export class LibraryPageApplicationEmptyList extends AKElement {
     }
 
     render() {
-        return html` <div class="pf-c-empty-state pf-m-full-height">
-            <div class="pf-c-empty-state__content">
-                <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
-                <h1 class="pf-c-title pf-m-lg">${msg("No Applications available.")}</h1>
-                <div class="pf-c-empty-state__body">
+        return html` <div class="pf-v5-c-empty-state pf-m-full-height">
+            <div class="pf-v5-c-empty-state__content">
+                <i class="fas fa-cubes pf-v5-c-empty-state__icon" aria-hidden="true"></i>
+                <h1 class="pf-v5-c-title pf-m-lg">${msg("No Applications available.")}</h1>
+                <div class="pf-v5-c-empty-state__body">
                     ${msg("Either no applications are defined, or you don’t have access to any.")}
                 </div>
                 ${this.isAdmin ? this.renderNewAppButton() : html``}
diff --git a/web/src/user/LibraryPage/ApplicationList.ts b/web/src/user/LibraryPage/ApplicationList.ts
index 7b680d8ca..123c93021 100644
--- a/web/src/user/LibraryPage/ApplicationList.ts
+++ b/web/src/user/LibraryPage/ApplicationList.ts
@@ -72,16 +72,16 @@ export class LibraryPageApplicationList extends AKElement {
     render() {
         const [groupClass, groupGrid] = this.currentLayout;
 
-        return html`<div class="pf-l-grid pf-m-gutter">
+        return html`<div class="pf-v5-l-grid pf-m-gutter">
             ${this.apps.map(([group, apps]: AppGroupEntry) => {
-                return html`<div class="pf-l-grid__item ${groupClass}">
-                    <div class="pf-c-content app-group-header">
+                return html`<div class="pf-v5-l-grid__item ${groupClass}">
+                    <div class="pf-v5-c-content app-group-header">
                         <h2>${group}</h2>
                     </div>
-                    <div class="pf-l-grid pf-m-gutter ${groupGrid}">
+                    <div class="pf-v5-l-grid pf-m-gutter ${groupGrid}">
                         ${apps.map((app: Application) => {
                             return html`<ak-library-app
-                                class="pf-l-grid__item"
+                                class="pf-v5-l-grid__item"
                                 .application=${app}
                                 background=${ifDefined(this.background)}
                                 ?selected=${app.slug === this.selected}
diff --git a/web/src/user/LibraryPage/ApplicationSearch.ts b/web/src/user/LibraryPage/ApplicationSearch.ts
index 8f732eaf7..3c44c3703 100644
--- a/web/src/user/LibraryPage/ApplicationSearch.ts
+++ b/web/src/user/LibraryPage/ApplicationSearch.ts
@@ -129,7 +129,7 @@ export class LibraryPageApplicationList extends AKElement {
             @input=${this.onInput}
             @keydown=${this.onKeyDown}
             type="text"
-            class="pf-u-display-none pf-u-display-block-on-md"
+            class="pf-v5-u-display-none pf-v5-u-display-block-on-md"
             autofocus
             placeholder=${msg("Search...")}
             value=${ifDefined(this.query)}
diff --git a/web/src/user/LibraryPage/LibraryPageImpl.css.ts b/web/src/user/LibraryPage/LibraryPageImpl.css.ts
index 821eb7bfc..a0c320eb7 100644
--- a/web/src/user/LibraryPage/LibraryPageImpl.css.ts
+++ b/web/src/user/LibraryPage/LibraryPageImpl.css.ts
@@ -28,10 +28,10 @@ export const styles = [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent].conca
     .header input:focus {
         outline: 0;
     }
-    .pf-c-page__main {
+    .pf-v5-c-page__main {
         overflow: hidden;
     }
-    .pf-c-page__main-section {
+    .pf-v5-c-page__main-section {
         background-color: transparent;
     }
 `);
diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts
index cd9718066..eff681da1 100644
--- a/web/src/user/user-settings/UserSettingsPage.ts
+++ b/web/src/user/user-settings/UserSettingsPage.ts
@@ -90,19 +90,19 @@ export class UserSettingsPage extends AKElement {
         const pwStage =
             this.userSettings?.filter((stage) => stage.component === "ak-user-settings-password") ||
             [];
-        return html`<div class="pf-c-page">
-            <main role="main" class="pf-c-page__main" tabindex="-1">
+        return html`<div class="pf-v5-c-page">
+            <main role="main" class="pf-v5-c-page__main" tabindex="-1">
                 <ak-tabs ?vertical="${true}">
                     <section
                         slot="page-details"
                         data-tab-title="${msg("User details")}"
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                        class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <div class="pf-l-stack pf-m-gutter">
-                            <div class="pf-l-stack__item">
+                        <div class="pf-v5-l-stack pf-m-gutter">
+                            <div class="pf-v5-l-stack__item">
                                 <ak-user-settings-flow-executor></ak-user-settings-flow-executor>
                             </div>
-                            <div class="pf-l-stack__item">
+                            <div class="pf-v5-l-stack__item">
                                 ${pwStage.length > 0
                                     ? html`<ak-user-settings-password
                                           configureUrl=${ifDefined(pwStage[0].configureUrl)}
@@ -114,7 +114,7 @@ export class UserSettingsPage extends AKElement {
                     <section
                         slot="page-sessions"
                         data-tab-title="${msg("Sessions")}"
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                        class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                     >
                         <div class="pf-c-card">
                             <div class="pf-c-card__body">
@@ -129,7 +129,7 @@ export class UserSettingsPage extends AKElement {
                     <section
                         slot="page-consents"
                         data-tab-title="${msg("Consent")}"
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                        class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                     >
                         <div class="pf-c-card">
                             <div class="pf-c-card__body">
@@ -142,7 +142,7 @@ export class UserSettingsPage extends AKElement {
                     <section
                         slot="page-mfa"
                         data-tab-title="${msg("MFA Devices")}"
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                        class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                     >
                         <div class="pf-c-card">
                             <div class="pf-c-card__body">
@@ -155,7 +155,7 @@ export class UserSettingsPage extends AKElement {
                     <section
                         slot="page-sources"
                         data-tab-title="${msg("Connected services")}"
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                        class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                     >
                         <div class="pf-c-card">
                             <div class="pf-c-card__body">
@@ -166,7 +166,7 @@ export class UserSettingsPage extends AKElement {
                     <section
                         slot="page-tokens"
                         data-tab-title="${msg("Tokens and App passwords")}"
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
+                        class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
                     >
                         <div class="pf-c-card">
                             <div class="pf-c-card__body">
diff --git a/web/src/user/user-settings/details/UserPassword.ts b/web/src/user/user-settings/details/UserPassword.ts
index 4464fdaf9..2e3a61419 100644
--- a/web/src/user/user-settings/details/UserPassword.ts
+++ b/web/src/user/user-settings/details/UserPassword.ts
@@ -26,14 +26,14 @@ export class UserSettingsPassword extends AKElement {
     render(): TemplateResult {
         // For this stage we don't need to check for a configureFlow,
         // as the stage won't return any UI Elements if no configureFlow is set.
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${msg("Change your password")}</div>
-            <div class="pf-c-card__body">
+        return html`<div class="pf-v5-c-card">
+            <div class="pf-v5-c-card__title">${msg("Change your password")}</div>
+            <div class="pf-v5-c-card__body">
                 <a
                     href="${ifDefined(this.configureUrl)}${AndNext(
                         `/if/user/#/settings;${JSON.stringify({ page: "page-details" })}`,
                     )}"
-                    class="pf-c-button pf-m-primary"
+                    class="pf-v5-c-button pf-m-primary"
                 >
                     ${msg("Change password")}
                 </a>
diff --git a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
index 2a369e1a6..3268084ba 100644
--- a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
+++ b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
@@ -148,7 +148,7 @@ export class UserSettingsFlowExecutor extends AKElement implements StageHost {
                 if ((this.challenge as RedirectChallenge).to !== "/") {
                     return html`<a
                         href="${(this.challenge as RedirectChallenge).to}"
-                        class="pf-c-button pf-m-primary"
+                        class="pf-v5-c-button pf-m-primary"
                         >${"Edit settings"}</a
                     >`;
                 }
@@ -177,7 +177,7 @@ export class UserSettingsFlowExecutor extends AKElement implements StageHost {
                             `authentik/user/flows: unsupported stage type ${this.challenge.component}`,
                         );
                         return html`
-                            <a href="/if/flow/${this.flowSlug}" class="pf-c-button pf-m-primary">
+                            <a href="/if/flow/${this.flowSlug}" class="pf-v5-c-button pf-m-primary">
                                 ${msg("Open settings")}
                             </a>
                         `;
@@ -201,9 +201,9 @@ export class UserSettingsFlowExecutor extends AKElement implements StageHost {
     }
 
     render(): TemplateResult {
-        return html` <div class="pf-c-card">
-            <div class="pf-c-card__title">${msg("Update details")}</div>
-            <div class="pf-c-card__body">${this.renderChallengeWrapper()}</div>
+        return html` <div class="pf-v5-c-card">
+            <div class="pf-v5-c-card__title">${msg("Update details")}</div>
+            <div class="pf-v5-c-card__body">${this.renderChallengeWrapper()}</div>
         </div>`;
     }
 }
diff --git a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
index 36237751b..e510c2ed0 100644
--- a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
+++ b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
@@ -15,7 +15,7 @@ export class UserSettingsPromptStage extends PromptStage {
             case PromptTypeEnum.Checkbox:
                 return html`<input
                     type="checkbox"
-                    class="pf-c-check__input"
+                    class="pf-v5-c-check__input"
                     name="${prompt.fieldKey}"
                     ?checked=${prompt.initialValue !== ""}
                     ?required=${prompt.required}
@@ -47,13 +47,13 @@ export class UserSettingsPromptStage extends PromptStage {
     }
 
     renderContinue(): TemplateResult {
-        return html` <div class="pf-c-form__group pf-m-action">
-            <div class="pf-c-form__horizontal-group">
-                <div class="pf-c-form__actions">
-                    <button type="submit" class="pf-c-button pf-m-primary">${msg("Save")}</button>
+        return html` <div class="pf-v5-c-form__group pf-m-action">
+            <div class="pf-v5-c-form__horizontal-group">
+                <div class="pf-v5-c-form__actions">
+                    <button type="submit" class="pf-v5-c-button pf-m-primary">${msg("Save")}</button>
                     ${this.host.tenant?.flowUnenrollment
                         ? html` <a
-                              class="pf-c-button pf-m-danger"
+                              class="pf-v5-c-button pf-m-danger"
                               href="/if/flow/${this.host.tenant.flowUnenrollment}/"
                           >
                               ${msg("Delete account")}
@@ -69,9 +69,9 @@ export class UserSettingsPromptStage extends PromptStage {
             return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
             </ak-empty-state>`;
         }
-        return html`<div class="pf-c-login__main-body">
+        return html`<div class="pf-v5-c-login__main-body">
                 <form
-                    class="pf-c-form"
+                    class="pf-v5-c-form"
                     @submit=${(e: Event) => {
                         this.submitForm(e);
                     }}
@@ -87,8 +87,8 @@ export class UserSettingsPromptStage extends PromptStage {
                     ${this.renderContinue()}
                 </form>
             </div>
-            <footer class="pf-c-login__main-footer">
-                <ul class="pf-c-login__main-footer-links"></ul>
+            <footer class="pf-v5-c-login__main-footer">
+                <ul class="pf-v5-c-login__main-footer-links"></ul>
             </footer>`;
     }
 }
diff --git a/web/src/user/user-settings/mfa/MFADeviceForm.ts b/web/src/user/user-settings/mfa/MFADeviceForm.ts
index 0901d0bc9..d60534a09 100644
--- a/web/src/user/user-settings/mfa/MFADeviceForm.ts
+++ b/web/src/user/user-settings/mfa/MFADeviceForm.ts
@@ -64,12 +64,12 @@ export class MFADeviceForm extends ModelForm<Device, number> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
diff --git a/web/src/user/user-settings/sources/SourceSettings.ts b/web/src/user/user-settings/sources/SourceSettings.ts
index 203eef9f3..cc5909f95 100644
--- a/web/src/user/user-settings/sources/SourceSettings.ts
+++ b/web/src/user/user-settings/sources/SourceSettings.ts
@@ -30,16 +30,16 @@ export class UserSourceSettingsPage extends AKElement {
             PFDataList,
             PFContent,
             css`
-                .pf-c-data-list__cell {
+                .pf-v5-c-data-list__cell {
                     display: flex;
                     align-items: center;
                 }
-                .pf-c-data-list__cell img {
+                .pf-v5-c-data-list__cell img {
                     max-width: 48px;
                     width: 48px;
                     margin-right: 16px;
                 }
-                :host([theme="dark"]) .pf-c-data-list__cell img {
+                :host([theme="dark"]) .pf-v5-c-data-list__cell img {
                     filter: invert(1);
                 }
                 .pf-c-data-list__item {
@@ -79,7 +79,7 @@ export class UserSourceSettingsPage extends AKElement {
         switch (source.component) {
             case "ak-user-settings-source-oauth":
                 return html`<ak-user-settings-source-oauth
-                    class="pf-c-data-list__item-row"
+                    class="pf-v5-c-data-list__item-row"
                     objectId=${source.objectUid}
                     title=${source.title}
                     connectionPk=${connectionPk}
@@ -88,7 +88,7 @@ export class UserSourceSettingsPage extends AKElement {
                 </ak-user-settings-source-oauth>`;
             case "ak-user-settings-source-plex":
                 return html`<ak-user-settings-source-plex
-                    class="pf-c-data-list__item-row"
+                    class="pf-v5-c-data-list__item-row"
                     objectId=${source.objectUid}
                     title=${source.title}
                     connectionPk=${connectionPk}
@@ -97,7 +97,7 @@ export class UserSourceSettingsPage extends AKElement {
                 </ak-user-settings-source-plex>`;
             case "ak-user-settings-source-saml":
                 return html`<ak-user-settings-source-saml
-                    class="pf-c-data-list__item-row"
+                    class="pf-v5-c-data-list__item-row"
                     objectId=${source.objectUid}
                     title=${source.title}
                     connectionPk=${connectionPk}
@@ -112,14 +112,14 @@ export class UserSourceSettingsPage extends AKElement {
     }
 
     render(): TemplateResult {
-        return html` <div class="pf-c-content">
+        return html` <div class="pf-v5-c-content">
                 <p>
                     ${msg(
                         "Connect your user account to the services listed below, to allow you to login using the service instead of traditional credentials.",
                     )}
                 </p>
             </div>
-            <ul class="pf-c-data-list" role="list">
+            <ul class="pf-v5-c-data-list" role="list">
                 ${this.sourceSettings
                     ? html`
                           ${this.sourceSettings.length < 1
@@ -128,16 +128,16 @@ export class UserSourceSettingsPage extends AKElement {
                                 ></ak-empty-state>`
                               : html`
                                     ${this.sourceSettings.map((source) => {
-                                        return html`<li class="pf-c-data-list__item">
-                                            <div class="pf-c-data-list__item-content">
-                                                <div class="pf-c-data-list__cell">
+                                        return html`<li class="pf-v5-c-data-list__item">
+                                            <div class="pf-v5-c-data-list__item-content">
+                                                <div class="pf-v5-c-data-list__cell">
                                                     ${renderSourceIcon(
                                                         source.title,
                                                         source.iconUrl,
                                                     )}
                                                     ${source.title}
                                                 </div>
-                                                <div class="pf-c-data-list__cell">
+                                                <div class="pf-v5-c-data-list__cell">
                                                     ${this.renderSourceSettings(source)}
                                                 </div>
                                             </div>
diff --git a/web/src/user/user-settings/sources/SourceSettingsOAuth.ts b/web/src/user/user-settings/sources/SourceSettingsOAuth.ts
index 2461b487f..8b970c4b4 100644
--- a/web/src/user/user-settings/sources/SourceSettingsOAuth.ts
+++ b/web/src/user/user-settings/sources/SourceSettingsOAuth.ts
@@ -26,7 +26,7 @@ export class SourceSettingsOAuth extends BaseUserSettings {
         }
         if (this.connectionPk > 0) {
             return html`<button
-                class="pf-c-button pf-m-danger"
+                class="pf-v5-c-button pf-m-danger"
                 @click=${() => {
                     return new SourcesApi(DEFAULT_CONFIG)
                         .sourcesUserConnectionsOauthDestroy({
@@ -58,7 +58,7 @@ export class SourceSettingsOAuth extends BaseUserSettings {
             </button>`;
         }
         return html`<a
-            class="pf-c-button pf-m-primary"
+            class="pf-v5-c-button pf-m-primary"
             href="${ifDefined(this.configureUrl)}${AndNext(
                 `/if/user/#/settings;${JSON.stringify({ page: "page-sources" })}`,
             )}"
diff --git a/web/src/user/user-settings/sources/SourceSettingsPlex.ts b/web/src/user/user-settings/sources/SourceSettingsPlex.ts
index a1c23cf57..fce8ab7ce 100644
--- a/web/src/user/user-settings/sources/SourceSettingsPlex.ts
+++ b/web/src/user/user-settings/sources/SourceSettingsPlex.ts
@@ -46,7 +46,7 @@ export class SourceSettingsPlex extends BaseUserSettings {
         }
         if (this.connectionPk > 0) {
             return html`<button
-                class="pf-c-button pf-m-danger"
+                class="pf-v5-c-button pf-m-danger"
                 @click=${() => {
                     return new SourcesApi(DEFAULT_CONFIG)
                         .sourcesUserConnectionsPlexDestroy({
@@ -77,7 +77,7 @@ export class SourceSettingsPlex extends BaseUserSettings {
                 ${msg("Disconnect")}
             </button>`;
         }
-        return html`<button @click=${this.doPlex} class="pf-c-button pf-m-primary">
+        return html`<button @click=${this.doPlex} class="pf-v5-c-button pf-m-primary">
             ${msg("Connect")}
         </button>`;
     }
diff --git a/web/src/user/user-settings/sources/SourceSettingsSAML.ts b/web/src/user/user-settings/sources/SourceSettingsSAML.ts
index da88645c3..44f846971 100644
--- a/web/src/user/user-settings/sources/SourceSettingsSAML.ts
+++ b/web/src/user/user-settings/sources/SourceSettingsSAML.ts
@@ -26,7 +26,7 @@ export class SourceSettingsSAML extends BaseUserSettings {
         }
         if (this.connectionPk > 0) {
             return html`<button
-                class="pf-c-button pf-m-danger"
+                class="pf-v5-c-button pf-m-danger"
                 @click=${() => {
                     return new SourcesApi(DEFAULT_CONFIG)
                         .sourcesUserConnectionsSamlDestroy({
@@ -58,7 +58,7 @@ export class SourceSettingsSAML extends BaseUserSettings {
             </button>`;
         }
         return html`<a
-            class="pf-c-button pf-m-primary"
+            class="pf-v5-c-button pf-m-primary"
             href="${ifDefined(this.configureUrl)}${AndNext(
                 `/if/user/#/settings;${JSON.stringify({ page: "page-sources" })}`,
             )}"
diff --git a/web/src/user/user-settings/tokens/UserTokenForm.ts b/web/src/user/user-settings/tokens/UserTokenForm.ts
index 6e5219a3d..925cb2835 100644
--- a/web/src/user/user-settings/tokens/UserTokenForm.ts
+++ b/web/src/user/user-settings/tokens/UserTokenForm.ts
@@ -43,7 +43,7 @@ export class UserTokenForm extends ModelForm<Token, string> {
     }
 
     renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
+        return html`<form class="pf-v5-c-form pf-m-horizontal">
             <ak-form-element-horizontal
                 label=${msg("Identifier")}
                 ?required=${true}
@@ -52,7 +52,7 @@ export class UserTokenForm extends ModelForm<Token, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.identifier)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                     required
                 />
             </ak-form-element-horizontal>
@@ -60,7 +60,7 @@ export class UserTokenForm extends ModelForm<Token, string> {
                 <input
                     type="text"
                     value="${ifDefined(this.instance?.description)}"
-                    class="pf-c-form-control"
+                    class="pf-v5-c-form-control"
                 />
             </ak-form-element-horizontal>
         </form>`;