diff --git a/authentik/core/templates/user/details.html b/authentik/core/templates/user/details.html
index b46c1f9a6..0babe3137 100644
--- a/authentik/core/templates/user/details.html
+++ b/authentik/core/templates/user/details.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="pf-c-card">
-    <div class="pf-c-card__header pf-c-title pf-m-md">
+    <div class="pf-c-card__title">
         {% trans 'Update details' %}
     </div>
     <div class="pf-c-card__body">
diff --git a/authentik/sources/oauth/templates/oauth_client/user.html b/authentik/sources/oauth/templates/oauth_client/user.html
index ff69eaa91..ea30ace65 100644
--- a/authentik/sources/oauth/templates/oauth_client/user.html
+++ b/authentik/sources/oauth/templates/oauth_client/user.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="pf-c-card">
-    <div class="pf-c-card__header pf-c-title pf-m-md">
+    <div class="pf-pf-c-card__title">
         {% blocktrans with source_name=source.name %}
         Source {{ source_name }}
         {% endblocktrans %}
diff --git a/authentik/stages/authenticator_static/templates/stages/authenticator_static/user_settings.html b/authentik/stages/authenticator_static/templates/stages/authenticator_static/user_settings.html
index bc01cd3cb..81a40e04c 100644
--- a/authentik/stages/authenticator_static/templates/stages/authenticator_static/user_settings.html
+++ b/authentik/stages/authenticator_static/templates/stages/authenticator_static/user_settings.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="pf-c-card">
-    <div class="pf-c-card__header pf-c-title pf-m-md">
+    <div class="pf-c-card__title">
         {% trans "Static One-Time Passwords" %}
     </div>
     <div class="pf-c-card__body">
diff --git a/authentik/stages/authenticator_totp/templates/stages/authenticator_totp/user_settings.html b/authentik/stages/authenticator_totp/templates/stages/authenticator_totp/user_settings.html
index 722da5f36..a64044eb5 100644
--- a/authentik/stages/authenticator_totp/templates/stages/authenticator_totp/user_settings.html
+++ b/authentik/stages/authenticator_totp/templates/stages/authenticator_totp/user_settings.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 <div class="pf-c-card">
-    <div class="pf-c-card__header pf-c-title pf-m-md">
+    <div class="pf-c-card__title">
         {% trans "Time-based One-Time Passwords" %}
     </div>
     <div class="pf-c-card__body">
diff --git a/authentik/stages/authenticator_webauthn/templates/stages/authenticator_webauthn/user_settings.html b/authentik/stages/authenticator_webauthn/templates/stages/authenticator_webauthn/user_settings.html
index ea97b915b..36e79f112 100644
--- a/authentik/stages/authenticator_webauthn/templates/stages/authenticator_webauthn/user_settings.html
+++ b/authentik/stages/authenticator_webauthn/templates/stages/authenticator_webauthn/user_settings.html
@@ -2,7 +2,7 @@
 {% load humanize %}
 
 <div class="pf-c-card">
-    <div class="pf-c-card__header pf-c-title pf-m-md">
+    <div class="pf-c-card__title">
         {% trans "WebAuthn Devices" %}
     </div>
     <div class="pf-c-card__body">
diff --git a/authentik/stages/password/templates/stages/password/user-settings-card.html b/authentik/stages/password/templates/stages/password/user-settings-card.html
index 46cc0da99..aa8782b26 100644
--- a/authentik/stages/password/templates/stages/password/user-settings-card.html
+++ b/authentik/stages/password/templates/stages/password/user-settings-card.html
@@ -2,7 +2,7 @@
 {% load authentik_utils %}
 
 <div class="pf-c-card">
-    <div class="pf-c-card__header pf-c-title pf-m-md">
+    <div class="pf-c-card__title">
         {% trans 'Reset your password' %}
     </div>
     <div class="pf-c-card__body">
diff --git a/web/src/pages/applications/ApplicationViewPage.ts b/web/src/pages/applications/ApplicationViewPage.ts
index e0360ee67..a3992f292 100644
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@@ -76,11 +76,7 @@ export class ApplicationViewPage extends LitElement {
                 <section slot="page-1" data-tab-title="${gettext("Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-l-gallery pf-m-gutter">
                         <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
-                            <div class="pf-c-card__header">
-                                <div class="pf-c-card__header-main">
-                                    <i class="pf-icon pf-icon-server"></i> ${gettext("Logins over the last 24 hours")}
-                                </div>
-                            </div>
+                            <div class="pf-c-card__title">${gettext("Logins over the last 24 hours")}</div>
                             <div class="pf-c-card__body">
                                 ${this.application ? html`
                                     <ak-charts-application-authorize applicationSlug=${this.application.slug}>
@@ -88,11 +84,7 @@ export class ApplicationViewPage extends LitElement {
                             </div>
                         </div>
                         <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-2-col">
-                            <div class="pf-c-card__header">
-                                <div class="pf-c-card__header-main">
-                                    <i class="fas fa-external-link-alt"></i> ${gettext("Related")}
-                                </div>
-                            </div>
+                            <div class="pf-c-card__title">${gettext("Related")}</div>
                             <div class="pf-c-card__body">
                                 <dl class="pf-c-description-list">
                                     ${this.application.provider ?
@@ -113,11 +105,7 @@ export class ApplicationViewPage extends LitElement {
                             </div>
                         </div>
                         <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
-                            <div class="pf-c-card__header">
-                                <div class="pf-c-card__header-main">
-                                    <i class="pf-icon pf-icon-server"></i> ${gettext("Changelog")}
-                                </div>
-                            </div>
+                            <div class="pf-c-card__title">${gettext("Changelog")}</div>
                             <div class="pf-c-card__body">
                                 <ak-object-changelog
                                     targetModelPk=${this.application.pk || ""}
@@ -130,11 +118,7 @@ export class ApplicationViewPage extends LitElement {
                 </section>
                 <div slot="page-2" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-c-card">
-                        <div class="pf-c-card__header">
-                            <div class="pf-c-card__header-main">
-                                ${gettext("These policies control which users can access this application.")}
-                            </div>
-                        </div>
+                        <div class="pf-c-card__title">${gettext("These policies control which users can access this application.")}</div>
                         <ak-bound-policies-list .target=${this.application.pk}>
                         </ak-bound-policies-list>
                     </div>
diff --git a/web/src/pages/flows/FlowViewPage.ts b/web/src/pages/flows/FlowViewPage.ts
index fa3fad4c3..1f1987e37 100644
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@@ -12,9 +12,13 @@ import { Flow, FlowsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../../authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
 
 @customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
@@ -31,7 +35,7 @@ export class FlowViewPage extends LitElement {
     flow!: Flow;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFContent, AKGlobal].concat(
+        return [PFBase, PFPage, PFCard, PFContent, PFFlex, PFSizing, PFDisplay, AKGlobal].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;
@@ -57,36 +61,44 @@ export class FlowViewPage extends LitElement {
                 </div>
             </section>
             <ak-tabs>
-                <div slot="page-1" data-tab-title="${gettext("Flow Diagram")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
-                    <div class="pf-c-card">
-                        <ak-flow-diagram flowSlug=${this.flow.slug}>
-                        </ak-flow-diagram>
+                <div slot="page-1" data-tab-title="${gettext("Flow Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-u-display-flex">
+                        <div class="pf-u-w-75">
+                            <div class="pf-c-card">
+                                <div class="pf-c-card__body">
+                                    <ak-flow-diagram flowSlug=${this.flow.slug}>
+                                    </ak-flow-diagram>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div slot="page-2" data-tab-title="${gettext("Stage Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-c-card">
-                        <ak-bound-stages-list .target=${this.flow.pk}>
-                        </ak-bound-stages-list>
+                        <div class="pf-c-card__body">
+                            <ak-bound-stages-list .target=${this.flow.pk}>
+                            </ak-bound-stages-list>
+                        </div>
                     </div>
                 </div>
                 <div slot="page-3" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-c-card">
-                        <div class="pf-c-card__header">
-                            <div class="pf-c-card__header-main">
-                                ${gettext("These policies control which users can access this flow.")}
-                            </div>
+                        <div class="pf-c-card__title">${gettext("These policies control which users can access this flow.")}</div>
+                        <div class="pf-c-card__body">
+                            <ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
+                            </ak-bound-policies-list>
                         </div>
-                        <ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
-                        </ak-bound-policies-list>
                     </div>
                 </div>
                 <div slot="page-4" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-c-card">
-                        <ak-object-changelog
-                            targetModelPk=${this.flow.pk || ""}
-                            targetModelApp="authentik_flows"
-                            targetModelName="flow">
-                        </ak-object-changelog>
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.flow.pk || ""}
+                                targetModelApp="authentik_flows"
+                                targetModelName="flow">
+                            </ak-object-changelog>
+                        </div>
                     </div>
                 </div>
             </ak-tabs>`;