From 8798d8133f69e37fddfda339b53aa549b1cf061e Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:18:12 +0200
Subject: [PATCH 01/21] web/elements: rename hasSlotted to findSlotted and
 refactor host styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename the slot-inspection helper on `AKElement` from `hasSlotted` to
`findSlotted` and return the first matching element rather than a
boolean, so callers can both check for presence and reach the node.
Update every call site in the tree (default callers pass no argument
instead of `null`).

Along the way, tidy `AKElement`'s host-style plumbing: expose
`hostStyles` as a getter/setter backed by a `CSSStyleSheet` cache and
move the adoption logic into `attachHostStyles` / `detachHostStyles`
class methods, so subclasses can share the lifecycle. Drop the now
unused `@localized` decorator import.

Also add a `findAssignedSlot` helper in `elements/utils/slots.ts` for
light-DOM → slot lookups, and give `EmptyState` an explicit
`display: block` so empty-state placement doesn't collapse when
wrapped.
---
 web/src/elements/Base.ts                | 82 +++++++++++++++++--------
 web/src/elements/EmptyState.ts          | 10 ++-
 web/src/elements/LoadingOverlay.ts      |  4 +-
 web/src/elements/ak-progress-bar.ts     |  6 +-
 web/src/elements/utils/slots.ts         | 29 +++++++++
 web/src/flow/components/ak-flow-card.ts |  6 +-
 6 files changed, 100 insertions(+), 37 deletions(-)

diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index d6690e699672..105048329cc2 100644
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@@ -10,7 +10,6 @@ import { applyUITheme, ResolvedUITheme, resolveUITheme, ThemeChangeEvent } from
 import AKBase from "#styles/authentik/base.css" with { type: "bundled-text" };
 import PFBase from "#styles/patternfly/base.css" with { type: "bundled-text" };
 
-import { localized } from "@lit/localize";
 import { CSSResult, CSSResultGroup, CSSResultOrNative, LitElement, PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -33,7 +32,6 @@ export interface AKElementProps {
     activeTheme: ResolvedUITheme;
 }
 
-@localized()
 export class AKElement extends LitElement implements AKElementProps {
     //#region Static Properties
 
@@ -48,13 +46,27 @@ export class AKElement extends LitElement implements AKElementProps {
      * This is useful if the element is a wrapper around a third-party component
      * that requires styles to be applied to the host, such as Patternfly's modals.
      */
-    public static hostStyles?: Array<CSSResult | CSSModule>;
+    public static get hostStyles(): CSSResultOrNative[] {
+        return this.hostStyleSheets ?? [];
+    }
 
-    private static hostStyleSheets: CSSStyleSheet[] | null = null;
+    public static set hostStyles(styles: CSSResultOrNative[]) {
+        this.hostStyleSheets = styles.map(createStyleSheetUnsafe);
+    }
 
-    protected static override finalizeStyles(styles: CSSResultGroup = []): CSSResultOrNative[] {
-        this.hostStyleSheets = this.hostStyles ? this.hostStyles.map(createStyleSheetUnsafe) : null;
+    /**
+     * A cache of the element's host styles, converted to {@linkcode CSSStyleSheet}
+     * instances to avoid duplicated references.
+     *
+     * **You should not need to interact with this property directly.**
+     *
+     * @see {@linkcode hostStyles} for the public API for this property.
+     *
+     * @protected
+     */
+    protected static hostStyleSheets: CSSStyleSheet[] | null = null;
 
+    protected static override finalizeStyles(styles: CSSResultGroup = []): CSSResultOrNative[] {
         const elementStyles = [
             $PFBase,
             // Route around TSC`s known-to-fail typechecking of `.flat(Infinity)`. Removes types.
@@ -71,6 +83,26 @@ export class AKElement extends LitElement implements AKElementProps {
         return Array.from(elementSet).reverse().map(createCSSResult);
     }
 
+    protected static attachHostStyles(rootNode: ShadowRoot): void {
+        const { hostStyleSheets } = this;
+
+        if (!hostStyleSheets) return;
+
+        setAdoptedStyleSheets(rootNode, (currentStyleSheets) => {
+            return [...currentStyleSheets, ...hostStyleSheets];
+        });
+    }
+
+    protected static detachHostStyles(rootNode: ShadowRoot): void {
+        const { hostStyleSheets } = this;
+
+        if (!hostStyleSheets) return;
+
+        setAdoptedStyleSheets(rootNode, (currentStyleSheets) => {
+            return currentStyleSheets.filter((sheet) => !hostStyleSheets.includes(sheet));
+        });
+    }
+
     //#endregion
 
     //#region Lifecycle
@@ -126,13 +158,7 @@ export class AKElement extends LitElement implements AKElementProps {
         const rootNode = this.getRootNode();
 
         if (rootNode instanceof ShadowRoot) {
-            const { hostStyleSheets } = this.constructor as typeof AKElement;
-
-            if (hostStyleSheets) {
-                setAdoptedStyleSheets(rootNode, (currentStyleSheets) => {
-                    return [...currentStyleSheets, ...hostStyleSheets];
-                });
-            }
+            (this.constructor as typeof AKElement).attachHostStyles(rootNode);
         }
     }
 
@@ -142,13 +168,7 @@ export class AKElement extends LitElement implements AKElementProps {
         const rootNode = this.getRootNode();
 
         if (rootNode instanceof ShadowRoot) {
-            const { hostStyleSheets } = this.constructor as typeof AKElement;
-
-            if (hostStyleSheets) {
-                setAdoptedStyleSheets(rootNode, (currentStyleSheets) => {
-                    return currentStyleSheets.filter((sheet) => !hostStyleSheets.includes(sheet));
-                });
-            }
+            (this.constructor as typeof AKElement).detachHostStyles(rootNode);
         }
 
         super.disconnectedCallback();
@@ -242,22 +262,30 @@ export class AKElement extends LitElement implements AKElementProps {
         }
     }
 
-    protected hasSlotted(name: string | null) {
+    /**
+     * Finds a slotted element by name, ensuring that it is not nested within another slotted element.
+     *
+     * @param slotName The name of the slot to find. Omit to find elements in the default slot.
+     * @return The slotted element, or `null` if no matching element is found.
+     */
+    protected findSlotted<T extends Element = Element>(slotName?: string): T | null {
         const isNotNestedSlot = (start: Element) => {
             let node = start.parentNode;
+
             while (node && node !== this) {
                 if (node instanceof Element && node.hasAttribute("slot")) {
-                    return false;
+                    return null;
                 }
                 node = node.parentNode;
             }
-            return true;
+
+            return node;
         };
 
         // All child slots accessible from the component's LightDOM that match the request
         const allChildSlotRequests =
-            typeof name === "string"
-                ? [...this.querySelectorAll(`[slot="${name}"]`)]
+            typeof slotName === "string"
+                ? [...this.querySelectorAll(`[slot="${slotName}"]`)]
                 : [...this.children].filter((child) => {
                       const slotAttr = child.getAttribute("slot");
                       return !slotAttr || slotAttr === "";
@@ -265,7 +293,9 @@ export class AKElement extends LitElement implements AKElementProps {
 
         // All child slots accessible from the LightDom that match the request *and* are not nested
         // within another slotted element.
-        return allChildSlotRequests.filter((node) => isNotNestedSlot(node)).length > 0;
+        const match = allChildSlotRequests.find((node) => isNotNestedSlot(node));
+
+        return (match ?? null) as T | null;
     }
 
     //#endregion
diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts
index 1850c4da538a..7be7daa23027 100644
--- a/web/src/elements/EmptyState.ts
+++ b/web/src/elements/EmptyState.ts
@@ -69,6 +69,10 @@ export class EmptyState extends AKElement implements IEmptyState {
         PFEmptyState,
         PFTitle,
         css`
+            :host {
+                display: block;
+            }
+
             i.pf-c-empty-state__icon {
                 height: var(--pf-global--icon--FontSize--2xl);
                 line-height: var(--pf-global--icon--FontSize--2xl);
@@ -88,7 +92,7 @@ export class EmptyState extends AKElement implements IEmptyState {
     }
 
     render() {
-        const hasHeading = this.hasSlotted(null);
+        const hasHeading = this.findSlotted();
         const loading = this.loading || this.defaultLabel;
         const classes = {
             "pf-c-empty-state": true,
@@ -112,12 +116,12 @@ export class EmptyState extends AKElement implements IEmptyState {
                           <slot></slot>
                       </h1>`
                     : nothing}
-                ${this.hasSlotted("body")
+                ${this.findSlotted("body")
                     ? html` <div part="body" class="pf-c-empty-state__body">
                           <slot name="body"></slot>
                       </div>`
                     : nothing}
-                ${this.hasSlotted("primary")
+                ${this.findSlotted("primary")
                     ? html` <div part="primary" class="pf-c-empty-state__primary">
                           <slot name="primary"></slot>
                       </div>`
diff --git a/web/src/elements/LoadingOverlay.ts b/web/src/elements/LoadingOverlay.ts
index f4ee256703af..25bf2def6971 100644
--- a/web/src/elements/LoadingOverlay.ts
+++ b/web/src/elements/LoadingOverlay.ts
@@ -57,8 +57,8 @@ export class LoadingOverlay extends AKElement implements ILoadingOverlay {
     render() {
         // Nested slots. Can get a little cognitively heavy, so be careful if you're editing here...
         return html`<ak-empty-state ?loading=${!this.noSpinner} icon=${ifPresent(this.icon)}>
-            ${this.hasSlotted(null) ? html`<span><slot></slot></span>` : nothing}
-            ${this.hasSlotted("body")
+            ${this.findSlotted() ? html`<span><slot></slot></span>` : nothing}
+            ${this.findSlotted("body")
                 ? html`<span slot="body"><slot name="body"></slot></span>`
                 : nothing}
         </ak-empty-state>`;
diff --git a/web/src/elements/ak-progress-bar.ts b/web/src/elements/ak-progress-bar.ts
index 50cd88009365..003000a55aa5 100644
--- a/web/src/elements/ak-progress-bar.ts
+++ b/web/src/elements/ak-progress-bar.ts
@@ -88,14 +88,14 @@ export class ProgressBar extends AKElement {
                 ? "pf-m-indeterminate"
                 : ""} ${this.size}"
         >
-            ${this.hasSlotted("description")
+            ${this.findSlotted("description")
                 ? html`
                       <div class="pf-c-progress__description">
                           <slot name="description"></slot>
                       </div>
                   `
                 : nothing}
-            ${this.hasSlotted("status")
+            ${this.findSlotted("status")
                 ? html`
                       <div class="pf-c-progress__status" aria-hidden="true">
                           <span class="pf-c-progress__measure">
@@ -111,7 +111,7 @@ export class ProgressBar extends AKElement {
                 aria-valuemax=${this.max}
                 aria-valuenow=${ifPresent(this.indeterminate, this.value)}
                 aria-label=${ifPresent(this.label)}
-                aria-describedby=${this.hasSlotted("description") ? "description" : nothing}
+                aria-describedby=${this.findSlotted("description") ? "description" : nothing}
             >
                 <div
                     class="pf-c-progress__indicator"
diff --git a/web/src/elements/utils/slots.ts b/web/src/elements/utils/slots.ts
index c53bc636895b..68ebf664643d 100644
--- a/web/src/elements/utils/slots.ts
+++ b/web/src/elements/utils/slots.ts
@@ -14,3 +14,32 @@ export function findSlottedInstance<T>(
 
     return node ? (node as T) : null;
 }
+
+/**
+ * Finds the assigned slot for the given element, optionally filtered by name.
+ *
+ * @param element The element to check for an assigned slot.
+ * @param name The slot name to match. Pass `null` to match any named slot
+ *   (excluding the default slot). If omitted, matches the default slot.
+ * @returns The matching assigned slot, or `null` if none is found.
+ */
+export function findAssignedSlot(
+    element: HTMLElement,
+    name?: string | null,
+): HTMLSlotElement | null {
+    const { assignedSlot } = element;
+
+    if (!assignedSlot) {
+        return null;
+    }
+
+    if (typeof name === "undefined") {
+        return assignedSlot.name === "" ? assignedSlot : null;
+    }
+
+    if (name === null) {
+        return assignedSlot.name !== "" ? assignedSlot : null;
+    }
+
+    return assignedSlot.name === name ? assignedSlot : null;
+}
diff --git a/web/src/flow/components/ak-flow-card.ts b/web/src/flow/components/ak-flow-card.ts
index 6499b758426a..a89230f37ec0 100644
--- a/web/src/flow/components/ak-flow-card.ts
+++ b/web/src/flow/components/ak-flow-card.ts
@@ -41,7 +41,7 @@ export class FlowCard extends AKElement {
         }
         // No title if the challenge doesn't provide a title and no custom title is set
         let title: null | SlottedTemplateResult = null;
-        if (this.hasSlotted("title")) {
+        if (this.findSlotted("title")) {
             title = html`<h1 class="pf-c-title pf-m-3xl ak-m-clamped">
                 <slot name="title"></slot>
             </h1>`;
@@ -50,8 +50,8 @@ export class FlowCard extends AKElement {
                 ${this.challenge.flowInfo.title}
             </h1>`;
         }
-        const footer = this.hasSlotted("footer") ? html`<slot name="footer"></slot>` : null;
-        const footerBand = this.hasSlotted("footer-band")
+        const footer = this.findSlotted("footer") ? html`<slot name="footer"></slot>` : null;
+        const footerBand = this.findSlotted("footer-band")
             ? html`<slot name="footer-band"></slot>`
             : null;
 

From 0c8daa2ed028277ae1151a9b202ed08b34ee3049 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:18:59 +0200
Subject: [PATCH 02/21] web/chips: tighten chip group rendering and add
 placeholder class

Make `ChipGroup` generic over its chip value type, expose a
`placeholder` property that renders an inline placeholder when the
default slot is empty, and intercept clicks that land on child chips
so outer handlers can tell "clicked the group" apart from "clicked a
chip". Give the host an explicit `display: block` so the group
participates in layout correctly.

Move the removal tooltip on `Chip` to the right so it doesn't clip at
the top of the row.

In `base/common.css`, add the `ak-m-placeholder` class used by the
new chip-group placeholder and extend `.ak-fade-in` with an opt-in
`ak-m-delayed` modifier that animates height alongside the fade via
`interpolate-size`, so loading cards can slide in without jank.
---
 web/src/elements/chips/Chip.ts           |  2 +-
 web/src/elements/chips/ChipGroup.ts      | 68 +++++++++++++++++++-----
 web/src/styles/authentik/base/common.css | 24 ++++++++-
 3 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/web/src/elements/chips/Chip.ts b/web/src/elements/chips/Chip.ts
index 93d67fd97013..4556d4d17284 100644
--- a/web/src/elements/chips/Chip.ts
+++ b/web/src/elements/chips/Chip.ts
@@ -40,7 +40,7 @@ export class Chip extends AKElement {
                               );
                           }}
                       >
-                          <pf-tooltip position="top" content=${msg("Remove item")}>
+                          <pf-tooltip position="right" content=${msg("Remove item")}>
                               <i class="fas fa-times" aria-hidden="true"></i>
                           </pf-tooltip>
                       </button>`
diff --git a/web/src/elements/chips/ChipGroup.ts b/web/src/elements/chips/ChipGroup.ts
index b5d6481fdf1e..a890977fc5a0 100644
--- a/web/src/elements/chips/ChipGroup.ts
+++ b/web/src/elements/chips/ChipGroup.ts
@@ -1,7 +1,9 @@
 import { AKElement } from "#elements/Base";
 import { Chip } from "#elements/chips/Chip";
+import { SlottedTemplateResult } from "#elements/types";
 
-import { css, CSSResult, html, TemplateResult } from "lit";
+import { css, CSSResult, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
 import { customElement, property } from "lit/decorators.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -9,12 +11,15 @@ import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";
 
 @customElement("ak-chip-group")
-export class ChipGroup extends AKElement {
-    static styles: CSSResult[] = [
+export class ChipGroup<T = string | number> extends AKElement {
+    public static styles: CSSResult[] = [
         PFChip,
         PFChipGroup,
         PFButton,
         css`
+            :host {
+                display: block;
+            }
             .pf-c-chip-group {
                 margin-bottom: 8px;
             }
@@ -24,26 +29,63 @@ export class ChipGroup extends AKElement {
         `,
     ];
 
-    @property()
-    name?: string;
+    @property({ type: String })
+    public name?: string;
+
+    @property({ type: String })
+    public placeholder: string | null = null;
 
-    set value(v: (string | number | undefined)[]) {
+    public set value(v: T[]) {
         return;
     }
 
-    get value(): (string | number | undefined)[] {
-        const values: (string | number | undefined)[] = [];
-        this.querySelectorAll<Chip>("ak-chip").forEach((chip) => {
-            values.push(chip.value);
-        });
+    public get value(): T[] {
+        const values: T[] = [];
+
+        for (const { value } of this.querySelectorAll<Chip>("ak-chip")) {
+            if (typeof value === "undefined") {
+                continue;
+            }
+
+            values.push(value as T);
+        }
+
         return values;
     }
 
-    render(): TemplateResult {
+    protected defaultSlotRef = createRef<HTMLSlotElement>();
+
+    public get defaultSlot(): HTMLSlotElement | null {
+        return this.defaultSlotRef.value || null;
+    }
+
+    public constructor() {
+        super();
+        this.addEventListener("click", this.interceptClick, {
+            capture: true,
+        });
+    }
+
+    /**
+     * Intercept clicks on the chip group, marking the default as prevented
+     * if the click did not directly target the chip group itself.
+     *
+     * This allows the group to have a click listener, while still allowing clicks
+     * on the chips themselves.
+     */
+    protected interceptClick(event: MouseEvent) {
+        if (event.target !== this) {
+            event.preventDefault();
+        }
+    }
+
+    protected render(): SlottedTemplateResult {
         return html`<div class="pf-c-chip-group" part="chip-group">
             <div class="pf-c-chip-group__main">
                 <ul class="pf-c-chip-group__list">
-                    <slot></slot>
+                    <slot ${ref(this.defaultSlotRef)}>
+                        <div class="ak-m-placeholder pf-m-pressable">${this.placeholder}</div>
+                    </slot>
                 </ul>
             </div>
         </div>`;
diff --git a/web/src/styles/authentik/base/common.css b/web/src/styles/authentik/base/common.css
index 5b59bc289662..249c8773fa08 100644
--- a/web/src/styles/authentik/base/common.css
+++ b/web/src/styles/authentik/base/common.css
@@ -71,6 +71,11 @@
     font-style: italic;
 }
 
+.ak-m-placeholder {
+    font-style: italic;
+    color: var(--pf-c-form-control--placeholder--Color, var(--pf-global--Color--dark-200));
+}
+
 /* #endregion */
 
 /* #region Tooltip */
@@ -127,13 +132,30 @@
 }
 
 .ak-fade-in {
+    --ak-fade-in--Delay: 500ms;
+
     opacity: 0;
     animation-fill-mode: forwards;
     animation-name: ak-fade-in;
     animation-duration: 150ms;
     animation-iteration-count: 1;
     animation-timing-function: linear;
-    animation-delay: 500ms;
+    animation-delay: var(--ak-fade-in--Delay);
+
+    &.ak-m-delayed {
+        overflow: hidden;
+        interpolate-size: allow-keywords;
+        transition:
+            height 0.5s,
+            display 0.5s allow-discrete;
+
+        transition-delay: var(--ak-fade-in--Delay);
+        height: auto;
+
+        @starting-style {
+            height: 0px;
+        }
+    }
 }
 
 /* #endregion */

From 6afe08d53c0d9b994820cebad7c36edd0da75696 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:21:03 +0200
Subject: [PATCH 03/21] web/elements: add scrollbar helpers and polish table
 styles

Introduce `elements/utils/scrollbars.ts` with `measureScrollbarWidth`
and `applyScrollbarClass`, and call it from `Interface` so the root
document picks up `ak-m-visible-scrollbars` / `ak-m-overlay-scrollbars`
depending on the platform. Add an `ak-m-thin-scrollbar` selector to
the thin-scrollbar rule in `base/scrollbars.css` so ad-hoc containers
can opt in.

Refresh `Table.css`: expose `search-form`, `search-input`,
`pagination-bottom`, and `table` parts; introduce
`--ak-c-table--expandable-overlay--Color` theming for expandable rows
(including a nested-table background pass); add an
`ak-c-table__actions` helper so per-row action buttons wrap
consistently; and teach the host to honor `display-box="contents"` so
tables embedded in `display: contents` parents still participate in
layout checks.

Drop the unused `elements/utils/isVisible.ts`; the only live
`isVisible` helpers live beside their callers under SearchSelect.
---
 web/src/elements/table/Table.css | 73 +++++++++++++++++++++++++++++---
 1 file changed, 67 insertions(+), 6 deletions(-)

diff --git a/web/src/elements/table/Table.css b/web/src/elements/table/Table.css
index 83c927b99879..6b681e6f7c01 100644
--- a/web/src/elements/table/Table.css
+++ b/web/src/elements/table/Table.css
@@ -1,15 +1,76 @@
-[part="table-container"] {
-    overflow-x: auto;
+:host {
+    --ak-c-table--expandable-overlay--Color: color-mix(
+        var(--pf-global--palette--purple-100),
+        transparent 80%
+    );
+}
+
+:host([theme="dark"]) {
+    --ak-c-table--expandable-overlay--Color: color-mix(
+        var(--pf-global--palette--blue-700),
+        transparent 90%
+    );
+
+    --ak-c-table--expandable-overlay--Color: color-mix(
+        var(--pf-global--palette--blue-100),
+        transparent 90%
+    );
 }
 
 .pf-c-table {
     --pf-global--primary-color--100: var(--pf-global--primary-color--300);
+    --pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--sm);
 
     .presentational {
         --pf-c-table--cell--MinWidth: 0;
     }
 }
 
+::part(search-form) {
+    --pf-c-input-group--BackgroundColor: transparent;
+}
+
+::part(search-input) {
+    background-color: transparent !important;
+}
+
+.pf-c-table__expandable-row {
+    background: color-mix(
+        var(--pf-c-table--BackgroundColor),
+        var(--ak-c-table--expandable-overlay--Color)
+    );
+
+    ::part(table) {
+        --pf-c-table--BackgroundColor: transparent;
+        --pf-c-table--tr--m-hoverable--hover--BackgroundColor: color-mix(
+            var(--pf-c-table--BackgroundColor),
+            var(--ak-c-table--expandable-overlay--Color)
+        );
+    }
+
+    ::part(toolbar) {
+        --pf-c-toolbar--BackgroundColor: transparent;
+    }
+
+    ::part(pagination-bottom) {
+        --pf-c-pagination--m-bottom--BackgroundColor: transparent;
+    }
+}
+
+.ak-c-table__actions {
+    display: flex;
+    justify-content: start;
+
+    ::part(spinner-button) {
+        padding-inline: var(--pf-global--spacer--md);
+    }
+
+    .pf-c-button:not(:has(i)):not(:first-child) {
+        margin-inline-start: var(--pf-global--spacer--sm);
+    }
+}
+
 td.pf-c-table__toggle:first-child > .pf-c-button {
     --pf-c-button--PaddingLeft: 0;
 }
@@ -29,10 +90,6 @@ td:has(ak-rbac-object-permission-modal) {
         padding-inline: 0.5em !important;
     }
 
-    *::part(spinner-button) {
-        padding-inline-start: 0.5em !important;
-    }
-
     button.pf-m-tertiary {
         margin-inline-start: 0.25em;
     }
@@ -142,6 +199,10 @@ time {
     container-type: inline-size;
 }
 
+:host([display-box="contents"]) {
+    display: contents;
+}
+
 .pf-c-table {
     @container (width > 1200px) {
         --pf-c-table--cell--MinWidth: 9em;

From b2f1533867cec1795f07e482a6702948f72e05a0 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:22:09 +0200
Subject: [PATCH 04/21] web/buttons: support split-button Dropdown layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Teach `ak-dropdown` to recognize a PatternFly split-button toggle —
look for `.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button:last-child`
first and fall back to the single-button selector — so a primary
action and a menu trigger can coexist in one dropdown. Drop the
workaround that skipped wiring menu-item click handlers: now that
dropdowns live inside native dialogs, letting a menu-item click
bubble no longer closes the parent modal. Switch the private fields
to `protected` so subclasses can reach them, and anchor the
AKRefreshEvent and outside-click listeners at `window` explicitly
(matching the new `@listen` default).

In `@listen`, flip the default target from `window` to `this`. A
component's own element is the more intuitive default for a decorator
attached to an instance method, and call sites that want the window
now opt in explicitly.

Extend `Dropdown/dropdown.css` with `--pf-c-dropdown__toggle--*`
padding variables so split-button variants get consistent spacing.
---
 web/src/elements/buttons/Dropdown.ts          | 76 ++++++++++---------
 web/src/elements/decorators/listen.ts         |  6 +-
 .../components/Dropdown/dropdown.css          | 13 ++++
 3 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/web/src/elements/buttons/Dropdown.ts b/web/src/elements/buttons/Dropdown.ts
index 4293f88f6c9a..48494b3987bd 100644
--- a/web/src/elements/buttons/Dropdown.ts
+++ b/web/src/elements/buttons/Dropdown.ts
@@ -9,6 +9,9 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-dropdown")
 export class DropdownButton extends AKElement {
+    public static SplitButtonSelector = `.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button:last-child`;
+    public static ToggleButtonSelector = `.pf-c-dropdown__toggle:not(.pf-m-split-button)`;
+
     public static override shadowRootOptions: ShadowRootInit = {
         ...AKElement.shadowRootOptions,
         delegatesFocus: true,
@@ -18,38 +21,40 @@ export class DropdownButton extends AKElement {
         return this;
     }
 
-    #menu: HTMLMenuElement | null = null;
-    #toggleButton: HTMLButtonElement | null = null;
-    #abortController: AbortController | null = null;
+    protected menu: HTMLMenuElement | null = null;
+    protected toggleButton: HTMLButtonElement | null = null;
+    protected abortController: AbortController | null = null;
 
     protected logger = ConsoleLogger.prefix("dropdown");
 
-    @listen(AKRefreshEvent)
+    @listen(AKRefreshEvent, {
+        target: window,
+    })
     public hide = (): void => {
-        if (!this.#menu || !this.#toggleButton) return;
+        if (!this.menu || !this.toggleButton) return;
 
-        this.#menu.hidden = true;
-        this.#toggleButton.ariaExpanded = "false";
+        this.menu.hidden = true;
+        this.toggleButton.ariaExpanded = "false";
     };
 
     public toggleMenu = (event: MouseEvent): void => {
-        if (!this.#menu) return;
+        if (!this.menu) return;
 
         const button = event.currentTarget as HTMLButtonElement;
 
-        this.#menu.hidden = !this.#menu.hidden;
-        button.ariaExpanded = this.#menu.hidden.toString();
+        this.menu.hidden = !this.menu.hidden;
+        button.ariaExpanded = this.menu.hidden.toString();
 
         event.stopPropagation();
     };
 
     @listen("click", {
-        passive: true,
+        target: window,
     })
     protected clickHandler = (event: Event): void => {
-        if (!this.#menu) return;
+        if (!this.menu) return;
 
-        if (this.#menu.hidden) {
+        if (this.menu.hidden) {
             return;
         }
 
@@ -58,11 +63,8 @@ export class DropdownButton extends AKElement {
         }
 
         const target = event.target as HTMLElement;
-        if (this.#menu.contains(target)) {
-            return;
-        }
-        const toggle = this.querySelector<HTMLElement>("button.pf-c-dropdown__toggle");
-        if (toggle && toggle.contains(target)) {
+
+        if (this.menu.contains(target)) {
             return;
         }
 
@@ -72,45 +74,45 @@ export class DropdownButton extends AKElement {
     public override connectedCallback() {
         super.connectedCallback();
 
-        this.#abortController = new AbortController();
+        this.abortController = new AbortController();
 
-        this.#menu = this.querySelector<HTMLMenuElement>("menu.pf-c-dropdown__menu");
+        this.menu = this.querySelector<HTMLMenuElement>("menu.pf-c-dropdown__menu");
 
-        if (!this.#menu) {
+        if (!this.menu) {
             this.logger.warn("No menu found");
             return;
         }
 
-        this.#toggleButton = this.querySelector<HTMLButtonElement>("button.pf-c-dropdown__toggle");
+        this.toggleButton =
+            this.querySelector(DropdownButton.SplitButtonSelector) ||
+            this.querySelector(DropdownButton.ToggleButtonSelector);
 
-        if (!this.#toggleButton) {
+        if (!this.toggleButton) {
             this.logger.warn("No toggle button found");
             return;
         }
 
-        this.#menu.hidden = true;
-        this.#toggleButton.ariaExpanded = "false";
+        this.menu.hidden = true;
+        this.toggleButton.ariaExpanded = "false";
 
-        this.#toggleButton.addEventListener("click", this.toggleMenu, {
+        this.toggleButton.addEventListener("click", this.toggleMenu, {
             capture: true,
-            signal: this.#abortController.signal,
+            signal: this.abortController.signal,
         });
 
-        // TODO: Enable this after native <dialog> modals are used.
-        // If enabled now, this would close the modal since it's technically within the dropdown.
-        // const menuItemButtons = this.querySelectorAll<HTMLElement>(".pf-c-dropdown__menu-item");
+        const menuItemButtons = this.querySelectorAll<HTMLElement>(".pf-c-dropdown__menu-item");
 
-        // for (const menuItemButton of menuItemButtons) {
-        //     menuItemButton.addEventListener("click", this.hide, {
-        //         capture: true,
-        //         signal: this.#abortController.signal,
-        //     });
-        // }
+        for (const menuItemButton of menuItemButtons) {
+            menuItemButton.addEventListener("click", this.hide, {
+                capture: true,
+                signal: this.abortController.signal,
+            });
+        }
     }
 
     public override disconnectedCallback(): void {
         super.disconnectedCallback();
-        this.#abortController?.abort();
+        this.abortController?.abort();
     }
 }
 
diff --git a/web/src/elements/decorators/listen.ts b/web/src/elements/decorators/listen.ts
index 88a74e2be395..52645a758654 100644
--- a/web/src/elements/decorators/listen.ts
+++ b/web/src/elements/decorators/listen.ts
@@ -18,7 +18,7 @@ export interface ListenDecoratorOptions extends AddEventListenerOptions {
      *
      * @default window
      */
-    target?: EventTarget | null;
+    target?: EventTarget;
 }
 
 /**
@@ -88,7 +88,7 @@ function registerEventCallbacks<T extends ListenerMixin>(target: T): ListenDecor
 
         // Register all listeners
         for (const [propKey, eventType] of propToEventName) {
-            const { target: eventTarget = window, ...options } = propToOptions.get(propKey) || {};
+            const { target: eventTarget = this, ...options } = propToOptions.get(propKey) || {};
             const listener = this[propKey as keyof T];
 
             if (!listener) {
@@ -105,7 +105,7 @@ function registerEventCallbacks<T extends ListenerMixin>(target: T): ListenDecor
                 );
             }
 
-            (eventTarget || this).addEventListener(eventType, listener, {
+            eventTarget.addEventListener(eventType, listener, {
                 passive: true,
                 ...options,
                 signal: abortController.signal,
diff --git a/web/src/styles/authentik/components/Dropdown/dropdown.css b/web/src/styles/authentik/components/Dropdown/dropdown.css
index ba860581f28c..cb2041b187d5 100644
--- a/web/src/styles/authentik/components/Dropdown/dropdown.css
+++ b/web/src/styles/authentik/components/Dropdown/dropdown.css
@@ -1,3 +1,16 @@
+.pf-c-dropdown {
+    --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight: var(
+        --pf-global--spacer--md
+    );
+
+    --pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight: var(--pf-global--spacer--md);
+    --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft: var(
+        --pf-global--spacer--md
+    );
+}
+
 .pf-c-dropdown__menu-item[role="contentinfo"] {
     &,
     &:hover,

From e995fa55cf361dd04972b459e1911eb1b5fbde78 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:22:55 +0200
Subject: [PATCH 05/21] web/forms: improve form ARIA scaffolding and tighten
 group styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a sticky `ak-c-form__header` row to `Form.css` with a
`form-actions` part so form headers can host an inline title and
action cluster without each form reinventing the layout.

In `Form/form.css`, add a `.ak-m-content-center` variant for forms
that center their body inside a fixed-size container, and introduce a
PatternFly-compatible grid-based Radio label so the input and its
description align cleanly and the whole row is clickable.

Tighten the `FormGroup` summary spacing (use `spacer--sm` inline and
`spacer-xs` block) and hoist the high-contrast overrides onto the
open group so the details marker stays aligned.

Make `AKControlElement` abstract (requiring a `name`), rename
`isValid` → `valid`, declare it as implementing the new
`FormField<T>` interface, and mark it deprecated in favor of
`FormAssociatedElement`. Make `FormField` generic over the JSON
value type, extend `HTMLElement`, and drop the `Jsonifiable` runtime
import in favor of a type-only import. `HorizontalFormElement` now
searches for either legacy control elements or the new `FormField`
shape when picking its focus target.
---
 web/src/elements/ControlElement.ts            | 16 +++++-
 web/src/elements/forms/Form.css               | 24 +++++++++
 web/src/elements/forms/FormGroup.css          | 10 ++--
 .../elements/forms/HorizontalFormElement.ts   | 10 ++--
 .../elements/forms/form-associated-element.ts | 14 +++--
 .../styles/authentik/components/Form/form.css | 52 +++++++++++++++++++
 6 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/web/src/elements/ControlElement.ts b/web/src/elements/ControlElement.ts
index 6ace8ddec1f0..b81bb45e4602 100644
--- a/web/src/elements/ControlElement.ts
+++ b/web/src/elements/ControlElement.ts
@@ -1,4 +1,5 @@
 import { AKElement } from "#elements/Base";
+import { FormField } from "#elements/forms/form-associated-element";
 
 /**
  * @class - prototype for all of our hand-made input elements
@@ -7,13 +8,19 @@ import { AKElement } from "#elements/Base";
  * scrapers can find it easily, and adds a corresponding method for
  * extracting the value.
  *
+ * @deprecated At some point, in the near future, migrate all form controls to `FormAssociatedElement`
  */
-export class AKControlElement<T = string | string[]> extends AKElement {
+export abstract class AKControlElement<T = string | string[]>
+    extends AKElement
+    implements FormField<T>
+{
     constructor() {
         super();
         this.dataset.akControl = "true";
     }
 
+    public abstract name: string | null;
+
     /**
      * @deprecated Rename to `toJSON`
      */
@@ -28,11 +35,16 @@ export class AKControlElement<T = string | string[]> extends AKElement {
         return this.json();
     }
 
-    public get isValid(): boolean {
+    public get valid(): boolean {
         return true;
     }
 }
 
+/**
+ * Type predicate to determine if an element is a control element, i.e. has the `data-ak-control` attribute or is an instance of `AKControlElement`.
+ *
+ * @deprecated Use `isFormField` instead, and ensure that your form-associated element implements `FormField`.
+ */
 export function isControlElement(element: Element | HTMLElement): element is AKControlElement {
     if (!(element instanceof HTMLElement)) return false;
 
diff --git a/web/src/elements/forms/Form.css b/web/src/elements/forms/Form.css
index 0822f83d8916..9b78d9c9522e 100644
--- a/web/src/elements/forms/Form.css
+++ b/web/src/elements/forms/Form.css
@@ -12,3 +12,27 @@ select[multiple] {
     gap: var(--pf-global--spacer--md);
     min-height: 3rem;
 }
+
+:host > [part="form-actions"] {
+    display: flex;
+    gap: var(--pf-global--spacer--md);
+}
+
+.ak-c-form__header {
+    display: grid;
+    grid-template-columns: [title] 1fr [actions] auto;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--pf-global--ZIndex--md);
+    background: var(--pf-c-card--BackgroundColor);
+    padding-block-start: var(--pf-global--spacer--md);
+    margin-top: calc(-1 * var(--pf-c-card--first-child--PaddingTop));
+    padding-block-end: var(--pf-global--spacer--md);
+    margin-block-end: var(--pf-global--spacer--lg);
+
+    [part="form-actions"] {
+        grid-area: actions;
+    }
+}
diff --git a/web/src/elements/forms/FormGroup.css b/web/src/elements/forms/FormGroup.css
index 7bc4da6535d9..eb4db876d632 100644
--- a/web/src/elements/forms/FormGroup.css
+++ b/web/src/elements/forms/FormGroup.css
@@ -23,9 +23,9 @@ details {
 
     & > summary {
         list-style-position: outside;
-        margin-inline-start: 2em;
+        margin-inline-start: var(--pf-global--spacer--sm);
         padding-inline-start: calc(var(--pf-global--spacer--md) + 0.25rem);
-        padding-block: var(--pf-global--spacer--sm);
+        padding-block: var(--pf-global--spacer-xs);
         padding-inline: var(--pf-global--spacer--md);
         list-style-type: "\f105";
         cursor: pointer;
@@ -35,6 +35,8 @@ details {
 
         @media (prefers-contrast: more) {
             text-decoration: underline;
+            margin-inline-start: var(--pf-global--spacer--lg);
+            padding-block: var(--pf-global--spacer--sm);
         }
 
         &::marker {
@@ -49,10 +51,6 @@ details {
         }
     }
 
-    &:not([open]) summary {
-        padding-block: var(--pf-global--spacer--xs);
-    }
-
     &[open] summary {
         list-style-type: "\f107";
     }
diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts
index 3452628c84d5..10c56687648e 100644
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/web/src/elements/forms/HorizontalFormElement.ts
@@ -1,5 +1,6 @@
 import { AKElement } from "#elements/Base";
-import { AKControlElement, isControlElement } from "#elements/ControlElement";
+import { isControlElement } from "#elements/ControlElement";
+import { FormField, isFormField } from "#elements/forms/form-associated-element";
 import { isNameableElement, NamedElement } from "#elements/utils/inputs";
 
 import { AKFormErrors, ErrorProp } from "#components/ak-field-errors";
@@ -68,12 +69,12 @@ export class HorizontalFormElement extends AKElement {
 
     //#endregion
 
-    #controlledElement: AKControlElement | NamedElement | null = null;
+    #controlledElement: FormField | NamedElement | null = null;
 
     /**
      * The element that should be focused when the form is submitted.
      */
-    public get focusTarget(): AKControlElement | NamedElement<HTMLElement> | null {
+    public get focusTarget(): FormField | NamedElement<HTMLElement> | null {
         if (!(this.#controlledElement instanceof HTMLElement)) {
             return null;
         }
@@ -109,7 +110,8 @@ export class HorizontalFormElement extends AKElement {
 
         for (const element of this.querySelectorAll("*")) {
             // Is this element capable of being named?
-            if (!isControlElement(element) && !isNameableElement(element)) continue;
+            if (!isControlElement(element) && !isFormField(element) && !isNameableElement(element))
+                continue;
 
             this.#controlledElement = element;
 
diff --git a/web/src/elements/forms/form-associated-element.ts b/web/src/elements/forms/form-associated-element.ts
index 0bbef650a1b6..7d58b888da03 100644
--- a/web/src/elements/forms/form-associated-element.ts
+++ b/web/src/elements/forms/form-associated-element.ts
@@ -1,6 +1,6 @@
 import { AKElement } from "#elements/Base";
 
-import { Jsonifiable } from "type-fest";
+import type { Jsonifiable } from "type-fest";
 
 import { msg } from "@lit/localize";
 import { LitElement } from "lit";
@@ -10,19 +10,23 @@ import { createRef, Ref } from "lit/directives/ref.js";
 /**
  * Properties common to elements which represent a form field.
  */
-export interface FormField {
+export interface FormField<T = Jsonifiable> extends HTMLElement {
     /**
      * The name of the input, provided to the form.
+     *
+     * @todo Remove optionality after replacing `AKControlElement`.
      */
-    name: string | null;
+    name?: string | null;
 
     /**
      * A JSON representation of the value.
      */
-    toJSON(): Jsonifiable;
+    toJSON(): T;
 }
 
-export function isFormField(element: object): element is FormField {
+export function isFormField<T extends Jsonifiable = Jsonifiable>(
+    element: object,
+): element is FormField<T> {
     if (!("toJSON" in element)) return false;
 
     return typeof element.toJSON === "function";
diff --git a/web/src/styles/authentik/components/Form/form.css b/web/src/styles/authentik/components/Form/form.css
index c168ed24ceb3..06a41c588e8b 100644
--- a/web/src/styles/authentik/components/Form/form.css
+++ b/web/src/styles/authentik/components/Form/form.css
@@ -20,6 +20,15 @@
     );
 }
 
+.pf-c-form.ak-m-content-center {
+    --pf-c-form--GridGap: 0;
+
+    flex: 1 1 auto;
+    align-self: self-start;
+    align-content: center;
+    width: 100%;
+}
+
 .pf-c-form__group {
     column-gap: var(--pf-global--spacer--md);
 }
@@ -156,6 +165,49 @@ fieldset {
     }
 }
 
+/* #endregion */
+
+/* #region Radio */
+
+.pf-c-radio {
+    align-content: start;
+}
+
+label.pf-c-radio {
+    padding-inline: var(--pf-global--spacer--sm);
+    padding-block: var(--pf-global--spacer--md);
+    cursor: pointer;
+    background-color: var(--pf-c-radio--BackgroundColor, transparent);
+
+    display: grid;
+    grid-template-areas:
+        "input ."
+        "input .";
+    grid-template-columns: auto 1fr;
+    column-gap: var(--pf-global--spacer--md);
+
+    .pf-c-radio__input {
+        grid-area: input;
+        align-self: center;
+        margin-inline-start: var(--pf-global--spacer--md);
+    }
+
+    &:hover {
+        --pf-c-radio--BackgroundColor: var(--pf-global--BackgroundColor--150);
+    }
+
+    &:has(.pf-c-radio__input:checked) {
+        --pf-c-radio--BackgroundColor: var(--pf-global--BackgroundColor--200);
+    }
+
+    &:has(.pf-c-radio__input:disabled) {
+        cursor: not-allowed;
+        --pf-c-radio--BackgroundColor: var(--pf-global--BackgroundColor--200) !important;
+    }
+}
+
+/* #endregion */
+
 /* #region Dark Theme */
 
 [data-theme="dark"],

From 26b2cf9cde41efe31118af7595e996ff2be2f265 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:25:51 +0200
Subject: [PATCH 06/21] web/elements: migrate modal plumbing to the native
 <dialog> element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the bespoke modal stack with an `<ak-modal>` built on the
browser's native `<dialog>`, and collect every piece of the new
infrastructure under `#elements/dialogs`:

 * `ak-modal.ts` / `ak-modal.css` — the element + its PatternFly
   compatible styles.
 * `dialog.css` — the global `ak-c-dialog` token and backdrop rules,
   imported via the new `components/Modal/modal.css` entry point
   (replacing the old `base/modal.css` import in `base.css` and
   `interface.global.css`).
 * `shared.ts` — the `TransclusionChildElement` /
   `TransclusionChildSymbol` contract plus the parent-side helpers
   (`isTransclusionParentElement`, `slottedElementUpdatedAt`), so
   forms and tables hosted inside a modal can signal re-render hints
   to the dialog wrapper.
 * `directives.ts` / `invokers.ts` / `utils.ts` — the
   `modalInvoker`, `renderModal`, and `DialogInit` helpers that
   declarative call sites use to open a modal from a button without
   imperatively mounting the element.
 * `components/` — the ready-made invoker buttons
   (`ModalInvokerButton`, `IconEditButton`, `IconEditButtonByTagName`,
   `IconPermissionButton`) and the `components.ts` barrel.
 * `components/Modal/modal.css` — the short host wrapper that pulls
   `dialog.css` into the bundled base stylesheet chain.

Rewire the existing modal consumers to use the new contract:

 * `Form` now implements `TransclusionChildElement`, exposes
   `verboseName`/`verboseNamePlural`/`createLabel`/`submitVerb`
   statics, tracks visibility via `intersectionObserver`, and
   forwards `asModalInvoker` / `showModal` through the new
   `modalInvoker` / `renderModal` helpers. `ModalForm` and
   `ModelForm` follow the same shape. `ModalButton` drops its own
   `pf-c-modal-box` padding fix (the dialog handles it).
 * `Table` implements `TransclusionChildElement`, dispatches refresh
   via `AKRefreshEvent`, and exposes `display-box="contents"` so
   tables embedded in dialogs participate in layout checks.
   `TablePage` / `TableSearch` widen types and surface `search-form`
   / `search-input` parts for dialog-scoped styling.
 * `ak-about-modal`, `ObjectPermissionModal`,
   `RACLaunchEndpointModal`, the command palette, and the admin/user
   interface roots all move off `#elements/modals` and onto
   `#elements/dialogs`.
 * `AdminSettingsForm` / `AdminSettingsPage` render their header /
   actions through the new `ak-c-form__header` + `form-actions`
   slots introduced in the prior Form CSS commit, and swap the
   outermost `<section>` for `<main>` for better landmark semantics.
 * `elements/utils/render-roots.ts` and
   `elements/utils/unsafe.ts` gain dialog-aware helpers (notably a
   directive-based replacement for the old `unsafe` builder).
 * `base/globals.css` disables overscroll while any dialog is open
   via `html[data-dialog-count]`; `package.json` adds the
   `#elements/dialogs` barrel alias.

Delete the old `elements/modals/` directory (`ak-modal.ts`,
`shared.ts`, `styles.css`, `utils.ts`) and `styles/authentik/base/modal.css`
now that nothing imports them.
---
 web/package.json                              |   1 +
 .../admin/admin-settings/AdminSettingsForm.ts |  18 +-
 .../admin/admin-settings/AdminSettingsPage.ts |   5 +-
 web/src/admin/ak-about-modal.ts               | 190 ++++++----
 web/src/admin/ak-interface-admin.ts           |  89 +++--
 web/src/admin/rbac/ObjectPermissionModal.ts   |  86 +++--
 web/src/elements/buttons/ModalButton.ts       |  12 -
 .../commands/ak-command-palette-modal.css     |  95 +++--
 .../commands/ak-command-palette-modal.ts      |  13 +-
 .../elements/commands/ak-command-palette.css  |  32 +-
 .../elements/commands/ak-command-palette.ts   |   8 +-
 web/src/elements/commands/shared.ts           |   2 +-
 web/src/elements/dialogs/ak-modal.css         | 139 +++++++
 .../elements/{modals => dialogs}/ak-modal.ts  | 339 ++++++++----------
 web/src/elements/dialogs/components.ts        | 122 +++++++
 .../dialogs/components/IconEditButton.ts      |  49 +++
 .../components/IconEditButtonByTagName.ts     |  35 ++
 .../components/IconPermissionButton.ts        |  42 +++
 .../dialogs/components/ModalInvokerButton.ts  |  46 +++
 web/src/elements/dialogs/dialog.css           | 324 +++++++++++++++++
 web/src/elements/dialogs/directives.ts        | 187 ++++++++++
 web/src/elements/dialogs/index.ts             |   8 +
 web/src/elements/dialogs/invokers.ts          |  56 +++
 web/src/elements/dialogs/shared.ts            | 164 +++++++++
 web/src/elements/dialogs/utils.ts             | 158 ++++++++
 web/src/elements/forms/Form.ts                | 317 ++++++++++------
 web/src/elements/forms/ModalForm.ts           |  47 ++-
 web/src/elements/forms/ModelForm.ts           | 296 ++++++++++-----
 web/src/elements/modals/shared.ts             |  40 ---
 web/src/elements/modals/styles.css            | 148 --------
 web/src/elements/modals/utils.ts              | 332 -----------------
 web/src/elements/table/Table.ts               |  69 ++--
 web/src/elements/table/TablePage.ts           |  10 +-
 web/src/elements/table/TableSearch.ts         |   2 +
 web/src/elements/utils/render-roots.ts        |  78 ++++
 web/src/elements/utils/unsafe.ts              |  57 ++-
 web/src/styles/authentik/base.css             |   3 +-
 web/src/styles/authentik/base/globals.css     |   4 +
 web/src/styles/authentik/base/modal.css       | 249 -------------
 .../authentik/components/Modal/modal.css      |  25 ++
 web/src/styles/authentik/interface.global.css |   1 -
 .../RACLaunchEndpointModal.ts                 |   2 +-
 web/src/user/ak-interface-user.ts             |   4 +-
 43 files changed, 2461 insertions(+), 1443 deletions(-)
 create mode 100644 web/src/elements/dialogs/ak-modal.css
 rename web/src/elements/{modals => dialogs}/ak-modal.ts (60%)
 create mode 100644 web/src/elements/dialogs/components.ts
 create mode 100644 web/src/elements/dialogs/components/IconEditButton.ts
 create mode 100644 web/src/elements/dialogs/components/IconEditButtonByTagName.ts
 create mode 100644 web/src/elements/dialogs/components/IconPermissionButton.ts
 create mode 100644 web/src/elements/dialogs/components/ModalInvokerButton.ts
 create mode 100644 web/src/elements/dialogs/dialog.css
 create mode 100644 web/src/elements/dialogs/directives.ts
 create mode 100644 web/src/elements/dialogs/index.ts
 create mode 100644 web/src/elements/dialogs/invokers.ts
 create mode 100644 web/src/elements/dialogs/shared.ts
 create mode 100644 web/src/elements/dialogs/utils.ts
 delete mode 100644 web/src/elements/modals/shared.ts
 delete mode 100644 web/src/elements/modals/styles.css
 delete mode 100644 web/src/elements/modals/utils.ts
 delete mode 100644 web/src/styles/authentik/base/modal.css
 create mode 100644 web/src/styles/authentik/components/Modal/modal.css

diff --git a/web/package.json b/web/package.json
index 201ea934a87c..e7544493fd3b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -57,6 +57,7 @@
         "#styles/*.css": "./src/styles/*.css",
         "#styles/*": "./src/styles/*.js",
         "#common/*": "./src/common/*.js",
+        "#elements/dialogs": "./src/elements/dialogs/index.js",
         "#elements/*.css": "./src/elements/*.css",
         "#elements/*": "./src/elements/*.js",
         "#components/*.css": "./src/components/*.css",
diff --git a/web/src/admin/admin-settings/AdminSettingsForm.ts b/web/src/admin/admin-settings/AdminSettingsForm.ts
index 36497c969987..84c47b9eb992 100644
--- a/web/src/admin/admin-settings/AdminSettingsForm.ts
+++ b/web/src/admin/admin-settings/AdminSettingsForm.ts
@@ -14,11 +14,12 @@ import { akFooterLinkInput, IFooterLinkInput } from "./AdminSettingsFooterLinks.
 import { DEFAULT_CONFIG } from "#common/api/config";
 
 import { Form } from "#elements/forms/Form";
+import { SlottedTemplateResult } from "#elements/types";
 
 import { AdminApi, FooterLink, Settings, SettingsRequest } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { css, CSSResult, html, TemplateResult } from "lit";
+import { css, CSSResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -56,7 +57,20 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
         return result;
     }
 
-    protected override renderForm(): TemplateResult {
+    public override submitLabel = msg("Save changes");
+
+    public override renderHeader() {
+        return html`<div class="ak-c-form__header">
+            <h2 class="pf-c-title pf-m-2xl sr-only">${msg("Edit Settings")}</h2>
+            <div part="form-actions">${this.renderSubmitButton()}</div>
+        </div>`;
+    }
+
+    public override renderActions(): SlottedTemplateResult {
+        return null;
+    }
+
+    protected override renderForm(): SlottedTemplateResult {
         const { settings } = this;
 
         return html`
diff --git a/web/src/admin/admin-settings/AdminSettingsPage.ts b/web/src/admin/admin-settings/AdminSettingsPage.ts
index 2ddca9bd2413..bfc90f452c6d 100644
--- a/web/src/admin/admin-settings/AdminSettingsPage.ts
+++ b/web/src/admin/admin-settings/AdminSettingsPage.ts
@@ -66,19 +66,18 @@ export class AdminSettingsPage extends AKElement {
         if (!this.settings) return nothing;
 
         return html`
-            <section class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
+            <main class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
                 <div class="pf-c-card">
                     <div class="pf-c-card__body">
                         <ak-admin-settings-form
                             id="form"
                             .settings=${this.settings}
-                            action-label=${msg("Update settings")}
                             @ak-form-submitted=${{ handleEvent: this.#refresh, passive: true }}
                         >
                         </ak-admin-settings-form>
                     </div>
                 </div>
-            </section>
+            </main>
         `;
     }
 
diff --git a/web/src/admin/ak-about-modal.ts b/web/src/admin/ak-about-modal.ts
index a3c671181b46..52f9461d03ae 100644
--- a/web/src/admin/ak-about-modal.ts
+++ b/web/src/admin/ak-about-modal.ts
@@ -1,72 +1,51 @@
-import "#elements/EmptyState";
+import "#elements/ak-progress-bar";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { globalAK } from "#common/global";
 
+import { asInvoker } from "#elements/dialogs";
+import { AKModal } from "#elements/dialogs/ak-modal";
 import { WithBrandConfig } from "#elements/mixins/branding";
 import { WithLicenseSummary } from "#elements/mixins/license";
-import { AKModal } from "#elements/modals/ak-modal";
-import { asInvoker } from "#elements/modals/utils";
+import { SlottedTemplateResult } from "#elements/types";
 import { ThemedImage } from "#elements/utils/images";
 
-import { AdminApi, CapabilitiesEnum, LicenseSummaryStatusEnum } from "@goauthentik/api";
+import {
+    AdminApi,
+    CapabilitiesEnum,
+    LicenseSummaryStatusEnum,
+    SystemInfo,
+    Version,
+} from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { css, html, TemplateResult } from "lit";
+import { css, html } from "lit";
 import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
+import { until } from "lit-html/directives/until.js";
 import { customElement, state } from "lit/decorators.js";
 
 import PFAbout from "@patternfly/patternfly/components/AboutModalBox/about-modal-box.css";
 
 const DEFAULT_BRAND_IMAGE = "/static/dist/assets/images/flow_background.jpg";
 
-type AboutEntry = [label: string, content: string | TemplateResult];
+type AboutEntry = [label: string, content?: SlottedTemplateResult];
 
-async function fetchAboutDetails(): Promise<AboutEntry[]> {
-    const api = new AdminApi(DEFAULT_CONFIG);
-
-    const [status, version] = await Promise.all([
-        api.adminSystemRetrieve(),
-        api.adminVersionRetrieve(),
-    ]);
-
-    let build: string | TemplateResult = msg("Release");
-
-    if (globalAK().config.capabilities.includes(CapabilitiesEnum.CanDebug)) {
-        build = msg("Development");
-    } else if (version.buildHash) {
-        build = html`<a
-            rel="noopener noreferrer"
-            href="https://github.com/goauthentik/authentik/commit/${version.buildHash}"
-            target="_blank"
-            >${version.buildHash}</a
-        >`;
-    }
-
-    return [
-        [msg("Version"), version.versionCurrent],
-        [msg("UI Version"), import.meta.env.AK_VERSION],
-        [msg("Build"), build],
-        [msg("Python version"), status.runtime.pythonVersion],
-        [msg("Platform"), status.runtime.platform],
-        [msg("Kernel"), status.runtime.uname],
-        [
-            msg("OpenSSL"),
-            `${status.runtime.opensslVersion} ${status.runtime.opensslFipsEnabled ? "FIPS" : ""}`,
-        ],
-    ];
+function renderEntry([label, content = null]: AboutEntry): SlottedTemplateResult {
+    return html`<dt>${label}</dt>
+        <dd>${content === null ? msg("Loading...") : content}</dd>`;
 }
 
 @customElement("ak-about-modal")
 export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
-    public static override formatARIALabel = () => msg("About authentik");
+    public override formatARIALabel = () => msg("About authentik");
 
     public static hostStyles = [
+        ...AKModal.hostStyles,
         css`
-            dialog.ak-c-modal:has(ak-about-modal) {
-                --ak-c-modal--BackgroundColor: var(--pf-global--palette--black-900);
-                --ak-c-modal--BorderColor: var(--pf-global--palette--black-600);
+            .ak-c-dialog:has(ak-about-modal) {
+                --ak-c-dialog--BackgroundColor: var(--pf-global--palette--black-900);
+                --ak-c-dialog--BorderColor: var(--pf-global--palette--black-600);
             }
         `,
     ];
@@ -80,7 +59,7 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
             }
 
             .pf-c-about-modal-box {
-                --pf-c-about-modal-box--BackgroundColor: var(--ak-c-modal--BackgroundColor);
+                --pf-c-about-modal-box--BackgroundColor: var(--ak-c-dialog--BackgroundColor);
                 width: unset;
                 height: 100%;
                 max-height: unset;
@@ -89,6 +68,17 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
                 position: unset;
                 box-shadow: unset;
             }
+
+            [part="brand"] {
+                position: relative;
+            }
+
+            [part="loading-bar"] {
+                position: absolute;
+                z-index: 1;
+                inset-block-start: 0;
+                inset-inline: 0;
+            }
         `,
     ];
 
@@ -96,26 +86,100 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
 
     public static open = asInvoker(AboutModal);
 
+    #api = new AdminApi(DEFAULT_CONFIG);
+
+    protected canDebug = globalAK().config.capabilities.includes(CapabilitiesEnum.CanDebug);
+
     @state()
-    protected entries: AboutEntry[] | null = null;
+    protected version: Version | null = null;
 
-    public refresh() {
-        return fetchAboutDetails().then((entries) => {
-            this.entries = entries;
+    @state()
+    protected systemInfo: SystemInfo | null = null;
+
+    @state()
+    protected refreshPromise: Promise<[Version, SystemInfo]> | null = null;
+
+    public refresh = (): void => {
+        const versionPromise = this.#api.adminVersionRetrieve();
+        const systemInfoPromise = this.#api.adminSystemRetrieve();
+
+        this.refreshPromise = Promise.all([versionPromise, systemInfoPromise]).then((result) => {
+            this.version = result[0];
+            this.systemInfo = result[1];
+
+            return result;
         });
-    }
+    };
 
     public connectedCallback(): void {
         super.connectedCallback();
         this.refresh();
     }
 
+    protected renderVersionInfo = () => {
+        const { version } = this;
+
+        let build: SlottedTemplateResult = null;
+
+        if (this.canDebug) {
+            build = msg("Development");
+        } else if (version?.buildHash) {
+            build = html`<a
+                rel="noopener noreferrer"
+                href="https://github.com/goauthentik/authentik/commit/${version.buildHash}"
+                target="_blank"
+                >${version.buildHash}</a
+            >`;
+        } else if (version) {
+            build = msg("Release");
+        }
+
+        const entries: AboutEntry[] = [
+            [msg("Server Version"), version?.versionCurrent],
+            [msg("Build"), build],
+        ];
+
+        return entries.map(renderEntry);
+    };
+
+    protected renderSystemInfo = () => {
+        const { runtime } = this.systemInfo || {};
+
+        const sslLabel = runtime
+            ? `${runtime.opensslVersion} ${runtime.opensslFipsEnabled ? "FIPS" : ""}`
+            : null;
+
+        const entries: AboutEntry[] = [
+            [msg("Python version"), runtime?.pythonVersion],
+            [msg("Platform"), runtime?.platform],
+            [msg("OpenSSL"), sslLabel],
+            [
+                msg("Kernel"),
+                runtime?.uname ?? html`<div style="min-height: 3em;">${msg("Loading...")}</div>`,
+            ],
+        ];
+
+        return entries.map(renderEntry);
+    };
+
     //#region Renderers
 
     protected override renderCloseButton() {
         return null;
     }
 
+    protected renderLoadingBar(): SlottedTemplateResult {
+        return until(
+            this.refreshPromise?.then(() => null),
+            html`<ak-progress-bar
+                part="loading-bar"
+                indeterminate
+                ?inert=${!!this.systemInfo && !!this.version}
+                label=${msg("Loading")}
+            ></ak-progress-bar>`,
+        );
+    }
+
     protected override render() {
         let product = this.brandingTitle;
 
@@ -129,6 +193,7 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
             style=${styleMap({
                 "--pf-c-about-modal-box__hero--sm--BackgroundImage": `url(${DEFAULT_BRAND_IMAGE})`,
             })}
+            part="box"
         >
             <div class="pf-c-about-modal-box__close">
                 <button
@@ -140,7 +205,8 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
                     <i class="fas fa-times" aria-hidden="true"></i>
                 </button>
             </div>
-            <div class="pf-c-about-modal-box__brand">
+            <div class="pf-c-about-modal-box__brand" part="brand">
+                ${this.renderLoadingBar()}
                 ${ThemedImage({
                     src: this.brandingFavicon,
                     alt: msg("authentik Logo"),
@@ -149,21 +215,25 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) {
                     themedUrls: this.brandingFaviconThemedUrls,
                 })}
             </div>
-            <div class="pf-c-about-modal-box__header">
-                <h1 class="pf-c-title pf-m-4xl" id="modal-title">${product}</h1>
+            <div class="pf-c-about-modal-box__header" part="header">
+                <h1 class="pf-c-title pf-m-4xl" id="modal-title" part="title">${product}</h1>
             </div>
             <div class="pf-c-about-modal-box__hero"></div>
             <div class="pf-c-about-modal-box__content">
                 <div class="pf-c-about-modal-box__body">
                     <div class="pf-c-content">
-                        ${this.entries
-                            ? html`<dl>
-                                  ${this.entries.map(([label, value]) => {
-                                      return html`<dt>${label}</dt>
-                                          <dd>${value}</dd>`;
-                                  })}
-                              </dl>`
-                            : html`<ak-empty-state loading></ak-empty-state>`}
+                        <dl>
+                            <dt>${msg("UI Version")}</dt>
+                            <dd>${import.meta.env.AK_VERSION}</dd>
+                            ${until(
+                                this.refreshPromise?.then(this.renderVersionInfo),
+                                this.renderVersionInfo(),
+                            )}
+                            ${until(
+                                this.refreshPromise?.then(this.renderSystemInfo),
+                                this.renderSystemInfo(),
+                            )}
+                        </dl>
                     </div>
                 </div>
                 <p class="pf-c-about-modal-box__strapline"></p>
diff --git a/web/src/admin/ak-interface-admin.ts b/web/src/admin/ak-interface-admin.ts
index b4a0f1b5247c..d6b3d56b5d90 100644
--- a/web/src/admin/ak-interface-admin.ts
+++ b/web/src/admin/ak-interface-admin.ts
@@ -4,6 +4,7 @@ import "#elements/sidebar/Sidebar";
 import "#elements/sidebar/SidebarItem";
 import "#elements/router/RouterOutlet";
 import "#elements/commands/ak-command-palette";
+import "#elements/commands/ak-command-palette-user-modal";
 
 import {
     createAdminSidebarEnterpriseEntries,
@@ -24,10 +25,10 @@ import {
     PaletteCommandNamespace,
 } from "#elements/commands/shared";
 import { listen } from "#elements/decorators/listen";
+import { renderDialog } from "#elements/dialogs";
 import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 import { WithNotifications } from "#elements/mixins/notifications";
 import { canAccessAdmin, WithSession } from "#elements/mixins/session";
-import { renderDialog } from "#elements/modals/utils";
 import { AKDrawerChangeEvent } from "#elements/notifications/events";
 import {
     DrawerState,
@@ -36,6 +37,7 @@ import {
     renderNotificationDrawerPanel,
 } from "#elements/notifications/utils";
 import { navigate } from "#elements/router/RouterOutlet";
+import { SlottedTemplateResult } from "#elements/types";
 
 import Styles from "#admin/ak-interface-admin.css";
 import { ROUTES } from "#admin/Routes";
@@ -46,6 +48,7 @@ import { LOCALE_STATUS_EVENT, LocaleStatusEventDetail, msg } from "@lit/localize
 import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { guard } from "lit/directives/guard.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -108,13 +111,17 @@ export class AdminInterface extends WithCapabilitiesConfig(
     @state()
     protected drawer: DrawerState = readDrawerParams();
 
-    @listen(AKDrawerChangeEvent)
+    @listen(AKDrawerChangeEvent, {
+        target: window,
+    })
     protected drawerListener = (event: AKDrawerChangeEvent) => {
         this.drawer = event.drawer;
         persistDrawerParams(event.drawer);
     };
 
-    @listen(LOCALE_STATUS_EVENT)
+    @listen(LOCALE_STATUS_EVENT, {
+        target: window,
+    })
     localeStatusListener = (event: CustomEvent<LocaleStatusEventDetail>) => {
         if (event.detail.status === "ready") {
             this.synchronizeSidebarEntries();
@@ -266,40 +273,7 @@ export class AdminInterface extends WithCapabilitiesConfig(
                         <i aria-hidden="true" class="fas fa-bars"></i>
                     </button>
 
-                    <button
-                        slot="nav-buttons"
-                        @click=${this.commandPalette.showListener}
-                        class="pf-c-button pf-m-plain command-palette-trigger"
-                        aria-label=${msg("Open Command Palette", {
-                            id: "command-palette-trigger-label",
-                            desc: "Label for the button that opens the command palette",
-                        })}
-                    >
-                        <pf-tooltip position="top-end">
-                            <div slot="content" class="ak-tooltip__content--inline">
-                                ${msg("Open Command Palette", {
-                                    id: "command-palette-trigger-tooltip",
-                                    desc: "Tooltip for the button that opens the command palette",
-                                })}
-                                <div class="ak-c-kbd"><kbd>Ctrl</kbd> + <kbd>K</kbd></div>
-                            </div>
-
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                aria-hidden="true"
-                                class="ak-c-vector-icon"
-                                role="img"
-                                viewBox="0 0 32 32"
-                            >
-                                <path
-                                    d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2m0 2v4H6v-4Zm-20 20v-14h20v14Z"
-                                />
-                                <path
-                                    d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41 4.24-4.24-4.24-4.24z"
-                                />
-                            </svg>
-                        </pf-tooltip>
-                    </button>
+                    ${this.renderCommandPaletteButton()}
                     <ak-version-banner></ak-version-banner>
                     <ak-enterprise-status interface="admin"></ak-enterprise-status>
                 </ak-page-navbar>
@@ -344,6 +318,47 @@ export class AdminInterface extends WithCapabilitiesConfig(
             ${this.commandPalette}`;
     }
 
+    protected renderCommandPaletteButton(): SlottedTemplateResult {
+        return guard([this.commandPalette.showListener], () => {
+            const macOS = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+
+            const primaryModifierKey = macOS ? "⌘" : "Ctrl";
+
+            return html`<button
+                slot="nav-buttons"
+                @click=${this.commandPalette.showListener}
+                class="pf-c-button pf-m-plain command-palette-trigger"
+                aria-label=${msg("Open Command Palette", {
+                    id: "command-palette-trigger-label",
+                    desc: "Label for the button that opens the command palette",
+                })}
+            >
+                <pf-tooltip position="top-end">
+                    <div slot="content" class="ak-tooltip__content--inline">
+                        ${msg("Open Command Palette", {
+                            id: "command-palette-trigger-tooltip",
+                            desc: "Tooltip for the button that opens the command palette",
+                        })}
+                        <div class="ak-c-kbd"><kbd>${primaryModifierKey}</kbd> + <kbd>K</kbd></div>
+                    </div>
+
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                        class="ak-c-vector-icon"
+                        role="img"
+                        viewBox="0 0 32 32"
+                    >
+                        <path
+                            d="M26 4.01H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-20a2 2 0 0 0-2-2m0 2v4H6v-4Zm-20 20v-14h20v14Z"
+                        />
+                        <path d="m10.76 16.18 2.82 2.83-2.82 2.83 1.41 1.41 4.24-4.24-4.24-4.24z" />
+                    </svg>
+                </pf-tooltip>
+            </button>`;
+        });
+    }
+
     //#endregion
 }
 
diff --git a/web/src/admin/rbac/ObjectPermissionModal.ts b/web/src/admin/rbac/ObjectPermissionModal.ts
index b05b97279332..7d535f80bde3 100644
--- a/web/src/admin/rbac/ObjectPermissionModal.ts
+++ b/web/src/admin/rbac/ObjectPermissionModal.ts
@@ -1,18 +1,19 @@
 import "#admin/rbac/ak-rbac-object-permission-page";
 import "#elements/forms/ModalForm";
 
+import { PFSize } from "#common/enums";
+
 import { AKElement } from "#elements/Base";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { ModelForm } from "#elements/forms/ModelForm";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { ModelEnum } from "@goauthentik/api";
 
-import { msg, str } from "@lit/localize";
-import { css, CSSResult, html, TemplateResult } from "lit";
+import { msg } from "@lit/localize";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
 /**
  * This is a bit of a hack to get the viewport checking from ModelForm,
  * even though we actually don't need a form here.
@@ -20,21 +21,34 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
  */
 @customElement("ak-rbac-object-permission-modal-form")
 export class ObjectPermissionsPageForm extends ModelForm<never, string> {
-    @property()
+    public static verboseName = msg("Object Permission");
+    public static verboseNamePlural = msg("Object Permissions");
+    public static createLabel = msg("Update");
+
+    public override cancelButtonLabel = msg("Close");
+    public override cancelable = true;
+
+    public override size = PFSize.XLarge;
+
+    @property({ type: String })
     public model: ModelEnum | null = null;
 
-    @property()
-    public objectPk?: string | number;
+    @property({ type: String })
+    public objectPk: string | null = null;
 
-    protected loadInstance(): Promise<never> {
+    protected override loadInstance(): Promise<never> {
         return Promise.resolve() as never;
     }
 
-    protected send(): Promise<never> {
+    protected override send(): Promise<never> {
         return Promise.resolve() as never;
     }
 
-    protected renderForm(): SlottedTemplateResult {
+    public override renderActions(): SlottedTemplateResult {
+        return null;
+    }
+
+    protected override renderForm(): SlottedTemplateResult {
         return html`<ak-rbac-object-permission-page
             embedded
             .model=${this.model}
@@ -45,50 +59,30 @@ export class ObjectPermissionsPageForm extends ModelForm<never, string> {
     }
 }
 
+/**
+ * @deprecated Use {@linkcode IconPermissionButton}
+ */
 @customElement("ak-rbac-object-permission-modal")
 export class ObjectPermissionModal extends AKElement {
-    static styles: CSSResult[] = [
-        PFButton,
-        css`
-            button {
-                outline-color: red;
-            }
-        `,
-    ];
-
-    @property()
+    protected override createRenderRoot(): HTMLElement | DocumentFragment {
+        return this;
+    }
+
+    @property({ type: String })
     public model: ModelEnum | null = null;
 
-    @property()
-    public objectPk?: string | number;
+    // TODO: Switch to attribute-casing after the RBAC components settle.
+    @property({ type: String })
+    public objectPk: string | null = null;
 
     @property({ type: String })
     public label: string | null = null;
 
-    render(): TemplateResult {
-        return html`
-            <ak-forms-modal .showSubmitButton=${false} cancelText=${msg("Close")}>
-                <span slot="header"
-                    >${msg(str`Update "${this.label || "object"}" Permissions`)}</span
-                >
-                <ak-rbac-object-permission-modal-form
-                    slot="form"
-                    .model=${this.model}
-                    .objectPk=${this.objectPk}
-                ></ak-rbac-object-permission-modal-form>
-                <button
-                    slot="trigger"
-                    type="button"
-                    part="button"
-                    class="pf-c-button pf-m-plain"
-                    aria-label=${msg(str`Open "${this.label || "object"}" permissions modal`)}
-                >
-                    <pf-tooltip position="top" content=${msg("Permissions")}>
-                        <i class="fas fa-lock" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </ak-forms-modal>
-        `;
+    protected override render(): SlottedTemplateResult {
+        return IconPermissionButton(this.label, {
+            model: this.model,
+            objectPk: this.objectPk,
+        });
     }
 }
 
diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 2804bebd9288..ddb59e753eb5 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -22,18 +22,6 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
 
 export const MODAL_BUTTON_STYLES = css`
-    /**
-     * Fixes padding in scrollable modal bodies, splitting the space between
-     * header and body.
-     */
-    .pf-c-modal-box__header {
-        padding-bottom: calc(var(--pf-c-modal-box__body--PaddingTop) / 2);
-    }
-
-    .pf-c-modal-box__body {
-        padding-top: calc(var(--pf-c-modal-box__body--PaddingTop) / 2);
-    }
-
     :host {
         text-align: left;
         font-size: var(--pf-global--FontSize--md);
diff --git a/web/src/elements/commands/ak-command-palette-modal.css b/web/src/elements/commands/ak-command-palette-modal.css
index 84e5d6abc235..aa5837051987 100644
--- a/web/src/elements/commands/ak-command-palette-modal.css
+++ b/web/src/elements/commands/ak-command-palette-modal.css
@@ -6,36 +6,34 @@
     --ak-c-command-palette--PaddingInline: calc(
         2 * var(--pf-global--spacer--form-element) + var(--pf-global--spacer--sm)
     );
-    --ak-c-command-palette--Translucency: 25%;
 
     --ak-c-command-palette__group--BorderColor: var(
         --pf-global--BackgroundColor--dark-transparent-200
     );
-    --ak-c-command-palette__group--Color: var(--pf-global--palette--purple-200);
+    --ak-c-command-palette__group--Color: var(--pf-global--palette--purple-100);
 
     --ak-fieldset--BorderColor: transparent;
 
-    --ak-c-command-palette__item--BackgroundColor: var(--pf-global--palette--purple-700);
+    --ak-c-command-palette__item--BackgroundColor: transparent;
+    --ak-c-command-palette__item--Color: var(--pf-global--palette--purple-50);
+    --ak-c-command-palette__item--selected--BackgroundColor: var(--pf-global--palette--purple-50);
+    --ak-c-command-palette__item--selected--Color: var(--pf-global--palette--red-500);
+    --ak-c-command-palette__item__suffix--Color: var(--pf-global--palette--gold-200);
+    --ak-c-command-palette__item--selected__suffix--Color: var(--pf-global--palette--gold-700);
 
-    --ak-c-command-palette__item--Color: var(--pf-global--palette--purple-700);
-
-    --ak-c-command-palette__item--Color: var(--pf-global--palette--blue-50);
-    --ak-c-command-palette__item--selected--BackgroundColor: var(--pf-global--palette--blue-400);
     --ak-c-command-palette__item--hover--BackgroundColor: color-mix(
-        var(--pf-global--palette--purple-600),
-        var(--pf-global--palette--purple-700) 80%
+        var(--ak-c-dialog--BackgroundColor),
+        var(--pf-global--palette--purple-200) 40%
     );
-    --ak-c-command-palette__item--hover-selected--BackgroundColor: var(
-        --pf-global--palette--blue-300
+
+    --ak-c-command-palette__item--hover-selected--BackgroundColor: color-mix(
+        var(--pf-global--palette--purple-50),
+        var(--pf-global--palette--white) 50%
     );
 
     --ak-c-command-palette__item--AccentColor: var(--pf-global--palette--purple-600);
     --ak-c-command-palette__item--AccentWidth: 0.5px;
 
-    @media (prefers-reduced-transparency: reduce) {
-        --ak-c-command-palette--Translucency: 0%;
-    }
-    will-change: opacity, text-decoration-color, background-color, color;
     transform: translate3d(0, 0, 0); /* Fixes rendering artifacts. */
 
     @media (prefers-contrast: more) {
@@ -59,11 +57,26 @@
     --pf-c-empty-state__icon--Color: var(--pf-global--Color--100);
 }
 
+[part="command-field-container"] {
+    position: relative;
+    z-index: 3;
+}
+
 [part="command-field"] {
-    border-bottom: 0.5px solid var(--pf-global--palette--black-600);
     padding-block: var(--pf-global--spacer--sm);
     margin-inline: var(--pf-global--spacer--sm);
     padding-inline-start: var(--pf-global--spacer--sm);
+
+    &::after {
+        content: "";
+        display: block;
+        inset-inline: var(--pf-global--spacer--md);
+        inset-block-end: 0;
+        position: absolute;
+        height: 0.5px;
+        z-index: 3;
+        background-color: var(--pf-global--palette--purple-100);
+    }
 }
 
 #command-input {
@@ -79,8 +92,8 @@
     outline: none;
 
     &::placeholder {
-        color: var(--pf-global--palette--purple-100);
-        font-weight: 100;
+        color: var(--pf-global--palette--purple-50);
+        font-weight: 300;
         font-family: var(--pf-global--FontFamily--heading--sans-serif);
     }
 }
@@ -108,19 +121,24 @@
         inset-block-start: 0;
         z-index: 2;
 
-        background: var(--pf-global--palette--purple-700);
+        & > * {
+            filter: var(--ak-global--BackgroundContrastFilter);
+        }
     }
 
     &:has(.selected),
     &:hover {
         --ak-c-command-palette__group--Color: var(--pf-global--palette--purple-50);
-        --ak-c-command-palette__item--AccentColor: var(--pf-global--palette--purple-500);
+        --ak-c-command-palette__item--AccentColor: var(--pf-global--palette--black-150);
     }
 }
 
 [part="results"] {
     overflow-y: auto;
-    max-height: calc(100dvh - (1.75 * var(--ak-c-modal--MarginBlockStart)));
+    max-height: calc(100dvh - (1.75 * var(--ak-c-dialog--MarginBlockStart)));
+    overscroll-behavior-inline: none;
+    overscroll-behavior-block: contain;
+    scrollbar-gutter: stable;
 
     @supports (scrollbar-width: thin) {
         scrollbar-width: none;
@@ -146,24 +164,26 @@
 [part="command-item-label"] {
     grid-row: label;
     font-family: var(--pf-global--FontFamily--heading--sans-serif);
+    font-weight: 500;
 }
 
 [part="command-item-prefix"] {
     grid-row: icon / prefix;
     grid-column: icon / prefix;
-    font-variant: all-small-caps;
-    line-height: calc(var(--ak-c-modal__title--LineHeight) + 0.05);
-    font-weight: bold;
-    color: var(--pf-global--palette--gold-200);
+    line-height: calc(var(--ak-c-dialog__title--LineHeight) + 1);
+    color: var(--pf-global--palette--blue-300);
+    text-transform: uppercase;
+    font-size: 0.7em;
+    font-weight: 500;
 }
 
 [part="command-item-suffix"] {
     grid-area: suffix;
     font-variant: all-small-caps;
-    line-height: calc(var(--ak-c-modal__title--LineHeight) + 0.05);
+    line-height: calc(var(--ak-c-dialog__title--LineHeight) + 0.05);
     font-weight: bold;
     display: flex;
-    color: var(--pf-global--palette--gold-200);
+    color: var(--ak-c-command-palette__item__suffix--Color);
     justify-content: end;
     align-items: center;
 }
@@ -213,32 +233,35 @@
     }
 
     &:hover {
-        background-color: color-mix(
-            var(--ak-c-command-palette__item--hover--BackgroundColor),
-            transparent var(--ak-c-command-palette--Translucency)
-        );
+        background-color: var(--ak-c-command-palette__item--hover--BackgroundColor);
+
+        [part="command-item-label"] {
+            text-decoration: underline;
+        }
     }
 }
-[part="command-item"] {
-    padding-inline-start: var(--pf-global--spacer--md);
-}
 
 [part="command-item"]:hover {
     --ak-c-command-palette__item--AccentWidth: 1px;
-    --ak-c-command-palette__item--AccentColor: var(--ak-accent);
+    --ak-c-command-palette__item--AccentColor: var(--ak-c-command-palette__item--Color);
 }
 
 [part="command-item"].selected {
     --ak-c-command-palette__item--AccentWidth: 3px;
-    --ak-c-command-palette__item--AccentColor: var(--ak-accent);
+    --ak-c-command-palette__item--AccentColor: var(--ak-c-command-palette__item--Color);
 
     --ak-c-command-palette__item--BackgroundColor: var(
         --ak-c-command-palette__item--selected--BackgroundColor
     );
+    --ak-c-command-palette__item--Color: var(--ak-c-command-palette__item--selected--Color);
     --ak-c-command-palette__item--hover--BackgroundColor: var(
         --ak-c-command-palette__item--hover-selected--BackgroundColor
     );
 
+    --ak-c-command-palette__item__suffix--Color: var(
+        --ak-c-command-palette__item--selected__suffix--Color
+    );
+
     &:hover {
         --ak-c-command-palette__item--AccentWidth: 3px;
     }
diff --git a/web/src/elements/commands/ak-command-palette-modal.ts b/web/src/elements/commands/ak-command-palette-modal.ts
index ac676487df44..908c23ae76cc 100644
--- a/web/src/elements/commands/ak-command-palette-modal.ts
+++ b/web/src/elements/commands/ak-command-palette-modal.ts
@@ -16,9 +16,8 @@ import {
     resolveCommandNamespace,
 } from "#elements/commands/shared";
 import { listen } from "#elements/decorators/listen";
-import { AKModal } from "#elements/modals/ak-modal";
-import { TransclusionElement } from "#elements/modals/shared";
-import { asInvoker, renderDialog } from "#elements/modals/utils";
+import { asInvoker, renderDialog } from "#elements/dialogs";
+import { AKModal } from "#elements/dialogs/ak-modal";
 import { SlottedTemplateResult } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
 import { FocusTarget } from "#elements/utils/focus";
@@ -48,7 +47,7 @@ export class AKCommandPaletteModal extends AKModal {
     public static open = asInvoker(AKCommandPaletteModal);
 
     protected autofocusTarget = new FocusTarget<HTMLInputElement>();
-    protected formRef = createRef<HTMLFormElement & TransclusionElement>();
+    protected formRef = createRef<HTMLFormElement>();
 
     public readonly actionNamespaceSymbol = CommandNamespaceSymbol[PaletteCommandNamespace.Action];
     public readonly navigationNamespaceSymbol =
@@ -446,9 +445,7 @@ export class AKCommandPaletteModal extends AKModal {
 
     //#region Event Listeners
 
-    @listen(AKCommandChangeEvent, {
-        target: this,
-    })
+    @listen(AKCommandChangeEvent)
     protected commandChangeListener = (event: AKCommandChangeEvent) => {
         this.setCommands(event.commands, event.previousCommands);
     };
@@ -621,7 +618,7 @@ export class AKCommandPaletteModal extends AKModal {
             @submit=${this.submitListener}
         >
             <div
-                class="input"
+                part="command-field-container"
                 aria-expanded=${this.open ? "true" : "false"}
                 aria-autocomplete="list"
                 role="combobox"
diff --git a/web/src/elements/commands/ak-command-palette.css b/web/src/elements/commands/ak-command-palette.css
index a7a416129300..0db6cb20516b 100644
--- a/web/src/elements/commands/ak-command-palette.css
+++ b/web/src/elements/commands/ak-command-palette.css
@@ -2,16 +2,34 @@
     display: block;
 }
 
-.ak-c-modal:has([data-is="command-palette-modal"]) {
-    overflow: visible;
-    --ak-c-modal--MarginBlockStart: 25dvh;
-    --ak-c-modal--BackgroundColor: var(--pf-global--palette--purple-700);
-    --ak-c-modal--BorderColor: var(--pf-global--palette--purple-700);
-    --ak-c-modal__backdrop--active--BackdropFilter: blur(1px);
-    --ak-c-modal__backdrop--active--BackgroundColor: hsla(0, 0%, 0%, 0.25);
+.ak-c-dialog:has([data-is="command-palette-modal"]) {
+    --ak-c-dialog--MarginBlockStart: 25dvh;
+    --ak-c-dialog--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
+    --ak-c-dialog--BorderWidth: 0.5px;
+    --ak-c-dialog--BorderColor: var(--pf-global--BorderColor--100);
+    --ak-c-dialog__backdrop--active--BackdropFilter: blur(1px);
 
     --ak-c-command-palette--BackdropFilter: blur(4px);
 
+    --ak-c-command-palette--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+    --ak-c-command-palette--Translucency: 25%;
+
+    --ak-c-dialog--BackgroundColor: color-mix(
+        var(--ak-c-command-palette--BackgroundColor),
+        transparent var(--ak-c-command-palette--Translucency)
+    );
+
+    @media (prefers-reduced-transparency: reduce) {
+        --ak-c-command-palette--Translucency: 0% !important;
+    }
+
     border-radius: var(--pf-global--BorderRadius--sm);
     backdrop-filter: var(--ak-c-command-palette--BackdropFilter);
+    transform: translate3d(0, 0, 0); /* Fixes rendering artifacts. */
+    margin-block-start: var(--ak-c-dialog--MarginBlockStart);
+}
+
+.ak-c-dialog:has([data-is="command-palette-modal"][theme="dark"]) {
+    --ak-c-command-palette--Translucency: 75%;
+    --ak-c-dialog--BorderColor: var(--pf-global--BorderColor--400);
 }
diff --git a/web/src/elements/commands/ak-command-palette.ts b/web/src/elements/commands/ak-command-palette.ts
index 8c3eb8eef3a7..5a5bcd02a26f 100644
--- a/web/src/elements/commands/ak-command-palette.ts
+++ b/web/src/elements/commands/ak-command-palette.ts
@@ -29,7 +29,7 @@ export class AKCommandPalette extends AKElement {
     constructor() {
         super();
 
-        this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase());
+        this.logger = ConsoleLogger.prefix(this.localName);
 
         this.dialog = this.ownerDocument.createElement("dialog");
         this.modal = this.ownerDocument.createElement("ak-command-palette-modal");
@@ -39,7 +39,11 @@ export class AKCommandPalette extends AKElement {
         this.dialog.appendChild(this.defaultSlot);
     }
 
-    @listen("keydown", { passive: false, capture: true })
+    @listen("keydown", {
+        target: window,
+        passive: false,
+        capture: true,
+    })
     protected keydownListener = (event: KeyboardEvent) => {
         if (!this.activationKeys.has(event.key) || (!event.metaKey && !event.ctrlKey)) {
             return;
diff --git a/web/src/elements/commands/shared.ts b/web/src/elements/commands/shared.ts
index 649c461cf084..528e54fdea19 100644
--- a/web/src/elements/commands/shared.ts
+++ b/web/src/elements/commands/shared.ts
@@ -1,5 +1,5 @@
 import { AKCommandChangeEvent } from "#elements/commands/events";
-import { AKModal } from "#elements/modals/ak-modal";
+import { AKModal } from "#elements/dialogs/ak-modal";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { AboutModal } from "#admin/ak-about-modal";
diff --git a/web/src/elements/dialogs/ak-modal.css b/web/src/elements/dialogs/ak-modal.css
new file mode 100644
index 000000000000..51e8e91a5187
--- /dev/null
+++ b/web/src/elements/dialogs/ak-modal.css
@@ -0,0 +1,139 @@
+/* #region Buttons */
+
+.ak-c-dialog__close-button {
+    position: absolute;
+    top: var(--ak-c-dialog--c-button--Top);
+    right: var(--ak-c-dialog--c-button--Right);
+}
+
+.ak-c-dialog__close-button + .ak-c-dialog__header {
+    margin-right: var(--ak-c-dialog--c-button--sibling--MarginRight);
+}
+
+/* #endregion */
+
+/* #region Header */
+
+.ak-c-dialog__header {
+    container: ak-dialog-header / inline-size;
+
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-top: var(--ak-c-dialog__header--PaddingTop);
+    padding-bottom: var(--ak-c-dialog__header--PaddingBottom);
+    padding-right: var(--ak-c-dialog__header--PaddingRight);
+    padding-left: var(--ak-c-dialog__header--PaddingLeft);
+}
+
+.ak-c-dialog__header.pf-m-help {
+    display: flex;
+    flex-direction: row;
+}
+
+.ak-c-dialog__header:last-child {
+    padding-bottom: var(--ak-c-dialog__header--last-child--PaddingBottom);
+}
+
+.ak-c-dialog__header + .ak-c-dialog__body,
+.ak-c-dialog__header + slot + .ak-c-dialog__body {
+    --ak-c-dialog__body--PaddingTop: 0;
+}
+
+.ak-c-dialog__header-main {
+    flex-grow: 1;
+    min-width: 0;
+}
+
+/* #endregion */
+
+/* #region Title */
+
+.ak-c-dialog__title,
+.ak-c-dialog__title-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ak-c-dialog__title {
+    flex: 0 0 auto;
+    font-family: var(--ak-c-dialog__title--FontFamily);
+    font-size: var(--ak-c-dialog__title--FontSize);
+    line-height: var(--ak-c-dialog__title--LineHeight);
+}
+
+.ak-c-dialog__title.pf-m-icon {
+    display: flex;
+}
+
+.ak-c-dialog__title-icon {
+    margin-right: var(--ak-c-dialog__title-icon--MarginRight);
+    color: var(--ak-c-dialog__title-icon--Color);
+}
+
+.ak-c-dialog__description {
+    padding-top: var(--ak-c-dialog__description--PaddingTop);
+}
+
+/* #endregion */
+
+/* #region Body */
+
+.ak-c-dialog__body {
+    min-height: var(--ak-c-dialog__body--MinHeight);
+    padding-top: var(--ak-c-dialog__body--PaddingTop);
+    padding-right: var(--ak-c-dialog__body--PaddingRight);
+    padding-left: var(--ak-c-dialog__body--PaddingLeft);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    word-break: break-word;
+    -webkit-overflow-scrolling: touch;
+}
+
+.ak-c-dialog__body:last-child {
+    padding-bottom: var(--ak-c-dialog__body--last-child--PaddingBottom);
+}
+
+.ak-c-dialog__footer {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: end;
+
+    margin-block-start: var(--pf-global--spacer--md);
+
+    padding-top: var(--ak-c-dialog__footer--PaddingTop);
+    padding-right: var(--ak-c-dialog__footer--PaddingRight);
+    padding-bottom: var(--ak-c-dialog__footer--PaddingBottom);
+    padding-left: var(--ak-c-dialog__footer--PaddingLeft);
+
+    box-shadow: var(--ak-c-dialog__footer--BoxShadow);
+    gap: var(--pf-global--spacer--xs);
+
+    @media screen and (min-width: 576px) {
+        gap: var(--pf-global--spacer--sm);
+    }
+}
+
+/* #endregion */
+
+/* #region Footer */
+
+fieldset.ak-c-dialog__footer {
+    --ak-fieldset__legend--PaddingInlineBase: var(--pf-global--spacer--md);
+    padding-block: calc(var(--ak-fieldset__legend--PaddingInlineBase) / 2);
+    border-inline: none;
+    border-block-end: none;
+
+    --ak-c-dialog__footer--c-button--sm--MarginRight: var(
+        --ak-c-dialog__footer--c-button--MarginRight
+    );
+
+    & > ak-spinner-button:not(:last-child) {
+        margin-right: var(--ak-c-dialog__footer--c-button--MarginRight);
+    }
+}
+
+/* #endregion */
diff --git a/web/src/elements/modals/ak-modal.ts b/web/src/elements/dialogs/ak-modal.ts
similarity index 60%
rename from web/src/elements/modals/ak-modal.ts
rename to web/src/elements/dialogs/ak-modal.ts
index 41bd53b9b953..677b5bce25f6 100644
--- a/web/src/elements/modals/ak-modal.ts
+++ b/web/src/elements/dialogs/ak-modal.ts
@@ -1,15 +1,16 @@
+import Styles from "./ak-modal.css";
+import DialogStyles from "./dialog.css";
+
 import { PFSize } from "#common/enums";
 
 import { AKElement } from "#elements/Base";
-import { isTransclusionElement, TransclusionElement } from "#elements/modals/shared";
-import Styles from "#elements/modals/styles.css";
+import { DialogInit, renderDialog } from "#elements/dialogs";
 import {
-    DialogInit,
-    modalInvoker,
-    ModalInvokerDirectiveResult,
-    ModalInvokerInit,
-    renderDialog,
-} from "#elements/modals/utils";
+    isTransclusionElement,
+    TransclusionChildElement,
+    TransclusionParentElement,
+    TransclusionParentSymbol,
+} from "#elements/dialogs/shared";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { ConsoleLogger, Logger } from "#logger/browser";
@@ -28,20 +29,35 @@ import PFFormControl from "@patternfly/patternfly/components/FormControl/form-co
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 
+/**
+ * A component used to display any content in a modal dialog with a consistent style and behavior.
+ * This component may be used directly to wrap content, or extended for more specific modal implementations.
+ *
+ * @see {@link renderDialog} for a low-level API to render arbitrary content in a modal dialog.
+ *
+ * @remarks
+ * The flexibility this component offers is made possible with a parent `<dialog>` element.
+ * The browser-native `<dialog>` element provides the underlying functionality for modal behavior,
+ * along with screen-reader friendly semantics and accessibility features.
+ *
+ * The content within the modal is typically slotted in, however this can be
+ * customized by overriding the `render` method. If your slotted content includes
+ * a header or actions, consider implementing {@linkcode TransclusionChildElement}
+ * to allow this modal to automatically apply appropriate styles and structure.
+ */
 @customElement("ak-modal")
-export class AKModal extends AKElement {
+export class AKModal extends AKElement implements TransclusionParentElement {
     public static shadowRootOptions: ShadowRootInit = {
         ...AKElement.shadowRootOptions,
         delegatesFocus: true,
     };
 
-    /**
-     * An optional aria-label for the modal dialog, used for accessibility purposes.
-     */
-    public static formatARIALabel?(): string;
+    public [TransclusionParentSymbol] = true;
 
     /**
      * Whether the modal should open the parent dialog element when it is connected to the DOM.
+     *
+     * @default true
      */
     public static openOnConnect = true;
 
@@ -49,21 +65,13 @@ export class AKModal extends AKElement {
      * Show a modal containing this element.
      *
      * @see {@linkcode renderDialog} for the underlying implementation.
+     *
      * @returns A promise that resolves when the modal is closed.
      */
     public static showModal(init?: DialogInit) {
         return renderDialog(new this(), init);
     }
 
-    /**
-     * A helper method to create an invoker for a modal containing this form.
-     *
-     * @see {@linkcode modalInvoker} for the underlying implementation.
-     */
-    public static asModalInvoker(init?: ModalInvokerInit): ModalInvokerDirectiveResult {
-        return modalInvoker(this, init);
-    }
-
     public static styles: CSSResult[] = [
         PFButton,
         PFForm,
@@ -75,7 +83,7 @@ export class AKModal extends AKElement {
         Styles,
     ];
 
-    #hostResizeObserver: ResizeObserver;
+    public static hostStyles: CSSResult[] = [DialogStyles];
 
     //#region Protected Properties
 
@@ -86,11 +94,20 @@ export class AKModal extends AKElement {
      */
     protected scrollContainerRef = createRef<HTMLElement>();
 
+    protected get scrollContainer(): Element {
+        return this.scrollContainerRef.value || this;
+    }
+
     /**
      * A ref to the modal title element, used for accessibility purposes (e.g., setting `aria-labelledby` on the dialog).
      */
     protected modalTitleRef = createRef<HTMLElement>();
 
+    /**
+     * The parent element of the modal content.
+     *
+     * A runtime error will be thrown if this is not an {@linkcode HTMLDialogElement}.
+     */
     declare parentElement: HTMLDialogElement | null;
 
     //#region Public Properties
@@ -114,17 +131,30 @@ export class AKModal extends AKElement {
         }
     }
 
-    @property({ type: String })
-    public size: PFSize = PFSize.Large;
+    @property({ type: String, useDefault: true })
+    public size: PFSize | null = null;
 
-    @property({ type: String })
+    @property({ type: String, attribute: "cancel-button-label", useDefault: true })
     public cancelButtonLabel: string | null = null;
 
+    /**
+     * An optional aria-label formatter.
+     */
+    public formatARIALabel?(): string;
+
+    //#endregion
+
+    //#region Protected Properties
+
     protected defaultSlot: HTMLSlotElement;
     protected beforeBodySlot: HTMLSlotElement;
+    protected dialogBody: HTMLDivElement;
 
     @state()
-    protected slottedElement: TransclusionElement | null = null;
+    protected slottedElement: TransclusionChildElement | null = null;
+
+    @property({ attribute: false })
+    public slottedElementUpdatedAt: Date | null = null;
 
     //#endregion
 
@@ -142,14 +172,9 @@ export class AKModal extends AKElement {
             return;
         }
 
-        dialogElement.addEventListener("transitionend", this.fadeInListener, {
-            once: true,
-            passive: true,
-        });
-
         dialogElement.showModal();
 
-        dialogElement.classList.add("fade-in");
+        dialogElement.classList.add("ak-c-dialog--m-fade-in");
     }
 
     /**
@@ -168,11 +193,14 @@ export class AKModal extends AKElement {
 
         dialogElement.addEventListener(
             "transitionend",
-            (event) => this.delegateClose(event, returnValue),
-            { once: true, passive: true },
+            this.delegateClose.bind(this, returnValue),
+            {
+                passive: true,
+                once: true,
+            },
         );
 
-        dialogElement.classList.remove("fade-in", "fade-in-complete");
+        dialogElement.classList.remove("ak-c-dialog--m-fade-in");
     }
 
     //#endregion
@@ -189,103 +217,29 @@ export class AKModal extends AKElement {
         this.show();
     };
 
-    #heightSyncFrameID = -1;
-    /**
-     * A map of observed elements to their expected sizes,
-     * used to prevent unnecessary height synchronizations.
-     */
-    #expectedSizes = new WeakMap<Element, number>();
-
-    protected lastScrollHeight = 0;
-
-    protected synchronizeHeight: ResizeObserverCallback = ([entry]) => {
-        this.#heightSyncFrameID = requestAnimationFrame(() => {
-            const dialogElement = this.parentElement;
-
-            if (!dialogElement || !dialogElement.open) {
-                return;
-            }
-
-            const expectedSize = this.#expectedSizes.get(entry.target);
-            const blockSize = Math.ceil(entry.borderBoxSize[0].blockSize);
-            const desiredSize = Math.max(entry.target.scrollHeight, blockSize);
-
-            if (desiredSize === expectedSize) {
-                return;
-            }
-
-            dialogElement.style.height = desiredSize + "px";
-
-            this.#expectedSizes.set(entry.target, desiredSize);
-        });
-    };
-
-    #heightResetAnimationFrameID = -1;
-
-    protected resetHeight = () => {
-        cancelAnimationFrame(this.#heightResetAnimationFrameID);
-        cancelAnimationFrame(this.#heightSyncFrameID);
-
-        this.#heightResetAnimationFrameID = requestAnimationFrame(() => {
-            if (this.parentElement) {
-                this.parentElement.style.height = "";
-            }
-
-            this.#heightResetAnimationFrameID = requestAnimationFrame(() => {
-                const scrollContainer = this.scrollContainerRef.value || this;
-                const scrollHeight = scrollContainer.scrollHeight;
-
-                this.lastScrollHeight = scrollHeight;
-            });
-        });
-    };
-
-    protected fadeInListener = async (event: TransitionEvent) => {
-        this.logger.debug("fade-in complete", event);
-
-        this.removeEventListener("transitionend", this.fadeInListener);
-
-        const dialogElement = this.parentElement;
-
-        if (!dialogElement) {
-            this.logger.debug("Skipping height synchronization, no dialog element", this);
-            return;
-        }
-
-        dialogElement.classList.add("fade-in-complete");
-
-        dialogElement.style.height = dialogElement.clientHeight + "px";
-
-        const scrollContainer = this.scrollContainerRef.value || this;
-
-        this.#hostResizeObserver.observe(scrollContainer);
-
-        window.addEventListener("resize", this.resetHeight, {
-            passive: true,
-        });
-    };
-
     #closing = false;
 
     /**
      * Delegate the close action to the parent dialog element,
      * ensuring that the correct event listeners are triggered and the modal is properly closed.
      */
-    protected delegateClose(event: TransitionEvent, returnValue?: string) {
+    protected delegateClose(returnValue?: string, event?: TransitionEvent) {
         if (this.#closing) {
             return;
         }
 
         this.#closing = true;
 
-        this.parentElement?.close(returnValue);
-
-        requestAnimationFrame(() => {
+        if (!this.parentElement) {
+            this.logger.debug("No parentElement, cannot delegate close", this);
             this.#closing = false;
-            this.#hostResizeObserver.unobserve(this);
-            window.removeEventListener("resize", this.resetHeight);
-            this.resetHeight();
-        });
+            return;
+        }
+
+        this.logger.debug("Delegating close to parent dialog", { returnValue, event });
+
+        this.parentElement.close(returnValue);
+        this.#closing = false;
     }
 
     /**
@@ -294,11 +248,13 @@ export class AKModal extends AKElement {
      * may close the dialog when a form inside the modal is submitted.
      */
     public submitListener = (_event: SubmitEvent) => {
-        if (this.parentElement?.closedBy === "none") {
+        const { closedBy } = this.parentElement ?? {};
+
+        if (closedBy === "node" || closedBy === "closerequest") {
             return;
         }
 
-        this.close();
+        return this.close("submitted");
     };
 
     /**
@@ -307,7 +263,7 @@ export class AKModal extends AKElement {
      * This is useful for simplifying adding and removing event listeners.
      */
     public closeListener = (_event?: Event) => {
-        this.close();
+        this.close("close");
     };
 
     /**
@@ -318,24 +274,15 @@ export class AKModal extends AKElement {
      * the backdrop click may trigger a "cancel" event instead of a "click" event.
      */
     protected backdropClickListener = (event: Event) => {
-        if (event.target === this.parentElement) {
-            this.close();
+        if (event.target !== this.parentElement) {
+            return;
         }
-    };
 
-    /**
-     * A stable reference to the dialog's cancel event listener.
-     *
-     * This is useful for simplifying adding and removing event listeners.
-     */
-    protected cancelListener = (event: Event) => {
-        if (!this.parentElement) {
+        if (this.parentElement?.closedBy === "none") {
             return;
         }
 
-        event.preventDefault();
-
-        this.close();
+        return this.close("backdrop");
     };
 
     //#endregion
@@ -354,17 +301,25 @@ export class AKModal extends AKElement {
     public constructor() {
         super();
 
-        this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase());
+        this.logger = ConsoleLogger.prefix(this.localName);
 
         this.renderContent = this.render.bind(this);
         this.render = this.renderInternal;
 
-        this.#hostResizeObserver = new ResizeObserver(this.synchronizeHeight);
-
         this.defaultSlot = this.ownerDocument.createElement("slot");
 
         this.beforeBodySlot = this.ownerDocument.createElement("slot");
         this.beforeBodySlot.name = "before-body";
+
+        this.dialogBody = this.ownerDocument.createElement("div");
+        this.dialogBody.classList.add("ak-c-dialog__body", "ak-m-thin-scrollbar");
+        this.dialogBody.setAttribute("part", "body");
+
+        this.dialogBody.appendChild(this.defaultSlot);
+
+        this.addEventListener("command", (event) => {
+            this.logger.debug("Command event received", { event });
+        });
     }
 
     public override connectedCallback(): void {
@@ -377,21 +332,26 @@ export class AKModal extends AKElement {
             return;
         }
 
+        const { localName } = this;
+
         if (!(dialogElement instanceof HTMLDialogElement)) {
+            this.logger.error("Parent element is not a <dialog>, cannot initialize modal", {
+                parentElement: dialogElement,
+            });
             throw new TypeError(
-                `authentik/modal: ${this.tagName.toLowerCase()} must be placed inside a <dialog> element.`,
+                `authentik/modal: ${localName} must be placed inside a <dialog> element.`,
             );
         }
 
-        const tagName = this.tagName.toLowerCase();
+        dialogElement.dataset.akModal = localName;
 
-        dialogElement.dataset.akModal = tagName;
-        dialogElement.classList.add("ak-c-modal", this.size);
+        if (this.size) {
+            dialogElement.classList.add("ak-c-dialog", this.size);
+        }
 
         // eslint-disable-next-line wc/no-self-class
-        this.classList.add("ak-c-modal__content");
+        this.classList.add("ak-c-dialog__content");
 
-        dialogElement.addEventListener("cancel", this.cancelListener);
         dialogElement.addEventListener("click", this.backdropClickListener, { passive: true });
 
         this.addEventListener("submit", this.submitListener);
@@ -403,36 +363,23 @@ export class AKModal extends AKElement {
         }
     }
 
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-
-        this.#hostResizeObserver.disconnect();
-        window.removeEventListener("resize", this.resetHeight);
-    }
-
     public override updated(changedProperties: PropertyValues<this>): void {
         super.updated(changedProperties);
 
         const assignedElements = this.defaultSlot.assignedElements({ flatten: true });
 
-        const form = assignedElements.find(isTransclusionElement) ?? null;
-
-        if (form && form !== this.slottedElement) {
-            this.slottedElement = form;
-            this.slottedElement.viewportCheck = false;
-        }
+        const nextSlottedElement = assignedElements.find(isTransclusionElement) ?? null;
 
-        const dialogElement = this.parentElement;
+        if (nextSlottedElement && nextSlottedElement !== this.slottedElement) {
+            if (nextSlottedElement.displayBox) {
+                nextSlottedElement.displayBox = "contents";
+            }
 
-        if (dialogElement && dialogElement.open) {
-            requestAnimationFrame(() => {
-                const scrollContainer = this.scrollContainerRef.value || this;
-                const scrollHeight = scrollContainer.scrollHeight;
+            if ("visible" in nextSlottedElement) {
+                nextSlottedElement.visible = true;
+            }
 
-                if (scrollHeight !== this.lastScrollHeight) {
-                    this.resetHeight();
-                }
-            });
+            this.slottedElement = nextSlottedElement;
         }
 
         requestAnimationFrame(this.synchronizeARIA);
@@ -452,7 +399,7 @@ export class AKModal extends AKElement {
 
         if (!dialogElement) return;
 
-        const ariaLabel = (this.constructor as typeof AKModal).formatARIALabel?.();
+        const ariaLabel = this.formatARIALabel?.();
 
         const modalTitleElement = this.modalTitleRef.value;
 
@@ -495,7 +442,7 @@ export class AKModal extends AKElement {
     protected renderCloseButton(): SlottedTemplateResult {
         return html`<button
             @click=${this.closeListener}
-            class="pf-c-button pf-m-plain"
+            class="pf-c-button pf-m-plain ak-c-dialog__close-button"
             type="button"
             aria-label=${msg("Close dialog")}
         >
@@ -512,24 +459,27 @@ export class AKModal extends AKElement {
      * @abstract
      */
     protected renderHeader(): SlottedTemplateResult {
-        const { headline, slottedElement } = this;
-        const hasHeaderSlot = this.hasSlotted("header");
+        const { headline, slottedElement, slottedElementUpdatedAt } = this;
+        const hasHeaderSlot = this.findSlotted("header");
 
-        return guard([headline, hasHeaderSlot, slottedElement], () => {
+        return guard([headline, hasHeaderSlot, slottedElement, slottedElementUpdatedAt], () => {
             if (!headline && !hasHeaderSlot && !slottedElement) {
                 return null;
             }
 
-            const content = slottedElement ? slottedElement.renderHeader?.(true) : null;
+            const slottedHeader = slottedElement ? slottedElement.renderHeader?.(true) : null;
 
-            return html`<div class="ak-c-modal__header" part="header">
-                <div class="ak-c-modal__title">
-                    <h1 class="ak-c-modal__title-text" id="modal-title" ${ref(this.modalTitleRef)}>
+            const content =
+                slottedHeader ??
+                html`<div class="ak-c-dialog__title">
+                    <h1 class="ak-c-dialog__title-text" id="modal-title">
                         ${this.headline}
                         <slot name="header"></slot>
-                        ${content}
                     </h1>
-                </div>
+                </div>`;
+
+            return html`<div class="ak-c-dialog__header" part="header" ${ref(this.modalTitleRef)}>
+                ${content}
             </div>`;
         });
     }
@@ -543,23 +493,33 @@ export class AKModal extends AKElement {
      * @abstract
      */
     protected renderActions(): SlottedTemplateResult {
-        const { slottedElement } = this;
-        const hasActionsSlot = this.hasSlotted("actions");
-        return guard([hasActionsSlot, slottedElement], () => {
+        const { slottedElement, slottedElementUpdatedAt } = this;
+        const hasActionsSlot = this.findSlotted("actions");
+
+        return guard([hasActionsSlot, slottedElement, slottedElementUpdatedAt], () => {
             if (!hasActionsSlot && !slottedElement) {
                 return null;
             }
 
+            const cancelButton = slottedElement?.cancelable
+                ? html`<button
+                      @click=${this.closeListener}
+                      class="pf-c-button pf-m-link"
+                      type="button"
+                  >
+                      ${this.cancelButtonLabel ??
+                      slottedElement?.cancelButtonLabel ??
+                      msg("Cancel")}
+                  </button>`
+                : null;
+
             return html`<footer
                 aria-label=${msg("Form actions")}
-                class="ak-c-modal__footer"
+                class="ak-c-dialog__footer"
                 part="actions"
             >
                 <slot name="actions"></slot>
-                <button @click=${this.closeListener} class="pf-c-button pf-m-plain" type="button">
-                    ${this.cancelButtonLabel ?? slottedElement?.cancelButtonLabel ?? msg("Cancel")}
-                </button>
-                ${slottedElement ? slottedElement.renderActions?.(true) : null}
+                ${cancelButton} ${slottedElement ? slottedElement.renderActions?.(true) : null}
             </footer>`;
         });
     }
@@ -573,8 +533,11 @@ export class AKModal extends AKElement {
      * @abstract
      */
     protected render(): unknown {
-        return html`${this.beforeBodySlot}
-            <div class="ak-c-modal__body" part="body">${this.defaultSlot}</div>`;
+        if (this.beforeBodySlot.assignedElements().length) {
+            return [this.beforeBodySlot, this.dialogBody];
+        }
+
+        return this.dialogBody;
     }
 
     //#endregion
diff --git a/web/src/elements/dialogs/components.ts b/web/src/elements/dialogs/components.ts
new file mode 100644
index 000000000000..5058de6e7723
--- /dev/null
+++ b/web/src/elements/dialogs/components.ts
@@ -0,0 +1,122 @@
+// import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+// import {
+//     lookupElementConstructor,
+//     modalInvoker,
+//     ModelFormLikeConstructor,
+// } from "#elements/dialogs/directives";
+// import type { ModalTemplate } from "#elements/dialogs/invokers";
+// import type { DialogInit, TransclusionElementConstructor } from "#elements/dialogs/shared";
+// import type { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+
+// import { msg, str } from "@lit/localize";
+// import { html } from "lit-html";
+
+// export interface NewModelButtonProps {
+//     kind?: "primary" | "secondary" | "tertiary";
+// }
+
+// /**
+//  * A helper function to render a button that opens a **modal** for creating a new **model** instance.
+//  *
+//  * @param factory A custom element constructor or a function that returns a template result.
+//  * @param buttonProps Properties to customize the appearance of the button.
+//  * @param modalProps Properties to pass to the custom element constructor when the factory is a constructor.
+//  * @param options Initialization options for the modal dialog.
+//  */
+// export function ModalInvokerButton<T extends ModalTemplate | TransclusionElementConstructor>(
+//     factory: T,
+//     modalProps?: T extends TransclusionElementConstructor
+//         ? LitPropertyRecord<InstanceType<T>> | null
+//         : null,
+//     buttonProps?: NewModelButtonProps | null,
+//     options?: DialogInit,
+// ): SlottedTemplateResult {
+//     const { kind = "primary" } = buttonProps ?? {};
+
+//     const { verboseName, createLabel = msg("New") } = factory as TransclusionElementConstructor;
+//     const label = verboseName
+//         ? msg(str`${createLabel} ${verboseName}`, {
+//               id: "invoker.label.modifier-noun",
+//           })
+//         : createLabel;
+
+//     return html`<button
+//         class="pf-c-button pf-m-${kind}"
+//         ${modalInvoker(factory, modalProps, options)}
+//     >
+//         ${label}
+//     </button>`;
+// }
+
+// /**
+//  * A helper function to render a button that opens a modal for editing an existing model instance.
+//  *
+//  * @param factory A custom element constructor or a function that returns a template result.
+//  * @param instancePk The primary key of the instance to edit.
+//  * @param itemName An optional name of the item to include in the button's aria-label and tooltip.
+//  * @param modalProps Properties to pass to the custom element constructor when the factory is a constructor.
+//  * @param options Initialization options for the modal dialog.
+//  */
+// export function IconEditButton<T extends TransclusionElementConstructor>(
+//     factory: T,
+//     instancePk?: string | number | null,
+//     itemName?: string | null,
+//     modalProps?: T extends TransclusionElementConstructor
+//         ? LitPropertyRecord<InstanceType<T>>
+//         : null,
+//     options?: DialogInit,
+// ): SlottedTemplateResult {
+//     const noun = (factory as TransclusionElementConstructor).verboseName ?? msg("Entity");
+//     const label = itemName
+//         ? msg(str`Edit "${itemName}" ${noun}`, {
+//               id: "entity.edit.named",
+//           })
+//         : msg(str`Edit ${noun}`, {
+//               id: "entity.edit",
+//           });
+
+//     const props: LitPropertyRecord<ModelFormLikeConstructor> = { ...modalProps, instancePk };
+
+//     return html`<button
+//         type="button"
+//         aria-label=${label}
+//         class="pf-c-button pf-m-plain"
+//         ${modalInvoker(factory, props as unknown as undefined, options)}
+//     >
+//         <pf-tooltip position="top" content=${msg("Edit")}>
+//             <i aria-hidden="true" class="fas fa-edit"></i>
+//         </pf-tooltip>
+//     </button>`;
+// }
+
+// /**
+//  * A helper function to render an edit button by looking up a custom element constructor based on a tag name.
+//  *
+//  * @param tagName The tag name of the custom element to look up and render in the modal.
+//  * @param instancePk The primary key of the instance to edit.
+//  * @param itemName An optional name of the item to include in the button's aria-label and tooltip.
+//  * @param modalProps Properties to pass to the custom element constructor when found.
+//  * @param options Initialization options for the modal dialog.
+//  *
+//  * @throws {TypeError} If no custom element is defined for the given tag name.
+//  *
+//  * @see {@link IconEditButton} for the underlying button rendering logic.
+//  */
+// export function IconEditButtonByTagName<T extends object = object>(
+//     tagName: string,
+//     instancePk?: string | number | null,
+//     itemName?: string | null,
+//     modalProps?: LitPropertyRecord<T> | null,
+//     options?: DialogInit,
+// ): SlottedTemplateResult {
+//     const Constructor = lookupElementConstructor(tagName);
+
+//     return IconEditButton(
+//         Constructor,
+//         instancePk,
+//         itemName,
+//         modalProps as unknown as undefined,
+//         options,
+//     );
+// }
diff --git a/web/src/elements/dialogs/components/IconEditButton.ts b/web/src/elements/dialogs/components/IconEditButton.ts
new file mode 100644
index 000000000000..bd473bd9d680
--- /dev/null
+++ b/web/src/elements/dialogs/components/IconEditButton.ts
@@ -0,0 +1,49 @@
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { modalInvoker, ModelFormLikeConstructor } from "#elements/dialogs/directives";
+import type { DialogInit, TransclusionElementConstructor } from "#elements/dialogs/shared";
+import type { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+
+import { msg, str } from "@lit/localize";
+import { html } from "lit-html";
+
+/**
+ * A helper function to render a button that opens a modal for editing an existing model instance.
+ *
+ * @param factory A custom element constructor or a function that returns a template result.
+ * @param instancePk The primary key of the instance to edit.
+ * @param itemName An optional name of the item to include in the button's aria-label and tooltip.
+ * @param modalProps Properties to pass to the custom element constructor when the factory is a constructor.
+ * @param options Initialization options for the modal dialog.
+ */
+export function IconEditButton<T extends TransclusionElementConstructor>(
+    factory: T,
+    instancePk?: string | number | null,
+    itemName?: string | null,
+    modalProps?: T extends TransclusionElementConstructor
+        ? LitPropertyRecord<InstanceType<T>>
+        : null,
+    options?: DialogInit,
+): SlottedTemplateResult {
+    const noun = (factory as TransclusionElementConstructor).verboseName ?? msg("Entity");
+    const label = itemName
+        ? msg(str`Edit "${itemName}" ${noun}`, {
+              id: "entity.edit.named",
+          })
+        : msg(str`Edit ${noun}`, {
+              id: "entity.edit",
+          });
+
+    const props: LitPropertyRecord<ModelFormLikeConstructor> = { ...modalProps, instancePk };
+
+    return html`<button
+        type="button"
+        aria-label=${label}
+        class="pf-c-button pf-m-plain"
+        ${modalInvoker(factory, props as unknown as undefined, options)}
+    >
+        <pf-tooltip position="top" content=${msg("Edit")}>
+            <i aria-hidden="true" class="fas fa-edit"></i>
+        </pf-tooltip>
+    </button>`;
+}
diff --git a/web/src/elements/dialogs/components/IconEditButtonByTagName.ts b/web/src/elements/dialogs/components/IconEditButtonByTagName.ts
new file mode 100644
index 000000000000..4c1a0efb90c8
--- /dev/null
+++ b/web/src/elements/dialogs/components/IconEditButtonByTagName.ts
@@ -0,0 +1,35 @@
+import { IconEditButton } from "#elements/dialogs/components/IconEditButton";
+import { lookupElementConstructor } from "#elements/dialogs/directives";
+import type { DialogInit } from "#elements/dialogs/shared";
+import type { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+
+/**
+ * A helper function to render an edit button by looking up a custom element constructor based on a tag name.
+ *
+ * @param tagName The tag name of the custom element to look up and render in the modal.
+ * @param instancePk The primary key of the instance to edit.
+ * @param itemName An optional name of the item to include in the button's aria-label and tooltip.
+ * @param modalProps Properties to pass to the custom element constructor when found.
+ * @param options Initialization options for the modal dialog.
+ *
+ * @throws {TypeError} If no custom element is defined for the given tag name.
+ *
+ * @see {@link IconEditButton} for the underlying button rendering logic.
+ */
+export function IconEditButtonByTagName<T extends object = object>(
+    tagName: string,
+    instancePk?: string | number | null,
+    itemName?: string | null,
+    modalProps?: LitPropertyRecord<T> | null,
+    options?: DialogInit,
+): SlottedTemplateResult {
+    const Constructor = lookupElementConstructor(tagName);
+
+    return IconEditButton(
+        Constructor,
+        instancePk,
+        itemName,
+        modalProps as unknown as undefined,
+        options,
+    );
+}
diff --git a/web/src/elements/dialogs/components/IconPermissionButton.ts b/web/src/elements/dialogs/components/IconPermissionButton.ts
new file mode 100644
index 000000000000..3d3f867c576c
--- /dev/null
+++ b/web/src/elements/dialogs/components/IconPermissionButton.ts
@@ -0,0 +1,42 @@
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { modalInvoker } from "#elements/dialogs/directives";
+import type { DialogInit } from "#elements/dialogs/shared";
+import type { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+
+import { ObjectPermissionsPageForm } from "#admin/rbac/ObjectPermissionModal";
+
+import { msg, str } from "@lit/localize";
+import { html } from "lit-html";
+
+/**
+ * A helper function to render a button that opens a modal for editing permissions.
+ *
+ * @param itemName An optional name of the item to include in the button's aria-label and tooltip.
+ * @param modalProps Properties to pass to the custom element constructor when the factory is a constructor.
+ * @param options Initialization options for the modal dialog.
+ */
+export function IconPermissionButton(
+    itemName?: string | null,
+    modalProps?: LitPropertyRecord<ObjectPermissionsPageForm>,
+    options?: DialogInit,
+): SlottedTemplateResult {
+    const label = itemName
+        ? msg(str`Open "${itemName}" permissions`, {
+              id: "permissions.modal-invoker.named",
+          })
+        : msg("Open permissions", {
+              id: "permissions.modal-invoker",
+          });
+
+    return html`<button
+        type="button"
+        aria-label=${label}
+        class="pf-c-button pf-m-plain"
+        ${modalInvoker(ObjectPermissionsPageForm, modalProps, options)}
+    >
+        <pf-tooltip position="top" content=${msg("Permissions")}>
+            <i aria-hidden="true" class="fas fa-lock"></i>
+        </pf-tooltip>
+    </button>`;
+}
diff --git a/web/src/elements/dialogs/components/ModalInvokerButton.ts b/web/src/elements/dialogs/components/ModalInvokerButton.ts
new file mode 100644
index 000000000000..012e3c10944e
--- /dev/null
+++ b/web/src/elements/dialogs/components/ModalInvokerButton.ts
@@ -0,0 +1,46 @@
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { modalInvoker } from "#elements/dialogs/directives";
+import type { ModalTemplate } from "#elements/dialogs/invokers";
+import type { DialogInit, TransclusionElementConstructor } from "#elements/dialogs/shared";
+import type { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+
+import { msg, str } from "@lit/localize";
+import { html } from "lit-html";
+
+export interface NewModelButtonProps {
+    kind?: "primary" | "secondary" | "tertiary";
+}
+
+/**
+ * A helper function to render a button that opens a **modal** for creating a new **model** instance.
+ *
+ * @param factory A custom element constructor or a function that returns a template result.
+ * @param buttonProps Properties to customize the appearance of the button.
+ * @param modalProps Properties to pass to the custom element constructor when the factory is a constructor.
+ * @param options Initialization options for the modal dialog.
+ */
+export function ModalInvokerButton<T extends ModalTemplate | TransclusionElementConstructor>(
+    factory: T,
+    modalProps?: T extends TransclusionElementConstructor
+        ? LitPropertyRecord<InstanceType<T>> | null
+        : null,
+    buttonProps?: NewModelButtonProps | null,
+    options?: DialogInit,
+): SlottedTemplateResult {
+    const { kind = "primary" } = buttonProps ?? {};
+
+    const { verboseName, createLabel = msg("New") } = factory as TransclusionElementConstructor;
+    const label = verboseName
+        ? msg(str`${createLabel} ${verboseName}`, {
+              id: "invoker.label.modifier-noun",
+          })
+        : createLabel;
+
+    return html`<button
+        class="pf-c-button pf-m-${kind}"
+        ${modalInvoker(factory, modalProps, options)}
+    >
+        ${label}
+    </button>`;
+}
diff --git a/web/src/elements/dialogs/dialog.css b/web/src/elements/dialogs/dialog.css
new file mode 100644
index 000000000000..3d9a814b43b9
--- /dev/null
+++ b/web/src/elements/dialogs/dialog.css
@@ -0,0 +1,324 @@
+/* #region Variables */
+
+.ak-c-dialog {
+    --ak-c-dialog--BackgroundColor: var(--pf-global--BackgroundColor--100);
+
+    --ak-c-dialog--BoxShadow: var(--pf-global--BoxShadow--xl);
+
+    --ak-c-dialog--ZIndex: var(--pf-global--ZIndex--xl);
+
+    --ak-c-dialog--WidthBasis: 100%;
+    --ak-c-dialog--HeightBasis: 75dvh;
+
+    --ak-c-dialog--MarginBlock: var(--pf-global--spacer--xl);
+    --ak-c-dialog--MarginInline: var(--pf-global--spacer--4xl);
+
+    --ak-c-dialog--MaxWidth: calc(100dvw - var(--ak-c-dialog--MarginInline));
+
+    --ak-c-dialog--Ratio: calc(3 / 4);
+    --ak-c-dialog--AspectRatioHeight: calc(
+        var(--ak-c-dialog--WidthBasis) * var(--ak-c-dialog--Ratio)
+    );
+    --ak-c-dialog--MaxHeight: calc(
+        min(var(--ak-c-dialog--AspectRatioHeight), var(--ak-c-dialog--HeightBasis)) -
+            var(--ak-c-dialog--MarginBlock)
+    );
+
+    --ak-c-dialog--BorderColor: var(--pf-global--BackgroundColor--150);
+
+    --ak-c-dialog--BorderWidth: 0;
+
+    --ak-c-dialog--TransitionDuration--Transform: 250ms;
+    --ak-c-dialog--TransitionDuration--Opacity: 100ms;
+    --ak-c-dialog--TransitionDuration--Backdrop: 100ms;
+    --ak-c-dialog--TransitionDuration--Overlay: 50ms;
+    --ak-c-dialog--TransitionDuration--Display: 50ms;
+}
+
+/* #endregion */
+
+/* #region Dialog */
+
+.ak-c-dialog {
+    overscroll-behavior: none;
+    color: var(--pf-global--Color--100, CanvasText);
+    background-color: var(--ak-c-dialog--BackgroundColor);
+    box-shadow: var(--ak-c-dialog--BoxShadow);
+    padding: var(--ak-c-dialog--Padding);
+
+    z-index: var(--ak-c-dialog--ZIndex);
+    width: min(var(--ak-c-dialog--WidthBasis), var(--ak-c-dialog--MaxWidth));
+    max-width: var(--ak-c-dialog--MaxWidth);
+    max-height: var(--ak-c-dialog--MaxHeight);
+
+    background-color: var(--ak-c-dialog--BackgroundColor);
+    box-shadow: var(--ak-c-dialog--BoxShadow);
+
+    border-width: var(--ak-c-dialog--BorderWidth);
+    border-color: var(--ak-c-dialog--BorderColor);
+
+    &:focus-visible {
+        outline: none;
+    }
+}
+
+/* #endregion */
+
+/* #region Buttons */
+
+.ak-c-dialog {
+    --ak-c-dialog--c-button--Top: var(--pf-global--spacer--lg);
+    --ak-c-dialog--c-button--Right: var(--pf-global--spacer--md);
+    --ak-c-dialog--c-button--sibling--MarginRight: calc(
+        var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm)
+    );
+}
+
+/* #endregion */
+
+/* #region Header */
+
+.ak-c-dialog {
+    --ak-c-dialog__header--PaddingTop: var(--pf-global--spacer--lg);
+    --ak-c-dialog__header--PaddingBottom: var(--pf-global--spacer--lg);
+    --ak-c-dialog__header--PaddingRight: var(--pf-global--spacer--lg);
+    --ak-c-dialog__header--PaddingLeft: var(--pf-global--spacer--lg);
+    --ak-c-dialog__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
+    --ak-c-dialog__header--body--PaddingTop: var(--pf-global--spacer--md);
+
+    --ak-c-dialog__title--LineHeight: var(--pf-global--LineHeight--sm);
+    --ak-c-dialog__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+    --ak-c-dialog__title--FontSize: var(--pf-global--FontSize--2xl);
+    --ak-c-dialog__title-icon--MarginRight: var(--pf-global--spacer--sm);
+    --ak-c-dialog__title-icon--Color: var(--pf-global--Color--100);
+
+    --ak-c-dialog__description--PaddingTop: var(--pf-global--spacer--xs);
+}
+
+/* #endregion */
+
+/* #region Body */
+
+.ak-c-dialog {
+    --ak-c-dialog__body--MinHeight: calc(
+        var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)
+    );
+
+    --ak-c-dialog__body--PaddingTop: var(--pf-global--spacer--lg);
+    --ak-c-dialog__body--PaddingRight: var(--pf-global--spacer--lg);
+    --ak-c-dialog__body--PaddingLeft: var(--pf-global--spacer--lg);
+    --ak-c-dialog__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
+}
+
+/* #endregion */
+
+/* #region Footer */
+
+.ak-c-dialog {
+    --ak-c-dialog__footer--PaddingTop: var(--pf-global--spacer--lg);
+    --ak-c-dialog__footer--PaddingRight: var(--pf-global--spacer--lg);
+    --ak-c-dialog__footer--PaddingBottom: var(--pf-global--spacer--lg);
+    --ak-c-dialog__footer--PaddingLeft: var(--pf-global--spacer--lg);
+    --ak-c-dialog__footer--BoxShadow: inset 0 0.5px 0
+        var(--pf-global--BackgroundColor--dark-transparent-200);
+}
+
+/* #endregion */
+
+/* #region Backdrop */
+
+.ak-c-dialog {
+    --ak-c-dialog__backdrop--BackgroundColor: transparent;
+    --ak-c-dialog__backdrop--BackdropFilter: blur(0);
+    --ak-c-dialog__backdrop--active--BackgroundColor: hsla(0, 0%, 0%, 0.5);
+    --ak-c-dialog__backdrop--active--BackdropFilter: blur(2px);
+
+    &::backdrop {
+        backdrop-filter: var(--ak-c-dialog__backdrop--BackdropFilter);
+        background-color: var(--ak-c-dialog__backdrop--BackgroundColor);
+
+        transition:
+            backdrop-filter,
+            overlay allow-discrete,
+            background-color;
+
+        transition-timing-function: ease-in-out;
+        transition-duration: var(--ak-c-dialog--TransitionDuration--Backdrop);
+    }
+}
+
+/* #endregion */
+
+/* #region Transitions */
+
+.ak-c-dialog {
+    interpolate-size: allow-keywords;
+    transition:
+        opacity var(--ak-c-dialog--TransitionDuration--Opacity),
+        transform var(--ak-c-dialog--TransitionDuration--Transform),
+        overlay var(--ak-c-dialog--TransitionDuration--Overlay) allow-discrete;
+
+    transition-timing-function: ease-in-out;
+
+    opacity: 0;
+    transform: translateY(1em);
+}
+
+.ak-c-dialog--m-fade-in {
+    --ak-c-dialog__backdrop--BackdropFilter: var(--ak-c-dialog__backdrop--active--BackdropFilter);
+    --ak-c-dialog__backdrop--BackgroundColor: var(--ak-c-dialog__backdrop--active--BackgroundColor);
+
+    opacity: 1;
+}
+
+.ak-c-dialog[open] {
+    transform: translateY(0);
+
+    @starting-style {
+        transform: translateY(-1em);
+    }
+}
+
+/* #endregion */
+
+/* #region Modifiers */
+
+.ak-c-dialog {
+    --ak-c-dialog--m-md--WidthBasis: 52.5rem;
+    --ak-c-dialog--m-sm--WidthBasis: 35rem;
+    --ak-c-dialog--m-lg--WidthBasis: 70rem;
+    --ak-c-dialog--m-xl--WidthBasis: 110rem;
+
+    --ak-c-dialog--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
+    --ak-c-dialog--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
+    --ak-c-dialog--m-success__title-icon--Color: var(--pf-global--success-color--100);
+    --ak-c-dialog--m-info__title-icon--Color: var(--pf-global--info-color--100);
+    --ak-c-dialog--m-default__title-icon--Color: var(--pf-global--default-color--200);
+}
+
+.ak-c-dialog {
+    --ak-c-dialog--WidthBasis: var(--ak-c-dialog--m-lg--WidthBasis);
+
+    &.pf-m-sm,
+    &:has(.pf-m-sm) {
+        --ak-c-dialog--WidthBasis: var(--ak-c-dialog--m-sm--WidthBasis);
+    }
+
+    &.pf-m-md,
+    &:has(.pf-m-md) {
+        --ak-c-dialog--WidthBasis: var(--ak-c-dialog--m-md--WidthBasis);
+    }
+
+    &.pf-m-xl,
+    &:has(.pf-m-xl) {
+        --ak-c-dialog--AspectRatioHeight: 100dvh;
+        --ak-c-dialog--WidthBasis: var(--ak-c-dialog--m-xl--WidthBasis);
+        --ak-c-dialog--MaxHeight: calc(100dvh - var(--ak-c-dialog--MarginBlock));
+    }
+
+    @media (width <= 768px) or (height <= 600px) {
+        --ak-c-dialog--MaxHeight: 100dvh;
+        --ak-c-dialog--AspectRatioHeight: none;
+        /* Note that a unit is required for to perform the calculation. */
+        --ak-c-dialog--MarginBlock: 0em;
+        --ak-c-dialog--MarginInline: 0em;
+
+        height: 100dvh;
+    }
+
+    .ak-m-dialog--full-screen {
+        --ak-c-dialog--MaxHeight: 100dvh;
+        --ak-c-dialog--AspectRatioHeight: none;
+        /* Note that a unit is required for to perform the calculation. */
+        --ak-c-dialog--MarginBlock: 0em;
+        --ak-c-dialog--MarginInline: 0em;
+
+        height: 100dvh;
+    }
+}
+
+.ak-c-dialog {
+    &.pf-m-danger {
+        --ak-c-dialog__title-icon--Color: var(--ak-c-dialog--m-danger__title-icon--Color);
+    }
+
+    &.pf-m-warning {
+        --ak-c-dialog__title-icon--Color: var(--ak-c-dialog--m-warning__title-icon--Color);
+    }
+
+    &.pf-m-success {
+        --ak-c-dialog__title-icon--Color: var(--ak-c-dialog--m-success__title-icon--Color);
+    }
+
+    &.pf-m-default {
+        --ak-c-dialog__title-icon--Color: var(--ak-c-dialog--m-default__title-icon--Color);
+    }
+
+    &.pf-m-info {
+        --ak-c-dialog__title-icon--Color: var(--ak-c-dialog--m-info__title-icon--Color);
+    }
+}
+
+/* #endregion */
+
+/* #region Content */
+
+.ak-c-dialog__content {
+    display: grid;
+    grid-template-rows: [header] auto [body] 1fr [footer] auto;
+    max-height: min(var(--ak-c-dialog--AspectRatioHeight), var(--ak-c-dialog--MaxHeight));
+    height: stretch;
+}
+
+.ak-c-dialog__content ::part(toolbar) {
+    position: var(--ak-c-dialog--toolbar--Position, sticky);
+    inset-block-start: var(--ak-c-dialog--toolbar--InsetBlockStart, 0);
+    z-index: var(--ak-c-dialog--toolbar--ZIndex, 1);
+}
+
+.ak-c-dialog__content [slot="before-body"] {
+    margin-block-end: 1rem;
+}
+
+.ak-c-dialog__content:has([part*="wizard"]) {
+    grid-template-rows: [body] auto;
+    --ak-c-dialog__body--PaddingRight: 0;
+    --ak-c-dialog__body--PaddingLeft: 0;
+    --ak-c-dialog__body--last-child--PaddingBottom: 0;
+    --ak-c-dialog__body--PaddingTop: 0;
+
+    ::part(body) {
+        overscroll-behavior: none;
+    }
+
+    ::part(header),
+    ::part(actions) {
+        display: none;
+    }
+}
+
+[part*="wizard"] {
+    max-height: var(--ak-c-dialog--MaxHeight);
+    display: block;
+    height: 100%;
+
+    [part="main"] {
+        display: block;
+    }
+
+    [part*="wizard-page"] {
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: column;
+    }
+}
+
+[part*="step-heading"] {
+    flex: 0 0 auto;
+    padding-inline: var(--pf-global--spacer--lg);
+    padding-block-start: var(--pf-global--spacer--sm);
+    background: var(--pf-global--BackgroundColor--150);
+    padding-block-end: var(--pf-global--spacer--sm);
+}
+
+/* #endregion */
diff --git a/web/src/elements/dialogs/directives.ts b/web/src/elements/dialogs/directives.ts
new file mode 100644
index 000000000000..9d6caf97f0b3
--- /dev/null
+++ b/web/src/elements/dialogs/directives.ts
@@ -0,0 +1,187 @@
+import { checkObjectShallowEquality } from "#common/collections";
+
+import { AKElement } from "#elements/Base";
+import { asInvoker, type ModalTemplate } from "#elements/dialogs/invokers";
+import type { DialogInit, TransclusionElementConstructor } from "#elements/dialogs/shared";
+import type { LitPropertyRecord } from "#elements/types";
+import { isAKElementConstructor, StrictUnsafe } from "#elements/utils/unsafe";
+
+import { ElementPart, noChange } from "lit";
+import {
+    directive,
+    Directive,
+    DirectiveResult,
+    PartInfo,
+    PartType,
+} from "lit-html/async-directive.js";
+
+//#region Directives
+
+type ModalDirectiveParameters = [
+    factory: ModalTemplate | CustomElementConstructor,
+    props?: LitPropertyRecord<object> | null,
+    options?: DialogInit,
+];
+
+/**
+ * A directive that manages the event listener for an invoker function created by {@linkcode asInvoker}.
+ *
+ * Supports memoization via an optional `deps` array in the options object. When `deps` is provided,
+ * the directive will skip rebinding the event listener if all dep values are shallowly equal to the
+ * previous render. If `deps` is omitted, the listener rebinds on every update (safe default).
+ *
+ * @see {@linkcode asInvoker} for the underlying invoker.
+ * @see {@linkcode modalInvoker} for the Lit HTML variation.
+ */
+export class ModalInvokerDirective extends Directive {
+    constructor(partInfo: PartInfo) {
+        super(partInfo);
+
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error("modalInvoker() can only be used on an element");
+        }
+    }
+
+    #cleanup: (() => void) | null = null;
+    #prevProps: LitPropertyRecord<object> | null = null;
+
+    public update(part: ElementPart, [factory, props, options]: ModalDirectiveParameters): void {
+        if (props && checkObjectShallowEquality(props, this.#prevProps)) {
+            // Skip rebind
+            return;
+        }
+
+        // Tear down old listener before rebinding
+        if (this.#cleanup) {
+            this.#cleanup();
+            this.#cleanup = null;
+        }
+
+        const listener = asInvoker(
+            (event) => {
+                if (!isAKElementConstructor(factory)) {
+                    return (factory as ModalTemplate)(event);
+                }
+
+                const tagName = window.customElements.getName(factory);
+
+                if (!tagName) {
+                    throw new TypeError("Provided constructor is not a registered custom element");
+                }
+
+                return StrictUnsafe(
+                    tagName,
+                    props as unknown as LitPropertyRecord<ModelFormLikeConstructor>,
+                );
+            },
+            { ...options, invokerElement: part.element },
+        );
+        part.element.addEventListener("click", listener);
+
+        const cleanup = () => {
+            part.element.removeEventListener("click", listener);
+            // Null out prevDeps so that the next render cycle always rebinds.
+            // This handles the case where an AbortSignal fires between renders.
+            this.#prevProps = null;
+        };
+
+        if (options?.signal) {
+            options.signal.addEventListener("abort", cleanup, { once: true });
+        }
+
+        this.#cleanup = cleanup;
+        this.#prevProps = props ?? null;
+    }
+
+    render(..._args: ModalDirectiveParameters) {
+        return noChange;
+    }
+}
+
+export type ModalInvokerDirectiveResult = DirectiveResult<typeof ModalInvokerDirective>;
+
+export type ModalInvoker = <T extends ModalTemplate | TransclusionElementConstructor>(
+    factory: T,
+    /**
+     * Optional props to pass to the custom element constructor when the factory is a constructor.
+     * Ignored if the factory is a ModalTemplate function.
+     */
+    props?: T extends TransclusionElementConstructor
+        ? LitPropertyRecord<InstanceType<T>> | null
+        : null,
+    options?: DialogInit,
+) => ModalInvokerDirectiveResult;
+
+/**
+ * A Lit HTML directive that can be used to attach a modal invoker to an element.
+ *
+ * ```ts
+ * html`<button ${modalInvoker(SomeModalConstructor)}>Open</button>`
+ * ```
+ */
+export const modalInvoker = directive(ModalInvokerDirective) as ModalInvoker;
+//#region Model Forms
+
+export interface ModelFormLike {
+    instancePk?: string | number | null;
+}
+
+export interface ModelFormLikeConstructor extends CustomElementConstructor {
+    new (): ModelFormLike;
+}
+
+/**
+ * A helper function to create a modal invoker for editing an instance of a form-like element.
+ *
+ * @remarks
+ * This is defined externally from the form itself to allow existing forms to
+ * easily add edit invokers without needing to extend a specific base class.
+ */
+export function asInstanceInvoker<T extends ModelFormLikeConstructor>(
+    this: T,
+    instancePk?: string | number | null,
+    props?: LitPropertyRecord<InstanceType<T>> | null,
+    init?: DialogInit,
+): ModalInvokerDirectiveResult {
+    const mergedProps: LitPropertyRecord<ModelFormLikeConstructor> = { instancePk, ...props };
+
+    return modalInvoker(this, mergedProps as unknown as undefined, init);
+}
+
+/**
+ * Given a tag name, looks up the corresponding custom element constructor and returns it.
+ *
+ * @throws {TypeError} If no custom element is defined for the given tag name.
+ * @param tagName The tag name of the custom element to look up.
+ * @returns The custom element constructor associated with the given tag name.
+ */
+export function lookupElementConstructor<T extends CustomElementConstructor>(
+    tagName: string,
+    registry: CustomElementRegistry = window.customElements,
+): T {
+    const ElementConstructor = registry.get(tagName);
+
+    if (!ElementConstructor) {
+        throw new TypeError(`No custom element defined for tag name: ${tagName}`);
+    }
+
+    return ElementConstructor as unknown as T;
+}
+
+/**
+ * A helper function to create a modal invoker for editing an instance of a form-like element,
+ * given the tag name of the custom element.
+ *
+ * This is a convenience wrapper around {@linkcode asEditModalInvoker}
+ * that performs a lookup of the custom element constructor based on the provided tag name.
+ */
+export function asInstanceInvokerByTagName<T extends AKElement>(
+    tagName: string,
+    instancePk?: string | number | null,
+    props?: LitPropertyRecord<T>,
+    init?: DialogInit,
+): ModalInvokerDirectiveResult {
+    const ElementConstructor = lookupElementConstructor<ModelFormLikeConstructor>(tagName);
+
+    return asInstanceInvoker.call(ElementConstructor, instancePk, props, init);
+}
diff --git a/web/src/elements/dialogs/index.ts b/web/src/elements/dialogs/index.ts
new file mode 100644
index 000000000000..8678b2596342
--- /dev/null
+++ b/web/src/elements/dialogs/index.ts
@@ -0,0 +1,8 @@
+export * from "./utils.js";
+export * from "./ak-modal.js";
+export * from "./directives.js";
+export * from "./shared.js";
+export * from "./invokers.js";
+export * from "./components/IconEditButton.js";
+export * from "./components/ModalInvokerButton.js";
+export * from "./components/IconEditButtonByTagName.js";
diff --git a/web/src/elements/dialogs/invokers.ts b/web/src/elements/dialogs/invokers.ts
new file mode 100644
index 000000000000..6b5531f56658
--- /dev/null
+++ b/web/src/elements/dialogs/invokers.ts
@@ -0,0 +1,56 @@
+import { AKModal } from "#elements/dialogs/ak-modal";
+import { DialogInit } from "#elements/dialogs/shared";
+import { renderDialog, renderModal } from "#elements/dialogs/utils";
+import { SlottedTemplateResult } from "#elements/types";
+import { isAKElementConstructor } from "#elements/utils/unsafe";
+
+export type ModalTemplate = (event: Event) => SlottedTemplateResult;
+
+export type InvokerListener = (event: Event) => Promise<void> | void;
+
+/**
+ * A utility function that takes a {@linkcode ModalTemplate} and returns
+ * a function that renders the corresponding modal dialog when invoked.
+ *
+ * @param renderer A function that returns a template result to render inside the modal dialog.
+ * @param init Initialization options for the modal dialog.
+ */
+export function asInvoker(renderer: ModalTemplate, init?: DialogInit): InvokerListener;
+/**
+ * A utility function that takes a {@linkcode CustomElementConstructor} and returns
+ * a function that renders the corresponding modal dialog when invoked.
+ *
+ * @param Constructor A custom element constructor or a function that returns a template result.
+ * @param init Initialization options for the modal dialog.
+ */
+export function asInvoker(
+    Constructor: CustomElementConstructor,
+    init?: DialogInit,
+): () => Promise<void>;
+/**
+ * A utility function that takes either a {@linkcode CustomElementConstructor}
+ * or a {@linkcode ModalTemplate} and returns a function that renders the corresponding modal dialog.
+ *
+ * @param factory The input to render as a modal dialog, either a custom element constructor or a function that returns a template result.
+ * @param init Initialization options for the modal dialog.
+ */
+export function asInvoker(
+    factory: ModalTemplate | CustomElementConstructor,
+    init?: DialogInit,
+): (event?: Event) => Promise<void>;
+export function asInvoker(
+    factory: ModalTemplate | CustomElementConstructor,
+    init?: DialogInit,
+): (event?: Event) => Promise<void> {
+    return (event?: Event) => {
+        const child = isAKElementConstructor(factory)
+            ? new factory()
+            : (factory as ModalTemplate)(event!);
+
+        if (child instanceof AKModal) {
+            return renderDialog(child, init);
+        }
+
+        return renderModal(child, init);
+    };
+}
diff --git a/web/src/elements/dialogs/shared.ts b/web/src/elements/dialogs/shared.ts
new file mode 100644
index 000000000000..87875429d94b
--- /dev/null
+++ b/web/src/elements/dialogs/shared.ts
@@ -0,0 +1,164 @@
+import { PFSize } from "#common/enums";
+
+import { SlottedTemplateResult } from "#elements/types";
+
+import { LitElement } from "lit";
+
+//#region Types
+
+/**
+ * Initialization options for dialog and modal rendering functions.
+ */
+export interface DialogInit {
+    /**
+     * The document to use for creating and rendering the dialog. Defaults to the global `document`.
+     */
+    ownerDocument?: Document;
+    /**
+     * The parent element to use for rendering the dialog. Defaults to the document body.
+     */
+    parentElement?: HTMLElement | string | null;
+    /**
+     * The element that invoked the dialog.
+     * This determines the context where events are dispatched from the dialog.
+     */
+    invokerElement?: Element | null;
+    /**
+     * A value passed to {@linkcode HTMLDialogElement} to determine how the dialog can be closed.
+     *
+     * @see {@linkcode ClosedBy} for additional details on the available options and their behavior.
+     */
+    closedBy?: ClosedBy;
+    /**
+     * The inline-size to use for the dialog when rendered.
+     * This can be used to control the width of the dialog.
+     */
+    size?: PFSize;
+    /**
+     * Additional CSS classes to apply to the dialog element when rendered.
+     */
+    classList?: string[];
+    /**
+     * An {@linkcode AbortSignal} that can be used to automatically close the dialog when aborted.
+     */
+    signal?: AbortSignal;
+    /**
+     * A callback function that is invoked when the dialog is disposed.
+     *
+     * @param event The event that triggered the disposal, if any.
+     */
+    onDispose?: (event?: Event) => void;
+}
+
+export interface TransclusionElementConstructor extends CustomElementConstructor {
+    verboseName?: string | null;
+    verboseNamePlural?: string | null;
+    createLabel?: string | null;
+}
+
+//#endregion
+
+//#region Transclusion
+
+/**
+ * A symbol used to identify elements that are designed to be transcluded
+ * into dialogs or other containers that support transclusion.
+ */
+export const TransclusionChildSymbol = Symbol("transclusion-child");
+
+/**
+ * A symbol used to identify elements that are designed to be parents of transcluded elements,
+ * such as dialogs or other containers that support transclusion.
+ */
+export const TransclusionParentSymbol = Symbol("transclusion-parent");
+
+export interface TransclusionParentElement extends LitElement {
+    [TransclusionParentSymbol]: boolean;
+
+    slottedElementUpdatedAt?: Date | null;
+}
+
+/**
+ * An element that is designed to included in a dialog or other container that supports transclusion.
+ */
+export interface TransclusionChildElement extends LitElement {
+    /**
+     * A marker property to identify this element as a TransclusionElement.
+     *
+     * This is useful to avoid a strict type or interface check,
+     * which can be problematic when dealing with elements across different shadow roots.
+     */
+    [TransclusionChildSymbol]: boolean;
+
+    /**
+     * The parent element that this element is transcluded into, if any.
+     * This can be used to determine the context in which the element is rendered,
+     * and to access properties or methods of the parent container if needed.
+     */
+    parentElement: HTMLElement | TransclusionParentElement | null;
+
+    /**
+     * The display box to use for the element when rendered in a dialog or other container.
+     */
+    displayBox?: "contents" | "block";
+
+    /**
+     * The size to use for the element when rendered in a dialog or other container.
+     */
+    size?: PFSize | null;
+
+    /**
+     * Whether the element is considered visible for the purposes of rendering in a dialog or other container.
+     */
+    visible?: boolean;
+
+    /**
+     * An optional method to render a header for the element, which can be used
+     * when the element is transcluded into a dialog or other container that supports headers.
+     *
+     * @param force Whether to force the contents to render.
+     */
+    renderHeader?(force?: boolean): SlottedTemplateResult;
+
+    /**
+     * An optional method to render action buttons for the element, which can be used
+     * when the element is transcluded into a dialog or other container that supports action buttons.
+     *
+     * @param force Whether to force the contents to render.
+     */
+    renderActions?(force?: boolean): SlottedTemplateResult;
+
+    /**
+     * The label to use for the cancel button when this element is transcluded
+     * into a dialog or other container.
+     */
+    cancelButtonLabel?: string | null;
+
+    /**
+     * Whether the dialog or other container should render a default cancel button
+     * when this element is transcluded.
+     */
+    cancelable?: boolean;
+}
+
+/**
+ * Type predicate to determine if an element is a {@linkcode TransclusionChildElement}.
+ *
+ * @param element The element to check.
+ */
+export function isTransclusionElement(element: Element): element is TransclusionChildElement {
+    return TransclusionChildSymbol in element;
+}
+
+/**
+ * Type predicate to determine if an element is a {@linkcode TransclusionParentElement}.
+ *
+ * @param element The element to check.
+ */
+export function isTransclusionParentElement(
+    element: Element | null,
+): element is TransclusionParentElement {
+    return !!(element && TransclusionParentSymbol in element);
+}
+
+//#endregion
diff --git a/web/src/elements/dialogs/utils.ts b/web/src/elements/dialogs/utils.ts
new file mode 100644
index 000000000000..f95907d31418
--- /dev/null
+++ b/web/src/elements/dialogs/utils.ts
@@ -0,0 +1,158 @@
+/**
+ * @file Modal and dialog rendering utilities.
+ */
+
+import "#elements/dialogs/ak-modal";
+
+import { AKRefreshEvent } from "#common/events";
+
+import { DialogInit } from "#elements/dialogs/shared";
+import { ifPresent } from "#elements/utils/attributes";
+
+import { html, render } from "lit";
+
+//#region Rendering
+
+/**
+ * Resolves the container element for a dialog, given an optional parent element or selector.
+ *
+ * If the parent element is not provided or cannot be resolved, the document body is returned.
+ *
+ * @param ownerDocument The document to query for the parent element. Defaults to the global document.
+ * @param parentElement An optional HTMLElement or selector string to use as the dialog container.
+ *
+ * @returns The resolved container HTMLElement for the dialog.
+ */
+export function resolveDialogContainer(
+    ownerDocument: Document = document,
+    parentElement?: HTMLElement | string | null,
+): HTMLElement {
+    if (parentElement instanceof HTMLElement) {
+        return parentElement;
+    }
+
+    if (typeof parentElement === "string") {
+        const resolvedElement = ownerDocument.querySelector(parentElement);
+
+        if (resolvedElement instanceof HTMLElement) {
+            return resolvedElement;
+        }
+    }
+
+    return ownerDocument.body;
+}
+
+function setDialogCountAttribute(delta: number, ownerDocument: Document = document): void {
+    const { dataset } = ownerDocument.documentElement;
+
+    const currentCount = parseInt(dataset.dialogCount || "0", 10);
+    const nextCount = Math.max(0, currentCount + delta);
+
+    if (nextCount === 0) {
+        delete dataset.dialogCount;
+    } else {
+        dataset.dialogCount = nextCount.toString();
+    }
+}
+
+/**
+ * Renders a dialog with the given template.
+ *
+ * @param renderable The template to render inside the dialog.
+ * @param init Initialization options for the dialog.
+ *
+ * @returns A promise that resolves when the dialog is closed.
+ *
+ * @remarks
+ * In the context of the {@link HTMLDialogElement}, we distinguish between __modal__
+ * dialogs, which are shown using the `showModal()` method and block interaction with the rest of the page,
+ * and __non-modal__ dialogs, which are shown using the `show()` method and allow interaction with the rest of the page.
+ *
+ * For almost all use cases in authentik, dialogs are modal. However, {@linkcode AKModal}
+ * (and its implementors) are what a developer would typically consider to be the modal itself.
+ *
+ * Here be dragons! The delination between "dialog" and "modal" is not based on
+ * the presence of a backdrop or blocking behavior, but rather on the underlying HTML elements
+ *  and method used to display it.
+ *
+ * **Incorrect usage can impact accessibility significantly.**
+ */
+export function renderDialog(
+    renderable: unknown,
+    {
+        ownerDocument = document,
+        signal,
+        parentElement = ownerDocument.getElementById("interface-root"),
+        invokerElement,
+        closedBy = "any",
+        classList = [],
+        onDispose,
+    }: DialogInit = {},
+): Promise<void> {
+    const dialog = ownerDocument.createElement("dialog");
+    dialog.classList.add("ak-c-dialog", ...classList);
+    dialog.closedBy = closedBy;
+    dialog.part = "dialog";
+
+    const messageContainer = ownerDocument.createElement("ak-message-container");
+    messageContainer.alignment = "bottom-left";
+
+    dialog.appendChild(messageContainer);
+
+    const resolvers = Promise.withResolvers<void>();
+
+    const container = resolveDialogContainer(ownerDocument, parentElement);
+    const shadowRoot = container.shadowRoot ?? container;
+
+    shadowRoot.appendChild(dialog);
+
+    const dispose = (event?: Event) => {
+        const { returnValue } = dialog;
+
+        if (returnValue === "submitted") {
+            const dispatcher = invokerElement ?? dialog;
+            dispatcher.dispatchEvent(new AKRefreshEvent());
+        }
+
+        dialog.close();
+        dialog.remove();
+        resolvers.resolve();
+
+        setDialogCountAttribute(-1, ownerDocument);
+
+        onDispose?.(event);
+    };
+
+    dialog.addEventListener("close", dispose, {
+        passive: true,
+        once: true,
+    });
+
+    signal?.addEventListener("abort", dispose, {
+        passive: true,
+        once: true,
+    });
+
+    render(renderable, dialog);
+
+    setDialogCountAttribute(1, ownerDocument);
+
+    return resolvers.promise;
+}
+
+/**
+ * Renders a modal dialog with the given template.
+ *
+ * @param renderable The template to render inside the modal.
+ * @param init Initialization options for the modal.
+ *
+ * @returns A promise that resolves when the modal is closed.
+ */
+export function renderModal(renderable: unknown, init?: DialogInit): Promise<void> {
+    return renderDialog(
+        html`<ak-modal size=${ifPresent(init?.size)}>${renderable}</ak-modal>`,
+        init,
+    );
+}
+
+//#endregion
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index c565e7fd3cbf..9779552ce53d 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -3,6 +3,7 @@ import "#elements/LoadingOverlay";
 import { isFormField } from "./form-associated-element";
 
 import { EVENT_REFRESH } from "#common/constants";
+import { PFSize } from "#common/enums";
 import {
     APIError,
     parseAPIResponseError,
@@ -12,6 +13,18 @@ import {
 import { APIMessage, MessageLevel } from "#common/messages";
 
 import { AKElement } from "#elements/Base";
+import { intersectionObserver } from "#elements/decorators/intersection-observer";
+import {
+    DialogInit,
+    modalInvoker,
+    ModalInvokerDirectiveResult,
+    renderModal,
+} from "#elements/dialogs";
+import {
+    isTransclusionParentElement,
+    TransclusionChildElement,
+    TransclusionChildSymbol,
+} from "#elements/dialogs/shared";
 import { reportInvalidFields } from "#elements/forms/errors";
 import Styles from "#elements/forms/Form.css";
 import { reportValidityDeep } from "#elements/forms/FormGroup";
@@ -19,15 +32,7 @@ import { PreventFormSubmit } from "#elements/forms/helpers";
 import { HorizontalFormElement } from "#elements/forms/HorizontalFormElement";
 import { serializeForm } from "#elements/forms/serialization";
 import { showMessage } from "#elements/messages/MessageContainer";
-import { TransclusionElement } from "#elements/modals/shared";
-import {
-    DialogInit,
-    modalInvoker,
-    ModalInvokerDirectiveResult,
-    ModalInvokerInit,
-    renderModal,
-} from "#elements/modals/utils";
-import { SlottedTemplateResult } from "#elements/types";
+import { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
 import { createFileMap } from "#elements/utils/inputs";
 
 import { ConsoleLogger } from "#logger/browser";
@@ -35,7 +40,7 @@ import { ConsoleLogger } from "#logger/browser";
 import { instanceOfValidationError } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, html, nothing } from "lit";
+import { CSSResult, html, nothing, PropertyValues } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { customElement, property, state } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
@@ -95,7 +100,7 @@ export interface AKFormSubmitEvent<T> extends SubmitEvent {
 @customElement("ak-form")
 export class Form<T = Record<string, unknown>, D = T>
     extends AKElement
-    implements TransclusionElement
+    implements TransclusionChildElement
 {
     public static styles: CSSResult[] = [
         PFCard,
@@ -109,13 +114,44 @@ export class Form<T = Record<string, unknown>, D = T>
         Styles,
     ];
 
+    /**
+     * Optional singular label for the type of entity this form creates/edits.
+     */
+    public static verboseName: string | null = null;
+
+    /**
+     * Optional plural label for the type of entity this form creates/edits
+     */
+    public static verboseNamePlural: string | null = null;
+
+    /**
+     * The modifier to use in the default headline, e.g. "New"
+     */
+    public static createLabel: string | null = msg("New", {
+        id: "form.new-entity",
+    });
+
+    /**
+     * The verb to use in the default submit button label, e.g. "Create" or "Update".
+     */
+    public static submitVerb: string = msg("Create", {
+        id: "form.submit.verb.create",
+    });
+
+    //#region Modal helpers
+
+    public [TransclusionChildSymbol] = true;
+
     /**
      * A helper method to create an invoker for a modal containing this form.
      *
      * @see {@linkcode modalInvoker} for the underlying implementation.
      */
-    public static asModalInvoker(init?: ModalInvokerInit): ModalInvokerDirectiveResult {
-        return modalInvoker(this, init);
+    public static asModalInvoker(
+        props?: LitPropertyRecord<Form>,
+        init?: DialogInit,
+    ): ModalInvokerDirectiveResult {
+        return modalInvoker(this, props, init);
     }
 
     /**
@@ -141,7 +177,9 @@ export class Form<T = Record<string, unknown>, D = T>
         return renderModal(this, init);
     }
 
-    protected logger = ConsoleLogger.prefix(`form/${this.tagName.toLowerCase()}`);
+    //#endregion
+
+    protected logger = ConsoleLogger.prefix(`form/${this.localName}`);
 
     /**
      * Send the serialized form to its destination.
@@ -152,10 +190,18 @@ export class Form<T = Record<string, unknown>, D = T>
      */
     protected send?(data: NonNullable<D>): Promise<unknown>;
 
-    viewportCheck = true;
-
     //#region Properties
 
+    /**
+     * Whether the table is visible in the viewport.
+     *
+     * @remarks
+     * We cache the visibility between frames to avoid the synchronous `getBoundingClientRect()`
+     * call within {@linkcode isInViewport}.
+     */
+    @intersectionObserver()
+    public visible = false;
+
     @property({ type: String })
     public successMessage?: string;
 
@@ -165,11 +211,25 @@ export class Form<T = Record<string, unknown>, D = T>
     @property({ type: String, useDefault: true })
     public headline?: string | null = null;
 
+    @property({ type: String, useDefault: true })
+    public size: PFSize | null = null;
+
+    /**
+     * The label for the submit button. If not provided,
+     * a default label will be generated based on `verboseName`,
+     * falling back to "Create".
+     */
     @property({ type: String, attribute: "action-label", useDefault: true })
     public submitLabel: string | null = null;
 
     @property({ type: String, attribute: "cancel-label", useDefault: true })
-    public cancelButtonLabel: string | null = null;
+    public cancelButtonLabel: string | null = msg("Cancel");
+
+    @property({ type: Boolean, attribute: "cancelable", useDefault: true })
+    public cancelable = true;
+
+    @property({ type: Boolean, attribute: "submittable", useDefault: true })
+    public submittable = true;
 
     //#endregion
 
@@ -197,39 +257,59 @@ export class Form<T = Record<string, unknown>, D = T>
     }
 
     @state()
-    protected loading = false;
+    protected submitting = false;
 
-    protected loadingOverlay = this.ownerDocument.createElement("ak-loading-overlay");
+    protected sendingOverlay = this.ownerDocument.createElement("ak-loading-overlay");
 
     @state()
     protected nonFieldErrors: readonly string[] | null = null;
 
+    #verboseName: string | null = null;
+
     /**
-     * Optiona singular label for the type of entity this form creates/edits, used in success messages and the like.
-     */
-    @property({ type: String })
-    public entitySingular: string | null = null;
-    /**
-     * Optiona plural label for the type of entity this form creates/edits, used in success messages and the like.
+     * Optional singular label for the type of entity this form creates/edits.
+     *
+     * Overrides the static `verboseName` property for this instance.
      */
-    @property({ type: String })
-    public entityPlural: string | null = null;
+    @property({ type: String, attribute: "entity-singular" })
+    public set verboseName(value: string | null) {
+        this.#verboseName = value;
+
+        if (isTransclusionParentElement(this.parentElement)) {
+            this.parentElement.slottedElementUpdatedAt = new Date();
+        }
+    }
+
+    public get verboseName(): string | null {
+        return this.#verboseName || (this.constructor as typeof Form).verboseName;
+    }
+
+    #verboseNamePlural: string | null = null;
 
     /**
-     * Called by the render function.
+     * Optional plural label for the type of entity this form creates/edits.
      *
-     * Blocks rendering the form if the form is not within the
-     * viewport.
-     *
-     * @todo Consider using a observer instead.
+     * Overrides the static `verboseNamePlural` property for this instance.
      */
-    public get isInViewport(): boolean {
-        const rect = this.getBoundingClientRect();
-        return rect.x + rect.y + rect.width + rect.height !== 0;
+    @property({ type: String, attribute: "entity-plural" })
+    public set verboseNamePlural(value: string | null) {
+        this.#verboseNamePlural = value;
+
+        if (isTransclusionParentElement(this.parentElement)) {
+            this.parentElement.slottedElementUpdatedAt = new Date();
+        }
+    }
+
+    public get verboseNamePlural(): string | null {
+        return this.#verboseNamePlural || (this.constructor as typeof Form).verboseNamePlural;
     }
 
     protected defaultSlot: HTMLSlotElement = this.ownerDocument.createElement("slot");
 
+    //#endregion
+
+    //#region Formatters
+
     /**
      * An overridable method for returning a success message after a successful submission.
      *
@@ -274,13 +354,12 @@ export class Form<T = Record<string, unknown>, D = T>
             return headline;
         }
 
-        const noun = this.entitySingular;
-        modifier ||= msg("New", {
-            id: "model-form.headline.modifier.new",
-        });
+        const noun = this.verboseName;
+
+        modifier ||= (this.constructor as typeof Form).createLabel;
 
         if (!noun) {
-            return modifier;
+            return modifier || "";
         }
 
         return msg(str`${modifier} ${noun}`, {
@@ -297,15 +376,18 @@ export class Form<T = Record<string, unknown>, D = T>
             return submitLabel;
         }
 
-        return this.entitySingular
-            ? msg(str`Create ${this.entitySingular}`, {
-                  id: "model-form.create-submit",
+        const noun = this.verboseName;
+        const verb = (this.constructor as typeof Form).submitVerb;
+
+        return noun
+            ? msg(str`${verb} ${noun}`, {
+                  id: "form.submit.verb-entity",
               })
-            : msg("Create", {
-                  id: "model-form.create-submit-no-entity",
-              });
+            : verb;
     }
 
+    //#endregion
+
     //#region Public methods
 
     public reset(): void {
@@ -375,8 +457,10 @@ export class Form<T = Record<string, unknown>, D = T>
      * Serialize and send the form to the destination. The `send()` method must be overridden for
      * this to work. If processing the data results in an error, we catch the error, distribute
      * field-levels errors to the fields, and send the rest of them to the Notifications.
+     *
+     * @returns A promise that resolves to the response from `send()`, or `false` if the form is invalid.
      */
-    public submit = (submitEvent: SubmitEvent): Promise<unknown | false> => {
+    public submit = <T = unknown>(submitEvent: SubmitEvent): Promise<T | false> => {
         submitEvent.preventDefault();
 
         if (!this.reportValidity()) {
@@ -421,7 +505,7 @@ export class Form<T = Record<string, unknown>, D = T>
                 // Re-dispatch the submit event so that parent components can listen for it.
                 this.dispatchEvent(submitEvent);
 
-                return response;
+                return response as T;
             })
             .catch(async (error: unknown) => {
                 if (error instanceof PreventFormSubmit) {
@@ -444,7 +528,7 @@ export class Form<T = Record<string, unknown>, D = T>
                             .find(Boolean);
 
                         if (focusTarget) {
-                            requestAnimationFrame(() => focusTarget.focus());
+                            requestAnimationFrame(() => focusTarget.focus?.());
                         } else if (Array.isArray(parsedError.nonFieldErrors)) {
                             this.nonFieldErrors = parsedError.nonFieldErrors;
                         } else {
@@ -465,19 +549,45 @@ export class Form<T = Record<string, unknown>, D = T>
     };
 
     protected doSubmit = (event: SubmitEvent): void => {
-        if (this.loading) {
+        if (this.submitting) {
             this.logger.info("Skipping submit. Already submitting!");
         }
 
-        this.loading = true;
+        this.submitting = true;
 
         this.submit(event).finally(() => {
-            this.loading = false;
+            this.submitting = false;
         });
     };
 
+    protected dispatchSubmit = (): void => {
+        return this.doSubmit(
+            new SubmitEvent("submit", {
+                submitter: this,
+                cancelable: true,
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    };
+
     //#endregion
 
+    //#region Lifecycle
+    public updated(changedProperties: PropertyValues<this>): void {
+        super.updated(changedProperties);
+
+        if (changedProperties.has("size")) {
+            if (this.size) {
+                // eslint-disable-next-line wc/no-self-class
+                this.classList.add(this.size);
+            } else {
+                // eslint-disable-next-line wc/no-self-class
+                this.classList.remove(...Object.values(PFSize));
+            }
+        }
+    }
+
     //#endregion
 
     //#region Render
@@ -489,19 +599,16 @@ export class Form<T = Record<string, unknown>, D = T>
             return this.defaultSlot;
         }
 
-        return html`<div part="form-wrapper">
-            <slot name="before-form"></slot>
-            <form
-                id="form"
-                ${ref(this.formRef)}
-                class="pf-c-form pf-m-horizontal"
-                autocomplete=${ifDefined(this.autocomplete)}
-                method="dialog"
-                @submit=${this.doSubmit}
-            >
-                ${inline}
-            </form>
-        </div>`;
+        return html`<form
+            id="form"
+            ${ref(this.formRef)}
+            class="pf-c-form pf-m-horizontal"
+            autocomplete=${ifDefined(this.autocomplete)}
+            method="dialog"
+            @submit=${this.doSubmit}
+        >
+            ${inline}
+        </form>`;
     }
 
     /**
@@ -545,17 +652,35 @@ export class Form<T = Record<string, unknown>, D = T>
      * allowing the slot parent to provide the header in a more visually appropriate manner.
      */
     public renderHeader(force?: boolean): SlottedTemplateResult {
-        const { assignedSlot, headline } = this;
-
-        return guard([force, assignedSlot, headline], () => {
-            if (!force && assignedSlot && (!assignedSlot.name || assignedSlot.name === "form")) {
-                return nothing;
+        const { headline, assignedSlot, verboseName } = this;
+
+        return guard([force, assignedSlot, verboseName, headline], () => {
+            if (
+                !force &&
+                assignedSlot &&
+                (assignedSlot.name === "form" || assignedSlot.name === "")
+            ) {
+                return null;
             }
 
-            return this.formatHeadline(headline);
+            return html`<h1 part="form-header" class="pf-c-title pf-m-2xl">
+                ${this.formatHeadline()}
+            </h1>`;
         });
     }
 
+    public renderSubmitButton(submitLabel = this.submitLabel): SlottedTemplateResult {
+        return html`<button
+            type="button"
+            class="pf-c-button pf-m-primary"
+            @click=${this.dispatchSubmit}
+            part="submit-button"
+            aria-description=${msg("Submit action")}
+        >
+            ${this.formatSubmitLabel(submitLabel)}
+        </button>`;
+    }
+
     /**
      * An overridable method for rendering the form actions.
      *
@@ -564,56 +689,36 @@ export class Form<T = Record<string, unknown>, D = T>
      * allowing the slot parent to provide the actions in a more visually appropriate manner.
      */
     public renderActions(force?: boolean): SlottedTemplateResult {
-        const { assignedSlot, submitLabel } = this;
+        const { submitLabel, assignedSlot } = this;
 
         return guard([force, assignedSlot, submitLabel], () => {
-            if (!force && assignedSlot && (!assignedSlot.name || assignedSlot.name === "form")) {
-                return nothing;
+            if (
+                !force &&
+                assignedSlot &&
+                (assignedSlot.name === "form" || assignedSlot.name === "")
+            ) {
+                return null;
             }
 
             return html`<div part="form-actions" class="pf-c-card__footer">
-                <button
-                    type="button"
-                    class="pf-c-button pf-m-primary"
-                    @click=${() => {
-                        this.doSubmit(
-                            new SubmitEvent("submit", {
-                                submitter: this,
-                                cancelable: true,
-                                bubbles: true,
-                                composed: true,
-                            }),
-                        );
-                    }}
-                    part="submit-button"
-                    aria-description=${msg("Submit action")}
-                >
-                    ${this.formatSubmitLabel(submitLabel)}
-                </button>
+                ${this.renderSubmitButton()}
             </div>`;
         });
     }
 
-    /**
-     * An overridable method for rendering the form when it is visible.
-     */
-    protected renderVisible(): SlottedTemplateResult {
+    protected override render(): SlottedTemplateResult {
+        if (!this.visible) {
+            return nothing;
+        }
+
         return [
-            this.loading ? this.loadingOverlay : nothing,
+            this.submitting ? this.sendingOverlay : nothing,
             this.renderHeader(),
             this.renderNonFieldErrors(),
             this.renderFormWrapper(),
-            this.renderActions(),
+            this.renderActions?.() || null,
         ];
     }
 
-    protected override render(): SlottedTemplateResult {
-        if (this.viewportCheck && !this.isInViewport) {
-            return nothing;
-        }
-
-        return this.renderVisible();
-    }
-
     //#endregion
 }
diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts
index ad84651d3972..194debcf3e9c 100644
--- a/web/src/elements/forms/ModalForm.ts
+++ b/web/src/elements/forms/ModalForm.ts
@@ -66,9 +66,9 @@ export class ModalForm extends ModalButton {
 
     //#endregion
 
-    // #region Private methods
+    // #region Public methods
 
-    #confirm = async (): Promise<void> => {
+    public submit = async (event?: Event): Promise<void> => {
         const form = findSlottedInstance(Form, this.formSlot);
 
         if (!form) {
@@ -85,9 +85,14 @@ export class ModalForm extends ModalButton {
         this.loading = true;
         this.locked = true;
 
+        const submitter =
+            event instanceof SubmitEvent
+                ? event.submitter
+                : ((event?.currentTarget || this) as HTMLElement);
+
         const formPromise = form.submit(
             new SubmitEvent("submit", {
-                submitter: this,
+                submitter,
             }),
         );
 
@@ -118,7 +123,7 @@ export class ModalForm extends ModalButton {
             });
     };
 
-    #cancel = (): void => {
+    public requestClose = (): void => {
         const defaultInvoked = this.dispatchEvent(new ModalHideEvent(this));
 
         if (defaultInvoked) {
@@ -130,7 +135,7 @@ export class ModalForm extends ModalButton {
 
     //#region Listeners
 
-    #refreshListener = (e: Event): void => {
+    protected refreshListener = (e: Event): void => {
         // if the modal should stay open after successful submit, prevent EVENT_REFRESH from bubbling
         // to the parent components (which would cause table refreshes that destroy the modal)
         if (!this.closeAfterSuccessfulSubmit) {
@@ -138,7 +143,7 @@ export class ModalForm extends ModalButton {
         }
     };
 
-    #scrollListener = () => {
+    protected scrollListener = () => {
         window.dispatchEvent(
             new CustomEvent("scroll", {
                 bubbles: true,
@@ -146,6 +151,19 @@ export class ModalForm extends ModalButton {
         );
     };
 
+    protected slotChangeListener = () => {
+        const slottedForm = findSlottedInstance(Form, this.formSlot);
+
+        if (!slottedForm) {
+            return;
+        }
+
+        slottedForm.visible = true;
+
+        this.headingContent = slottedForm.headline || null;
+        this.submitButtonContent = slottedForm.submitLabel || null;
+    };
+
     //#endregion
 
     //#region Lifecycle
@@ -163,16 +181,9 @@ export class ModalForm extends ModalButton {
         this.submitSlot = this.ownerDocument.createElement("slot");
         this.submitSlot.name = "submit";
 
-        this.formSlot.addEventListener("slotchange", () => {
-            const slottedForm = this.hasSlotted("header")
-                ? null
-                : findSlottedInstance(Form, this.formSlot);
-
-            this.headingContent = slottedForm?.headline || null;
-            this.submitButtonContent = slottedForm?.submitLabel || null;
-        });
+        this.formSlot.addEventListener("slotchange", this.slotChangeListener);
 
-        this.addEventListener(EVENT_REFRESH, this.#refreshListener);
+        this.addEventListener(EVENT_REFRESH, this.refreshListener);
     }
 
     //#endregion
@@ -197,7 +208,7 @@ export class ModalForm extends ModalButton {
 
             return html`<button
                 type="button"
-                @click=${this.#confirm}
+                @click=${this.submit}
                 class="pf-c-button pf-m-primary"
                 aria-description=${msg("Submit action")}
             >
@@ -212,7 +223,7 @@ export class ModalForm extends ModalButton {
             <button
                 type="button"
                 aria-description=${msg("Cancel action")}
-                @click=${this.#cancel}
+                @click=${this.requestClose}
                 class="pf-c-button pf-m-plain"
             >
                 ${this.cancelText}
@@ -227,7 +238,7 @@ export class ModalForm extends ModalButton {
                 : nothing}
             ${this.renderHeading()}
             <slot name="above-form"></slot>
-            <div class="pf-c-modal-box__body" @scroll=${this.#scrollListener}>${this.formSlot}</div>
+            <div class="pf-c-modal-box__body" @scroll=${this.scrollListener}>${this.formSlot}</div>
             ${this.renderActions()}`;
     }
 
diff --git a/web/src/elements/forms/ModelForm.ts b/web/src/elements/forms/ModelForm.ts
index 18892b012230..2e91da73f7df 100644
--- a/web/src/elements/forms/ModelForm.ts
+++ b/web/src/elements/forms/ModelForm.ts
@@ -1,17 +1,36 @@
 import "#elements/EmptyState";
 
+import { APIError, parseAPIResponseError, pluckErrorDetail } from "#common/errors/network";
 import { AKRefreshEvent } from "#common/events";
 
 import { listen } from "#elements/decorators/listen";
+import { asInstanceInvoker } from "#elements/dialogs";
 import { Form } from "#elements/forms/Form";
-import { asEditModalInvoker } from "#elements/modals/utils";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { ConsoleLogger } from "#logger/browser";
 
 import { msg, str } from "@lit/localize";
-import { html } from "lit";
-import { property } from "lit/decorators.js";
+import { html } from "lit-html";
+import { property, state } from "lit/decorators.js";
+
+interface NamedInstance {
+    verboseName?: string;
+    verboseNamePlural?: string;
+}
+
+/**
+ * Predicate to determine if a given instance has verbose name properties.
+ *
+ * This is useful for plucking out the labels for dynamic forms.
+ */
+function isNamedInstance(instance: unknown): instance is NamedInstance {
+    if (!instance || typeof instance !== "object") {
+        return false;
+    }
+
+    return "verboseName" in instance || "verboseNamePlural" in instance;
+}
 
 /**
  * A base form that automatically tracks the server-side object (instance)
@@ -29,6 +48,20 @@ export abstract class ModelForm<
     PKT extends string | number = string | number,
     D = T,
 > extends Form<T, D> {
+    /**
+     * The modifier to use in the default headline when editing an instance, e.g. "Edit".
+     */
+    public static modifierLabel: string | null = msg("Edit", {
+        id: "form.modifier.edit",
+    });
+
+    /**
+     * The label to use for the submit button when editing an instance, e.g. "Save Changes".
+     */
+    public static saveLabel: string | null = msg("Save Changes", {
+        id: "form.submit.save-changes",
+    });
+
     /**
      * A helper method to create an invoker for editing an instance of this form.
      *
@@ -37,9 +70,17 @@ export abstract class ModelForm<
      * @see {@linkcode Form.asModalInvoker} for opening a blank form in a modal.
      * @see {@linkcode asInvoker} for the underlying implementation.
      */
-    public static asEditModalInvoker = asEditModalInvoker;
+    public static asInstanceInvoker = asInstanceInvoker;
+
+    protected logger = ConsoleLogger.prefix(`model-form/${this.localName}`);
+
+    @state()
+    protected error: APIError | null = null;
+
+    @state()
+    protected loading = false;
 
-    protected logger = ConsoleLogger.prefix(`model-form/${this.tagName.toLowerCase()}`);
+    protected abortController: AbortController | null = null;
 
     /**
      * An overridable method for loading an instance.
@@ -49,135 +90,204 @@ export abstract class ModelForm<
      */
     protected abstract loadInstance(pk: PKT): Promise<T>;
 
+    /**
+     * An overridable method for assigning the loaded instance to the form's state.
+     *
+     * This can be used to intercept the loaded instance before it's set on the form.
+     */
+    protected assignInstance(instance: T): void {
+        this.instance = instance;
+
+        if (isNamedInstance(instance)) {
+            this.verboseName = instance.verboseName ?? this.verboseName;
+            this.verboseNamePlural = instance.verboseNamePlural ?? this.verboseNamePlural;
+        }
+    }
+
     /**
      * An overridable method for loading any data, beyond the instance.
      *
+     *
      * @see {@linkcode loadInstance}
      * @returns A promise that resolves when the data has been loaded.
      */
-    protected async load(): Promise<void> {
-        return Promise.resolve();
-    }
-
-    @property({ attribute: "pk", converter: { fromAttribute: (value) => value as PKT } })
-    public set instancePk(value: PKT) {
-        this.#instancePk = value;
+    protected async load?(): Promise<void | boolean>;
 
-        if (this.viewportCheck && !this.isInViewport) {
-            return;
-        }
+    /**
+     * Timestamp of last call to {@linkcode load}.
+     * Used to prevent multiple calls to `load` when the form is rapidly shown and hidden.
+     */
+    #loadedAt: Date | null = null;
 
-        if (this.#loading) {
-            return;
-        }
+    @property({
+        attribute: "pk",
+        useDefault: true,
+        converter: { fromAttribute: (value) => value as PKT },
+    })
+    public instancePk: PKT | null = null;
 
-        this.#loading = true;
+    @property({ attribute: false, useDefault: true })
+    public instance: T | null = this.createDefaultInstance();
 
-        this.load().then(() => {
-            this.loadInstance(value).then((instance) => {
-                this.instance = instance;
-                this.#loading = false;
-                this.requestUpdate();
-            });
-        });
-    }
+    //#region Public methods
 
-    #instancePk: PKT | null = null;
+    /**
+     * Resets the form to its initial state, including clearing the loaded instance and any errors.
+     */
+    public override reset(): void {
+        super.reset();
 
-    public get instancePk(): PKT | null {
-        return this.#instancePk;
+        this.instance = null;
+        this.error = null;
     }
 
-    // Keep track if we've loaded the model instance
-    #initialLoad = false;
+    /**
+     * A helper method to create a default instance when the form is used for creation instead of editing.
+     *
+     * By default, this returns `null`, but it can be overridden to provide a default instance with pre-filled values.
+     *
+     * @returns A default instance of the model, or null if not applicable.
+     */
+    public createDefaultInstance(): T | null {
+        return null;
+    }
 
-    // Keep track if we've done the general data loading of load()
-    #initialDataLoad = false;
+    //#endregion
 
-    #loading = false;
+    protected override formatSubmitLabel(): string {
+        const { saveLabel } = this.constructor as typeof ModelForm;
 
-    @property({ attribute: false })
-    instance?: T = this.defaultInstance;
+        if (this.instancePk && saveLabel) {
+            return saveLabel;
+        }
 
-    get defaultInstance(): T | undefined {
-        return undefined;
+        return super.formatSubmitLabel();
     }
 
-    @listen(AKRefreshEvent, {
-        target: null,
-    })
-    protected refresh = async () => {
-        await new Promise((resolve) => requestAnimationFrame(resolve));
+    protected override formatHeadline(): string {
+        const modifier = this.instancePk
+            ? (this.constructor as typeof ModelForm).modifierLabel
+            : null;
+        return super.formatHeadline(this.headline, modifier);
+    }
 
-        if (!this.#instancePk) return;
+    //#region Lifecycle
 
-        const viewportVisible = this.isInViewport || !this.viewportCheck;
+    /**
+     * Loads the instance when the form is shown, handing loading and error states.
+     */
+    protected doLoad() {
+        if (this.#loadedAt || this.loading) {
+            return Promise.resolve();
+        }
 
-        if (!viewportVisible) {
-            this.logger.debug(`Instance not in viewport, skipping refresh`);
-            return;
+        if (this.load) {
+            this.loading = true;
         }
 
-        return this.loadInstance(this.#instancePk).then((instance) => {
-            this.instance = instance;
-        });
-    };
+        const loadPromise = this.load?.() || Promise.resolve(true);
 
-    protected override formatSubmitLabel(): string {
-        if (this.#instancePk) {
-            return msg(str`Save Changes`, {
-                id: "model-form.apply-submit",
-            });
-        }
+        return loadPromise
+            .then((result) => {
+                this.#loadedAt = new Date();
 
-        return super.formatSubmitLabel();
-    }
+                if (result === false) {
+                    this.logger.debug("Load method returned false, skipping instance load");
+                    return;
+                }
 
-    protected override formatHeadline(): string {
-        return super.formatHeadline(this.headline, this.#instancePk ? msg("Edit") : null);
+                return this.refresh();
+            })
+            .catch(this.delegateError)
+            .finally(() => {
+                this.loading = false;
+            });
     }
 
-    //#region Public methods
+    /**
+     * A helper method to retry loading the instance after an error has occurred.
+     */
+    protected retryLoad = (): Promise<void> => {
+        this.error = null;
+        this.#loadedAt = null;
+        return this.doLoad();
+    };
 
-    public override reset(): void {
-        super.reset();
+    /**
+     * Refreshes the instance by re-calling `loadInstance` with the current `instancePk`.
+     */
+    @listen(AKRefreshEvent)
+    public refresh = async (): Promise<void> => {
+        if (!this.instancePk) {
+            this.logger.info("Skipping refresh. No instance PK provided.");
+            return;
+        }
 
-        this.instance = undefined;
-        this.#initialLoad = false;
-        this.#initialDataLoad = false;
+        this.error = null;
+        this.loading = true;
 
-        this.requestUpdate();
-    }
+        return this.loadInstance(this.instancePk)
+            .then((instance) => this.assignInstance(instance))
+            .catch(this.delegateError)
+            .finally(() => {
+                this.loading = false;
+            });
+    };
 
-    //#endregion
+    /**
+     * Prepares a loading error for display in the form's template.
+     *
+     * @param error The error to prepare.
+     */
+    protected delegateError = async (error: unknown): Promise<void> => {
+        this.error = await parseAPIResponseError(error);
+    };
 
-    //#region Rendering
+    protected override render(): SlottedTemplateResult {
+        if (!this.visible) {
+            return null;
+        }
 
-    protected override renderVisible(): SlottedTemplateResult {
-        if ((this.#instancePk && !this.instance) || !this.#initialDataLoad) {
-            return html`<ak-empty-state loading></ak-empty-state>`;
+        if (!this.#loadedAt) {
+            // If there is anything to do load, we do so asynchronously,
+            // possibly updating our loading flag to avoid an unnecessary
+            // visual change if the load is very fast.
+            this.doLoad();
         }
-        return super.renderVisible();
-    }
 
-    protected override render(): SlottedTemplateResult {
-        // if we're in viewport now and haven't loaded AND have a PK set, load now
-        // Or if we don't check for viewport in some cases
-        const viewportVisible = this.isInViewport || !this.viewportCheck;
-        if (this.#instancePk && !this.#initialLoad && viewportVisible) {
-            this.instancePk = this.#instancePk;
-            this.#initialLoad = true;
-        } else if (!this.#initialDataLoad && viewportVisible) {
-            // else if since if the above case triggered that will also call this.load(), so
-            // ensure we don't load again
-            this.load().then(() => {
-                this.#initialDataLoad = true;
-                // Class attributes changed in this.load() might not be @property()
-                // or @state() so let's trigger a re-render to be sure we get updated
-                this.requestUpdate();
+        if (this.loading) {
+            // We avoid the delayed fade-in of the loading state to prevent flickering.
+            const ready = this.instance || this.#loadedAt;
+
+            this.logger.debug("Form is loading, showing loading state", {
+                ready,
+                instance: !!this.instance,
+                loadedAt: !!this.#loadedAt,
             });
+            return html`<ak-empty-state
+                class="${ready ? "" : "ak-fade-in ak-m-delayed"}"
+                loading
+            ></ak-empty-state>`;
+        }
+
+        if (this.error && !this.#loadedAt) {
+            // The form is in an error state and has not successfully loaded before.
+            return html`<ak-empty-state icon="pf-icon-warning-triangle" part="error-state">
+                <span>${msg(str`An error occurred while loading ${this.verboseName}.`)}</span>
+                <div slot="body">
+                    <p>${pluckErrorDetail(this.error)}</p>
+
+                    <button class="pf-c-button pf-m-primary" @click=${this.retryLoad}>
+                        ${msg("Retry")}
+                    </button>
+                </div>
+            </ak-empty-state>`;
         }
 
+        // Otherwise, render the form as normal.
+        // If there was an error but we have successfully loaded before,
+        // we allow the form to render with the previous data and show the
+        // error message through the normal channels (e.g. non-field errors).
         return super.render();
     }
 
diff --git a/web/src/elements/modals/shared.ts b/web/src/elements/modals/shared.ts
deleted file mode 100644
index f763b7bf0cc7..000000000000
--- a/web/src/elements/modals/shared.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { SlottedTemplateResult } from "#elements/types";
-
-/**
- * An element that is designed to included in a dialog or other container that supports transclusion.
- */
-export interface TransclusionElement extends Element {
-    /**
-     * An optional method to render a header for the element, which can be used
-     * when the element is transcluded into a dialog or other container that supports headers.
-     *
-     * @param force Whether to force the contents to render.
-     */
-    renderHeader?(force?: boolean): SlottedTemplateResult;
-
-    /**
-     * An optional method to render action buttons for the element, which can be used
-     * when the element is transcluded into a dialog or other container that supports action buttons.
-     *
-     * @param force Whether to force the contents to render.
-     */
-    renderActions?(force?: boolean): SlottedTemplateResult;
-
-    cancelButtonLabel?: string | null;
-
-    /**
-     * Whether the element should perform a viewport check before rendering.
-     *
-     * @deprecated Remove this after all modals are migrated to use the new dialog system, which handles this automatically.
-     */
-    viewportCheck?: boolean;
-}
-
-/**
- * Type predicate to determine if an element is a {@linkcode TransclusionElement}.
- *
- * @param element The element to check.
- */
-export function isTransclusionElement(element: Element): element is TransclusionElement {
-    return "renderHeader" in element || "renderActions" in element;
-}
diff --git a/web/src/elements/modals/styles.css b/web/src/elements/modals/styles.css
deleted file mode 100644
index 8063d567ebd8..000000000000
--- a/web/src/elements/modals/styles.css
+++ /dev/null
@@ -1,148 +0,0 @@
-:host {
-    display: block;
-}
-
-/* #region Buttons */
-
-:host > .pf-c-button {
-    position: absolute;
-    top: var(--ak-c-modal--c-button--Top);
-    right: var(--ak-c-modal--c-button--Right);
-}
-
-:host > .pf-c-button + .ak-c-modal__header {
-    margin-right: var(--ak-c-modal--c-button--sibling--MarginRight);
-}
-
-/* #endregion */
-
-/* #region Header */
-
-.ak-c-modal__header {
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    padding-top: var(--ak-c-modal__header--PaddingTop);
-    padding-bottom: var(--ak-c-modal__header--PaddingBottom);
-    padding-right: var(--ak-c-modal__header--PaddingRight);
-    padding-left: var(--ak-c-modal__header--PaddingLeft);
-}
-
-.ak-c-modal__header.pf-m-help {
-    display: flex;
-    flex-direction: row;
-}
-
-.ak-c-modal__header:last-child {
-    padding-bottom: var(--ak-c-modal__header--last-child--PaddingBottom);
-}
-
-.ak-c-modal__header + .ak-c-modal__body,
-.ak-c-modal__header + slot + .ak-c-modal__body {
-    --ak-c-modal__body--PaddingTop: 0;
-}
-
-.ak-c-modal__header-main {
-    flex-grow: 1;
-    min-width: 0;
-}
-
-/* #endregion */
-
-/* #region Title */
-
-.ak-c-modal__title,
-.ak-c-modal__title-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.ak-c-modal__title {
-    flex: 0 0 auto;
-    font-family: var(--ak-c-modal__title--FontFamily);
-    font-size: var(--ak-c-modal__title--FontSize);
-    line-height: var(--ak-c-modal__title--LineHeight);
-}
-
-.ak-c-modal__title.pf-m-icon {
-    display: flex;
-}
-
-.ak-c-modal__title-icon {
-    margin-right: var(--ak-c-modal__title-icon--MarginRight);
-    color: var(--ak-c-modal__title-icon--Color);
-}
-
-.ak-c-modal__description {
-    padding-top: var(--ak-c-modal__description--PaddingTop);
-}
-
-/* #endregion */
-
-/* #region Body */
-
-.ak-c-modal__body {
-    flex: 1 1 auto;
-
-    max-height: var(--ak-c-modal__body--MaxHeight);
-    min-height: var(--ak-c-modal__body--MinHeight);
-    padding-top: var(--ak-c-modal__body--PaddingTop);
-    padding-right: var(--ak-c-modal__body--PaddingRight);
-    padding-left: var(--ak-c-modal__body--PaddingLeft);
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    word-break: break-word;
-    -webkit-overflow-scrolling: touch;
-    max-height: calc(
-        75dvh - 2rem - var(--ak-c-modal__header--PaddingTop) -
-            var(--ak-c-modal__footer--PaddingBottom)
-    );
-}
-
-.ak-c-modal__body:last-child {
-    padding-bottom: var(--ak-c-modal__body--last-child--PaddingBottom);
-}
-
-.ak-c-modal__footer {
-    display: flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: end;
-    padding-top: var(--ak-c-modal__footer--PaddingTop);
-    padding-right: var(--ak-c-modal__footer--PaddingRight);
-    padding-bottom: var(--ak-c-modal__footer--PaddingBottom);
-    padding-left: var(--ak-c-modal__footer--PaddingLeft);
-
-    gap: var(--pf-global--spacer--xs);
-
-    @media screen and (min-width: 576px) {
-        gap: var(--pf-global--spacer--sm);
-    }
-}
-
-/* #endregion */
-
-/* #region Footer */
-
-fieldset.ak-c-modal__footer {
-    --ak-fieldset__legend--PaddingInlineBase: var(--pf-global--spacer--md);
-    padding-block: calc(var(--ak-fieldset__legend--PaddingInlineBase) / 2);
-    border-inline: none;
-    border-block-end: none;
-
-    --ak-c-modal__footer--c-button--sm--MarginRight: var(
-        --ak-c-modal__footer--c-button--MarginRight
-    );
-
-    & > ak-spinner-button:not(:last-child) {
-        margin-right: var(--ak-c-modal__footer--c-button--MarginRight);
-    }
-}
-
-/* #endregion */
-
-/* slot[name="before-body"]:has-slotted + [part="body"] {
-    margin-block-start: var(--pf-global--spacer--lg);
-} */
diff --git a/web/src/elements/modals/utils.ts b/web/src/elements/modals/utils.ts
deleted file mode 100644
index 51af4618e36e..000000000000
--- a/web/src/elements/modals/utils.ts
+++ /dev/null
@@ -1,332 +0,0 @@
-/**
- * @file Modal and dialog rendering utilities.
- */
-
-import "#elements/modals/ak-modal";
-
-import { AKModal } from "#elements/modals/ak-modal";
-import { SlottedTemplateResult } from "#elements/types";
-import { isAKElementConstructor } from "#elements/utils/unsafe";
-
-import { ElementPart, html, noChange, render } from "lit";
-import {
-    directive,
-    Directive,
-    DirectiveResult,
-    PartInfo,
-    PartType,
-} from "lit-html/async-directive.js";
-
-//#region Rendering
-
-/**
- * Resolves the container element for a dialog, given an optional parent element or selector.
- *
- * If the parent element is not provided or cannot be resolved, the document body is returned.
- *
- * @param ownerDocument The document to query for the parent element. Defaults to the global document.
- * @param parentElement An optional HTMLElement or selector string to use as the dialog container.
- *
- * @returns The resolved container HTMLElement for the dialog.
- */
-export function resolveDialogContainer(
-    ownerDocument: Document = document,
-    parentElement?: HTMLElement | string | null,
-): HTMLElement {
-    if (parentElement instanceof HTMLElement) {
-        return parentElement;
-    }
-
-    if (typeof parentElement === "string") {
-        const resolvedElement = ownerDocument.querySelector(parentElement);
-
-        if (resolvedElement instanceof HTMLElement) {
-            return resolvedElement;
-        }
-    }
-
-    return ownerDocument.body;
-}
-
-/**
- * Initialization options for dialog and modal rendering functions.
- */
-export interface DialogInit {
-    ownerDocument?: Document;
-    parentElement?: HTMLElement | string | null;
-    closedBy?: ClosedBy;
-    classList?: string[];
-    signal?: AbortSignal;
-}
-
-/**
- * Renders a dialog with the given template.
- *
- * @param renderable The template to render inside the dialog.
- * @param init Initialization options for the dialog.
- *
- * @returns A promise that resolves when the dialog is closed.
- *
- * @remarks
- * In the context of the {@link HTMLDialogElement}, we distinguish between __modal__
- * dialogs, which are shown using the `showModal()` method and block interaction with the rest of the page,
- * and __non-modal__ dialogs, which are shown using the `show()` method and allow interaction with the rest of the page.
- *
- * For almost all use cases in authentik, dialogs are modal. However, {@linkcode AKModal}
- * (and its implementors) are what a developer would typically consider to be the modal itself.
- *
- * Here be dragons! The delination between "dialog" and "modal" is not based on
- * the presence of a backdrop or blocking behavior, but rather on the underlying HTML elements
- *  and method used to display it.
- *
- * **Incorrect usage can impact accessibility significantly.**
- */
-export function renderDialog(
-    renderable: unknown,
-    {
-        ownerDocument = document,
-        signal,
-        parentElement = ownerDocument.getElementById("interface-root"),
-        closedBy = "any",
-        classList = [],
-    }: DialogInit = {},
-): Promise<void> {
-    const dialog = ownerDocument.createElement("dialog");
-    dialog.classList.add("ak-c-modal", ...classList);
-    dialog.closedBy = closedBy;
-
-    const resolvers = Promise.withResolvers<void>();
-
-    const container = resolveDialogContainer(ownerDocument, parentElement);
-    const shadowRoot = container.shadowRoot ?? container;
-
-    shadowRoot.appendChild(dialog);
-
-    const dispose = () => {
-        dialog.close();
-        dialog.remove();
-        resolvers.resolve();
-    };
-
-    dialog.addEventListener("close", dispose, {
-        passive: true,
-        once: true,
-    });
-
-    signal?.addEventListener("abort", dispose, {
-        passive: true,
-        once: true,
-    });
-
-    render(renderable, dialog);
-
-    return resolvers.promise;
-}
-
-/**
- * Renders a modal dialog with the given template.
- *
- * @param renderable The template to render inside the modal.
- * @param init Initialization options for the modal.
- * @returns A promise that resolves when the modal is closed.
- */
-export function renderModal(renderable: unknown, init?: DialogInit): Promise<void> {
-    return renderDialog(html`<ak-modal>${renderable}</ak-modal>`, init);
-}
-
-export type ModalTemplate = (event: Event) => SlottedTemplateResult;
-export type InvokerListener = (event: Event) => Promise<void> | void;
-
-//#endregion
-
-//#region Invokers
-
-/**
- * A utility function that takes a {@linkcode ModalTemplate} and returns
- * a function that renders the corresponding modal dialog when invoked.
- *
- * @param renderer A function that returns a template result to render inside the modal dialog.
- * @param init Initialization options for the modal dialog.
- */
-export function asInvoker(renderer: ModalTemplate, init?: DialogInit): InvokerListener;
-/**
- * A utility function that takes a {@linkcode CustomElementConstructor} and returns
- * a function that renders the corresponding modal dialog when invoked.
- *
- * @param Constructor A custom element constructor or a function that returns a template result.
- * @param init Initialization options for the modal dialog.
- */
-export function asInvoker(
-    Constructor: CustomElementConstructor,
-    init?: DialogInit,
-): () => Promise<void>;
-/**
- * A utility function that takes either a {@linkcode CustomElementConstructor}
- * or a {@linkcode ModalTemplate} and returns a function that renders the corresponding modal dialog.
- *
- * @param input The input to render as a modal dialog, either a custom element constructor or a function that returns a template result.
- * @param init Initialization options for the modal dialog.
- */
-export function asInvoker(
-    input: ModalTemplate | CustomElementConstructor,
-    init?: DialogInit,
-): (event?: Event) => Promise<void>;
-export function asInvoker(
-    input: ModalTemplate | CustomElementConstructor,
-    init?: DialogInit,
-): (event?: Event) => Promise<void> {
-    return (event?: Event) => {
-        const child = isAKElementConstructor(input)
-            ? new input()
-            : (input as ModalTemplate)(event!);
-
-        if (child instanceof AKModal) {
-            return renderDialog(child, init);
-        }
-
-        return renderModal(child, init);
-    };
-}
-
-//#endregion
-
-//#region Directives
-
-type ModalDirectiveParameters = [
-    factory: ModalTemplate | CustomElementConstructor,
-    options?: ModalInvokerInit,
-];
-
-/**
- * Initialization options for the {@linkcode modalInvoker} directive.
- *
- * @see {@linkcode DialogInit} for the underlying dialog options.
- */
-export interface ModalInvokerInit extends DialogInit {
-    /**
-     * Dependencies array for memoization. The directive will only rebind
-     * the event listener when one of these values changes (shallow comparison).
-     * If not provided, the listener rebinds on every update.
-     */
-    deps?: unknown[];
-}
-
-/**
- * A directive that manages the event listener for an invoker function created by {@linkcode asInvoker}.
- *
- * Supports memoization via an optional `deps` array in the options object. When `deps` is provided,
- * the directive will skip rebinding the event listener if all dep values are shallowly equal to the
- * previous render. If `deps` is omitted, the listener rebinds on every update (safe default).
- *
- * @see {@linkcode asInvoker} for the underlying invoker.
- * @see {@linkcode modalInvoker} for the Lit HTML variation.
- */
-class ModalInvokerDirective extends Directive {
-    constructor(partInfo: PartInfo) {
-        super(partInfo);
-        if (partInfo.type !== PartType.ELEMENT) {
-            throw new Error("modalOpener() can only be used on an element");
-        }
-    }
-
-    #cleanup: (() => void) | null = null;
-    #prevDeps: unknown[] | null = null;
-
-    /**
-     * Shallow-compare new deps against the previously stored deps.
-     *
-     * Returns `true` if deps match (i.e. we should skip rebinding).
-     * Returns `false` if deps are absent, previously unset, or any value differs.
-     */
-    #depsMatch(newDeps: unknown[] | undefined): boolean {
-        if (!newDeps || !this.#prevDeps) return false;
-        if (this.#prevDeps.length !== newDeps.length) return false;
-        return this.#prevDeps.every((prev, i) => prev === newDeps[i]);
-    }
-
-    update(part: ElementPart, [factory, options]: ModalDirectiveParameters): void {
-        const deps = options?.deps;
-
-        // Deps provided and unchanged — skip rebind
-        if (this.#depsMatch(deps)) {
-            return;
-        }
-
-        // Tear down old listener before rebinding
-        if (this.#cleanup) {
-            this.#cleanup();
-            this.#cleanup = null;
-        }
-
-        const listener = asInvoker(factory, options);
-        part.element.addEventListener("click", listener);
-
-        const cleanup = () => {
-            part.element.removeEventListener("click", listener);
-            // Null out prevDeps so that the next render cycle always rebinds.
-            // This handles the case where an AbortSignal fires between renders.
-            this.#prevDeps = null;
-        };
-
-        if (options?.signal) {
-            options.signal.addEventListener("abort", cleanup, { once: true });
-        }
-
-        this.#cleanup = cleanup;
-        this.#prevDeps = deps ?? null;
-    }
-
-    render(..._args: ModalDirectiveParameters) {
-        return noChange;
-    }
-}
-
-/**
- * A Lit HTML directive that can be used to attach a modal invoker to an element.
- *
- * @example Basic usage (rebinds every render):
- * ```ts
- * html`<button ${modalInvoker(SomeModalConstructor)}>Open</button>`
- * ```
- *
- * @example With memoized deps (only rebinds when deps change):
- * ```ts
- * html`<button ${modalInvoker(factory, { deps: [itemId] })}>Edit</button>`
- * ```
- */
-export const modalInvoker = directive(ModalInvokerDirective);
-
-export type ModalInvokerDirectiveResult = DirectiveResult<typeof ModalInvokerDirective>;
-
-export interface ModelFormLike {
-    instancePk?: string | number | null;
-}
-
-export interface ModelFormLikeConstructor {
-    new (): ModelFormLike;
-}
-
-/**
- * A helper function to create a modal invoker for editing an instance of a form-like element.
- *
- * @remarks
- * This is defined externally from the form itself to allow existing forms to
- * easily add edit invokers without needing to extend a specific base class.
- */
-export function asEditModalInvoker(
-    this: ModelFormLikeConstructor,
-    instancePk?: string | number | null,
-    init?: ModalInvokerInit,
-): ModalInvokerDirectiveResult {
-    return modalInvoker(
-        (_event) => {
-            const FormConstructor = this as unknown as ModelFormLikeConstructor;
-
-            const formElement = new FormConstructor();
-            formElement.instancePk = instancePk;
-
-            return formElement;
-        },
-        { ...init, deps: [instancePk] },
-    );
-}
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index d092a0b36b45..1d557b1f9962 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -13,12 +13,13 @@ import { renderTableColumn, TableColumn } from "./TableColumn.js";
 import { type PaginatedResponse } from "#common/api/responses";
 import { EVENT_REFRESH } from "#common/constants";
 import { APIError, parseAPIResponseError, pluckErrorDetail } from "#common/errors/network";
+import { AKRefreshEvent } from "#common/events";
 import { GroupResult } from "#common/utils";
 
 import { AKElement } from "#elements/Base";
 import { intersectionObserver } from "#elements/decorators/intersection-observer";
+import { type TransclusionChildElement, TransclusionChildSymbol } from "#elements/dialogs/shared";
 import { WithSession } from "#elements/mixins/session";
-import { type TransclusionElement } from "#elements/modals/shared";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import Styles from "#elements/table/Table.css";
 import { SlottedTemplateResult } from "#elements/types";
@@ -31,11 +32,10 @@ import { ConsoleLogger, Logger } from "#logger/browser";
 import { kebabCase } from "change-case";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit";
+import { CSSResult, html, nothing, PropertyValues } from "lit";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { guard } from "lit/directives/guard.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -81,7 +81,7 @@ export interface ColumnOptions {
  */
 export abstract class Table<T extends object, D = T>
     extends WithSession(AKElement)
-    implements TableLike, TransclusionElement
+    implements TableLike, TransclusionChildElement
 {
     static styles: CSSResult[] = [
         PFTable,
@@ -94,6 +94,8 @@ export abstract class Table<T extends object, D = T>
         Styles,
     ];
 
+    public [TransclusionChildSymbol] = true;
+
     //#region Abstract members
 
     /**
@@ -268,6 +270,9 @@ export abstract class Table<T extends object, D = T>
     @property({ type: Boolean })
     public checkboxChip = false;
 
+    @property({ type: String, attribute: "display-box", reflect: true, useDefault: true })
+    public displayBox: "contents" | "block" = "block";
+
     /**
      * Whether the table is visible in the viewport.
      */
@@ -290,11 +295,11 @@ export abstract class Table<T extends object, D = T>
     @property({ type: Boolean })
     public expandable = false;
 
-    @property({ attribute: false })
-    public searchLabel?: string;
+    @property({ type: String, attribute: "search-label" })
+    public searchLabel: string | null = null;
 
-    @property({ attribute: false })
-    public searchPlaceholder?: string;
+    @property({ type: String, attribute: "search-placeholder" })
+    public searchPlaceholder: string | null = null;
 
     //#endregion
 
@@ -314,25 +319,28 @@ export abstract class Table<T extends object, D = T>
 
     #selectAllCheckboxRef = createRef<HTMLInputElement>();
 
-    #refreshListener = () => {
+    protected refreshListener = (event?: Event) => {
+        this.logger.debug("Received refresh event:", event);
         return this.fetch();
     };
 
     constructor() {
         super();
-        const tagName = this.tagName.toLowerCase();
 
-        this.#pageParam = `${tagName}-page`;
-        this.#searchParam = `${tagName}-search`;
+        const { localName } = this;
+
+        this.#pageParam = `${localName}-page`;
+        this.#searchParam = `${localName}-search`;
         this.page = getURLParam(this.#pageParam, 1);
 
-        this.logger = ConsoleLogger.prefix(tagName);
+        this.logger = ConsoleLogger.prefix(localName);
     }
 
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.addEventListener(EVENT_REFRESH, this.#refreshListener);
-        window.addEventListener("submit", this.#refreshListener);
+
+        this.addEventListener(AKRefreshEvent.eventName, this.refreshListener);
+        window.addEventListener("submit", this.refreshListener);
 
         if (this.searchEnabled) {
             this.search = getURLParam(this.#searchParam, "");
@@ -341,8 +349,8 @@ export abstract class Table<T extends object, D = T>
 
     public override disconnectedCallback(): void {
         super.disconnectedCallback();
-        this.removeEventListener(EVENT_REFRESH, this.#refreshListener);
-        window.removeEventListener("submit", this.#refreshListener);
+        this.removeEventListener(EVENT_REFRESH, this.refreshListener);
+        window.removeEventListener("submit", this.refreshListener);
     }
 
     protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -480,7 +488,7 @@ export abstract class Table<T extends object, D = T>
         return guard(
             [this.loading, this.columnCount],
             () =>
-                html`<tr role="presentation" class="ak-fade-in">
+                html`<tr role="presentation" class="ak-fade-in ak-m-delayed">
                     <td role="presentation" colspan=${this.columnCount}>
                         <div class="pf-l-bullseye">
                             <ak-empty-state default-label></ak-empty-state>
@@ -490,7 +498,7 @@ export abstract class Table<T extends object, D = T>
         );
     }
 
-    protected renderEmpty(inner?: SlottedTemplateResult): TemplateResult {
+    protected renderEmpty(inner?: SlottedTemplateResult): SlottedTemplateResult {
         return html`
             <tr role="presentation">
                 <td role="presentation" colspan=${this.columnCount}>
@@ -685,7 +693,12 @@ export abstract class Table<T extends object, D = T>
         return [["", items]];
     }
 
-    #renderRowGroupItem(item: T, rowIndex: number, items: T[], groupIndex: number): TemplateResult {
+    #renderRowGroupItem(
+        item: T,
+        rowIndex: number,
+        items: T[],
+        groupIndex: number,
+    ): SlottedTemplateResult {
         const groupHeaderID = this.groups.length > 1 ? `table-group-${groupIndex}` : null;
 
         const itemKey = this.#itemKeys.get(item);
@@ -799,7 +812,7 @@ export abstract class Table<T extends object, D = T>
 
     protected renderToolbar(): SlottedTemplateResult {
         return html`${this.renderObjectCreate()}
-            <ak-spinner-button .callAction=${this.#refreshListener} class="pf-m-secondary">
+            <ak-spinner-button .callAction=${this.refreshListener} class="pf-m-secondary">
                 ${msg("Refresh")}</ak-spinner-button
             >`;
     }
@@ -871,11 +884,12 @@ export abstract class Table<T extends object, D = T>
         }
 
         return html`<ak-table-search
+            exportparts="input:toolbar-search-input"
             class="pf-c-toolbar__item pf-m-search-filter ${this.supportsQL ? "ql" : ""}"
             part="toolbar-search"
             .defaultValue=${this.search}
-            label=${ifDefined(this.searchLabel)}
-            placeholder=${ifDefined(this.searchPlaceholder)}
+            label=${ifPresent(this.searchLabel)}
+            placeholder=${ifPresent(this.searchPlaceholder)}
             .onSearch=${this.#searchListener}
             .supportsQL=${this.supportsQL}
             .apiResponse=${this.data}
@@ -916,7 +930,7 @@ export abstract class Table<T extends object, D = T>
      * "activate all on this page,"
      * "deactivate all on this page" with a single click.
      */
-    renderAllOnThisPageCheckbox(): TemplateResult {
+    renderAllOnThisPageCheckbox(): SlottedTemplateResult {
         const selectedCount = this.selectedMap.size;
         const pageItemCount = this.data?.results?.length ?? 0;
 
@@ -954,7 +968,7 @@ export abstract class Table<T extends object, D = T>
         return this.checkbox && this.checkboxChip;
     }
 
-    protected renderChipGroup(): TemplateResult {
+    protected renderChipGroup(): SlottedTemplateResult {
         return html`<ak-chip-group
             exportparts="chip-group:selected-chip-group"
             class="selected-chips"
@@ -1005,11 +1019,11 @@ export abstract class Table<T extends object, D = T>
         });
     }
 
-    protected renderTable(): TemplateResult {
+    protected renderTable(): SlottedTemplateResult {
         const totalItemCount = this.data?.pagination.count ?? -1;
 
         const renderBottomPagination = () =>
-            html`<div class="pf-c-pagination pf-m-bottom">
+            html`<div class="pf-c-pagination pf-m-bottom" part="pagination-bottom">
                 <ak-timestamp .timestamp=${this.lastRefreshedAt} refresh>
                     ${msg("Last refreshed")}
                 </ak-timestamp>
@@ -1022,6 +1036,7 @@ export abstract class Table<T extends object, D = T>
             ${this.renderToolbarContainer()}
             <div part="table-container">
                 <table
+                    part="table"
                     aria-live="polite"
                     aria-busy=${this.loading ? "true" : "false"}
                     aria-label=${this.label ? msg(str`${this.label} table`) : msg("Table content")}
diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts
index 31d8a4cb7234..ea90bbc0a4a7 100644
--- a/web/src/elements/table/TablePage.ts
+++ b/web/src/elements/table/TablePage.ts
@@ -62,25 +62,25 @@ export abstract class TablePage<T extends object> extends Table<T> {
      * Render content before the sidebar.
      * @abstract
      */
-    protected renderSidebarBefore?(): TemplateResult;
+    protected renderSidebarBefore?(): SlottedTemplateResult;
 
     /**
      * Render content after the sidebar.
      * @abstract
      */
-    protected renderSidebarAfter?(): TemplateResult;
+    protected renderSidebarAfter?(): SlottedTemplateResult;
 
     /**
      * Render content before the main section.
      * @abstract
      */
-    protected renderSectionBefore?(): TemplateResult;
+    protected renderSectionBefore?(): SlottedTemplateResult;
 
     /**
      * Render content after the main section.
      * @abstract
      */
-    protected renderSectionAfter?(): TemplateResult;
+    protected renderSectionAfter?(): SlottedTemplateResult;
 
     //#endregion
 
@@ -105,7 +105,7 @@ export abstract class TablePage<T extends object> extends Table<T> {
     /**
      * Render the empty state.
      */
-    protected renderEmpty(inner?: TemplateResult): TemplateResult {
+    protected renderEmpty(inner?: TemplateResult): SlottedTemplateResult {
         return super.renderEmpty(html`
             ${inner
                 ? inner
diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts
index be757cc5caaf..012db37e893b 100644
--- a/web/src/elements/table/TableSearch.ts
+++ b/web/src/elements/table/TableSearch.ts
@@ -133,6 +133,7 @@ export class TableSearchForm extends AKElement {
         return html` <!-- @ts-ignore -->
             <input
                 aria-label=${ifPresent(this.label)}
+                part="search-input"
                 name="search"
                 type="search"
                 autocomplete="off"
@@ -147,6 +148,7 @@ export class TableSearchForm extends AKElement {
         return html`<form
             ${ref(this.#formRef)}
             class="pf-c-input-group"
+            part="search-form"
             @submit=${this.#submitListener}
             @reset=${this.reset}
         >
diff --git a/web/src/elements/utils/render-roots.ts b/web/src/elements/utils/render-roots.ts
index 502df16535cb..ead7f7de8843 100644
--- a/web/src/elements/utils/render-roots.ts
+++ b/web/src/elements/utils/render-roots.ts
@@ -16,3 +16,81 @@ export function resolveInterface<T extends HTMLElement = LitElement>(ownerDocume
 
     return element;
 }
+
+/**
+ * Finds the topmost element visible to the user, typically a dialog or the body.
+ *
+ * @param ownerDocument The document to query. Defaults to the global document.
+ */
+export function findTopmost(ownerDocument = document): HTMLElement {
+    const interfaceElement = resolveInterface(ownerDocument);
+
+    const dialogs = interfaceElement.renderRoot.querySelectorAll<HTMLDialogElement>("dialog:open");
+    return dialogs.length ? dialogs[dialogs.length - 1] : ownerDocument.body;
+}
+
+/**
+ * Given a node, finds the nearest parent element, traversing through shadow DOM and document fragments if necessary.
+ *
+ * @param node The node to find the nearest parent element for.
+ */
+export function findClosestHost<T extends Element = Element | HTMLElement>(
+    node: Node | ShadowRoot | DocumentFragment | null,
+): T | null {
+    let current = node;
+
+    while (current) {
+        if (current instanceof Element && current.parentElement instanceof Element) {
+            return current.parentElement as unknown as T;
+        }
+
+        if (current.parentNode instanceof ShadowRoot) {
+            return current.parentNode.host as T;
+        }
+
+        if (current.parentNode instanceof DocumentFragment) {
+            current = current.parentNode;
+            continue;
+        }
+
+        return null;
+    }
+
+    return null;
+}
+
+/**
+ * Given a node, finds the nearest parent element that matches the provided predicate, traversing through shadow DOM and document fragments if necessary.
+ *
+ * @param node The node to find the nearest parent element for.
+ * @param predicate A function that takes an element and returns a boolean indicating whether it matches the desired criteria.
+ */
+export function findClosestHostMatch<T extends Element = Element | HTMLElement>(
+    node: Node,
+    predicate: (element: Element) => boolean,
+): T | null {
+    let current = findClosestHost(node);
+
+    while (current) {
+        if (predicate(current)) {
+            return current as unknown as T;
+        }
+
+        current = findClosestHost(current);
+    }
+
+    return null;
+}
+
+/**
+ * Given a node, finds the nearest parent dialog element.
+ *
+ * @see {@linkcode findClosestHostMatch} for the underlying implementation.
+ *
+ * @param node The node to find the nearest parent dialog for.
+ */
+export function findNearestDialog(node: Node): HTMLDialogElement | null {
+    return findClosestHostMatch(node, (element): element is HTMLDialogElement => {
+        return element instanceof HTMLDialogElement;
+    });
+}
diff --git a/web/src/elements/utils/unsafe.ts b/web/src/elements/utils/unsafe.ts
index ec4c016c560f..4e94fd3156f0 100644
--- a/web/src/elements/utils/unsafe.ts
+++ b/web/src/elements/utils/unsafe.ts
@@ -92,6 +92,43 @@ function resolvePropertyName<T extends WrappedPropertyDeclaration>(
 
     return key;
 }
+
+/**
+ * Given a Lit Element constructor and a record of properties,
+ * filter the properties to include only those that are declared in the constructor's
+ * `properties` or `observedAttributes`, and map them to their appropriate prefixed names for rendering.
+ *
+ * @param ElementConstructor The constructor of the Lit Element to analyze.
+ * @param props A record of properties to filter and map.
+ * @returns A new record containing only the properties that are declared in the constructor, with their appropriate prefixed names.
+ */
+export function mapElementProps(
+    ElementConstructor: typeof LitElement,
+    props?: Record<string, unknown>,
+): Record<string, unknown> {
+    const { elementProperties } = ElementConstructor;
+    const observedAttributes = new Set(ElementConstructor.observedAttributes);
+
+    const filteredProps: Record<string, unknown> = {};
+
+    for (const [propName, propValue] of Object.entries(props || {})) {
+        const propDeclaration = elementProperties.get(propName);
+
+        if (propDeclaration) {
+            const prefix = resolvePrefix(propDeclaration);
+            const name = resolvePropertyName(propDeclaration, prefix, propName);
+            filteredProps[`${prefix}${name}`] = propValue;
+            continue;
+        }
+
+        if (observedAttributes.has(propName) || propName in ElementConstructor.prototype) {
+            filteredProps[propName] = String(propValue);
+        }
+    }
+
+    return filteredProps;
+}
+
 /**
  * Given a pre-registered custom element tag name and a record of properties,
  * render the element with the given properties applied.
@@ -143,25 +180,7 @@ export function StrictUnsafe<T extends string>(
             throw new TypeError(`Custom element ${tagName} is not an authentik element`);
         }
 
-        const { elementProperties } = ElementConstructor;
-        const observedAttributes = new Set(ElementConstructor.observedAttributes);
-
-        const filteredProps: Record<string, unknown> = {};
-
-        for (const [propName, propValue] of Object.entries(props || {})) {
-            const propDeclaration = elementProperties.get(propName);
-
-            if (propDeclaration) {
-                const prefix = resolvePrefix(propDeclaration);
-                const name = resolvePropertyName(propDeclaration, prefix, propName);
-                filteredProps[`${prefix}${name}`] = propValue;
-                continue;
-            }
-
-            if (observedAttributes.has(propName) || propName in ElementConstructor.prototype) {
-                filteredProps[propName] = String(propValue);
-            }
-        }
+        const filteredProps = mapElementProps(ElementConstructor, props);
 
         return staticHTML`<${unsafeStatic(tagName)} ${spread(filteredProps)}></${unsafeStatic(tagName)}>`;
     });
diff --git a/web/src/styles/authentik/base.css b/web/src/styles/authentik/base.css
index a7ca4ddc2b74..7b41edc6d462 100644
--- a/web/src/styles/authentik/base.css
+++ b/web/src/styles/authentik/base.css
@@ -1,6 +1,5 @@
 @import "./base/common.css";
 @import "./base/scrollbars.css";
-@import "./base/modal.css";
 @import "./components/Alert/alert.css";
 @import "./components/Banner/banner.css";
 @import "./components/Label/label.css";
@@ -16,5 +15,7 @@
 @import "./components/Form/form.css";
 @import "./components/Switch/switch.css";
 @import "./components/Select/select.css";
+@import "./components/Modal/modal.css";
+@import "./components/Skeleton/skeleton.css";
 @import "./components/Notification/notification.css";
 @import "./components/Wizard/wizard.css";
diff --git a/web/src/styles/authentik/base/globals.css b/web/src/styles/authentik/base/globals.css
index bbe98696a58c..73db0d96a32a 100644
--- a/web/src/styles/authentik/base/globals.css
+++ b/web/src/styles/authentik/base/globals.css
@@ -31,6 +31,10 @@ body {
     }
 }
 
+html[data-dialog-count] {
+    overscroll-behavior: none;
+}
+
 /* #endregion */
 
 html > form > input {
diff --git a/web/src/styles/authentik/base/modal.css b/web/src/styles/authentik/base/modal.css
deleted file mode 100644
index 20f510cba636..000000000000
--- a/web/src/styles/authentik/base/modal.css
+++ /dev/null
@@ -1,249 +0,0 @@
-/* #region Variables */
-
-.ak-c-modal {
-    --ak-c-modal--BackgroundColor: var(--pf-global--BackgroundColor--100);
-    --ak-c-modal--BoxShadow: var(--pf-global--BoxShadow--xl);
-    --ak-c-modal--ZIndex: var(--pf-global--ZIndex--xl);
-    --ak-c-modal--Width: 100%;
-    --ak-c-modal--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
-    --ak-c-modal--MarginBlockStart: auto;
-    --ak-c-modal--BorderColor: var(--pf-global--BackgroundColor--150);
-    --ak-c-modal--BorderWidth: 0;
-    --ak-c-modal__backdrop--BackgroundColor: transparent;
-    --ak-c-modal__backdrop--BackdropFilter: blur(0);
-    --ak-c-modal__backdrop--active--BackgroundColor: hsla(0, 0%, 0%, 0.5);
-    --ak-c-modal__backdrop--active--BackdropFilter: blur(2px);
-}
-
-/* #endregion */
-
-/* #region Dialog */
-
-.ak-c-modal {
-    box-sizing: content-box;
-    scrollbar-gutter: stable;
-    background-color: var(--ak-c-modal--BackgroundColor);
-    box-shadow: var(--ak-c-modal--BoxShadow);
-    padding: var(--ak-c-modal--Padding);
-
-    z-index: var(--ak-c-modal--ZIndex);
-    width: var(--ak-c-modal--Width);
-    max-width: var(--ak-c-modal--MaxWidth);
-    background-color: var(--ak-c-modal--BackgroundColor);
-    box-shadow: var(--ak-c-modal--BoxShadow);
-
-    border-width: var(--ak-c-modal--BorderWidth);
-    border-color: var(--ak-c-modal--BorderColor);
-
-    &:focus-visible {
-        outline: none;
-    }
-}
-
-/* #endregion */
-
-/* #region Transitions */
-
-.ak-c-modal {
-    --ak-c-modal--TransitionDuration--fast: 100ms;
-    --ak-c-modal--TransitionDuration--slow: 150ms;
-    margin-block-start: var(--ak-c-modal--MarginBlockStart);
-
-    interpolate-size: allow-keywords;
-
-    transition:
-        height var(--ak-c-modal--TransitionDuration--fast),
-        opacity var(--ak-c-modal--TransitionDuration--slow),
-        transform var(--ak-c-modal--TransitionDuration--slow),
-        overlay var(--ak-c-modal--TransitionDuration--slow) allow-discrete,
-        display var(--ak-c-modal--TransitionDuration--slow) allow-discrete;
-
-    transition-timing-function: ease-in-out;
-
-    opacity: 0;
-    height: 0;
-    transform: translateY(1em);
-
-    &::backdrop {
-        backdrop-filter: var(--ak-c-modal__backdrop--BackdropFilter);
-        background-color: var(--ak-c-modal__backdrop--BackgroundColor);
-
-        transition:
-            backdrop-filter,
-            overlay allow-discrete,
-            background-color;
-
-        transition-timing-function: ease-in-out;
-        transition-duration: var(--ak-c-modal--TransitionDuration--slow);
-    }
-
-    &.fade-in {
-        --ak-c-modal__backdrop--BackdropFilter: var(--ak-c-modal__backdrop--active--BackdropFilter);
-        --ak-c-modal__backdrop--BackgroundColor: var(
-            --ak-c-modal__backdrop--active--BackgroundColor
-        );
-
-        opacity: 1;
-        height: calc-size(max-content, size);
-    }
-
-    @media screen and (prefers-reduced-motion: reduce) {
-        /* A small duration is still needed to smoothly handle display changes. */
-        --ak-c-modal--TransitionDuration--fast: 25ms;
-        --ak-c-modal--TransitionDuration--slow: 50ms;
-    }
-}
-
-.ak-c-modal[open] {
-    transform: translateY(0);
-
-    @starting-style {
-        transform: translateY(-1em);
-    }
-}
-
-/* #endregion */
-
-/* #region Buttons */
-
-.ak-c-modal {
-    --ak-c-modal--c-button--Top: var(--pf-global--spacer--lg);
-    --ak-c-modal--c-button--Right: var(--pf-global--spacer--md);
-    --ak-c-modal--c-button--sibling--MarginRight: calc(
-        var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm)
-    );
-}
-
-/* #endregion */
-
-/* #region Header */
-
-.ak-c-modal {
-    --ak-c-modal__header--PaddingTop: var(--pf-global--spacer--lg);
-    --ak-c-modal__header--PaddingBottom: var(--pf-global--spacer--lg);
-    --ak-c-modal__header--PaddingRight: var(--pf-global--spacer--lg);
-    --ak-c-modal__header--PaddingLeft: var(--pf-global--spacer--lg);
-    --ak-c-modal__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
-    --ak-c-modal__header--body--PaddingTop: var(--pf-global--spacer--md);
-
-    --ak-c-modal__title--LineHeight: var(--pf-global--LineHeight--sm);
-    --ak-c-modal__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-    --ak-c-modal__title--FontSize: var(--pf-global--FontSize--2xl);
-    --ak-c-modal__title-icon--MarginRight: var(--pf-global--spacer--sm);
-    --ak-c-modal__title-icon--Color: var(--pf-global--Color--100);
-
-    --ak-c-modal__description--PaddingTop: var(--pf-global--spacer--xs);
-}
-
-/* #endregion */
-
-/* #region Body */
-
-.ak-c-modal {
-    --ak-c-modal__body--MinHeight: calc(
-        var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)
-    );
-    --ak-c-modal__body--MaxHeight: calc(75dvh - var(--pf-global--spacer--2xl));
-
-    --ak-c-modal__body--PaddingTop: var(--pf-global--spacer--lg);
-    --ak-c-modal__body--PaddingRight: var(--pf-global--spacer--lg);
-    --ak-c-modal__body--PaddingLeft: var(--pf-global--spacer--lg);
-    --ak-c-modal__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
-}
-
-/* #endregion */
-
-/* #region Footer */
-
-.ak-c-modal {
-    --ak-c-modal__footer--PaddingTop: var(--pf-global--spacer--lg);
-    --ak-c-modal__footer--PaddingRight: var(--pf-global--spacer--lg);
-    --ak-c-modal__footer--PaddingBottom: var(--pf-global--spacer--lg);
-    --ak-c-modal__footer--PaddingLeft: var(--pf-global--spacer--lg);
-}
-
-/* #endregion */
-
-/* #region Modifiers */
-
-.ak-c-modal {
-    --ak-c-modal--m-sm--sm--MaxWidth: 35rem;
-    --ak-c-modal--m-md--Width: 52.5rem;
-    --ak-c-modal--m-lg--lg--MaxWidth: 70rem;
-
-    --ak-c-modal--m-align-top--spacer: var(--pf-global--spacer--sm);
-    --ak-c-modal--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
-    --ak-c-modal--m-align-top--MarginTop: var(--ak-c-modal--m-align-top--spacer);
-    --ak-c-modal--m-align-top--MaxHeight: calc(
-        100% - min(var(--ak-c-modal--m-align-top--spacer), var(--pf-global--spacer--2xl)) -
-            var(--ak-c-modal--m-align-top--spacer)
-    );
-    --ak-c-modal--m-align-top--MaxWidth: calc(
-        100% - min(var(--ak-c-modal--m-align-top--spacer) * 2, var(--pf-global--spacer--xl))
-    );
-    --ak-c-modal--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
-    --ak-c-modal--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
-    --ak-c-modal--m-success__title-icon--Color: var(--pf-global--success-color--100);
-    --ak-c-modal--m-info__title-icon--Color: var(--pf-global--info-color--100);
-    --ak-c-modal--m-default__title-icon--Color: var(--pf-global--default-color--200);
-
-    @media (min-width: 1200px) {
-        --ak-c-modal--m-align-top--spacer: var(--ak-c-modal--m-align-top--xl--spacer);
-    }
-
-    &.pf-m-sm {
-        --ak-c-modal--Width: var(--ak-c-modal--m-sm--sm--MaxWidth);
-    }
-
-    &.pf-m-md {
-        --ak-c-modal--Width: var(--ak-c-modal--m-md--Width);
-    }
-
-    &.pf-m-lg {
-        --ak-c-modal--Width: var(--ak-c-modal--m-lg--lg--MaxWidth);
-    }
-
-    &.pf-m-align-top {
-        top: var(--ak-c-modal--m-align-top--MarginTop);
-        align-self: flex-start;
-        max-width: var(--ak-c-modal--m-align-top--MaxWidth);
-        max-height: var(--ak-c-modal--m-align-top--MaxHeight);
-    }
-
-    &.pf-m-danger {
-        --ak-c-modal__title-icon--Color: var(--ak-c-modal--m-danger__title-icon--Color);
-    }
-
-    &.pf-m-warning {
-        --ak-c-modal__title-icon--Color: var(--ak-c-modal--m-warning__title-icon--Color);
-    }
-
-    &.pf-m-success {
-        --ak-c-modal__title-icon--Color: var(--ak-c-modal--m-success__title-icon--Color);
-    }
-
-    &.pf-m-default {
-        --ak-c-modal__title-icon--Color: var(--ak-c-modal--m-default__title-icon--Color);
-    }
-
-    &.pf-m-info {
-        --ak-c-modal__title-icon--Color: var(--ak-c-modal--m-info__title-icon--Color);
-    }
-}
-
-/* #endregion */
-
-.ak-c-modal__content {
-    display: grid;
-    grid-template-rows: [header] auto [body] 1fr [footer] auto;
-}
-
-.ak-c-modal__content ::part(toolbar) {
-    position: var(--ak-c-modal--toolbar--Position, sticky);
-    inset-block-start: var(--ak-c-modal--toolbar--InsetBlockStart, 0);
-    z-index: var(--ak-c-modal--toolbar--ZIndex, 1);
-}
-
-.ak-c-modal__content [slot="before-body"] {
-    margin-block-end: 1rem;
-}
diff --git a/web/src/styles/authentik/components/Modal/modal.css b/web/src/styles/authentik/components/Modal/modal.css
new file mode 100644
index 000000000000..72e4e5b5de74
--- /dev/null
+++ b/web/src/styles/authentik/components/Modal/modal.css
@@ -0,0 +1,25 @@
+/**
+ * @deprecated Use `ak-c-modal` instead.
+ */
+
+.pf-c-modal-box {
+    --ak-c-modal-box__header--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--lg), 3cqb);
+    --ak-c-modal-box__header--InlineSpacer: var(--pf-global--spacer--md);
+
+    --pf-c-modal-box__header--PaddingTop: var(--ak-c-modal-box__header--BlockSpacer);
+
+    --ak-c-modal-box__footer--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--xl), 3cqb);
+    --pf-c-modal-box__footer--PaddingTop: var(--ak-c-modal-box__footer--BlockSpacer);
+    --pf-c-modal-box__footer--PaddingBottom: var(--ak-c-modal-box__footer--BlockSpacer);
+}
+/**
+     * Fixes padding in scrollable modal bodies, splitting the space between
+     * header and body.
+     */
+.pf-c-modal-box__header {
+    padding-bottom: calc(var(--pf-c-modal-box__body--PaddingTop) / 2);
+}
+
+.pf-c-modal-box__body {
+    padding-top: calc(var(--pf-c-modal-box__body--PaddingTop) / 2);
+}
diff --git a/web/src/styles/authentik/interface.global.css b/web/src/styles/authentik/interface.global.css
index 1ee2ea85be70..ec51ce9ab4fa 100644
--- a/web/src/styles/authentik/interface.global.css
+++ b/web/src/styles/authentik/interface.global.css
@@ -11,7 +11,6 @@
 @import "./base/globals.css";
 @import "./base/common.css";
 @import "./base/placeholder.css";
-@import "./base/modal.css";
 @import "#styles/locales/ja/globals.css";
 @import "#styles/locales/ko/globals.css";
 @import "#styles/locales/zh/globals.css";
diff --git a/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts b/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts
index 361cbc05e4f8..bfb62b4e8dab 100644
--- a/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts
+++ b/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts
@@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { AKModal } from "#elements/modals/ak-modal";
+import { AKModal } from "#elements/dialogs/ak-modal";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 
diff --git a/web/src/user/ak-interface-user.ts b/web/src/user/ak-interface-user.ts
index f554c10c19dc..7a1e5bb3f1f2 100644
--- a/web/src/user/ak-interface-user.ts
+++ b/web/src/user/ak-interface-user.ts
@@ -61,7 +61,9 @@ class UserInterface extends WithBrandConfig(WithSession(AuthenticatedInterface))
     @property({ attribute: false, useDefault: true })
     public drawer: DrawerState = readDrawerParams();
 
-    @listen(AKDrawerChangeEvent)
+    @listen(AKDrawerChangeEvent, {
+        target: window,
+    })
     protected drawerListener = (event: AKDrawerChangeEvent) => {
         this.drawer = event.drawer;
         persistDrawerParams(event.drawer);

From b833da704b3e00b25a61b6d826ec49a89083a6b6 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:28:53 +0200
Subject: [PATCH 07/21] web/wizards: refactor wizards to dialog-based flow

Rebuild the shared Wizard primitives on top of the new <dialog> contract:
split CreateWizard/utils out of Wizard, rename admin *Wizard.ts entry
points to ak-*-wizard.ts (Policy, Provider, Source, Stage,
PropertyMapping, ServiceConnection), and port the Application wizard
steps to the new WizardStep base. Adds the user wizard and recovery
invoker plus the refreshed Wizard component styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../wizard/ApplicationWizardStep.ts           |  22 +-
 .../wizard/ak-application-wizard-main.ts      | 140 -----
 .../wizard/ak-application-wizard.ts           | 153 ++++-
 .../applications/wizard/ak-wizard-title.ts    |  34 -
 .../ak-application-wizard-application-step.ts |  29 +-
 .../ak-application-wizard-bindings-step.ts    |  50 +-
 ...ak-application-wizard-edit-binding-step.ts |  42 +-
 ...application-wizard-provider-choice-step.ts |  94 +--
 .../ak-application-wizard-provider-step.ts    |  26 +-
 .../ak-application-wizard-submit-step.ts      | 105 ++--
 .../ApplicationWizardProviderForm.ts          |   4 +-
 ...ak-application-wizard-provider-for-ldap.ts |   8 +-
 ...k-application-wizard-provider-for-oauth.ts |   4 +-
 ...k-application-wizard-provider-for-proxy.ts |   4 +-
 .../ak-application-wizard-provider-for-rac.ts |   7 +-
 ...-application-wizard-provider-for-radius.ts |   4 +-
 ...ation-wizard-provider-for-saml-metadata.ts |   8 +-
 ...ak-application-wizard-provider-for-saml.ts |   3 +-
 ...ak-application-wizard-provider-for-scim.ts |   3 +-
 ...k-application-wizard-provider-for-wsfed.ts |   3 +-
 .../wizard/steps/providers/shared.ts          |   4 +-
 .../endpoints/connectors/ConnectorWizard.ts   |  88 +--
 .../admin/outposts/ServiceConnectionWizard.ts |  81 ---
 .../outposts/ak-service-connection-wizard.ts  |  32 +
 web/src/admin/policies/PolicyWizard.ts        | 126 ----
 web/src/admin/policies/ak-policy-wizard.ts    |  90 +++
 .../PropertyMappingWizard.ts                  |  92 ---
 .../ak-property-mapping-wizard.ts             |  46 ++
 web/src/admin/providers/ProviderWizard.ts     |  98 ---
 web/src/admin/providers/ak-provider-wizard.ts |  39 ++
 web/src/admin/sources/SourceWizard.ts         |  87 ---
 web/src/admin/sources/ak-source-wizard.ts     |  50 ++
 web/src/admin/stages/StageWizard.ts           | 116 ----
 web/src/admin/stages/ak-stage-wizard.ts       |  84 +++
 web/src/admin/users/ak-user-wizard.ts         | 176 ++++++
 web/src/admin/users/recovery.ts               |  65 ++
 web/src/components/ak-wizard/WizardStep.ts    | 161 +++--
 .../components/ak-wizard/ak-wizard-steps.ts   | 120 ++--
 web/src/components/ak-wizard/events.ts        |   8 +-
 web/src/components/ak-wizard/shared.ts        |  37 +-
 web/src/elements/wizard/ActionWizardPage.ts   |   8 +-
 web/src/elements/wizard/CreateWizard.ts       | 344 ++++++++++
 web/src/elements/wizard/FormWizardPage.ts     |  41 +-
 .../elements/wizard/TypeCreateWizardPage.ts   | 316 ++++++----
 web/src/elements/wizard/Wizard.ts             | 592 ++++++++++++------
 web/src/elements/wizard/WizardPage.ts         |  53 +-
 web/src/elements/wizard/utils.ts              |  13 +
 .../authentik/components/Wizard/wizard.css    |  40 +-
 48 files changed, 2160 insertions(+), 1590 deletions(-)
 delete mode 100644 web/src/admin/applications/wizard/ak-application-wizard-main.ts
 delete mode 100644 web/src/admin/applications/wizard/ak-wizard-title.ts
 delete mode 100644 web/src/admin/outposts/ServiceConnectionWizard.ts
 create mode 100644 web/src/admin/outposts/ak-service-connection-wizard.ts
 delete mode 100644 web/src/admin/policies/PolicyWizard.ts
 create mode 100644 web/src/admin/policies/ak-policy-wizard.ts
 delete mode 100644 web/src/admin/property-mappings/PropertyMappingWizard.ts
 create mode 100644 web/src/admin/property-mappings/ak-property-mapping-wizard.ts
 delete mode 100644 web/src/admin/providers/ProviderWizard.ts
 create mode 100644 web/src/admin/providers/ak-provider-wizard.ts
 delete mode 100644 web/src/admin/sources/SourceWizard.ts
 create mode 100644 web/src/admin/sources/ak-source-wizard.ts
 delete mode 100644 web/src/admin/stages/StageWizard.ts
 create mode 100644 web/src/admin/stages/ak-stage-wizard.ts
 create mode 100644 web/src/admin/users/ak-user-wizard.ts
 create mode 100644 web/src/admin/users/recovery.ts
 create mode 100644 web/src/elements/wizard/CreateWizard.ts
 create mode 100644 web/src/elements/wizard/utils.ts

diff --git a/web/src/admin/applications/wizard/ApplicationWizardStep.ts b/web/src/admin/applications/wizard/ApplicationWizardStep.ts
index 3805f3dcc2c8..5c16a37efa67 100644
--- a/web/src/admin/applications/wizard/ApplicationWizardStep.ts
+++ b/web/src/admin/applications/wizard/ApplicationWizardStep.ts
@@ -10,8 +10,8 @@ import { WizardStep } from "#components/ak-wizard/WizardStep";
 
 import { ApplicationWizardStyles } from "#admin/applications/wizard/ApplicationWizardFormStepStyles.styles";
 import {
-    type ApplicationWizardState,
-    type ApplicationWizardStateUpdate,
+    type ApplicationWizardContext,
+    type ApplicationWizardContextUpdate,
 } from "#admin/applications/wizard/steps/providers/shared";
 
 import { ApplicationRequest } from "@goauthentik/api";
@@ -19,6 +19,12 @@ import { ApplicationRequest } from "@goauthentik/api";
 import { msg } from "@lit/localize";
 import { property } from "lit/decorators.js";
 
+export interface ApplicationDispatchInit {
+    update?: ApplicationWizardContextUpdate | null;
+    destination?: string | null;
+    details?: NavigationEventInit | null;
+}
+
 /**
  * Base class for application wizard steps. Provides common functionality such as form handling and wizard state management.
  *
@@ -28,7 +34,7 @@ export abstract class ApplicationWizardStep<T = Partial<ApplicationRequest>> ext
     static styles = [...WizardStep.styles, ...ApplicationWizardStyles];
 
     @property({ type: Object, attribute: false })
-    public wizard!: ApplicationWizardState;
+    public wizard!: ApplicationWizardContext;
 
     protected override wizardTitle = msg("New application");
     protected override wizardDescription = msg(
@@ -78,19 +84,15 @@ export abstract class ApplicationWizardStep<T = Partial<ApplicationRequest>> ext
 
     // This pattern became visible during development, and the order is important: wizard updating
     // and validation must complete before navigation is attempted.
-    public handleUpdate(
-        update?: ApplicationWizardStateUpdate,
-        destination?: string,
-        enable?: NavigationEventInit,
-    ) {
+    public dispatchEvents({ update, destination, details }: ApplicationDispatchInit): void {
         // Inform ApplicationWizard of content state
         if (update) {
             this.dispatchEvent(new WizardUpdateEvent(update));
         }
 
         // Inform WizardStepManager of steps state
-        if (destination || enable) {
-            this.dispatchEvent(new WizardNavigationEvent(destination, enable));
+        if (destination || details) {
+            this.dispatchEvent(new WizardNavigationEvent(details, destination));
         }
     }
 }
diff --git a/web/src/admin/applications/wizard/ak-application-wizard-main.ts b/web/src/admin/applications/wizard/ak-application-wizard-main.ts
deleted file mode 100644
index 020f96a792b2..000000000000
--- a/web/src/admin/applications/wizard/ak-application-wizard-main.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import "#components/ak-wizard/ak-wizard-steps";
-import "#admin/applications/wizard/steps/ak-application-wizard-application-step";
-import "#admin/applications/wizard/steps/ak-application-wizard-bindings-step";
-import "#admin/applications/wizard/steps/ak-application-wizard-edit-binding-step";
-import "#admin/applications/wizard/steps/ak-application-wizard-provider-choice-step";
-import "#admin/applications/wizard/steps/ak-application-wizard-provider-step";
-import "#admin/applications/wizard/steps/ak-application-wizard-submit-step";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-import { assertEveryPresent } from "#common/utils";
-
-import { AKElement } from "#elements/Base";
-
-import { WizardUpdateEvent } from "#components/ak-wizard/events";
-
-import { applicationWizardProvidersContext } from "#admin/applications/wizard/ContextIdentity";
-import {
-    type ApplicationWizardState,
-    type ApplicationWizardStateUpdate,
-} from "#admin/applications/wizard/steps/providers/shared";
-
-import type { TypeCreate } from "@goauthentik/api";
-import { ProviderModelEnum, ProvidersApi, ProxyMode } from "@goauthentik/api";
-
-import { ContextProvider } from "@lit/context";
-import { html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-
-const freshWizardState = (): ApplicationWizardState => ({
-    providerModel: "",
-    currentBinding: -1,
-    app: {},
-    provider: {},
-    proxyMode: ProxyMode.Proxy,
-    bindings: [],
-    errors: {},
-});
-
-type ExtractProviderName<T extends string> = T extends `${string}.${infer Name}` ? Name : never;
-
-type ProviderModelNameEnum = ExtractProviderName<ProviderModelEnum> | "samlproviderimportmodel";
-
-export const providerTypePriority: ProviderModelNameEnum[] = [
-    "oauth2provider",
-    "samlprovider",
-    "samlproviderimportmodel",
-    "racprovider",
-    "proxyprovider",
-    "radiusprovider",
-    "ldapprovider",
-    "scimprovider",
-    "wsfederationprovider",
-];
-
-@customElement("ak-application-wizard-main")
-export class AkApplicationWizardMain extends AKElement {
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this;
-    }
-
-    @state()
-    protected wizard: ApplicationWizardState = freshWizardState();
-
-    protected wizardProviderProvider = new ContextProvider(this, {
-        context: applicationWizardProvidersContext,
-        initialValue: [],
-    });
-
-    constructor() {
-        super();
-        this.addEventListener(WizardUpdateEvent.eventName, this.handleUpdate);
-    }
-
-    public override connectedCallback() {
-        super.connectedCallback();
-
-        new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((providerTypes) => {
-            const providerNameToProviderMap = new Map(
-                providerTypes.map((providerType) => [providerType.modelName, providerType]),
-            );
-            const providersInOrder = providerTypePriority.map((name) =>
-                providerNameToProviderMap.get(name),
-            );
-            assertEveryPresent<TypeCreate>(
-                providersInOrder,
-                "Provider priority list includes name for which no provider model was returned.",
-            );
-            this.wizardProviderProvider.setValue(providersInOrder);
-        });
-    }
-
-    // This is the actual top of the Wizard; so this is where we accept the update information and
-    // incorporate it into the wizard.
-    handleUpdate(ev: WizardUpdateEvent<ApplicationWizardStateUpdate>) {
-        ev.stopPropagation();
-        const update = ev.content;
-
-        if (typeof update !== "undefined") {
-            this.wizard = {
-                ...this.wizard,
-                ...update,
-            };
-        }
-    }
-
-    render() {
-        return html`<ak-wizard-steps>
-            <ak-application-wizard-application-step
-                slot="application"
-                .wizard=${this.wizard}
-            ></ak-application-wizard-application-step>
-            <ak-application-wizard-provider-choice-step
-                slot="provider-choice"
-                .wizard=${this.wizard}
-            ></ak-application-wizard-provider-choice-step>
-            <ak-application-wizard-provider-step
-                slot="provider"
-                .wizard=${this.wizard}
-            ></ak-application-wizard-provider-step>
-            <ak-application-wizard-bindings-step
-                slot="bindings"
-                .wizard=${this.wizard}
-            ></ak-application-wizard-bindings-step>
-            <ak-application-wizard-edit-binding-step
-                slot="edit-binding"
-                .wizard=${this.wizard}
-            ></ak-application-wizard-edit-binding-step>
-            <ak-application-wizard-submit-step
-                slot="submit"
-                .wizard=${this.wizard}
-            ></ak-application-wizard-submit-step>
-        </ak-wizard-steps>`;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-application-wizard-main": AkApplicationWizardMain;
-    }
-}
diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts
index 003ed250c754..5701d34630c1 100644
--- a/web/src/admin/applications/wizard/ak-application-wizard.ts
+++ b/web/src/admin/applications/wizard/ak-application-wizard.ts
@@ -1,46 +1,147 @@
-import "#admin/applications/wizard/ak-application-wizard-main";
+import "#components/ak-wizard/ak-wizard-steps";
+import "#admin/applications/wizard/steps/ak-application-wizard-application-step";
+import "#admin/applications/wizard/steps/ak-application-wizard-bindings-step";
+import "#admin/applications/wizard/steps/ak-application-wizard-edit-binding-step";
+import "#admin/applications/wizard/steps/ak-application-wizard-provider-choice-step";
+import "#admin/applications/wizard/steps/ak-application-wizard-provider-step";
+import "#admin/applications/wizard/steps/ak-application-wizard-submit-step";
 
-import { AKModal } from "#elements/modals/ak-modal";
-import { SlottedTemplateResult } from "#elements/types";
+import { DEFAULT_CONFIG } from "#common/api/config";
+import { assertEveryPresent } from "#common/utils";
 
-import { WizardCloseEvent } from "#components/ak-wizard/events";
+import { listen } from "#elements/decorators/listen";
+import { CreateWizard } from "#elements/wizard/CreateWizard";
 
+import { WizardUpdateEvent } from "#components/ak-wizard/events";
+
+import { applicationWizardProvidersContext } from "#admin/applications/wizard/ContextIdentity";
+import {
+    type ApplicationWizardContext,
+    type ApplicationWizardContextUpdate,
+} from "#admin/applications/wizard/steps/providers/shared";
+
+import type { TypeCreate } from "@goauthentik/api";
+import { ProviderModelEnum, ProvidersApi, ProxyMode } from "@goauthentik/api";
+
+import { ContextProvider } from "@lit/context";
 import { msg } from "@lit/localize";
-import { css, CSSResult, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+const createWizardContextValue = (): ApplicationWizardContext => ({
+    providerModel: "",
+    currentBinding: -1,
+    app: {},
+    provider: {},
+    proxyMode: ProxyMode.Proxy,
+    bindings: [],
+    errors: {},
+});
+
+type ExtractProviderName<T extends string> = T extends `${string}.${infer Name}` ? Name : never;
+
+type ProviderModelNameEnum = ExtractProviderName<ProviderModelEnum> | "samlproviderimportmodel";
+
+export const providerTypePriority: ProviderModelNameEnum[] = [
+    "oauth2provider",
+    "samlprovider",
+    "samlproviderimportmodel",
+    "racprovider",
+    "proxyprovider",
+    "radiusprovider",
+    "ldapprovider",
+    "scimprovider",
+    "wsfederationprovider",
+];
 
 @customElement("ak-application-wizard")
-export class AkApplicationWizard extends AKModal {
-    public static override formatARIALabel?(): string {
-        return msg("New Application Wizard");
+export class AKApplicationWizard extends CreateWizard {
+    #api = new ProvidersApi(DEFAULT_CONFIG);
+
+    public static override verboseName = msg("Application");
+    public static override verboseNamePlural = msg("Applications");
+
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this;
     }
 
-    public static override styles: CSSResult[] = [
-        ...super.styles,
-        css`
-            [part="main"] {
-                display: block;
-            }
-        `,
-    ];
+    @state()
+    protected context: ApplicationWizardContext = createWizardContextValue();
 
-    constructor() {
-        super();
+    protected wizardProviderProvider = new ContextProvider(this, {
+        context: applicationWizardProvidersContext,
+        initialValue: [],
+    });
 
-        this.addEventListener(WizardCloseEvent.eventName, this.closeListener);
-    }
+    public override refresh = (): Promise<void> => {
+        return this.#api.providersAllTypesList().then((providerTypes) => {
+            const providerNameToProviderMap = new Map(
+                providerTypes.map((providerType) => [providerType.modelName, providerType]),
+            );
+
+            const providersInOrder = providerTypePriority.map((name) =>
+                providerNameToProviderMap.get(name),
+            );
+
+            assertEveryPresent<TypeCreate>(
+                providersInOrder,
+                "Provider priority list includes name for which no provider model was returned.",
+            );
+
+            this.wizardProviderProvider.setValue(providersInOrder);
+        });
+    };
+
+    // This is the actual top of the Wizard; so this is where we accept the update information and
+    // incorporate it into the wizard.
+    /**
+     * Handles updates to the wizard context, which are emitted by the individual steps when their data changes.
+     */
+    @listen(WizardUpdateEvent)
+    handleUpdate(ev: WizardUpdateEvent<ApplicationWizardContextUpdate>) {
+        ev.stopPropagation();
+        const update = ev.content;
 
-    protected renderCloseButton(): SlottedTemplateResult {
-        return null;
+        if (update) {
+            this.context = {
+                ...this.context,
+                ...update,
+            };
+        }
     }
 
-    render() {
-        return html`<ak-application-wizard-main part="main"></ak-application-wizard-main>`;
+    protected override render() {
+        return html`<ak-wizard-steps>
+            <ak-application-wizard-application-step
+                slot="application"
+                .wizard=${this.context}
+            ></ak-application-wizard-application-step>
+            <ak-application-wizard-provider-choice-step
+                slot="provider-choice"
+                .wizard=${this.context}
+            ></ak-application-wizard-provider-choice-step>
+            <ak-application-wizard-provider-step
+                slot="provider"
+                .wizard=${this.context}
+            ></ak-application-wizard-provider-step>
+            <ak-application-wizard-bindings-step
+                slot="bindings"
+                .wizard=${this.context}
+            ></ak-application-wizard-bindings-step>
+            <ak-application-wizard-edit-binding-step
+                slot="edit-binding"
+                .wizard=${this.context}
+            ></ak-application-wizard-edit-binding-step>
+            <ak-application-wizard-submit-step
+                slot="submit"
+                .wizard=${this.context}
+            ></ak-application-wizard-submit-step>
+        </ak-wizard-steps>`;
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-application-wizard": AkApplicationWizard;
+        "ak-application-wizard": AKApplicationWizard;
     }
 }
diff --git a/web/src/admin/applications/wizard/ak-wizard-title.ts b/web/src/admin/applications/wizard/ak-wizard-title.ts
deleted file mode 100644
index 1a358bc1831c..000000000000
--- a/web/src/admin/applications/wizard/ak-wizard-title.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { AKElement } from "#elements/Base";
-
-import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import PFTitle from "@patternfly/patternfly/components/Title/title.css";
-
-@customElement("ak-wizard-title")
-export class AkWizardTitle extends AKElement {
-    static styles = [
-        PFContent,
-        PFTitle,
-        css`
-            .ak-bottom-spacing {
-                padding-bottom: var(--pf-global--spacer--lg);
-            }
-        `,
-    ];
-
-    render() {
-        return html`<div class="ak-bottom-spacing pf-c-content">
-            <h3><slot></slot></h3>
-        </div>`;
-    }
-}
-
-export default AkWizardTitle;
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-wizard-title": AkWizardTitle;
-    }
-}
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
index 3f6552efae38..d1e2181ac2af 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts
@@ -1,4 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
 import "#components/ak-file-search-input";
 import "#components/ak-radio-input";
 import "#components/ak-slug-input";
@@ -16,7 +15,7 @@ import { type NavigableButton, type WizardButton } from "#components/ak-wizard/s
 
 import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep";
 import {
-    ApplicationWizardStateUpdate,
+    ApplicationWizardContextUpdate,
     WizardValidationRecord,
 } from "#admin/applications/wizard/steps/providers/shared";
 import { policyEngineModes } from "#admin/policies/PolicyEngineModes";
@@ -61,13 +60,11 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
             : (this.wizard.errors?.app?.[name] ?? this.wizard.errors?.app?.[snakeCase(name)] ?? []);
     }
 
-    get buttons(): WizardButton[] {
-        return [
-            // ---
-            { kind: "cancel" },
-            { kind: "next", destination: "provider-choice" },
-        ];
-    }
+    protected buttons: WizardButton[] = [
+        // ---
+        { kind: "cancel" },
+        { kind: "next", destination: "provider-choice" },
+    ];
 
     get valid() {
         this.errors = new Map();
@@ -95,7 +92,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
         }
 
         if (!this.valid) {
-            this.handleEnabling({
+            this.dispatchNavigationEvent({
                 disabled: ["provider-choice", "provider", "bindings", "submit"],
             });
 
@@ -104,24 +101,26 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
 
         const app = { ...this.formValues };
 
-        const payload: ApplicationWizardStateUpdate = {
+        const update: ApplicationWizardContextUpdate = {
             app,
             errors: omitKeys(this.wizard.errors, "app"),
         };
 
         if (!this.wizard.provider?.name?.trim() && app.name) {
-            payload.provider = {
+            update.provider = {
                 name: `Provider for ${app.name}`,
             };
         }
 
-        this.handleUpdate(payload, button.destination, {
-            enable: "provider-choice",
+        return this.dispatchEvents({
+            update,
+            destination: button.destination,
+            details: { enable: "provider-choice" },
         });
     }
 
     protected renderForm(app: Partial<ApplicationRequest>, errors: WizardValidationRecord = {}) {
-        return html` <ak-wizard-title>${msg("Configure the Application")}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${msg("Configure the Application")}</h3>
             <form id="applicationform" class="pf-c-form pf-m-horizontal" slot="form">
                 <ak-text-input
                     name="name"
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts
index 1e416bb8962c..ad874f1e1eb2 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts
@@ -1,5 +1,4 @@
 import "#elements/EmptyState";
-import "#admin/applications/wizard/ak-wizard-title";
 import "#components/ak-radio-input";
 import "#components/ak-slug-input";
 import "#components/ak-status-label";
@@ -40,13 +39,11 @@ const COLUMNS = [
 export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
     label = msg("Configure Bindings");
 
-    get buttons(): WizardButton[] {
-        return [
-            { kind: "cancel" },
-            { kind: "back", destination: "provider" },
-            { kind: "next", destination: "submit" },
-        ];
-    }
+    protected buttons: WizardButton[] = [
+        { kind: "cancel" },
+        { kind: "back", destination: "provider" },
+        { kind: "next", destination: "submit" },
+    ];
 
     @query("ak-select-table")
     selectTable!: SelectTable;
@@ -64,6 +61,7 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
     get bindingsAsColumns() {
         return this.wizard.bindings.map((binding, index) => {
             const { order, enabled, timeout } = binding;
+
             const isSet = P.union(P.string.minLength(1), P.number);
             const policy = match(binding)
                 .with({ policy: isSet }, (v) => msg(str`Policy ${v.policyObj?.name}`))
@@ -89,26 +87,32 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
     // TODO Fix those dispatches so that we handle them here, in this component, and *choose* how to
     // forward them.
     onBindingEvent(binding?: number) {
-        this.handleUpdate({ currentBinding: binding ?? -1 }, "edit-binding", {
-            enable: "edit-binding",
+        this.dispatchEvents({
+            update: { currentBinding: binding ?? -1 },
+            destination: "edit-binding",
+            details: { enable: "edit-binding" },
         });
     }
 
-    onDeleteBindings() {
+    protected onDeleteBindings() {
         const toDelete = this.selectTable
             .json()
             .map((i) => (typeof i === "string" ? parseInt(i, 10) : i));
         const bindings = this.wizard.bindings.filter((binding, index) => !toDelete.includes(index));
-        this.handleUpdate({ bindings }, "bindings");
+
+        return this.dispatchEvents({
+            update: { bindings },
+            destination: "bindings",
+        });
     }
 
-    renderEmptyCollection() {
-        return html`<ak-wizard-title
-                >${msg("Configure Policy/User/Group Bindings")}</ak-wizard-title
-            >
-            <h6 class="pf-c-title pf-m-md">
+    protected renderEmptyCollection() {
+        return html`<h3 class="pf-c-wizard__main-title">
+                ${msg("Configure Policy/User/Group Bindings")}
+            </h3>
+            <h4 class="pf-c-title pf-m-md">
                 ${msg("These policies control which users can access this application.")}
-            </h6>
+            </h4>
             <div class="pf-c-card">
                 <ak-application-wizard-bindings-toolbar
                     @clickNew=${() => this.onBindingEvent()}
@@ -136,11 +140,11 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
             </div>`;
     }
 
-    renderCollection() {
-        return html` <ak-wizard-title>${msg("Configure Policy Bindings")}</ak-wizard-title>
-            <h6 class="pf-c-title pf-m-md">
+    protected renderCollection() {
+        return html`<h3 class="pf-c-wizard__main-title">${msg("Configure Policy Bindings")}</h3>
+            <h4 class="pf-c-title pf-m-md">
                 ${msg("These policies control which users can access this application.")}
-            </h6>
+            </h4>
             <ak-application-wizard-bindings-toolbar
                 @clickNew=${() => this.onBindingEvent()}
                 @clickDelete=${() => this.onDeleteBindings()}
@@ -155,7 +159,7 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
             ></ak-select-table>`;
     }
 
-    renderMain() {
+    protected renderMain() {
         if ((this.wizard.bindings ?? []).length === 0) {
             return this.renderEmptyCollection();
         }
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts
index 65a4e60f6845..468973df94b0 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts
@@ -1,5 +1,4 @@
 import "#components/ak-number-input";
-import "#admin/applications/wizard/ak-wizard-title";
 import "#components/ak-radio-input";
 import "#components/ak-switch-input";
 import "#components/ak-text-input";
@@ -50,17 +49,15 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep<Poli
     @state()
     policyGroupUser: PolicyBindingCheckTarget = PolicyBindingCheckTarget.Policy;
 
-    instanceId = -1;
+    protected instanceId = -1;
 
-    instance?: PolicyBinding;
+    protected instance: PolicyBinding | null = null;
 
-    get buttons(): WizardButton[] {
-        return [
-            { kind: "cancel" },
-            { kind: "next", label: msg("Save Binding"), destination: "bindings" },
-            { kind: "back", destination: "bindings" },
-        ];
-    }
+    protected buttons: WizardButton[] = [
+        { kind: "cancel" },
+        { kind: "back", destination: "bindings" },
+        { kind: "next", label: msg("Save Binding"), destination: "bindings" },
+    ];
 
     public override handleButton(button: NavigableButton) {
         if (button.kind === "next") {
@@ -84,12 +81,14 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep<Poli
             }
 
             this.instanceId = -1;
-            this.handleUpdate({ bindings }, "bindings");
 
-            return;
+            return this.dispatchEvents({
+                update: { bindings },
+                destination: "bindings",
+            });
         }
 
-        super.handleButton(button);
+        return super.handleButton(button);
     }
 
     // The search select configurations for the three different types of fetches that we care about,
@@ -153,7 +152,7 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep<Poli
         }
     }
 
-    renderSearch(title: string, policyKind: PolicyBindingCheckTarget) {
+    protected renderSearch(title: string, policyKind: PolicyBindingCheckTarget) {
         if (policyKind !== this.policyGroupUser) {
             return nothing;
         }
@@ -163,12 +162,15 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep<Poli
                 .config=${this.searchSelectConfigs(policyKind)}
                 class="policy-search-select"
                 blankable
+                placeholder=${msg(`Select a ${title}...`)}
             ></ak-search-select-ez>
         </ak-form-element-horizontal>`;
     }
 
-    renderForm(instance?: PolicyBinding) {
-        return html`<ak-wizard-title>${msg("Create a Policy/User/Group Binding")}</ak-wizard-title>
+    protected renderForm(instance?: PolicyBinding | null) {
+        return html`<h3 class="pf-c-wizard__main-title">
+                ${msg("Create a Policy/User/Group Binding")}
+            </h3>
             <form id="bindingform" class="pf-c-form pf-m-horizontal" slot="form">
                 <div class="pf-c-card pf-m-selectable pf-m-selected">
                     <div class="pf-c-card__body">
@@ -222,16 +224,18 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep<Poli
             </form>`;
     }
 
-    renderMain() {
+    protected renderMain() {
         if (!(this.wizard.bindings && this.wizard.errors)) {
             throw new Error("Application Step received uninitialized wizard context.");
         }
+
         const currentBinding = this.wizard.currentBinding ?? -1;
+
         if (this.instanceId !== currentBinding) {
             this.instanceId = currentBinding;
-            this.instance =
-                this.instanceId === -1 ? undefined : this.wizard.bindings[this.instanceId];
+            this.instance = this.instanceId === -1 ? null : this.wizard.bindings[this.instanceId];
         }
+
         return this.renderForm(this.instance);
     }
 }
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts
index 1fd5cc7975da..5e80a25623a2 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts
@@ -1,4 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
 import "#elements/EmptyState";
 import "#elements/forms/FormGroup";
 import "#elements/forms/HorizontalFormElement";
@@ -6,8 +5,8 @@ import "#elements/wizard/TypeCreateWizardPage";
 
 import { applicationWizardProvidersContext } from "../ContextIdentity.js";
 
-import { bound } from "#elements/decorators/bound";
 import { WithLicenseSummary } from "#elements/mixins/license";
+import { SlottedTemplateResult } from "#elements/types";
 import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
 
 import type { NavigableButton, WizardButton } from "#components/ak-wizard/shared";
@@ -19,6 +18,7 @@ import type { TypeCreate } from "@goauthentik/api";
 import { consume } from "@lit/context";
 import { msg } from "@lit/localize";
 import { html } from "lit";
+import { guard } from "lit-html/directives/guard.js";
 import { customElement, state } from "lit/decorators.js";
 
 /**
@@ -30,65 +30,69 @@ export class ApplicationWizardProviderChoiceStep extends WithLicenseSummary(Appl
     label = msg("Choose a Provider");
 
     @state()
-    failureMessage = "";
+    protected failureMessage = "";
 
     @consume({ context: applicationWizardProvidersContext, subscribe: true })
     public providerModelsList!: TypeCreate[];
 
-    get buttons(): WizardButton[] {
-        return [
-            { kind: "cancel" },
-            { kind: "back", destination: "application" },
-            { kind: "next", destination: "provider" },
-        ];
-    }
+    protected buttons: WizardButton[] = [
+        { kind: "cancel" },
+        { kind: "back", destination: "application" },
+        { kind: "next", destination: "provider" },
+    ];
 
     public override handleButton(button: NavigableButton) {
         this.failureMessage = "";
+
         if (button.kind === "next") {
             if (!this.wizard.providerModel) {
                 this.failureMessage = msg("Please choose a provider type before proceeding.");
-                this.handleEnabling({ disabled: ["provider", "bindings", "submit"] });
+                this.dispatchNavigationEvent({ disabled: ["provider", "bindings", "submit"] });
+
                 return;
             }
-            this.handleUpdate(undefined, button.destination, { enable: "provider" });
-            return;
+
+            return this.dispatchEvents({
+                destination: button.destination,
+                details: { enable: "provider" },
+            });
         }
-        super.handleButton(button);
-    }
 
-    @bound
-    onSelect(ev: CustomEvent<TypeCreate>) {
-        ev.stopPropagation();
-        const detail: TypeCreate = ev.detail;
-        this.handleUpdate({ providerModel: detail.modelName });
+        return super.handleButton(button);
     }
 
-    renderMain() {
-        const selectedTypes = this.providerModelsList.filter(
-            (t) => t.modelName === this.wizard.providerModel,
-        );
-
-        return this.providerModelsList.length > 0
-            ? html` <ak-wizard-title>${msg("Choose a Provider Type")}</ak-wizard-title>
-                  <form class="pf-c-form pf-m-horizontal">
-                      <ak-wizard-page-type-create
-                          .types=${this.providerModelsList}
-                          layout=${TypeCreateWizardPageLayouts.grid}
-                          .selectedType=${selectedTypes.length > 0 ? selectedTypes[0] : undefined}
-                          @select=${(ev: CustomEvent<TypeCreate>) => {
-                              this.handleUpdate(
-                                  {
-                                      ...this.wizard,
-                                      providerModel: ev.detail.modelName,
-                                  },
-                                  undefined,
-                                  { enable: "provider" },
-                              );
-                          }}
-                      ></ak-wizard-page-type-create>
-                  </form>`
-            : html`<ak-empty-state default-label></ak-empty-state>`;
+    protected typeSelectListener = (event: CustomEvent<TypeCreate>) => {
+        return this.dispatchEvents({
+            update: {
+                ...this.wizard,
+                providerModel: event.detail.modelName,
+            },
+            details: { enable: "provider" },
+        });
+    };
+
+    protected renderMain(): SlottedTemplateResult {
+        const { providerModelsList } = this;
+
+        return guard([providerModelsList], () => {
+            if (!providerModelsList.length) {
+                return html`<ak-empty-state default-label></ak-empty-state>`;
+            }
+
+            const selectedTypes = providerModelsList.filter(
+                (t) => t.modelName === this.wizard.providerModel,
+            );
+
+            return html`<h3 class="pf-c-wizard__main-title">${msg("Choose a Provider Type")}</h3>
+                <form class="pf-c-form pf-m-horizontal">
+                    <ak-wizard-page-type-create
+                        .types=${providerModelsList}
+                        layout=${TypeCreateWizardPageLayouts.grid}
+                        .selectedType=${selectedTypes.length > 0 ? selectedTypes[0] : null}
+                        @ak-type-create-select=${this.typeSelectListener}
+                    ></ak-wizard-page-type-create>
+                </form>`;
+        });
     }
 }
 
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts
index 8131727d9698..1522dc0b3da3 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts
@@ -75,11 +75,12 @@ export class ApplicationWizardProviderStep extends ApplicationWizardStep {
     public override handleButton(button: NavigableButton) {
         if (button.kind === "next") {
             if (!this.valid) {
-                this.handleEnabling({
+                this.dispatchNavigationEvent({
                     disabled: ["bindings", "submit"],
                 });
                 return;
             }
+
             const payload = {
                 provider: {
                     ...this.formValues,
@@ -87,22 +88,23 @@ export class ApplicationWizardProviderStep extends ApplicationWizardStep {
                 },
                 errors: omitKeys(this.wizard.errors, "provider"),
             };
-            this.handleUpdate(payload, button.destination, {
-                enable: ["bindings", "submit"],
+
+            return this.dispatchEvents({
+                update: payload,
+                destination: button.destination,
+                details: { enable: ["bindings", "submit"] },
             });
-            return;
         }
-        super.handleButton(button);
-    }
 
-    get buttons(): WizardButton[] {
-        return [
-            { kind: "cancel" },
-            { kind: "back", destination: "provider-choice" },
-            { kind: "next", destination: "bindings" },
-        ];
+        return super.handleButton(button);
     }
 
+    protected buttons: WizardButton[] = [
+        { kind: "cancel" },
+        { kind: "back", destination: "provider-choice" },
+        { kind: "next", destination: "bindings" },
+    ];
+
     renderMain() {
         if (!this.wizard.providerModel) {
             throw new Error("Attempted to access provider page without providing a provider type.");
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
index 89b0cfe5281c..befe7d2fb90c 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
@@ -1,5 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
-
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { EVENT_REFRESH } from "#common/constants";
 import { parseAPIResponseError } from "#common/errors/network";
@@ -154,7 +152,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
                 return;
             }
 
-            this.handleUpdate({ errors: parsedError });
+            this.dispatchEvents({ update: { errors: parsedError } });
             this.state = "reviewing";
         }
     }
@@ -243,7 +241,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
                     }
                 }
 
-                this.handleUpdate({ errors: parsedError });
+                this.dispatchEvents({ update: { errors: parsedError } });
                 this.state = "reviewing";
             });
     }
@@ -269,19 +267,19 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
             });
     }
 
-    get buttons(): WizardButton[] {
-        const forReview: WizardButton[] = [
-            { kind: "cancel" },
-            { kind: "back", destination: "bindings" },
-            { kind: "next", label: msg("Create Application"), destination: "here" },
-        ];
-
-        const forSubmit: WizardButton[] = [{ kind: "close" }];
-
+    protected get buttons(): WizardButton[] {
         return match(this.state)
-            .with("submitted", () => forSubmit)
+            .with("submitted", () => {
+                return [{ kind: "close" }] satisfies WizardButton[];
+            })
+            .with("reviewing", () => {
+                return [
+                    { kind: "cancel" },
+                    { kind: "back", destination: "bindings" },
+                    { kind: "next", label: msg("Create Application"), destination: "here" },
+                ] satisfies WizardButton[];
+            })
             .with("running", () => [])
-            .with("reviewing", () => forReview)
             .exhaustive();
     }
 
@@ -377,36 +375,53 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
 
         const metaLaunchUrl = app.metaLaunchUrl?.trim();
 
-        return html`
-            <div class="ak-wizard-main-content">
-                <ak-wizard-title>${msg("Review the Application and Provider")}</ak-wizard-title>
-                <h2 class="pf-c-title pf-m-xl">${msg("Application")}</h2>
-                <dl class="pf-c-description-list">
-                    <div class="pf-c-description-list__group">
-                        <dt class="pf-c-description-list__term">${msg("Name")}</dt>
-                        <dt class="pf-c-description-list__description">${app.name}</dt>
-                    </div>
-                    <div class="pf-c-description-list__group">
-                        <dt class="pf-c-description-list__term">${msg("Group")}</dt>
-                        <dt class="pf-c-description-list__description">${app.group || msg("-")}</dt>
-                    </div>
-                    <div class="pf-c-description-list__group">
-                        <dt class="pf-c-description-list__term">${msg("Policy engine mode")}</dt>
-                        <dt class="pf-c-description-list__description">
-                            ${app.policyEngineMode?.toUpperCase()}
-                        </dt>
-                    </div>
-                    ${metaLaunchUrl
-                        ? html`<div class="pf-c-description-list__group">
-                              <dt class="pf-c-description-list__term">${msg("Launch URL")}</dt>
-                              <dt class="pf-c-description-list__description">${metaLaunchUrl}</dt>
-                          </div>`
-                        : nothing}
-                </dl>
-                ${renderer
-                    ? html`<h2 class="pf-c-title pf-m-xl pf-u-pt-xl">${msg("Provider")}</h2>
-                          ${renderer(provider)}`
-                    : nothing}
+        return html`<h2 class="pf-c-wizard__main-title">
+                    ${msg("Review the Application and Provider")}
+                </h2>
+                <fieldset>
+                    <legend>${msg("Application Details")}</legend>
+                    <dl class="pf-c-description-list">
+                        <div class="pf-c-description-list__group">
+                            <dt class="pf-c-description-list__term">${msg("Application Name")}</dt>
+                            <dt class="pf-c-description-list__description">${app.name}</dt>
+                        </div>
+                        <div class="pf-c-description-list__group">
+                            <dt class="pf-c-description-list__term">${msg("Group")}</dt>
+                            <dt class="pf-c-description-list__description">
+                                ${app.group || msg("-")}
+                            </dt>
+                        </div>
+                        <div class="pf-c-description-list__group">
+                            <dt class="pf-c-description-list__term">
+                                ${msg("Policy engine mode")}
+                            </dt>
+                            <dt class="pf-c-description-list__description">
+                                ${app.policyEngineMode?.toUpperCase()}
+                            </dt>
+                        </div>
+                        ${
+                            metaLaunchUrl
+                                ? html`<div class="pf-c-description-list__group">
+                                      <dt class="pf-c-description-list__term">
+                                          ${msg("Launch URL")}
+                                      </dt>
+                                      <dt class="pf-c-description-list__description">
+                                          ${metaLaunchUrl}
+                                      </dt>
+                                  </div>`
+                                : nothing
+                        }
+                    </dl>
+                </fieldset>
+
+                ${
+                    renderer
+                        ? html`<fieldset>
+                              <legend>${msg("Provider Details")}</legend>
+                              ${renderer(provider)}
+                          </fieldset>`
+                        : null
+                }
             </div>
         `;
     }
diff --git a/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts b/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts
index cacf3b3f1dbb..ab215652c8c7 100644
--- a/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts
@@ -11,7 +11,7 @@ import { serializeForm } from "#elements/forms/serialization";
 import { ApplicationWizardStyles } from "#admin/applications/wizard/ApplicationWizardFormStepStyles.styles";
 import {
     ApplicationTransactionValidationError,
-    type ApplicationWizardState,
+    type ApplicationWizardContext,
     ApplicationWizardStateError,
     type OneOfProvider,
 } from "#admin/applications/wizard/steps/providers/shared";
@@ -30,7 +30,7 @@ export abstract class ApplicationWizardProviderForm<
     public abstract label: string;
 
     @property({ type: Object, attribute: false })
-    public wizard!: ApplicationWizardState<P, E>;
+    public wizard!: ApplicationWizardContext<P, E>;
 
     @property({ type: Object, attribute: false })
     public errors: E = {} as E;
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts
index b0623f509a04..f8217371bc08 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts
@@ -1,5 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
-
 import { WithBrandConfig } from "#elements/mixins/branding";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -22,12 +20,10 @@ export class ApplicationWizardLdapProviderForm extends WithBrandConfig(
     label = msg("Configure LDAP Provider");
 
     renderForm(provider: LDAPProvider, errors: WizardValidationRecord) {
-        return html`
-            <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({ provider, errors, brand: this.brand })}
-            </form>
-        `;
+            </form>`;
     }
 
     render() {
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts
index 08b7e5509dee..d4a11985c2b4 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts
@@ -1,5 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
-
 import { DEFAULT_CONFIG } from "#common/api/config";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -44,7 +42,7 @@ export class ApplicationWizardOauth2ProviderForm extends ApplicationWizardProvid
         const showLogoutMethodCallback = (show: boolean) => {
             this.showLogoutMethod = show;
         };
-        return html` <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({
                     provider,
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts
index c5c35c071349..570455cd2b5a 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts
@@ -1,5 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
-
 import { WizardUpdateEvent } from "#components/ak-wizard/events";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -39,7 +37,7 @@ export class ApplicationWizardProxyProviderForm extends ApplicationWizardProvide
             this.showHttpBasic = el.checked;
         };
 
-        return html` <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({
                     provider,
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
index 91b550a181d8..2ecb4e605216 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
@@ -1,4 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
 import "#admin/common/ak-crypto-certificate-search";
 import "#admin/common/ak-flow-search/ak-flow-search";
 import "#components/ak-text-input";
@@ -23,8 +22,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
     label = msg("Configure Remote Access Provider");
 
     renderForm(provider: RACProvider) {
-        return html`
-            <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 <ak-text-input
                     name="name"
@@ -75,8 +73,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
                         </ak-form-element-horizontal>
                     </div>
                 </ak-form-group>
-            </form>
-        `;
+            </form>`;
     }
 
     render() {
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts
index 191f89ad100e..c2341019a183 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts
@@ -1,5 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
-
 import { WithBrandConfig } from "#elements/mixins/branding";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -19,7 +17,7 @@ export class ApplicationWizardRadiusProviderForm extends WithBrandConfig(
     label = msg("Configure Radius Provider");
 
     renderForm(provider: RadiusProvider, errors: WizardValidationRecord = {}) {
-        return html` <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({ provider, errors, brand: this.brand })}
             </form>`;
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts
index 20728914104b..ed14d0db6bcf 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts
@@ -1,5 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
-
 import { createFileMap } from "#elements/utils/inputs";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -30,12 +28,10 @@ export class ApplicationWizardProviderSamlMetadataForm extends ApplicationWizard
     }
 
     renderForm() {
-        return html`
-            <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm(this.wizard.provider)}
-            </form>
-        `;
+            </form>`;
     }
 
     render() {
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts
index bb0d2c757f4c..f8192b29a6ec 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts
@@ -1,4 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
 import "#elements/forms/FormGroup";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -80,7 +79,7 @@ export class ApplicationWizardProviderSamlForm extends ApplicationWizardProvider
             this.logoutMethod = target.value;
         };
 
-        return html` <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({
                     provider: this.wizard.provider,
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts
index d0ef6f219baf..d89a2adb189e 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts
@@ -1,4 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
 import "#elements/forms/FormGroup";
 
 import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm";
@@ -18,7 +17,7 @@ export class ApplicationWizardSCIMProvider extends ApplicationWizardProviderForm
     propertyMappings?: PaginatedSCIMMappingList;
 
     render() {
-        return html`<ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({
                     update: this.requestUpdate.bind(this),
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-wsfed.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-wsfed.ts
index f6676824f38c..029567de2db4 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-wsfed.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-wsfed.ts
@@ -1,4 +1,3 @@
-import "#admin/applications/wizard/ak-wizard-title";
 import "#elements/forms/FormGroup";
 
 import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js";
@@ -30,7 +29,7 @@ export class ApplicationWizardProviderWSFedForm extends ApplicationWizardProvide
             this.signingKeyType = target.selectedKeypair?.keyType ?? KeyTypeEnum.Rsa;
         };
 
-        return html` <ak-wizard-title>${this.label}</ak-wizard-title>
+        return html`<h3 class="pf-c-wizard__main-title">${this.label}</h3>
             <form id="providerform" class="pf-c-form pf-m-horizontal" slot="form">
                 ${renderForm({
                     provider: this.wizard.provider as WSFederationProvider,
diff --git a/web/src/admin/applications/wizard/steps/providers/shared.ts b/web/src/admin/applications/wizard/steps/providers/shared.ts
index 9f3ea694d028..1ccd5f274fba 100644
--- a/web/src/admin/applications/wizard/steps/providers/shared.ts
+++ b/web/src/admin/applications/wizard/steps/providers/shared.ts
@@ -67,7 +67,7 @@ export type ApplicationWizardStateError = ValidationError | ApplicationTransacti
 // configured bindings" page in the wizard. The PolicyBinding is converted into a
 // PolicyBindingRequest during the submission phase.
 
-export interface ApplicationWizardState<
+export interface ApplicationWizardContext<
     P extends OneOfProvider = OneOfProvider,
     E = ApplicationTransactionValidationError,
 > {
@@ -80,7 +80,7 @@ export interface ApplicationWizardState<
     errors: E;
 }
 
-export interface ApplicationWizardStateUpdate {
+export interface ApplicationWizardContextUpdate {
     app?: Partial<ApplicationRequest>;
     providerModel?: string;
     provider?: OneOfProvider;
diff --git a/web/src/admin/endpoints/connectors/ConnectorWizard.ts b/web/src/admin/endpoints/connectors/ConnectorWizard.ts
index 383d9e1e74a3..207169c60d27 100644
--- a/web/src/admin/endpoints/connectors/ConnectorWizard.ts
+++ b/web/src/admin/endpoints/connectors/ConnectorWizard.ts
@@ -8,92 +8,34 @@ import "#elements/wizard/Wizard";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { AKElement } from "#elements/Base";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
-import { Wizard } from "#elements/wizard/Wizard";
+import { SlottedTemplateResult } from "#elements/types";
+import { CreateWizard } from "#elements/wizard/CreateWizard";
 
 import { EndpointsApi, TypeCreate } from "@goauthentik/api";
 
-import { msg, str } from "@lit/localize";
+import { msg } from "@lit/localize";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { CSSResult, html, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
 
 @customElement("ak-endpoint-connector-wizard")
-export class EndpointConnectorWizard extends AKElement {
-    static styles: CSSResult[] = [PFButton];
-
-    @property()
-    createText = msg("Create");
+export class AKEndpointConnectorWizard extends CreateWizard {
+    #api = new EndpointsApi(DEFAULT_CONFIG);
 
-    @property({ attribute: false })
-    connectorTypes: TypeCreate[] = [];
+    public static override verboseName = msg("Endpoint Connector");
+    public static override verboseNamePlural = msg("Endpoint Connectors");
 
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    firstUpdated(): void {
-        new EndpointsApi(DEFAULT_CONFIG).endpointsConnectorsTypesList().then((types) => {
-            this.connectorTypes = types;
-        });
-    }
+    protected apiEndpoint = (requestInit?: RequestInit): Promise<TypeCreate[]> => {
+        return this.#api.endpointsConnectorsTypesList(requestInit);
+    };
 
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${["initial"]}
-                header=${msg("New connector")}
-                description=${msg("Create a new connector.")}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    .types=${this.connectorTypes}
-                    layout=${TypeCreateWizardPageLayouts.grid}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        const idx = this.wizard.steps.indexOf("initial") + 1;
-                        // Exclude all current steps starting with type-,
-                        // this happens when the user selects a type and then goes back
-                        this.wizard.steps = this.wizard.steps.filter(
-                            (step) => !step.startsWith("type-"),
-                        );
-                        this.wizard.steps.splice(
-                            idx,
-                            0,
-                            `type-${ev.detail.component}-${ev.detail.modelName}`,
-                        );
-                        this.wizard.isValid = true;
-                    }}
-                >
-                    <div slot="above-form">
-                        <p>
-                            ${msg(
-                                "Connectors are required to create devices. Depending on connector type, agents either directly talk to them or they talk to and external API to create devices.",
-                            )}
-                        </p>
-                    </div>
-                </ak-wizard-page-type-create>
-                ${this.connectorTypes.map((type) => {
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}-${type.modelName}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe(type.component)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
-            </ak-wizard>
-        `;
+    protected override renderInitialPageContent(): SlottedTemplateResult {
+        return msg(
+            "Connectors are required to create devices. Depending on connector type, agents either directly talk to them or they talk to and external API to create devices.",
+        );
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-endpoint-connector-wizard": EndpointConnectorWizard;
+        "ak-endpoint-connector-wizard": AKEndpointConnectorWizard;
     }
 }
diff --git a/web/src/admin/outposts/ServiceConnectionWizard.ts b/web/src/admin/outposts/ServiceConnectionWizard.ts
deleted file mode 100644
index aaa643b88699..000000000000
--- a/web/src/admin/outposts/ServiceConnectionWizard.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import "#admin/outposts/ServiceConnectionDockerForm";
-import "#admin/outposts/ServiceConnectionKubernetesForm";
-import "#elements/wizard/FormWizardPage";
-import "#elements/wizard/TypeCreateWizardPage";
-import "#elements/wizard/Wizard";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-
-import { AKElement } from "#elements/Base";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import type { Wizard } from "#elements/wizard/Wizard";
-
-import { OutpostsApi, TypeCreate } from "@goauthentik/api";
-
-import { msg, str } from "@lit/localize";
-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { CSSResult, html, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
-@customElement("ak-service-connection-wizard")
-export class ServiceConnectionWizard extends AKElement {
-    static styles: CSSResult[] = [PFButton];
-
-    @property()
-    createText = msg("Create");
-
-    @property({ attribute: false })
-    connectionTypes: TypeCreate[] = [];
-
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    firstUpdated(): void {
-        new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllTypesList().then((types) => {
-            this.connectionTypes = types;
-        });
-    }
-
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${["initial"]}
-                header=${msg("New outpost integration")}
-                description=${msg("Create a new outpost integration.")}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    .types=${this.connectionTypes}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        this.wizard.steps = [
-                            "initial",
-                            `type-${ev.detail.component}-${ev.detail.modelName}`,
-                        ];
-                        this.wizard.isValid = true;
-                    }}
-                >
-                </ak-wizard-page-type-create>
-                ${this.connectionTypes.map((type) => {
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}-${type.modelName}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe(type.component)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
-            </ak-wizard>
-        `;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-service-connection-wizard": ServiceConnectionWizard;
-    }
-}
diff --git a/web/src/admin/outposts/ak-service-connection-wizard.ts b/web/src/admin/outposts/ak-service-connection-wizard.ts
new file mode 100644
index 000000000000..c955f33a0684
--- /dev/null
+++ b/web/src/admin/outposts/ak-service-connection-wizard.ts
@@ -0,0 +1,32 @@
+import "#admin/outposts/ServiceConnectionDockerForm";
+import "#admin/outposts/ServiceConnectionKubernetesForm";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+
+import { OutpostsApi, TypeCreate } from "@goauthentik/api";
+
+import { msg } from "@lit/localize/init/install";
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+
+@customElement("ak-service-connection-wizard")
+export class AKServiceConnectionWizard extends CreateWizard {
+    public static override verboseName = msg("Outpost Integration");
+    public static override verboseNamePlural = msg("Outpost Integrations");
+
+    #api = new OutpostsApi(DEFAULT_CONFIG);
+
+    protected apiEndpoint = (): Promise<TypeCreate[]> => {
+        return this.#api.outpostsServiceConnectionsAllTypesList();
+    };
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-service-connection-wizard": AKServiceConnectionWizard;
+    }
+}
diff --git a/web/src/admin/policies/PolicyWizard.ts b/web/src/admin/policies/PolicyWizard.ts
deleted file mode 100644
index bd8d35813c24..000000000000
--- a/web/src/admin/policies/PolicyWizard.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import "#admin/policies/dummy/DummyPolicyForm";
-import "#admin/policies/event_matcher/EventMatcherPolicyForm";
-import "#admin/policies/expiry/ExpiryPolicyForm";
-import "#admin/policies/expression/ExpressionPolicyForm";
-import "#admin/policies/geoip/GeoIPPolicyForm";
-import "#admin/policies/password/PasswordPolicyForm";
-import "#admin/policies/reputation/ReputationPolicyForm";
-import "#admin/policies/unique_password/UniquePasswordPolicyForm";
-import "#elements/wizard/FormWizardPage";
-import "#elements/wizard/TypeCreateWizardPage";
-import "#elements/wizard/Wizard";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-
-import { AKElement } from "#elements/Base";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import { FormWizardPage } from "#elements/wizard/FormWizardPage";
-import type { Wizard } from "#elements/wizard/Wizard";
-
-import { PolicyBindingForm } from "#admin/policies/PolicyBindingForm";
-
-import { PoliciesApi, Policy, PolicyBinding, TypeCreate } from "@goauthentik/api";
-
-import { msg, str } from "@lit/localize";
-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { CSSResult, html, nothing, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
-@customElement("ak-policy-wizard")
-export class PolicyWizard extends AKElement {
-    static styles: CSSResult[] = [PFButton];
-
-    @property()
-    createText = msg("Create");
-
-    @property({ type: Boolean })
-    showBindingPage = false;
-
-    @property()
-    bindingTarget?: string;
-
-    @property({ attribute: false })
-    policyTypes: TypeCreate[] = [];
-
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    firstUpdated(): void {
-        new PoliciesApi(DEFAULT_CONFIG).policiesAllTypesList().then((types) => {
-            this.policyTypes = types;
-        });
-    }
-
-    selectListener = ({ detail }: CustomEvent<TypeCreate>) => {
-        if (!this.wizard) return;
-
-        const { component, modelName } = detail;
-        const idx = this.wizard.steps.indexOf("initial") + 1;
-
-        // Exclude all current steps starting with type-,
-        // this happens when the user selects a type and then goes back
-        this.wizard.steps = this.wizard.steps.filter((step) => !step.startsWith("type-"));
-
-        this.wizard.steps.splice(idx, 0, `type-${component}-${modelName}`);
-
-        this.wizard.isValid = true;
-    };
-
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${this.showBindingPage ? ["initial", "create-binding"] : ["initial"]}
-                header=${msg("New policy")}
-                description=${msg("Create a new policy.")}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    .types=${this.policyTypes}
-                    @select=${this.selectListener}
-                >
-                </ak-wizard-page-type-create>
-
-                ${this.policyTypes.map((type) => {
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}-${type.modelName}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe(type.component)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                ${this.showBindingPage
-                    ? html`<ak-wizard-page-form
-                          slot="create-binding"
-                          label=${msg("Create Binding")}
-                          .activePageCallback=${async (context: FormWizardPage) => {
-                              const createSlot = context.host.steps[1];
-                              const bindingForm =
-                                  context.querySelector<PolicyBindingForm>(
-                                      "ak-policy-binding-form",
-                                  );
-                              if (!bindingForm) return;
-                              bindingForm.instance = {
-                                  policy: (context.host.state[createSlot] as Policy).pk,
-                              } as PolicyBinding;
-                          }}
-                      >
-                          <ak-policy-binding-form
-                              .targetPk=${this.bindingTarget}
-                          ></ak-policy-binding-form>
-                      </ak-wizard-page-form>`
-                    : nothing}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
-            </ak-wizard>
-        `;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-policy-wizard": PolicyWizard;
-    }
-}
diff --git a/web/src/admin/policies/ak-policy-wizard.ts b/web/src/admin/policies/ak-policy-wizard.ts
new file mode 100644
index 000000000000..d5d7f720e9b1
--- /dev/null
+++ b/web/src/admin/policies/ak-policy-wizard.ts
@@ -0,0 +1,90 @@
+import "#admin/policies/dummy/DummyPolicyForm";
+import "#admin/policies/event_matcher/EventMatcherPolicyForm";
+import "#admin/policies/expiry/ExpiryPolicyForm";
+import "#admin/policies/expression/ExpressionPolicyForm";
+import "#admin/policies/geoip/GeoIPPolicyForm";
+import "#admin/policies/password/PasswordPolicyForm";
+import "#admin/policies/reputation/ReputationPolicyForm";
+import "#admin/policies/unique_password/UniquePasswordPolicyForm";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { SlottedTemplateResult } from "#elements/types";
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+import { FormWizardPage } from "#elements/wizard/FormWizardPage";
+import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
+
+import { PolicyBindingForm } from "#admin/policies/PolicyBindingForm";
+
+import { PoliciesApi, Policy, PolicyBinding, TypeCreate } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+import { html, PropertyValues } from "lit";
+import { property } from "lit/decorators.js";
+
+@customElement("ak-policy-wizard")
+export class PolicyWizard extends CreateWizard {
+    #api = new PoliciesApi(DEFAULT_CONFIG);
+
+    @property({ type: Boolean })
+    public showBindingPage = false;
+
+    @property()
+    public bindingTarget: string | null = null;
+
+    public override initialSteps = this.showBindingPage
+        ? ["initial", "create-binding"]
+        : ["initial"];
+
+    public static override verboseName = msg("Policy");
+    public static override verboseNamePlural = msg("Policies");
+
+    public override layout = TypeCreateWizardPageLayouts.list;
+
+    protected apiEndpoint = async (requestInit?: RequestInit): Promise<TypeCreate[]> => {
+        return this.#api.policiesAllTypesList(requestInit);
+    };
+
+    protected updated(changedProperties: PropertyValues<this>): void {
+        super.updated(changedProperties);
+
+        if (changedProperties.has("showBindingPage")) {
+            this.initialSteps = this.showBindingPage ? ["initial", "create-binding"] : ["initial"];
+        }
+    }
+
+    protected createBindingActivate = async (page: FormWizardPage) => {
+        const createSlot = page.host.steps[1];
+        const bindingForm = page.querySelector<PolicyBindingForm>("ak-policy-binding-form");
+
+        if (!bindingForm) return;
+
+        bindingForm.instance = {
+            policy: (page.host.state[createSlot] as Policy).pk,
+        } as PolicyBinding;
+    };
+
+    protected renderForms(): SlottedTemplateResult {
+        const bindingPage = this.showBindingPage
+            ? html`<ak-wizard-page-form
+                  slot="create-binding"
+                  headline=${msg("Create Binding")}
+                  .activePageCallback=${this.createBindingActivate}
+              >
+                  <ak-policy-binding-form .targetPk=${this.bindingTarget}></ak-policy-binding-form>
+              </ak-wizard-page-form>`
+            : null;
+
+        return [super.renderForms(), bindingPage];
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-policy-wizard": PolicyWizard;
+    }
+}
diff --git a/web/src/admin/property-mappings/PropertyMappingWizard.ts b/web/src/admin/property-mappings/PropertyMappingWizard.ts
deleted file mode 100644
index 7ee758e5c368..000000000000
--- a/web/src/admin/property-mappings/PropertyMappingWizard.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import "#admin/property-mappings/PropertyMappingNotification";
-import "#admin/property-mappings/PropertyMappingProviderGoogleWorkspaceForm";
-import "#admin/property-mappings/PropertyMappingProviderMicrosoftEntraForm";
-import "#admin/property-mappings/PropertyMappingProviderRACForm";
-import "#admin/property-mappings/PropertyMappingProviderRadiusForm";
-import "#admin/property-mappings/PropertyMappingProviderSAMLForm";
-import "#admin/property-mappings/PropertyMappingProviderSCIMForm";
-import "#admin/property-mappings/PropertyMappingProviderScopeForm";
-import "#admin/property-mappings/PropertyMappingSourceKerberosForm";
-import "#admin/property-mappings/PropertyMappingSourceLDAPForm";
-import "#admin/property-mappings/PropertyMappingSourceOAuthForm";
-import "#admin/property-mappings/PropertyMappingSourcePlexForm";
-import "#admin/property-mappings/PropertyMappingSourceSAMLForm";
-import "#admin/property-mappings/PropertyMappingSourceSCIMForm";
-import "#admin/property-mappings/PropertyMappingSourceTelegramForm";
-import "#admin/property-mappings/PropertyMappingTestForm";
-import "#elements/wizard/FormWizardPage";
-import "#elements/wizard/TypeCreateWizardPage";
-import "#elements/wizard/Wizard";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-
-import { AKElement } from "#elements/Base";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import type { Wizard } from "#elements/wizard/Wizard";
-
-import { PropertymappingsApi, TypeCreate } from "@goauthentik/api";
-
-import { msg, str } from "@lit/localize";
-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { html, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
-@customElement("ak-property-mapping-wizard")
-export class PropertyMappingWizard extends AKElement {
-    static styles = [PFButton];
-
-    @property({ attribute: false })
-    mappingTypes: TypeCreate[] = [];
-
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    async firstUpdated(): Promise<void> {
-        this.mappingTypes = await new PropertymappingsApi(
-            DEFAULT_CONFIG,
-        ).propertymappingsAllTypesList();
-    }
-
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${["initial"]}
-                header=${msg("New property mapping")}
-                description=${msg("Create a new property mapping.")}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    .types=${this.mappingTypes}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        this.wizard.steps = [
-                            "initial",
-                            `type-${ev.detail.component}-${ev.detail.modelName}`,
-                        ];
-                        this.wizard.isValid = true;
-                    }}
-                >
-                </ak-wizard-page-type-create>
-                ${this.mappingTypes.map((type) => {
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}-${type.modelName}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe(type.component)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-wizard>
-        `;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-property-mapping-wizard": PropertyMappingWizard;
-    }
-}
diff --git a/web/src/admin/property-mappings/ak-property-mapping-wizard.ts b/web/src/admin/property-mappings/ak-property-mapping-wizard.ts
new file mode 100644
index 000000000000..6158d22ff65e
--- /dev/null
+++ b/web/src/admin/property-mappings/ak-property-mapping-wizard.ts
@@ -0,0 +1,46 @@
+import "#admin/property-mappings/PropertyMappingNotification";
+import "#admin/property-mappings/PropertyMappingProviderGoogleWorkspaceForm";
+import "#admin/property-mappings/PropertyMappingProviderMicrosoftEntraForm";
+import "#admin/property-mappings/PropertyMappingProviderRACForm";
+import "#admin/property-mappings/PropertyMappingProviderRadiusForm";
+import "#admin/property-mappings/PropertyMappingProviderSAMLForm";
+import "#admin/property-mappings/PropertyMappingProviderSCIMForm";
+import "#admin/property-mappings/PropertyMappingProviderScopeForm";
+import "#admin/property-mappings/PropertyMappingSourceKerberosForm";
+import "#admin/property-mappings/PropertyMappingSourceLDAPForm";
+import "#admin/property-mappings/PropertyMappingSourceOAuthForm";
+import "#admin/property-mappings/PropertyMappingSourcePlexForm";
+import "#admin/property-mappings/PropertyMappingSourceSAMLForm";
+import "#admin/property-mappings/PropertyMappingSourceSCIMForm";
+import "#admin/property-mappings/PropertyMappingSourceTelegramForm";
+import "#admin/property-mappings/PropertyMappingTestForm";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+
+import { PropertymappingsApi, TypeCreate } from "@goauthentik/api";
+
+import { msg } from "@lit/localize/init/install";
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+
+@customElement("ak-property-mapping-wizard")
+export class AKPropertyMappingWizard extends CreateWizard {
+    #api = new PropertymappingsApi(DEFAULT_CONFIG);
+
+    protected override apiEndpoint(requestInit?: RequestInit): Promise<TypeCreate[]> {
+        return this.#api.propertymappingsAllTypesList(requestInit);
+    }
+
+    public static override verboseName = msg("Property Mapping");
+    public static override verboseNamePlural = msg("Property Mappings");
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-property-mapping-wizard": AKPropertyMappingWizard;
+    }
+}
diff --git a/web/src/admin/providers/ProviderWizard.ts b/web/src/admin/providers/ProviderWizard.ts
deleted file mode 100644
index 16220223ebea..000000000000
--- a/web/src/admin/providers/ProviderWizard.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import "#elements/LicenseNotice";
-import "#admin/providers/ldap/LDAPProviderForm";
-import "#admin/providers/oauth2/OAuth2ProviderForm";
-import "#admin/providers/proxy/ProxyProviderForm";
-import "#admin/providers/saml/SAMLProviderForm";
-import "#admin/providers/saml/SAMLProviderImportForm";
-import "#elements/wizard/FormWizardPage";
-import "#elements/wizard/TypeCreateWizardPage";
-import "#elements/wizard/Wizard";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-
-import { AKElement } from "#elements/Base";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
-import type { Wizard } from "#elements/wizard/Wizard";
-
-import { ProvidersApi, TypeCreate } from "@goauthentik/api";
-
-import { msg, str } from "@lit/localize";
-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { CSSResult, html, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
-@customElement("ak-provider-wizard")
-export class ProviderWizard extends AKElement {
-    static styles: CSSResult[] = [PFButton];
-
-    @property()
-    createText = msg("Create");
-
-    @property({ attribute: false })
-    providerTypes: TypeCreate[] = [];
-
-    @property({ attribute: false })
-    public finalHandler?: () => Promise<void>;
-
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    connectedCallback() {
-        super.connectedCallback();
-        new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((providerTypes) => {
-            this.providerTypes = providerTypes;
-        });
-    }
-
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${["initial"]}
-                header=${msg("New provider")}
-                description=${msg("Create a new provider.")}
-                .finalHandler=${this.finalHandler}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    layout=${TypeCreateWizardPageLayouts.grid}
-                    .types=${this.providerTypes}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        this.wizard.steps = ["initial", `type-${ev.detail.component}`];
-                        this.wizard.isValid = true;
-                    }}
-                >
-                </ak-wizard-page-type-create>
-                ${this.providerTypes.map((type) => {
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe(type.component)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                <button
-                    aria-label=${msg("New Provider")}
-                    aria-description="${msg("Open the wizard to create a new provider.")}"
-                    type="button"
-                    part="button trigger"
-                    slot="trigger"
-                    class="pf-c-button pf-m-primary"
-                >
-                    ${msg("Create")}
-                </button>
-            </ak-wizard>
-        `;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-provider-wizard": ProviderWizard;
-    }
-}
diff --git a/web/src/admin/providers/ak-provider-wizard.ts b/web/src/admin/providers/ak-provider-wizard.ts
new file mode 100644
index 000000000000..50389821a0c7
--- /dev/null
+++ b/web/src/admin/providers/ak-provider-wizard.ts
@@ -0,0 +1,39 @@
+import "#elements/LicenseNotice";
+import "#admin/providers/ldap/LDAPProviderForm";
+import "#admin/providers/oauth2/OAuth2ProviderForm";
+import "#admin/providers/proxy/ProxyProviderForm";
+import "#admin/providers/saml/SAMLProviderForm";
+import "#admin/providers/saml/SAMLProviderImportForm";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
+
+import { ProvidersApi, TypeCreate } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+
+@customElement("ak-provider-wizard")
+export class AKProviderWizard extends CreateWizard {
+    #api = new ProvidersApi(DEFAULT_CONFIG);
+
+    public static override verboseName = msg("Provider");
+    public static override verboseNamePlural = msg("Providers");
+
+    public override layout = TypeCreateWizardPageLayouts.grid;
+
+    protected apiEndpoint = async (requestInit?: RequestInit): Promise<TypeCreate[]> => {
+        return this.#api.providersAllTypesList(requestInit);
+    };
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-provider-wizard": AKProviderWizard;
+    }
+}
diff --git a/web/src/admin/sources/SourceWizard.ts b/web/src/admin/sources/SourceWizard.ts
deleted file mode 100644
index 1d4311ba30b2..000000000000
--- a/web/src/admin/sources/SourceWizard.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import "#admin/sources/kerberos/KerberosSourceForm";
-import "#admin/sources/ldap/LDAPSourceForm";
-import "#admin/sources/oauth/OAuthSourceForm";
-import "#admin/sources/plex/PlexSourceForm";
-import "#admin/sources/saml/SAMLSourceForm";
-import "#admin/sources/scim/SCIMSourceForm";
-import "#admin/sources/telegram/TelegramSourceForm";
-import "#elements/wizard/FormWizardPage";
-import "#elements/wizard/Wizard";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-
-import { AKElement } from "#elements/Base";
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
-import type { Wizard } from "#elements/wizard/Wizard";
-
-import { SourcesApi, TypeCreate } from "@goauthentik/api";
-
-import { msg, str } from "@lit/localize";
-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { CSSResult, html, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
-@customElement("ak-source-wizard")
-export class SourceWizard extends AKElement {
-    static styles: CSSResult[] = [PFButton];
-
-    @property({ attribute: false })
-    sourceTypes: TypeCreate[] = [];
-
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    firstUpdated(): void {
-        new SourcesApi(DEFAULT_CONFIG).sourcesAllTypesList().then((types) => {
-            this.sourceTypes = types;
-        });
-    }
-
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${["initial"]}
-                header=${msg("New source")}
-                description=${msg("Create a new source.")}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    .types=${this.sourceTypes}
-                    layout=${TypeCreateWizardPageLayouts.grid}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        this.wizard.steps = [
-                            "initial",
-                            `type-${ev.detail.component}-${ev.detail.modelName}`,
-                        ];
-                        this.wizard.isValid = true;
-                    }}
-                >
-                </ak-wizard-page-type-create>
-                ${this.sourceTypes.map((type) => {
-                    const { modelName } = type;
-                    const props = modelName.includes("oauthsource") ? { modelName } : {};
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}-${type.modelName}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe<CustomFormElementTagName>(type.component, props)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-wizard>
-        `;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-source-wizard": SourceWizard;
-    }
-}
diff --git a/web/src/admin/sources/ak-source-wizard.ts b/web/src/admin/sources/ak-source-wizard.ts
new file mode 100644
index 000000000000..9147cf79e4a6
--- /dev/null
+++ b/web/src/admin/sources/ak-source-wizard.ts
@@ -0,0 +1,50 @@
+import "#admin/sources/kerberos/KerberosSourceForm";
+import "#admin/sources/ldap/LDAPSourceForm";
+import "#admin/sources/oauth/OAuthSourceForm";
+import "#admin/sources/plex/PlexSourceForm";
+import "#admin/sources/saml/SAMLSourceForm";
+import "#admin/sources/scim/SCIMSourceForm";
+import "#admin/sources/telegram/TelegramSourceForm";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/Wizard";
+
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { LitPropertyRecord } from "#elements/types";
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
+
+import { BaseSourceForm } from "#admin/sources/BaseSourceForm";
+
+import { SourcesApi, TypeCreate } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+
+@customElement("ak-source-wizard")
+export class AKSourceWizard extends CreateWizard {
+    #api = new SourcesApi(DEFAULT_CONFIG);
+
+    public static override verboseName = msg("Source");
+    public static override verboseNamePlural = msg("Sources");
+
+    public override layout = TypeCreateWizardPageLayouts.grid;
+
+    protected apiEndpoint = async (requestInit?: RequestInit): Promise<TypeCreate[]> => {
+        return this.#api.sourcesAllTypesList(requestInit);
+    };
+
+    protected override assembleFormProps(
+        type: TypeCreate,
+    ): LitPropertyRecord<BaseSourceForm | object> {
+        const props = type.modelName.includes("oauthsource") ? { modelName: type.modelName } : {};
+
+        return props;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-source-wizard": AKSourceWizard;
+    }
+}
diff --git a/web/src/admin/stages/StageWizard.ts b/web/src/admin/stages/StageWizard.ts
deleted file mode 100644
index 61d1a3bc5d88..000000000000
--- a/web/src/admin/stages/StageWizard.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import "#admin/stages/register";
-import "#elements/LicenseNotice";
-import "#elements/wizard/FormWizardPage";
-import "#elements/wizard/TypeCreateWizardPage";
-import "#elements/wizard/Wizard";
-
-import { DEFAULT_CONFIG } from "#common/api/config";
-
-import { AKElement } from "#elements/Base";
-import { StrictUnsafe } from "#elements/utils/unsafe";
-import { FormWizardPage } from "#elements/wizard/FormWizardPage";
-import { Wizard } from "#elements/wizard/Wizard";
-
-import { StageBindingForm } from "#admin/flows/StageBindingForm";
-
-import { FlowStageBinding, Stage, StagesApi, TypeCreate } from "@goauthentik/api";
-
-import { msg, str } from "@lit/localize";
-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { CSSResult, html, nothing, TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-
-@customElement("ak-stage-wizard")
-export class StageWizard extends AKElement {
-    static styles: CSSResult[] = [PFButton];
-
-    @property()
-    createText = msg("Create");
-
-    @property({ type: Boolean })
-    showBindingPage = false;
-
-    @property()
-    bindingTarget?: string;
-
-    @property({ attribute: false })
-    stageTypes: TypeCreate[] = [];
-
-    @query("ak-wizard")
-    wizard?: Wizard;
-
-    firstUpdated(): void {
-        new StagesApi(DEFAULT_CONFIG).stagesAllTypesList().then((types) => {
-            this.stageTypes = types;
-        });
-    }
-
-    render(): TemplateResult {
-        return html`
-            <ak-wizard
-                .steps=${this.showBindingPage ? ["initial", "create-binding"] : ["initial"]}
-                header=${msg("New stage")}
-                description=${msg("Create a new stage.")}
-            >
-                <ak-wizard-page-type-create
-                    slot="initial"
-                    .types=${this.stageTypes}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        const idx = this.wizard.steps.indexOf("initial") + 1;
-                        // Exclude all current steps starting with type-,
-                        // this happens when the user selects a type and then goes back
-                        this.wizard.steps = this.wizard.steps.filter(
-                            (step) => !step.startsWith("type-"),
-                        );
-                        this.wizard.steps.splice(
-                            idx,
-                            0,
-                            `type-${ev.detail.component}-${ev.detail.modelName}`,
-                        );
-                        this.wizard.isValid = true;
-                    }}
-                >
-                </ak-wizard-page-type-create>
-                ${this.stageTypes.map((type) => {
-                    return html`
-                        <ak-wizard-page-form
-                            slot=${`type-${type.component}-${type.modelName}`}
-                            label=${msg(str`Create ${type.name}`)}
-                        >
-                            ${StrictUnsafe(type.component)}
-                        </ak-wizard-page-form>
-                    `;
-                })}
-                ${this.showBindingPage
-                    ? html`<ak-wizard-page-form
-                          slot="create-binding"
-                          label=${msg("Create Binding")}
-                          .activePageCallback=${async (context: FormWizardPage) => {
-                              const createSlot = context.host.steps[1];
-                              const bindingForm =
-                                  context.querySelector<StageBindingForm>("ak-stage-binding-form");
-                              if (!bindingForm) return;
-                              bindingForm.instance = {
-                                  stage: (context.host.state[createSlot] as Stage).pk,
-                              } as FlowStageBinding;
-                          }}
-                      >
-                          <ak-stage-binding-form
-                              .targetPk=${this.bindingTarget}
-                          ></ak-stage-binding-form>
-                      </ak-wizard-page-form>`
-                    : nothing}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
-            </ak-wizard>
-        `;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-stage-wizard": StageWizard;
-    }
-}
diff --git a/web/src/admin/stages/ak-stage-wizard.ts b/web/src/admin/stages/ak-stage-wizard.ts
new file mode 100644
index 000000000000..b67cd79fa19c
--- /dev/null
+++ b/web/src/admin/stages/ak-stage-wizard.ts
@@ -0,0 +1,84 @@
+import "#admin/stages/register";
+import "#elements/LicenseNotice";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { SlottedTemplateResult } from "#elements/types";
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+import { FormWizardPage } from "#elements/wizard/FormWizardPage";
+import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
+
+import { StageBindingForm } from "#admin/flows/StageBindingForm";
+
+import { FlowStageBinding, Stage, StagesApi, TypeCreate } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
+import { html, PropertyValues } from "lit";
+import { property } from "lit/decorators.js";
+
+@customElement("ak-stage-wizard")
+export class AKStageWizard extends CreateWizard {
+    #api = new StagesApi(DEFAULT_CONFIG);
+
+    @property({ type: Boolean })
+    public showBindingPage = false;
+
+    @property()
+    public bindingTarget?: string;
+
+    public override initialSteps = this.showBindingPage
+        ? ["initial", "create-binding"]
+        : ["initial"];
+
+    public static override verboseName = msg("Stage");
+    public static override verboseNamePlural = msg("Stages");
+
+    public override layout = TypeCreateWizardPageLayouts.list;
+
+    protected apiEndpoint = async (requestInit?: RequestInit): Promise<TypeCreate[]> => {
+        return this.#api.stagesAllTypesList(requestInit);
+    };
+
+    protected updated(changedProperties: PropertyValues<this>): void {
+        super.updated(changedProperties);
+
+        if (changedProperties.has("showBindingPage")) {
+            this.initialSteps = this.showBindingPage ? ["initial", "create-binding"] : ["initial"];
+        }
+    }
+
+    protected createBindingActivate = async (context: FormWizardPage) => {
+        const createSlot = context.host.steps[1];
+        const bindingForm = context.querySelector<StageBindingForm>("ak-stage-binding-form");
+
+        if (!bindingForm) return;
+
+        bindingForm.instance = {
+            stage: (context.host.state[createSlot] as Stage).pk,
+        } as FlowStageBinding;
+    };
+
+    protected renderForms(): SlottedTemplateResult {
+        const bindingPage = this.showBindingPage
+            ? html`<ak-wizard-page-form
+                  slot="create-binding"
+                  headline=${msg("Create Binding")}
+                  .activePageCallback=${this.createBindingActivate}
+              >
+                  <ak-stage-binding-form .targetPk=${this.bindingTarget}></ak-stage-binding-form>
+              </ak-wizard-page-form>`
+            : null;
+
+        return [super.renderForms(), bindingPage];
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-stage-wizard": AKStageWizard;
+    }
+}
diff --git a/web/src/admin/users/ak-user-wizard.ts b/web/src/admin/users/ak-user-wizard.ts
new file mode 100644
index 000000000000..0d62239d64e7
--- /dev/null
+++ b/web/src/admin/users/ak-user-wizard.ts
@@ -0,0 +1,176 @@
+import "#admin/users/ServiceAccountForm";
+import "#admin/users/UserForm";
+import "#components/ak-hidden-text-input";
+import "#components/ak-text-input";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+import { CreateWizard } from "#elements/wizard/CreateWizard";
+import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage";
+import { WizardPage } from "#elements/wizard/WizardPage";
+
+import { UserForm } from "#admin/users/UserForm";
+
+import { TypeCreate, UserServiceAccountResponse, UserTypeEnum } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { CSSResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+
+const SERVICE_ACCOUNT_FORM_SLOT =
+    `type-ak-user-service-account-form-${UserTypeEnum.ServiceAccount}` as const;
+const SERVICE_ACCOUNT_RESULT_SLOT = `${SERVICE_ACCOUNT_FORM_SLOT}-result` as const;
+
+const DEFAULT_USER_TYPES: TypeCreate[] = [
+    {
+        component: "ak-user-form",
+        modelName: UserTypeEnum.Internal,
+        name: msg("Internal User"),
+        description: msg("Company employees with access to the full enterprise feature set."),
+    },
+    {
+        component: "ak-user-form",
+        modelName: UserTypeEnum.External,
+        name: msg("External User"),
+        description: msg(
+            "External consultants or B2C customers without access to enterprise features.",
+        ),
+    },
+    {
+        component: "ak-user-service-account-form",
+        modelName: UserTypeEnum.ServiceAccount,
+        name: msg("Service Account"),
+        description: msg("Machine-to-machine authentication or other automations."),
+    },
+];
+
+export interface UserWizardState {
+    [SERVICE_ACCOUNT_FORM_SLOT]?: UserServiceAccountResponse;
+}
+
+@customElement("ak-user-service-account-result-page")
+export class ServiceAccountResultPage extends WizardPage<UserWizardState> {
+    public static styles: CSSResult[] = [PFForm, PFFormControl];
+
+    public override headline = msg("Review Credentials");
+
+    @state()
+    protected result: UserServiceAccountResponse | null = null;
+
+    public override activeCallback = async (): Promise<void> => {
+        const result = this.host.state[SERVICE_ACCOUNT_FORM_SLOT];
+
+        if (!result) {
+            throw new TypeError("Expected service account creation result in wizard state.");
+        }
+
+        this.result = result;
+
+        this.host.valid = true;
+        this.host.cancelable = false;
+    };
+
+    public override nextCallback = async (): Promise<boolean> => true;
+
+    protected override render(): SlottedTemplateResult {
+        if (!this.result) {
+            return null;
+        }
+
+        const { username, token } = this.result;
+
+        return html`<h3 class="pf-c-wizard__main-title">${msg("Review Credentials")}</h3>
+            <h4 class="pf-c-title pf-m-md">
+                ${msg(
+                    "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page.",
+                )}
+            </h4>
+            <form class="pf-c-form pf-m-horizontal">
+                <ak-text-input
+                    label=${msg("Username")}
+                    value=${username}
+                    input-hint="code"
+                    readonly
+                ></ak-text-input>
+                <ak-hidden-text-input
+                    label=${msg("Password")}
+                    value="${token}"
+                    input-hint="code"
+                    readonly
+                    .help=${msg(
+                        "Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.",
+                    )}
+                ></ak-hidden-text-input>
+            </form>`;
+    }
+}
+
+@customElement("ak-user-wizard")
+export class AKUserWizard extends CreateWizard {
+    /**
+     * Default path to assign to new users created via the wizard.
+     */
+    @property({ type: String, attribute: "default-path" })
+    public defaultPath: string = "users";
+
+    protected apiEndpoint(): Promise<TypeCreate[]> {
+        return Promise.resolve(DEFAULT_USER_TYPES);
+    }
+
+    public static override verboseName = msg("User");
+    public static override verboseNamePlural = msg("Users");
+    public override layout = TypeCreateWizardPageLayouts.list;
+
+    protected override selectSteps(type: TypeCreate, currentSteps: string[]): string[] {
+        const { modelName } = type;
+        const serviceAccount = modelName === UserTypeEnum.ServiceAccount;
+
+        if (!serviceAccount) {
+            return super.selectSteps(type, currentSteps);
+        }
+
+        return [
+            // ---
+            SERVICE_ACCOUNT_FORM_SLOT,
+            SERVICE_ACCOUNT_RESULT_SLOT,
+        ];
+    }
+
+    protected override renderWizardStep(type: TypeCreate): SlottedTemplateResult {
+        if (type.modelName === UserTypeEnum.ServiceAccount) {
+            return [
+                super.renderWizardStep(type),
+                html`<ak-user-service-account-result-page
+                    slot=${SERVICE_ACCOUNT_RESULT_SLOT}
+                ></ak-user-service-account-result-page>`,
+            ];
+        }
+
+        return super.renderWizardStep(type);
+    }
+
+    protected override assembleFormProps(type: TypeCreate): LitPropertyRecord<UserForm | object> {
+        if (type.modelName === UserTypeEnum.ServiceAccount) {
+            return {};
+        }
+
+        const props: LitPropertyRecord<UserForm> = {
+            userType: type.modelName as UserTypeEnum,
+            defaultPath: this.defaultPath,
+        };
+
+        return props;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-user-wizard": AKUserWizard;
+        "ak-user-service-account-result-page": ServiceAccountResultPage;
+    }
+}
diff --git a/web/src/admin/users/recovery.ts b/web/src/admin/users/recovery.ts
new file mode 100644
index 000000000000..548cba4477df
--- /dev/null
+++ b/web/src/admin/users/recovery.ts
@@ -0,0 +1,65 @@
+import { modalInvoker } from "#elements/dialogs";
+import { LitFC } from "#elements/types";
+
+import { UserPasswordForm } from "#admin/users/UserPasswordForm";
+import { UserRecoveryLinkForm } from "#admin/users/UserRecoveryLinkForm";
+import { UserResetEmailForm } from "#admin/users/UserResetEmailForm";
+
+import { User } from "@goauthentik/api";
+
+import { msg, str } from "@lit/localize";
+import { html } from "lit";
+
+export interface RecoveryButtonsProps {
+    user: User;
+    brandHasRecoveryFlow: boolean;
+    buttonClasses?: string;
+}
+
+export const RecoveryButtons: LitFC<RecoveryButtonsProps> = ({
+    user,
+    brandHasRecoveryFlow,
+    buttonClasses,
+}: RecoveryButtonsProps) => {
+    const recoveryModals = brandHasRecoveryFlow
+        ? [
+              html`<button
+                  class="pf-c-button pf-m-secondary ${buttonClasses || ""}"
+                  ${modalInvoker(UserRecoveryLinkForm, { user })}
+              >
+                  ${msg("Create recovery link")}
+              </button>`,
+
+              user.email
+                  ? html`<button
+                        class="pf-c-button pf-m-secondary ${buttonClasses || ""}"
+                        ${modalInvoker(UserResetEmailForm, { user })}
+                    >
+                        ${msg("Email recovery link")}
+                    </button>`
+                  : html`<p>
+                        ${msg("To email a recovery link, set an email address for this user.")}
+                    </p>`,
+          ]
+        : [
+              html`<p>
+                  ${msg("To create a recovery link, set a recovery flow for the current brand.")}
+              </p>`,
+          ];
+
+    return [
+        html`<button
+            class="pf-c-button pf-m-secondary ${buttonClasses || ""}"
+            type="button"
+            ${modalInvoker(UserPasswordForm, {
+                headline: msg(str`Update ${user.name || user.username}'s password`),
+                username: user.username,
+                email: user.email,
+                instancePk: user.pk,
+            })}
+        >
+            ${msg("Set password")}
+        </button>`,
+        ...recoveryModals,
+    ];
+};
diff --git a/web/src/components/ak-wizard/WizardStep.ts b/web/src/components/ak-wizard/WizardStep.ts
index db78b2c43c67..23f62d0d9159 100644
--- a/web/src/components/ak-wizard/WizardStep.ts
+++ b/web/src/components/ak-wizard/WizardStep.ts
@@ -1,7 +1,8 @@
-import { NavigationEventInit, WizardCloseEvent, WizardNavigationEvent } from "./events.js";
+import { NavigationEventInit, WizardNavigationEvent } from "./events.js";
 import {
     ButtonKindClassnameRecord,
     ButtonKindLabelRecord,
+    DialogDismissalKinds,
     isNavigable,
     type WizardButton,
     WizardStepLabel,
@@ -10,10 +11,10 @@ import {
 import { wizardStepContext } from "./WizardContexts.js";
 
 import { AKElement } from "#elements/Base";
-import { bound } from "#elements/decorators/bound";
 import { SlottedTemplateResult } from "#elements/types";
+import { findNearestDialog } from "#elements/utils/render-roots";
 
-import { ConsoleLogger, Logger } from "#logger/browser";
+import { ConsoleLogger } from "#logger/browser";
 
 import { match, P } from "ts-pattern";
 
@@ -44,24 +45,24 @@ import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css";
  * Events
  *
  * @fires WizardNavigationEvent - request ak-wizard-steps to move to another step
- * @fires WizardCloseEvent - request parent container (Wizard) to close the wizard
  */
-
 export abstract class WizardStep extends AKElement {
-    // These additions are necessary because we don't want to inherit *all* of the modal box
-    // modifiers, just the ones related to managing the height of the display box.
     public static styles = [
         PFWizard,
         PFContent,
         PFTitle,
         css`
-            .ak-wizard-box {
-                height: 75%;
-                height: 75vh;
+            :host {
+                display: contents;
+            }
+
+            .pf-c-wizard__main-body {
                 display: flex;
-                flex-direction: column;
-                position: relative;
-                z-index: 500;
+                flex-flow: row wrap;
+
+                & > * {
+                    flex: 1 1 auto;
+                }
             }
         `,
     ];
@@ -69,11 +70,14 @@ export abstract class WizardStep extends AKElement {
     /**
      * A prefixed logger for this component.
      */
-    protected logger: Logger;
+    protected logger = ConsoleLogger.prefix(this.localName);
 
     @property({ type: Boolean, attribute: true, reflect: true })
     public enabled = false;
 
+    @property({ attribute: false })
+    public dialog: HTMLDialogElement | null = null;
+
     /**
      * The name. Should match the slot. Reflected if not present.
      */
@@ -81,7 +85,7 @@ export abstract class WizardStep extends AKElement {
     public name?: string;
 
     @consume({ context: wizardStepContext, subscribe: true })
-    protected wizardStepState: WizardStepState = { currentStep: undefined, stepLabels: [] };
+    protected wizardStepState: WizardStepState = { currentStep: null, stepLabels: [] };
 
     /**
      * What appears in the titlebar of the Wizard. Usually, but not necessarily, the same for all
@@ -140,9 +144,7 @@ export abstract class WizardStep extends AKElement {
     // Override this and provide the buttons for this step. The button type is documented in the
     // [types](./types.ts) file, but in short, there are four "kinds": "next", "back", "cancel", and
     // "close."
-    public get buttons(): WizardButton[] {
-        return [];
-    }
+    protected abstract buttons: WizardButton[];
 
     /**
      * Render the main content of the step. This is where the form or other content for the step should be rendered.
@@ -154,35 +156,30 @@ export abstract class WizardStep extends AKElement {
     // Override this to intercept 'next' and 'back' events, perform validation, and include enabling
     // before allowing navigation to continue.
     public handleButton(button: WizardButton, details?: NavigationEventInit) {
-        if (["close", "cancel"].includes(button.kind)) {
-            this.dispatchEvent(new WizardCloseEvent());
-            return;
+        if (DialogDismissalKinds.has(button.kind)) {
+            return this.requestClose(button.kind);
         }
 
         if (isNavigable(button)) {
-            this.dispatchEvent(new WizardNavigationEvent(button.destination, details));
-            return;
+            return this.dispatchEvent(new WizardNavigationEvent(details, button.destination));
         }
 
         throw new Error(`Incoherent button passed: ${JSON.stringify(button, null, 2)}`);
     }
 
-    public handleEnabling(details: NavigationEventInit) {
-        this.dispatchEvent(new WizardNavigationEvent(undefined, details));
+    public dispatchNavigationEvent(details: NavigationEventInit) {
+        this.dispatchEvent(new WizardNavigationEvent(details));
     }
 
     //#endregion
 
     //#region Lifecycle
 
-    public constructor() {
-        super();
-        this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase());
-    }
-
     public override connectedCallback() {
         super.connectedCallback();
 
+        this.dialog ??= findNearestDialog(this);
+
         if (!this.name) {
             const name = this.getAttribute("slot");
 
@@ -196,9 +193,8 @@ export abstract class WizardStep extends AKElement {
 
     //#endregion
 
-    @bound
-    protected onWizardNavigationEvent(ev: Event, button: WizardButton) {
-        ev.stopPropagation();
+    protected navigateWizardStep(button: WizardButton, event?: Event) {
+        event?.stopPropagation();
 
         if (!isNavigable(button)) {
             throw new Error("Non-navigable button sent to handleNavigationEvent");
@@ -208,14 +204,17 @@ export abstract class WizardStep extends AKElement {
             return;
         }
 
-        this.handleButton(button);
+        return this.handleButton(button);
     }
 
-    @bound
-    protected onWizardCloseEvent(ev: Event) {
-        ev.stopPropagation();
-        this.dispatchEvent(new WizardCloseEvent());
-    }
+    public requestClose = (returnValue?: string) => {
+        if (!this.dialog) {
+            this.logger.warn("Skipping close request: No dialog found for wizard.");
+            return;
+        }
+
+        this.dialog.requestClose(returnValue);
+    };
 
     protected getButtonLabel(button: WizardButton): SlottedTemplateResult {
         return button.label ?? ButtonKindLabelRecord[button.kind]();
@@ -230,70 +229,64 @@ export abstract class WizardStep extends AKElement {
 
     //#region Rendering
 
-    @bound
     protected renderCloseButton(button: WizardButton) {
         return html`<div class="pf-c-wizard__footer-cancel">
             <button
                 data-test-id="wizard-navigation-abort"
                 class=${classMap(this.getButtonClasses(button))}
                 type="button"
-                @click=${this.onWizardCloseEvent}
+                @click=${() => this.requestClose("cancel")}
             >
                 ${this.getButtonLabel(button)}
             </button>
         </div>`;
     }
 
-    @bound
     protected renderDisabledButton(button: WizardButton) {
         return html`<button class=${classMap(this.getButtonClasses(button))} type="button" disabled>
             ${this.getButtonLabel(button)}
         </button>`;
     }
 
-    @bound
     protected renderNavigableButton(button: WizardButton) {
         return html`<button
             class=${classMap(this.getButtonClasses(button))}
             type="button"
-            @click=${(ev: Event) => this.onWizardNavigationEvent(ev, button)}
+            @click=${this.navigateWizardStep.bind(this, button)}
             data-ouid-button-kind="wizard-${button.kind}"
         >
             ${this.getButtonLabel(button)}
         </button>`;
     }
 
-    @bound
-    protected renderButton(button: WizardButton) {
+    protected renderButton = (button: WizardButton) => {
         return match(button)
             .with({ kind: P.union("close", "cancel") }, () => this.renderCloseButton(button))
             .with({ destination: P.string }, () => this.renderNavigableButton(button))
             .otherwise(() => {
                 throw new Error("Button type is not close, disabled, or navigable?");
             });
-    }
+    };
 
     protected renderHeaderCancelIcon() {
         return html`<button
             class="pf-c-button pf-m-plain pf-c-wizard__close"
             type="button"
             aria-label="${msg("Close")}"
-            @click=${this.onWizardCloseEvent}
+            @click=${() => this.requestClose("cancel")}
         >
             <i class="fas fa-times" aria-hidden="true"></i>
         </button>`;
     }
 
-    @bound
-    protected renderSidebarStep(step: WizardStepLabel) {
+    protected renderSidebarStep = (step: WizardStepLabel) => {
         const buttonClasses = {
             "pf-c-wizard__nav-link": true,
             "pf-m-disabled": !step.enabled,
             "pf-m-current": step.id === this.wizardStepState.currentStep,
         };
 
-        return html`
-                <li class="pf-c-wizard__nav-item">
+        return html`<li class="pf-c-wizard__nav-item">
                     <button
                         class=${classMap(buttonClasses)}
                         ?disabled=${!step.enabled}
@@ -305,44 +298,46 @@ export abstract class WizardStep extends AKElement {
                 </li>
             </div>
         `;
-    }
+    };
 
     protected override render() {
         if (this.wizardStepState.currentStep !== this.getAttribute("slot")) {
             return nothing;
         }
 
-        return html`<div class="pf-c-modal-box ak-wizard-box">
-            <div class="pf-c-wizard">
-                <header class="pf-c-wizard__header" data-ouid-component-id="wizard-header">
-                    ${this.canCancel ? this.renderHeaderCancelIcon() : nothing}
-                    <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title" data-test-id="wizard-title">
-                        ${this.wizardTitle}
-                    </h1>
-                    <p class="pf-c-wizard__description">${this.wizardDescription}</p>
-                </header>
-
-                <div class="pf-c-wizard__outer-wrap">
-                    <div class="pf-c-wizard__inner-wrap">
-                        <aside
-                            class="pf-c-wizard__nav"
-                            role="group"
-                            aria-label="${msg("Wizard steps")}"
-                        >
-                            <ol class="pf-c-wizard__nav-list">
-                                ${map(this.wizardStepState.stepLabels, this.renderSidebarStep)}
-                            </ol>
-                        </aside>
-                        <main class="pf-c-wizard__main">
-                            <div id="main-content" class="pf-c-wizard__main-body">
-                                ${this.renderMain()}
-                            </div>
-                        </main>
-                    </div>
-                    <nav class="pf-c-wizard__footer" aria-label="${msg("Wizard navigation")}">
-                        ${this.buttons.map(this.renderButton)}
-                    </nav>
+        return html`<div class="pf-c-wizard">
+            <header class="pf-c-wizard__header" data-ouid-component-id="wizard-header">
+                ${this.canCancel ? this.renderHeaderCancelIcon() : nothing}
+                <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title" data-test-id="wizard-title">
+                    ${this.wizardTitle}
+                </h1>
+                <p class="pf-c-wizard__description">${this.wizardDescription}</p>
+            </header>
+
+            <div class="pf-c-wizard__outer-wrap">
+                <div class="pf-c-wizard__inner-wrap">
+                    <aside
+                        class="pf-c-wizard__nav"
+                        role="group"
+                        aria-label="${msg("Wizard steps")}"
+                    >
+                        <ol class="pf-c-wizard__nav-list">
+                            ${map(this.wizardStepState.stepLabels, this.renderSidebarStep)}
+                        </ol>
+                    </aside>
+                    <main
+                        part="wizard-main"
+                        class="pf-c-wizard__main ak-m-thin-scrollbar"
+                        aria-label=${msg("Wizard content")}
+                    >
+                        <div id="main-content" class="pf-c-wizard__main-body">
+                            ${this.renderMain()}
+                        </div>
+                    </main>
                 </div>
+                <nav class="pf-c-wizard__footer" aria-label="${msg("Wizard navigation")}">
+                    ${this.buttons.map(this.renderButton)}
+                </nav>
             </div>
         </div>`;
     }
diff --git a/web/src/components/ak-wizard/ak-wizard-steps.ts b/web/src/components/ak-wizard/ak-wizard-steps.ts
index 9bb3b2a7839b..285d5643d915 100644
--- a/web/src/components/ak-wizard/ak-wizard-steps.ts
+++ b/web/src/components/ak-wizard/ak-wizard-steps.ts
@@ -1,15 +1,19 @@
 import { NavigationEventInit, WizardNavigationEvent } from "./events.js";
-import { WizardStepLabel, WizardStepState } from "./shared.js";
+import { WizardStepLabel } from "./shared.js";
 import { wizardStepContext } from "./WizardContexts.js";
 import { type WizardStep } from "./WizardStep.js";
 
 import { AKElement } from "#elements/Base";
-import { bound } from "#elements/decorators/bound";
+import { listen } from "#elements/decorators/listen";
 
-import { Context, ContextProvider } from "@lit/context";
+import { ContextProvider } from "@lit/context";
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
+const asArr = (v?: string[] | string) => {
+    return typeof v === "undefined" ? [] : Array.isArray(v) ? v : [v];
+};
+
 /**
  * @class WizardStepsManager
  * @component ak-wizard-Steps
@@ -22,52 +26,46 @@ import { customElement, property } from "lit/decorators.js";
  * using this class changes them.
  *
  */
-
 @customElement("ak-wizard-steps")
 export class WizardStepsManager extends AKElement {
     public static styles = [
         css`
             :host {
-                display: block;
+                display: contents;
             }
         `,
     ];
 
     @property({ type: String, attribute: true })
-    public currentStep?: string;
+    public currentStep: string | null = null;
 
-    protected wizardStepContext!: ContextProvider<Context<symbol, WizardStepState>>;
+    protected slotMap: ReadonlyMap<string, WizardStep> = new Map();
+    protected wizardStepContext = new ContextProvider(this, {
+        context: wizardStepContext,
+        initialValue: {
+            currentStep: null,
+            stepLabels: [],
+        },
+    });
 
-    protected slots: WizardStep[] = [];
+    protected refreshSlots() {
+        const nextSlots = new Map<string, WizardStep>();
 
-    constructor() {
-        super();
+        for (const slot of Array.from(this.querySelectorAll<WizardStep>("[slot]"))) {
+            const name = slot.getAttribute("slot") ?? "";
 
-        this.wizardStepContext = new ContextProvider(this, {
-            context: wizardStepContext,
-            initialValue: {
-                currentStep: undefined,
-                stepLabels: [],
-            },
-        });
-        this.addEventListener(WizardNavigationEvent.eventName, this.onNavigation);
-        this.addEventListener("slotchange", this.onSlotchange);
-    }
-
-    protected refreshSlots() {
-        this.slots = Array.from(this.querySelectorAll("[slot]")) as WizardStep[];
-    }
+            if (nextSlots.has(name)) {
+                throw new Error(`Duplicate wizard step slot name detected: ${name}`);
+            }
 
-    protected findSlot(name?: string) {
-        const target = this.slots.find((slot) => slot.slot === name);
-        if (!target) {
-            throw new Error(`Request for wizard panel that does not exist: ${name}`);
+            nextSlots.set(name, slot);
         }
-        return target;
+
+        this.slotMap = nextSlots;
     }
 
     protected get stepLabels(): WizardStepLabel[] {
-        return this.slots
+        return Array.from(this.slotMap.values())
             .filter((slot) => !slot.hide)
             .map((slot) => ({
                 label: slot.label,
@@ -89,17 +87,22 @@ export class WizardStepsManager extends AKElement {
         this.refreshSlots();
         this.refreshStepLabels();
 
-        if (!this.currentStep && this.slots.length > 0) {
-            const currentStep = this.slots[0].getAttribute("slot");
-            if (!currentStep) {
-                throw new Error("All steps managed by this component must have a slot definition.");
+        if (!this.currentStep) {
+            const [firstEntry] = this.slotMap;
+
+            if (!firstEntry) {
+                throw new Error(
+                    "No current step set on wizard steps manager, and no steps found in slots.",
+                );
             }
 
+            const [currentStep] = firstEntry;
+
             this.currentStep = currentStep;
 
             this.wizardStepContext.setValue({
                 stepLabels: this.stepLabels,
-                currentStep: currentStep,
+                currentStep,
             });
         }
     }
@@ -108,13 +111,25 @@ export class WizardStepsManager extends AKElement {
         this.refreshStepLabels();
     }
 
-    @bound
-    protected onSlotchange(ev: Event) {
-        ev.stopPropagation();
+    protected findSlot(name: string | null): WizardStep {
+        const slot = this.slotMap.get(name ?? "");
+
+        if (!slot) {
+            throw new Error(`Could not find step with slot name ${name}`);
+        }
+
+        return slot;
+    }
+
+    protected refresh = (event: Event) => {
+        event.stopPropagation();
+
         this.refreshSlots();
+
         this.findSlot(this.currentStep);
+
         this.refreshStepLabels();
-    }
+    };
 
     /**
      * This event sequence handles the following possibilities:
@@ -127,30 +142,32 @@ export class WizardStepsManager extends AKElement {
      *   unexpected.  None of the data will have been lost.
      */
     protected updateStepAvailability(details: NavigationEventInit) {
-        const asArr = (v?: string[] | string) =>
-            v === undefined ? [] : Array.isArray(v) ? v : [v];
         const enabled = asArr(details.enable);
+
         enabled.forEach((name) => {
             this.findSlot(name).enabled = true;
         });
-        if (details.disabled !== undefined) {
+
+        if (details.disabled) {
             const disabled = asArr(details.disabled);
-            this.slots.forEach((slot) => {
+            this.slotMap.forEach((slot) => {
                 slot.enabled = !disabled.includes(slot.slot);
             });
         }
-        if (details.hidden !== undefined) {
+
+        if (details.hidden) {
             const hidden = asArr(details.hidden);
-            this.slots.forEach((slot) => {
+            this.slotMap.forEach((slot) => {
                 slot.hide = hidden.includes(slot.slot);
             });
         }
     }
 
-    @bound
-    protected onNavigation(ev: WizardNavigationEvent) {
-        ev.stopPropagation();
-        const { destination, details } = ev;
+    @listen(WizardNavigationEvent)
+    protected synchronizeContext = (event: WizardNavigationEvent) => {
+        event.stopPropagation();
+
+        const { destination, details } = event;
 
         if (details) {
             this.updateStepAvailability(details);
@@ -160,7 +177,7 @@ export class WizardStepsManager extends AKElement {
             return;
         }
 
-        const target = this.slots.find((slot) => slot.slot === destination);
+        const target = this.slotMap.get(destination);
 
         if (!target) {
             throw new Error(`Attempted to navigate to unknown step: ${destination}`);
@@ -175,11 +192,12 @@ export class WizardStepsManager extends AKElement {
         }
 
         this.currentStep = target.slot;
+
         this.wizardStepContext.setValue({
             stepLabels: this.stepLabels,
             currentStep: target.slot,
         });
-    }
+    };
 
     protected override render() {
         return this.currentStep ? html`<slot name=${this.currentStep}></slot>` : nothing;
diff --git a/web/src/components/ak-wizard/events.ts b/web/src/components/ak-wizard/events.ts
index 48ceb4be9c25..bfb0d923bb67 100644
--- a/web/src/components/ak-wizard/events.ts
+++ b/web/src/components/ak-wizard/events.ts
@@ -13,13 +13,13 @@ export interface NavigationEventInit {
 export class WizardNavigationEvent<D extends string = string> extends Event {
     static readonly eventName = "ak-wizard-navigation";
 
-    public readonly destination?: D;
+    public readonly destination: D | null;
     public readonly details?: NavigationEventInit;
 
-    constructor(destination?: D, init?: NavigationEventInit) {
+    constructor(init?: NavigationEventInit | null, destination: D | null = null) {
         super(WizardNavigationEvent.eventName, { bubbles: true, composed: true });
         this.destination = destination;
-        this.details = init;
+        this.details = init ?? {};
     }
 
     /**
@@ -33,7 +33,7 @@ export class WizardNavigationEvent<D extends string = string> extends Event {
         const wizardNavigationListener = (event?: Event) => {
             event?.preventDefault?.();
 
-            return target.dispatchEvent(new this(destination, init));
+            return target.dispatchEvent(new this(init, destination));
         };
 
         return wizardNavigationListener;
diff --git a/web/src/components/ak-wizard/shared.ts b/web/src/components/ak-wizard/shared.ts
index acb52745824a..b0102ee30c69 100644
--- a/web/src/components/ak-wizard/shared.ts
+++ b/web/src/components/ak-wizard/shared.ts
@@ -1,15 +1,17 @@
 import { SlottedTemplateResult } from "#elements/types";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { html } from "lit-html";
 
-export type EnabledWizardButton =
+export type WizardButton =
     | { kind: "back"; label?: string; destination: string }
     | { kind: "cancel"; label?: string }
     | { kind: "close"; label?: string }
-    | { kind: "next"; label?: string; destination: string };
+    | { kind: "next"; label?: string; destination: string }
+    | { kind: "create"; label?: string; destination: string }
+    | { kind: "finish"; label?: string; destination: string };
 
-export type WizardButton = EnabledWizardButton;
+export const DialogDismissalKinds: ReadonlySet<ButtonKind> = new Set(["close", "cancel"]);
 
 export type NavigableButton = Extract<WizardButton, { destination: string }>;
 
@@ -22,7 +24,7 @@ export interface WizardStepLabel {
 }
 
 export type WizardStepState = {
-    currentStep?: string;
+    currentStep: string | null;
     stepLabels: WizardStepLabel[];
 };
 
@@ -31,6 +33,8 @@ export const isNavigable = (b: WizardButton): b is NavigableButton =>
 
 export const ButtonKindClassnameRecord = {
     next: "pf-m-primary",
+    create: "pf-m-primary",
+    finish: "pf-m-primary",
     back: "pf-m-secondary",
     close: "pf-m-link",
     cancel: "pf-m-plain",
@@ -43,12 +47,33 @@ export const ButtonKindLabelRecord = {
                 <i class="fas fa-arrow-right" aria-hidden="true"></i>
             </span>`;
     },
+    create: (verboseName?: string) => {
+        const label = verboseName
+            ? msg(str`Create ${verboseName}`, {
+                  id: "form.create-submit",
+              })
+            : msg("Create", {
+                  id: "form.create-submit-no-entity",
+              });
+
+        return html`${label}
+            <span class="pf-c-button__icon pf-m-end">
+                <i class="fas fa-check" aria-hidden="true"></i>
+            </span>`;
+    },
+    finish: () => {
+        return html`${msg("Finish")}
+            <span class="pf-c-button__icon pf-m-end">
+                <i class="fas fa-check" aria-hidden="true"></i>
+            </span>`;
+    },
     back: () => {
         return html`<span class="pf-c-button__icon pf-m-start">
                 <i class="fas fa-arrow-left" aria-hidden="true"></i>
             </span>
             ${msg("Back")}`;
     },
+
     cancel: () => msg("Cancel"),
     close: () => msg("Close"),
-} as const satisfies Record<ButtonKind, () => SlottedTemplateResult>;
+} as const satisfies Record<ButtonKind, (verboseName?: string) => SlottedTemplateResult>;
diff --git a/web/src/elements/wizard/ActionWizardPage.ts b/web/src/elements/wizard/ActionWizardPage.ts
index 4afb085c32b9..00cc3361a6e1 100644
--- a/web/src/elements/wizard/ActionWizardPage.ts
+++ b/web/src/elements/wizard/ActionWizardPage.ts
@@ -45,15 +45,15 @@ export class ActionWizardPage extends WizardPage {
         }));
 
         this.host.canBack = false;
-        this.host.canCancel = false;
+        this.host.cancelable = false;
 
         await this.run();
 
         // Ensure wizard is closable, even when run() failed
-        this.host.isValid = true;
+        this.host.valid = true;
     };
 
-    public label = msg("Apply changes");
+    public headline = msg("Apply changes");
 
     async run(): Promise<void> {
         this.currentStep = this.states[0];
@@ -86,7 +86,7 @@ export class ActionWizardPage extends WizardPage {
             }
         }
 
-        this.host.isValid = true;
+        this.host.valid = true;
 
         this.dispatchEvent(
             new CustomEvent(EVENT_REFRESH, {
diff --git a/web/src/elements/wizard/CreateWizard.ts b/web/src/elements/wizard/CreateWizard.ts
new file mode 100644
index 000000000000..5d384bbce63c
--- /dev/null
+++ b/web/src/elements/wizard/CreateWizard.ts
@@ -0,0 +1,344 @@
+import "#elements/LicenseNotice";
+import "#admin/endpoints/connectors/agent/AgentConnectorForm";
+import "#admin/endpoints/connectors/fleet/FleetConnectorForm";
+import "#admin/endpoints/connectors/gdtc/GoogleChromeConnectorForm";
+import "#elements/wizard/FormWizardPage";
+import "#elements/wizard/TypeCreateWizardPage";
+import "#elements/wizard/Wizard";
+
+import { AKElement } from "#elements/Base";
+import {
+    DialogInit,
+    isTransclusionParentElement,
+    modalInvoker,
+    ModalInvokerDirectiveResult,
+    renderModal,
+} from "#elements/dialogs";
+import { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
+import { ifPresent } from "#elements/utils/attributes";
+import { StrictUnsafe } from "#elements/utils/unsafe";
+import {
+    TypeCreateWizardPage,
+    TypeCreateWizardPageLayouts,
+} from "#elements/wizard/TypeCreateWizardPage";
+import { formatTypeCreateStepID } from "#elements/wizard/utils";
+import { AKWizard } from "#elements/wizard/Wizard";
+
+import { TypeCreate } from "@goauthentik/api";
+
+import { msg, str } from "@lit/localize";
+import { html, PropertyValues } from "lit";
+import { guard } from "lit-html/directives/guard.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { property } from "lit/decorators.js";
+
+export class CreateWizard extends AKElement {
+    /**
+     * Optional singular label for the type of entity this form creates/edits.
+     */
+    public static verboseName: string | null = null;
+
+    /**
+     * Optional plural label for the type of entity this form creates/edits
+     */
+    public static verboseNamePlural: string | null = null;
+
+    //#region Modal helpers
+
+    /**
+     * A helper method to create an invoker for a modal containing this form.
+     *
+     * @see {@linkcode modalInvoker} for the underlying implementation.
+     */
+    public static asModalInvoker<T extends CreateWizard = CreateWizard>(
+        props?: LitPropertyRecord<T>,
+        init?: DialogInit,
+    ): ModalInvokerDirectiveResult {
+        return modalInvoker(this, props, init);
+    }
+
+    /**
+     * Show a modal containing this form.
+     *
+     * @see {@linkcode renderModal} for the underlying implementation.
+     * @returns A promise that resolves when the modal is closed.
+     */
+    public static showModal(init?: DialogInit): Promise<void> {
+        return renderModal(new (this as unknown as CustomElementConstructor)(), init);
+    }
+
+    //#endregion
+
+    protected override createRenderRoot(): HTMLElement | DocumentFragment {
+        return this;
+    }
+
+    //#region Public Properties
+
+    @property({ attribute: false })
+    public creationTypes: TypeCreate[] | null = null;
+
+    @property({ type: String, useDefault: true })
+    public layout: TypeCreateWizardPageLayouts = TypeCreateWizardPageLayouts.list;
+
+    @property({ attribute: false, useDefault: true })
+    public finalHandler?: () => Promise<void>;
+
+    #verboseName: string | null = null;
+
+    /**
+     * Optional singular label for the type of entity this form creates/edits.
+     *
+     * Overrides the static `verboseName` property for this instance.
+     */
+    @property({ type: String, attribute: "entity-singular" })
+    public set verboseName(value: string | null) {
+        this.#verboseName = value;
+
+        if (isTransclusionParentElement(this.parentElement)) {
+            this.parentElement.slottedElementUpdatedAt = new Date();
+        }
+    }
+
+    public get verboseName(): string | null {
+        return this.#verboseName || (this.constructor as typeof CreateWizard).verboseName;
+    }
+
+    #verboseNamePlural: string | null = null;
+
+    /**
+     * Optional plural label for the type of entity this form creates/edits.
+     *
+     * Overrides the static `verboseNamePlural` property for this instance.
+     */
+    @property({ type: String, attribute: "entity-plural" })
+    public set verboseNamePlural(value: string | null) {
+        this.#verboseNamePlural = value;
+
+        if (isTransclusionParentElement(this.parentElement)) {
+            this.parentElement.slottedElementUpdatedAt = new Date();
+        }
+    }
+
+    public get verboseNamePlural(): string | null {
+        return (
+            this.#verboseNamePlural || (this.constructor as typeof CreateWizard).verboseNamePlural
+        );
+    }
+
+    public get wizard(): AKWizard | null {
+        return this.wizardRef.value || null;
+    }
+
+    /**
+     * An optional description to show on the initial page of the wizard,
+     * used to explain the different types or provide general information about the creation process.
+     */
+    @property({ type: String })
+    public description: string | null = null;
+
+    //#endregion
+
+    //#region Protected Properties
+
+    protected wizardRef = createRef<AKWizard>();
+    protected pageTypeCreateRef = createRef<TypeCreateWizardPage>();
+
+    protected initialSteps = ["initial"];
+
+    @property({ attribute: false, useDefault: true })
+    public selectedType: TypeCreate | null = null;
+
+    //#endregion
+
+    //#region Lifecycle
+
+    protected stepObserver: MutationObserver;
+
+    public constructor() {
+        super();
+
+        // Assigning a part to the host element to aid in selecting the wizard.
+        this.part.add("wizard");
+
+        this.stepObserver = new MutationObserver(() => {
+            this.requestUpdate();
+        });
+    }
+
+    public override firstUpdated(changedProperties: PropertyValues<this>): void {
+        super.firstUpdated(changedProperties);
+
+        this.refresh();
+
+        const { wizard } = this;
+        if (wizard) {
+            this.stepObserver.observe(wizard, { attributeFilter: ["data-active-step"] });
+        }
+    }
+
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.stepObserver.disconnect();
+    }
+
+    /**
+     * Fetches data from the API endpoint.
+     *
+     * @param requestInit Optional request initialization parameters.
+     * @returns A promise that resolves to the fetched data.
+     */
+    protected apiEndpoint?(requestInit?: RequestInit): Promise<TypeCreate[]>;
+
+    /**
+     * Refreshes the wizard's creation types.
+     */
+    public refresh = (): Promise<void> => {
+        const result = this.apiEndpoint?.() ?? Promise.resolve([]);
+
+        return result.then((types) => {
+            this.creationTypes = types;
+        });
+    };
+
+    /**
+     * An overridable method to filter the wizard's steps when a new type is selected.
+     *
+     * @param type The selected creation type.
+     * @param currentSteps The current steps of the wizard.
+     * @returns The filtered steps to use for the wizard.
+     */
+    protected selectSteps(type: TypeCreate, _currentSteps: string[]): string[] {
+        const stepID = formatTypeCreateStepID(type);
+
+        return [stepID];
+    }
+
+    /**
+     * Listener invoked when a type is selected on the initial page,
+     * responsible for updating the wizard's steps and validity.
+     */
+    protected typeSelectListener = ({
+        detail: typeCreate,
+    }: CustomEvent<TypeCreate>): boolean | Promise<boolean> => {
+        this.selectedType = typeCreate;
+
+        const { wizard } = this;
+
+        if (!wizard) return false;
+
+        const currentSteps = wizard.steps.slice();
+
+        const selectedSteps = this.selectSteps(typeCreate, currentSteps);
+        const nextSteps = [...this.initialSteps];
+
+        const idx = nextSteps.indexOf("initial") + 1;
+
+        nextSteps.splice(idx, 0, ...selectedSteps);
+
+        wizard.steps = nextSteps;
+        wizard.valid = true;
+
+        return wizard.navigateNext();
+    };
+
+    //#endregion
+
+    //#region Rendering
+
+    /**
+     * Optional method to render additional content on the initial page, for example to explain the different types.
+     */
+    protected renderInitialPageContent?(): SlottedTemplateResult;
+
+    protected renderHeading(): SlottedTemplateResult {
+        const { selectedType, wizard } = this;
+
+        if (!selectedType || wizard?.activeStep === "initial") {
+            return null;
+        }
+
+        return html`<header part="step-heading">
+            <h3 class="pf-c-wizard__main-title">${selectedType.name}</h3>
+            <h4 class="pf-c-wizard__main-description">${selectedType.description}</h4>
+        </header>`;
+    }
+
+    protected render(): SlottedTemplateResult {
+        const initialPageContent = this.renderInitialPageContent?.() ?? null;
+
+        return html`<ak-wizard
+            ${ref(this.wizardRef)}
+            entity-singular=${ifPresent(this.verboseName)}
+            entity-plural=${ifPresent(this.verboseNamePlural)}
+            description=${ifPresent(this.description)}
+            part="main"
+            .initialSteps=${this.initialSteps}
+            .finalHandler=${this.finalHandler}
+        >
+            ${this.renderHeading()}
+            <ak-wizard-page-type-create
+                ${ref(this.pageTypeCreateRef)}
+                slot="initial"
+                .types=${this.creationTypes}
+                layout=${this.layout}
+                headline=${this.verboseName
+                    ? msg(str`Choose ${this.verboseName} Type`)
+                    : msg("Choose type")}
+                @ak-type-create-select=${this.typeSelectListener}
+            >
+                ${guard([initialPageContent], () => {
+                    if (!initialPageContent) {
+                        return null;
+                    }
+
+                    return html`<div>
+                        <p>${initialPageContent}</p>
+                    </div>`;
+                })}
+            </ak-wizard-page-type-create>
+            ${this.renderForms()}
+        </ak-wizard>`;
+    }
+
+    /**
+     * Optional method to assemble properties for the form pages based on the selected type,
+     * which are then passed to the form components when rendering.
+     */
+    protected assembleFormProps?(type: TypeCreate): LitPropertyRecord<object>;
+
+    protected renderWizardStep(type: TypeCreate): SlottedTemplateResult {
+        const { selectedType } = this;
+        const props = this.assembleFormProps?.(type) ?? {};
+
+        const slotName = formatTypeCreateStepID(type);
+        const entityLabel = selectedType?.name ?? this.verboseName ?? msg("Entity");
+
+        const label = msg(str`${entityLabel} Details`);
+
+        const content = StrictUnsafe(type.component, props);
+
+        return html`<ak-wizard-page-form slot=${slotName} headline=${label}
+            >${content}</ak-wizard-page-form
+        >`;
+    }
+
+    /**
+     * Renders the form pages for each creation type.
+     *
+     * Each form is slotted with a name corresponding to its type.
+     *
+     * @see {@linkcode formatTypeCreateStepID} for the expected slot naming convention.
+     */
+    protected renderForms(): SlottedTemplateResult {
+        return guard([this.creationTypes, this.selectedType], () => {
+            if (!this.creationTypes) {
+                return null;
+            }
+
+            return this.creationTypes.map((type) => this.renderWizardStep(type));
+        });
+    }
+
+    //#endregion
+}
diff --git a/web/src/elements/wizard/FormWizardPage.ts b/web/src/elements/wizard/FormWizardPage.ts
index 6759009c24ac..6d17d6064088 100644
--- a/web/src/elements/wizard/FormWizardPage.ts
+++ b/web/src/elements/wizard/FormWizardPage.ts
@@ -1,29 +1,34 @@
 import { Form } from "#elements/forms/Form";
-import { WizardPage } from "#elements/wizard/WizardPage";
+import { WizardPage, WizardPageState } from "#elements/wizard/WizardPage";
 
 import { customElement } from "lit/decorators.js";
 
+export type FormWizardPageActiveCallback<S extends WizardPageState> = (
+    host: FormWizardPage<S>,
+) => void | Promise<void>;
+
 /**
  * This Wizard page is used for proxy forms with the older-style
  * wizards
  */
 @customElement("ak-wizard-page-form")
-export class FormWizardPage extends WizardPage {
-    activePageCallback: (context: FormWizardPage) => Promise<void> = async () => {
+export class FormWizardPage<S extends WizardPageState = WizardPageState> extends WizardPage<S> {
+    public activePageCallback: FormWizardPageActiveCallback<S> = async () => {
         return Promise.resolve();
     };
 
-    activeCallback = async () => {
-        this.host.isValid = true;
+    public override activeCallback = async () => {
+        this.host.valid = true;
+
         this.activePageCallback(this);
     };
 
-    nextCallback = async (): Promise<boolean> => {
+    public override nextCallback = async (): Promise<boolean> => {
         if (!this.children.length) {
             throw new TypeError(`No child elements found in ${this.slot}.`);
         }
 
-        const form = Array.from(this.children).find((childElement) => {
+        const form = Iterator.from(this.children).find((childElement) => {
             return childElement instanceof Form;
         });
 
@@ -35,15 +40,23 @@ export class FormWizardPage extends WizardPage {
             return false;
         }
 
-        const formPromise = form.submit(new SubmitEvent("submit"));
+        return form
+            .submit(new SubmitEvent("submit"))
+            .then((responseData) => {
+                const { slot, host } = this;
 
-        if (!formPromise) {
-            throw new TypeError("Expected a Promise from the Form.submit() method.");
-        }
+                if (!slot) {
+                    this.logger.error(
+                        "Cannot assign form data to wizard state: slot is undefined.",
+                        {
+                            formData: responseData,
+                        },
+                    );
+                    throw new TypeError("Expected slot to be defined on WizardPage.");
+                }
+
+                Object.assign(host.state, { [this.slot]: responseData } as Partial<S>);
 
-        return formPromise
-            .then((data) => {
-                this.host.state[this.slot] = data;
                 this.host.canBack = false;
 
                 return true;
diff --git a/web/src/elements/wizard/TypeCreateWizardPage.ts b/web/src/elements/wizard/TypeCreateWizardPage.ts
index dfacaa5fde44..a554ee664989 100644
--- a/web/src/elements/wizard/TypeCreateWizardPage.ts
+++ b/web/src/elements/wizard/TypeCreateWizardPage.ts
@@ -2,14 +2,17 @@ import "#elements/LicenseNotice";
 import "#elements/Alert";
 
 import { WithLicenseSummary } from "#elements/mixins/license";
+import { SlottedTemplateResult } from "#elements/types";
+import { ifPresent } from "#elements/utils/attributes";
 import { WizardPage } from "#elements/wizard/WizardPage";
 
 import { TypeCreate } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { css, CSSResult, html, nothing, TemplateResult } from "lit";
+import { css, CSSResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { guard } from "lit/directives/guard.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -27,14 +30,14 @@ export enum TypeCreateWizardPageLayouts {
 export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
     //#region Properties
 
-    @property({ attribute: false })
-    types: TypeCreate[] = [];
+    @property({ attribute: false, useDefault: true })
+    public types: TypeCreate[] | null = null;
 
-    @property({ attribute: false })
+    @property({ attribute: false, useDefault: true })
     public selectedType: TypeCreate | null = null;
 
-    @property({ type: String })
-    layout: TypeCreateWizardPageLayouts = TypeCreateWizardPageLayouts.list;
+    @property({ type: String, useDefault: true })
+    public layout: TypeCreateWizardPageLayouts = TypeCreateWizardPageLayouts.list;
 
     //#endregion
 
@@ -45,6 +48,11 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
         PFCard,
         PFPage,
         css`
+            :host {
+                display: flex;
+                flex-flow: column;
+            }
+
             .pf-c-card__header-main img {
                 max-height: 2em;
                 min-height: 2em;
@@ -52,20 +60,28 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
             :host([theme="dark"]) .pf-c-card__header-main img {
                 filter: invert(1);
             }
-            .pf-c-page__main-section {
-                margin-bottom: 2rem;
+
+            :host([theme="dark"]) .pf-c-card {
+                --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--150);
+                --pf-c-card--m-selectable-raised--before--Right: -1px;
+                --pf-c-card--m-selectable-raised--before--Left: -1px;
+                --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow:
+                    0 0 0 1px var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor),
+                    var(--pf-global--BoxShadow--lg);
+            }
+
+            [part*="type-create"]:not(:first-child) {
+                margin-block-start: var(--pf-global--spacer--md);
             }
         `,
     ];
 
     //#region Refs
 
-    formRef: Ref<HTMLFormElement> = createRef();
+    protected formRef: Ref<HTMLFormElement> = createRef();
 
     //#endregion
 
-    public override label = msg("Select type");
-
     public reset = () => {
         super.reset();
 
@@ -74,18 +90,12 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
     };
 
     public override activeCallback = (): void => {
-        const form = this.formRef.value;
-
-        this.host.isValid = form?.checkValidity() ?? false;
-
-        if (this.selectedType) {
-            this.#selectDispatch(this.selectedType);
-        }
+        this.host.valid = !!this.selectedType;
     };
 
     #selectDispatch = (type: TypeCreate) => {
         this.dispatchEvent(
-            new CustomEvent("select", {
+            new CustomEvent("ak-type-create-select", {
                 detail: type,
                 bubbles: true,
                 composed: true,
@@ -93,128 +103,176 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
         );
     };
 
-    protected renderGrid(): TemplateResult {
-        return html`${this.hasSlotted("above-form")
-                ? html`<div class="pf-c-page__main-section"><slot name="above-form"></slot></div>`
-                : nothing}
-            <div
+    //#region Rendering
+
+    //#region Grid layout
+
+    protected renderGridItems(): SlottedTemplateResult {
+        if (!this.types?.length) {
+            return null;
+        }
+
+        return this.types.map((type, idx) => {
+            const disabled = !!(type.requiresEnterprise && !this.hasEnterpriseLicense);
+
+            const selected = this.selectedType === type;
+            const inputID = `${type.component}-${type.modelName}`;
+
+            return html`<div
+                class=${classMap({
+                    "pf-l-grid__item": true,
+                    "pf-m-3-col": true,
+                    "pf-c-card": true,
+                    "pf-m-non-selectable-raised": disabled,
+                    "ak-m-enterprise-only": disabled,
+                    "pf-m-selectable-raised": !disabled,
+                    "pf-m-selected-raised": selected,
+                })}
+                tabindex=${idx}
+                role="option"
+                data-component=${type.component}
+                data-model-name=${type.modelName}
+                aria-disabled="${disabled ? "true" : "false"}"
+                aria-selected="${selected ? "true" : "false"}"
+                aria-label=${type.name}
+                aria-describedby=${`${inputID}-description`}
+                @click=${() => {
+                    if (disabled) return;
+
+                    this.selectedType = type;
+                    this.#selectDispatch(type);
+                }}
+            >
+                ${type.iconUrl
+                    ? html`<div role="presentation" class="pf-c-card__header">
+                          <div role="presentation" class="pf-c-card__header-main">
+                              <img
+                                  aria-hidden="true"
+                                  src=${type.iconUrl}
+                                  alt=${msg(str`${type.name} Icon`)}
+                              />
+                          </div>
+                      </div>`
+                    : null}
+                <div role="heading" aria-level="2" class="pf-c-card__title">${type.name}</div>
+                <div class="pf-c-card__body" id=${`${inputID}-description`}>
+                    ${type.description}
+                </div>
+                ${disabled
+                    ? html`<div class="pf-c-card__footer">
+                          <ak-license-notice></ak-license-notice>
+                      </div> `
+                    : null}
+            </div>`;
+        });
+    }
+
+    protected renderGrid(): SlottedTemplateResult {
+        if (!this.types?.length) {
+            return html`<div class="ak-c-loading-skeleton ak-m-grid"></div>`;
+        }
+
+        return [
+            this.findSlotted() ? this.defaultSlot : null,
+            html`<div
                 role="listbox"
-                aria-label="${msg("Select a provider type")}"
+                part="type-create grid"
                 class="pf-l-grid pf-m-gutter"
                 data-ouid-component-type="ak-type-create-grid"
+                aria-label=${ifPresent(this.headline)}
             >
-                ${this.types.map((type, idx) => {
-                    const disabled = !!(type.requiresEnterprise && !this.hasEnterpriseLicense);
-
-                    const selected = this.selectedType === type;
-
-                    return html`<div
-                        class=${classMap({
-                            "pf-l-grid__item": true,
-                            "pf-m-3-col": true,
-                            "pf-c-card": true,
-                            "pf-m-non-selectable-raised": disabled,
-                            "ak-m-enterprise-only": disabled,
-                            "pf-m-selectable-raised": !disabled,
-                            "pf-m-selected-raised": selected,
-                        })}
-                        tabindex=${idx}
-                        role="option"
-                        aria-disabled="${disabled ? "true" : "false"}"
-                        aria-selected="${selected ? "true" : "false"}"
-                        aria-label="${type.name}"
-                        aria-describedby="${type.description}"
-                        @click=${() => {
-                            if (disabled) return;
-
-                            this.#selectDispatch(type);
-                            this.selectedType = type;
-                        }}
-                    >
-                        ${type.iconUrl
-                            ? html`<div role="presentation" class="pf-c-card__header">
-                                  <div role="presentation" class="pf-c-card__header-main">
-                                      <img
-                                          aria-hidden="true"
-                                          src=${type.iconUrl}
-                                          alt=${msg(str`${type.name} Icon`)}
-                                      />
-                                  </div>
-                              </div>`
-                            : nothing}
-                        <div role="heading" aria-level="2" class="pf-c-card__title">
-                            ${type.name}
-                        </div>
-                        <div role="presentational" class="pf-c-card__body">${type.description}</div>
-                        ${disabled
-                            ? html`<div class="pf-c-card__footer">
-                                  <ak-license-notice></ak-license-notice>
-                              </div> `
-                            : nothing}
-                    </div>`;
-                })}
-            </div>`;
+                ${this.renderGridItems()}
+            </div>`,
+        ];
+    }
+
+    //#endregion
+
+    //#region List layout
+
+    protected renderListItems(): SlottedTemplateResult {
+        if (!this.types?.length) {
+            return null;
+        }
+
+        return this.types.map((type) => {
+            const disabled = !!(type.requiresEnterprise && !this.hasEnterpriseLicense);
+            const inputID = `${type.component}-${type.modelName}`;
+            const selected = this.selectedType === type;
+
+            return html`<label class="pf-c-radio" for=${inputID}>
+                <input
+                    class="pf-c-radio__input"
+                    type="radio"
+                    name="type"
+                    id=${inputID}
+                    aria-label=${type.name}
+                    aria-describedby=${`${inputID}-description`}
+                    @change=${() => {
+                        this.selectedType = type;
+                        this.#selectDispatch(type);
+                    }}
+                    ?disabled=${disabled}
+                />
+                <div
+                    aria-selected="${selected ? "true" : "false"}"
+                    aria-labelledby="${inputID}"
+                    class="pf-c-radio__label"
+                >
+                    ${type.name}
+                </div>
+                <span id="${inputID}-description" class="pf-c-radio__description"
+                    >${type.description}
+                    ${disabled ? html`<ak-license-notice></ak-license-notice>` : null}
+                    ${type.deprecated
+                        ? html`<ak-alert class="pf-c-radio__description" inline plain>
+                              ${msg("This type is deprecated.")}
+                          </ak-alert>`
+                        : null}
+                </span>
+            </label>`;
+        });
     }
 
-    renderList(): TemplateResult {
-        return html`${this.hasSlotted("above-form")
-                ? html`<div class="pf-c-page__main-section"><slot name="above-form"></slot></div>`
-                : nothing}
-            <form
+    protected renderList(): SlottedTemplateResult {
+        if (!this.types?.length) {
+            return html`<div class="ak-c-loading-skeleton ak-m-list"></div>`;
+        }
+
+        return [
+            this.findSlotted() ? this.defaultSlot : null,
+            html`<form
                 ${ref(this.formRef)}
-                class="pf-c-form pf-m-horizontal"
+                part="form type-create list"
+                class="pf-c-form pf-m-horizontal ak-m-content-center"
                 role="radiogroup"
-                aria-label=${msg("Select a provider type")}
+                aria-label=${ifPresent(this.headline)}
             >
-                ${this.types.map((type) => {
-                    const disabled = !!(type.requiresEnterprise && !this.hasEnterpriseLicense);
-                    const inputID = `${type.component}-${type.modelName}`;
-                    const selected = this.selectedType === type;
-
-                    return html`<div class="pf-c-radio">
-                        <input
-                            class="pf-c-radio__input"
-                            type="radio"
-                            name="type"
-                            id=${`${inputID}`}
-                            aria-label=${type.name}
-                            aria-describedby=${`${inputID}-description`}
-                            @change=${() => {
-                                this.#selectDispatch(type);
-                            }}
-                            ?disabled=${disabled}
-                        />
-                        <label
-                            aria-selected="${selected ? "true" : "false"}"
-                            aria-labelledby="${inputID}"
-                            class="pf-c-radio__label"
-                            for="${inputID}"
-                            >${type.name}</label
-                        >
-                        <span id="${inputID}-description" class="pf-c-radio__description"
-                            >${type.description}
-                            ${disabled ? html`<ak-license-notice></ak-license-notice>` : nothing}
-                            ${type.deprecated
-                                ? html`<ak-alert class="pf-c-radio__description" inline plain>
-                                      ${msg("This type is deprecated.")}
-                                  </ak-alert>`
-                                : nothing}
-                        </span>
-                    </div>`;
-                })}
-            </form>`;
+                ${this.renderListItems()}
+            </form>`,
+        ];
     }
 
-    render(): TemplateResult {
-        switch (this.layout) {
-            case TypeCreateWizardPageLayouts.grid:
-                return this.renderGrid();
-            case TypeCreateWizardPageLayouts.list:
-                return this.renderList();
-            default:
-                throw new TypeError(`Unknown layout: ${this.layout}`);
-        }
+    //#endregion
+
+    protected override render(): SlottedTemplateResult {
+        const { layout, types, selectedType } = this;
+
+        const content = guard([layout, types, selectedType], () => {
+            switch (layout) {
+                case TypeCreateWizardPageLayouts.grid:
+                    return this.renderGrid();
+                case TypeCreateWizardPageLayouts.list:
+                    return this.renderList();
+                default:
+                    throw new TypeError(`Unknown layout: ${layout}`);
+            }
+        });
+
+        return content;
     }
+
+    //#endregion
 }
 
 declare global {
diff --git a/web/src/elements/wizard/Wizard.ts b/web/src/elements/wizard/Wizard.ts
index e376dd95ae02..bc9f82c055aa 100644
--- a/web/src/elements/wizard/Wizard.ts
+++ b/web/src/elements/wizard/Wizard.ts
@@ -1,17 +1,28 @@
 import "#elements/wizard/ActionWizardPage";
+import "#elements/LoadingOverlay";
 
-import { EVENT_REFRESH } from "#common/constants";
+import { AKRefreshEvent } from "#common/events";
 
-import { ModalButton } from "#elements/buttons/ModalButton";
+import { AKElement } from "#elements/Base";
+import { listen } from "#elements/decorators/listen";
+import { SlottedTemplateResult } from "#elements/types";
+import { findNearestDialog } from "#elements/utils/render-roots";
 import { WizardPage } from "#elements/wizard/WizardPage";
 
-import { msg } from "@lit/localize";
+import { ButtonKindLabelRecord } from "#components/ak-wizard/shared";
+
+import { ConsoleLogger } from "#logger/browser";
+
+import { msg, str } from "@lit/localize";
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
 import { property } from "@lit/reactive-element/decorators/property.js";
-import { css, CSSResult, html, nothing, TemplateResult } from "lit";
+import { css, CSSResult, html, PropertyValues } from "lit";
+import { guard } from "lit-html/directives/guard.js";
 import { state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css";
 
 export interface WizardAction {
@@ -20,33 +31,95 @@ export interface WizardAction {
     run: () => Promise<boolean>;
 }
 
+export interface StepProgress {
+    activeStepElement: WizardPage | null;
+    activeStepIndex: number;
+    lastPage: boolean;
+}
+
 export const ApplyActionsSlot = "apply-actions";
 
+/**
+ * A base class for creation wizards, providing common functionality such as step management,
+ * loading state, and action handling.
+ *
+ * @typeparam S The shape of the state object that can be used to share data between steps and the final handler.
+ */
 @customElement("ak-wizard")
-export class Wizard extends ModalButton {
-    static styles: CSSResult[] = [
-        ...super.styles,
+export class AKWizard<S = Record<string, unknown>> extends AKElement {
+    public static styles: CSSResult[] = [
+        PFButton,
+        PFTitle,
         PFWizard,
         css`
-            .pf-c-modal-box {
-                height: 75%;
+            :host {
+                display: block;
+                height: min(var(--ak-c-dialog--AspectRatioHeight), var(--ak-c-dialog--MaxHeight));
+            }
+
+            .pf-c-wizard__main {
+                overscroll-behavior: contain;
+                display: flex;
+                flex-flow: column;
+            }
+
+            .pf-c-wizard__main-body {
+                display: flex;
+                flex: 1 1 auto;
             }
         `,
     ];
 
-    //#region Properties
+    protected logger = ConsoleLogger.prefix(this.localName);
+
+    protected defaultSlot = this.ownerDocument.createElement("slot");
+
+    //#region Public Properties
+
+    public formatARIALabel = () => {
+        if (this.verboseName) {
+            return msg(str`New ${this.verboseName} Wizard`, {
+                id: "wizard.ariaLabel.entity-singular",
+                desc: "ARIA label for the creation wizard, where the entity singular is interpolated.",
+            });
+        }
+
+        return msg("Creation Wizard", {
+            id: "wizard.ariaLabel.default",
+            desc: "ARIA label for the creation wizard when no entity singular is provided.",
+        });
+    };
+
+    /**
+     * Formats the header text for the wizard, using the {@linkcode verboseName} property if available.
+     */
+    public formatHeader(): string {
+        if (this.verboseName) {
+            return msg(str`Create New ${this.verboseName}`, {
+                id: "wizard.header.entity-singular",
+                desc: "Header for the creation wizard, where the entity singular is interpolated.",
+            });
+        }
+
+        return msg("Create New Entity", {
+            id: "wizard.header.default",
+            desc: "Header for the creation wizard when no entity singular is provided.",
+        });
+    }
+
+    //#region Public Properties
 
     /**
      * Whether the wizard can be cancelled.
      */
     @property({ type: Boolean })
-    canCancel = true;
+    public cancelable = true;
 
     /**
      * Whether the wizard can go back to the previous step.
      */
     @property({ type: Boolean })
-    canBack = true;
+    public canBack = true;
 
     /**
      * Header title of the wizard.
@@ -55,16 +128,29 @@ export class Wizard extends ModalButton {
     public header?: string;
 
     /**
-     * Description of the wizard.
+     * Optional singular label for the type of entity this wizard creates, used in messages and the like.
      */
-    @property()
-    public description?: string;
+    @property({ type: String, attribute: "entity-singular" })
+    public verboseName: string | null = null;
+
+    /**
+     * Optional plural label for the type of entity this wizard creates, used in messages and the like.
+     */
+    @property({ type: String, attribute: "entity-plural" })
+    public verboseNamePlural: string | null = null;
+
+    /**
+     * An optional description to show on the initial page of the wizard,
+     * used to explain the different types or provide general information about the creation process.
+     */
+    @property({ type: String })
+    public description: string | null = null;
 
     /**
      * Whether the wizard is valid and can proceed to the next step.
      */
     @property({ type: Boolean })
-    isValid = false;
+    public valid = false;
 
     /**
      * Actions to display at the end of the wizard.
@@ -76,295 +162,391 @@ export class Wizard extends ModalButton {
     public finalHandler?: () => Promise<void>;
 
     @property({ attribute: false })
-    public state: { [key: string]: unknown } = {};
+    public state: S = {} as S;
+
+    @property({ attribute: false })
+    public dialog: HTMLDialogElement | null = null;
 
     //#endregion
 
+    @state()
+    protected loading = false;
+
+    protected loadingOverlay = this.ownerDocument.createElement("ak-loading-overlay");
+
     //#region State
 
     /**
-     * Memoized step tag names.
+     * Initial steps to reset to.
      */
-    @state()
-    protected _steps: string[] = [];
+    @property({ attribute: false })
+    public initialSteps: string[] = [];
+
+    #steps: string[] | null = null;
 
     /**
      * Step tag names present in the wizard.
      */
-    get steps(): string[] {
-        return this._steps;
+    public get steps(): readonly string[] {
+        return this.#steps || this.initialSteps;
     }
 
-    set steps(nextSteps: string[]) {
-        const addApplyActionsSlot = this._steps.includes(ApplyActionsSlot);
-
-        this._steps = nextSteps;
+    @property({ attribute: false })
+    public set steps(nextSteps: string[]) {
+        const applyStepPresent = this.#steps?.includes(ApplyActionsSlot);
 
-        if (addApplyActionsSlot) {
-            this.steps.push(ApplyActionsSlot);
+        if (applyStepPresent) {
+            nextSteps.push(ApplyActionsSlot);
         }
-
-        this.requestUpdate();
+        this.#steps = nextSteps;
     }
 
     /**
-     * Initial steps to reset to.
+     * The active step element being displayed.
      */
-    #initialSteps: string[] = [];
-
-    @state()
-    protected activeStep: WizardPage | null = null;
+    @property({ attribute: false })
+    public activeStepElement: WizardPage | null = null;
 
-    set activeStepElement(nextActiveStepElement: WizardPage | null) {
-        this.activeStep = nextActiveStepElement;
+    public get activeStep(): string | null {
+        return this.activeStepElement?.slot || null;
+    }
 
-        if (!this.activeStep) return;
+    protected get activeStepIndex(): number {
+        const { activeStepElement, steps } = this;
 
-        this.activeStep.activeCallback();
-        this.activeStep.requestUpdate();
-    }
+        const activeStepIndex = activeStepElement ? steps.indexOf(activeStepElement.slot) : 0;
 
-    /**
-     * The active step element being displayed.
-     */
-    get activeStepElement(): WizardPage | null {
-        return this.activeStep;
+        return activeStepIndex;
     }
 
-    getStepElementByIndex(stepIndex: number): WizardPage | null {
-        const stepName = this._steps[stepIndex];
+    protected getStepElementByIndex(stepIndex: number): WizardPage | null {
+        const stepName = this.steps[stepIndex];
 
-        return this.querySelector<WizardPage>(`[slot=${stepName}]`);
+        return this.getStepElementByName(stepName);
     }
 
-    getStepElementByName(stepName: string): WizardPage | null {
+    protected getStepElementByName(stepName: string): WizardPage | null {
         return this.querySelector<WizardPage>(`[slot=${stepName}]`);
     }
 
-    #gatherSteps() {
-        const firstPage = this.getStepElementByIndex(0);
+    /**
+     * Determines the current step progress, the active step element, its index,
+     * and whether it's the last page.
+     *
+     * @remarks
+     * TODO: This causes a synchronous update of the active step element.
+     * It'd be nice if this could be decoupled. Leaving as is for now since,
+     * x`but something to keep in mind if we run into weird update issues.
+     */
+    protected takeStepProgress(): StepProgress {
+        if (!this.activeStepElement) {
+            const firstStepElement = this.getStepElementByIndex(0);
 
-        if (!this.activeStepElement && firstPage) {
-            this.activeStepElement = firstPage;
+            this.activeStepElement = firstStepElement;
         }
 
-        const activeStepIndex = this.activeStepElement
-            ? this.steps.indexOf(this.activeStepElement.slot)
-            : 0;
+        const { steps, activeStepElement } = this;
+
+        const activeStepIndex = activeStepElement ? steps.indexOf(activeStepElement.slot) : 0;
+
+        let lastPage = activeStepIndex === steps.length - 1;
 
-        let lastPage = activeStepIndex === this.steps.length - 1;
+        if (lastPage && !steps.includes("ak-wizard-page-action") && this.actions.length > 0) {
+            this.steps = steps.concat("ak-wizard-page-action");
 
-        if (lastPage && !this.steps.includes("ak-wizard-page-action") && this.actions.length > 0) {
-            this.steps = this.steps.concat("ak-wizard-page-action");
-            lastPage = activeStepIndex === this.steps.length - 1;
+            lastPage = activeStepIndex === steps.length - 1;
         }
 
         return {
-            firstPage,
+            activeStepElement,
             activeStepIndex,
             lastPage,
         };
     }
 
-    //#endregion
+    /**
+     * Navigates to the previous step, if possible.
+     */
+    public navigatePrevious = (): Promise<boolean> => {
+        const prevPage = this.getStepElementByIndex(this.activeStepIndex - 1);
 
-    //#region Lifecycle
+        if (prevPage) {
+            this.activeStepElement = prevPage;
+            return Promise.resolve(true);
+        }
 
-    public firstUpdated(): void {
-        this.#initialSteps = this._steps;
-    }
+        return Promise.resolve(false);
+    };
 
-    public connectedCallback(): void {
-        super.connectedCallback();
-        this.addEventListener(EVENT_REFRESH, this.#refreshListener);
-    }
+    /**
+     * Navigates to the next step, if possible.
+     * If the current step has a `nextCallback`, it will be invoked first.
+     */
+    public navigateNext = async (event?: Event): Promise<boolean> => {
+        const { activeStepElement, activeStepIndex, lastPage } = this.takeStepProgress();
 
-    public disconnectedCallback(): void {
-        super.disconnectedCallback();
-        this.removeEventListener(EVENT_REFRESH, this.#refreshListener);
-    }
+        if (!activeStepElement) return false;
 
-    //#endregion
+        if (activeStepElement.nextCallback) {
+            this.loading = true;
 
-    //#region Event Listeners
+            const completedStep = await activeStepElement.nextCallback(event);
 
-    /**
-     * Reset the wizard to its initial state.
-     */
-    #reset = (event?: Event) => {
-        event?.preventDefault();
-        event?.stopPropagation();
+            this.loading = false;
+
+            if (!completedStep) return false;
 
-        this.open = false;
+            if (lastPage) {
+                const promise = this.finalHandler?.() || Promise.resolve();
 
-        for (const element of this.querySelectorAll("[data-wizardmanaged=true]")) {
-            element.remove();
+                return promise
+                    .then(() => {
+                        this.requestClose("submitted");
+                        return true;
+                    })
+                    .finally(() => {
+                        this.loading = false;
+                    });
+            }
         }
 
-        for (const step of this.steps) {
-            const stepElement = this.getStepElementByName(step);
+        const nextPage = this.getStepElementByIndex(activeStepIndex + 1);
+
+        if (!nextPage) {
+            this.logger.warn("No next page found for step", {
+                stepIndex: activeStepIndex + 1,
+                steps: this.steps,
+            });
 
-            stepElement?.reset?.();
+            return false;
         }
 
-        this.steps = this.#initialSteps;
-        this.actions = [];
-        this.state = {};
-        this.canBack = true;
-        this.canCancel = true;
-        this.activeStepElement = null;
+        this.activeStepElement = nextPage;
+
+        return true;
     };
 
-    #refreshListener = (event: Event) => {
-        const { lastPage } = this.#gatherSteps();
+    //#endregion
 
-        if (!lastPage) {
-            event.stopImmediatePropagation();
+    //#region Lifecycle
+
+    public override connectedCallback() {
+        super.connectedCallback();
+
+        this.dialog ??= findNearestDialog(this);
+    }
+
+    public override updated(changedProperties: PropertyValues<this>): void {
+        super.updated(changedProperties);
+
+        if (changedProperties.has("activeStepElement") && this.activeStepElement) {
+            const activated = this.activeStepElement.activeCallback?.() || Promise.resolve();
+
+            activated
+                .then(() => {
+                    this.dataset.activeStep = this.activeStep || "";
+                })
+                .catch((error: unknown) => {
+                    this.logger.error("Error in active callback of step", {
+                        step: this.activeStepElement,
+                        error,
+                    });
+                });
         }
-    };
+    }
 
     //#endregion
 
-    //#region Rendering
+    //#region Event Listeners
 
-    public renderModalInner(): TemplateResult {
-        const { activeStepIndex, lastPage } = this.#gatherSteps();
+    public requestClose = (returnValue?: string) => {
+        if (!this.dialog) {
+            this.logger.warn("Skipping close request: No dialog found for wizard.");
+            return;
+        }
 
-        const navigatePrevious = () => {
-            const prevPage = this.getStepElementByIndex(activeStepIndex - 1);
+        this.dialog.requestClose(returnValue);
+    };
 
-            if (prevPage) {
-                this.activeStepElement = prevPage;
-            }
-        };
+    @listen(AKRefreshEvent, {
+        target: window,
+    })
+    protected refreshListener = (event: AKRefreshEvent) => {
+        const { lastPage } = this.takeStepProgress();
 
-        const navigateNext = async (): Promise<void> => {
-            if (!this.activeStepElement) return;
+        if (!lastPage) {
+            event.stopImmediatePropagation();
+        }
+    };
 
-            if (this.activeStepElement.nextCallback) {
-                const completedStep = await this.activeStepElement.nextCallback();
+    //#endregion
 
-                if (!completedStep) return;
+    //#region Rendering
 
-                if (lastPage) {
-                    await this.finalHandler?.();
-                    this.#reset();
+    public renderHeader(): SlottedTemplateResult {
+        const { cancelable, description } = this;
 
-                    return;
-                }
-            }
+        return guard([cancelable, description], () => {
+            const header = this.formatHeader();
 
-            const nextPage = this.getStepElementByIndex(activeStepIndex + 1);
+            const children: SlottedTemplateResult = [
+                html`<button
+                    data-test-id="wizard-close"
+                    class="pf-c-button pf-m-plain pf-c-wizard__close"
+                    type="button"
+                    aria-label="${msg("Cancel wizard")}"
+                    @click=${() => this.requestClose("cancel")}
+                >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                </button>`,
+                header
+                    ? html`<h1
+                          id="modal-title"
+                          role="heading"
+                          aria-level="1"
+                          class="pf-c-title pf-m-3xl pf-c-wizard__title"
+                          data-test-id="wizard-heading"
+                      >
+                          ${header}
+                      </h1>`
+                    : null,
+                description
+                    ? html`<p
+                          role="heading"
+                          aria-level="2"
+                          id="modal-description"
+                          class="pf-c-wizard__description"
+                      >
+                          ${description}
+                      </p>`
+                    : null,
+            ];
 
-            if (nextPage) {
-                this.activeStepElement = nextPage;
-            }
-        };
+            return html`<header class="pf-c-wizard__header">${children}</header>`;
+        });
+    }
+
+    protected override render(): SlottedTemplateResult {
+        const stepProgress = this.takeStepProgress();
 
         return html`<div class="pf-c-wizard" role="presentation">
-            <header class="pf-c-wizard__header">
-                ${this.canCancel
-                    ? html`<button
-                          data-test-id="wizard-close"
-                          class="pf-c-button pf-m-plain pf-c-wizard__close"
-                          type="button"
-                          aria-label="${msg("Close wizard")}"
-                          @click=${this.#reset}
-                      >
-                          <i class="fas fa-times" aria-hidden="true"></i>
-                      </button>`
-                    : nothing}
-                <h1
-                    id="modal-title"
-                    role="heading"
-                    aria-level="1"
-                    class="pf-c-title pf-m-3xl pf-c-wizard__title"
-                    data-test-id="wizard-heading"
-                >
-                    ${this.header}
-                </h1>
-                <p
-                    role="heading"
-                    aria-level="2"
-                    id="modal-description"
-                    class="pf-c-wizard__description"
-                >
-                    ${this.description}
-                </p>
-            </header>
+            ${this.renderHeader()}
 
             <div role="presentation" class="pf-c-wizard__outer-wrap">
+                ${this.loading ? this.loadingOverlay : null}
                 <div class="pf-c-wizard__inner-wrap">
                     <nav aria-label="${msg("Wizard steps")}" class="pf-c-wizard__nav">
                         <ol role="presentation" class="pf-c-wizard__nav-list">
-                            ${this.steps.map((step, idx) => {
-                                const stepEl = this.getStepElementByName(step);
-
-                                if (!stepEl) return html`<p>Unexpected missing step: ${step}</p>`;
-
-                                return html`
-                                    <li role="presentation" class="pf-c-wizard__nav-item">
-                                        <button
-                                            class=${classMap({
-                                                "pf-c-wizard__nav-link": true,
-                                                "pf-m-current": idx === activeStepIndex,
-                                            })}
-                                            type="button"
-                                            ?disabled=${activeStepIndex < idx}
-                                            @click=${() => {
-                                                this.activeStepElement = stepEl;
-                                            }}
-                                        >
-                                            ${stepEl.label ?? msg("UNNAMED")}
-                                        </button>
-                                    </li>
-                                `;
-                            })}
+                            ${this.renderStepList(stepProgress)}
                         </ol>
                     </nav>
-                    <main aria-label="${msg("Wizard content")}" class="pf-c-wizard__main">
+                    <main
+                        part="wizard-main"
+                        class="pf-c-wizard__main ak-m-thin-scrollbar"
+                        aria-label=${msg("Wizard content")}
+                    >
+                        ${this.defaultSlot}
                         <div role="presentation" class="pf-c-wizard__main-body">
-                            <slot name=${this.activeStepElement?.slot || this.steps[0]}></slot>
+                            ${this.renderBody()}
                         </div>
                     </main>
                 </div>
                 <nav class="pf-c-wizard__footer" aria-label="${msg("Wizard navigation")}">
-                    ${this.canCancel
-                        ? html`<div class="pf-c-wizard__footer-abort">
+                    ${this.renderNavigationButtons(stepProgress)}
+                </nav>
+            </div>
+        </div>`;
+    }
+    protected renderStepList({ activeStepIndex }: StepProgress): SlottedTemplateResult {
+        const { steps, renderRoot } = this;
+
+        return guard([steps, activeStepIndex, renderRoot.childElementCount], () => {
+            return this.steps.map((step, idx) => {
+                const stepEl = this.getStepElementByName(step);
+
+                if (!stepEl) {
+                    console.warn(`Expected step element with slot="${step}" not found in wizard.`, {
+                        step,
+                        slotSelector: `[slot=${step}]`,
+                        renderRootChildren: renderRoot.children,
+                    });
+                    return html`<p>Unexpected missing step: ${step}</p>`;
+                }
+
+                return html`<li role="presentation" class="pf-c-wizard__nav-item">
+                    <button
+                        class=${classMap({
+                            "pf-c-wizard__nav-link": true,
+                            "pf-m-current": idx === activeStepIndex,
+                        })}
+                        type="button"
+                        ?disabled=${activeStepIndex < idx}
+                        @click=${() => {
+                            this.activeStepElement = stepEl;
+                        }}
+                    >
+                        ${stepEl.formatSidebarLabel()}
+                    </button>
+                </li>`;
+            });
+        });
+    }
+
+    protected renderBody(): SlottedTemplateResult {
+        return html`<slot name=${this.activeStepElement?.slot || this.steps[0]}></slot>`;
+    }
+
+    protected renderNavigationButtons({
+        activeStepIndex,
+        lastPage,
+    }: StepProgress): SlottedTemplateResult {
+        const { canBack, cancelable, valid, childElementCount } = this;
+
+        return guard(
+            [activeStepIndex, lastPage, canBack, cancelable, valid, childElementCount],
+            () => {
+                const nextLabel =
+                    lastPage && activeStepIndex > 0
+                        ? this.cancelable
+                            ? ButtonKindLabelRecord.create()
+                            : ButtonKindLabelRecord.finish()
+                        : ButtonKindLabelRecord.next();
+
+                return [
+                    cancelable
+                        ? html`<div class="pf-c-wizard__footer-cancel">
                               <button
                                   data-test-id="wizard-navigation-cancel"
                                   class="pf-c-button pf-m-link"
                                   type="button"
-                                  @click=${this.#reset}
+                                  @click=${() => this.requestClose("cancel")}
                               >
                                   ${msg("Cancel")}
                               </button>
                           </div>`
-                        : nothing}
-                    ${activeStepIndex > 0 && this.canBack
-                        ? html`
-                              <button
-                                  data-test-id="wizard-navigation-previous"
-                                  class="pf-c-button pf-m-secondary"
-                                  type="button"
-                                  @click=${navigatePrevious}
-                              >
-                                  ${msg("Back")}
-                              </button>
-                          `
-                        : nothing}
-                    <button
+                        : null,
+                    activeStepIndex > 0 && canBack
+                        ? html`<button
+                              data-test-id="wizard-navigation-previous"
+                              class="pf-c-button pf-m-secondary"
+                              type="button"
+                              @click=${this.navigatePrevious}
+                          >
+                              ${ButtonKindLabelRecord.back()}
+                          </button>`
+                        : null,
+                    html`<button
                         data-test-id="wizard-navigation-next"
                         class="pf-c-button pf-m-primary"
-                        ?disabled=${!this.isValid}
+                        ?disabled=${!this.valid}
                         type="button"
-                        @click=${navigateNext}
+                        @click=${this.navigateNext}
                     >
-                        ${lastPage && activeStepIndex > 0 ? msg("Finish") : msg("Next")}
-                    </button>
-                </nav>
-            </div>
-        </div>`;
+                        ${nextLabel}
+                    </button>`,
+                ];
+            },
+        );
     }
 
     //#endregion
@@ -372,7 +554,7 @@ export class Wizard extends ModalButton {
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-wizard": Wizard;
+        "ak-wizard": AKWizard;
     }
 
     interface WizardNavigationTestIDMap {
diff --git a/web/src/elements/wizard/WizardPage.ts b/web/src/elements/wizard/WizardPage.ts
index c2bf5153d4a2..eb8f147a3c91 100644
--- a/web/src/elements/wizard/WizardPage.ts
+++ b/web/src/elements/wizard/WizardPage.ts
@@ -1,7 +1,11 @@
 import { AKElement } from "#elements/Base";
-import { Wizard } from "#elements/wizard/Wizard";
+import { SlottedTemplateResult } from "#elements/types";
+import type { AKWizard } from "#elements/wizard/Wizard";
 
-import { html, LitElement, PropertyDeclaration, TemplateResult } from "lit";
+import { ConsoleLogger } from "#logger/browser";
+
+import { msg } from "@lit/localize";
+import { html, LitElement, PropertyDeclaration } from "lit";
 import { property } from "lit/decorators.js";
 
 /**
@@ -14,18 +18,29 @@ export type WizardPageActiveCallback = () => void | Promise<void>;
  *
  * @returns `true` if the wizard can proceed to the next page, `false` otherwise.
  */
-export type WizardPageNextCallback = () => boolean | Promise<boolean>;
+export type WizardPageNextCallback = (event?: Event) => boolean | Promise<boolean>;
+
+export interface WizardPageState {
+    [slotName: string]: unknown;
+}
+
+export abstract class WizardPage<S = WizardPageState> extends AKElement {
+    declare parentElement: AKWizard<S> | null;
+    declare slot: Extract<keyof S, string>;
+
+    protected logger = ConsoleLogger.prefix(this.localName);
+    protected defaultSlot = this.ownerDocument.createElement("slot");
 
-export abstract class WizardPage extends AKElement {
     /**
      * The label to display in the sidebar for this page.
      *
+     * @see {@linkcode formatSidebarLabel} for a method to compute this value based on the page's content or other properties.
      */
-    @property({ type: String })
-    public label: string | null = null;
+    @property({ type: String, attribute: "headline" })
+    public headline: string | null = null;
 
-    public get host(): Wizard {
-        return this.parentElement as Wizard;
+    public get host(): AKWizard<S> {
+        return this.parentElement!;
     }
 
     /**
@@ -41,9 +56,20 @@ export abstract class WizardPage extends AKElement {
      * Called when this is the page brought into view.
      */
     public activeCallback: WizardPageActiveCallback = () => {
-        this.host.isValid = false;
+        this.host.valid = false;
     };
 
+    /**
+     * An overridable method to compute the sidebar label for this page.
+     *
+     * Override to compute a label based on the page's content or other properties.
+     *
+     * @returns The {@linkcode headline} to display for this page in the sidebar.
+     */
+    public formatSidebarLabel(): SlottedTemplateResult {
+        return html`<div part="sidebar-label-headline">${this.headline ?? msg("UNNAMED")}</div>`;
+    }
+
     /**
      * Called when the `next` button on the wizard is pressed. For forms, results in the submission
      * of the current form to the back-end before being allowed to proceed to the next page. This is
@@ -55,6 +81,11 @@ export abstract class WizardPage extends AKElement {
         return Promise.resolve(true);
     };
 
+    public constructor() {
+        super();
+        this.part.add("wizard-page");
+    }
+
     public override requestUpdate(
         name?: PropertyKey,
         oldValue?: unknown,
@@ -69,8 +100,8 @@ export abstract class WizardPage extends AKElement {
         return super.requestUpdate(name, oldValue, options);
     }
 
-    render(): TemplateResult {
-        return html`<slot></slot>`;
+    protected override render(): SlottedTemplateResult {
+        return this.defaultSlot;
     }
 }
 
diff --git a/web/src/elements/wizard/utils.ts b/web/src/elements/wizard/utils.ts
new file mode 100644
index 000000000000..e75464f307f7
--- /dev/null
+++ b/web/src/elements/wizard/utils.ts
@@ -0,0 +1,13 @@
+/**
+ * @file Wizard utilities
+ */
+
+import { TypeCreate } from "@goauthentik/api";
+
+/**
+ * Formats a unique step ID for a given {@link TypeCreate} object,
+ * using its `component` and `modelName` properties.
+ */
+export function formatTypeCreateStepID({ component, modelName }: TypeCreate): string {
+    return ["type", component, modelName].filter(Boolean).join("-");
+}
diff --git a/web/src/styles/authentik/components/Wizard/wizard.css b/web/src/styles/authentik/components/Wizard/wizard.css
index 61c178371379..6f756c69ce0a 100644
--- a/web/src/styles/authentik/components/Wizard/wizard.css
+++ b/web/src/styles/authentik/components/Wizard/wizard.css
@@ -1,5 +1,39 @@
 .pf-c-wizard {
     --pf-c-wizard__nav--ZIndex: var(--pf-global--ZIndex--md);
+
+    --ak-c-wizard__header--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--lg), 3cqb);
+    --ak-c-wizard__header--InlineSpacer: var(--pf-global--spacer--md);
+
+    --pf-c-wizard__header--PaddingTop: var(--ak-c-wizard__header--BlockSpacer);
+    --pf-c-wizard__header--PaddingBottom: var(--ak-c-wizard__header--BlockSpacer);
+
+    --pf-c-wizard__close--Right: var(--ak-c-wizard__header--InlineSpacer);
+    --pf-c-wizard__close--Top: var(--ak-c-wizard__header--BlockSpacer);
+
+    --ak-c-wizard__footer--BlockSpacer: clamp(0.25em, var(--pf-global--spacer--xl), 3cqb);
+    --pf-c-wizard__footer--PaddingTop: var(--ak-c-wizard__footer--BlockSpacer);
+    --pf-c-wizard__footer--PaddingBottom: var(--ak-c-wizard__footer--BlockSpacer);
+    --pf-c-wizard__footer--child--MarginBottom: 0;
+}
+
+.pf-c-wizard__main-body {
+    --ak-fieldset--BorderColor: var(--pf-global--BackgroundColor--150);
+
+    gap: var(--pf-global--spacer--lg);
+
+    fieldset {
+        .pf-c-description-list {
+            margin-inline: var(--pf-global--spacer--sm);
+        }
+    }
+}
+
+.pf-c-wizard__main-title {
+    width: 100%;
+    font-family: var(--pf-global--FontFamily--heading--sans-serif);
+    font-size: var(--pf-global--FontSize--md);
+    font-weight: var(--pf-global--FontWeight--bold);
+    line-height: var(--pf-global--LineHeight--md);
 }
 
 .pf-c-wizard__footer-cancel {
@@ -9,19 +43,15 @@
 
 .pf-c-wizard__footer {
     justify-content: end;
+    align-items: center;
 }
 
 .pf-c-wizard__nav-link {
     padding: var(--pf-global--spacer--form-element);
-    border-radius: var(--pf-global--BorderRadius--sm);
 
     &::before {
         top: var(--pf-global--spacer--form-element);
     }
-
-    &.pf-m-current {
-        background: var(--pf-global--BackgroundColor--200);
-    }
 }
 
 /* #region Dark Theme */

From 5a352800ae15c8932f46a5f9a37cc83cb95c699d Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:29:27 +0200
Subject: [PATCH 08/21] web/admin: migrate forms and list pages to dialog-based
 modals

Port every admin form, list page, and RBAC surface to the new
TransclusionChildElement / asModalInvoker contract introduced with the
native <dialog> migration. Replace the old ModalButton-driven helpers
with the new modalInvoker/renderModal flow, add the shared
IconCopyButton/IconTokenCopyButton/IconEnrollmentTokenCopyButton
components (with .ak-c-button--icon__progress styling), and refresh
messages, notifications, flow inspector, and user portal consumers to
match. Includes small common/element utility updates picked up along
the way.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../AdminSettingsFooterLinks.ts               |   7 +-
 .../AdminSettingsFooterLinks.stories.ts       |   2 +-
 .../stories/ak-array-input.stories.ts         |   2 +-
 web/src/admin/applications/ApplicationForm.ts |  14 +-
 .../admin/applications/ApplicationListPage.ts |  57 ++--
 .../components/ak-backchannel-input.ts        |   2 +-
 .../ApplicationEntitlementPage.ts             |   2 +-
 web/src/admin/blueprints/BlueprintForm.ts     |   3 +
 .../admin/blueprints/BlueprintImportForm.ts   |  24 +-
 web/src/admin/blueprints/BlueprintListPage.ts | 124 ++++----
 web/src/admin/brands/BrandForm.ts             |   3 +
 web/src/admin/brands/BrandListPage.ts         |  38 +--
 .../admin/crypto/CertificateGenerateForm.ts   |  46 ++-
 .../admin/crypto/CertificateKeyPairForm.ts    |  29 +-
 .../crypto/CertificateKeyPairListPage.ts      |  54 ++--
 .../admin/endpoints/DeviceAccessGroupForm.ts  |  20 +-
 .../endpoints/DeviceAccessGroupsListPage.ts   |  41 +--
 .../ak-endpoints-device-group-search.ts       |   2 +
 .../connectors/ConnectorsListPage.ts          |  40 ++-
 .../connectors/agent/EnrollmentTokenForm.ts   |  19 +-
 .../agent/EnrollmentTokenListPage.ts          |  86 +++---
 .../agent/ak-enrollment-token-copy-button.ts  |  37 ---
 .../connectors/fleet/FleetConnectorForm.ts    |   5 +-
 .../gdtc/GoogleChromeConnectorForm.ts         |   3 +-
 .../admin/endpoints/devices/DeviceListPage.ts |   2 +-
 .../admin/enterprise/EnterpriseLicenseForm.ts |  45 +--
 .../enterprise/EnterpriseLicenseListPage.ts   |  31 +-
 web/src/admin/events/DataExportListPage.ts    |   2 +-
 web/src/admin/events/ObjectChangelog.ts       |   6 +-
 web/src/admin/events/RuleForm.ts              |  23 +-
 web/src/admin/events/RuleListPage.ts          |  44 +--
 web/src/admin/events/SimpleEventTable.ts      |   7 +-
 web/src/admin/events/TransportForm.ts         |  26 +-
 web/src/admin/events/TransportListPage.ts     |  55 ++--
 web/src/admin/flows/BoundStagesList.ts        | 121 ++++----
 web/src/admin/flows/FlowForm.ts               |  58 ++--
 web/src/admin/flows/FlowListPage.ts           |  96 +++---
 web/src/admin/flows/StageBindingForm.ts       |  10 +-
 web/src/admin/groups/GroupListPage.ts         |  19 +-
 web/src/admin/groups/RelatedGroupList.ts      |   2 +-
 web/src/admin/groups/RelatedUserList.ts       |  36 +--
 web/src/admin/groups/ak-group-form.ts         |   4 +-
 web/src/admin/lifecycle/LifecycleRuleForm.ts  |   3 +
 .../admin/lifecycle/LifecycleRuleListPage.ts  |  60 ++--
 .../admin/lifecycle/ObjectLifecyclePage.ts    |  18 +-
 web/src/admin/lifecycle/ObjectReviewForm.ts   |   5 +
 web/src/admin/outposts/OutpostForm.ts         |  14 +-
 web/src/admin/outposts/OutpostListPage.ts     |  30 +-
 web/src/admin/outposts/OutpostViewPage.ts     |  11 +-
 .../outposts/ServiceConnectionListPage.ts     |  58 ++--
 web/src/admin/policies/BasePolicyForm.ts      |   3 +
 web/src/admin/policies/BoundPoliciesList.ts   | 288 +++++++++---------
 web/src/admin/policies/PolicyBindingForm.ts   |   4 +-
 web/src/admin/policies/PolicyListPage.ts      |  74 ++---
 web/src/admin/policies/PolicyTestForm.ts      |  93 ++++--
 .../admin/policies/dummy/DummyPolicyForm.ts   |  21 +-
 .../BasePropertyMappingForm.ts                |  21 +-
 .../PropertyMappingListPage.ts                | 103 ++++---
 .../PropertyMappingTestForm.ts                | 129 ++++++--
 web/src/admin/providers/BaseProviderForm.ts   |   3 +
 web/src/admin/providers/ProviderListPage.ts   |  47 ++-
 .../providers/RelatedApplicationButton.ts     |  25 +-
 .../providers/ldap/LDAPProviderFormForm.ts    |   6 +-
 .../oauth2/OAuth2ProviderFormForm.ts          |  10 +-
 .../oauth2/OAuth2ProviderRedirectURI.ts       |   4 +-
 web/src/admin/providers/rac/EndpointForm.ts   |  98 +++---
 web/src/admin/providers/rac/EndpointList.ts   |  65 ++--
 .../providers/rac/RACProviderViewPage.ts      |  33 +-
 .../radius/RadiusProviderFormForm.ts          |  11 +-
 .../providers/saml/SAMLProviderFormForm.ts    |  11 +-
 .../admin/providers/scim/SCIMProviderForm.ts  |   2 +-
 .../providers/scim/SCIMProviderFormForm.ts    |   9 +-
 .../admin/rbac/ak-initial-permissions-form.ts |  24 +-
 .../admin/rbac/ak-initial-permissions-list.ts |  72 ++---
 .../rbac/ak-rbac-object-permission-page.ts    |  11 +-
 .../admin/rbac/ak-rbac-permission-table.ts    |  10 +-
 .../ak-rbac-role-object-permission-form.ts    |  25 +-
 .../ak-rbac-role-object-permission-table.ts   |  46 ++-
 web/src/admin/roles/ak-related-role-table.ts  |   8 +-
 ...-role-assigned-global-permissions-table.ts |  28 +-
 ...-role-assigned-object-permissions-table.ts |  24 +-
 web/src/admin/roles/ak-role-form.ts           |   7 +-
 web/src/admin/roles/ak-role-list.ts           |  23 +-
 .../admin/roles/ak-role-permission-form.ts    |  24 +-
 web/src/admin/sources/BaseSourceForm.ts       |   2 +-
 web/src/admin/sources/SourceListPage.ts       |  60 ++--
 .../sources/kerberos/KerberosSourceForm.ts    |  12 +-
 .../admin/sources/oauth/OAuthSourceForm.ts    |  17 +-
 web/src/admin/sources/plex/PlexSourceForm.ts  |  21 +-
 web/src/admin/sources/saml/SAMLSourceForm.ts  |  19 +-
 web/src/admin/sources/scim/SCIMSourceForm.ts  |  38 +--
 .../admin/sources/scim/SCIMSourceViewPage.ts  |   2 +-
 .../sources/telegram/TelegramSourceForm.ts    |  27 +-
 web/src/admin/stages/BaseStageForm.ts         |   7 +-
 web/src/admin/stages/StageListPage.ts         |  96 +++---
 .../authenticator_duo/DuoDeviceImportForm.ts  |  38 ++-
 .../AuthenticatorValidateStageForm.ts         |  18 +-
 .../admin/stages/invitation/InvitationForm.ts |  35 +--
 .../stages/invitation/InvitationListPage.ts   |  75 ++---
 web/src/admin/stages/prompt/PromptForm.ts     |   3 +
 web/src/admin/stages/prompt/PromptListPage.ts |  72 ++---
 web/src/admin/stages/register.ts              |   1 -
 .../stages/user_write/UserWriteStageForm.ts   |  35 ++-
 web/src/admin/tokens/TokenForm.ts             |   4 +
 web/src/admin/tokens/TokenListPage.ts         |  76 ++---
 web/src/admin/users/ServiceAccountForm.ts     |  14 +-
 web/src/admin/users/UserForm.ts               | 122 +++++---
 web/src/admin/users/UserImpersonateForm.ts    |   4 +-
 web/src/admin/users/UserListPage.ts           | 174 ++++-------
 web/src/admin/users/UserRecoveryLinkForm.ts   |  16 +-
 web/src/admin/users/UserResetEmailForm.ts     |   8 +-
 web/src/admin/users/UserViewPage.ts           |  16 +-
 web/src/common/api/middleware.ts              |  41 +--
 web/src/common/clipboard.ts                   |  78 +++--
 web/src/common/collections.ts                 |  44 +++
 web/src/common/messages.ts                    |   6 +
 web/src/common/promises.ts                    |  13 +
 web/src/components/ak-radio-input.ts          |   6 +-
 web/src/components/ak-slug-input.ts           |   4 +-
 web/src/components/ak-text-input.ts           |   5 +-
 web/src/elements/LoadingOverlay.css           |   4 +-
 web/src/elements/Spinner.ts                   |   1 +
 web/src/elements/ak-array-input.ts            |   7 +-
 .../ak-checkbox-group/ak-checkbox-group.ts    |   4 +-
 .../ak-dual-select/ak-dual-select-provider.ts |   7 +-
 web/src/elements/buttons/IconCopyButton.ts    |  58 ++++
 .../buttons/IconEnrollmentTokenCopyButton.ts  |  33 ++
 .../elements/buttons/IconTokenCopyButton.ts   |  30 ++
 .../TokenCopyButton/ak-token-copy-button.ts   |  22 +-
 .../elements/buttons/TokenCopyButton/index.ts |   6 +-
 web/src/elements/events/LogViewer.ts          |   2 +-
 web/src/elements/forms/Radio.ts               | 118 ++++++-
 .../forms/SearchSelect/SearchSelect.ts        |   6 +-
 .../elements/forms/SearchSelect/ak-portal.ts  |   8 +-
 web/src/elements/forms/serialization.ts       |   8 +-
 web/src/elements/messages/Message.ts          |   2 +-
 web/src/elements/messages/MessageContainer.ts |  41 ++-
 web/src/elements/messages/styles.css          |  34 ++-
 web/src/elements/notifications/APIDrawer.ts   |   4 +-
 web/src/elements/sidebar/SidebarItem.ts       |   4 +-
 web/src/flow/FlowExecutor.ts                  |   4 +-
 web/src/flow/inspector/FlowInspector.ts       |   4 +-
 web/src/flow/inspector/FlowInspectorButton.ts |   4 +-
 web/src/flow/stages/base.ts                   |   2 +-
 .../standalone/loading/index.entrypoint.ts    |   2 +-
 .../authentik/components/Button/button.css    |   6 +
 web/src/user/LibraryApplication/index.ts      |   2 +-
 .../user-settings/tokens/UserTokenList.ts     |  10 +-
 148 files changed, 2413 insertions(+), 2037 deletions(-)
 delete mode 100644 web/src/admin/endpoints/connectors/agent/ak-enrollment-token-copy-button.ts
 create mode 100644 web/src/common/promises.ts
 create mode 100644 web/src/elements/buttons/IconCopyButton.ts
 create mode 100644 web/src/elements/buttons/IconEnrollmentTokenCopyButton.ts
 create mode 100644 web/src/elements/buttons/IconTokenCopyButton.ts

diff --git a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts
index 5697abc24696..eb36949fb556 100644
--- a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts
+++ b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts
@@ -43,13 +43,16 @@ export class FooterLinkInput extends AKControlElement<FooterLink> {
     @queryAll(".ak-form-control")
     controls?: HTMLInputElement[];
 
-    json() {
+    @property({ type: String })
+    public name: string | null = null;
+
+    toJSON(): FooterLink {
         return Object.fromEntries(
             Array.from(this.controls ?? []).map((control) => [control.name, control.value]),
         ) as unknown as FooterLink;
     }
 
-    get isValid() {
+    get valid() {
         const href = this.json()?.href ?? "";
         return hasLegalScheme(href) && URL.canParse(href);
     }
diff --git a/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts
index c604110fac55..79ecccdcbc87 100644
--- a/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts
+++ b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts
@@ -34,7 +34,7 @@ const metadata: Meta<FooterLinkInput> = {
                         return;
                     }
                     const target = event.target as FooterLinkInput;
-                    messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`;
+                    messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`;
                 });
             }, 250);
 
diff --git a/web/src/admin/admin-settings/stories/ak-array-input.stories.ts b/web/src/admin/admin-settings/stories/ak-array-input.stories.ts
index 416a387498f7..c3375bd89a94 100644
--- a/web/src/admin/admin-settings/stories/ak-array-input.stories.ts
+++ b/web/src/admin/admin-settings/stories/ak-array-input.stories.ts
@@ -40,7 +40,7 @@ const metadata: Meta<IArrayInput<unknown>> = {
                         return;
                     }
                     const target = event.target as FooterLinkInput;
-                    messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`;
+                    messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`;
                 });
             }, 250);
 
diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts
index 4a14e92ec879..148fa905c0ce 100644
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@@ -27,7 +27,7 @@ import { policyEngineModes } from "#admin/policies/PolicyEngineModes";
 import { Application, CoreApi, Provider, UsageEnum } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
+import { html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -40,8 +40,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
 export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Application, string>) {
     #api = new CoreApi(DEFAULT_CONFIG);
 
-    public override entitySingular = msg("Application");
-    public override entityPlural = msg("Applications");
+    public static override verboseName = msg("Application");
+    public static override verboseNamePlural = msg("Applications");
 
     protected override async loadInstance(pk: string): Promise<Application> {
         const app = await this.#api.coreApplicationsRetrieve({
@@ -54,7 +54,7 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
     }
 
     @property({ attribute: false })
-    public provider?: number;
+    public provider: number | null = null;
 
     @state()
     protected backchannelProviders: Provider[] = [];
@@ -115,10 +115,12 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
         );
         const providerFromInstance = this.instance?.provider;
         const providerValue = providerFromInstance ?? this.provider;
-        const providerPrefilled = !this.instance && this.provider !== undefined;
+        const providerPrefilled = !this.instance && this.provider !== null;
 
         return html`
-            ${this.instance ? nothing : html`<ak-alert level="pf-m-info">${alertMsg}</ak-alert>`}
+            ${this.instance || this.provider
+                ? null
+                : html`<ak-alert level="pf-m-info">${alertMsg}</ak-alert>`}
             <ak-text-input
                 name="name"
                 autocomplete="off"
diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts
index dc73c06e58f7..02257fa1c3f6 100644
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/web/src/admin/applications/ApplicationListPage.ts
@@ -5,12 +5,13 @@ import "#elements/ak-mdx/ak-mdx";
 import "#elements/buttons/SpinnerButton/ak-spinner-button";
 import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
-import "#elements/modals/ak-modal";
+import "#elements/dialogs/ak-modal";
 import "#admin/applications/ApplicationForm";
 import "#admin/applications/ApplicationWizardHint";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton } from "#elements/dialogs";
 import { WithBrandConfig } from "#elements/mixins/branding";
 import { getURLParam } from "#elements/router/RouteMatch";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
@@ -20,7 +21,7 @@ import { ifPresent } from "#elements/utils/attributes";
 
 import { ApplicationForm } from "#admin/applications/ApplicationForm";
 import Styles from "#admin/applications/ApplicationListPage.css";
-import { AkApplicationWizard } from "#admin/applications/wizard/ak-application-wizard";
+import { AKApplicationWizard } from "#admin/applications/wizard/ak-application-wizard";
 
 import { Application, CoreApi, PoliciesApi } from "@goauthentik/api";
 
@@ -45,6 +46,9 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
 
     protected override searchEnabled = true;
     public pageTitle = msg("Applications");
+    public searchLabel = msg("Applications search");
+    public searchPlaceholder = msg("Search for applications…");
+
     public get pageDescription() {
         return msg(
             str`External applications that use ${this.brandingTitle} as an identity provider via protocols like OAuth2 and SAML. All applications are shown here, even ones you cannot access.`,
@@ -69,7 +73,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
         super.firstUpdated(changed);
 
         if (getURLParam("createWizard", false)) {
-            AkApplicationWizard.showModal();
+            AKApplicationWizard.showModal();
         } else if (getURLParam("createForm", false)) {
             ApplicationForm.showModal();
         }
@@ -138,16 +142,8 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
                   </a>`
                 : html`-`,
             html`${item.providerObj?.verboseName || msg("-")}`,
-            html`<div>
-                <button
-                    class="pf-c-button pf-m-plain"
-                    aria-label=${msg(str`Edit "${item.name}"`)}
-                    ${ApplicationForm.asEditModalInvoker(item.slug)}
-                >
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(ApplicationForm, item.slug)}
                 ${item.launchUrl
                     ? html`<a
                           href=${item.launchUrl}
@@ -166,17 +162,28 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
 
     protected override renderObjectCreate(): TemplateResult {
         return html`<ak-dropdown class="pf-c-dropdown">
-            <button
-                class="pf-c-button pf-m-primary pf-c-dropdown__toggle"
-                type="button"
-                id="new-application-toggle"
-                aria-haspopup="menu"
-                aria-controls="new-application-menu"
-                tabindex="0"
-            >
-                <span class="pf-c-dropdown__toggle-text">${msg("New Application")}</span>
-                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
-            </button>
+            <div class="pf-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action">
+                <button
+                    class="pf-c-dropdown__toggle-button"
+                    type="button"
+                    ${AKApplicationWizard.asModalInvoker()}
+                >
+                    ${msg("New Application")}
+                </button>
+
+                <button
+                    class="pf-c-dropdown__toggle-button"
+                    type="button"
+                    id="new-application-toggle"
+                    aria-haspopup="menu"
+                    aria-controls="new-application-menu"
+                    tabindex="0"
+                    aria-label=${msg("Toggle new application menu")}
+                >
+                    <i class="fas fa-caret-down" aria-hidden="true"></i>
+                </button>
+            </div>
+
             <menu
                 class="pf-c-dropdown__menu"
                 hidden
@@ -189,7 +196,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
                         type="button"
                         role="menuitem"
                         class="pf-c-dropdown__menu-item"
-                        ${AkApplicationWizard.asModalInvoker()}
+                        ${AKApplicationWizard.asModalInvoker()}
                         aria-description=${msg(
                             "Opens the new application wizard, which will guide you through creating a new application with an existing provider.",
                         )}
diff --git a/web/src/admin/applications/components/ak-backchannel-input.ts b/web/src/admin/applications/components/ak-backchannel-input.ts
index 667cb8608bb1..714a673d9561 100644
--- a/web/src/admin/applications/components/ak-backchannel-input.ts
+++ b/web/src/admin/applications/components/ak-backchannel-input.ts
@@ -5,8 +5,8 @@ import "#elements/chips/ChipGroup";
 import "#elements/forms/Form";
 
 import { AKElement } from "#elements/Base";
+import { renderModal } from "#elements/dialogs";
 import { AKFormSubmitEvent } from "#elements/forms/Form";
-import { renderModal } from "#elements/modals/utils";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { Provider } from "@goauthentik/api";
diff --git a/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts b/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts
index dda7e4efcc4e..9a09f9871cc1 100644
--- a/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts
+++ b/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts
@@ -105,7 +105,7 @@ export class ApplicationEntitlementsPage extends Table<ApplicationEntitlement> {
         </div>`;
     }
 
-    renderEmpty(): TemplateResult {
+    protected override renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state icon="pf-icon-module"
                 ><span>${msg("No app entitlements created.")}</span>
diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts
index 6b2b23ea57a3..99c3e2a53c48 100644
--- a/web/src/admin/blueprints/BlueprintForm.ts
+++ b/web/src/admin/blueprints/BlueprintForm.ts
@@ -31,6 +31,9 @@ export enum BlueprintSource {
 
 @customElement("ak-blueprint-form")
 export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
+    public static override verboseName = msg("Blueprint");
+    public static override verboseNamePlural = msg("Blueprints");
+
     @state()
     protected source: BlueprintSource = BlueprintSource.File;
 
diff --git a/web/src/admin/blueprints/BlueprintImportForm.ts b/web/src/admin/blueprints/BlueprintImportForm.ts
index 66965af04a45..a26ebc523495 100644
--- a/web/src/admin/blueprints/BlueprintImportForm.ts
+++ b/web/src/admin/blueprints/BlueprintImportForm.ts
@@ -4,6 +4,7 @@ import "#elements/forms/HorizontalFormElement";
 import "#components/ak-toggle-group";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
 
 import { Form } from "#elements/forms/Form";
 import { PreventFormSubmit } from "#elements/forms/helpers";
@@ -34,6 +35,12 @@ import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList
 export class BlueprintImportForm extends Form<ManagedBlueprintsImportCreateRequest> {
     static styles: CSSResult[] = [...super.styles, PFDescriptionList, PFBanner];
 
+    public static override verboseName = msg("Blueprint");
+    public static override verboseNamePlural = msg("Blueprints");
+    public static override createLabel = msg("Import");
+
+    public override size = PFSize.Medium;
+
     @state()
     protected result: BlueprintImportResult | null = null;
 
@@ -98,6 +105,11 @@ export class BlueprintImportForm extends Form<ManagedBlueprintsImportCreateReque
             </ak-toggle-group>
             ${this.source === BlueprintSource.Upload
                 ? html`
+                      ${this.findSlotted("banner-warning")
+                          ? html`<div class="pf-c-banner pf-m-warning" slot="above-form">
+                                <slot name="banner-warning"></slot>
+                            </div>`
+                          : null}
                       <ak-form-element-horizontal name="blueprint">
                           ${AKLabel(
                               {
@@ -123,24 +135,20 @@ export class BlueprintImportForm extends Form<ManagedBlueprintsImportCreateReque
                                       ".yaml files, which can be found in the Example Flows documentation",
                                   )}
                               </p>
-                              ${this.hasSlotted("read-more-link")
+                              ${this.findSlotted("read-more-link")
                                   ? html`<p class="pf-c-form__helper-text">
                                         ${msg("Read more about")}&nbsp;
                                         <slot name="read-more-link"></slot>
                                     </p>`
-                                  : nothing}
+                                  : null}
                           </div>
                       </ak-form-element-horizontal>
-                      ${this.hasSlotted("banner-warning")
-                          ? html`<div class="pf-c-banner pf-m-warning" slot="above-form">
-                                <slot name="banner-warning"></slot>
-                            </div>`
-                          : nothing}
                   `
-                : nothing}
+                : null}
             ${this.source === BlueprintSource.File
                 ? html`<ak-form-element-horizontal label=${msg("Path")} name="path">
                       <ak-search-select
+                          placeholder=${msg("Select a blueprint...")}
                           .fetchObjects=${async (query?: string): Promise<BlueprintFile[]> => {
                               const items = await new ManagedApi(
                                   DEFAULT_CONFIG,
diff --git a/web/src/admin/blueprints/BlueprintListPage.ts b/web/src/admin/blueprints/BlueprintListPage.ts
index 84fea183d029..d2856c123a8e 100644
--- a/web/src/admin/blueprints/BlueprintListPage.ts
+++ b/web/src/admin/blueprints/BlueprintListPage.ts
@@ -14,10 +14,14 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { EVENT_REFRESH } from "#common/constants";
 import { docLink } from "#common/global";
 
+import { IconEditButton, modalInvoker, ModalInvokerButton } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { BlueprintForm } from "#admin/blueprints/BlueprintForm";
+
 import {
     BlueprintInstance,
     BlueprintInstanceStatusEnum,
@@ -26,8 +30,9 @@ import {
 } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, html, nothing, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { CSSResult, html, nothing } from "lit";
+import { guard } from "lit-html/directives/guard.js";
+import { customElement } from "lit/decorators.js";
 
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
@@ -58,27 +63,28 @@ export function formatBlueprintDescription(item: BlueprintInstance): string | nu
 
 @customElement("ak-blueprint-list")
 export class BlueprintListPage extends TablePage<BlueprintInstance> {
+    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
+
     protected override searchEnabled = true;
+
     public pageTitle = msg("Blueprints");
     public pageDescription = msg("Automate and template configuration within authentik.");
     public pageIcon = "pf-icon pf-icon-blueprint";
 
-    expandable = true;
-    checkbox = true;
-    clearOnRefresh = true;
+    public override expandable = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for a blueprint...");
 
-    @property()
-    order = "name";
+    public override order = "name";
 
-    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
-
-    async apiEndpoint(): Promise<PaginatedResponse<BlueprintInstance>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<BlueprintInstance>> {
         return new ManagedApi(DEFAULT_CONFIG).managedBlueprintsList(
             await this.defaultEndpointConfig(),
         );
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Status"), "status"],
         [msg("Last applied"), "last_applied"],
@@ -86,7 +92,7 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Blueprint(s)")}
@@ -111,7 +117,7 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderExpanded(item: BlueprintInstance): TemplateResult {
+    protected override renderExpanded(item: BlueprintInstance): SlottedTemplateResult {
         const [appLabel, modelName] = ModelEnum.AuthentikBlueprintsBlueprintinstance.split(".");
 
         return html`<dl class="pf-c-description-list pf-m-horizontal">
@@ -144,7 +150,7 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
             </dl>`;
     }
 
-    row(item: BlueprintInstance): SlottedTemplateResult[] {
+    protected override row(item: BlueprintInstance): SlottedTemplateResult[] {
         const description = formatBlueprintDescription(item);
 
         return [
@@ -152,30 +158,16 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
                 ${description
                     ? html`<small><ak-mdx .content=${description}></ak-mdx></small>`
                     : nothing}`,
-            html`${BlueprintStatus(item)}`,
+            BlueprintStatus(item),
             Timestamp(item.lastApplied),
             html`<ak-status-label ?good=${item.enabled}></ak-status-label>`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Blueprint")}</span>
-                    <ak-blueprint-form slot="form" .instancePk=${item.pk}> </ak-blueprint-form>
-                    <button
-                        slot="trigger"
-                        class="pf-c-button pf-m-plain"
-                        aria-label=${msg(str`Edit "${item.name}" blueprint`)}
-                    >
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal
-                    label=${item.name}
-                    model=${ModelEnum.AuthentikBlueprintsBlueprintinstance}
-                    objectPk=${item.pk}
-                >
-                </ak-rbac-object-permission-modal>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(BlueprintForm, item.pk, item.name)}
+                ${IconPermissionButton(item.name, {
+                    model: ModelEnum.AuthentikBlueprintsBlueprintinstance,
+                    objectPk: item.pk,
+                })}
+
                 <ak-action-button
                     class="pf-m-plain"
                     label=${msg(str`Apply "${item.name}" blueprint`)}
@@ -202,36 +194,36 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Blueprint Instance")}</span>
-                <ak-blueprint-form slot="form"> </ak-blueprint-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-            <ak-forms-modal>
-                <span slot="submit">${msg("Import")}</span>
-                <span slot="header">${msg("Import Blueprint")}</span>
-                <ak-blueprint-import-form slot="form">
-                    <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href=${docLink("/customize/blueprints/working_with_blueprints/")}
-                        slot="read-more-link"
-                        >${msg("Flow Examples")}</a
-                    >
-                    <span slot="banner-warning">
-                        ${msg(
-                            "Warning: Blueprint files may contain objects such as users, policies and expression.",
-                        )}<br />${msg(
-                            "You should only import files from trusted sources and review blueprints before importing them.",
-                        )}
-                    </span>
-                </ak-blueprint-import-form>
-                <button slot="trigger" class="pf-c-button pf-m-secondary">${msg("Import")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return guard([], () => {
+            return [
+                ModalInvokerButton(BlueprintForm),
+                html`<button
+                    class="pf-c-button pf-m-primary"
+                    type="button"
+                    ${modalInvoker(() => {
+                        return html`<ak-blueprint-import-form>
+                            <a
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                href=${docLink("/customize/blueprints/working_with_blueprints/")}
+                                slot="read-more-link"
+                                >${msg("Flow Examples")}</a
+                            >
+                            <span slot="banner-warning">
+                                ${msg(
+                                    "Warning: Blueprint files may contain objects such as users, policies and expression.",
+                                )}<br />${msg(
+                                    "You should only import files from trusted sources and review blueprints before importing them.",
+                                )}
+                            </span>
+                        </ak-blueprint-import-form>`;
+                    })}
+                >
+                    ${msg("Import")}
+                </button>`,
+            ];
+        });
     }
 }
 
diff --git a/web/src/admin/brands/BrandForm.ts b/web/src/admin/brands/BrandForm.ts
index 0c70670d2b95..ebd810d94201 100644
--- a/web/src/admin/brands/BrandForm.ts
+++ b/web/src/admin/brands/BrandForm.ts
@@ -36,6 +36,9 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-brand-form")
 export class BrandForm extends ModelForm<Brand, string> {
+    public static override verboseName = msg("Brand");
+    public static override verboseNamePlural = msg("Brands");
+
     loadInstance(pk: string): Promise<Brand> {
         return new CoreApi(DEFAULT_CONFIG).coreBrandsRetrieve({
             brandUuid: pk,
diff --git a/web/src/admin/brands/BrandListPage.ts b/web/src/admin/brands/BrandListPage.ts
index 99479d7ed70b..ae682c2568ec 100644
--- a/web/src/admin/brands/BrandListPage.ts
+++ b/web/src/admin/brands/BrandListPage.ts
@@ -8,14 +8,17 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { BrandForm } from "#admin/brands/BrandForm";
+
 import { Brand, CoreApi, ModelEnum } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-brand-list")
@@ -47,8 +50,9 @@ export class BrandListPage extends TablePage<Brand> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
+
         return html`<ak-forms-delete-bulk
             object-label=${msg("Brand(s)")}
             .objects=${this.selectedElements}
@@ -72,22 +76,13 @@ export class BrandListPage extends TablePage<Brand> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: Brand): SlottedTemplateResult[] {
+    protected override row(item: Brand): SlottedTemplateResult[] {
         return [
-            html`${item.domain}`,
-            html`${item.brandingTitle}`,
+            item.domain,
+            item.brandingTitle || msg("-"),
             html`<ak-status-label ?good=${item._default}></ak-status-label>`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Brand")}</span>
-                    <ak-brand-form slot="form" .instancePk=${item.brandUuid}> </ak-brand-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(BrandForm, item.brandUuid, item.brandingTitle)}
 
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikBrandsBrand}
@@ -98,15 +93,8 @@ export class BrandListPage extends TablePage<Brand> {
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create Brand")}</span>
-                <span slot="header">${msg("New Brand")}</span>
-                <ak-brand-form slot="form"> </ak-brand-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("New Brand")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(BrandForm);
     }
 }
 
diff --git a/web/src/admin/crypto/CertificateGenerateForm.ts b/web/src/admin/crypto/CertificateGenerateForm.ts
index d47686314361..898501cd7226 100644
--- a/web/src/admin/crypto/CertificateGenerateForm.ts
+++ b/web/src/admin/crypto/CertificateGenerateForm.ts
@@ -1,3 +1,5 @@
+import "#components/ak-text-input";
+import "#components/ak-number-input";
 import "#elements/forms/Radio";
 import "#elements/forms/HorizontalFormElement";
 
@@ -17,7 +19,12 @@ import { html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators.js";
 
 @customElement("ak-crypto-certificate-generate-form")
-export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
+export class CryptoCertificateGenerateForm extends Form<CertificateGenerationRequest> {
+    public static override verboseName = msg("Certificate-Key Pair");
+    public static override verboseNamePlural = msg("Certificate-Key Pairs");
+    public static override createLabel = msg("Generate");
+    public static override submitVerb = msg("Generate");
+
     getSuccessMessage(): string {
         return msg("Successfully generated certificate-key pair.");
     }
@@ -29,22 +36,31 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html`<ak-form-element-horizontal
+        return html`<ak-text-input
                 label=${msg("Common Name")}
                 name="commonName"
                 required
-            >
-                <input type="text" class="pf-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">
-                    ${msg("Optional, comma-separated SubjectAlt Names.")}
-                </p>
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Validity days")} name="validityDays" required>
-                <input class="pf-c-form-control" type="number" value="365" />
-            </ak-form-element-horizontal>
+                placeholder=${msg("Type a name for this certificate...")}
+                autofocus
+                autocomplete="off"
+                spellcheck="false"
+            ></ak-text-input>
+            <ak-text-input
+                label=${msg("Subject-alt name")}
+                name="subjectAltName"
+                autocomplete="off"
+                input-hint="code"
+                help=${msg("Optional, comma-separated SubjectAlt Names.")}
+                placeholder=${msg("e.g. mydomain.com, *.mydomain.com, mydomain.local")}
+            ></ak-text-input>
+
+            <ak-number-input
+                label=${msg("Validity days")}
+                name="validityDays"
+                required
+                value="365"
+            ></ak-number-input>
+
             <ak-form-element-horizontal label=${msg("Private key Algorithm")} required name="alg">
                 <ak-radio
                     .options=${[
@@ -77,6 +93,6 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-crypto-certificate-generate-form": CertificateKeyPairForm;
+        "ak-crypto-certificate-generate-form": CryptoCertificateGenerateForm;
     }
 }
diff --git a/web/src/admin/crypto/CertificateKeyPairForm.ts b/web/src/admin/crypto/CertificateKeyPairForm.ts
index e9d56b6b3707..1422a857f0d8 100644
--- a/web/src/admin/crypto/CertificateKeyPairForm.ts
+++ b/web/src/admin/crypto/CertificateKeyPairForm.ts
@@ -1,4 +1,5 @@
 import "#components/ak-secret-textarea-input";
+import "#components/ak-text-input";
 import "#elements/CodeMirror";
 import "#elements/forms/HorizontalFormElement";
 
@@ -14,7 +15,12 @@ import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-crypto-certificate-form")
-export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string> {
+export class CryptoCertificateForm extends ModelForm<CertificateKeyPair, string> {
+    public static override verboseName = msg("Certificate-Key Pair");
+    public static override verboseNamePlural = msg("Certificate-Key Pairs");
+    public static override createLabel = msg("Import Existing");
+    public static override submitVerb = msg("Import");
+
     loadInstance(pk: string): Promise<CertificateKeyPair> {
         return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsRetrieve({
             kpUuid: pk,
@@ -40,14 +46,16 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} name="name" required>
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+        return html`<ak-text-input
+                label=${msg("Certificate Name")}
+                name="name"
+                required
+                value="${ifDefined(this.instance?.name)}"
+                placeholder=${msg("Type a name for this certificate-key pair...")}
+                autofocus
+                autocomplete="off"
+                spellcheck="false"
+            ></ak-text-input>
             <ak-secret-textarea-input
                 label=${msg("Certificate")}
                 name="certificateData"
@@ -59,6 +67,7 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
             ></ak-secret-textarea-input>
             <ak-secret-textarea-input
                 label=${msg("Private Key")}
+                placeholder="-----BEGIN PRIVATE KEY-----"
                 name="keyData"
                 input-hint="code"
                 ?revealed=${!this.instance}
@@ -71,6 +80,6 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-crypto-certificate-form": CertificateKeyPairForm;
+        "ak-crypto-certificate-form": CryptoCertificateForm;
     }
 }
diff --git a/web/src/admin/crypto/CertificateKeyPairListPage.ts b/web/src/admin/crypto/CertificateKeyPairListPage.ts
index 775643b36ef7..a33b4950048c 100644
--- a/web/src/admin/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/admin/crypto/CertificateKeyPairListPage.ts
@@ -9,36 +9,41 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { ModalInvokerButton } from "#elements/dialogs";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { CryptoCertificateGenerateForm } from "#admin/crypto/CertificateGenerateForm";
+import { CryptoCertificateForm } from "#admin/crypto/CertificateKeyPairForm";
+
 import { CertificateKeyPair, CryptoApi, ModelEnum } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, html, nothing, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { CSSResult, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
 
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 @customElement("ak-crypto-certificate-list")
 export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
-    expandable = true;
-    checkbox = true;
-    clearOnRefresh = true;
+    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
+
+    public override expandable = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for a certificate or key name...");
 
     protected override searchEnabled = true;
+
     public pageTitle = msg("Certificate-Key Pairs");
     public pageDescription = msg(
         "Import certificates of external providers or create certificates to sign requests with.",
     );
     public pageIcon = "pf-icon pf-icon-key";
 
-    @property()
-    order = "name";
-
-    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
+    public override order = "name";
 
     async apiEndpoint(): Promise<PaginatedResponse<CertificateKeyPair>> {
         return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
@@ -53,7 +58,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         const count = this.selectedElements.length;
         return html`<ak-forms-delete-bulk
@@ -82,7 +87,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: CertificateKeyPair): SlottedTemplateResult[] {
+    protected override row(item: CertificateKeyPair): SlottedTemplateResult[] {
         let managedSubText = msg("Managed by authentik");
         if (item.managed && item.managed.startsWith("goauthentik.io/crypto/discovered")) {
             managedSubText = msg("Managed by authentik (Discovered)");
@@ -130,7 +135,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
         ];
     }
 
-    renderExpanded(item: CertificateKeyPair): TemplateResult {
+    protected override renderExpanded(item: CertificateKeyPair): SlottedTemplateResult {
         return html`<dl class="pf-c-description-list pf-m-horizontal">
             <div class="pf-c-description-list__group">
                 <dt class="pf-c-description-list__term">
@@ -188,24 +193,13 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
         </dl>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Import")}</span>
-                <span slot="header">${msg("Import Existing Certificate-Key Pair")}</span>
-                <ak-crypto-certificate-form slot="form"> </ak-crypto-certificate-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Import")}</button>
-            </ak-forms-modal>
-            <ak-forms-modal>
-                <span slot="submit">${msg("Generate")}</span>
-                <span slot="header">${msg("Generate New Certificate-Key Pair")}</span>
-                <ak-crypto-certificate-generate-form slot="form">
-                </ak-crypto-certificate-generate-form>
-                <button slot="trigger" class="pf-c-button pf-m-secondary">
-                    ${msg("Generate")}
-                </button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return [
+            ModalInvokerButton(CryptoCertificateForm),
+            ModalInvokerButton(CryptoCertificateGenerateForm, null, {
+                kind: "secondary",
+            }),
+        ];
     }
 }
 
diff --git a/web/src/admin/endpoints/DeviceAccessGroupForm.ts b/web/src/admin/endpoints/DeviceAccessGroupForm.ts
index d2994b7a8b89..1870f98868df 100644
--- a/web/src/admin/endpoints/DeviceAccessGroupForm.ts
+++ b/web/src/admin/endpoints/DeviceAccessGroupForm.ts
@@ -2,6 +2,7 @@ import "#components/ak-text-input";
 import "#elements/forms/HorizontalFormElement";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
 
 import { ModelForm } from "#elements/forms/ModelForm";
 import { WithBrandConfig } from "#elements/mixins/branding";
@@ -20,35 +21,42 @@ import { ifDefined } from "lit/directives/if-defined.js";
  */
 @customElement("ak-endpoints-device-access-groups-form")
 export class DeviceAccessGroupForm extends WithBrandConfig(ModelForm<DeviceAccessGroup, string>) {
-    loadInstance(pk: string): Promise<DeviceAccessGroup> {
+    public static override verboseName = msg("Device Access Group");
+    public static override verboseNamePlural = msg("Device Access Groups");
+
+    public override size = PFSize.Small;
+
+    protected override loadInstance(pk: string): Promise<DeviceAccessGroup> {
         return new EndpointsApi(DEFAULT_CONFIG).endpointsDeviceAccessGroupsRetrieve({
             pbmUuid: pk,
         });
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated group.")
             : msg("Successfully created group.");
     }
 
-    async send(data: DeviceAccessGroup): Promise<DeviceAccessGroup> {
+    protected override async send(data: DeviceAccessGroup): Promise<DeviceAccessGroup> {
         if (this.instance) {
             return new EndpointsApi(DEFAULT_CONFIG).endpointsDeviceAccessGroupsPartialUpdate({
                 pbmUuid: this.instance.pbmUuid,
                 patchedDeviceAccessGroupRequest: data,
             });
         }
+
         return new EndpointsApi(DEFAULT_CONFIG).endpointsDeviceAccessGroupsCreate({
             deviceAccessGroupRequest: data as unknown as DeviceAccessGroupRequest,
         });
     }
 
-    renderForm() {
+    protected override renderForm() {
         return html`<ak-text-input
             name="name"
-            placeholder=${msg("Group name...")}
-            label=${msg("Group name")}
+            autocomplete="off"
+            placeholder=${msg("Type a group name...")}
+            label=${msg("Group Name")}
             value=${ifDefined(this.instance?.name)}
             required
         ></ak-text-input>`;
diff --git a/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts b/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts
index a218b9eb2844..314e095c469f 100644
--- a/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts
+++ b/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts
@@ -6,10 +6,13 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { DeviceAccessGroupForm } from "#admin/endpoints/DeviceAccessGroupForm";
+
 import { DeviceAccessGroup, EndpointsApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
@@ -28,49 +31,33 @@ export class DeviceAccessGroupsListPage extends TablePage<DeviceAccessGroup> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    checkbox = true;
-    expandable = true;
+    public override checkbox = true;
+    public override expandable = true;
 
-    async apiEndpoint(): Promise<PaginatedResponse<DeviceAccessGroup>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<DeviceAccessGroup>> {
         return new EndpointsApi(DEFAULT_CONFIG).endpointsDeviceAccessGroupsList(
             await this.defaultEndpointConfig(),
         );
     }
 
-    row(item: DeviceAccessGroup): SlottedTemplateResult[] {
+    protected override row(item: DeviceAccessGroup): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Group")}</span>
-                    <ak-endpoints-device-access-groups-form slot="form" .instancePk=${item.pbmUuid}>
-                    </ak-endpoints-device-access-groups-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            // ---
+            item.name,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(DeviceAccessGroupForm, item.pbmUuid)}
             </div>`,
         ];
     }
 
-    renderExpanded(item: DeviceAccessGroup) {
+    protected override renderExpanded(item: DeviceAccessGroup) {
         return html`<div class="pf-c-content">
             <ak-bound-policies-list .target=${item.pbmUuid}></ak-bound-policies-list>
         </div>`;
     }
 
-    renderObjectCreate() {
-        return html`<ak-forms-modal>
-            <span slot="submit">${msg("Create")}</span>
-            <span slot="header">${msg("Create Device Group")}</span>
-            <ak-endpoints-device-access-groups-form
-                slot="form"
-            ></ak-endpoints-device-access-groups-form>
-            <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-        </ak-forms-modal>`;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(DeviceAccessGroupForm);
     }
 
     renderToolbarSelected() {
diff --git a/web/src/admin/endpoints/ak-endpoints-device-group-search.ts b/web/src/admin/endpoints/ak-endpoints-device-group-search.ts
index faf16a6b2006..aa07fcf69ede 100644
--- a/web/src/admin/endpoints/ak-endpoints-device-group-search.ts
+++ b/web/src/admin/endpoints/ak-endpoints-device-group-search.ts
@@ -10,6 +10,7 @@ import {
     EndpointsDeviceAccessGroupsListRequest,
 } from "@goauthentik/api";
 
+import { msg } from "@lit/localize";
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 
@@ -85,6 +86,7 @@ export class EndpointsDeviceAccessGroupSearch extends CustomListenerElement(AKEl
     render() {
         return html`
             <ak-search-select
+                placeholder=${msg("Select a device access group...")}
                 .fetchObjects=${fetchObjects}
                 .renderElement=${renderElement}
                 .value=${renderValue}
diff --git a/web/src/admin/endpoints/connectors/ConnectorsListPage.ts b/web/src/admin/endpoints/connectors/ConnectorsListPage.ts
index 442748ba120d..66fbc14dee15 100644
--- a/web/src/admin/endpoints/connectors/ConnectorsListPage.ts
+++ b/web/src/admin/endpoints/connectors/ConnectorsListPage.ts
@@ -7,15 +7,16 @@ import "#elements/forms/ModalForm";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
+
+import { AKEndpointConnectorWizard } from "#admin/endpoints/connectors/ConnectorWizard";
 
 import { Connector, EndpointsApi } from "@goauthentik/api";
 
-import { msg, str } from "@lit/localize";
+import { msg } from "@lit/localize";
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
 
@@ -45,32 +46,25 @@ export class ConnectorsListPage extends TablePage<Connector> {
     row(item: Connector): SlottedTemplateResult[] {
         return [
             html`<a href="#/endpoints/connectors/${item.connectorUuid}">${item.name}</a>`,
-            html`${item.verboseName}`,
-            html`<div>
-                <ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                        slot: "form",
-                        instancePk: item.connectorUuid,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.verboseName}`, {
-                            id: "form.headline.update",
-                        }),
-                    })}
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.verboseName,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.connectorUuid, item.verboseName)}
             </div>`,
         ];
     }
 
-    renderObjectCreate() {
-        return html`<ak-endpoint-connector-wizard></ak-endpoint-connector-wizard> `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return html`<button
+            class="pf-c-button pf-m-primary"
+            type="button"
+            aria-description="${msg("Open the wizard to create a new connector.")}"
+            ${AKEndpointConnectorWizard.asModalInvoker()}
+        >
+            ${msg("New Connector")}
+        </button>`;
     }
 
-    renderToolbarSelected() {
+    protected override renderToolbarSelected() {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Connector(s)")}
diff --git a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenForm.ts b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenForm.ts
index fa718ff1be88..78dd70805ce0 100644
--- a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenForm.ts
+++ b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenForm.ts
@@ -29,13 +29,18 @@ const EXPIRATION_DURATION = 30 * 60 * 1000; // 30 minutes
  */
 @customElement("ak-endpoints-agent-enrollment-token-form")
 export class EnrollmentTokenForm extends WithBrandConfig(ModelForm<EnrollmentToken, string>) {
+    #api = new EndpointsApi(DEFAULT_CONFIG);
+
+    public static override verboseName = msg("Enrollment Token");
+    public static override verboseNamePlural = msg("Enrollment Tokens");
+
     protected expirationMinimumDate = new Date();
 
     @state()
     protected expiresAt: Date | null = new Date(Date.now() + EXPIRATION_DURATION);
 
     @property({ type: String, attribute: "connector-id" })
-    public connectorID?: string;
+    public connectorID: string | null = null;
 
     public override reset(): void {
         super.reset();
@@ -57,25 +62,25 @@ export class EnrollmentTokenForm extends WithBrandConfig(ModelForm<EnrollmentTok
         return token;
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated token.")
             : msg("Successfully created token.");
     }
 
-    async send(data: EnrollmentToken): Promise<EnrollmentToken> {
+    protected override async send(data: EnrollmentToken): Promise<EnrollmentToken> {
         if (!this.instance) {
             data.connector = this.connectorID || "";
         } else {
             data.connector = this.instance.connector;
         }
         if (this.instance) {
-            return new EndpointsApi(DEFAULT_CONFIG).endpointsAgentsEnrollmentTokensPartialUpdate({
+            return this.#api.endpointsAgentsEnrollmentTokensPartialUpdate({
                 tokenUuid: this.instance.tokenUuid,
                 patchedEnrollmentTokenRequest: data,
             });
         }
-        return new EndpointsApi(DEFAULT_CONFIG).endpointsAgentsEnrollmentTokensCreate({
+        return this.#api.endpointsAgentsEnrollmentTokensCreate({
             enrollmentTokenRequest: data as unknown as EnrollmentTokenRequest,
         });
     }
@@ -102,7 +107,7 @@ export class EnrollmentTokenForm extends WithBrandConfig(ModelForm<EnrollmentTok
 
     //#region Rendering
 
-    renderForm() {
+    protected override renderForm() {
         return html`<ak-text-input
                 name="name"
                 placeholder=${msg("Type a name for the token...")}
@@ -148,7 +153,7 @@ export class EnrollmentTokenForm extends WithBrandConfig(ModelForm<EnrollmentTok
                     ?disabled=${!this.expiresAt}
                     class="pf-c-form-control"
                 />
-            </ak-form-element-horizontal> `;
+            </ak-form-element-horizontal>`;
     }
 
     //#endregion
diff --git a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts
index 18dd83e86680..17d75c75ff17 100644
--- a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts
+++ b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts
@@ -1,6 +1,5 @@
 import "#admin/rbac/ObjectPermissionModal";
 import "#admin/endpoints/connectors/agent/EnrollmentTokenForm";
-import "#admin/endpoints/connectors/agent/ak-enrollment-token-copy-button";
 import "#elements/buttons/SpinnerButton/index";
 import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
@@ -9,9 +8,14 @@ import "#components/ak-status-label";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEnrollmentTokenCopyButton } from "#elements/buttons/IconEnrollmentTokenCopyButton";
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, Table, TableColumn, Timestamp } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { EnrollmentTokenForm } from "#admin/endpoints/connectors/agent/EnrollmentTokenForm";
+
 import { AgentConnector, EndpointsApi, EnrollmentToken, ModelEnum } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
@@ -20,19 +24,23 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-endpoints-agent-enrollment-token-list")
 export class EnrollmentTokenListPage extends Table<EnrollmentToken> {
-    checkbox = true;
-    clearOnRefresh = true;
+    #api = new EndpointsApi(DEFAULT_CONFIG);
 
     protected override searchEnabled = true;
+    protected emptyStateMessage = msg("No enrollment tokens found for this connector.");
+
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+
+    public override searchPlaceholder = msg("Search for an enrollment token...");
 
-    @property()
-    order = "name";
+    public override order = "name";
 
     @property({ attribute: false })
-    connector?: AgentConnector;
+    public connector: AgentConnector | null = null;
 
-    async apiEndpoint(): Promise<PaginatedResponse<EnrollmentToken>> {
-        return new EndpointsApi(DEFAULT_CONFIG).endpointsAgentsEnrollmentTokensList({
+    protected override async apiEndpoint(): Promise<PaginatedResponse<EnrollmentToken>> {
+        return this.#api.endpointsAgentsEnrollmentTokensList({
             ...(await this.defaultEndpointConfig()),
             connector: this.connector?.connectorUuid,
         });
@@ -46,8 +54,9 @@ export class EnrollmentTokenListPage extends Table<EnrollmentToken> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): TemplateResult {
         const disabled = this.selectedElements.length < 1;
+
         return html`<ak-forms-delete-bulk
             object-label=${msg("Enrollment Token(s)")}
             .objects=${this.selectedElements}
@@ -58,12 +67,12 @@ export class EnrollmentTokenListPage extends Table<EnrollmentToken> {
                 ];
             }}
             .usedBy=${(item: EnrollmentToken) => {
-                return new EndpointsApi(DEFAULT_CONFIG).endpointsAgentsEnrollmentTokensUsedByList({
+                return this.#api.endpointsAgentsEnrollmentTokensUsedByList({
                     tokenUuid: item.tokenUuid,
                 });
             }}
             .delete=${(item: EnrollmentToken) => {
-                return new EndpointsApi(DEFAULT_CONFIG).endpointsAgentsEnrollmentTokensDestroy({
+                return this.#api.endpointsAgentsEnrollmentTokensDestroy({
                     tokenUuid: item.tokenUuid,
                 });
             }}
@@ -74,54 +83,27 @@ export class EnrollmentTokenListPage extends Table<EnrollmentToken> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: EnrollmentToken): SlottedTemplateResult[] {
+    protected override row(item: EnrollmentToken): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
-            html`${item.deviceGroupObj?.name || "-"}`,
+            item.name,
+            item.deviceGroupObj?.name || msg("-"),
             html`<ak-status-label type="warning" ?good=${item.expiring}></ak-status-label>`,
             Timestamp(item.expires && item.expiring ? item.expires : null),
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Enrollment Token")}</span>
-                    <ak-endpoints-agent-enrollment-token-form
-                        slot="form"
-                        .instancePk=${item.tokenUuid}
-                    >
-                    </ak-endpoints-agent-enrollment-token-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal
-                    model=${ModelEnum.AuthentikEndpointsConnectorsAgentEnrollmenttoken}
-                    objectPk=${item.tokenUuid}
-                >
-                </ak-rbac-object-permission-modal>
-                <ak-enrollment-token-copy-button .identifier=${item.tokenUuid}>
-                    <pf-tooltip position="top" content=${msg("Copy token")}>
-                        <i class="fas fa-copy" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </ak-enrollment-token-copy-button>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(EnrollmentTokenForm, item.tokenUuid, item.name)}
+                ${IconPermissionButton(item.name, {
+                    model: ModelEnum.AuthentikEndpointsConnectorsAgentEnrollmenttoken,
+                    objectPk: item.tokenUuid,
+                })}
+                ${IconEnrollmentTokenCopyButton(item.tokenUuid)}
             </div>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Enrollment Token")}</span>
-                <ak-endpoints-agent-enrollment-token-form
-                    slot="form"
-                    .connectorID=${this.connector?.connectorUuid}
-                >
-                </ak-endpoints-agent-enrollment-token-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(EnrollmentTokenForm, {
+            connectorID: this.connector?.connectorUuid,
+        });
     }
 }
 
diff --git a/web/src/admin/endpoints/connectors/agent/ak-enrollment-token-copy-button.ts b/web/src/admin/endpoints/connectors/agent/ak-enrollment-token-copy-button.ts
deleted file mode 100644
index 0ef9bb85144e..000000000000
--- a/web/src/admin/endpoints/connectors/agent/ak-enrollment-token-copy-button.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DEFAULT_CONFIG } from "#common/api/config";
-import { writeToClipboard } from "#common/clipboard";
-
-import TokenCopyButton from "#elements/buttons/TokenCopyButton/ak-token-copy-button";
-
-import { EndpointsApi } from "@goauthentik/api";
-
-import { msg } from "@lit/localize";
-import { customElement } from "lit/decorators.js";
-
-@customElement("ak-enrollment-token-copy-button")
-export class EnrollmentTokenCopyButton extends TokenCopyButton {
-    public override entityLabel = msg("Enrollment Token");
-
-    public override callAction(): Promise<null> {
-        if (!this.identifier) {
-            throw new TypeError("No `identifier` set for `EnrollmentTokenCopyButton`");
-        }
-
-        // Safari permission hack.
-        const text = new ClipboardItem({
-            "text/plain": new EndpointsApi(DEFAULT_CONFIG)
-                .endpointsAgentsEnrollmentTokensViewKeyRetrieve({
-                    tokenUuid: this.identifier,
-                })
-                .then((tokenView) => new Blob([tokenView.key], { type: "text/plain" })),
-        });
-
-        return writeToClipboard(text, this.entityLabel).then(() => null);
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-enrollment-token-copy-button": EnrollmentTokenCopyButton;
-    }
-}
diff --git a/web/src/admin/endpoints/connectors/fleet/FleetConnectorForm.ts b/web/src/admin/endpoints/connectors/fleet/FleetConnectorForm.ts
index 804688f9803d..79ec4fa37564 100644
--- a/web/src/admin/endpoints/connectors/fleet/FleetConnectorForm.ts
+++ b/web/src/admin/endpoints/connectors/fleet/FleetConnectorForm.ts
@@ -42,7 +42,8 @@ export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
     renderForm() {
         return html`<ak-text-input
                 name="name"
-                placeholder=${msg("Connector name...")}
+                autofocus
+                placeholder=${msg("Type a connector name...")}
                 label=${msg("Connector name")}
                 value=${this.instance?.name ?? ""}
                 required
@@ -57,6 +58,7 @@ export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
                     <ak-text-input
                         name="url"
                         label=${msg("Fleet Server URL")}
+                        inputmode="url"
                         value=${this.instance?.url ?? ""}
                         required
                         input-hint="code"
@@ -64,6 +66,7 @@ export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
                     </ak-text-input>
                     <ak-secret-text-input
                         label=${msg("Fleet API Token")}
+                        placeholder=${msg("Provide your Fleet API token...")}
                         name="token"
                         ?revealed=${!this.instance}
                     ></ak-secret-text-input>
diff --git a/web/src/admin/endpoints/connectors/gdtc/GoogleChromeConnectorForm.ts b/web/src/admin/endpoints/connectors/gdtc/GoogleChromeConnectorForm.ts
index ea2108669c50..6e83d3786cc4 100644
--- a/web/src/admin/endpoints/connectors/gdtc/GoogleChromeConnectorForm.ts
+++ b/web/src/admin/endpoints/connectors/gdtc/GoogleChromeConnectorForm.ts
@@ -43,7 +43,8 @@ export class GoogleChromeConnectorForm extends ModelForm<GoogleChromeConnector,
     renderForm() {
         return html`<ak-text-input
                 name="name"
-                placeholder=${msg("Connector name...")}
+                autofocus
+                placeholder=${msg("Type a connector name...")}
                 label=${msg("Connector name")}
                 value=${this.instance?.name ?? ""}
                 required
diff --git a/web/src/admin/endpoints/devices/DeviceListPage.ts b/web/src/admin/endpoints/devices/DeviceListPage.ts
index d821755f2829..fe36ea5d3718 100644
--- a/web/src/admin/endpoints/devices/DeviceListPage.ts
+++ b/web/src/admin/endpoints/devices/DeviceListPage.ts
@@ -59,7 +59,7 @@ export class DeviceListPage extends TablePage<EndpointDevice> {
         );
     }
 
-    protected renderEmpty(inner?: TemplateResult): TemplateResult {
+    protected renderEmpty(inner?: TemplateResult): SlottedTemplateResult {
         return super.renderEmpty(html`
             ${inner
                 ? inner
diff --git a/web/src/admin/enterprise/EnterpriseLicenseForm.ts b/web/src/admin/enterprise/EnterpriseLicenseForm.ts
index 48cc6b2b60ba..d07eeeeb8c9e 100644
--- a/web/src/admin/enterprise/EnterpriseLicenseForm.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseForm.ts
@@ -1,4 +1,5 @@
 import "#components/ak-secret-textarea-input";
+import "#components/ak-text-input";
 import "#elements/CodeMirror";
 import "#elements/forms/HorizontalFormElement";
 
@@ -6,16 +7,24 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { EVENT_REFRESH_ENTERPRISE } from "#common/constants";
 
 import { ModelForm } from "#elements/forms/ModelForm";
+import { SlottedTemplateResult } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
 
 import { EnterpriseApi, License } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 @customElement("ak-enterprise-license-form")
 export class EnterpriseLicenseForm extends ModelForm<License, string> {
+    public static override verboseName = msg("Enterprise License");
+    public static override verboseNamePlural = msg("Enterprise Licenses");
+    public static override createLabel = msg("Install");
+    public static override submitVerb = msg("Install");
+
+    #api = new EnterpriseApi(DEFAULT_CONFIG);
+
     @state()
     protected installID: string | null = null;
 
@@ -26,7 +35,7 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
     }
 
     loadInstance(pk: string): Promise<License> {
-        return new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseRetrieve({
+        return this.#api.enterpriseLicenseRetrieve({
             licenseUuid: pk,
         });
     }
@@ -38,19 +47,17 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
     }
 
     async load(): Promise<void> {
-        this.installID = (
-            await new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseInstallIdRetrieve()
-        ).installId;
+        this.installID = (await this.#api.enterpriseLicenseInstallIdRetrieve()).installId;
     }
 
     async send(data: License): Promise<License> {
         return (
             this.instance
-                ? new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicensePartialUpdate({
+                ? this.#api.enterpriseLicensePartialUpdate({
                       licenseUuid: this.instance.licenseUuid || "",
                       patchedLicenseRequest: data,
                   })
-                : new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseCreate({
+                : this.#api.enterpriseLicenseCreate({
                       licenseRequest: data,
                   })
         ).then((data) => {
@@ -59,19 +66,21 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
         });
     }
 
-    protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Install ID")}>
-                <input
-                    class="pf-c-form-control pf-m-monospace"
-                    autocomplete="off"
-                    spellcheck="false"
-                    readonly
-                    type="text"
-                    value="${ifPresent(this.installID)}"
-                />
-            </ak-form-element-horizontal>
+    protected override renderForm(): SlottedTemplateResult {
+        return html`<ak-text-input
+                label=${msg("Install ID")}
+                autocomplete="off"
+                spellcheck="false"
+                readonly
+                type="text"
+                name="installID"
+                input-hint="code"
+                value="${ifPresent(this.installID)}"
+            >
+            </ak-text-input>
             <ak-secret-textarea-input
                 name="key"
+                ?required=${!this.instance}
                 ?revealed=${!this.instance}
                 placeholder=${msg("Paste your license key...")}
                 label=${msg("License key")}
diff --git a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
index dafafcaf4c1b..d1c1450da495 100644
--- a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
@@ -11,11 +11,14 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { docLink } from "#common/global";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { EnterpriseLicenseForm } from "#admin/enterprise/EnterpriseLicenseForm";
+
 import {
     EnterpriseApi,
     License,
@@ -96,7 +99,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
 
     // TODO: Make this more generic, maybe automatically get the plural name
     // of the object to use in the renderEmpty
-    renderEmpty(inner?: TemplateResult): TemplateResult {
+    renderEmpty(inner?: TemplateResult): SlottedTemplateResult {
         return super.renderEmpty(html`
             ${inner
                 ? inner
@@ -219,18 +222,9 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
             html`<div>${msg(str`Internal: ${item.internalUsers}`)}</div>
                 <div>${msg(str`External: ${item.externalUsers}`)}</div>`,
             html`<ak-label color=${color}> ${item.expiry?.toLocaleString()} </ak-label>`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update License")}</span>
-                    <ak-enterprise-license-form slot="form" .instancePk=${item.licenseUuid}>
-                    </ak-enterprise-license-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(EnterpriseLicenseForm, item.licenseUuid, item.name)}
+
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikEnterpriseLicense}
                     objectPk=${item.licenseUuid}
@@ -277,15 +271,8 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
         </div> `;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Install")}</span>
-                <span slot="header">${msg("Install License")}</span>
-                <ak-enterprise-license-form slot="form"> </ak-enterprise-license-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Install")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(EnterpriseLicenseForm);
     }
 }
 
diff --git a/web/src/admin/events/DataExportListPage.ts b/web/src/admin/events/DataExportListPage.ts
index ffae823f076e..e4ab7f69cc3b 100644
--- a/web/src/admin/events/DataExportListPage.ts
+++ b/web/src/admin/events/DataExportListPage.ts
@@ -120,7 +120,7 @@ export class DataExportListPage extends TablePage<DataExport> {
         </dl>`;
     }
 
-    protected renderEmpty(_inner?: TemplateResult): TemplateResult {
+    protected renderEmpty(_inner?: TemplateResult): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state icon=${this.pageIcon}
                 ><span
diff --git a/web/src/admin/events/ObjectChangelog.ts b/web/src/admin/events/ObjectChangelog.ts
index f61a91dec4d4..ac0c7de294df 100644
--- a/web/src/admin/events/ObjectChangelog.ts
+++ b/web/src/admin/events/ObjectChangelog.ts
@@ -16,7 +16,7 @@ import { EventGeo, renderEventUser } from "#admin/events/utils";
 import { Event, EventsApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, PropertyValues, TemplateResult } from "lit";
+import { html, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-object-changelog")
@@ -82,11 +82,11 @@ export class ObjectChangelog extends Table<Event> {
         ];
     }
 
-    renderExpanded(item: Event): TemplateResult {
+    renderExpanded(item: Event): SlottedTemplateResult {
         return html`<ak-event-info .event=${item as EventWithContext}></ak-event-info>`;
     }
 
-    renderEmpty(): TemplateResult {
+    renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state
                 ><span>${msg("No Events found.")}</span>
diff --git a/web/src/admin/events/RuleForm.ts b/web/src/admin/events/RuleForm.ts
index 36f0f8a6f652..e8e6be509960 100644
--- a/web/src/admin/events/RuleForm.ts
+++ b/web/src/admin/events/RuleForm.ts
@@ -1,4 +1,5 @@
 import "#components/ak-switch-input";
+import "#components/ak-text-input";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/Radio";
@@ -29,6 +30,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-event-rule-form")
 export class RuleForm extends ModelForm<NotificationRule, string> {
+    public static verboseName = msg("Notification Rule");
+    public static verboseNamePlural = msg("Notification Rules");
+
     eventTransports?: PaginatedNotificationTransportList;
 
     loadInstance(pk: string): Promise<NotificationRule> {
@@ -62,23 +66,24 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+        return html` <ak-text-input
+                required
+                autocomplete="off"
+                name="name"
+                label=${msg("Rule Name")}
+                placeholder=${msg("Type a name for this rule...")}
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-form-element-horizontal label=${msg("Group")} name="destinationGroup">
                 <ak-search-select
+                    placeholder=${msg("Select a group...")}
                     .fetchObjects=${async (query?: string): Promise<Group[]> => {
                         const args: CoreGroupsListRequest = {
                             ordering: "name",
                             includeUsers: false,
                         };
 
-                        if (query !== undefined) {
+                        if (typeof query !== "undefined") {
                             args.search = query;
                         }
 
diff --git a/web/src/admin/events/RuleListPage.ts b/web/src/admin/events/RuleListPage.ts
index 0333fd59e0d0..14054e995e13 100644
--- a/web/src/admin/events/RuleListPage.ts
+++ b/web/src/admin/events/RuleListPage.ts
@@ -11,10 +11,13 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { severityToLabel } from "#common/labels";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { RuleForm } from "#admin/events/RuleForm";
+
 import { EventsApi, ModelEnum, NotificationRule } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
@@ -23,9 +26,9 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-event-rule-list")
 export class RuleListPage extends TablePage<NotificationRule> {
-    expandable = true;
-    checkbox = true;
-    clearOnRefresh = true;
+    public override expandable = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
     protected override searchEnabled = true;
     public pageTitle = msg("Notification Rules");
@@ -35,9 +38,9 @@ export class RuleListPage extends TablePage<NotificationRule> {
     public pageIcon = "pf-icon pf-icon-attention-bell";
 
     @property()
-    order = "name";
+    public order = "name";
 
-    async apiEndpoint(): Promise<PaginatedResponse<NotificationRule>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<NotificationRule>> {
         return new EventsApi(DEFAULT_CONFIG).eventsRulesList(await this.defaultEndpointConfig());
     }
 
@@ -49,7 +52,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): TemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Notification rule(s)")}
@@ -71,7 +74,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: NotificationRule): SlottedTemplateResult[] {
+    protected override row(item: NotificationRule): SlottedTemplateResult[] {
         const enabled = !!item.destinationGroupObj || item.destinationEventUser;
         return [
             html`<ak-status-label type="warning" ?good=${enabled}></ak-status-label>`,
@@ -82,17 +85,8 @@ export class RuleListPage extends TablePage<NotificationRule> {
                       >${item.destinationGroupObj.name}</a
                   >`
                 : msg("-")}`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Notification Rule")}</span>
-                    <ak-event-rule-form slot="form" .instancePk=${item.pk}> </ak-event-rule-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(RuleForm, item.pk, item.name)}
 
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikEventsNotificationrule}
@@ -103,19 +97,13 @@ export class RuleListPage extends TablePage<NotificationRule> {
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Notification Rule")}</span>
-                <ak-event-rule-form slot="form"> </ak-event-rule-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(RuleForm);
     }
 
-    renderExpanded(item: NotificationRule): TemplateResult {
+    protected override renderExpanded(item: NotificationRule): TemplateResult {
         const [appLabel, modelName] = ModelEnum.AuthentikEventsNotificationrule.split(".");
+
         return html`<p>
                 ${msg(
                     `These bindings control upon which events this rule triggers.
diff --git a/web/src/admin/events/SimpleEventTable.ts b/web/src/admin/events/SimpleEventTable.ts
index 71e0359a1086..30448a32fe6a 100644
--- a/web/src/admin/events/SimpleEventTable.ts
+++ b/web/src/admin/events/SimpleEventTable.ts
@@ -5,13 +5,14 @@ import { EventWithContext } from "#common/events";
 import { actionToLabel } from "#common/labels";
 
 import { PaginatedResponse, RowType, Table, TableColumn, Timestamp } from "#elements/table/Table";
+import { SlottedTemplateResult } from "#elements/types";
 
 import { EventGeo, renderEventUser } from "#admin/events/utils";
 
 import { Event, EventsApi, EventsEventsListRequest } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit-html";
+import { html } from "lit-html";
 import { property } from "lit/decorators.js";
 
 export abstract class SimpleEventTable extends Table<Event> {
@@ -57,11 +58,11 @@ export abstract class SimpleEventTable extends Table<Event> {
         ];
     }
 
-    renderExpanded(item: Event): TemplateResult {
+    protected override renderExpanded(item: Event): SlottedTemplateResult {
         return html`<ak-event-info .event=${item as EventWithContext}></ak-event-info>`;
     }
 
-    renderEmpty(): TemplateResult {
+    protected override renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state
                 ><span>${msg("No Events found.")}</span>
diff --git a/web/src/admin/events/TransportForm.ts b/web/src/admin/events/TransportForm.ts
index 181f4510d197..8656dddfaae7 100644
--- a/web/src/admin/events/TransportForm.ts
+++ b/web/src/admin/events/TransportForm.ts
@@ -1,5 +1,6 @@
 import "#components/ak-hidden-text-input";
 import "#components/ak-switch-input";
+import "#components/ak-text-input";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/Radio";
 import "#elements/forms/SearchSelect/index";
@@ -27,6 +28,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-event-transport-form")
 export class TransportForm extends ModelForm<NotificationTransport, string> {
+    public static override verboseName = msg("Notification Transport");
+    public static override verboseNamePlural = msg("Notification Transports");
+
     loadInstance(pk: string): Promise<NotificationTransport> {
         return new EventsApi(DEFAULT_CONFIG)
             .eventsTransportsRetrieve({
@@ -88,15 +92,16 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html`
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+        return html`<ak-text-input
+                label=${msg("Transport Name")}
+                placeholder=${msg("Type a name for this transport...")}
+                autofocus
+                spellcheck="false"
+                autocomplete="off"
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-switch-input
                 name="sendOnce"
                 label=${msg("Send once")}
@@ -248,8 +253,7 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
                         </option>`;
                     })}
                 </select>
-            </ak-form-element-horizontal>
-        `;
+            </ak-form-element-horizontal> `;
     }
 }
 
diff --git a/web/src/admin/events/TransportListPage.ts b/web/src/admin/events/TransportListPage.ts
index 105031020f3b..27977efe226b 100644
--- a/web/src/admin/events/TransportListPage.ts
+++ b/web/src/admin/events/TransportListPage.ts
@@ -9,15 +9,18 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { TransportForm } from "#admin/events/TransportForm";
+
 import { EventsApi, ModelEnum, NotificationTransport } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-event-transport-list")
 export class TransportListPage extends TablePage<NotificationTransport> {
@@ -28,26 +31,25 @@ export class TransportListPage extends TablePage<NotificationTransport> {
     );
     public pageIcon = "pf-icon pf-icon-export";
 
-    checkbox = true;
-    clearOnRefresh = true;
-    expandable = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override expandable = true;
 
-    @property()
-    order = "name";
+    public override order = "name";
 
-    async apiEndpoint(): Promise<PaginatedResponse<NotificationTransport>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<NotificationTransport>> {
         return new EventsApi(DEFAULT_CONFIG).eventsTransportsList(
             await this.defaultEndpointConfig(),
         );
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Mode"), "mode"],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Notification transport(s)")}
@@ -69,22 +71,12 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: NotificationTransport): SlottedTemplateResult[] {
+    protected override row(item: NotificationTransport): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
-            html`${item.modeVerbose}`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Notification Transport")}</span>
-                    <ak-event-transport-form slot="form" .instancePk=${item.pk}>
-                    </ak-event-transport-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.name,
+            item.modeVerbose,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(TransportForm, item.pk, item.name)}
 
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikEventsNotificationtransport}
@@ -107,7 +99,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         ];
     }
 
-    renderExpanded(item: NotificationTransport): TemplateResult {
+    protected override renderExpanded(item: NotificationTransport): SlottedTemplateResult {
         const [appLabel, modelName] = ModelEnum.AuthentikEventsNotificationtransport.split(".");
         return html`<dl class="pf-c-description-list pf-m-horizontal">
             <div class="pf-c-description-list__group">
@@ -127,15 +119,8 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         </dl>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Notification Transport")}</span>
-                <ak-event-transport-form slot="form"> </ak-event-transport-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(TransportForm);
     }
 }
 
diff --git a/web/src/admin/flows/BoundStagesList.ts b/web/src/admin/flows/BoundStagesList.ts
index b8f980de80f0..6f317d38d230 100644
--- a/web/src/admin/flows/BoundStagesList.ts
+++ b/web/src/admin/flows/BoundStagesList.ts
@@ -1,24 +1,27 @@
 import "#admin/flows/StageBindingForm";
 import "#admin/policies/BoundPoliciesList";
 import "#admin/rbac/ObjectPermissionModal";
-import "#admin/stages/StageWizard";
 import "#elements/Tabs";
 import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { modalInvoker } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { CustomFormElementTagName } from "#elements/forms/unsafe";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 import { StrictUnsafe } from "#elements/utils/unsafe";
 
+import { StageBindingForm } from "#admin/flows/StageBindingForm";
+import { AKStageWizard } from "#admin/stages/ak-stage-wizard";
+
 import { FlowsApi, FlowStageBinding, ModelEnum } from "@goauthentik/api";
 
-import { msg, str } from "@lit/localize";
+import { msg } from "@lit/localize";
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-bound-stages-list")
 export class BoundStagesList extends Table<FlowStageBinding> {
@@ -80,39 +83,56 @@ export class BoundStagesList extends Table<FlowStageBinding> {
     row(item: FlowStageBinding): SlottedTemplateResult[] {
         return [
             html`<pre>${item.order}</pre>`,
-            html`${item.stageObj?.name}`,
-            html`${item.stageObj?.verboseName}`,
-            html` <ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.stageObj?.component, {
-                        slot: "form",
-                        instancePk: item.stageObj?.pk,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.stageObj?.verboseName}`, {
-                            id: "form.headline.update",
+            item.stageObj?.name,
+            item.stageObj?.verboseName,
+            html`<div class="ak-c-table__actions">
+                <button
+                    type="button"
+                    class="pf-c-button pf-m-secondary"
+                    ${modalInvoker(() =>
+                        StrictUnsafe<CustomFormElementTagName>(item.stageObj?.component, {
+                            instancePk: item.stageObj?.pk,
                         }),
-                    })}
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">
-                        ${msg("Edit Stage")}
-                    </button>
-                </ak-forms-modal>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <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">
-                        ${msg("Edit Binding")}
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal
-                    model=${ModelEnum.AuthentikFlowsFlowstagebinding}
-                    objectPk=${item.pk}
+                    )}
+                >
+                    ${msg("Edit Stage")}
+                </button>
+
+                <button
+                    type="button"
+                    class="pf-c-button pf-m-secondary"
+                    ${modalInvoker(StageBindingForm, { instancePk: item.pk })}
                 >
-                </ak-rbac-object-permission-modal>`,
+                    ${msg("Edit Binding")}
+                </button>
+                ${IconPermissionButton(item.stageObj?.name || "", {
+                    model: ModelEnum.AuthentikFlowsFlowstagebinding,
+                    objectPk: item.pk,
+                })}
+            </div>`,
         ];
     }
 
-    renderExpanded(item: FlowStageBinding): TemplateResult {
+    protected renderActions(): SlottedTemplateResult {
+        return html`<button
+                class="pf-c-button pf-m-primary"
+                ${modalInvoker(AKStageWizard, {
+                    showBindingPage: true,
+                    bindingTarget: this.target,
+                })}
+            >
+                ${msg("New Stage")}
+            </button>
+            <button
+                slot="trigger"
+                class="pf-c-button pf-m-primary"
+                ${modalInvoker(StageBindingForm, { targetPk: this.target })}
+            >
+                ${msg("Bind Existing Stage")}
+            </button>`;
+    }
+
+    protected override renderExpanded(item: FlowStageBinding): TemplateResult {
         return html`<div class="pf-c-content">
             <p>${msg("These bindings control if this stage will be applied to the flow.")}</p>
             <ak-bound-policies-list
@@ -123,49 +143,18 @@ export class BoundStagesList extends Table<FlowStageBinding> {
         </div>`;
     }
 
-    renderEmpty(): TemplateResult {
+    protected override renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state icon="pf-icon-module">
                 <span>${msg("No Stages bound")}</span>
                 <div slot="body">${msg("No stages are currently bound to this flow.")}</div>
-                <div slot="primary">
-                    <ak-stage-wizard
-                        createText=${msg("Create and bind Stage")}
-                        showBindingPage
-                        bindingTarget=${ifDefined(this.target)}
-                    ></ak-stage-wizard>
-                    <ak-forms-modal>
-                        <span slot="submit">${msg("Create")}</span>
-                        <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">
-                            ${msg("Bind existing Stage")}
-                        </button>
-                    </ak-forms-modal>
-                </div>
+                <div slot="primary">${this.renderActions()}</div>
             </ak-empty-state>`,
         );
     }
 
-    renderToolbar(): TemplateResult {
-        return html`
-            <ak-stage-wizard
-                createText=${msg("Create and bind Stage")}
-                showBindingPage
-                bindingTarget=${ifDefined(this.target)}
-            ></ak-stage-wizard>
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <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">
-                    ${msg("Bind existing Stage")}
-                </button>
-            </ak-forms-modal>
-            ${super.renderToolbar()}
-        `;
+    protected override renderToolbar(): SlottedTemplateResult {
+        return [this.renderActions(), super.renderToolbar()];
     }
 }
 
diff --git a/web/src/admin/flows/FlowForm.ts b/web/src/admin/flows/FlowForm.ts
index 17077e617bda..77cf80607ba4 100644
--- a/web/src/admin/flows/FlowForm.ts
+++ b/web/src/admin/flows/FlowForm.ts
@@ -1,5 +1,6 @@
 import "#components/ak-file-search-input";
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
 import "#components/ak-switch-input";
 import "#elements/forms/FormGroup";
 import "#elements/forms/HorizontalFormElement";
@@ -35,48 +36,55 @@ import { ifDefined } from "lit/directives/if-defined.js";
  */
 @customElement("ak-flow-form")
 export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
-    async loadInstance(pk: string): Promise<Flow> {
-        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesRetrieve({
+    public static override verboseName = msg("Flow");
+    public static override verboseNamePlural = msg("Flows");
+
+    #api = new FlowsApi(DEFAULT_CONFIG);
+
+    protected override async loadInstance(pk: string): Promise<Flow> {
+        return this.#api.flowsInstancesRetrieve({
             slug: pk,
         });
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated flow.")
             : msg("Successfully created flow.");
     }
 
-    async send(data: Flow): Promise<void | Flow> {
+    protected override async send(data: Flow): Promise<void | Flow> {
         if (this.instance) {
-            return new FlowsApi(DEFAULT_CONFIG).flowsInstancesUpdate({
+            return this.#api.flowsInstancesUpdate({
                 slug: this.instance.slug,
                 flowRequest: data,
             });
         }
-        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesCreate({
+
+        return this.#api.flowsInstancesCreate({
             flowRequest: data,
         });
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Title")} required name="title">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.title)}"
-                    class="pf-c-form-control"
-                    required
-                />
-                <p class="pf-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p>
-            </ak-form-element-horizontal>
+        return html`<ak-text-input
+                label=${msg("Flow Name")}
+                placeholder=${msg("Type a name for this flow...")}
+                autofocus
+                autocomplete="off"
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
+            <ak-text-input
+                label=${msg("Title")}
+                placeholder=${msg("Type a title for this flow...")}
+                help=${msg("Shown as the Title in Flow pages.")}
+                autocomplete="off"
+                required
+                name="title"
+                value="${ifDefined(this.instance?.title)}"
+            ></ak-text-input>
 
             <ak-slug-input
                 name="slug"
@@ -89,9 +97,7 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
 
             <ak-form-element-horizontal label=${msg("Designation")} required name="designation">
                 <select class="pf-c-form-control">
-                    <option value="" ?selected=${this.instance?.designation === undefined}>
-                        ---------
-                    </option>
+                    <option value="" ?selected=${!this.instance?.designation}>---------</option>
                     <option
                         value=${FlowDesignationEnum.Authentication}
                         ?selected=${this.instance?.designation ===
diff --git a/web/src/admin/flows/FlowListPage.ts b/web/src/admin/flows/FlowListPage.ts
index 5ce06b14b5a5..49b431016cfd 100644
--- a/web/src/admin/flows/FlowListPage.ts
+++ b/web/src/admin/flows/FlowListPage.ts
@@ -10,17 +10,19 @@ import { AndNext, DEFAULT_CONFIG } from "#common/api/config";
 import { docLink } from "#common/global";
 import { groupBy } from "#common/utils";
 
+import { IconEditButton, modalInvoker, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { FlowForm } from "#admin/flows/FlowForm";
 import { DesignationToLabel } from "#admin/flows/utils";
 
 import { Flow, FlowsApi } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
 import { html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 
@@ -29,17 +31,18 @@ export class FlowListPage extends TablePage<Flow> {
     static styles = [...super.styles, PFBanner];
 
     protected override searchEnabled = true;
-    public pageTitle = msg("Flows");
-    public pageDescription = msg(
+    public override searchPlaceholder = msg("Search for a flow by name or identifier");
+
+    public override pageTitle = msg("Flows");
+    public override pageDescription = msg(
         "Flows describe a chain of Stages to authenticate, enroll or recover a user. Stages are chosen based on policies applied to them.",
     );
-    public pageIcon = "pf-icon pf-icon-process-automation";
+    public override pageIcon = "pf-icon pf-icon-process-automation";
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    @property()
-    order = "slug";
+    public override order = "slug";
 
     async apiEndpoint(): Promise<PaginatedResponse<Flow>> {
         return new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(await this.defaultEndpointConfig());
@@ -90,21 +93,8 @@ export class FlowListPage extends TablePage<Flow> {
             item.name,
             Array.from(item.stages || []).length,
             Array.from(item.policies || []).length,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Flow")}</span>
-                    <ak-flow-form slot="form" .instancePk=${item.slug}> </ak-flow-form>
-                    <button
-                        slot="trigger"
-                        class="pf-c-button pf-m-plain"
-                        aria-label=${msg(str`Edit "${item.name}"`)}
-                    >
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(FlowForm, item.slug, item.name)}
                 <button
                     aria-label=${msg(str`Execute "${item.name}"`)}
                     class="pf-c-button pf-m-plain"
@@ -132,39 +122,37 @@ export class FlowListPage extends TablePage<Flow> {
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create Flow")}</span>
-                <span slot="header">${msg("New Flow")}</span>
-                <ak-flow-form slot="form"> </ak-flow-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("New Flow")}</button>
-            </ak-forms-modal>
-            <ak-forms-modal>
-                <span slot="submit">${msg("Import")}</span>
-                <span slot="header">${msg("Import Flow")}</span>
-                <ak-blueprint-import-form slot="form">
-                    <a
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        href=${docLink("/add-secure-apps/flows-stages/flow/examples/flows/")}
-                        slot="read-more-link"
-                        >${msg("Flow Examples")}</a
-                    >
-                    <span slot="banner-warning">
-                        ${msg(
-                            "Warning: Flow imports are blueprint files, which may contain objects other than flows (such as users, policies, etc).",
-                        )}<br />${msg(
-                            "You should only import files from trusted sources and review blueprints before importing them.",
-                        )}
-                    </span>
-                </ak-blueprint-import-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Import")}</button>
-            </ak-forms-modal>
-        `;
+    protected renderObjectCreate(): SlottedTemplateResult {
+        return [
+            ModalInvokerButton(FlowForm),
+            html`<button
+                class="pf-c-button pf-m-primary"
+                type="button"
+                ${modalInvoker(() => {
+                    return html`<ak-blueprint-import-form>
+                        <a
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href=${docLink("/add-secure-apps/flows-stages/flow/examples/flows/")}
+                            slot="read-more-link"
+                            >${msg("Flow Examples")}</a
+                        >
+                        <span slot="banner-warning">
+                            ${msg(
+                                "Warning: Flow imports are blueprint files, which may contain objects other than flows (such as users, policies, etc).",
+                            )}<br />${msg(
+                                "You should only import files from trusted sources and review blueprints before importing them.",
+                            )}
+                        </span>
+                    </ak-blueprint-import-form>`;
+                })}
+            >
+                ${msg("Import")}
+            </button>`,
+        ];
     }
 
-    renderToolbar(): TemplateResult {
+    protected renderToolbar(): SlottedTemplateResult {
         return html`
             ${super.renderToolbar()}
             <ak-forms-confirm
diff --git a/web/src/admin/flows/StageBindingForm.ts b/web/src/admin/flows/StageBindingForm.ts
index b35dbacb6f99..cbe25a7f7353 100644
--- a/web/src/admin/flows/StageBindingForm.ts
+++ b/web/src/admin/flows/StageBindingForm.ts
@@ -24,7 +24,7 @@ import {
 } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 function createInvalidResponseOptions(): RadioOption<InvalidResponseActionEnum>[] {
@@ -52,6 +52,9 @@ function createInvalidResponseOptions(): RadioOption<InvalidResponseActionEnum>[
 
 @customElement("ak-stage-binding-form")
 export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
+    public static override verboseName = msg("Stage Binding");
+    public static override verboseNamePlural = msg("Stage Bindings");
+
     async load() {
         this.defaultOrder = await this.getOrder();
     }
@@ -124,10 +127,11 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
         </ak-form-element-horizontal>`;
     }
 
-    protected override renderForm(): TemplateResult {
-        return html` ${this.renderTarget()}
+    protected override renderForm(): SlottedTemplateResult {
+        return html`${this.renderTarget()}
             <ak-form-element-horizontal label=${msg("Stage")} required name="stage">
                 <ak-search-select
+                    placeholder=${msg("Select a stage...")}
                     .fetchObjects=${async (query?: string): Promise<Stage[]> => {
                         const args: StagesAllListRequest = {
                             ordering: "name",
diff --git a/web/src/admin/groups/GroupListPage.ts b/web/src/admin/groups/GroupListPage.ts
index badac43e1de3..3baee8ec8c77 100644
--- a/web/src/admin/groups/GroupListPage.ts
+++ b/web/src/admin/groups/GroupListPage.ts
@@ -7,6 +7,7 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
@@ -83,24 +84,14 @@ export class GroupListPage extends TablePage<Group> {
             >`,
             html`${Array.from(item.users || []).length}`,
             html`<ak-status-label type="neutral" ?good=${item.isSuperuser}></ak-status-label>`,
-            html`<div>
-                <button
-                    class="pf-c-button pf-m-plain"
-                    aria-label=${msg(str`Edit "${item.name}"`)}
-                    ${GroupForm.asEditModalInvoker(item.pk)}
-                >
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(GroupForm, item.pk, item.name)}
             </div>`,
         ];
     }
 
-    protected renderObjectCreate(): TemplateResult {
-        return html`<button class="pf-c-button pf-m-primary" ${GroupForm.asModalInvoker()}>
-            ${msg("New Group")}
-        </button>`;
+    protected renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(GroupForm);
     }
 }
 
diff --git a/web/src/admin/groups/RelatedGroupList.ts b/web/src/admin/groups/RelatedGroupList.ts
index e324005b227c..1aa09c04ecfe 100644
--- a/web/src/admin/groups/RelatedGroupList.ts
+++ b/web/src/admin/groups/RelatedGroupList.ts
@@ -9,8 +9,8 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { renderModal } from "#elements/dialogs";
 import { AKFormSubmitEvent, Form } from "#elements/forms/Form";
-import { renderModal } from "#elements/modals/utils";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 
diff --git a/web/src/admin/groups/RelatedUserList.ts b/web/src/admin/groups/RelatedUserList.ts
index 397d15190e57..304149c879ff 100644
--- a/web/src/admin/groups/RelatedUserList.ts
+++ b/web/src/admin/groups/RelatedUserList.ts
@@ -15,10 +15,10 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, renderModal } from "#elements/dialogs";
 import { AKFormSubmitEvent, Form } from "#elements/forms/Form";
 import { WithBrandConfig } from "#elements/mixins/branding";
 import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
-import { renderModal } from "#elements/modals/utils";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import { PaginatedResponse, Table, TableColumn, Timestamp } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
@@ -26,9 +26,9 @@ import { UserOption } from "#elements/user/utils";
 
 import { AKLabel } from "#components/ak-label";
 
+import { RecoveryButtons } from "#admin/users/recovery";
 import { UserForm } from "#admin/users/UserForm";
 import { UserImpersonateForm } from "#admin/users/UserImpersonateForm";
-import { renderRecoveryButtons } from "#admin/users/UserListPage";
 
 import {
     CapabilitiesEnum,
@@ -91,7 +91,11 @@ export class AddRelatedUserForm extends Form<{ users: number[] }> {
         return data;
     }
 
-    protected openUserSelectionModal = () => {
+    protected openUserSelectionModal = (event?: Event) => {
+        if (event?.defaultPrevented) {
+            return;
+        }
+
         return renderModal(html`
             <ak-form
                 headline=${msg("Select users")}
@@ -111,7 +115,7 @@ export class AddRelatedUserForm extends Form<{ users: number[] }> {
         // table to allow the table to appear as an inline-block element next to the input group.
         // This should be fixed by moving the `@container` query off `:host`.
 
-        return html` <ak-form-element-horizontal name="users">
+        return html`<ak-form-element-horizontal name="users">
             ${AKLabel(
                 {
                     slot: "label",
@@ -130,14 +134,16 @@ export class AddRelatedUserForm extends Form<{ users: number[] }> {
                         aria-label=${msg("Open user selection dialog")}
                         @click=${this.openUserSelectionModal}
                     >
-                        <pf-tooltip position="top" content=${msg("Add users")}>
+                        <pf-tooltip position="right" content=${msg("Add users")}>
                             <i class="fas fa-plus" aria-hidden="true"></i>
                         </pf-tooltip>
                     </button>
                 </div>
                 <div class="pf-c-form-control">
-                    <ak-chip-group>
-                        ${this.usersToAdd.map((user) => {
+                    <ak-chip-group
+                        @click=${this.openUserSelectionModal}
+                        placeholder=${msg("Select one or more users to assign...")}
+                        >${this.usersToAdd.map((user) => {
                             return html`<ak-chip
                                 removable
                                 value=${ifDefined(user.pk)}
@@ -149,8 +155,8 @@ export class AddRelatedUserForm extends Form<{ users: number[] }> {
                             >
                                 ${UserOption(user)}
                             </ak-chip>`;
-                        })}
-                    </ak-chip-group>
+                        })}</ak-chip-group
+                    >
                 </div>
             </div>
         </ak-form-element-horizontal>`;
@@ -271,16 +277,12 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
             html`<ak-status-label ?good=${item.isActive}></ak-status-label>`,
             Timestamp(item.lastLogin),
 
-            html`<div>
-                <button class="pf-c-button pf-m-plain" ${UserForm.asEditModalInvoker(item.pk)}>
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(UserForm, item.pk)}
                 ${showImpersonate
                     ? html`<button
                           class="pf-c-button pf-m-tertiary"
-                          ${UserImpersonateForm.asEditModalInvoker(item.pk)}
+                          ${UserImpersonateForm.asInstanceInvoker(item.pk)}
                       >
                           <pf-tooltip
                               position="top"
@@ -340,7 +342,7 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
                 </dt>
                 <dd class="pf-c-description-list__description">
                     <div class="pf-c-description-list__text">
-                        ${renderRecoveryButtons({
+                        ${RecoveryButtons({
                             user: item,
                             brandHasRecoveryFlow: Boolean(this.brand.flowRecovery),
                         })}
diff --git a/web/src/admin/groups/ak-group-form.ts b/web/src/admin/groups/ak-group-form.ts
index 757768a9914b..dc2dda4798e8 100644
--- a/web/src/admin/groups/ak-group-form.ts
+++ b/web/src/admin/groups/ak-group-form.ts
@@ -43,8 +43,8 @@ export class GroupForm extends ModelForm<Group, string> {
         `,
     ];
 
-    public entitySingular = msg("Group");
-    public entityPlural = msg("Groups");
+    public static verboseName = msg("Group");
+    public static verboseNamePlural = msg("Groups");
 
     #fetchGroups = (page: number, search?: string): Promise<DataProvision> => {
         return new CoreApi(DEFAULT_CONFIG)
diff --git a/web/src/admin/lifecycle/LifecycleRuleForm.ts b/web/src/admin/lifecycle/LifecycleRuleForm.ts
index 70df4d3f44c2..63e107bf7d4a 100644
--- a/web/src/admin/lifecycle/LifecycleRuleForm.ts
+++ b/web/src/admin/lifecycle/LifecycleRuleForm.ts
@@ -84,6 +84,9 @@ function formatContentTypePlaceholder(contentType: ContentTypeEnum): string {
 
 @customElement("ak-lifecycle-rule-form")
 export class LifecycleRuleForm extends ModelForm<LifecycleRule, string, LifecycleRule | null> {
+    public static override verboseName = msg("Lifecycle Rule");
+    public static override verboseNamePlural = msg("Lifecycle Rules");
+
     #targetSelectRef = createRef<SearchSelect<TargetObject>>();
     #reviewerGroupsSelectRef = createRef<SearchSelect<Group>>();
     #reviewerUsersSelectRef = createRef<SearchSelect<Group>>();
diff --git a/web/src/admin/lifecycle/LifecycleRuleListPage.ts b/web/src/admin/lifecycle/LifecycleRuleListPage.ts
index e0bf520a7084..e3a7be96b278 100644
--- a/web/src/admin/lifecycle/LifecycleRuleListPage.ts
+++ b/web/src/admin/lifecycle/LifecycleRuleListPage.ts
@@ -11,14 +11,17 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { LifecycleRuleForm } from "#admin/lifecycle/LifecycleRuleForm";
+
 import { LifecycleApi, LifecycleRule, ModelEnum } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement } from "lit/decorators.js";
 
 @customElement("ak-lifecycle-rule-list")
@@ -26,10 +29,10 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
     public override expandable = true;
     public override checkbox = true;
     public override clearOnRefresh = true;
-
-    public pageTitle = msg("Object Lifecycle Rules");
-    public pageDescription = msg("Schedule periodic reviews for objects in authentik.");
-    public pageIcon = "pf-icon pf-icon-history";
+    public override searchPlaceholder = msg("Search for a lifecycle rule...");
+    public override pageTitle = msg("Object Lifecycle Rules");
+    public override pageDescription = msg("Schedule periodic reviews for objects in authentik.");
+    public override pageIcon = "pf-icon pf-icon-history";
 
     public override order = "name";
 
@@ -41,11 +44,11 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
         );
     }
 
-    protected renderSectionBefore(): TemplateResult {
+    protected override renderSectionBefore(): SlottedTemplateResult {
         return html`<ak-lifecycle-preview-banner></ak-lifecycle-preview-banner>`;
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Target"), "content_type__model"],
         [msg("Interval"), "interval"],
@@ -53,7 +56,7 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html` <ak-forms-delete-bulk
             object-label=${msg("Lifecycle rule(s)")}
@@ -74,26 +77,14 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: LifecycleRule): SlottedTemplateResult[] {
+    protected override row(item: LifecycleRule): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
-            html`${item.targetVerbose}`,
-            html`${item.interval}`,
-            html`${item.gracePeriod}`,
-            html` <div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Lifecycle Rule")}</span>
-                    <ak-lifecycle-rule-form
-                        slot="form"
-                        .instancePk=${item.id}
-                    ></ak-lifecycle-rule-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.name,
+            item.targetVerbose,
+            item.interval || msg("-"),
+            item.gracePeriod || msg("-"),
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(LifecycleRuleForm, item.id, item.name)}
 
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikLifecycleLifecyclerule}
@@ -104,7 +95,7 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
         ];
     }
 
-    renderExpanded(item: LifecycleRule): TemplateResult {
+    protected override renderExpanded(item: LifecycleRule): SlottedTemplateResult {
         const [appLabel, modelName] = ModelEnum.AuthentikLifecycleLifecyclerule.split(".");
         return html`<dl class="pf-c-description-list pf-m-horizontal">
             <div class="pf-c-description-list__group">
@@ -114,6 +105,7 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
                 <dd class="pf-c-description-list__description">
                     <div class="pf-c-description-list__text">
                         <ak-task-list
+                            search-placeholder=${msg("Search tasks...")}
                             .relObjAppLabel=${appLabel}
                             .relObjModel=${modelName}
                             .relObjId="${item.id}"
@@ -123,16 +115,8 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
             </div>
         </dl>`;
     }
-
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Object Lifecycle Rule")}</span>
-                <ak-lifecycle-rule-form slot="form"></ak-lifecycle-rule-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(LifecycleRuleForm);
     }
 }
 
diff --git a/web/src/admin/lifecycle/ObjectLifecyclePage.ts b/web/src/admin/lifecycle/ObjectLifecyclePage.ts
index 7add27903f2d..cc665ee8dc1b 100644
--- a/web/src/admin/lifecycle/ObjectLifecyclePage.ts
+++ b/web/src/admin/lifecycle/ObjectLifecyclePage.ts
@@ -8,10 +8,12 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { createPaginatedResponse } from "#common/api/responses";
 import { isResponseErrorLike } from "#common/errors/network";
 
+import { ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, Table, TableColumn, Timestamp } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 import { ifPreviousValue } from "#elements/utils/properties";
 
+import { ObjectReviewForm } from "#admin/lifecycle/ObjectReviewForm";
 import { LifecycleIterationStatus } from "#admin/lifecycle/utils";
 
 import {
@@ -257,7 +259,7 @@ export class ObjectLifecyclePage extends Table<Review> {
         ];
     }
 
-    protected override renderEmpty(): TemplateResult {
+    protected override renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state icon="pf-icon-task"
                 ><span>${this.emptyStateMessage}</span></ak-empty-state
@@ -267,18 +269,12 @@ export class ObjectLifecyclePage extends Table<Review> {
 
     protected renderObjectCreate(): SlottedTemplateResult {
         if (!this.iteration?.userCanReview) {
-            return nothing;
+            return null;
         }
 
-        return html`<ak-forms-modal>
-            <span slot="submit">${msg("Confirm Review")}</span>
-            <span slot="header">${msg("Confirm this object has been reviewed")}</span>
-            <ak-object-review-form slot="form" .iteration=${this.iteration}>
-            </ak-object-review-form>
-            <button slot="trigger" class="pf-c-button pf-m-primary">
-                ${msg("Confirm Review")}
-            </button>
-        </ak-forms-modal>`;
+        return ModalInvokerButton(ObjectReviewForm, {
+            iteration: this.iteration,
+        });
     }
 
     protected override render(): SlottedTemplateResult {
diff --git a/web/src/admin/lifecycle/ObjectReviewForm.ts b/web/src/admin/lifecycle/ObjectReviewForm.ts
index ee7aef8384a7..6f135224f41c 100644
--- a/web/src/admin/lifecycle/ObjectReviewForm.ts
+++ b/web/src/admin/lifecycle/ObjectReviewForm.ts
@@ -13,6 +13,11 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-object-review-form")
 export class ObjectReviewForm extends ModelForm<Review, string, Review | null> {
+    public static override verboseName = msg("Review");
+    public static override verboseNamePlural = msg("Reviews");
+    public static override submitVerb = msg("Confirm");
+    public static override createLabel = msg("Confirm");
+
     @property({ attribute: false })
     public iteration: LifecycleIteration | null = null;
 
diff --git a/web/src/admin/outposts/OutpostForm.ts b/web/src/admin/outposts/OutpostForm.ts
index 1c3b1b87c427..1b29ed93764c 100644
--- a/web/src/admin/outposts/OutpostForm.ts
+++ b/web/src/admin/outposts/OutpostForm.ts
@@ -95,19 +95,19 @@ function providerProvider(type: OutpostTypeEnum): DataProvider {
 
 @customElement("ak-outpost-form")
 export class OutpostForm extends ModelForm<Outpost, string> {
-    public entitySingular = msg("Outpost");
-    public entityPlural = msg("Outposts");
+    public static verboseName = msg("Outpost");
+    public static verboseNamePlural = msg("Outposts");
 
-    @property()
-    type: OutpostTypeEnum = OutpostTypeEnum.Proxy;
+    @property({ type: String })
+    public type: OutpostTypeEnum = OutpostTypeEnum.Proxy;
 
     @property({ type: Boolean })
-    embedded = false;
+    public embedded = false;
 
     @state()
-    providers: DataProvider = providerProvider(this.type);
+    protected providers: DataProvider = providerProvider(this.type);
 
-    defaultConfig?: OutpostDefaultConfig;
+    protected defaultConfig?: OutpostDefaultConfig;
 
     public override reset(): void {
         super.reset();
diff --git a/web/src/admin/outposts/OutpostListPage.ts b/web/src/admin/outposts/OutpostListPage.ts
index c0f018bd7d7e..bfb596bf9181 100644
--- a/web/src/admin/outposts/OutpostListPage.ts
+++ b/web/src/admin/outposts/OutpostListPage.ts
@@ -7,6 +7,7 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton } from "#elements/dialogs";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
@@ -70,19 +71,6 @@ export class OutpostListPage extends TablePage<Outpost> {
     @property({ type: String })
     public order = "name";
 
-    protected openEditModal = (event: Event) => {
-        const button = event.currentTarget as HTMLButtonElement;
-        const instancePk = button.dataset.instancePk!;
-        const managed = button.dataset.managed === "true";
-
-        const form = new OutpostForm();
-
-        form.instancePk = instancePk;
-        form.embedded = managed;
-
-        return form.showModal();
-    };
-
     protected renderItemProviders(item: Outpost) {
         if (item.providers.length < 1) {
             return html`-`;
@@ -116,17 +104,11 @@ export class OutpostListPage extends TablePage<Outpost> {
             html`<ak-outpost-health-simple
                 outpostId=${ifDefined(item.pk)}
             ></ak-outpost-health-simple>`,
-            html`<button
-                class="pf-c-button pf-m-plain"
-                aria-label=${msg(str`Edit ${item.name}`)}
-                data-instance-pk=${item.pk}
-                data-managed=${item.managed === embeddedOutpostManaged}
-                @click=${this.openEditModal}
-            >
-                <pf-tooltip position="top" content=${msg("Edit")}>
-                    <i class="fas fa-edit" aria-hidden="true"></i>
-                </pf-tooltip>
-            </button>`,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(OutpostForm, item.pk, item.name, {
+                    embedded: item.managed === embeddedOutpostManaged,
+                })}
+            </div>`,
         ];
     }
 
diff --git a/web/src/admin/outposts/OutpostViewPage.ts b/web/src/admin/outposts/OutpostViewPage.ts
index b0abedc29072..5007b369af9f 100644
--- a/web/src/admin/outposts/OutpostViewPage.ts
+++ b/web/src/admin/outposts/OutpostViewPage.ts
@@ -12,6 +12,7 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { docLink } from "#common/global";
 
 import { AKElement } from "#elements/Base";
+import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { setPageDetails } from "#components/ak-page-navbar";
@@ -27,7 +28,6 @@ import { CSSResult, PropertyValues } from "lit";
 import { html } from "lit-html";
 import { guard } from "lit-html/directives/guard.js";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -242,14 +242,7 @@ export class OutpostViewPage extends AKElement {
                         <label class="pf-c-form__label">
                             <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
                         </label>
-                        <div>
-                            <ak-token-copy-button
-                                class="pf-m-primary"
-                                identifier="${ifDefined(this.outpost?.tokenIdentifier)}"
-                            >
-                                ${msg("Click to copy token")}
-                            </ak-token-copy-button>
-                        </div>
+                        <div>${IconTokenCopyButton(this.outpost?.tokenIdentifier)}</div>
                     </div>
                     <h3>
                         ${msg(
diff --git a/web/src/admin/outposts/ServiceConnectionListPage.ts b/web/src/admin/outposts/ServiceConnectionListPage.ts
index ba66f2673a22..3eac74f742a5 100644
--- a/web/src/admin/outposts/ServiceConnectionListPage.ts
+++ b/web/src/admin/outposts/ServiceConnectionListPage.ts
@@ -1,6 +1,6 @@
 import "#admin/outposts/ServiceConnectionDockerForm";
 import "#admin/outposts/ServiceConnectionKubernetesForm";
-import "#admin/outposts/ServiceConnectionWizard";
+import "#admin/outposts/ak-service-connection-wizard";
 import "#admin/rbac/ObjectPermissionModal";
 import "#components/ak-status-label";
 import "#elements/buttons/SpinnerButton/index";
@@ -12,16 +12,23 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
 
-import { OutpostsApi, ServiceConnection, ServiceConnectionState } from "@goauthentik/api";
+import { AKServiceConnectionWizard } from "#admin/outposts/ak-service-connection-wizard";
 
-import { msg, str } from "@lit/localize";
+import {
+    ModelEnum,
+    OutpostsApi,
+    ServiceConnection,
+    ServiceConnectionState,
+} from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
 import { html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -75,31 +82,19 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
     row(item: ServiceConnection): SlottedTemplateResult[] {
         const itemState = this.state[item.pk];
         return [
-            html`${item.name}`,
-            html`${item.verboseName}`,
+            item.name,
+            item.verboseName,
             html`<ak-status-label type="info" ?good=${item.local}></ak-status-label>`,
             html`${itemState?.healthy
                 ? html`<ak-label color=${PFColor.Green}>${ifDefined(itemState.version)}</ak-label>`
                 : html`<ak-label color=${PFColor.Red}>${msg("Unhealthy")}</ak-label>`}`,
-            html`
-                <ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                        slot: "form",
-                        instancePk: item.pk,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.verboseName}`, {
-                            id: "form.headline.update",
-                        }),
-                    })}
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal model=${item.metaModelName} objectPk=${item.pk}>
-                </ak-rbac-object-permission-modal>
-            `,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.pk, item.verboseName)}
+                ${IconPermissionButton(item.name, {
+                    model: item.metaModelName as ModelEnum,
+                    objectPk: item.pk,
+                })}
+            </div>`,
         ];
     }
 
@@ -161,8 +156,15 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
         </ak-forms-delete-bulk>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<ak-service-connection-wizard></ak-service-connection-wizard> `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return html`<button
+            class="pf-c-button pf-m-primary"
+            type="button"
+            aria-description="${msg("Open the wizard to create a new service connection.")}"
+            ${AKServiceConnectionWizard.asModalInvoker()}
+        >
+            ${msg("New Outpost Integration")}
+        </button>`;
     }
 }
 
diff --git a/web/src/admin/policies/BasePolicyForm.ts b/web/src/admin/policies/BasePolicyForm.ts
index bd7a2a0948f2..42ee0aea0a6c 100644
--- a/web/src/admin/policies/BasePolicyForm.ts
+++ b/web/src/admin/policies/BasePolicyForm.ts
@@ -3,6 +3,9 @@ import { ModelForm } from "#elements/forms/ModelForm";
 import { msg } from "@lit/localize";
 
 export abstract class BasePolicyForm<T extends object> extends ModelForm<T, string> {
+    public static override verboseName = msg("Policy");
+    public static override verboseNamePlural = msg("Policies");
+
     getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated policy.")
diff --git a/web/src/admin/policies/BoundPoliciesList.ts b/web/src/admin/policies/BoundPoliciesList.ts
index 1094bf19c9a5..108d79e0087c 100644
--- a/web/src/admin/policies/BoundPoliciesList.ts
+++ b/web/src/admin/policies/BoundPoliciesList.ts
@@ -1,6 +1,6 @@
 import "#admin/groups/ak-group-form";
 import "#admin/policies/PolicyBindingForm";
-import "#admin/policies/PolicyWizard";
+import "#admin/policies/ak-policy-wizard";
 import "#admin/rbac/ObjectPermissionModal";
 import "#admin/users/UserForm";
 import "#components/ak-status-label";
@@ -9,14 +9,16 @@ import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
-import { PFSize } from "#common/enums";
 import { PolicyBindingCheckTarget, PolicyBindingCheckTargetToLabel } from "#common/policies/utils";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { asInstanceInvokerByTagName, modalInvoker } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 import { StrictUnsafe } from "#elements/utils/unsafe";
 
+import { GroupForm } from "#admin/groups/ak-group-form";
+import { PolicyWizard } from "#admin/policies/ak-policy-wizard";
 import { PolicyBindingForm, PolicyBindingNotice } from "#admin/policies/PolicyBindingForm";
 import { policyEngineModes } from "#admin/policies/PolicyEngineModes";
 import { UserForm } from "#admin/users/UserForm";
@@ -24,50 +26,49 @@ import { UserForm } from "#admin/users/UserForm";
 import { ModelEnum, PoliciesApi, PolicyBinding } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { css, CSSResult, html, nothing, TemplateResult } from "lit";
+import { css, CSSResult, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-bound-policies-list")
 export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends Table<T> {
-    @property()
-    target?: string;
+    public static styles: CSSResult[] = [
+        ...super.styles,
+        css`
+            /* Align policy engine description to left padding of the card title */
+            .policy-desc {
+                padding-left: var(--pf-global--spacer--lg);
+            }
+        `,
+    ];
 
-    @property()
-    policyEngineMode: string = "";
+    @property({ type: String })
+    public target: string | null = null;
+
+    @property({ type: String })
+    public policyEngineMode: string = "";
 
     @property({ type: Array })
-    allowedTypes: PolicyBindingCheckTarget[] = [
+    public allowedTypes: PolicyBindingCheckTarget[] = [
         PolicyBindingCheckTarget.Policy,
         PolicyBindingCheckTarget.Group,
         PolicyBindingCheckTarget.User,
     ];
 
     @property({ type: Array })
-    typeNotices: PolicyBindingNotice[] = [];
+    public typeNotices: PolicyBindingNotice[] = [];
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    order = "order";
+    public override order = "order";
 
     protected bindingEditForm = "ak-policy-binding-form";
 
-    static styles: CSSResult[] = [
-        ...super.styles,
-        css`
-            /* Align policy engine description to left padding of the card title */
-            .policy-desc {
-                padding-left: var(--pf-global--spacer--lg);
-            }
-        `,
-    ];
-
     get allowedTypesLabel(): string {
         return this.allowedTypes.map((ct) => PolicyBindingCheckTargetToLabel(ct)).join(" / ");
     }
 
-    async apiEndpoint(): Promise<PaginatedResponse<T>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<T>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({
             ...(await this.defaultEndpointConfig()),
             target: this.target || "",
@@ -78,7 +79,7 @@ export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends
         return item.order?.toString() ?? null;
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Order"), "order"],
         [this.allowedTypesLabel],
         [msg("Enabled"), "enabled"],
@@ -86,9 +87,9 @@ export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    getPolicyUserGroupRowLabel(item: PolicyBinding): string {
+    protected getPolicyUserGroupRowLabel(item: PolicyBinding): string {
         if (item.policy) {
-            return msg(str`Policy ${item.policyObj?.name}`);
+            return msg(str`Policy ${item.policyObj.name}`);
         } else if (item.group) {
             return msg(str`Group ${item.groupObj?.name}`);
         } else if (item.user) {
@@ -97,7 +98,7 @@ export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends
         return msg("-");
     }
 
-    getPolicyUserGroupRow(item: PolicyBinding): TemplateResult {
+    protected getPolicyUserGroupRow(item: PolicyBinding): SlottedTemplateResult {
         const label = this.getPolicyUserGroupRowLabel(item);
         if (item.user) {
             return html` <a href=${`#/identity/users/${item.user}`}> ${label} </a> `;
@@ -108,159 +109,158 @@ export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends
         return html`${label}`;
     }
 
-    getObjectEditButton(item: PolicyBinding): SlottedTemplateResult {
+    protected getObjectEditButton(item: PolicyBinding): SlottedTemplateResult {
         if (item.policyObj) {
-            return html`<ak-forms-modal>
-                ${StrictUnsafe<CustomFormElementTagName>(item.policyObj.component, {
-                    slot: "form",
-                    instancePk: item.policyObj.pk,
-                    submitLabel: msg("Save Changes"),
-                    headline: msg(str`Update ${item.policyObj.name}`, {
-                        id: "form.headline.update",
-                    }),
-                })}
+            return html`<button
+                type="button"
+                class="pf-c-button pf-m-secondary"
+                ${asInstanceInvokerByTagName(item.policyObj.component, item.policyObj.pk)}
+            >
+                ${msg("Edit Policy")}
+            </button>`;
+        }
 
-                <button slot="trigger" class="pf-c-button pf-m-secondary">
-                    ${msg("Edit Policy")}
-                </button>
-            </ak-forms-modal>`;
-        } else if (item.groupObj) {
-            return html`<ak-forms-modal>
-                <span slot="submit">${msg("Save Changes")}</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">
-                    ${msg("Edit Group")}
-                </button>
-            </ak-forms-modal>`;
-        } else if (item.userObj) {
+        if (item.groupObj) {
             return html`<button
                 class="pf-c-button pf-m-secondary"
-                ${UserForm.asEditModalInvoker(item.userObj.pk)}
+                ${GroupForm.asInstanceInvoker(item.groupObj?.pk)}
+            >
+                ${msg("Edit Group")}
+            </button>`;
+        }
+
+        if (item.userObj) {
+            return html`<button
+                class="pf-c-button pf-m-secondary"
+                ${UserForm.asInstanceInvoker(item.userObj?.pk)}
             >
                 ${msg("Edit User")}
             </button>`;
         }
-        return nothing;
+
+        return null;
     }
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
-        return html`<ak-forms-delete-bulk
-            object-label=${msg("Policy binding(s)")}
-            .objects=${this.selectedElements}
-            .metadata=${(item: PolicyBinding) => {
-                return [
-                    { key: msg("Order"), value: item.order.toString() },
-                    {
-                        key: this.allowedTypesLabel,
-                        value: this.getPolicyUserGroupRowLabel(item),
-                    },
-                ];
-            }}
-            .usedBy=${(item: PolicyBinding) => {
-                return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUsedByList({
-                    policyBindingUuid: item.pk,
-                });
-            }}
-            .delete=${(item: PolicyBinding) => {
-                return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsDestroy({
-                    policyBindingUuid: item.pk,
-                });
-            }}
+        return html`<ak-spinner-button .callAction=${this.refreshListener} class="pf-m-secondary">
+                ${msg("Refresh")}</ak-spinner-button
+            ><ak-forms-delete-bulk
+                object-label=${msg("Policy binding(s)")}
+                .objects=${this.selectedElements}
+                .metadata=${(item: PolicyBinding) => {
+                    return [
+                        { key: msg("Order"), value: item.order.toString() },
+                        {
+                            key: this.allowedTypesLabel,
+                            value: this.getPolicyUserGroupRowLabel(item),
+                        },
+                    ];
+                }}
+                .usedBy=${(item: PolicyBinding) => {
+                    return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUsedByList({
+                        policyBindingUuid: item.pk,
+                    });
+                }}
+                .delete=${(item: PolicyBinding) => {
+                    return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsDestroy({
+                        policyBindingUuid: item.pk,
+                    });
+                }}
+            >
+                <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                    ${msg("Delete")}
+                </button>
+            </ak-forms-delete-bulk>`;
+    }
+
+    protected renderNewPolicyButton(): SlottedTemplateResult {
+        return html`<button
+            class="pf-c-button pf-m-primary"
+            type="button"
+            aria-description="${msg("Open the wizard to create a new policy.")}"
+            ${modalInvoker(PolicyWizard, {
+                showBindingPage: true,
+                bindingTarget: this.target,
+            })}
         >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
-                ${msg("Delete")}
-            </button>
-        </ak-forms-delete-bulk>`;
+            ${msg("Create and bind Policy")}
+        </button>`;
     }
 
-    row(item: PolicyBinding): SlottedTemplateResult[] {
+    protected override row(item: PolicyBinding): SlottedTemplateResult[] {
         return [
             html`<pre>${item.order}</pre>`,
             html`${this.getPolicyUserGroupRow(item)}`,
             html`<ak-status-label type="warning" ?good=${item.enabled}></ak-status-label>`,
             html`${item.timeout}`,
-            html` ${this.getObjectEditButton(item)}
-                <ak-forms-modal size=${PFSize.Medium}>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Binding")}</span>
-                    ${StrictUnsafe<PolicyBindingForm>(this.bindingEditForm, {
-                        slot: "form",
-                        instancePk: item.pk,
-                        allowedTypes: this.allowedTypes,
-                        typeNotices: this.typeNotices,
-                        targetPk: this.target || "",
-
-                        submitLabel: msg("Save Changes"),
-                        headline: msg("Update Binding"),
+            html`<div class="ak-c-table__actions">
+                ${this.getObjectEditButton(item)}
+                <button
+                    type="button"
+                    class="pf-c-button pf-m-secondary"
+                    ${modalInvoker(() => {
+                        return StrictUnsafe<PolicyBindingForm>(this.bindingEditForm, {
+                            instancePk: item.pk,
+                            allowedTypes: this.allowedTypes,
+                            typeNotices: this.typeNotices,
+                            targetPk: this.target || "",
+                        });
                     })}
-                    <button slot="trigger" class="pf-c-button pf-m-secondary">
-                        ${msg("Edit Binding")}
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal
-                    model=${ModelEnum.AuthentikPoliciesPolicybinding}
-                    objectPk=${item.pk}
                 >
-                </ak-rbac-object-permission-modal>`,
+                    ${msg("Edit Binding")}
+                </button>
+                ${IconPermissionButton(this.getPolicyUserGroupRowLabel(item), {
+                    model: ModelEnum.AuthentikPoliciesPolicybinding,
+                    objectPk: item.pk,
+                })}
+            </div>`,
         ];
     }
 
-    renderEmpty(): TemplateResult {
+    protected override renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state icon="pf-icon-module"
                 ><span>${msg("No Policies bound.")}</span>
                 <div slot="body">${msg("No policies are currently bound to this object.")}</div>
                 <fieldset class="pf-c-form__group pf-m-action" slot="primary">
                     <legend class="sr-only">${msg("Policy actions")}</legend>
-                    <ak-policy-wizard
-                        createText=${msg("Create and bind Policy")}
-                        showBindingPage
-                        bindingTarget=${ifDefined(this.target)}
-                    ></ak-policy-wizard>
-                    <ak-forms-modal size=${PFSize.Medium}>
-                        ${StrictUnsafe<PolicyBindingForm>(this.bindingEditForm, {
-                            slot: "form",
-                            allowedTypes: this.allowedTypes,
-                            typeNotices: this.typeNotices,
-                            targetPk: this.target || "",
-
-                            submitLabel: msg("Create"),
-                            headline: msg("Create Binding"),
+                    ${this.renderNewPolicyButton()}
+                    <button
+                        type="button"
+                        class="pf-c-button pf-m-secondary"
+                        ${modalInvoker(() => {
+                            return StrictUnsafe<PolicyBindingForm>(this.bindingEditForm, {
+                                allowedTypes: this.allowedTypes,
+                                typeNotices: this.typeNotices,
+                                targetPk: this.target || "",
+                            });
                         })}
-                        <button slot="trigger" class="pf-c-button pf-m-primary">
-                            ${msg("Bind existing policy/group/user")}
-                        </button>
-                    </ak-forms-modal>
+                    >
+                        ${msg("Bind existing policy/group/user")}
+                    </button>
                 </fieldset>
             </ak-empty-state>`,
         );
     }
 
-    renderToolbar(): TemplateResult {
+    renderToolbar(): SlottedTemplateResult {
         return html`${this.allowedTypes.includes(PolicyBindingCheckTarget.Policy)
-                ? html`<ak-policy-wizard
-                      createText=${msg("Create and bind Policy")}
-                      showBindingPage
-                      bindingTarget=${ifDefined(this.target)}
-                  ></ak-policy-wizard>`
-                : nothing}
-            <ak-forms-modal size=${PFSize.Medium}>
-                ${StrictUnsafe<PolicyBindingForm>(this.bindingEditForm, {
-                    slot: "form",
-                    allowedTypes: this.allowedTypes,
-                    typeNotices: this.typeNotices,
-                    targetPk: this.target || "",
-
-                    submitLabel: msg("Create"),
-                    headline: msg("Create Binding"),
+                ? this.renderNewPolicyButton()
+                : null}
+            <button
+                type="button"
+                class="pf-c-button pf-m-secondary"
+                ${modalInvoker(() => {
+                    return StrictUnsafe<PolicyBindingForm>(this.bindingEditForm, {
+                        allowedTypes: this.allowedTypes,
+                        typeNotices: this.typeNotices,
+                        targetPk: this.target || "",
+                    });
                 })}
-
-                <button slot="trigger" class="pf-c-button pf-m-primary">
-                    ${msg(str`Bind existing ${this.allowedTypesLabel}`)}
-                </button>
-            </ak-forms-modal> `;
+            >
+                ${msg(str`Bind existing ${this.allowedTypesLabel}`)}
+            </button>`;
     }
 
     renderPolicyEngineMode() {
diff --git a/web/src/admin/policies/PolicyBindingForm.ts b/web/src/admin/policies/PolicyBindingForm.ts
index 1e589a8390d2..ed6338f70203 100644
--- a/web/src/admin/policies/PolicyBindingForm.ts
+++ b/web/src/admin/policies/PolicyBindingForm.ts
@@ -39,7 +39,9 @@ export class PolicyBindingForm<T extends PolicyBinding = PolicyBinding> extends
     T,
     string
 > {
-    static styles: CSSResult[] = [...super.styles, PFContent];
+    public static styles: CSSResult[] = [...super.styles, PFContent];
+    public static verboseName = msg("Policy Binding");
+    public static verboseNamePlural = msg("Policy Bindings");
 
     async loadInstance(pk: string): Promise<T> {
         const binding = await new PoliciesApi(DEFAULT_CONFIG).policiesBindingsRetrieve({
diff --git a/web/src/admin/policies/PolicyListPage.ts b/web/src/admin/policies/PolicyListPage.ts
index 31433f9dd2e0..97446572f503 100644
--- a/web/src/admin/policies/PolicyListPage.ts
+++ b/web/src/admin/policies/PolicyListPage.ts
@@ -1,5 +1,5 @@
 import "#admin/policies/PolicyTestForm";
-import "#admin/policies/PolicyWizard";
+import "#admin/policies/ak-policy-wizard";
 import "#admin/policies/dummy/DummyPolicyForm";
 import "#admin/policies/event_matcher/EventMatcherPolicyForm";
 import "#admin/policies/expiry/ExpiryPolicyForm";
@@ -15,14 +15,17 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName, modalInvoker } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
 
-import { PoliciesApi, Policy } from "@goauthentik/api";
+import { PolicyWizard } from "#admin/policies/ak-policy-wizard";
+import { PolicyTestForm } from "#admin/policies/PolicyTestForm";
+
+import { ModelEnum, PoliciesApi, Policy } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
 import { html, TemplateResult } from "lit";
@@ -65,34 +68,28 @@ export class PolicyListPage extends TablePage<Policy> {
                           ${msg("Warning: Policy is not assigned.")}
                       </ak-label>`}`,
             html`${item.verboseName}`,
-            html`<ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                        slot: "form",
-                        instancePk: item.pk,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.verboseName}`, {
-                            id: "form.headline.update",
-                        }),
-                    })}
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-
-                <ak-rbac-object-permission-modal model=${item.metaModelName} objectPk=${item.pk}>
-                </ak-rbac-object-permission-modal>
-                <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
-                    <span slot="submit">${msg("Test")}</span>
-                    <span slot="header">${msg("Test Policy")}</span>
-                    <ak-policy-test-form slot="form" .policy=${item}> </ak-policy-test-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Test")}>
-                            <i class="fas fa-vial" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>`,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.pk)}
+                ${IconPermissionButton(item.name, {
+                    model: item.metaModelName as ModelEnum,
+                    objectPk: item.pk,
+                })}
+
+                <button
+                    class="pf-c-button pf-m-plain"
+                    ${modalInvoker(
+                        PolicyTestForm,
+                        { policy: item },
+                        {
+                            closedBy: "closerequest",
+                        },
+                    )}
+                >
+                    <pf-tooltip position="top" content=${msg("Test")}>
+                        <i class="fas fa-vial" aria-hidden="true"></i>
+                    </pf-tooltip>
+                </button>
+            </div>`,
         ];
     }
 
@@ -118,8 +115,17 @@ export class PolicyListPage extends TablePage<Policy> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<ak-policy-wizard> </ak-policy-wizard>`;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return html`
+            <button
+                class="pf-c-button pf-m-primary"
+                type="button"
+                aria-description="${msg("Open the wizard to create a new policy.")}"
+                ${PolicyWizard.asModalInvoker()}
+            >
+                ${msg("New Policy")}
+            </button>
+        `;
     }
 
     renderToolbar(): TemplateResult {
diff --git a/web/src/admin/policies/PolicyTestForm.ts b/web/src/admin/policies/PolicyTestForm.ts
index 78568646c0d1..4af01ff529c0 100644
--- a/web/src/admin/policies/PolicyTestForm.ts
+++ b/web/src/admin/policies/PolicyTestForm.ts
@@ -5,8 +5,12 @@ import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/SearchSelect/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
 
 import { Form } from "#elements/forms/Form";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { AKLabel } from "#components/ak-label";
 
 import {
     CoreApi,
@@ -21,21 +25,53 @@ import {
 import YAML from "yaml";
 
 import { msg } from "@lit/localize";
-import { css, CSSResult, html, nothing, TemplateResult } from "lit";
+import { css, CSSResult, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 @customElement("ak-policy-test-form")
 export class PolicyTestForm extends Form<PolicyTestRequest> {
+    public static verboseName = msg("Policy");
+    public static verboseNamePlural = msg("Policies");
+    public static createLabel = msg("Test");
+
+    public override cancelable = true;
+
+    public override size = PFSize.XLarge;
+
+    static styles: CSSResult[] = [
+        ...super.styles,
+        PFDescriptionList,
+        css`
+            .ak-policy-test-log-messages {
+                width: 100%;
+            }
+        `,
+    ];
+
+    #api = new PoliciesApi(DEFAULT_CONFIG);
+
+    protected override formatSubmitLabel(submitLabel?: string | null): string {
+        return submitLabel || msg("Run Test");
+    }
+
     @property({ attribute: false })
-    public policy?: Policy;
+    public policy: Policy | null = null;
 
     @state()
     protected result: PolicyTestResult | null = null;
 
     @property({ attribute: false })
-    public request?: PolicyTestRequest;
+    public request: PolicyTestRequest | null = null;
+
+    public get verboseName(): string | null {
+        return this.policy?.verboseName || null;
+    }
+
+    public get verboseNamePlural(): string | null {
+        return this.policy?.verboseNamePlural || null;
+    }
 
     public override reset(): void {
         super.reset();
@@ -43,32 +79,23 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
         this.result = null;
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return msg("Successfully sent test-request.");
     }
 
-    async send(data: PolicyTestRequest): Promise<PolicyTestResult> {
+    protected override async send(data: PolicyTestRequest): Promise<PolicyTestResult> {
         this.request = data;
-        const result = await new PoliciesApi(DEFAULT_CONFIG).policiesAllTestCreate({
+
+        this.result = await this.#api.policiesAllTestCreate({
             policyUuid: this.policy?.pk || "",
             policyTestRequest: data,
         });
-        return (this.result = result);
-    }
 
-    static styles: CSSResult[] = [
-        ...super.styles,
-        PFDescriptionList,
-        css`
-            .ak-policy-test-log-messages {
-                width: 100%;
-            }
-        `,
-    ];
+        return this.result;
+    }
 
-    renderResult(): TemplateResult {
-        return html`
-            <ak-form-element-horizontal label=${msg("Passing")}>
+    protected renderResult(): SlottedTemplateResult {
+        return html`<ak-form-element-horizontal label=${msg("Passing")}>
                 <div class="pf-c-form__group-label">
                     <div class="c-form__horizontal-group">
                         <span class="pf-c-form__label-text">
@@ -103,13 +130,13 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                         </dl>
                     </div>
                 </div>
-            </ak-form-element-horizontal>
-        `;
+            </ak-form-element-horizontal>`;
     }
 
-    protected override renderForm(): TemplateResult {
+    protected override renderForm(): SlottedTemplateResult {
         return html`<ak-form-element-horizontal label=${msg("User")} required name="user">
                 <ak-search-select
+                    placeholder=${msg("Select a user...")}
                     .fetchObjects=${async (query?: string): Promise<User[]> => {
                         const args: CoreUsersListRequest = {
                             ordering: "username",
@@ -135,14 +162,28 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                 >
                 </ak-search-select>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Context")} name="context">
-                <ak-codemirror mode="yaml" value=${YAML.stringify(this.request?.context ?? {})}>
+
+            <ak-form-element-horizontal name="context">
+                ${AKLabel(
+                    {
+                        slot: "label",
+                        className: "pf-c-form__group-label",
+                        htmlFor: "context",
+                    },
+                    msg("Context"),
+                )}
+                <ak-codemirror
+                    id="context"
+                    mode="yaml"
+                    value=${YAML.stringify(this.request?.context ?? {})}
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg("Set custom attributes using YAML or JSON.")}
                 </p>
             </ak-form-element-horizontal>
-            ${this.result ? this.renderResult() : nothing}`;
+
+            ${this.result ? this.renderResult() : null}`;
     }
 }
 
diff --git a/web/src/admin/policies/dummy/DummyPolicyForm.ts b/web/src/admin/policies/dummy/DummyPolicyForm.ts
index 2895c776a141..45ef1ea85db1 100644
--- a/web/src/admin/policies/dummy/DummyPolicyForm.ts
+++ b/web/src/admin/policies/dummy/DummyPolicyForm.ts
@@ -1,3 +1,4 @@
+import "#components/ak-text-input";
 import "#components/ak-switch-input";
 import "#elements/forms/FormGroup";
 import "#elements/forms/HorizontalFormElement";
@@ -34,19 +35,21 @@ export class DummyPolicyForm extends BasePolicyForm<DummyPolicy> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <span>
+        return html`<span>
                 ${msg(
                     "A policy used for testing. Always returns the same result as specified below after waiting a random duration.",
                 )}
             </span>
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name || "")}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+            <ak-text-input
+                label=${msg("Policy Name")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name || "")}"
+                placeholder=${msg("Type a policy name...")}
+                autocomplete="off"
+                autofocus
+            >
+            </ak-text-input>
             <ak-switch-input
                 name="executionLogging"
                 label=${msg("Execution logging")}
diff --git a/web/src/admin/property-mappings/BasePropertyMappingForm.ts b/web/src/admin/property-mappings/BasePropertyMappingForm.ts
index 06acd1dc9916..ec091036c095 100644
--- a/web/src/admin/property-mappings/BasePropertyMappingForm.ts
+++ b/web/src/admin/property-mappings/BasePropertyMappingForm.ts
@@ -1,4 +1,5 @@
 import "#elements/CodeMirror/ak-codemirror";
+import "#components/ak-text-input";
 
 import { docLink } from "#common/global";
 
@@ -20,6 +21,9 @@ export abstract class BasePropertyMappingForm<T extends PropertyMapping> extends
 > {
     protected docLink: string | URL = "/add-secure-apps/providers/property-mappings/expression";
 
+    public static override verboseName = msg("Property Mapping");
+    public static override verboseNamePlural = msg("Property Mappings");
+
     getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated mapping.")
@@ -31,14 +35,15 @@ export abstract class BasePropertyMappingForm<T extends PropertyMapping> extends
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+        return html`<ak-text-input
+                label=${msg("Mapping Name")}
+                placeholder=${msg("Type a name for this mapping...")}
+                autocomplete="off"
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            >
+            </ak-text-input>
             ${this.renderExtraFields()}
             <ak-form-element-horizontal label=${msg("Expression")} required name="expression">
                 <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
diff --git a/web/src/admin/property-mappings/PropertyMappingListPage.ts b/web/src/admin/property-mappings/PropertyMappingListPage.ts
index 71e8342456d6..9575568ab0b4 100644
--- a/web/src/admin/property-mappings/PropertyMappingListPage.ts
+++ b/web/src/admin/property-mappings/PropertyMappingListPage.ts
@@ -14,7 +14,7 @@ import "#admin/property-mappings/PropertyMappingSourceSAMLForm";
 import "#admin/property-mappings/PropertyMappingSourceSCIMForm";
 import "#admin/property-mappings/PropertyMappingSourceTelegramForm";
 import "#admin/property-mappings/PropertyMappingTestForm";
-import "#admin/property-mappings/PropertyMappingWizard";
+import "#admin/property-mappings/ak-property-mapping-wizard";
 import "#admin/rbac/ObjectPermissionModal";
 import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
@@ -22,49 +22,53 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName, modalInvoker } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
 
-import { PropertyMapping, PropertymappingsApi } from "@goauthentik/api";
+import { AKPropertyMappingWizard } from "#admin/property-mappings/ak-property-mapping-wizard";
+import { PropertyMappingTestForm } from "#admin/property-mappings/PropertyMappingTestForm";
 
-import { msg, str } from "@lit/localize";
-import { html, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { ModelEnum, PropertyMapping, PropertymappingsApi } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
 
 @customElement("ak-property-mapping-list")
 export class PropertyMappingListPage extends TablePage<PropertyMapping> {
     protected override searchEnabled = true;
-    public pageTitle = msg("Property Mappings");
-    public pageDescription = msg("Control how authentik exposes and interprets information.");
-    public pageIcon = "pf-icon pf-icon-blueprint";
+    public override pageTitle = msg("Property Mappings");
+    public override pageDescription = msg(
+        "Control how authentik exposes and interprets information.",
+    );
+    public override pageIcon = "pf-icon pf-icon-blueprint";
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    @property()
-    order = "name";
+    public override order = "name";
 
     @state()
-    hideManaged = getURLParam<boolean>("hideManaged", true);
+    protected hideManaged = getURLParam<boolean>("hideManaged", true);
 
-    async apiEndpoint(): Promise<PaginatedResponse<PropertyMapping>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<PropertyMapping>> {
         return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllList({
             ...(await this.defaultEndpointConfig()),
             managedIsnull: this.hideManaged ? true : undefined,
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Type"), "type"],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Property Mapping(s)")}
@@ -86,46 +90,45 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: PropertyMapping): SlottedTemplateResult[] {
+    protected override row(item: PropertyMapping): SlottedTemplateResult[] {
         return [
             html`${item.name}`,
             html`${item.verboseName}`,
-            html` <ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                        slot: "form",
-                        instancePk: item.pk,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.verboseName}`, {
-                            id: "form.headline.update",
-                        }),
-                    })}
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal model=${item.metaModelName} objectPk=${item.pk}>
-                </ak-rbac-object-permission-modal>
-                <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
-                    <span slot="submit">${msg("Test")}</span>
-                    <span slot="header">${msg("Test Property Mapping")}</span>
-                    <ak-property-mapping-test-form slot="form" .mapping=${item}>
-                    </ak-property-mapping-test-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Test")}>
-                            <i class="fas fa-vial" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>`,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.pk)}
+                ${IconPermissionButton(item.name, {
+                    model: item.metaModelName as ModelEnum,
+                    objectPk: item.pk,
+                })}
+
+                <button
+                    class="pf-c-button pf-m-plain"
+                    ${modalInvoker(
+                        PropertyMappingTestForm,
+                        { mapping: item },
+                        {
+                            closedBy: "closerequest",
+                        },
+                    )}
+                >
+                    <pf-tooltip position="top" content=${msg("Test")}>
+                        <i class="fas fa-vial" aria-hidden="true"></i>
+                    </pf-tooltip>
+                </button>
+            </div>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<ak-property-mapping-wizard></ak-property-mapping-wizard> `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return html`<button
+            class="pf-c-button pf-m-primary"
+            ${modalInvoker(AKPropertyMappingWizard)}
+        >
+            ${msg("New Property Mapping")}
+        </button>`;
     }
 
-    renderToolbarAfter(): TemplateResult {
+    protected override renderToolbarAfter(): SlottedTemplateResult {
         return html`<div class="pf-c-toolbar__group pf-m-filter-group">
             <div class="pf-c-toolbar__item pf-m-search-filter">
                 <div class="pf-c-input-group">
diff --git a/web/src/admin/property-mappings/PropertyMappingTestForm.ts b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
index a106a1ada362..442e50f9ebf4 100644
--- a/web/src/admin/property-mappings/PropertyMappingTestForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
@@ -3,8 +3,12 @@ import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/SearchSelect/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
 
 import { Form } from "#elements/forms/Form";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { AKLabel } from "#components/ak-label";
 
 import {
     CoreApi,
@@ -22,45 +26,80 @@ import {
 import YAML from "yaml";
 
 import { msg } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-property-mapping-test-form")
-export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
+export class PropertyMappingTestForm extends Form<PropertyMappingTestRequest> {
+    public static verboseName = msg("Property Mapping");
+    public static verboseNamePlural = msg("Property Mappings");
+    public static createLabel = msg("Test");
+
+    public override cancelable = true;
+    public override size = PFSize.XLarge;
+
+    #api = new PropertymappingsApi(DEFAULT_CONFIG);
+
+    protected override formatSubmitLabel(submitLabel?: string | null): string {
+        return submitLabel || msg("Run Test");
+    }
+
     @property({ attribute: false })
-    mapping?: PropertyMapping;
+    public mapping: PropertyMapping | null = null;
 
     @property({ attribute: false })
-    result?: PropertyMappingTestResult;
+    public result: PropertyMappingTestResult | null = null;
 
     @property({ attribute: false })
-    request?: PropertyMappingTestRequest;
+    public request: PropertyMappingTestRequest | null = null;
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return msg("Successfully sent test-request.");
     }
 
-    async send(data: PropertyMappingTestRequest): Promise<PropertyMappingTestResult> {
+    protected override async send(
+        data: PropertyMappingTestRequest,
+    ): Promise<PropertyMappingTestResult> {
         this.request = data;
-        const result = await new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllTestCreate({
+
+        this.result = await this.#api.propertymappingsAllTestCreate({
             pmUuid: this.mapping?.pk || "",
             propertyMappingTestRequest: data,
             formatResult: true,
         });
-        return (this.result = result);
+
+        return this.result;
     }
 
-    renderResult(): TemplateResult {
-        return html`<ak-form-element-horizontal label=${msg("Result")}>
+    public get verboseName(): string | null {
+        return this.mapping?.verboseName || null;
+    }
+
+    public get verboseNamePlural(): string | null {
+        return this.mapping?.verboseNamePlural || null;
+    }
+
+    protected renderResult(): SlottedTemplateResult {
+        return html`<ak-form-element-horizontal>
             ${this.result?.successful
-                ? html`<ak-codemirror
-                      mode="javascript"
-                      readonly
-                      value="${ifDefined(this.result?.result)}"
-                  >
-                  </ak-codemirror>`
-                : html` <div class="pf-c-form__group-label">
+                ? html`${AKLabel(
+                          {
+                              slot: "label",
+                              className: "pf-c-form__group-label",
+                              htmlFor: "result",
+                          },
+                          msg("Result"),
+                      )}
+
+                      <ak-codemirror
+                          id="result"
+                          mode="javascript"
+                          readonly
+                          value="${ifDefined(this.result?.result)}"
+                      >
+                      </ak-codemirror>`
+                : html`<div class="pf-c-form__group-label">
                       <div class="c-form__horizontal-group">
                           <span class="pf-c-form__label-text">
                               <pre>${this.result?.result}</pre>
@@ -70,15 +109,26 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
         </ak-form-element-horizontal>`;
     }
 
-    renderExampleButtons() {
-        return this.mapping?.metaModelName ===
-            ModelEnum.AuthentikSourcesLdapLdapsourcepropertymapping
-            ? html`<p>${msg("Example context data")}</p>
-                  ${this.renderExampleLDAP()}`
-            : nothing;
+    protected renderExampleButtons(): SlottedTemplateResult {
+        if (
+            this.mapping?.metaModelName !== ModelEnum.AuthentikSourcesLdapLdapsourcepropertymapping
+        ) {
+            return null;
+        }
+
+        return html`<div class="pf-c-form__group">
+            ${AKLabel(
+                {
+                    slot: "label",
+                    className: "pf-c-form__group-label",
+                },
+                msg("Example Context Data"),
+            )}
+            <p class="pf-c-form__helper-text">${this.renderExampleLDAP()}</p>
+        </div>`;
     }
 
-    renderExampleLDAP(): TemplateResult {
+    protected renderExampleLDAP(): SlottedTemplateResult {
         return html`
             <button
                 type="button"
@@ -127,9 +177,10 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
         `;
     }
 
-    protected override renderForm(): TemplateResult {
+    protected override renderForm(): SlottedTemplateResult {
         return html`<ak-form-element-horizontal label=${msg("User")} name="user">
                 <ak-search-select
+                    placeholder=${msg("Select a user...")}
                     blankable
                     .fetchObjects=${async (query?: string): Promise<User[]> => {
                         const args: CoreUsersListRequest = {
@@ -144,7 +195,7 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
                     .renderElement=${(user: User): string => {
                         return user.username;
                     }}
-                    .renderDescription=${(user: User): TemplateResult => {
+                    .renderDescription=${(user: User): SlottedTemplateResult => {
                         return html`${user.name}`;
                     }}
                     .value=${(user: User | undefined): number | undefined => {
@@ -158,6 +209,7 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Group")} name="group">
                 <ak-search-select
+                    placeholder=${msg("Select a group...")}
                     blankable
                     .fetchObjects=${async (query?: string): Promise<Group[]> => {
                         const args: CoreGroupsListRequest = {
@@ -181,17 +233,30 @@ export class PolicyTestForm extends Form<PropertyMappingTestRequest> {
                 >
                 </ak-search-select>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Context")} name="context">
-                <ak-codemirror mode="yaml" value=${YAML.stringify(this.request?.context ?? {})}>
+            ${this.renderExampleButtons()}
+
+            <ak-form-element-horizontal name="context">
+                ${AKLabel(
+                    {
+                        slot: "label",
+                        className: "pf-c-form__group-label",
+                        htmlFor: "context",
+                    },
+                    msg("Context"),
+                )}
+                <ak-codemirror
+                    id="context"
+                    mode="yaml"
+                    value=${YAML.stringify(this.request?.context ?? {})}
+                >
                 </ak-codemirror>
-                <p class="pf-c-form__helper-text">${this.renderExampleButtons()}</p>
             </ak-form-element-horizontal>
-            ${this.result ? this.renderResult() : nothing}`;
+            ${this.result ? this.renderResult() : null}`;
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-property-mapping-test-form": PolicyTestForm;
+        "ak-property-mapping-test-form": PropertyMappingTestForm;
     }
 }
diff --git a/web/src/admin/providers/BaseProviderForm.ts b/web/src/admin/providers/BaseProviderForm.ts
index 8e7334775252..ef73be230daa 100644
--- a/web/src/admin/providers/BaseProviderForm.ts
+++ b/web/src/admin/providers/BaseProviderForm.ts
@@ -11,6 +11,9 @@ import { msg } from "@lit/localize";
  * @prop {number} instancePk - The primary key of the instance to load.
  */
 export abstract class BaseProviderForm<T extends object> extends ModelForm<T, number> {
+    public static override verboseName = msg("Provider");
+    public static override verboseNamePlural = msg("Providers");
+
     public override getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated provider.")
diff --git a/web/src/admin/providers/ProviderListPage.ts b/web/src/admin/providers/ProviderListPage.ts
index 4c2359902f2e..fdc4d9a0c7fd 100644
--- a/web/src/admin/providers/ProviderListPage.ts
+++ b/web/src/admin/providers/ProviderListPage.ts
@@ -1,5 +1,5 @@
 import "#admin/applications/ApplicationWizardHint";
-import "#admin/providers/ProviderWizard";
+import "#admin/providers/ak-provider-wizard";
 import "#admin/providers/google_workspace/GoogleWorkspaceProviderForm";
 import "#admin/providers/ldap/LDAPProviderForm";
 import "#admin/providers/microsoft_entra/MicrosoftEntraProviderForm";
@@ -13,20 +13,20 @@ import "#admin/providers/ssf/SSFProviderFormPage";
 import "#admin/providers/wsfed/WSFederationProviderForm";
 import "#elements/buttons/SpinnerButton/index";
 import "#elements/forms/DeleteBulkForm";
-import "#elements/forms/ModalForm";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
+
+import { AKProviderWizard } from "#admin/providers/ak-provider-wizard";
 
 import { Provider, ProvidersApi } from "@goauthentik/api";
 
-import { msg, str } from "@lit/localize";
+import { msg } from "@lit/localize";
 import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -112,33 +112,24 @@ export class ProviderListPage extends TablePage<Provider> {
         return [
             html`<a href="#/core/providers/${item.pk}">${item.name}</a>`,
             this.#rowApp(item),
-            html`${item.verboseName}`,
-            html`<div>
-                <ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                        slot: "form",
-                        instancePk: item.pk,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.verboseName}`, {
-                            id: "form.headline.update",
-                        }),
-                    })}
-                    <button
-                        aria-label=${msg(str`Edit "${item.name}" provider`)}
-                        slot="trigger"
-                        class="pf-c-button pf-m-plain"
-                    >
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i aria-hidden="true" class="fas fa-edit"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.verboseName,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.pk)}
             </div>`,
         ];
     }
 
-    override renderObjectCreate(): TemplateResult {
-        return html`<ak-provider-wizard> </ak-provider-wizard> `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return html`
+            <button
+                class="pf-c-button pf-m-primary"
+                type="button"
+                aria-description="${msg("Open the wizard to create a new provider.")}"
+                ${AKProviderWizard.asModalInvoker()}
+            >
+                ${msg("New Provider")}
+            </button>
+        `;
     }
 }
 
diff --git a/web/src/admin/providers/RelatedApplicationButton.ts b/web/src/admin/providers/RelatedApplicationButton.ts
index fb31ee19cafa..f8bcad9e7db5 100644
--- a/web/src/admin/providers/RelatedApplicationButton.ts
+++ b/web/src/admin/providers/RelatedApplicationButton.ts
@@ -3,11 +3,14 @@ import "#elements/Spinner";
 import "#elements/forms/ModalForm";
 
 import { AKElement } from "#elements/Base";
+import { ModalInvokerButton } from "#elements/dialogs";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { ApplicationForm } from "#admin/applications/ApplicationForm";
 
 import { Provider } from "@goauthentik/api";
 
-import { msg } from "@lit/localize";
-import { CSSResult, html, TemplateResult } from "lit";
+import { CSSResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -17,12 +20,12 @@ export class RelatedApplicationButton extends AKElement {
     static styles: CSSResult[] = [PFButton];
 
     @property({ attribute: false })
-    provider?: Provider;
+    public provider?: Provider | null = null;
 
-    @property()
-    mode: "primary" | "backchannel" = "primary";
+    @property({ type: String })
+    public mode: "primary" | "backchannel" = "primary";
 
-    render(): TemplateResult {
+    protected override render(): SlottedTemplateResult {
         if (this.mode === "primary" && this.provider?.assignedApplicationSlug) {
             return html`<a href="#/core/applications/${this.provider.assignedApplicationSlug}">
                 ${this.provider.assignedApplicationName}
@@ -35,12 +38,10 @@ export class RelatedApplicationButton extends AKElement {
                 ${this.provider.assignedBackchannelApplicationName}
             </a>`;
         }
-        return html`<ak-forms-modal>
-            <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>
-        </ak-forms-modal>`;
+
+        return ModalInvokerButton(ApplicationForm, {
+            provider: this.provider?.pk,
+        });
     }
 }
 
diff --git a/web/src/admin/providers/ldap/LDAPProviderFormForm.ts b/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
index a015356253f5..814862d008aa 100644
--- a/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
@@ -39,12 +39,14 @@ import { ifDefined } from "lit/directives/if-defined.js";
 // Authentication flows, but we're storing them in the Authorization field of the target Provider.
 
 export interface LDAPProviderFormProps {
-    provider?: Partial<LDAPProvider>;
+    provider?: Partial<LDAPProvider> | null;
     errors?: ValidationError;
     brand?: CurrentBrand;
 }
 
-export function renderForm({ provider = {}, errors = {}, brand }: LDAPProviderFormProps) {
+export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormProps) {
+    provider ||= {};
+
     return html`
         <ak-text-input
             name="name"
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
index 33d92bf7b19e..e483a3ef0b85 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
@@ -135,8 +135,8 @@ type ShowClientSecret = (show: boolean) => void;
 type ShowLogoutMethod = (show: boolean) => void;
 
 export interface OAuth2ProviderFormProps {
-    provider?: Partial<OAuth2Provider>;
-    errors?: ValidationError;
+    provider?: Partial<OAuth2Provider> | null;
+    errors?: ValidationError | null;
     showClientSecret?: boolean;
     showClientSecretCallback?: ShowClientSecret;
     showLogoutMethod: boolean;
@@ -144,13 +144,15 @@ export interface OAuth2ProviderFormProps {
 }
 
 export function renderForm({
-    provider = {},
-    errors = {},
+    provider,
+    errors,
     showClientSecret = false,
     showClientSecretCallback = (_show) => undefined,
     showLogoutMethod = false,
     showLogoutMethodCallback = (_show) => undefined,
 }: OAuth2ProviderFormProps) {
+    provider ||= {};
+    errors ||= {};
     return html` <ak-text-input
             name="name"
             placeholder=${msg("Type a provider name...")}
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderRedirectURI.ts b/web/src/admin/providers/oauth2/OAuth2ProviderRedirectURI.ts
index 1e5c881e1203..65f28860d39b 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderRedirectURI.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderRedirectURI.ts
@@ -49,13 +49,13 @@ export class OAuth2ProviderRedirectURI extends AKControlElement<RedirectURI> {
     @queryAll(".ak-form-control")
     controls?: HTMLInputElement[];
 
-    json() {
+    toJSON(): RedirectURI {
         return Object.fromEntries(
             Array.from(this.controls ?? []).map((control) => [control.name, control.value]),
         ) as unknown as RedirectURI;
     }
 
-    get isValid() {
+    get valid() {
         return true;
     }
 
diff --git a/web/src/admin/providers/rac/EndpointForm.ts b/web/src/admin/providers/rac/EndpointForm.ts
index 1a134476c28c..1ebef00b5c78 100644
--- a/web/src/admin/providers/rac/EndpointForm.ts
+++ b/web/src/admin/providers/rac/EndpointForm.ts
@@ -1,4 +1,6 @@
 import "#components/ak-radio-input";
+import "#components/ak-text-input";
+import "#components/ak-number-input";
 import "#elements/CodeMirror";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
 import "#elements/forms/FormGroup";
@@ -9,34 +11,40 @@ import { propertyMappingsProvider, propertyMappingsSelector } from "./RACProvide
 import { DEFAULT_CONFIG } from "#common/api/config";
 
 import { ModelForm } from "#elements/forms/ModelForm";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { AKLabel } from "#components/ak-label";
 
 import { Endpoint, EndpointAuthModeEnum, ProtocolEnum, RacApi } from "@goauthentik/api";
 
 import YAML from "yaml";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-rac-endpoint-form")
 export class EndpointForm extends ModelForm<Endpoint, string> {
+    public static override verboseName = msg("RAC Endpoint");
+    public static override verboseNamePlural = msg("RAC Endpoints");
+
     @property({ type: Number })
-    providerID?: number;
+    public providerID: number | null = null;
 
-    loadInstance(pk: string): Promise<Endpoint> {
+    protected override loadInstance(pk: string): Promise<Endpoint> {
         return new RacApi(DEFAULT_CONFIG).racEndpointsRetrieve({
             pbmUuid: pk,
         });
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated endpoint.")
             : msg("Successfully created endpoint.");
     }
 
-    async send(data: Endpoint): Promise<Endpoint> {
+    public override async send(data: Endpoint): Promise<Endpoint> {
         data.authMode = EndpointAuthModeEnum.Prompt;
         if (!this.instance) {
             data.provider = this.providerID || 0;
@@ -54,20 +62,31 @@ export class EndpointForm extends ModelForm<Endpoint, string> {
         });
     }
 
-    protected override renderForm(): TemplateResult {
-        return html`
-            <ak-form-element-horizontal label=${msg("Provider Name")} name="name" required>
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                    placeholder=${msg("Type a provider name...")}
-                    spellcheck="false"
-                />
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Protocol")} required name="protocol">
+    protected override renderForm(): SlottedTemplateResult {
+        return html`<ak-text-input
+                label=${msg("Endpoint Name")}
+                name="name"
+                required
+                value="${ifDefined(this.instance?.name)}"
+                placeholder=${msg("Type a name for this endpoint...")}
+                spellcheck="false"
+                ?autofocus=${!this.instance}
+            >
+            </ak-text-input>
+            <ak-form-element-horizontal required name="protocol">
+                ${AKLabel(
+                    {
+                        slot: "label",
+                        className: "pf-c-form__group-label",
+                        htmlFor: "protocol",
+                        required: true,
+                    },
+                    msg("Protocol"),
+                )}
+
                 <ak-radio
+                    id="protocol"
+                    required
                     .options=${[
                         {
                             label: msg("RDP"),
@@ -86,34 +105,26 @@ export class EndpointForm extends ModelForm<Endpoint, string> {
                 >
                 </ak-radio>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Host")} name="host" required>
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.host)}"
-                    class="pf-c-form-control"
-                    required
-                />
-                <p class="pf-c-form__helper-text">
-                    ${msg("Hostname/IP to connect to. Optionally specify the port.")}
-                </p>
-            </ak-form-element-horizontal>
-            <ak-form-element-horizontal
+            <ak-text-input
+                label=${msg("Host")}
+                name="host"
+                required
+                value="${ifDefined(this.instance?.host)}"
+                input-hint="code"
+                help=${msg("Hostname/IP to connect to. Optionally specify the port.")}
+                placeholder=${msg("e.g. myserver.example.com, 10.0.0.1:22")}
+            >
+            </ak-text-input>
+            <ak-number-input
                 label=${msg("Maximum concurrent connections")}
                 name="maximumConnections"
                 required
+                value="${this.instance?.maximumConnections ?? 1}"
+                help=${msg(
+                    "Maximum concurrent allowed connections to this endpoint. Can be set to -1 to disable the limit.",
+                )}
             >
-                <input
-                    type="number"
-                    value="${this.instance?.maximumConnections ?? 1}"
-                    class="pf-c-form-control"
-                    required
-                />
-                <p class="pf-c-form__helper-text">
-                    ${msg(
-                        "Maximum concurrent allowed connections to this endpoint. Can be set to -1 to disable the limit.",
-                    )}
-                </p>
-            </ak-form-element-horizontal>
+            </ak-number-input>
             <ak-form-element-horizontal label=${msg("Property mappings")} name="propertyMappings">
                 <ak-dual-select-dynamic-selected
                     .provider=${propertyMappingsProvider}
@@ -133,8 +144,7 @@ export class EndpointForm extends ModelForm<Endpoint, string> {
                         <p class="pf-c-form__helper-text">${msg("Connection settings.")}</p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
-        `;
+            </ak-form-group> `;
     }
 }
 
diff --git a/web/src/admin/providers/rac/EndpointList.ts b/web/src/admin/providers/rac/EndpointList.ts
index 8c2b9802ea46..00bc14a456bd 100644
--- a/web/src/admin/providers/rac/EndpointList.ts
+++ b/web/src/admin/providers/rac/EndpointList.ts
@@ -8,34 +8,38 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { EndpointForm } from "#admin/providers/rac/EndpointForm";
+
 import { Endpoint, ModelEnum, RacApi, RACProvider } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { CSSResult, html, TemplateResult } from "lit";
+import { CSSResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 @customElement("ak-rac-endpoint-list")
 export class EndpointListPage extends Table<Endpoint> {
-    expandable = true;
-    checkbox = true;
-    clearOnRefresh = true;
+    public static styles: CSSResult[] = [...super.styles, PFDescriptionList];
 
     protected override searchEnabled = true;
+    protected override emptyStateMessage = msg("Create an endpoint to get started.");
 
-    @property()
-    order = "name";
+    public override expandable = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    @property({ attribute: false })
-    provider?: RACProvider;
+    public override searchPlaceholder = msg("Search for an endpoint by name or host...");
+    public override order = "name";
 
-    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
+    @property({ attribute: false })
+    public provider: RACProvider | null = null;
 
-    async apiEndpoint(): Promise<PaginatedResponse<Endpoint>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Endpoint>> {
         return new RacApi(DEFAULT_CONFIG).racEndpointsList({
             ...(await this.defaultEndpointConfig()),
             provider: this.provider?.pk,
@@ -43,13 +47,13 @@ export class EndpointListPage extends Table<Endpoint> {
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Host"), "host"],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Endpoint(s)")}
@@ -77,22 +81,13 @@ export class EndpointListPage extends Table<Endpoint> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: Endpoint): SlottedTemplateResult[] {
+    protected override row(item: Endpoint): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
-            html`${item.host}`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Endpoint")}</span>
-                    <ak-rac-endpoint-form slot="form" .instancePk=${item.pk}>
-                    </ak-rac-endpoint-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.name,
+            item.host,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(EndpointForm, item.pk)}
+
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikProvidersRacEndpoint}
                     objectPk=${item.pk}
@@ -102,7 +97,7 @@ export class EndpointListPage extends Table<Endpoint> {
         ];
     }
 
-    renderExpanded(item: Endpoint): TemplateResult {
+    protected override renderExpanded(item: Endpoint): SlottedTemplateResult {
         return html`<div class="pf-c-content">
             <p>
                 ${msg(
@@ -113,16 +108,10 @@ export class EndpointListPage extends Table<Endpoint> {
         </div>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Endpoint")}</span>
-                <ak-rac-endpoint-form slot="form" .providerID=${this.provider?.pk}>
-                </ak-rac-endpoint-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(EndpointForm, {
+            providerID: this.provider?.pk,
+        });
     }
 }
 
diff --git a/web/src/admin/providers/rac/RACProviderViewPage.ts b/web/src/admin/providers/rac/RACProviderViewPage.ts
index 30ef72d7b354..0106c026dddd 100644
--- a/web/src/admin/providers/rac/RACProviderViewPage.ts
+++ b/web/src/admin/providers/rac/RACProviderViewPage.ts
@@ -20,7 +20,7 @@ import { SlottedTemplateResult } from "#elements/types";
 import { ModelEnum, ProvidersApi, RACProvider } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { CSSResult, html, nothing, PropertyValues } from "lit";
+import { CSSResult, html, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
@@ -36,12 +36,6 @@ import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 
 @customElement("ak-provider-rac-view")
 export class RACProviderViewPage extends AKElement {
-    @property({ type: Number })
-    providerID?: number;
-
-    @state()
-    provider?: RACProvider;
-
     static styles: CSSResult[] = [
         PFButton,
         PFPage,
@@ -55,6 +49,12 @@ export class RACProviderViewPage extends AKElement {
         PFBanner,
     ];
 
+    @property({ type: Number })
+    public providerID?: number;
+
+    @state()
+    protected provider?: RACProvider;
+
     constructor() {
         super();
         this.addEventListener(EVENT_REFRESH, () => {
@@ -63,22 +63,23 @@ export class RACProviderViewPage extends AKElement {
         });
     }
 
-    fetchProvider(id: number) {
-        new ProvidersApi(DEFAULT_CONFIG)
+    protected fetchProvider(id: number) {
+        return new ProvidersApi(DEFAULT_CONFIG)
             .providersRacRetrieve({ id })
             .then((prov) => (this.provider = prov));
     }
 
-    willUpdate(changedProperties: PropertyValues<this>) {
+    protected override willUpdate(changedProperties: PropertyValues<this>) {
         if (changedProperties.has("providerID") && this.providerID) {
             this.fetchProvider(this.providerID);
         }
     }
 
-    render(): SlottedTemplateResult {
+    protected override render(): SlottedTemplateResult {
         if (!this.provider) {
-            return nothing;
+            return null;
         }
+
         return html`<main>
             <ak-tabs>
                 <div
@@ -133,12 +134,12 @@ export class RACProviderViewPage extends AKElement {
         </main>`;
     }
 
-    renderTabOverview(): SlottedTemplateResult {
+    protected renderTabOverview(): SlottedTemplateResult {
         if (!this.provider) {
-            return nothing;
+            return null;
         }
         return html`${this.provider?.assignedApplicationName
-                ? nothing
+                ? null
                 : html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by an Application.")}
                   </div>`}
@@ -146,7 +147,7 @@ export class RACProviderViewPage extends AKElement {
                 ? html`<div slot="header" class="pf-c-banner pf-m-warning">
                       ${msg("Warning: Provider is not used by any Outpost.")}
                   </div>`
-                : nothing}
+                : null}
             <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">
diff --git a/web/src/admin/providers/radius/RadiusProviderFormForm.ts b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
index b3da601ec753..70e5aba6e81e 100644
--- a/web/src/admin/providers/radius/RadiusProviderFormForm.ts
+++ b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
@@ -36,9 +36,9 @@ const clientNetworksHelp = msg(
 );
 
 export interface RADIUSProviderFormProps {
-    provider?: Partial<RadiusProvider>;
-    errors?: ValidationError;
-    brand?: CurrentBrand;
+    provider?: Partial<RadiusProvider> | null;
+    errors?: ValidationError | null;
+    brand?: CurrentBrand | null;
 }
 
 // All Provider objects have an Authorization flow, but not all providers have an Authentication
@@ -48,7 +48,10 @@ export interface RADIUSProviderFormProps {
 // weird-- we're looking up Authentication flows, but we're storing them in the Authorization
 // field of the target Provider.
 
-export function renderForm({ provider = {}, errors = {}, brand }: RADIUSProviderFormProps) {
+export function renderForm({ provider, errors, brand }: RADIUSProviderFormProps) {
+    provider ||= {};
+    errors ||= {};
+
     return html`
         <ak-text-input
             name="name"
diff --git a/web/src/admin/providers/saml/SAMLProviderFormForm.ts b/web/src/admin/providers/saml/SAMLProviderFormForm.ts
index c62c891b78f3..7b13af81fe7c 100644
--- a/web/src/admin/providers/saml/SAMLProviderFormForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderFormForm.ts
@@ -129,8 +129,8 @@ function renderHasSlsUrl(
         </ak-radio-input>`;
 }
 export interface SAMLProviderFormProps {
-    provider?: Partial<SAMLProvider>;
-    errors?: ValidationError;
+    provider?: Partial<SAMLProvider> | null;
+    errors?: ValidationError | null;
     setHasSigningKp: (ev: InputEvent) => void;
     hasSigningKp: boolean;
     signingKeyType: KeyTypeEnum | null;
@@ -143,8 +143,8 @@ export interface SAMLProviderFormProps {
 }
 
 export function renderForm({
-    provider = {},
-    errors = {},
+    provider,
+    errors,
     setHasSigningKp,
     hasSigningKp,
     signingKeyType,
@@ -155,6 +155,9 @@ export function renderForm({
     logoutMethod,
     setLogoutMethod,
 }: SAMLProviderFormProps) {
+    provider ||= {};
+    errors ||= {};
+
     // Get available hash algorithms for the selected key type
     const keyType = signingKeyType ?? KeyTypeEnum.Rsa;
 
diff --git a/web/src/admin/providers/scim/SCIMProviderForm.ts b/web/src/admin/providers/scim/SCIMProviderForm.ts
index d408eefc9177..f82d28a99875 100644
--- a/web/src/admin/providers/scim/SCIMProviderForm.ts
+++ b/web/src/admin/providers/scim/SCIMProviderForm.ts
@@ -28,7 +28,7 @@ export class SCIMProviderFormPage extends BaseProviderForm<SCIMProvider> {
         });
     }
 
-    get defaultInstance() {
+    public override createDefaultInstance(): SCIMProvider {
         return {
             authMode: SCIMAuthenticationModeEnum.Token,
         } as SCIMProvider;
diff --git a/web/src/admin/providers/scim/SCIMProviderFormForm.ts b/web/src/admin/providers/scim/SCIMProviderFormForm.ts
index 1b3faebb671b..3c9b32121e95 100644
--- a/web/src/admin/providers/scim/SCIMProviderFormForm.ts
+++ b/web/src/admin/providers/scim/SCIMProviderFormForm.ts
@@ -99,11 +99,14 @@ export function renderAuth(provider?: Partial<SCIMProvider>, errors: ValidationE
 
 export interface SCIMProviderFormProps {
     update: () => void;
-    provider?: Partial<SCIMProvider>;
-    errors?: ValidationError;
+    provider?: Partial<SCIMProvider> | null;
+    errors?: ValidationError | null;
 }
 
-export function renderForm({ provider = {}, errors = {}, update }: SCIMProviderFormProps) {
+export function renderForm({ provider, errors, update }: SCIMProviderFormProps) {
+    provider ||= {};
+    errors ||= {};
+
     return html`
         <ak-text-input
             name="name"
diff --git a/web/src/admin/rbac/ak-initial-permissions-form.ts b/web/src/admin/rbac/ak-initial-permissions-form.ts
index fbe47572bcd3..b6c75663fe0e 100644
--- a/web/src/admin/rbac/ak-initial-permissions-form.ts
+++ b/web/src/admin/rbac/ak-initial-permissions-form.ts
@@ -3,8 +3,10 @@ import "#elements/chips/Chip";
 import "#elements/chips/ChipGroup";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/SearchSelect/index";
+import "#components/ak-text-input";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
 
 import { DataProvision, DualSelectPair } from "#elements/ak-dual-select/types";
 import { ModelForm } from "#elements/forms/ModelForm";
@@ -36,6 +38,11 @@ export function rbacPermissionPair(item: Permission): DualSelectPair {
 
 @customElement("ak-initial-permissions-form")
 export class InitialPermissionsForm extends ModelForm<InitialPermissions, string> {
+    public static override verboseName = msg("Initial Permissions");
+    public static override verboseNamePlural = msg("Initial Permissions");
+
+    public override size = PFSize.XLarge;
+
     loadInstance(pk: string): Promise<InitialPermissions> {
         return new RbacApi(DEFAULT_CONFIG).rbacInitialPermissionsRetrieve({
             id: Number(pk),
@@ -62,16 +69,17 @@ export class InitialPermissionsForm extends ModelForm<InitialPermissions, string
 
     protected override renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+            <ak-text-input
+                label=${msg("Initial Permission Name")}
+                placeholder=${msg("Type a name for these initial permissions...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            >
+            </ak-text-input>
             <ak-form-element-horizontal label=${msg("Role")} required name="role">
                 <ak-search-select
+                    placeholder=${msg("Select a role...")}
                     .fetchObjects=${async (query?: string): Promise<Role[]> => {
                         const args: RbacRolesListRequest = {
                             ordering: "name",
diff --git a/web/src/admin/rbac/ak-initial-permissions-list.ts b/web/src/admin/rbac/ak-initial-permissions-list.ts
index 8e72a80cd49f..4ea40895e020 100644
--- a/web/src/admin/rbac/ak-initial-permissions-list.ts
+++ b/web/src/admin/rbac/ak-initial-permissions-list.ts
@@ -6,43 +6,49 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
 import { setPageDetails } from "#components/ak-page-navbar";
 
+import { InitialPermissionsForm } from "#admin/rbac/ak-initial-permissions-form";
+
 import { InitialPermissions, RbacApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, HTMLTemplateResult, PropertyValues, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, PropertyValues } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-initial-permissions-list")
 export class InitialPermissionsListPage extends TablePage<InitialPermissions> {
-    checkbox = true;
-    clearOnRefresh = true;
     protected override searchEnabled = true;
-    public pageTitle = msg("Initial Permissions");
-    public pageDescription = msg("Set initial permissions for newly created objects.");
-    public pageIcon = "fa fa-lock";
 
-    @property()
-    order = "name";
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for initial permissions by name...");
+    protected override emptyStateMessage = msg("Create an initial permission to get started.");
+
+    public override pageTitle = msg("Initial Permissions");
+    public override pageDescription = msg("Set initial permissions for newly created objects.");
+    public override pageIcon = "fa fa-lock";
+
+    public override order = "name";
 
-    async apiEndpoint(): Promise<PaginatedResponse<InitialPermissions>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<InitialPermissions>> {
         return new RbacApi(DEFAULT_CONFIG).rbacInitialPermissionsList(
             await this.defaultEndpointConfig(),
         );
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         // ---
         [msg("Name"), "name"],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Initial Permissions")}
@@ -64,44 +70,28 @@ export class InitialPermissionsListPage extends TablePage<InitialPermissions> {
         </ak-forms-delete-bulk>`;
     }
 
-    render(): HTMLTemplateResult {
-        return html` <section class="pf-c-page__main-section pf-m-no-padding-mobile">
+    protected override render(): SlottedTemplateResult {
+        return html`<section class="pf-c-page__main-section pf-m-no-padding-mobile">
             <div class="pf-c-card">${this.renderTable()}</div>
         </section>`;
     }
 
-    row(item: InitialPermissions): SlottedTemplateResult[] {
+    protected override row(item: InitialPermissions): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
-            html`<div>
-                <ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Initial Permissions")}</span>
-                    <ak-initial-permissions-form slot="form" .instancePk=${item.pk}>
-                    </ak-initial-permissions-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.name,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(InitialPermissionsForm, item.pk)}
             </div>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Initial Permissions")}</span>
-                <ak-initial-permissions-form slot="form"> </ak-initial-permissions-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(InitialPermissionsForm);
     }
 
-    updated(changed: PropertyValues<this>) {
+    public override updated(changed: PropertyValues<this>) {
         super.updated(changed);
+
         setPageDetails({
             icon: this.pageIcon,
             header: this.pageTitle,
@@ -110,12 +100,6 @@ export class InitialPermissionsListPage extends TablePage<InitialPermissions> {
     }
 }
 
-declare global {
-    interface HTMLElementTagNameMap {
-        "initial-permissions-list": InitialPermissionsListPage;
-    }
-}
-
 declare global {
     interface HTMLElementTagNameMap {
         "ak-initial-permissions-list": InitialPermissionsListPage;
diff --git a/web/src/admin/rbac/ak-rbac-object-permission-page.ts b/web/src/admin/rbac/ak-rbac-object-permission-page.ts
index 46a3d2dca7b9..14a0d0fbaaca 100644
--- a/web/src/admin/rbac/ak-rbac-object-permission-page.ts
+++ b/web/src/admin/rbac/ak-rbac-object-permission-page.ts
@@ -4,6 +4,7 @@ import "#admin/roles/ak-role-assigned-object-permissions-table";
 import "#elements/Tabs";
 
 import { AKElement } from "#elements/Base";
+import { ifPresent } from "#elements/utils/attributes";
 
 import { ModelEnum } from "@goauthentik/api";
 
@@ -34,7 +35,7 @@ export class ObjectPermissionPage extends AKElement {
     // TODO: Use attribute casing.
     // @property({ attribute: "object-pk" })
     @property()
-    public objectPk?: string | null;
+    public objectPk: string | null = null;
 
     @property({ type: Boolean })
     public embedded = false;
@@ -74,7 +75,9 @@ export class ObjectPermissionPage extends AKElement {
                             "Permissions assigned to this role which affect all object instances of a given type.",
                         )}
                     </div>
-                    <ak-role-assigned-global-permissions-table roleUuid=${this.objectPk as string}>
+                    <ak-role-assigned-global-permissions-table
+                        role-uuid=${ifPresent(this.objectPk)}
+                    >
                     </ak-role-assigned-global-permissions-table>
                 </div>
             </div>
@@ -93,7 +96,9 @@ export class ObjectPermissionPage extends AKElement {
                             "Permissions assigned to this role affecting specific object instances.",
                         )}
                     </div>
-                    <ak-role-assigned-object-permissions-table roleUuid=${this.objectPk as string}>
+                    <ak-role-assigned-object-permissions-table
+                        role-uuid=${ifPresent(this.objectPk)}
+                    >
                     </ak-role-assigned-object-permissions-table>
                 </div>
             </div>
diff --git a/web/src/admin/rbac/ak-rbac-permission-table.ts b/web/src/admin/rbac/ak-rbac-permission-table.ts
index c5e99ca772e6..2a86f81b02f4 100644
--- a/web/src/admin/rbac/ak-rbac-permission-table.ts
+++ b/web/src/admin/rbac/ak-rbac-permission-table.ts
@@ -21,26 +21,26 @@ export class RBACPermissionTable extends Table<Permission> {
 
     public override order = "content_type__app_label,content_type__model";
 
-    async apiEndpoint(): Promise<PaginatedResponse<Permission>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Permission>> {
         return new RbacApi(DEFAULT_CONFIG).rbacPermissionsList(await this.defaultEndpointConfig());
     }
 
-    groupBy(items: Permission[]): [string, Permission[]][] {
+    protected override groupBy(items: Permission[]): [string, Permission[]][] {
         return groupBy(items, (perm) => {
             return perm.appLabelVerbose;
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "codename"],
         [msg("Model"), ""],
     ];
 
-    protected row(item: Permission): SlottedTemplateResult[] {
+    protected override row(item: Permission): SlottedTemplateResult[] {
         return [html`<div>${item.name}</div>`, html`${item.modelVerbose}`];
     }
 
-    protected renderSelectedChip(item: Permission): SlottedTemplateResult {
+    protected override renderSelectedChip(item: Permission): SlottedTemplateResult {
         return item.name;
     }
 }
diff --git a/web/src/admin/rbac/ak-rbac-role-object-permission-form.ts b/web/src/admin/rbac/ak-rbac-role-object-permission-form.ts
index 71273122149e..25aa3c02b7bb 100644
--- a/web/src/admin/rbac/ak-rbac-role-object-permission-form.ts
+++ b/web/src/admin/rbac/ak-rbac-role-object-permission-form.ts
@@ -18,7 +18,7 @@ import {
 } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, nothing } from "lit";
+import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 interface RoleAssignData {
@@ -30,11 +30,19 @@ interface RoleAssignData {
 
 @customElement("ak-rbac-role-object-permission-form")
 export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number> {
-    @property()
-    public model?: ModelEnum;
+    public static override verboseName = msg("Role Object Permission");
+    public static override verboseNamePlural = msg("Role Object Permissions");
+    public static override createLabel = msg("Assign");
+    public static override submitVerb = msg("Assign");
 
-    @property()
-    public objectPk?: string;
+    @property({ type: String })
+    public model: ModelEnum | null = null;
+
+    @property({
+        attribute: "object-pk",
+        useDefault: true,
+    })
+    public objectPk: string | null = null;
 
     @state()
     protected modelPermissions: PaginatedPermissionList | null = null;
@@ -64,6 +72,7 @@ export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number>
 
     send(data: RoleAssignData): Promise<unknown> {
         const [app, _model] = this.model?.split(".") || "";
+
         return new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesAssign({
             uuid: data.role,
             permissionAssignRequest: {
@@ -71,15 +80,16 @@ export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number>
                     .filter((key) => data.permissions[key])
                     .map((permission) => `${app}.${permission}`),
                 model: this.model!,
-                objectPk: this.objectPk,
+                objectPk: this.objectPk ?? undefined,
             },
         });
     }
 
     renderForm(): SlottedTemplateResult {
         if (!this.modelPermissions) {
-            return nothing;
+            return null;
         }
+
         return html`<span
                 >${msg(
                     "Choose the object permissions that you want the selected role to have on this object. These object permissions are in addition to any global permissions already within the role.",
@@ -88,6 +98,7 @@ export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number>
             <form class="pf-c-form pf-m-horizontal">
                 <ak-form-element-horizontal label=${msg("Role")} name="role">
                     <ak-search-select
+                        placeholder=${msg("Select a role...")}
                         .fetchObjects=${async (query?: string): Promise<Role[]> => {
                             const args: RbacRolesListRequest = {
                                 ordering: "name",
diff --git a/web/src/admin/rbac/ak-rbac-role-object-permission-table.ts b/web/src/admin/rbac/ak-rbac-role-object-permission-table.ts
index 269a2b1930d5..a9d5744917a5 100644
--- a/web/src/admin/rbac/ak-rbac-role-object-permission-table.ts
+++ b/web/src/admin/rbac/ak-rbac-role-object-permission-table.ts
@@ -6,9 +6,11 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { createPaginatedResponse } from "#common/api/responses";
 
+import { ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
-import { ifPresent } from "#elements/utils/attributes";
+
+import { RoleObjectPermissionForm } from "#admin/rbac/ak-rbac-role-object-permission-form";
 
 import {
     ModelEnum,
@@ -18,7 +20,7 @@ import {
 } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("ak-rbac-role-object-permission-table")
@@ -26,20 +28,21 @@ export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectP
     @property({ type: String })
     public model: ModelEnum | null = null;
 
-    // TODO: Use attribute casing.
-    // @property({ attribute: "object-pk" })
-    @property()
-    public objectPk?: string | number;
+    // TODO: Switch this to attribute-casing when we all the RBAC components are settled.
+    @property({ type: String, attribute: "objectPk" })
+    public objectPk: string | null = null;
 
     @state()
-    modelPermissions?: PaginatedPermissionList;
+    protected modelPermissions?: PaginatedPermissionList;
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
     protected override searchEnabled = true;
 
-    async apiEndpoint(): Promise<PaginatedResponse<RoleAssignedObjectPermission>> {
+    protected override async apiEndpoint(): Promise<
+        PaginatedResponse<RoleAssignedObjectPermission>
+    > {
         if (!this.objectPk || !this.model) {
             return createPaginatedResponse([]);
         }
@@ -73,23 +76,14 @@ export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectP
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<ak-forms-modal>
-            <span slot="submit">${msg("Assign")}</span>
-            <span slot="header">${msg("Assign object permissions to role")}</span>
-            <ak-rbac-role-object-permission-form
-                model=${ifPresent(this.model)}
-                objectPk=${ifPresent(this.objectPk)}
-                slot="form"
-            >
-            </ak-rbac-role-object-permission-form>
-            <button slot="trigger" class="pf-c-button pf-m-primary">
-                ${msg("Assign Object Permission")}
-            </button>
-        </ak-forms-modal>`;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(RoleObjectPermissionForm, {
+            model: this.model,
+            objectPk: this.objectPk,
+        });
     }
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Permission(s)")}
@@ -118,7 +112,7 @@ export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectP
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: RoleAssignedObjectPermission): SlottedTemplateResult[] {
+    protected override row(item: RoleAssignedObjectPermission): SlottedTemplateResult[] {
         const baseRow = [html` <a href="#/identity/roles/${item.rolePk}">${item.name}</a>`];
         this.modelPermissions?.results.forEach((perm) => {
             const assignedToModel = item.modelPermissions.some(
diff --git a/web/src/admin/roles/ak-related-role-table.ts b/web/src/admin/roles/ak-related-role-table.ts
index b711cf0e0f01..8f3c5534d2b9 100644
--- a/web/src/admin/roles/ak-related-role-table.ts
+++ b/web/src/admin/roles/ak-related-role-table.ts
@@ -9,8 +9,8 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { renderModal } from "#elements/dialogs";
 import { AKFormSubmitEvent, Form } from "#elements/forms/Form";
-import { renderModal } from "#elements/modals/utils";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
@@ -27,8 +27,8 @@ import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("ak-add-related-role-form")
 export class AddRelatedRoleForm extends Form<{ roles: string[] }> {
-    public override entitySingular = msg("Role");
-    public override entityPlural = msg("Roles");
+    public static override verboseName = msg("Role");
+    public static override verboseNamePlural = msg("Roles");
 
     #api = new RbacApi(DEFAULT_CONFIG);
 
@@ -245,7 +245,7 @@ export class RelatedRoleTable extends Table<Role> {
             html`<button
                 class="pf-c-button pf-m-plain"
                 type="button"
-                ${RoleForm.asEditModalInvoker(item.pk)}
+                ${RoleForm.asInstanceInvoker(item.pk)}
             >
                 <pf-tooltip position="top" content=${msg("Edit")}>
                     <i class="fas fa-edit" aria-hidden="true"></i>
diff --git a/web/src/admin/roles/ak-role-assigned-global-permissions-table.ts b/web/src/admin/roles/ak-role-assigned-global-permissions-table.ts
index 74b6f054153e..821c9f5dbb03 100644
--- a/web/src/admin/roles/ak-role-assigned-global-permissions-table.ts
+++ b/web/src/admin/roles/ak-role-assigned-global-permissions-table.ts
@@ -7,52 +7,52 @@ import { groupBy } from "#common/utils";
 
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
+import { ifPresent } from "#elements/utils/attributes";
 
 import { Permission, RbacApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-role-assigned-global-permissions-table")
 export class RoleAssignedGlobalPermissionsTable extends Table<Permission> {
-    @property()
-    roleUuid?: string;
+    @property({ type: String, attribute: "role-uuid" })
+    public roleUuid: string | null = null;
 
     protected override searchEnabled = true;
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    order = "content_type__app_label,content_type__model";
+    public override order = "content_type__app_label,content_type__model";
 
-    async apiEndpoint(): Promise<PaginatedResponse<Permission>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Permission>> {
         return new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
             ...(await this.defaultEndpointConfig()),
-            role: this.roleUuid,
+            role: this.roleUuid ?? undefined,
         });
     }
 
-    groupBy(items: Permission[]): [string, Permission[]][] {
+    protected override groupBy(items: Permission[]): [string, Permission[]][] {
         return groupBy(items, (obj) => {
             return obj.appLabelVerbose;
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         // ---
         [msg("Model"), "model"],
         [msg("Permission"), ""],
         ["", null, msg("Assigned to role")],
     ];
 
-    renderObjectCreate(): TemplateResult {
+    protected renderObjectCreate(): SlottedTemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit">${msg("Assign")}</span>
                 <span slot="header">${msg("Assign permission to role")}</span>
-                <ak-role-permission-form roleUuid=${ifDefined(this.roleUuid)} slot="form">
+                <ak-role-permission-form role-uuid=${ifPresent(this.roleUuid)} slot="form">
                 </ak-role-permission-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">
                     ${msg("Assign permission")}
@@ -61,7 +61,7 @@ export class RoleAssignedGlobalPermissionsTable extends Table<Permission> {
         `;
     }
 
-    renderToolbarSelected(): TemplateResult {
+    protected renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Permission(s)")}
diff --git a/web/src/admin/roles/ak-role-assigned-object-permissions-table.ts b/web/src/admin/roles/ak-role-assigned-object-permissions-table.ts
index a41c106ea397..3b5282eebaa7 100644
--- a/web/src/admin/roles/ak-role-assigned-object-permissions-table.ts
+++ b/web/src/admin/roles/ak-role-assigned-object-permissions-table.ts
@@ -15,35 +15,37 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-role-assigned-object-permissions-table")
 export class RoleAssignedObjectPermissionTable extends Table<ExtraRoleObjectPermission> {
-    @property()
-    roleUuid?: string;
+    @property({ type: String, attribute: "role-uuid" })
+    public roleUUID: string | null = null;
 
     protected override searchEnabled = true;
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    async apiEndpoint(): Promise<PaginatedResponse<ExtraRoleObjectPermission>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<ExtraRoleObjectPermission>> {
         return new RbacApi(DEFAULT_CONFIG).rbacPermissionsRolesList({
             ...(await this.defaultEndpointConfig()),
-            uuid: this.roleUuid || "",
+            uuid: this.roleUUID || "",
         });
     }
 
-    groupBy(items: ExtraRoleObjectPermission[]): [string, ExtraRoleObjectPermission[]][] {
+    protected override groupBy(
+        items: ExtraRoleObjectPermission[],
+    ): [string, ExtraRoleObjectPermission[]][] {
         return groupBy(items, (obj) => {
             return obj.appLabelVerbose;
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Model"), "model"],
         [msg("Permission"), ""],
         [msg("Object"), ""],
         [""],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): TemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Permission(s)")}
@@ -58,7 +60,7 @@ export class RoleAssignedObjectPermissionTable extends Table<ExtraRoleObjectPerm
                 return new RbacApi(
                     DEFAULT_CONFIG,
                 ).rbacPermissionsAssignedByRolesUnassignPartialUpdate({
-                    uuid: this.roleUuid || "",
+                    uuid: this.roleUUID || "",
                     patchedPermissionAssignRequest: {
                         permissions: [`${item.appLabel}.${item.codename}`],
                         objectPk: item.objectPk,
@@ -73,7 +75,7 @@ export class RoleAssignedObjectPermissionTable extends Table<ExtraRoleObjectPerm
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: ExtraRoleObjectPermission): SlottedTemplateResult[] {
+    protected override row(item: ExtraRoleObjectPermission): SlottedTemplateResult[] {
         return [
             html`${item.modelVerbose}`,
             html`${item.name}`,
diff --git a/web/src/admin/roles/ak-role-form.ts b/web/src/admin/roles/ak-role-form.ts
index dc0f72b12969..4d20167119ae 100644
--- a/web/src/admin/roles/ak-role-form.ts
+++ b/web/src/admin/roles/ak-role-form.ts
@@ -5,6 +5,7 @@ import "#elements/forms/SearchSelect/index";
 import "#components/ak-text-input";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
 
 import { ModelForm } from "#elements/forms/ModelForm";
 
@@ -17,8 +18,10 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-role-form")
 export class RoleForm extends ModelForm<Role, string> {
-    public override entitySingular = msg("Role");
-    public override entityPlural = msg("Roles");
+    public static override verboseName = msg("Role");
+    public static override verboseNamePlural = msg("Roles");
+
+    public override size = PFSize.Medium;
 
     loadInstance(pk: string): Promise<Role> {
         return new RbacApi(DEFAULT_CONFIG).rbacRolesRetrieve({
diff --git a/web/src/admin/roles/ak-role-list.ts b/web/src/admin/roles/ak-role-list.ts
index a65089d92351..cc04f13c1ba1 100644
--- a/web/src/admin/roles/ak-role-list.ts
+++ b/web/src/admin/roles/ak-role-list.ts
@@ -6,6 +6,7 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
@@ -19,7 +20,7 @@ import { RbacApi, Role } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
 import { html, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 
 @customElement("ak-role-list")
 export class RoleListPage extends TablePage<Role> {
@@ -27,14 +28,14 @@ export class RoleListPage extends TablePage<Role> {
 
     public override checkbox = true;
     public override clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for a role...");
     public override pageTitle = msg("Roles");
     public override pageDescription = msg(
         "Manage roles which grant permissions to objects within authentik.",
     );
     public override pageIcon = "fa fa-lock";
 
-    @property({ type: String })
-    public order = "name";
+    public override order = "name";
 
     @state()
     protected hideManaged = getURLParam<boolean>("hideManaged", true);
@@ -46,7 +47,7 @@ export class RoleListPage extends TablePage<Role> {
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         // ---
         [msg("Name"), "name"],
         [msg("Actions"), null, msg("Row Actions")],
@@ -83,20 +84,12 @@ export class RoleListPage extends TablePage<Role> {
     row(item: Role): SlottedTemplateResult[] {
         return [
             html`<a href="#/identity/roles/${item.pk}">${item.name}</a>`,
-            html`<div>
-                <button class="pf-c-button pf-m-plain" ${RoleForm.asEditModalInvoker(item.pk)}>
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </div>`,
+            html`<div class="ak-c-table__actions">${IconEditButton(RoleForm, item.pk)}</div>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<button class="pf-c-button pf-m-primary" ${RoleForm.asModalInvoker()}>
-            ${msg("New Role")}
-        </button>`;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(RoleForm);
     }
 
     renderToolbarAfter(): TemplateResult {
diff --git a/web/src/admin/roles/ak-role-permission-form.ts b/web/src/admin/roles/ak-role-permission-form.ts
index d38aeab2586e..a1fea44fa7ee 100644
--- a/web/src/admin/roles/ak-role-permission-form.ts
+++ b/web/src/admin/roles/ak-role-permission-form.ts
@@ -8,9 +8,9 @@ import "#elements/forms/SearchSelect/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { renderModal } from "#elements/dialogs";
 import { AKFormSubmitEvent } from "#elements/forms/Form";
 import { ModelForm } from "#elements/forms/ModelForm";
-import { renderModal } from "#elements/modals/utils";
 
 import { Permission, RbacApi } from "@goauthentik/api";
 
@@ -27,8 +27,8 @@ export class RolePermissionForm extends ModelForm<RolePermissionAssign, number>
     @state()
     protected permissionsToAdd: Permission[] = [];
 
-    @property({ type: String })
-    public roleUuid: string | null = null;
+    @property({ type: String, attribute: "role-uuid" })
+    public roleUUID: string | null = null;
 
     public override reset(): void {
         super.reset();
@@ -36,20 +36,20 @@ export class RolePermissionForm extends ModelForm<RolePermissionAssign, number>
         this.permissionsToAdd = [];
     }
 
-    loadInstance(): Promise<RolePermissionAssign> {
+    protected override loadInstance(): Promise<RolePermissionAssign> {
         throw new Error("Method not implemented.");
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return msg("Successfully assigned permission.");
     }
 
-    async send(data: RolePermissionAssign) {
-        if (!this.roleUuid) {
+    protected override async send(data: RolePermissionAssign) {
+        if (!this.roleUUID) {
             return;
         }
         await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesAssign({
-            uuid: this.roleUuid,
+            uuid: this.roleUUID,
             permissionAssignRequest: {
                 permissions: data.permissions,
             },
@@ -58,16 +58,16 @@ export class RolePermissionForm extends ModelForm<RolePermissionAssign, number>
     }
 
     protected openSelectPermissionsModal = () => {
-        return renderModal(html`
-            <ak-form
+        return renderModal(
+            html`<ak-form
                 headline=${msg("Select permissions to assign")}
                 action-label=${msg("Confirm")}
                 @submit=${(event: AKFormSubmitEvent<Permission[]>) => {
                     this.permissionsToAdd = event.target.toJSON();
                 }}
                 ><ak-rbac-permission-table></ak-rbac-permission-table>
-            </ak-form>
-        `);
+            </ak-form> `,
+        );
     };
 
     protected override renderForm(): TemplateResult {
diff --git a/web/src/admin/sources/BaseSourceForm.ts b/web/src/admin/sources/BaseSourceForm.ts
index 20809473a29e..c05b5e492ce4 100644
--- a/web/src/admin/sources/BaseSourceForm.ts
+++ b/web/src/admin/sources/BaseSourceForm.ts
@@ -2,7 +2,7 @@ import { ModelForm } from "#elements/forms/ModelForm";
 
 import { msg } from "@lit/localize";
 
-export abstract class BaseSourceForm<T extends object> extends ModelForm<T, string> {
+export abstract class BaseSourceForm<T extends object = object> extends ModelForm<T, string> {
     getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated source.")
diff --git a/web/src/admin/sources/SourceListPage.ts b/web/src/admin/sources/SourceListPage.ts
index 962f9d56b1ad..e60d2deb7977 100644
--- a/web/src/admin/sources/SourceListPage.ts
+++ b/web/src/admin/sources/SourceListPage.ts
@@ -1,4 +1,4 @@
-import "#admin/sources/SourceWizard";
+import "#admin/sources/ak-source-wizard";
 import "#admin/sources/kerberos/KerberosSourceForm";
 import "#admin/sources/ldap/LDAPSourceForm";
 import "#admin/sources/oauth/OAuthSourceForm";
@@ -10,35 +10,36 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName, ModalInvokerButton } from "#elements/dialogs";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
+
+import { AKSourceWizard } from "#admin/sources/ak-source-wizard";
 
 import { Source, SourcesApi } from "@goauthentik/api";
 
-import { msg, str } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { msg } from "@lit/localize";
+import { html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-source-list")
 export class SourceListPage extends TablePage<Source> {
-    public pageTitle = msg("Federation and Social login");
-    public pageDescription = msg(
+    public override pageTitle = msg("Federation and Social login");
+    public override pageDescription = msg(
         "Sources of identities, which can either be synced into authentik's database, or can be used by users to authenticate and enroll themselves.",
     );
-    public pageIcon = "pf-icon pf-icon-middleware";
+    public override pageIcon = "pf-icon pf-icon-middleware";
     protected override searchEnabled = true;
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for a source...");
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    @property()
-    order = "name";
+    public override order = "name";
 
-    async apiEndpoint(): Promise<PaginatedResponse<Source>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Source>> {
         return new SourcesApi(DEFAULT_CONFIG).sourcesAllList(await this.defaultEndpointConfig());
     }
 
@@ -49,7 +50,7 @@ export class SourceListPage extends TablePage<Source> {
         ["", null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled =
             this.selectedElements.length < 1 ||
             this.selectedElements.some((item) => item.component === "");
@@ -74,7 +75,7 @@ export class SourceListPage extends TablePage<Source> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: Source): SlottedTemplateResult[] {
+    protected override row(item: Source): SlottedTemplateResult[] {
         if (!item.component) {
             return this.rowInbuilt(item);
         }
@@ -88,27 +89,14 @@ export class SourceListPage extends TablePage<Source> {
                           ${msg("Disabled")}</ak-label
                       >`}
             </a>`,
-            html`${item.verboseName}`,
-            html` <ak-forms-modal>
-                ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                    slot: "form",
-                    instancePk: item.slug,
-                    submitLabel: msg("Save Changes"),
-                    headline: msg(str`Update ${item.verboseName}`, {
-                        id: "form.headline.update",
-                    }),
-                })}
-                <span slot="submit">${msg("Save Changes")}</span>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </ak-forms-modal>`,
+            item.verboseName,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.slug, item.verboseName)}
+            </div>`,
         ];
     }
 
-    rowInbuilt(item: Source): SlottedTemplateResult[] {
+    protected rowInbuilt(item: Source): SlottedTemplateResult[] {
         return [
             html`<div>
                 <div>${item.name}</div>
@@ -119,8 +107,8 @@ export class SourceListPage extends TablePage<Source> {
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<ak-source-wizard> </ak-source-wizard> `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(AKSourceWizard);
     }
 }
 
diff --git a/web/src/admin/sources/kerberos/KerberosSourceForm.ts b/web/src/admin/sources/kerberos/KerberosSourceForm.ts
index 1c90718ea7f4..33bccf200272 100644
--- a/web/src/admin/sources/kerberos/KerberosSourceForm.ts
+++ b/web/src/admin/sources/kerberos/KerberosSourceForm.ts
@@ -2,10 +2,10 @@ import "#admin/common/ak-flow-search/ak-source-flow-search";
 import "#components/ak-secret-text-input";
 import "#components/ak-secret-textarea-input";
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
 import "#components/ak-radio-input";
 import "#components/ak-file-search-input";
 import "#components/ak-switch-input";
-import "#components/ak-text-input";
 import "#components/ak-textarea-input";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
 import "#elements/forms/FormGroup";
@@ -86,14 +86,16 @@ export class KerberosSourceForm extends BaseSourceForm<KerberosSource> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-text-input
-                name="name"
-                label=${msg("Name")}
-                value=${ifDefined(this.instance?.name)}
+        return html`<ak-text-input
+                label=${msg("Source Name")}
+                placeholder=${msg("Type a name for this source...")}
                 required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
             ></ak-text-input>
             <ak-slug-input
                 name="slug"
+                placeholder=${msg("e.g. my-kerberos-source")}
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
diff --git a/web/src/admin/sources/oauth/OAuthSourceForm.ts b/web/src/admin/sources/oauth/OAuthSourceForm.ts
index c73a68a634f5..704d54ccf29d 100644
--- a/web/src/admin/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts
@@ -3,6 +3,7 @@ import "#components/ak-file-search-input";
 import "#components/ak-radio-input";
 import "#components/ak-secret-textarea-input";
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
 import "#components/ak-switch-input";
 import "#elements/CodeMirror";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
@@ -270,16 +271,16 @@ export class OAuthSourceForm extends BaseSourceForm<OAuthSource> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+        return html`<ak-text-input
+                label=${msg("Source Name")}
+                placeholder=${msg("Type a name for this source...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-slug-input
                 name="slug"
+                placeholder=${msg("e.g. my-oauth-source")}
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
diff --git a/web/src/admin/sources/plex/PlexSourceForm.ts b/web/src/admin/sources/plex/PlexSourceForm.ts
index e3e08930d93c..8f6411286a3b 100644
--- a/web/src/admin/sources/plex/PlexSourceForm.ts
+++ b/web/src/admin/sources/plex/PlexSourceForm.ts
@@ -2,6 +2,7 @@ import "#elements/forms/Radio";
 import "#admin/common/ak-flow-search/ak-source-flow-search";
 import "#components/ak-file-search-input";
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
 import "#components/ak-switch-input";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
 import "#elements/ak-dual-select/ak-dual-select-provider";
@@ -51,7 +52,7 @@ export class PlexSourceForm extends BaseSourceForm<PlexSource> {
     @property({ attribute: false })
     plexResources?: PlexResource[];
 
-    get defaultInstance(): PlexSource | undefined {
+    public override createDefaultInstance(): PlexSource {
         return {
             clientId: randomString(40, ascii_letters + digits),
         } as PlexSource;
@@ -142,23 +143,21 @@ export class PlexSourceForm extends BaseSourceForm<PlexSource> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-
+        return html`<ak-text-input
+                label=${msg("Source Name")}
+                placeholder=${msg("Type a name for this source...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-slug-input
                 name="slug"
+                placeholder=${msg("e.g. my-plex-source")}
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
                 input-hint="code"
             ></ak-slug-input>
-
             <ak-switch-input
                 name="enabled"
                 label=${msg("Enabled")}
diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts
index 7f614d487ae0..0f9f3e23149d 100644
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@@ -2,6 +2,7 @@ import "#admin/common/ak-crypto-certificate-search";
 import "#admin/common/ak-flow-search/ak-source-flow-search";
 import "#components/ak-file-search-input";
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
 import "#components/ak-switch-input";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
 import "#elements/forms/FormGroup";
@@ -93,23 +94,21 @@ export class SAMLSourceForm extends BaseSourceForm<SAMLSource> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-
+        return html`<ak-text-input
+                label=${msg("Source Name")}
+                placeholder=${msg("Type a name for this source...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-slug-input
                 name="slug"
+                placeholder=${msg("e.g. my-saml-source")}
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
                 input-hint="code"
             ></ak-slug-input>
-
             <ak-switch-input
                 name="enabled"
                 label=${msg("Enabled")}
diff --git a/web/src/admin/sources/scim/SCIMSourceForm.ts b/web/src/admin/sources/scim/SCIMSourceForm.ts
index ce50b791c377..67de2b0b2a7f 100644
--- a/web/src/admin/sources/scim/SCIMSourceForm.ts
+++ b/web/src/admin/sources/scim/SCIMSourceForm.ts
@@ -1,4 +1,6 @@
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
+import "#components/ak-switch-input";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
 import "#elements/forms/FormGroup";
 import "#elements/forms/HorizontalFormElement";
@@ -42,34 +44,27 @@ export class SCIMSourceForm extends BaseSourceForm<SCIMSource> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-
+        return html`<ak-text-input
+                label=${msg("Source Name")}
+                placeholder=${msg("Type a name for this source...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-slug-input
                 name="slug"
+                placeholder=${msg("e.g. my-scim-source")}
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
                 input-hint="code"
             ></ak-slug-input>
+            <ak-switch-input
+                name="enabled"
+                label=${msg("Enabled")}
+                ?checked=${this.instance?.enabled ?? true}
+            ></ak-switch-input>
 
-            <ak-form-element-horizontal name="enabled">
-                <div class="pf-c-check">
-                    <input
-                        type="checkbox"
-                        class="pf-c-check__input"
-                        ?checked=${this.instance?.enabled ?? true}
-                    />
-                    <label class="pf-c-check__label"> ${msg("Enabled")} </label>
-                </div>
-            </ak-form-element-horizontal>
             <ak-form-group open label="${msg("SCIM Attribute mapping")}">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
@@ -118,8 +113,7 @@ export class SCIMSourceForm extends BaseSourceForm<SCIMSource> {
                         <p class="pf-c-form__helper-text">${placeholderHelperText}</p>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
-        </form>`;
+            </ak-form-group>`;
     }
 }
 
diff --git a/web/src/admin/sources/scim/SCIMSourceViewPage.ts b/web/src/admin/sources/scim/SCIMSourceViewPage.ts
index 536f58ac76c4..76cf54fe1140 100644
--- a/web/src/admin/sources/scim/SCIMSourceViewPage.ts
+++ b/web/src/admin/sources/scim/SCIMSourceViewPage.ts
@@ -153,7 +153,7 @@ export class SCIMSourceViewPage extends AKElement {
                                                     class="pf-m-primary"
                                                     identifier="${this.source?.tokenObj.identifier}"
                                                 >
-                                                    ${msg("Click to copy token")}
+                                                    ${msg("Copy token")}
                                                 </ak-token-copy-button>
                                             </div>
                                         </div>
diff --git a/web/src/admin/sources/telegram/TelegramSourceForm.ts b/web/src/admin/sources/telegram/TelegramSourceForm.ts
index 74dd07cc8315..e747a2c29ea8 100644
--- a/web/src/admin/sources/telegram/TelegramSourceForm.ts
+++ b/web/src/admin/sources/telegram/TelegramSourceForm.ts
@@ -1,5 +1,6 @@
 import "#admin/common/ak-flow-search/ak-source-flow-search";
 import "#components/ak-slug-input";
+import "#components/ak-text-input";
 import "#components/ak-secret-text-input";
 import "#elements/forms/Radio";
 import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider";
@@ -51,24 +52,21 @@ export class TelegramSourceForm extends BaseSourceForm<TelegramSource> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html`
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-
+        return html`<ak-text-input
+                label=${msg("Source Name")}
+                placeholder=${msg("Type a name for this source...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name)}"
+            ></ak-text-input>
             <ak-slug-input
                 name="slug"
+                placeholder=${msg("e.g. my-telegram-source")}
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
                 input-hint="code"
             ></ak-slug-input>
-
             <ak-switch-input
                 name="enabled"
                 label=${msg("Enabled")}
@@ -137,8 +135,8 @@ export class TelegramSourceForm extends BaseSourceForm<TelegramSource> {
                 label=${msg("Bot token")}
                 name="botToken"
                 input-hint="code"
-                ?required=${this.instance === undefined}
-                ?revealed=${this.instance === undefined}
+                ?required=${!this.instance}
+                ?revealed=${!this.instance}
             ></ak-secret-text-input>
             <ak-switch-input
                 name="requestMessageAccess"
@@ -242,8 +240,7 @@ export class TelegramSourceForm extends BaseSourceForm<TelegramSource> {
                         </ak-radio>
                     </ak-form-element-horizontal>
                 </div>
-            </ak-form-group>
-        `;
+            </ak-form-group>`;
     }
 }
 
diff --git a/web/src/admin/stages/BaseStageForm.ts b/web/src/admin/stages/BaseStageForm.ts
index 8d4ed091d32d..6bcb04e7f363 100644
--- a/web/src/admin/stages/BaseStageForm.ts
+++ b/web/src/admin/stages/BaseStageForm.ts
@@ -1,8 +1,13 @@
 import { ModelForm } from "#elements/forms/ModelForm";
 
+import type { Stage } from "@goauthentik/api/dist/models/Stage";
+
 import { msg } from "@lit/localize";
 
-export abstract class BaseStageForm<T extends object> extends ModelForm<T, string> {
+export abstract class BaseStageForm<T extends Stage> extends ModelForm<T, string> {
+    public static override verboseName = msg("Stage");
+    public static override verboseNamePlural = msg("Stages");
+
     getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated stage.")
diff --git a/web/src/admin/stages/StageListPage.ts b/web/src/admin/stages/StageListPage.ts
index 8711fafe8d0c..386151d1a809 100644
--- a/web/src/admin/stages/StageListPage.ts
+++ b/web/src/admin/stages/StageListPage.ts
@@ -6,45 +6,47 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { CustomFormElementTagName } from "#elements/forms/unsafe";
+import { IconEditButtonByTagName, modalInvoker, ModalInvokerButton } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
-import { StrictUnsafe } from "#elements/utils/unsafe";
 
-import { Stage, StagesApi } from "@goauthentik/api";
+import { AKStageWizard } from "#admin/stages/ak-stage-wizard";
+import { DuoDeviceImportForm } from "#admin/stages/authenticator_duo/DuoDeviceImportForm";
 
-import { msg, str } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { ModelEnum, Stage, StagesApi } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-stage-list")
 export class StageListPage extends TablePage<Stage> {
-    public pageTitle = msg("Stages");
-    public pageDescription = msg(
+    public override pageTitle = msg("Stages");
+    public override pageDescription = msg(
         "Stages are single steps of a Flow that a user is guided through. A stage can only be executed from within a flow.",
     );
-    public pageIcon = "pf-icon pf-icon-plugged";
+    public override pageIcon = "pf-icon pf-icon-plugged";
     protected override searchEnabled = true;
 
-    checkbox = true;
-    clearOnRefresh = true;
-
-    @property()
-    order = "name";
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override order = "name";
+    public override searchPlaceholder = msg("Search for a stage name, type, or flow...");
 
-    async apiEndpoint(): Promise<PaginatedResponse<Stage>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Stage>> {
         return new StagesApi(DEFAULT_CONFIG).stagesAllList(await this.defaultEndpointConfig());
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         // ---
         [msg("Name"), "name"],
         [msg("Flows")],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Stage(s)")}
@@ -66,26 +68,22 @@ export class StageListPage extends TablePage<Stage> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderStageActions(stage: Stage) {
-        return stage.component === "ak-stage-authenticator-duo-form"
-            ? html`<ak-forms-modal>
-                  <span slot="submit">${msg("Import")}</span>
-                  <span slot="header">${msg("Import Duo device")}</span>
-                  <ak-stage-authenticator-duo-device-import-form
-                      slot="form"
-                      .instancePk=${stage.pk}
-                  >
-                  </ak-stage-authenticator-duo-device-import-form>
-                  <button slot="trigger" class="pf-c-button pf-m-plain">
-                      <pf-tooltip position="top" content=${msg("Import devices")}>
-                          <i class="fas fa-file-import" aria-hidden="true"></i>
-                      </pf-tooltip>
-                  </button>
-              </ak-forms-modal>`
-            : nothing;
+    protected renderStageActions(stage: Stage): SlottedTemplateResult {
+        if (stage.component !== "ak-stage-authenticator-duo-form") {
+            return null;
+        }
+
+        return html`<button
+            class="pf-c-button pf-m-plain"
+            ${modalInvoker(DuoDeviceImportForm, { instancePk: stage.pk })}
+        >
+            <pf-tooltip position="top" content=${msg("Import devices")}>
+                <i class="fas fa-file-import" aria-hidden="true"></i>
+            </pf-tooltip>
+        </button>`;
     }
 
-    row(item: Stage): SlottedTemplateResult[] {
+    protected override row(item: Stage): SlottedTemplateResult[] {
         return [
             html`<div>${item.name}</div>
                 <small>${item.verboseName}</small>`,
@@ -98,31 +96,19 @@ export class StageListPage extends TablePage<Stage> {
                     </li>`;
                 })}
             </ul>`,
-            html`<div>
-                <ak-forms-modal>
-                    ${StrictUnsafe<CustomFormElementTagName>(item.component, {
-                        slot: "form",
-                        instancePk: item.pk,
-                        submitLabel: msg("Save Changes"),
-                        headline: msg(str`Update ${item.verboseName}`, {
-                            id: "form.headline.update",
-                        }),
-                    })}
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal model=${item.metaModelName} objectPk=${item.pk}>
-                </ak-rbac-object-permission-modal>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButtonByTagName(item.component, item.pk)}
+                ${IconPermissionButton(item.name, {
+                    model: item.metaModelName as ModelEnum,
+                    objectPk: item.pk,
+                })}
                 ${this.renderStageActions(item)}
             </div>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`<ak-stage-wizard></ak-stage-wizard> `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(AKStageWizard);
     }
 }
 
diff --git a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
index 049a1bc47d0e..174ab9cc8bb3 100644
--- a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
+++ b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
@@ -2,6 +2,7 @@ import "#elements/Divider";
 import "#elements/buttons/ActionButton/index";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/SearchSelect/index";
+import "#components/ak-text-input";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { MessageLevel } from "#common/messages";
@@ -9,6 +10,7 @@ import { MessageLevel } from "#common/messages";
 import { ModalForm } from "#elements/forms/ModalForm";
 import { ModelForm } from "#elements/forms/ModelForm";
 import { showMessage } from "#elements/messages/MessageContainer";
+import { SlottedTemplateResult } from "#elements/types";
 
 import {
     AuthenticatorDuoStage,
@@ -25,6 +27,13 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-stage-authenticator-duo-device-import-form")
 export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string> {
+    public static override verboseName = msg("Duo Device");
+    public static override verboseNamePlural = msg("Duo Devices");
+    public static override createLabel = msg("Import");
+    public static override submitVerb = msg("Import");
+    public static override modifierLabel = msg("Import");
+    public static override saveLabel = msg("Import");
+
     loadInstance(pk: string): Promise<AuthenticatorDuoStage> {
         return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorDuoRetrieve({
             stageUuid: pk,
@@ -43,16 +52,17 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
         });
     }
 
-    protected override renderForm(): TemplateResult {
+    protected override renderForm(): SlottedTemplateResult {
         return html` ${this.instance?.adminIntegrationKey !== ""
             ? this.renderFormAutomatic()
             : nothing}
         ${this.renderFormManual()}`;
     }
 
-    renderFormManual(): TemplateResult {
+    protected renderFormManual(): SlottedTemplateResult {
         return html`<ak-form-element-horizontal label=${msg("User")} required name="username">
                 <ak-search-select
+                    placeholder=${msg("Select a user...")}
                     .fetchObjects=${async (query?: string): Promise<User[]> => {
                         const args: CoreUsersListRequest = {
                             ordering: "username",
@@ -79,17 +89,20 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
                     ${msg("The user in authentik this device will be assigned to.")}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Duo User ID")} required name="duoUserId">
-                <input type="text" class="pf-c-form-control" required />
-                <p class="pf-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>`;
+            <ak-text-input
+                label=${msg("Duo User ID")}
+                required
+                name="duoUserId"
+                placeholder=${msg("Type the Duo user ID for this device...")}
+                autocomplete="off"
+                input-hint="code"
+                help=${msg("The user ID in Duo, can be found in the URL after clicking on a user.")}
+            >
+            </ak-text-input>`;
     }
 
-    renderFormAutomatic(): TemplateResult {
-        return html`
-            <ak-form-element-horizontal label=${msg("Automatic import")}>
+    renderFormAutomatic(): SlottedTemplateResult {
+        return html`<ak-form-element-horizontal label=${msg("Automatic import")}>
                 <ak-action-button
                     class="pf-m-primary"
                     .apiRequest=${() => {
@@ -111,8 +124,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
                 </ak-action-button>
             </ak-form-element-horizontal>
             <ak-divider>${msg("Or manually import")}</ak-divider>
-            <br />
-        `;
+            <br /> `;
     }
 }
 
diff --git a/web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts b/web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
index 1525929b4912..bcd4a8f6990f 100644
--- a/web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
+++ b/web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
@@ -6,6 +6,7 @@ import "#elements/forms/FormGroup";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/Radio";
 import "#elements/utils/TimeDeltaHelp";
+import "#components/ak-text-input";
 
 import {
     authenticatorWebauthnDeviceTypesListProvider,
@@ -102,14 +103,15 @@ export class AuthenticatorValidateStageForm extends BaseStageForm<AuthenticatorV
                     "Stage used to validate any authenticator. This stage should be used during authentication or authorization flows.",
                 )}
             </span>
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name || "")}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+
+            <ak-text-input
+                autofocus
+                label=${msg("Stage Name")}
+                placeholder=${msg("Type a stage name...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name || "")}"
+            ></ak-text-input>
             <ak-form-group open label="${msg("Stage-specific settings")}">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
diff --git a/web/src/admin/stages/invitation/InvitationForm.ts b/web/src/admin/stages/invitation/InvitationForm.ts
index 0007307a260d..394a12bde487 100644
--- a/web/src/admin/stages/invitation/InvitationForm.ts
+++ b/web/src/admin/stages/invitation/InvitationForm.ts
@@ -1,5 +1,6 @@
 import "#admin/common/ak-flow-search/ak-flow-search";
 import "#components/ak-switch-input";
+import "#components/ak-slug-input";
 import "#elements/CodeMirror";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/SearchSelect/index";
@@ -19,6 +20,9 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-invitation-form")
 export class InvitationForm extends ModelForm<Invitation, string> {
+    public static override verboseName = msg("Invitation");
+    public static override verboseNamePlural = msg("Invitations");
+
     loadInstance(pk: string): Promise<Invitation> {
         return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsRetrieve({
             inviteUuid: pk,
@@ -44,28 +48,15 @@ export class InvitationForm extends ModelForm<Invitation, string> {
     }
 
     protected override renderForm(): TemplateResult {
-        const checkSlug = (ev: InputEvent) => {
-            if (ev && ev.target && ev.target instanceof HTMLInputElement) {
-                ev.target.value = (ev.target.value ?? "").replace(/[^a-z0-9-]/g, "");
-            }
-        };
-
-        return html` <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    id="admin-stages-invitation-name"
-                    value="${this.instance?.name || ""}"
-                    class="pf-c-form-control"
-                    required
-                    @input=${(ev: InputEvent) => checkSlug(ev)}
-                    data-ak-slug="true"
-                />
-                <p class="pf-c-form__helper-text">
-                    ${msg(
-                        "The name of an invitation must be a slug: only lower case letters, numbers, and the hyphen are permitted here.",
-                    )}
-                </p>
-            </ak-form-element-horizontal>
+        return html`<ak-slug-input
+                label=${msg("Invitation Name")}
+                required
+                name="name"
+                value="${this.instance?.name || ""}"
+                help=${msg(
+                    "The name of an invitation must be a slug: only lower case letters, numbers, and the hyphen are permitted here.",
+                )}
+            ></ak-slug-input>
             <ak-form-element-horizontal label=${msg("Expires")} required name="expires">
                 <input
                     type="datetime-local"
diff --git a/web/src/admin/stages/invitation/InvitationListPage.ts b/web/src/admin/stages/invitation/InvitationListPage.ts
index 7717ca47f3d9..d1046da4b838 100644
--- a/web/src/admin/stages/invitation/InvitationListPage.ts
+++ b/web/src/admin/stages/invitation/InvitationListPage.ts
@@ -9,6 +9,7 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
 import { PFColor } from "#elements/Label";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
@@ -16,40 +17,42 @@ import { SlottedTemplateResult } from "#elements/types";
 
 import { setPageDetails } from "#components/ak-page-navbar";
 
+import { InvitationForm } from "#admin/stages/invitation/InvitationForm";
+
 import { FlowDesignationEnum, Invitation, ModelEnum, StagesApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { CSSResult, html, HTMLTemplateResult, nothing, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { CSSResult, html, PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 
 @customElement("ak-stage-invitation-list")
 export class InvitationListPage extends TablePage<Invitation> {
-    expandable = true;
+    public static styles: CSSResult[] = [...super.styles, PFBanner];
 
     protected override searchEnabled = true;
-    public pageTitle = msg("Invitations");
-    public pageDescription = msg(
+
+    public override pageTitle = msg("Invitations");
+    public override pageDescription = msg(
         "Create Invitation Links to enroll Users, and optionally force specific attributes of their account.",
     );
-    public pageIcon = "pf-icon pf-icon-migration";
-
-    static styles: CSSResult[] = [...super.styles, PFBanner];
+    public override pageIcon = "pf-icon pf-icon-migration";
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override expandable = true;
+    public override searchPlaceholder = msg("Search for an invitation by name...");
 
-    @property()
-    order = "expires";
+    public override order = "expires";
 
     @state()
-    invitationStageExists = false;
+    protected invitationStageExists = false;
 
     @state()
-    multipleEnrollmentFlows = false;
+    protected multipleEnrollmentFlows = false;
 
-    async apiEndpoint(): Promise<PaginatedResponse<Invitation>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Invitation>> {
         try {
             // Check if any invitation stages exist
             const stages = await new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesList({
@@ -73,14 +76,14 @@ export class InvitationListPage extends TablePage<Invitation> {
         });
     }
 
-    protected columns: TableColumn[] = [
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Created by"), "created_by"],
         [msg("Expiry")],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Invitation(s)")}
@@ -102,7 +105,7 @@ export class InvitationListPage extends TablePage<Invitation> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: Invitation): SlottedTemplateResult[] {
+    protected override row(item: Invitation): SlottedTemplateResult[] {
         return [
             html`<div>${item.name}</div>
                 ${!item.flowObj && this.multipleEnrollmentFlows
@@ -113,22 +116,14 @@ export class InvitationListPage extends TablePage<Invitation> {
                               )}
                           </ak-label>
                       `
-                    : nothing}`,
+                    : null}`,
             html`<div>
                     <a href="#/identity/users/${item.createdBy.pk}">${item.createdBy.username}</a>
                 </div>
                 <small>${item.createdBy.name}</small>`,
-            html`${item.expires?.toLocaleString() || msg("-")}`,
-            html`<ak-forms-modal>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Invitation")}</span>
-                    <ak-invitation-form slot="form" .instancePk=${item.pk}> </ak-invitation-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
+            item.expires?.toLocaleString() || msg("-"),
+            html`${IconEditButton(InvitationForm, item.pk)}
+
                 <ak-rbac-object-permission-modal
                     model=${ModelEnum.AuthentikStagesInvitationInvitation}
                     objectPk=${item.pk}
@@ -137,26 +132,19 @@ export class InvitationListPage extends TablePage<Invitation> {
         ];
     }
 
-    renderExpanded(item: Invitation): TemplateResult {
+    protected override renderExpanded(item: Invitation): SlottedTemplateResult {
         return html`<ak-stage-invitation-list-link
             .invitation=${item}
         ></ak-stage-invitation-list-link>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Invitation")}</span>
-                <ak-invitation-form slot="form"> </ak-invitation-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(InvitationForm);
     }
 
-    render(): HTMLTemplateResult {
+    protected override render(): SlottedTemplateResult {
         return html`${this.invitationStageExists
-                ? nothing
+                ? null
                 : html`
                       <div class="pf-c-banner pf-m-warning">
                           ${msg(
@@ -169,8 +157,9 @@ export class InvitationListPage extends TablePage<Invitation> {
             </section>`;
     }
 
-    updated(changed: PropertyValues<this>) {
+    public override updated(changed: PropertyValues<this>) {
         super.updated(changed);
+
         setPageDetails({
             icon: this.pageIcon,
             header: this.pageTitle,
diff --git a/web/src/admin/stages/prompt/PromptForm.ts b/web/src/admin/stages/prompt/PromptForm.ts
index cf643afb68a2..0b7eb81e1580 100644
--- a/web/src/admin/stages/prompt/PromptForm.ts
+++ b/web/src/admin/stages/prompt/PromptForm.ts
@@ -39,6 +39,9 @@ class PreviewStageHost implements StageHost {
 
 @customElement("ak-prompt-form")
 export class PromptForm extends ModelForm<Prompt, string> {
+    public static override verboseName = msg("Prompt");
+    public static override verboseNamePlural = msg("Prompts");
+
     @state()
     protected preview: PromptChallenge | null = null;
 
diff --git a/web/src/admin/stages/prompt/PromptListPage.ts b/web/src/admin/stages/prompt/PromptListPage.ts
index 466cf66435eb..80721c8745a0 100644
--- a/web/src/admin/stages/prompt/PromptListPage.ts
+++ b/web/src/admin/stages/prompt/PromptListPage.ts
@@ -9,30 +9,35 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { PFSize } from "#common/enums";
 
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { PromptForm } from "#admin/stages/prompt/PromptForm";
+
 import { ModelEnum, Prompt, StagesApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-stage-prompt-list")
 export class PromptListPage extends TablePage<Prompt> {
     protected override searchEnabled = true;
-    public pageTitle = msg("Prompts");
-    public pageDescription = msg("Single Prompts that can be used for Prompt Stages.");
-    public pageIcon = "pf-icon pf-icon-plugged";
+    public override searchPlaceholder = msg("Search for a prompt...");
+
+    public override pageTitle = msg("Prompts");
+    public override pageDescription = msg("Single Prompts that can be used for Prompt Stages.");
+    public override pageIcon = "pf-icon pf-icon-plugged";
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override clearOnRefresh = true;
 
-    @property()
-    order = "name";
+    public override order = "name";
 
-    async apiEndpoint(): Promise<PaginatedResponse<Prompt>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Prompt>> {
         return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsList(
             await this.defaultEndpointConfig(),
         );
@@ -47,7 +52,7 @@ export class PromptListPage extends TablePage<Prompt> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Prompt(s)")}
@@ -69,42 +74,31 @@ export class PromptListPage extends TablePage<Prompt> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: Prompt): SlottedTemplateResult[] {
+    protected override row(item: Prompt): SlottedTemplateResult[] {
         return [
-            html`${item.name}`,
+            item.name,
             html`<code>${item.fieldKey}</code>`,
-            html`${item.type}`,
-            html`${item.order}`,
+            item.type,
+            item.order || msg("-"),
             html`${item.promptStagesObj.map((stage) => {
                 return html`<li>${stage.name}</li>`;
             })}`,
-            html`<ak-forms-modal size=${PFSize.XLarge}>
-                    <span slot="submit">${msg("Save Changes")}</span>
-                    <span slot="header">${msg("Update Prompt")}</span>
-                    <ak-prompt-form slot="form" .instancePk=${item.pk}> </ak-prompt-form>
-                    <button slot="trigger" class="pf-c-button pf-m-plain">
-                        <pf-tooltip position="top" content=${msg("Edit")}>
-                            <i class="fas fa-edit" aria-hidden="true"></i>
-                        </pf-tooltip>
-                    </button>
-                </ak-forms-modal>
-                <ak-rbac-object-permission-modal
-                    model=${ModelEnum.AuthentikStagesPromptPrompt}
-                    objectPk=${item.pk}
-                >
-                </ak-rbac-object-permission-modal> `,
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(PromptForm, item.pk, item.name, {
+                    size: PFSize.XLarge,
+                })}
+                ${IconPermissionButton(item.name, {
+                    model: ModelEnum.AuthentikStagesPromptPrompt,
+                    objectPk: item.pk,
+                })}
+            </div>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal size=${PFSize.XLarge}>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("Create Prompt")}</span>
-                <ak-prompt-form slot="form"> </ak-prompt-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(PromptForm, null, null, {
+            size: PFSize.XLarge,
+        });
     }
 }
 
diff --git a/web/src/admin/stages/register.ts b/web/src/admin/stages/register.ts
index 463b8d82ccc0..8ae39375c9d8 100644
--- a/web/src/admin/stages/register.ts
+++ b/web/src/admin/stages/register.ts
@@ -2,7 +2,6 @@
  * @file Register all stage forms for admin interface.
  */
 
-import "#admin/stages/StageWizard";
 import "#admin/stages/authenticator_duo/AuthenticatorDuoStageForm";
 import "#admin/stages/authenticator_email/AuthenticatorEmailStageForm";
 import "#admin/stages/authenticator_sms/AuthenticatorSMSStageForm";
diff --git a/web/src/admin/stages/user_write/UserWriteStageForm.ts b/web/src/admin/stages/user_write/UserWriteStageForm.ts
index b327f8a34e15..14347f1bc001 100644
--- a/web/src/admin/stages/user_write/UserWriteStageForm.ts
+++ b/web/src/admin/stages/user_write/UserWriteStageForm.ts
@@ -2,10 +2,13 @@ import "#components/ak-switch-input";
 import "#elements/forms/FormGroup";
 import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/Radio";
+import "#components/ak-text-input";
 import "#elements/forms/SearchSelect/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { AKLabel } from "#components/ak-label";
+
 import { BaseStageForm } from "#admin/stages/BaseStageForm";
 
 import {
@@ -44,23 +47,33 @@ export class UserWriteStageForm extends BaseStageForm<UserWriteStage> {
     }
 
     protected override renderForm(): TemplateResult {
-        return html` <span>
+        return html` <div>
                 ${msg(
                     `Write any data from the flow's context's 'prompt_data' to the currently pending user. If no user
         is pending, a new user is created, and data is written to them.`,
                 )}
-            </span>
-            <ak-form-element-horizontal label=${msg("Name")} required name="name">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.name || "")}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
-            <ak-form-group open label="${msg("Stage-specific settings")}">
+            </div>
+            <ak-text-input
+                autofocus
+                label=${msg("Stage Name")}
+                placeholder=${msg("Type a stage name...")}
+                required
+                name="name"
+                value="${ifDefined(this.instance?.name || "")}"
+            >
+            </ak-text-input>
+            <ak-form-group open label=${msg("Stage-specific settings")}>
                 <div class="pf-c-form">
                     <ak-form-element-horizontal name="userCreationMode">
+                        ${AKLabel(
+                            {
+                                slot: "label",
+                                className: "pf-c-form__group-label",
+                                htmlFor: "userCreationMode",
+                            },
+                            msg("User creation mode"),
+                        )}
+
                         <ak-radio
                             .options=${[
                                 {
diff --git a/web/src/admin/tokens/TokenForm.ts b/web/src/admin/tokens/TokenForm.ts
index c3ea5a4174a3..fd9943c225ef 100644
--- a/web/src/admin/tokens/TokenForm.ts
+++ b/web/src/admin/tokens/TokenForm.ts
@@ -22,6 +22,9 @@ const EXPIRATION_DURATION = 30 * 60 * 1000; // 30 minutes
 
 @customElement("ak-token-form")
 export class TokenForm extends ModelForm<Token, string> {
+    public static override verboseName = msg("Token");
+    public static override verboseNamePlural = msg("Tokens");
+
     protected expirationMinimumDate = new Date();
 
     @state()
@@ -100,6 +103,7 @@ export class TokenForm extends ModelForm<Token, string> {
 
             <ak-form-element-horizontal label=${msg("User")} required name="user">
                 <ak-search-select
+                    placeholder=${msg("Select a user...")}
                     .fetchObjects=${async (query?: string): Promise<User[]> => {
                         const args: CoreUsersListRequest = {
                             ordering: "username",
diff --git a/web/src/admin/tokens/TokenListPage.ts b/web/src/admin/tokens/TokenListPage.ts
index cc7069e13a04..fa3ce6424a6f 100644
--- a/web/src/admin/tokens/TokenListPage.ts
+++ b/web/src/admin/tokens/TokenListPage.ts
@@ -10,36 +10,40 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { intentToLabel } from "#common/labels";
 
+import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton";
+import { IconEditButton, ModalInvokerButton } from "#elements/dialogs";
+import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { TokenForm } from "#admin/tokens/TokenForm";
+
 import { CoreApi, IntentEnum, ModelEnum, Token } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-token-list")
 export class TokenListPage extends TablePage<Token> {
     protected override searchEnabled = true;
-    public pageTitle = msg("Tokens");
-    public pageDescription = msg(
+    public override pageTitle = msg("Tokens");
+    public override pageDescription = msg(
         "Tokens are used throughout authentik for Email validation stages, Recovery keys and API access.",
     );
-    public pageIcon = "pf-icon pf-icon-security";
+    public override pageIcon = "pf-icon pf-icon-security";
+    public override searchPlaceholder = msg("Search for a token identifier, user, or intent...");
 
     protected override rowLabel(item: Token): string | null {
         return item.identifier;
     }
 
-    checkbox = true;
-    clearOnRefresh = true;
-
-    @property()
-    order = "expires";
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override order = "expires";
 
-    async apiEndpoint(): Promise<PaginatedResponse<Token>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Token>> {
         return new CoreApi(DEFAULT_CONFIG).coreTokensList(await this.defaultEndpointConfig());
     }
 
@@ -52,7 +56,7 @@ export class TokenListPage extends TablePage<Token> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Token(s)")}
@@ -77,18 +81,11 @@ export class TokenListPage extends TablePage<Token> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <ak-forms-modal>
-                <span slot="submit">${msg("Create")}</span>
-                <span slot="header">${msg("New Token")}</span>
-                <ak-token-form slot="form"> </ak-token-form>
-                <button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
-            </ak-forms-modal>
-        `;
+    protected override renderObjectCreate(): SlottedTemplateResult {
+        return ModalInvokerButton(TokenForm);
     }
 
-    row(item: Token): SlottedTemplateResult[] {
+    protected override row(item: Token): SlottedTemplateResult[] {
         return [
             html`<div>${item.identifier}</div>
                 ${item.managed
@@ -98,19 +95,10 @@ export class TokenListPage extends TablePage<Token> {
             html`<ak-status-label type="warning" ?good=${item.expiring}></ak-status-label>`,
             Timestamp(item.expires && item.expiring ? item.expires : null),
             html`${intentToLabel(item.intent ?? IntentEnum.Api)}`,
-            html`
+            html`<div class="ak-c-table__actions">
                 ${!item.managed
-                    ? html`<ak-forms-modal>
-                          <span slot="submit">${msg("Save Changes")}</span>
-                          <span slot="header">${msg("Update Token")}</span>
-                          <ak-token-form slot="form" .instancePk=${item.identifier}></ak-token-form>
-                          <button slot="trigger" class="pf-c-button pf-m-plain">
-                              <pf-tooltip position="top" content=${msg("Edit")}>
-                                  <i class="fas fa-edit" aria-hidden="true"></i>
-                              </pf-tooltip>
-                          </button>
-                      </ak-forms-modal>`
-                    : html` <button class="pf-c-button pf-m-plain" disabled>
+                    ? IconEditButton(TokenForm, item.identifier, item.identifier)
+                    : html`<button class="pf-c-button pf-m-plain" disabled type="button">
                           <pf-tooltip
                               position="top"
                               content=${msg("Editing is disabled for managed tokens")}
@@ -118,20 +106,12 @@ export class TokenListPage extends TablePage<Token> {
                               <i class="fas fa-edit" aria-hidden="true"></i>
                           </pf-tooltip>
                       </button>`}
-                <ak-rbac-object-permission-modal
-                    model=${ModelEnum.AuthentikCoreToken}
-                    objectPk=${item.pk}
-                >
-                </ak-rbac-object-permission-modal>
-                <ak-token-copy-button
-                    class="pf-c-button pf-m-plain"
-                    identifier="${item.identifier}"
-                >
-                    <pf-tooltip position="top" content=${msg("Copy token")}>
-                        <i class="fas fa-copy" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </ak-token-copy-button>
-            `,
+                ${IconPermissionButton(item.identifier, {
+                    model: ModelEnum.AuthentikCoreToken,
+                    objectPk: item.pk,
+                })}
+                ${IconTokenCopyButton(item.identifier)}
+            </div>`,
         ];
     }
 }
diff --git a/web/src/admin/users/ServiceAccountForm.ts b/web/src/admin/users/ServiceAccountForm.ts
index 450e61d7c4a6..8e04fa902a16 100644
--- a/web/src/admin/users/ServiceAccountForm.ts
+++ b/web/src/admin/users/ServiceAccountForm.ts
@@ -31,8 +31,8 @@ const EXPIRATION_DURATION = 1000 * 60 ** 2 * 24 * 360; // 360 days
 
 @customElement("ak-user-service-account-form")
 export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
-    public override entitySingular = msg("Service Account");
-    public override entityPlural = msg("Service Accounts");
+    public static override verboseName = msg("Service Account");
+    public static override verboseNamePlural = msg("Service Accounts");
     public override cancelButtonLabel = msg("Close");
 
     @state()
@@ -63,7 +63,9 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
             userServiceAccountRequest: data,
         });
         this.result = result;
-        (this.parentElement as ModalForm).showSubmitButton = false;
+        if (this.parentElement instanceof ModalForm) {
+            this.parentElement.showSubmitButton = false;
+        }
         if (this.targetGroup) {
             await new CoreApi(DEFAULT_CONFIG).coreGroupsAddUserCreate({
                 groupUuid: this.targetGroup.pk,
@@ -88,7 +90,9 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
         this.result = null;
 
         this.expiresAt = new Date(Date.now() + EXPIRATION_DURATION);
-        (this.parentElement as ModalForm).showSubmitButton = true;
+        if (this.parentElement instanceof ModalForm) {
+            this.parentElement.showSubmitButton = true;
+        }
     }
 
     //#region Event Listeners
@@ -109,7 +113,7 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
         return html`<ak-text-input
                 name="name"
                 label=${msg("Username")}
-                placeholder=${msg("Type a username for the user...")}
+                placeholder=${msg("Type a username for the service account...")}
                 value=""
                 input-hint="code"
                 required
diff --git a/web/src/admin/users/UserForm.ts b/web/src/admin/users/UserForm.ts
index 2b1943763817..5b696c9dfaea 100644
--- a/web/src/admin/users/UserForm.ts
+++ b/web/src/admin/users/UserForm.ts
@@ -10,13 +10,15 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 
 import { ModelForm } from "#elements/forms/ModelForm";
 import { RadioOption } from "#elements/forms/Radio";
+import { SlottedTemplateResult } from "#elements/types";
 
 import { CoreApi, Group, RbacApi, Role, User, UserTypeEnum } from "@goauthentik/api";
 
+import { match } from "ts-pattern";
 import YAML from "yaml";
 
 import { msg, str } from "@lit/localize";
-import { css, CSSResult, html, TemplateResult } from "lit";
+import { css, CSSResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -44,8 +46,11 @@ const UserTypeOptions: readonly RadioOption<UserTypeEnum>[] = [
 ];
 @customElement("ak-user-form")
 export class UserForm extends ModelForm<User, number> {
-    public override entitySingular = msg("User");
-    public override entityPlural = msg("Users");
+    #coreAPI = new CoreApi(DEFAULT_CONFIG);
+    #rbacAPI = new RbacApi(DEFAULT_CONFIG);
+
+    public static override verboseName = msg("User");
+    public static override verboseNamePlural = msg("Users");
 
     @property({ attribute: false })
     public targetGroup: Group | null = null;
@@ -53,8 +58,11 @@ export class UserForm extends ModelForm<User, number> {
     @property({ attribute: false })
     public targetRole: Role | null = null;
 
-    @property()
-    defaultPath: string = "users";
+    @property({ type: String, attribute: "default-path" })
+    public defaultPath: string = "users";
+
+    @property({ attribute: false })
+    public userType: UserTypeEnum | null = null;
 
     static get defaultUserAttributes(): { [key: string]: unknown } {
         return {};
@@ -72,12 +80,37 @@ export class UserForm extends ModelForm<User, number> {
         `,
     ];
 
-    loadInstance(pk: number): Promise<User> {
-        return new CoreApi(DEFAULT_CONFIG).coreUsersRetrieve({
+    protected override loadInstance(pk: number): Promise<User> {
+        return this.#coreAPI.coreUsersRetrieve({
             id: pk,
         });
     }
 
+    protected override assignInstance(instance: User): void {
+        super.assignInstance(instance);
+
+        const { verboseName, verboseNamePlural } = match(instance.type)
+            .with(UserTypeEnum.Internal, () => ({
+                verboseName: msg("Internal User"),
+                verboseNamePlural: msg("Internal Users"),
+            }))
+            .with(UserTypeEnum.External, () => ({
+                verboseName: msg("External User"),
+                verboseNamePlural: msg("External Users"),
+            }))
+            .with(UserTypeEnum.ServiceAccount, () => ({
+                verboseName: msg("Service Account"),
+                verboseNamePlural: msg("Service Accounts"),
+            }))
+            .otherwise(() => ({
+                verboseName: msg("User"),
+                verboseNamePlural: msg("Users"),
+            }));
+
+        this.verboseName = verboseName;
+        this.verboseNamePlural = verboseNamePlural;
+    }
+
     getSuccessMessage(): string {
         if (this.instance) {
             return msg("User updated.");
@@ -88,6 +121,7 @@ export class UserForm extends ModelForm<User, number> {
         if (this.targetRole) {
             return msg(str`User created and added to role ${this.targetRole.name}`);
         }
+
         return msg("User created.");
     }
 
@@ -95,43 +129,58 @@ export class UserForm extends ModelForm<User, number> {
         if (data.attributes === null) {
             data.attributes = UserForm.defaultUserAttributes;
         }
+
+        if (this.userType) {
+            data.type = this.userType;
+        }
+
         let user;
+
         if (this.instance?.pk) {
-            user = await new CoreApi(DEFAULT_CONFIG).coreUsersPartialUpdate({
+            user = await this.#coreAPI.coreUsersPartialUpdate({
                 id: this.instance.pk,
                 patchedUserRequest: data,
             });
         } else {
             data.groups = [];
             data.roles = [];
-            user = await new CoreApi(DEFAULT_CONFIG).coreUsersCreate({
+
+            user = await this.#coreAPI.coreUsersCreate({
                 userRequest: data,
             });
         }
+
         if (this.targetGroup) {
-            await new CoreApi(DEFAULT_CONFIG).coreGroupsAddUserCreate({
+            await this.#coreAPI.coreGroupsAddUserCreate({
                 groupUuid: this.targetGroup.pk,
                 userAccountRequest: {
                     pk: user.pk,
                 },
             });
         }
+
         if (this.targetRole) {
-            await new RbacApi(DEFAULT_CONFIG).rbacRolesAddUserCreate({
+            await this.#rbacAPI.rbacRolesAddUserCreate({
                 uuid: this.targetRole.pk,
                 userAccountSerializerForRoleRequest: {
                     pk: user.pk,
                 },
             });
         }
+
         return user;
     }
 
-    protected override renderForm(): TemplateResult {
-        return html` <ak-text-input
+    protected override renderForm(): SlottedTemplateResult {
+        const placeholder =
+            this.userType === UserTypeEnum.Internal
+                ? msg("Type a username for the internal user...")
+                : msg("Type a username for the external user...");
+
+        return html`<ak-text-input
                 name="username"
                 label=${msg("Username")}
-                placeholder=${msg("Type a username for the user...")}
+                placeholder=${placeholder}
                 autocomplete="off"
                 value="${ifDefined(this.instance?.username)}"
                 input-hint="code"
@@ -152,28 +201,29 @@ export class UserForm extends ModelForm<User, number> {
                 help=${msg("The user's display name.")}
             ></ak-text-input>
 
-            <ak-radio-input
-                label=${msg("User type")}
-                required
-                name="type"
-                .value=${this.instance?.type}
-                .options=${[
-                    ...UserTypeOptions,
-                    ...(this.instance
-                        ? [
-                              {
-                                  label: msg("Internal Service account"),
-                                  value: UserTypeEnum.InternalServiceAccount,
-                                  disabled: true,
-                                  description: html`${msg(
-                                      "Managed by authentik and cannot be assigned manually.",
-                                  )}`,
-                              },
-                          ]
-                        : []),
-                ] satisfies RadioOption<UserTypeEnum>[]}
-            >
-            </ak-radio-input>
+            ${this.userType
+                ? null
+                : html`<ak-radio-input
+                      label=${msg("User type")}
+                      required
+                      name="type"
+                      .value=${this.instance?.type}
+                      .options=${[
+                          ...UserTypeOptions,
+                          ...(this.instance
+                              ? [
+                                    {
+                                        label: msg("Internal Service account"),
+                                        value: UserTypeEnum.InternalServiceAccount,
+                                        disabled: true,
+                                        description: html`${msg(
+                                            "Managed by authentik and cannot be assigned manually.",
+                                        )}`,
+                                    },
+                                ]
+                              : []),
+                      ] satisfies RadioOption<UserTypeEnum>[]}
+                  ></ak-radio-input>`}
             <ak-text-input
                 name="email"
                 label=${msg("Email Address")}
diff --git a/web/src/admin/users/UserImpersonateForm.ts b/web/src/admin/users/UserImpersonateForm.ts
index 2f03848938ed..f37da0476918 100644
--- a/web/src/admin/users/UserImpersonateForm.ts
+++ b/web/src/admin/users/UserImpersonateForm.ts
@@ -3,8 +3,8 @@ import "#components/ak-text-input";
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { APIMessage, MessageLevel } from "#common/messages";
 
+import { asInstanceInvoker } from "#elements/dialogs";
 import { Form } from "#elements/forms/Form";
-import { asEditModalInvoker } from "#elements/modals/utils";
 
 import { AdminApi, CoreApi, ImpersonationRequest } from "@goauthentik/api";
 
@@ -14,7 +14,7 @@ import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("ak-user-impersonate-form")
 export class UserImpersonateForm extends Form<ImpersonationRequest> {
-    public static asEditModalInvoker = asEditModalInvoker;
+    public static asInstanceInvoker = asInstanceInvoker;
     public override submitLabel = msg("Impersonate");
     public override headline = msg("Impersonate User");
 
diff --git a/web/src/admin/users/UserListPage.ts b/web/src/admin/users/UserListPage.ts
index a79774f24ecb..e6da7b238db5 100644
--- a/web/src/admin/users/UserListPage.ts
+++ b/web/src/admin/users/UserListPage.ts
@@ -1,6 +1,6 @@
 import "#admin/reports/ExportButton";
-import "#admin/users/ServiceAccountForm";
 import "#admin/users/UserActiveForm";
+import "#admin/users/ak-user-wizard";
 import "#admin/users/UserBulkRevokeSessionsForm";
 import "#admin/users/UserForm";
 import "#admin/users/UserImpersonateForm";
@@ -19,15 +19,16 @@ import { userTypeToLabel } from "#common/labels";
 import { DefaultUIConfig } from "#common/ui/config";
 import { formatUserDisplayName } from "#common/users";
 
+import { IconEditButton, modalInvoker } from "#elements/dialogs";
 import { WithBrandConfig } from "#elements/mixins/branding";
 import { CapabilitiesEnum, WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 import { WithSession } from "#elements/mixins/session";
-import { modalInvoker } from "#elements/modals/utils";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 
-import { ServiceAccountForm } from "#admin/users/ServiceAccountForm";
+import { AKUserWizard } from "#admin/users/ak-user-wizard";
+import { RecoveryButtons } from "#admin/users/recovery";
 import { UserForm } from "#admin/users/UserForm";
 import { UserImpersonateForm } from "#admin/users/UserImpersonateForm";
 
@@ -35,73 +36,14 @@ import { CoreApi, CoreUsersExportCreateRequest, User, UserPath } from "@goauthen
 
 import { msg, str } from "@lit/localize";
 import { css, CSSResult, html, nothing, TemplateResult } from "lit";
+import { guard } from "lit-html/directives/guard.js";
 import { customElement, property, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
-export const renderRecoveryButtons = ({
-    user,
-    brandHasRecoveryFlow,
-    buttonClasses,
-}: {
-    user: User;
-    brandHasRecoveryFlow: boolean;
-    buttonClasses?: string;
-}) => {
-    return html`<button
-            class="pf-c-button pf-m-secondary ${buttonClasses || ""}"
-            type="button"
-            ${modalInvoker(() => {
-                return html`<ak-user-password-form
-                    headline=${msg(str`Update ${user.name || user.username}'s password`)}
-                    username=${user.username}
-                    email=${ifDefined(user.email)}
-                    .instancePk=${user.pk}
-                ></ak-user-password-form>`;
-            })}
-        >
-            ${msg("Set password")}
-        </button>
-        ${brandHasRecoveryFlow
-            ? html`
-                  <ak-forms-modal id="ak-link-recovery-request">
-                      <span slot="submit"> ${msg("Create link")} </span>
-                      <span slot="header"> ${msg("Create recovery link")} </span>
-                      <ak-user-recovery-link-form slot="form" .user=${user}>
-                      </ak-user-recovery-link-form>
-                      <button
-                          slot="trigger"
-                          class="pf-c-button pf-m-secondary ${buttonClasses || ""}"
-                      >
-                          ${msg("Create recovery link")}
-                      </button>
-                  </ak-forms-modal>
-                  ${user.email
-                      ? html`<ak-forms-modal id="ak-email-recovery-request">
-                            <span slot="submit">${msg("Send link")}</span>
-                            <span slot="header">${msg("Send recovery link to user")}</span>
-                            <ak-user-reset-email-form slot="form" .user=${user}>
-                            </ak-user-reset-email-form>
-                            <button
-                                slot="trigger"
-                                class="pf-c-button pf-m-secondary ${buttonClasses || ""}"
-                            >
-                                ${msg("Email recovery link")}
-                            </button>
-                        </ak-forms-modal>`
-                      : html`<p>
-                            ${msg("To email a recovery link, set an email address for this user.")}
-                        </p>`}
-              `
-            : html` <p>
-                  ${msg("To create a recovery link, set a recovery flow for the current brand.")}
-              </p>`}`;
-};
-
 const recoveryButtonStyles = css`
     #recovery-request-buttons {
         display: flex;
@@ -131,6 +73,8 @@ export class UserListPage extends WithBrandConfig(
         `,
     ];
 
+    #api = new CoreApi(DEFAULT_CONFIG);
+
     public override expandable = true;
     public override checkbox = true;
     public override clearOnRefresh = true;
@@ -144,11 +88,11 @@ export class UserListPage extends WithBrandConfig(
     public pageDescription = "";
     public pageIcon = "pf-icon pf-icon-user";
 
-    @property()
-    order = "last_login";
+    @property({ type: String })
+    public order = "last_login";
 
-    @property()
-    activePath;
+    @property({ type: String })
+    public activePath: string;
 
     @state()
     hideDeactivated = getURLParam<boolean>("hideDeactivated", false);
@@ -158,8 +102,11 @@ export class UserListPage extends WithBrandConfig(
 
     constructor() {
         super();
+
         const defaultPath = DefaultUIConfig.defaults.userPath;
+
         this.activePath = getURLParam<string>("path", defaultPath);
+
         if (this.uiConfig.defaults.userPath !== defaultPath) {
             this.activePath = this.uiConfig.defaults.userPath;
         }
@@ -174,15 +121,17 @@ export class UserListPage extends WithBrandConfig(
     }
 
     async apiEndpoint(): Promise<PaginatedResponse<User>> {
-        const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList({
+        const users = await this.#api.coreUsersList({
             ...(await this.defaultEndpointConfig()),
             pathStartswith: this.activePath,
             isActive: this.hideDeactivated ? true : undefined,
             includeGroups: false,
         });
-        this.userPaths = await new CoreApi(DEFAULT_CONFIG).coreUsersPathsRetrieve({
+
+        this.userPaths = await this.#api.coreUsersPathsRetrieve({
             search: this.search,
         });
+
         return users;
     }
 
@@ -226,12 +175,12 @@ export class UserListPage extends WithBrandConfig(
                     ];
                 }}
                 .usedBy=${(item: User) => {
-                    return new CoreApi(DEFAULT_CONFIG).coreUsersUsedByList({
+                    return this.#api.coreUsersUsedByList({
                         id: item.pk,
                     });
                 }}
                 .delete=${(item: User) => {
-                    return new CoreApi(DEFAULT_CONFIG).coreUsersDestroy({
+                    return this.#api.coreUsersDestroy({
                         id: item.pk,
                     });
                 }}
@@ -309,20 +258,12 @@ export class UserListPage extends WithBrandConfig(
             html`<ak-status-label ?good=${item.isActive}></ak-status-label>`,
             Timestamp(item.lastLogin),
             html`${userTypeToLabel(item.type)}`,
-            html`<div>
-                <button
-                    class="pf-c-button pf-m-plain"
-                    ${UserForm.asEditModalInvoker(item.pk)}
-                    aria-label=${msg(str`Edit ${displayName}`)}
-                >
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
+            html`<div class="ak-c-table__actions">
+                ${IconEditButton(UserForm, item.pk, displayName)}
                 ${showImpersonation
                     ? html`<button
                           class="pf-c-button pf-m-tertiary"
-                          ${UserImpersonateForm.asEditModalInvoker(item.pk)}
+                          ${UserImpersonateForm.asInstanceInvoker(item.pk)}
                           aria-label=${msg(str`Impersonate ${displayName}`)}
                       >
                           <pf-tooltip
@@ -362,7 +303,7 @@ export class UserListPage extends WithBrandConfig(
                             object-label=${msg("User")}
                             .obj=${item}
                             .delete=${() => {
-                                return new CoreApi(DEFAULT_CONFIG).coreUsersPartialUpdate({
+                                return this.#api.coreUsersPartialUpdate({
                                     id: item.pk,
                                     patchedUserRequest: {
                                         isActive: !item.isActive,
@@ -383,7 +324,7 @@ export class UserListPage extends WithBrandConfig(
                 </dt>
                 <dd class="pf-c-description-list__description">
                     <div class="pf-c-description-list__text" id="recovery-request-buttons">
-                        ${renderRecoveryButtons({
+                        ${RecoveryButtons({
                             user: item,
                             brandHasRecoveryFlow: Boolean(this.brand.flowRecovery),
                         })}
@@ -393,40 +334,43 @@ export class UserListPage extends WithBrandConfig(
         </dl>`;
     }
 
-    protected openNewUserModal = () => {
-        const form = new UserForm();
-
-        form.defaultPath = this.activePath;
+    protected buildExportParams = async () => {
+        return {
+            ...(await this.defaultEndpointConfig()),
+            pathStartswith: this.activePath,
+            isActive: this.hideDeactivated ? true : undefined,
+        };
+    };
 
-        form.showModal();
+    protected createExport = (params: CoreUsersExportCreateRequest) => {
+        return this.#api.coreUsersExportCreate(params);
     };
 
-    renderObjectCreate(): TemplateResult {
-        return html`
-            <button class="pf-c-button pf-m-primary" @click=${this.openNewUserModal}>
-                ${msg("New User")}
-            </button>
-            <button
-                class="pf-c-button pf-m-secondary"
-                ${ServiceAccountForm.asModalInvoker({
-                    closedBy: "none",
-                })}
-            >
-                ${msg("New Service Account")}
-            </button>
-            <ak-reports-export-button
-                .createExport=${(params: CoreUsersExportCreateRequest) => {
-                    return new CoreApi(DEFAULT_CONFIG).coreUsersExportCreate(params);
-                }}
-                .exportParams=${async () => {
-                    return {
-                        ...(await this.defaultEndpointConfig()),
-                        pathStartswith: this.activePath,
-                        isActive: this.hideDeactivated ? true : undefined,
-                    };
-                }}
-            ></ak-reports-export-button>
-        `;
+    protected renderObjectCreate(): SlottedTemplateResult {
+        const defaultPath = this.uiConfig.defaults.userPath;
+
+        return guard([defaultPath], () => {
+            return [
+                html`
+                    <button
+                        class="pf-c-button pf-m-primary"
+                        type="button"
+                        ${modalInvoker(AKUserWizard, {
+                            defaultPath,
+                        })}
+                        aria-description=${msg("Open the new user wizard")}
+                    >
+                        ${msg("New User")}
+                    </button>
+                `,
+                html`
+                    <ak-reports-export-button
+                        .createExport=${this.createExport}
+                        .exportParams=${this.buildExportParams}
+                    ></ak-reports-export-button>
+                `,
+            ];
+        });
     }
 
     protected renderSidebarBefore(): TemplateResult {
diff --git a/web/src/admin/users/UserRecoveryLinkForm.ts b/web/src/admin/users/UserRecoveryLinkForm.ts
index 530520b772df..4bf555cce146 100644
--- a/web/src/admin/users/UserRecoveryLinkForm.ts
+++ b/web/src/admin/users/UserRecoveryLinkForm.ts
@@ -13,11 +13,16 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-user-recovery-link-form")
 export class UserRecoveryLinkForm extends Form<UserRecoveryLinkRequest> {
+    #api = new CoreApi(DEFAULT_CONFIG);
+
     @property({ attribute: false })
-    user!: User;
+    public user!: User;
+
+    public override submitLabel = msg("Create link");
+    public override headline = msg("Create recovery link");
 
-    async send(data: UserRecoveryLinkRequest): Promise<Link> {
-        const response = await new CoreApi(DEFAULT_CONFIG).coreUsersRecoveryCreate({
+    protected async send(data: UserRecoveryLinkRequest): Promise<Link> {
+        const response = await this.#api.coreUsersRecoveryCreate({
             id: this.user.pk,
             userRecoveryLinkRequest: data,
         });
@@ -27,7 +32,7 @@ export class UserRecoveryLinkForm extends Form<UserRecoveryLinkRequest> {
         return response;
     }
 
-    renderForm(): TemplateResult {
+    protected renderForm(): TemplateResult {
         return html`
             <ak-text-input
                 name="tokenDuration"
@@ -36,8 +41,7 @@ export class UserRecoveryLinkForm extends Form<UserRecoveryLinkRequest> {
                 .bighelp=${html`<p class="pf-c-form__helper-text">
                     ${msg("If a recovery token already exists, its duration is updated.")}
                 </p>`}
-            >
-            </ak-text-input>
+            ></ak-text-input>
         `;
     }
 }
diff --git a/web/src/admin/users/UserResetEmailForm.ts b/web/src/admin/users/UserResetEmailForm.ts
index 20bbcc0534f4..b4d5ccfe5326 100644
--- a/web/src/admin/users/UserResetEmailForm.ts
+++ b/web/src/admin/users/UserResetEmailForm.ts
@@ -22,10 +22,13 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-user-reset-email-form")
 export class UserResetEmailForm extends Form<UserRecoveryEmailRequest> {
+    public override submitLabel = msg("Send link");
+    public override headline = msg("Send recovery link to user");
+
     @property({ attribute: false })
-    user!: User;
+    public user!: User;
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return msg("Successfully queued email.");
     }
 
@@ -43,6 +46,7 @@ export class UserResetEmailForm extends Form<UserRecoveryEmailRequest> {
                 name="emailStage"
             >
                 <ak-search-select
+                    placeholder=${msg("Select email stage...")}
                     .fetchObjects=${async (query?: string): Promise<Stage[]> => {
                         const args: StagesAllListRequest = {
                             ordering: "name",
diff --git a/web/src/admin/users/UserViewPage.ts b/web/src/admin/users/UserViewPage.ts
index 9a32a533e17c..ead0b48935a0 100644
--- a/web/src/admin/users/UserViewPage.ts
+++ b/web/src/admin/users/UserViewPage.ts
@@ -40,9 +40,9 @@ import { Timestamp } from "#elements/table/shared";
 import { setPageDetails } from "#components/ak-page-navbar";
 import { type DescriptionPair, renderDescriptionList } from "#components/DescriptionList";
 
+import { RecoveryButtons } from "#admin/users/recovery";
 import { UserForm } from "#admin/users/UserForm";
 import { UserImpersonateForm } from "#admin/users/UserImpersonateForm";
-import { renderRecoveryButtons } from "#admin/users/UserListPage";
 
 import { CapabilitiesEnum, CoreApi, ModelEnum, User } from "@goauthentik/api";
 
@@ -100,12 +100,6 @@ export class UserViewPage extends WithBrandConfig(WithCapabilitiesConfig(WithSes
             #reset-password-button {
                 margin-right: 0;
             }
-
-            #update-password-request .pf-c-button,
-            #ak-email-recovery-request .pf-c-button,
-            #ak-link-recovery-request .pf-c-button {
-                width: 100%;
-            }
         `,
     ];
 
@@ -147,7 +141,7 @@ export class UserViewPage extends WithBrandConfig(WithCapabilitiesConfig(WithSes
         return html`<div class="ak-button-collection">
             <button
                 class="pf-m-primary pf-c-button pf-m-block"
-                ${UserForm.asEditModalInvoker(user.pk)}
+                ${UserForm.asInstanceInvoker(user.pk)}
             >
                 ${msg("Edit User")}
             </button>
@@ -177,7 +171,7 @@ export class UserViewPage extends WithBrandConfig(WithCapabilitiesConfig(WithSes
             ${showImpersonate
                 ? html`<button
                       class="pf-c-button pf-m-tertiary pf-m-block"
-                      ${UserImpersonateForm.asEditModalInvoker(user.pk)}
+                      ${UserImpersonateForm.asInstanceInvoker(user.pk)}
                       aria-label=${msg(str`Impersonate ${displayName}`)}
                   >
                       <pf-tooltip
@@ -193,9 +187,9 @@ export class UserViewPage extends WithBrandConfig(WithCapabilitiesConfig(WithSes
 
     renderRecoveryButtons(user: User) {
         return html`<div class="ak-button-collection">
-            ${renderRecoveryButtons({
+            ${RecoveryButtons({
                 user,
-                brandHasRecoveryFlow: Boolean(this.brand.flowRecovery),
+                brandHasRecoveryFlow: !!this.brand.flowRecovery,
                 buttonClasses: "pf-m-block",
             })}
         </div>`;
diff --git a/web/src/common/api/middleware.ts b/web/src/common/api/middleware.ts
index feb7061d1b87..fb8690999477 100644
--- a/web/src/common/api/middleware.ts
+++ b/web/src/common/api/middleware.ts
@@ -106,19 +106,26 @@ export class DevRepeatedRequestsMiddleware implements Middleware, Disposable {
     #requests: string[] = [];
     #counts = new Map<string, number>();
     #warnings = new Set<string>();
-    #logger = ConsoleLogger.prefix("repeated-requests-middleware");
 
-    clear = () => {
-        this.#logger.debug("Clearing count");
+    public clear = () => {
         this.#requests = [];
         this.#counts.clear();
         this.#warnings.clear();
     };
 
+    #timeoutId = -1;
+
+    public clearAfterIdle = () => {
+        clearTimeout(this.#timeoutId);
+        this.#timeoutId = window.setTimeout(this.clear, 1000);
+    };
+
     constructor(protected readonly maxRequests: number = 10) {
-        window.addEventListener("hashchange", this.clear);
-        window.addEventListener(AKRefreshEvent.eventName, this.clear);
-        window.addEventListener(AKEnterpriseRefreshEvent.eventName, this.clear);
+        window.addEventListener("hashchange", this.clear, { passive: true });
+        window.addEventListener(AKRefreshEvent.eventName, this.clear, { passive: true });
+        window.addEventListener(AKEnterpriseRefreshEvent.eventName, this.clear, { passive: true });
+
+        window.addEventListener("click", this.clearAfterIdle, { passive: true });
     }
 
     public [Symbol.dispose]() {
@@ -141,17 +148,17 @@ export class DevRepeatedRequestsMiddleware implements Middleware, Disposable {
 
             const formattedURL = URL.canParse(reqSig) ? new URL(reqSig).pathname : reqSig;
 
-            showMessage(
-                {
-                    level: MessageLevel.warning,
-                    message: "[Dev] Consecutive requests detected",
-                    description: html`${count} identical requests to
-                        <pre style="text-wrap: auto">${formattedURL}</pre>`,
-                },
-                true,
-            );
-
-            this.#logger.trace("Repeated request", reqSig);
+            requestAnimationFrame(() => {
+                showMessage(
+                    {
+                        level: MessageLevel.warning,
+                        message: "[Dev] Consecutive requests detected",
+                        description: html`${count} identical requests to
+                            <pre style="text-wrap: auto">${formattedURL}</pre>`,
+                    },
+                    true,
+                );
+            });
         }
 
         if (this.#requests.length > this.maxRequests) {
diff --git a/web/src/common/clipboard.ts b/web/src/common/clipboard.ts
index be4782f74db4..6fb02eb6aacf 100644
--- a/web/src/common/clipboard.ts
+++ b/web/src/common/clipboard.ts
@@ -1,23 +1,38 @@
-import { APIMessage, MessageLevel } from "#common/messages";
+import { MessageLevel } from "#common/messages";
+import { isPromiseLike } from "#common/promises";
 
 import { showMessage } from "#elements/messages/MessageContainer";
 
 import { msg, str } from "@lit/localize";
 
-function castToClipboardItem(input: string, mimeType = "text/plain"): ClipboardItem {
+export type ClipboardItemSource = string | ClipboardItemData | ClipboardItem;
+
+/**
+ * Helper function to convert a string into a ClipboardItem for writing to the clipboard.
+ *
+ * @remarks
+ * This requires either a secure context (HTTPS) or localhost.
+ */
+function castToClipboardItem(source: ClipboardItemSource, mimeType = "text/plain"): ClipboardItem {
+    if (source instanceof ClipboardItem) {
+        return source;
+    }
+
+    const data = typeof source === "string" ? new Blob([source], { type: mimeType }) : source;
+
     return new ClipboardItem({
-        [mimeType]: new Blob([input], {
-            type: mimeType,
-        }),
+        [mimeType]: data,
     });
 }
 
-export async function doWriteToClipboard(...data: string[] | ClipboardItem[]): Promise<void> {
-    if (data.every((item) => typeof item === "string")) {
-        return navigator.clipboard.write(data.map((item) => castToClipboardItem(item)));
-    }
-
-    return navigator.clipboard.write(data);
+/**
+ * Writes data to the clipboard using the Clipboard API.
+ *
+ * @remarks
+ * This requires either a secure context (HTTPS) or localhost.
+ */
+export async function doWriteToClipboard(...data: ClipboardItemSource[]): Promise<void> {
+    return navigator.clipboard.write(data.map((item) => castToClipboardItem(item)));
 }
 
 /**
@@ -30,7 +45,7 @@ export async function doWriteToClipboard(...data: string[] | ClipboardItem[]): P
  * @return A promise resolving to `true` on success, `false` on failure.
  */
 export function writeToClipboard(
-    data: string | ClipboardItem | string[] | ClipboardItem[] | null | undefined,
+    data?: ClipboardItemSource | ClipboardItemSource[] | null,
     entityLabel?: string,
     description?: string,
 ): Promise<boolean> {
@@ -39,14 +54,40 @@ export function writeToClipboard(
 
         return Promise.resolve(false);
     }
+    const messageKey = `clipboard-success-${entityLabel ?? "generic"}`;
 
-    const normalized = typeof data === "string" ? castToClipboardItem(data) : data;
+    // Wrap with promise to simplify fallback behavior.
+    const clipboardItemsPromise = new Promise<ClipboardItemSource[]>((resolve) => {
+        const hasAsyncData = Array.isArray(data) ? data.some(isPromiseLike) : isPromiseLike(data);
 
-    return doWriteToClipboard(...(Array.isArray(normalized) ? normalized : [normalized]))
-        .then(() => {
-            const message: APIMessage = {
+        if (hasAsyncData) {
+            showMessage({
                 level: MessageLevel.info,
                 icon: "fas fa-clipboard-check",
+                message: entityLabel
+                    ? msg(str`Copying ${entityLabel}...`, {
+                          id: "clipboard.progress.message.entity",
+                      })
+                    : msg("Copying to clipboard...", {
+                          id: "clipboard.progress.generic",
+                      }),
+                description,
+                key: messageKey,
+            });
+        }
+
+        const normalized = typeof data === "string" ? castToClipboardItem(data) : data;
+        const items = Array.isArray(normalized) ? normalized : [normalized];
+
+        resolve(items);
+    });
+
+    return clipboardItemsPromise
+        .then((items) => doWriteToClipboard(...items))
+        .then(() => {
+            showMessage({
+                level: MessageLevel.success,
+                icon: "fas fa-clipboard-check",
                 message: entityLabel
                     ? msg(str`${entityLabel} copied to clipboard.`, {
                           id: "clipboard.write.success.message.entity",
@@ -55,9 +96,8 @@ export function writeToClipboard(
                           id: "clipboard.write.success.generic",
                       }),
                 description,
-            };
-
-            showMessage(message, true);
+                key: messageKey,
+            });
 
             return true;
         })
diff --git a/web/src/common/collections.ts b/web/src/common/collections.ts
index 1f5971a359e7..e3451f99e950 100644
--- a/web/src/common/collections.ts
+++ b/web/src/common/collections.ts
@@ -11,3 +11,47 @@ export function torusIndex(lengthLike: number | ArrayLike<number>, delta: number
 
     return ((delta % length) + length) % length;
 }
+
+/**
+ * Shallow-compare new deps against the previously stored deps.
+ *
+ * Returns `true` if deps match (i.e. we should skip rebinding).
+ * Returns `false` if deps are absent, previously unset, or any value differs.
+ */
+export function checkIterableShallowEquality(
+    newDeps?: unknown[] | null,
+    prevDeps?: unknown[] | null,
+): boolean {
+    if (!newDeps || !prevDeps) return false;
+    if (prevDeps.length !== newDeps.length) return false;
+    return prevDeps.every((prev, i) => prev === newDeps[i]);
+}
+
+/**
+ * Shallow-compare new deps against the previously stored deps.
+ *
+ * Returns `true` if deps match (i.e. we should skip rebinding).
+ * Returns `false` if deps are absent, previously unset, or any value differs.
+ */
+export function checkObjectShallowEquality(
+    newDeps?: object | null,
+    prevDeps?: object | null,
+): boolean {
+    if (!newDeps || !prevDeps) {
+        return newDeps === prevDeps;
+    }
+    const newKeys = Object.keys(newDeps);
+    const prevKeys = Object.keys(prevDeps);
+
+    if (newKeys.length !== prevKeys.length) return false;
+
+    for (const key of newKeys) {
+        if (
+            (newDeps as Record<string, unknown>)[key] !== (prevDeps as Record<string, unknown>)[key]
+        ) {
+            return false;
+        }
+    }
+
+    return true;
+}
diff --git a/web/src/common/messages.ts b/web/src/common/messages.ts
index a182859390d3..d9153202b289 100644
--- a/web/src/common/messages.ts
+++ b/web/src/common/messages.ts
@@ -20,6 +20,12 @@ export interface APIMessage {
     message: string;
     description?: string | TemplateResult;
     icon?: string;
+    /**
+     * An optional key to determine uniqueness of the message.
+     *
+     * Defaults to the message text.
+     */
+    key?: PropertyKey;
 }
 
 export class AKMessageEvent extends Event {
diff --git a/web/src/common/promises.ts b/web/src/common/promises.ts
new file mode 100644
index 000000000000..e219f7210c51
--- /dev/null
+++ b/web/src/common/promises.ts
@@ -0,0 +1,13 @@
+/**
+ * @file Promise utilities.
+ */
+
+/**
+ * Type predicate to determine if an object is thenable (i.e., has a `then` method).
+ */
+export function isPromiseLike<T>(obj: unknown): obj is PromiseLike<T> {
+    if (!obj || typeof obj !== "object") {
+        return false;
+    }
+    return typeof (obj as Promise<T>).then === "function";
+}
diff --git a/web/src/components/ak-radio-input.ts b/web/src/components/ak-radio-input.ts
index 0186c4a71939..a00f51bc94dd 100644
--- a/web/src/components/ak-radio-input.ts
+++ b/web/src/components/ak-radio-input.ts
@@ -5,11 +5,13 @@ import { HorizontalLightComponent } from "./HorizontalLightComponent.js";
 import { RadioChangeEventDetail, RadioOption } from "#elements/forms/Radio";
 import { SlottedTemplateResult } from "#elements/types";
 
+import type { Jsonifiable } from "type-fest";
+
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-radio-input")
-export class AkRadioInput<T> extends HorizontalLightComponent<T> {
+export class AkRadioInput<T extends Jsonifiable> extends HorizontalLightComponent<T> {
     public override role = "radiogroup";
 
     @property({ type: Object })
@@ -42,7 +44,7 @@ export class AkRadioInput<T> extends HorizontalLightComponent<T> {
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-radio-input": AkRadioInput<unknown>;
+        "ak-radio-input": AkRadioInput<Jsonifiable>;
     }
 }
 
diff --git a/web/src/components/ak-slug-input.ts b/web/src/components/ak-slug-input.ts
index f39434a67387..db92f5b79144 100644
--- a/web/src/components/ak-slug-input.ts
+++ b/web/src/components/ak-slug-input.ts
@@ -132,8 +132,10 @@ export class AkSlugInput extends HorizontalLightComponent<string> {
             id=${ifDefined(this.fieldID)}
             @input=${(ev: Event) => this.handleTouch(ev)}
             type="text"
+            spellcheck="false"
+            autocomplete="off"
             value=${ifDefined(this.value)}
-            class="pf-c-form-control"
+            class="pf-c-form-control pf-m-monospace"
             ?required=${this.required}
             placeholder=${ifPresent(this.placeholder)}
         />`;
diff --git a/web/src/components/ak-text-input.ts b/web/src/components/ak-text-input.ts
index f46629433456..0e4b9f825572 100644
--- a/web/src/components/ak-text-input.ts
+++ b/web/src/components/ak-text-input.ts
@@ -43,11 +43,11 @@ export class AkTextInput extends HorizontalLightComponent<string> {
             return this.placeholder;
         }
 
-        if (this.inputMode === "url" || this.type === "url") {
+        if (this.inputMode === "url" || this.type === "url" || this.name === "url") {
             return "https://...";
         }
 
-        if (this.inputMode === "email" || this.type === "email") {
+        if (this.inputMode === "email" || this.type === "email" || this.name === "email") {
             return msg("Type an email address...");
         }
 
@@ -74,6 +74,7 @@ export class AkTextInput extends HorizontalLightComponent<string> {
             placeholder=${ifPresent(this.#formatPlaceholder())}
             inputmode=${this.inputMode}
             ?required=${this.required}
+            ?readonly=${this.readOnly}
             ?autofocus=${this.autofocus}
             ${this.autofocusTarget.toRef()}
         />`;
diff --git a/web/src/elements/LoadingOverlay.css b/web/src/elements/LoadingOverlay.css
index 7ff4694ed7e4..9f2376f4451e 100644
--- a/web/src/elements/LoadingOverlay.css
+++ b/web/src/elements/LoadingOverlay.css
@@ -2,12 +2,12 @@
 ak-loading-overlay.style-scope {
     position: absolute;
     inset: 0;
-    z-index: 1;
+    z-index: var(--ak-c-loading-overlay--ZIndex, var(--pf-global--ZIndex--lg));
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(
-        --ak-loading-overlay--BackgroundColor,
+        --ak-c-loading-overlay--BackgroundColor,
         var(--pf-global--BackgroundColor--dark-transparent-200)
     );
 }
diff --git a/web/src/elements/Spinner.ts b/web/src/elements/Spinner.ts
index 6b45a5de0508..93b7d507b03b 100644
--- a/web/src/elements/Spinner.ts
+++ b/web/src/elements/Spinner.ts
@@ -24,6 +24,7 @@ export class Spinner extends AKElement {
             <span class="pf-c-spinner__clipper"></span>
             <span class="pf-c-spinner__lead-ball"></span>
             <span class="pf-c-spinner__tail-ball"></span>
+            <slot></slot>
         </span>`;
     }
 }
diff --git a/web/src/elements/ak-array-input.ts b/web/src/elements/ak-array-input.ts
index dca260e24f01..da1b95e65258 100644
--- a/web/src/elements/ak-array-input.ts
+++ b/web/src/elements/ak-array-input.ts
@@ -52,6 +52,9 @@ export class ArrayInput<T> extends AKControlElement<T[]> implements IArrayInput<
         `,
     ];
 
+    @property({ type: String })
+    public name: string | null = null;
+
     @property({ type: Boolean })
     validate = false;
 
@@ -94,13 +97,13 @@ export class ArrayInput<T> extends AKControlElement<T[]> implements IArrayInput<
         return this.items;
     }
 
-    get isValid() {
+    get valid() {
         if (!this.validate) {
             return true;
         }
 
         const oneIsValid = (g: HTMLDivElement) =>
-            g.querySelector<HTMLInputElement & AKControlElement<T>>("[name]")?.isValid ?? true;
+            g.querySelector<HTMLInputElement & AKControlElement<T>>("[name]")?.valid ?? true;
         const allAreValid = Array.from(this.inputGroups ?? []).every(oneIsValid);
         return allAreValid && (this.validator ? this.validator(this.items) : true);
     }
diff --git a/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts b/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts
index a32d5d128f8e..151e1c9537e3 100644
--- a/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts
+++ b/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts
@@ -101,7 +101,7 @@ export class CheckboxGroup extends AkElementWithCustomEvents {
     value: string[] = [];
 
     @property({ type: String })
-    name?: string;
+    public name: string | null = null;
 
     @property({ type: Boolean })
     required = false;
@@ -120,7 +120,7 @@ export class CheckboxGroup extends AkElementWithCustomEvents {
     }
 
     private get formValue() {
-        if (this.name === undefined) {
+        if (typeof this.name !== "string") {
             throw new Error("This cannot be called without having the name set.");
         }
         const name = this.name;
diff --git a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
index 67abf79e5576..0dbd8545a150 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
@@ -60,6 +60,9 @@ export class AkDualSelectProvider extends CustomListenerElement(AKControlElement
     @property({ attribute: "selected-label" })
     public selectedLabel = msg("Selected options");
 
+    @property({ type: String })
+    public name: string | null = null;
+
     /**
      * When true, the selected pane preserves insertion order instead of sorting alphabetically.
      *
@@ -92,11 +95,11 @@ export class AkDualSelectProvider extends CustomListenerElement(AKControlElement
     @property({ attribute: "search-delay", type: Number })
     public searchDelay = 250;
 
-    public get value() {
+    public get value(): Array<string | number> {
         return this.dualSelector.value!.selected.map(([k, _]) => k);
     }
 
-    public json() {
+    public toJSON(): Array<string | number> {
         return this.value;
     }
 
diff --git a/web/src/elements/buttons/IconCopyButton.ts b/web/src/elements/buttons/IconCopyButton.ts
new file mode 100644
index 000000000000..6948da3c4d8a
--- /dev/null
+++ b/web/src/elements/buttons/IconCopyButton.ts
@@ -0,0 +1,58 @@
+import "#elements/Spinner";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { ClipboardItemSource, writeToClipboard } from "#common/clipboard";
+import { PFSize } from "#common/enums";
+
+import { SlottedTemplateResult } from "#elements/types";
+
+import { msg } from "@lit/localize";
+import { html } from "lit";
+
+export interface IconCopyButtonProps {
+    source: ClipboardItemSource | null | ((event: Event) => ClipboardItemData | null);
+    buttonLabel?: string;
+    tooltipLabel?: string;
+    entityLabel?: string;
+    description?: string;
+}
+
+export function IconCopyButton({
+    source,
+    buttonLabel = msg("Copy to clipboard"),
+    tooltipLabel = buttonLabel,
+    entityLabel,
+    description,
+}: IconCopyButtonProps): SlottedTemplateResult {
+    const doCopy = (event: PointerEvent) => {
+        if (typeof source !== "function") {
+            return writeToClipboard(source, entityLabel, description);
+        }
+
+        const button = event.currentTarget as HTMLButtonElement;
+
+        const spinner = button.ownerDocument.createElement("ak-spinner");
+        spinner.size = PFSize.Large;
+
+        spinner.classList.add("ak-c-button--icon__progress");
+        spinner.setAttribute("aria-hidden", "true");
+
+        button.prepend(spinner);
+
+        return writeToClipboard(
+            typeof source === "function" ? source(event) : source,
+            entityLabel,
+            description,
+        ).finally(() => spinner.remove());
+    };
+
+    return html`<button
+        class="pf-c-button pf-m-plain"
+        type="button"
+        @click=${doCopy}
+        aria-label=${buttonLabel}
+    >
+        <i class="fas fa-copy" aria-hidden="true"></i>
+        <pf-tooltip position="top" content=${tooltipLabel}> </pf-tooltip>
+    </button>`;
+}
diff --git a/web/src/elements/buttons/IconEnrollmentTokenCopyButton.ts b/web/src/elements/buttons/IconEnrollmentTokenCopyButton.ts
new file mode 100644
index 000000000000..4ec65e4c7add
--- /dev/null
+++ b/web/src/elements/buttons/IconEnrollmentTokenCopyButton.ts
@@ -0,0 +1,33 @@
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { IconCopyButton } from "#elements/buttons/IconCopyButton";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { EndpointsApi } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { guard } from "lit-html/directives/guard.js";
+
+export function IconEnrollmentTokenCopyButton(tokenUuid?: string | null): SlottedTemplateResult {
+    return guard([], () => {
+        const fetchTokenViewKey = (): Promise<Blob> => {
+            if (!tokenUuid) {
+                console.warn("No tokenUuid provided for IconEnrollmentTokenCopyButton");
+                return Promise.resolve(new Blob([""], { type: "text/plain" }));
+            }
+
+            return new EndpointsApi(DEFAULT_CONFIG)
+
+                .endpointsAgentsEnrollmentTokensViewKeyRetrieve({
+                    tokenUuid,
+                })
+                .then((tokenView) => new Blob([tokenView.key], { type: "text/plain" }));
+        };
+
+        return IconCopyButton({
+            source: fetchTokenViewKey,
+            buttonLabel: msg("Copy token"),
+            entityLabel: msg("Token"),
+        });
+    });
+}
diff --git a/web/src/elements/buttons/IconTokenCopyButton.ts b/web/src/elements/buttons/IconTokenCopyButton.ts
new file mode 100644
index 000000000000..698023a25dd9
--- /dev/null
+++ b/web/src/elements/buttons/IconTokenCopyButton.ts
@@ -0,0 +1,30 @@
+import { DEFAULT_CONFIG } from "#common/api/config";
+
+import { IconCopyButton } from "#elements/buttons/IconCopyButton";
+import { SlottedTemplateResult } from "#elements/types";
+
+import { CoreApi } from "@goauthentik/api";
+
+import { msg } from "@lit/localize";
+import { guard } from "lit-html/directives/guard.js";
+
+export function IconTokenCopyButton(identifier?: string | null): SlottedTemplateResult {
+    return guard([], () => {
+        const fetchTokenViewKey = (): Promise<Blob> => {
+            if (!identifier) {
+                console.warn("No identifier provided for IconTokenCopyButton");
+                return Promise.resolve(new Blob([""], { type: "text/plain" }));
+            }
+
+            return new CoreApi(DEFAULT_CONFIG)
+                .coreTokensViewKeyRetrieve({ identifier })
+                .then((tokenView) => new Blob([tokenView.key], { type: "text/plain" }));
+        };
+
+        return IconCopyButton({
+            source: fetchTokenViewKey,
+            buttonLabel: msg("Copy token"),
+            entityLabel: msg("Token"),
+        });
+    });
+}
diff --git a/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.ts b/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.ts
index 971402737006..268aa68f9ff1 100644
--- a/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.ts
+++ b/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.ts
@@ -27,7 +27,7 @@ import { customElement, property } from "lit/decorators.js";
  */
 
 @customElement("ak-token-copy-button")
-export class TokenCopyButton extends BaseTaskButton<null> {
+export class AKTokenCopyButton extends BaseTaskButton<null> {
     /**
      * The identifier key associated with this token.
      * @attr
@@ -39,20 +39,18 @@ export class TokenCopyButton extends BaseTaskButton<null> {
     public entityLabel: string = msg("Token");
 
     public override callAction() {
-        if (!this.identifier) {
+        const { identifier } = this;
+
+        if (!identifier) {
             throw new TypeError("No `identifier` set for `TokenCopyButton`");
         }
 
         // Safari permission hack.
-        const text = new ClipboardItem({
-            "text/plain": new CoreApi(DEFAULT_CONFIG)
-                .coreTokensViewKeyRetrieve({
-                    identifier: this.identifier,
-                })
-                .then((tokenView) => new Blob([tokenView.key], { type: "text/plain" })),
-        });
+        const data = new CoreApi(DEFAULT_CONFIG)
+            .coreTokensViewKeyRetrieve({ identifier })
+            .then((tokenView) => new Blob([tokenView.key], { type: "text/plain" }));
 
-        return writeToClipboard(text, this.entityLabel).then(() => null);
+        return writeToClipboard(data, this.entityLabel).then(() => null);
     }
 
     protected async onError(error: unknown) {
@@ -69,10 +67,10 @@ export class TokenCopyButton extends BaseTaskButton<null> {
     }
 }
 
-export default TokenCopyButton;
+export default AKTokenCopyButton;
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-token-copy-button": TokenCopyButton;
+        "ak-token-copy-button": AKTokenCopyButton;
     }
 }
diff --git a/web/src/elements/buttons/TokenCopyButton/index.ts b/web/src/elements/buttons/TokenCopyButton/index.ts
index 8c130a15e109..35d085f9a379 100644
--- a/web/src/elements/buttons/TokenCopyButton/index.ts
+++ b/web/src/elements/buttons/TokenCopyButton/index.ts
@@ -1,4 +1,4 @@
-import { TokenCopyButton } from "./ak-token-copy-button.js";
+import { AKTokenCopyButton } from "./ak-token-copy-button.js";
 
-export { TokenCopyButton };
-export default TokenCopyButton;
+export { AKTokenCopyButton as TokenCopyButton };
+export default AKTokenCopyButton;
diff --git a/web/src/elements/events/LogViewer.ts b/web/src/elements/events/LogViewer.ts
index 7d5e51742da7..3fc15a8aad5e 100644
--- a/web/src/elements/events/LogViewer.ts
+++ b/web/src/elements/events/LogViewer.ts
@@ -22,7 +22,7 @@ export class LogViewer extends StaticTable<LogEvent> {
 
     static styles: CSSResult[] = [...super.styles, PFDescriptionList];
 
-    renderEmpty(): TemplateResult {
+    protected override renderEmpty(): SlottedTemplateResult {
         return super.renderEmpty(
             html`<ak-empty-state><span>${msg("No log messages.")}</span> </ak-empty-state>`,
         );
diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts
index 5b40e1aa3991..1b9b7435db10 100644
--- a/web/src/elements/forms/Radio.ts
+++ b/web/src/elements/forms/Radio.ts
@@ -1,18 +1,22 @@
-import { AKElement } from "#elements/Base";
+import { FormAssociatedElement } from "#elements/forms/form-associated-element";
 import Styles from "#elements/forms/Radio.css";
 import { SlottedTemplateResult } from "#elements/types";
-import { CustomEmitterElement } from "#elements/utils/eventEmitter";
+import { ifPresent } from "#elements/utils/attributes";
 
 import { IDGenerator } from "@goauthentik/core/id";
 
-import { CSSResult, html, nothing } from "lit";
+import { Jsonifiable } from "type-fest";
+
+import { msg } from "@lit/localize";
+import { CSSResult, html, nothing, PropertyValues } from "lit";
+import { ref } from "lit-html/directives/ref.js";
 import { customElement, property } from "lit/decorators.js";
 import { map } from "lit/directives/map.js";
 
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
 
-export interface RadioOption<T> {
+export interface RadioOption<T extends Jsonifiable | undefined> {
     label: string;
     description?: SlottedTemplateResult;
     className?: string;
@@ -26,8 +30,8 @@ export interface RadioChangeEventDetail<T> {
 }
 
 @customElement("ak-radio")
-export class Radio<T = never> extends CustomEmitterElement(AKElement) {
-    static styles: CSSResult[] = [
+export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<string, T | null> {
+    public static styles: CSSResult[] = [
         // ---
         PFRadio,
         PFForm,
@@ -42,11 +46,48 @@ export class Radio<T = never> extends CustomEmitterElement(AKElement) {
     @property({ attribute: false })
     public options!: RadioOption<T>[] | (() => RadioOption<T>[]);
 
+    #value: T | null = null;
+
     @property()
-    public name = "";
+    public set value(nextValue: T) {
+        if (!nextValue) {
+            return;
+        }
 
-    @property({ attribute: false })
-    public value?: T | unknown;
+        this.#value = nextValue;
+
+        this.#syncValidity();
+    }
+
+    /**
+     * The stringified value of the currently selected radio option.
+     */
+    public get value(): string {
+        return typeof this.#value === "string" ? this.#value : JSON.stringify(this.#value);
+    }
+
+    #syncValidity() {
+        this.internals.setFormValue(this.value);
+
+        let message: string | undefined;
+        const flags: ValidityStateFlags = {};
+
+        if (this.required && !this.#value) {
+            message = msg("This field is required.");
+            flags.valueMissing = true;
+        }
+
+        this.internals.setValidity(flags, message, this.anchorRef.value);
+    }
+
+    /**
+     * The raw value of the currently selected radio option.
+     *
+     * This is the value that will be submitted with the form when serialized.
+     */
+    public toJSON(): T | null {
+        return this.#value;
+    }
 
     #fieldID: string = this.name || IDGenerator.randomID();
 
@@ -54,9 +95,33 @@ export class Radio<T = never> extends CustomEmitterElement(AKElement) {
         return typeof this.options === "function" ? this.options() : this.options;
     }
 
+    public override connectedCallback(): void {
+        super.connectedCallback();
+
+        if (this.getAttribute("tabindex") === null) {
+            this.setAttribute("tabindex", "0");
+        }
+
+        this.addEventListener("focus", this.#delegateFocusListener);
+
+        this.role ||= "group";
+    }
+
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+
+        this.removeEventListener("focus", this.#delegateFocusListener);
+    }
+
+    #delegateFocusListener = () => {
+        this.anchorRef?.value?.focus();
+    };
+
     // Set the value if it's not set already. Property changes inside the `willUpdate()` method do
     // not trigger an element update.
-    willUpdate() {
+    public override willUpdate(changedProperties: PropertyValues<this>): void {
+        super.willUpdate(changedProperties);
+
         if (!this.value) {
             const maybeDefault = this.#optionsArray().filter((opt) => opt.default);
             if (maybeDefault.length > 0) {
@@ -65,15 +130,21 @@ export class Radio<T = never> extends CustomEmitterElement(AKElement) {
         }
     }
 
+    public override firstUpdated(changedProperties: PropertyValues<this>): void {
+        super.firstUpdated(changedProperties);
+        this.#syncValidity();
+    }
+
     // When a user clicks on `type="radio"`, *two* events happen in rapid succession: the original
     // radio loses its setting, and the selected radio gains its setting. We want radio buttons to
     // present a unified event interface, so we prevent the event from triggering if the value is
     // already set.
     #buildChangeListener = (option: RadioOption<T>) => {
-        return (ev: Event) => {
+        return (event: Event) => {
             // This is a controlled input. Stop the native event from escaping or affecting the
             // value. We'll do that ourselves.
-            ev.stopPropagation();
+            event.preventDefault();
+            event.stopPropagation();
 
             if (option.disabled) {
                 return;
@@ -81,8 +152,21 @@ export class Radio<T = never> extends CustomEmitterElement(AKElement) {
 
             this.value = option.value;
 
-            this.dispatchCustomEvent<RadioChangeEventDetail<T>>("change", { value: option.value });
-            this.dispatchCustomEvent<RadioChangeEventDetail<T>>("input", { value: option.value });
+            this.dispatchEvent(
+                new CustomEvent<RadioChangeEventDetail<T>>("change", {
+                    detail: { value: option.value },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+
+            this.dispatchEvent(
+                new CustomEvent<RadioChangeEventDetail<T>>("input", {
+                    detail: { value: option.value },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
         };
     };
 
@@ -96,13 +180,15 @@ export class Radio<T = never> extends CustomEmitterElement(AKElement) {
             @click=${changeListener}
         >
             <input
+                ${index === 0 ? ref(this.anchorRef) : nothing}
                 class="pf-c-radio__input"
                 type="radio"
-                name="${this.name}"
+                name=${ifPresent(this.name)}
                 aria-label=${option.label}
                 id=${id}
                 .checked=${option.value === this.value}
                 .disabled=${!!option.disabled}
+                ?required=${this.required}
             />
             <label class="pf-c-radio__label ${option.className ?? ""}" for=${id}
                 >${option.label}</label
@@ -114,7 +200,7 @@ export class Radio<T = never> extends CustomEmitterElement(AKElement) {
     };
 
     render() {
-        return html`<div class="pf-c-form__group-control pf-m-stack">
+        return html`<div class="pf-c-form__group-control pf-m-stack" ${ref(this.anchorRef)}>
             ${map(this.#optionsArray(), this.#renderRadio)}
         </div>`;
     }
diff --git a/web/src/elements/forms/SearchSelect/SearchSelect.ts b/web/src/elements/forms/SearchSelect/SearchSelect.ts
index dc869ad5cb5f..2dc97708b19f 100644
--- a/web/src/elements/forms/SearchSelect/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect/SearchSelect.ts
@@ -30,7 +30,7 @@ export interface ISearchSelectBase<T> {
     query?: string;
     objects?: T[];
     selectedObject: T | null;
-    name?: string;
+    name?: string | null;
     placeholder: string | null;
     emptyOption?: string;
 }
@@ -128,8 +128,8 @@ export abstract class SearchSelectBase<T>
      * Used to inform the form of the name of the object
      * @property
      */
-    @property()
-    public name?: string;
+    @property({ type: String })
+    public name: string | null = null;
 
     /**
      * A unique ID to associate with the input and label.
diff --git a/web/src/elements/forms/SearchSelect/ak-portal.ts b/web/src/elements/forms/SearchSelect/ak-portal.ts
index 4acadfe4c68a..84246c896926 100644
--- a/web/src/elements/forms/SearchSelect/ak-portal.ts
+++ b/web/src/elements/forms/SearchSelect/ak-portal.ts
@@ -1,5 +1,5 @@
 import { randomId } from "#elements/utils/randomId";
-import { resolveInterface } from "#elements/utils/render-roots";
+import { findTopmost } from "#elements/utils/render-roots";
 
 import { autoUpdate, computePosition, flip, hide } from "@floating-ui/dom";
 
@@ -75,11 +75,9 @@ export class Portal extends LitElement implements IPortal {
             this.dropdownContainer.dataset.managedFor = this.name;
         }
 
-        const interfaceElement = resolveInterface();
-        const container =
-            interfaceElement.renderRoot.querySelector("dialog:open") || this.ownerDocument.body;
+        const topmost = findTopmost(this.ownerDocument);
 
-        container.append(this.dropdownContainer);
+        topmost.append(this.dropdownContainer);
 
         if (!this.anchor) {
             throw new Error("Tether entrance initialized incorrectly: missing anchor");
diff --git a/web/src/elements/forms/serialization.ts b/web/src/elements/forms/serialization.ts
index 9c3a9f9da20a..2c1baf2c9827 100644
--- a/web/src/elements/forms/serialization.ts
+++ b/web/src/elements/forms/serialization.ts
@@ -2,6 +2,7 @@ import { dateToUTC } from "#common/temporal";
 
 import { AKElement } from "#elements/Base";
 import { isControlElement } from "#elements/ControlElement";
+import { isFormField } from "#elements/forms/form-associated-element";
 import { isNamedElement, NamedElement } from "#elements/utils/inputs";
 
 function isIgnored<T extends Element>(element: T) {
@@ -51,7 +52,7 @@ export function serializeForm<T = Record<string, unknown>>(elements: Iterable<AK
 
         if (element.hidden) return;
 
-        if (isNamedElement(element) && isControlElement(element)) {
+        if (isNamedElement(element) && (isFormField(element) || isControlElement(element))) {
             return assignValue(element, element.toJSON(), json);
         }
 
@@ -61,7 +62,10 @@ export function serializeForm<T = Record<string, unknown>>(elements: Iterable<AK
             return;
         }
 
-        if (isNamedElement(element) && isControlElement(inputElement)) {
+        if (
+            isNamedElement(element) &&
+            (isFormField(inputElement) || isControlElement(inputElement))
+        ) {
             return assignValue(element, inputElement.toJSON(), json);
         }
 
diff --git a/web/src/elements/messages/Message.ts b/web/src/elements/messages/Message.ts
index 398b204b6b1c..fbde81e96a7c 100644
--- a/web/src/elements/messages/Message.ts
+++ b/web/src/elements/messages/Message.ts
@@ -48,7 +48,7 @@ export class Message extends AKElement {
     public live?: boolean;
 
     @property({ type: Number })
-    public lifetime?: number = 8_000;
+    public lifetime?: number = 8000;
 
     //#endregion
 
diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts
index c39ab5053bbb..135745a6ce00 100644
--- a/web/src/elements/messages/MessageContainer.ts
+++ b/web/src/elements/messages/MessageContainer.ts
@@ -6,6 +6,7 @@ import { APIMessage, MessageLevel } from "#common/messages";
 import { AKElement } from "#elements/Base";
 import Styles from "#elements/messages/styles.css";
 import { ifPresent } from "#elements/utils/attributes";
+import { findTopmost } from "#elements/utils/render-roots";
 
 import { ConsoleLogger } from "#logger/browser";
 
@@ -27,9 +28,9 @@ const logger = ConsoleLogger.prefix("messages");
  *
  * @todo Consider making this a static method on singleton {@linkcode MessageContainer}
  */
-export function showMessage(message: APIMessage | null, unique = false): void {
+export function showMessage(message: APIMessage | null, unique: boolean = false): boolean {
     if (!message) {
-        return;
+        return false;
     }
 
     if (!message.message.trim()) {
@@ -39,17 +40,21 @@ export function showMessage(message: APIMessage | null, unique = false): void {
         message.description ??= msg("Please check the browser console for more details.");
     }
 
-    const container = document.querySelector<MessageContainer>("ak-message-container");
+    const topmost = findTopmost();
+
+    const container = topmost.querySelector<MessageContainer>("ak-message-container");
 
     if (!container) {
         logger.warn("authentik/messages: No message container found in DOM");
         logger.info("authentik/messages: Message to show:", message);
 
-        return;
+        return false;
     }
 
     container.addMessage(message, unique);
     container.requestUpdate();
+
+    return true;
 }
 
 /**
@@ -87,13 +92,15 @@ export function showAPIErrorMessage(error: APIError, unique = false): void {
     );
 }
 
+export type MessageContainerAlignment = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
 @customElement("ak-message-container")
 export class MessageContainer extends AKElement {
     @property({ attribute: false })
     public messages: APIMessage[] = [];
 
-    @property()
-    alignment: "top" | "bottom" = "top";
+    @property({ type: String, reflect: true, useDefault: true })
+    public alignment: MessageContainerAlignment = "bottom-right";
 
     static styles: CSSResult[] = [PFAlertGroup, Styles];
 
@@ -120,18 +127,30 @@ export class MessageContainer extends AKElement {
         if (changedProperties.has("messages") && this.messages.length) {
             // Invoking the popover is only needed for browsers that support dialogs
             // that support HTMLDialogElement.showModal()
-            this.showPopover?.();
+            const source = findTopmost(this.ownerDocument);
+
+            this.showPopover?.({ source });
         }
     }
 
-    public addMessage(message: APIMessage, unique = false): void {
+    public addMessage(message: APIMessage, unique?: boolean): boolean {
+        if (message.key) {
+            this.messages = [...this.messages.filter((m) => m.key !== message.key), message];
+
+            return true;
+        }
+
         if (unique) {
-            const match = this.messages.some((m) => m.message === message.message);
+            const existing = this.messages.find((m) => m.message === message.message);
 
-            if (match) return;
+            if (existing) {
+                return false;
+            }
         }
 
         this.messages = [...this.messages, message];
+
+        return true;
     }
 
     #removeMessage = (message: APIMessage) => {
@@ -146,8 +165,10 @@ export class MessageContainer extends AKElement {
     render() {
         return html`<ul
             role="region"
+            part="messages"
             aria-label="${msg("Status messages")}"
             class="pf-c-alert-group pf-m-toast"
+            data-alignment=${this.alignment}
         >
             ${this.messages.toReversed().map((message, idx) => {
                 const { message: title, description, level, icon } = message;
diff --git a/web/src/elements/messages/styles.css b/web/src/elements/messages/styles.css
index 36c029d3f510..f0ef7afcf56e 100644
--- a/web/src/elements/messages/styles.css
+++ b/web/src/elements/messages/styles.css
@@ -15,7 +15,35 @@ ak-message {
     display: block;
 }
 
-:host([alignment="bottom"]) .pf-c-alert-group.pf-m-toast {
-    bottom: var(--pf-c-alert-group--m-toast--Top);
-    top: unset;
+/* TODO: Revisit after PF4 upgrade. Our usage is has diverged from the original intent
+ * and this may no longer be the best base style to use. */
+
+.pf-c-alert-group.pf-m-toast {
+    --pf-c-alert-group--m-toast--Bottom: var(--pf-global--spacer--md);
+    --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--md);
+    --pf-c-alert-group--m-toast--Left: var(--pf-global--spacer--md);
+
+    max-width: clamp(10rem, var(--pf-c-alert-group--m-toast--MaxWidth), 25dvw);
+    min-width: max-content;
+
+    &[data-alignment^="bottom"] {
+        bottom: var(--pf-global--spacer--md);
+        top: unset;
+    }
+
+    &[data-alignment^="top"] {
+        top: var(--pf-global--spacer--md);
+        bottom: unset;
+    }
+
+    &[data-alignment$="left"],
+    &[data-alignment="bottom"] {
+        left: var(--pf-global--spacer--md);
+        right: unset;
+    }
+
+    &[data-alignment$="right"] {
+        right: var(--pf-global--spacer--md);
+        left: unset;
+    }
 }
diff --git a/web/src/elements/notifications/APIDrawer.ts b/web/src/elements/notifications/APIDrawer.ts
index 1c23ee659b7c..e824b41ffebe 100644
--- a/web/src/elements/notifications/APIDrawer.ts
+++ b/web/src/elements/notifications/APIDrawer.ts
@@ -78,7 +78,9 @@ export class APIDrawer extends AKElement {
         `,
     ];
 
-    @listen(AKRequestPostEvent)
+    @listen(AKRequestPostEvent, {
+        target: window,
+    })
     protected enqueueRequest = ({ requestInfo }: AKRequestPostEvent) => {
         this.requests.push(requestInfo);
 
diff --git a/web/src/elements/sidebar/SidebarItem.ts b/web/src/elements/sidebar/SidebarItem.ts
index 85511d626e07..6ce84912bedb 100644
--- a/web/src/elements/sidebar/SidebarItem.ts
+++ b/web/src/elements/sidebar/SidebarItem.ts
@@ -110,7 +110,9 @@ export class SidebarItem extends WithCapabilitiesConfig(WithLicenseSummary(AKEle
         this.#scrollBehavior ??= "smooth";
     };
 
-    @listen("hashchange")
+    @listen("hashchange", {
+        target: window,
+    })
     public synchronize = (): void => {
         const activePath = window.location.hash.slice(1).split(ROUTE_SEPARATOR)[0];
         this.childItems.forEach((item) => {
diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index 6f6808f123c5..6ca42ff518e2 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -194,7 +194,9 @@ export class FlowExecutor extends WithBrandConfig(Interface) implements StageHos
 
     //#region Listeners
 
-    @listen(AKSessionAuthenticatedEvent)
+    @listen(AKSessionAuthenticatedEvent, {
+        target: window,
+    })
     protected sessionAuthenticatedListener = () => {
         if (!document.hidden) {
             return;
diff --git a/web/src/flow/inspector/FlowInspector.ts b/web/src/flow/inspector/FlowInspector.ts
index f4b163b2dee6..18577a4ebe39 100644
--- a/web/src/flow/inspector/FlowInspector.ts
+++ b/web/src/flow/inspector/FlowInspector.ts
@@ -53,7 +53,9 @@ export class FlowInspector extends AKElement {
 
     //#endregion
 
-    @listen(AKFlowAdvanceEvent)
+    @listen(AKFlowAdvanceEvent, {
+        target: window,
+    })
     protected advanceHandler = (): void => {
         new FlowsApi(DEFAULT_CONFIG)
             .flowsInspectorGet({
diff --git a/web/src/flow/inspector/FlowInspectorButton.ts b/web/src/flow/inspector/FlowInspectorButton.ts
index 800bb3677efc..079ab285f64d 100644
--- a/web/src/flow/inspector/FlowInspectorButton.ts
+++ b/web/src/flow/inspector/FlowInspectorButton.ts
@@ -25,7 +25,9 @@ export class FlowInspectorButton extends WithCapabilitiesConfig(AKElement) {
     @state()
     private loaded = false;
 
-    @listen(AKFlowInspectorChangeEvent)
+    @listen(AKFlowInspectorChangeEvent, {
+        target: window,
+    })
     protected _onInspectorToggle = (ev: AKFlowInspectorChangeEvent) => {
         this.open = ev.open;
     };
diff --git a/web/src/flow/stages/base.ts b/web/src/flow/stages/base.ts
index 1fc391f1cd5f..823fda10f807 100644
--- a/web/src/flow/stages/base.ts
+++ b/web/src/flow/stages/base.ts
@@ -44,7 +44,7 @@ export abstract class BaseStage<Tin extends StageChallengeLike, Tout = unknown>
         delegatesFocus: true,
     };
 
-    protected logger = ConsoleLogger.prefix(`flow:${this.tagName.toLowerCase()}`);
+    protected logger = ConsoleLogger.prefix(`flow:${this.localName}`);
 
     @property({ type: Object, attribute: false })
     public host!: StageHost;
diff --git a/web/src/standalone/loading/index.entrypoint.ts b/web/src/standalone/loading/index.entrypoint.ts
index 984da79919db..95355fb71df2 100644
--- a/web/src/standalone/loading/index.entrypoint.ts
+++ b/web/src/standalone/loading/index.entrypoint.ts
@@ -32,7 +32,7 @@ export class Loading extends AKElement {
 
     public connectedCallback(): void {
         super.connectedCallback();
-        this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
+        this.dataset.akInterfaceRoot = this.localName;
     }
 
     render(): TemplateResult {
diff --git a/web/src/styles/authentik/components/Button/button.css b/web/src/styles/authentik/components/Button/button.css
index 2f94a1d924f3..e084c96c5e35 100644
--- a/web/src/styles/authentik/components/Button/button.css
+++ b/web/src/styles/authentik/components/Button/button.css
@@ -18,6 +18,12 @@
     }
 }
 
+.ak-c-button--icon__progress {
+    position: absolute;
+    inset: 0;
+    line-height: calc(var(--pf-c-button--LineHeight) * 2);
+}
+
 a.pf-c-button {
     &.pf-m-plain,
     &.pf-m-secondary {
diff --git a/web/src/user/LibraryApplication/index.ts b/web/src/user/LibraryApplication/index.ts
index d05b66c8e863..ac1307f9d349 100644
--- a/web/src/user/LibraryApplication/index.ts
+++ b/web/src/user/LibraryApplication/index.ts
@@ -3,7 +3,7 @@ import "#user/LibraryApplication/RACLaunchEndpointModal";
 
 import { PFSize } from "#common/enums";
 
-import { renderModal } from "#elements/modals/utils";
+import { renderModal } from "#elements/dialogs";
 import { LitFC } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
 
diff --git a/web/src/user/user-settings/tokens/UserTokenList.ts b/web/src/user/user-settings/tokens/UserTokenList.ts
index c58da41f8cdf..11b2caa8e7bb 100644
--- a/web/src/user/user-settings/tokens/UserTokenList.ts
+++ b/web/src/user/user-settings/tokens/UserTokenList.ts
@@ -11,6 +11,7 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { intentToLabel } from "#common/labels";
 import { formatElapsedTime } from "#common/temporal";
 
+import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";
 
@@ -174,14 +175,7 @@ export class UserTokenList extends Table<Token> {
                         </pf-tooltip>
                     </button>
                 </ak-forms-modal>
-                <ak-token-copy-button
-                    class="pf-c-button pf-m-plain"
-                    identifier="${item.identifier}"
-                >
-                    <pf-tooltip position="top" content=${msg("Copy token")}>
-                        <i class="fas fa-copy" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </ak-token-copy-button>
+                ${IconTokenCopyButton(item.identifier)}
             `,
         ];
     }

From 47b609043a9da562e86378577d07483c98e34dcd Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:29:44 +0200
Subject: [PATCH 09/21] web/test: update browser e2e tests for dialog-based
 flow

Adjust application, group, session, and user browser tests to the new
wizard and modal selectors introduced by the <dialog> migration and
relax a handful of timeouts that were tight against the old
ModalButton animation sequence.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/test/browser/applications.test.ts |  4 ++-
 web/test/browser/groups.test.ts       | 14 +++++----
 web/test/browser/session.test.ts      |  4 ++-
 web/test/browser/users.test.ts        | 41 ++++++++++++++++++++-------
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/web/test/browser/applications.test.ts b/web/test/browser/applications.test.ts
index a9de2cfcb7fa..8c2f4d45208c 100644
--- a/web/test/browser/applications.test.ts
+++ b/web/test/browser/applications.test.ts
@@ -174,7 +174,9 @@ test.describe("Applications", () => {
 
             await expect(
                 wizardDialog.getByRole("heading", { name: "Your application has been saved" }),
-            ).toBeVisible();
+            ).toBeVisible({
+                timeout: 10_000,
+            });
 
             await click("Close", "button", wizardDialog);
         });
diff --git a/web/test/browser/groups.test.ts b/web/test/browser/groups.test.ts
index 5c96319be3ef..28ec097955eb 100644
--- a/web/test/browser/groups.test.ts
+++ b/web/test/browser/groups.test.ts
@@ -119,9 +119,11 @@ test.describe("Groups", () => {
             const createButton = dialog.getByRole("button", { name: "Create Group" });
 
             await expect(createButton, "Create button is visible").toBeVisible();
-            await createButton.evaluate((element: HTMLButtonElement) => element.click());
+            await createButton.click();
 
-            await expect(dialog, "Dialog closes after creating group").toBeHidden();
+            await expect(dialog, "Dialog closes after creating group").toBeHidden({
+                timeout: 10_000,
+            });
         });
 
         await test.step("Verify group creation", async () => {
@@ -153,14 +155,16 @@ test.describe("Groups", () => {
             const confirmButton = selectUsersModal.getByRole("button", { name: "Confirm" });
 
             await expect(confirmButton, "Confirm button is visible").toBeVisible();
-            await confirmButton.evaluate((element: HTMLButtonElement) => element.click());
+            await confirmButton.click();
 
             const assignButton = assignUsersModal.getByRole("button", { name: "Assign" });
 
             await expect(assignButton, "Assign button is visible").toBeVisible();
-            await assignButton.evaluate((element: HTMLButtonElement) => element.click());
+            await assignButton.click();
 
-            await expect(assignUsersModal, "Assign users modal closes").toBeHidden();
+            await expect(assignUsersModal, "Assign users modal closes").toBeHidden({
+                timeout: 10_000,
+            });
 
             await test.step("Verify admin user assignment", async () => {
                 // eslint-disable-next-line max-nested-callbacks
diff --git a/web/test/browser/session.test.ts b/web/test/browser/session.test.ts
index 380c98ca514b..1a939f67545c 100644
--- a/web/test/browser/session.test.ts
+++ b/web/test/browser/session.test.ts
@@ -18,7 +18,9 @@ test.describe("Session management", () => {
             page.getByRole("heading", {
                 level: 1,
             }),
-        ).toHaveText("My applications");
+        ).toHaveText("My applications", {
+            timeout: 10_000,
+        });
     });
 
     test("Reject bad username", async ({ session }) => {
diff --git a/web/test/browser/users.test.ts b/web/test/browser/users.test.ts
index d02d01fe8d5b..81995780eca1 100644
--- a/web/test/browser/users.test.ts
+++ b/web/test/browser/users.test.ts
@@ -54,7 +54,7 @@ test.describe("Users", () => {
         const { fill } = form;
         const { click } = pointer;
 
-        const dialog = page.getByRole("dialog", { name: "New User" });
+        const dialog = page.getByRole("dialog", { name: "New user" });
 
         await expect(dialog, "Dialog is initially closed").toBeHidden();
 
@@ -62,13 +62,18 @@ test.describe("Users", () => {
 
         await expect(dialog, "Dialog opens").toBeVisible();
 
+        await test.step("Select user type", async () => {
+            await dialog.getByRole("radio", { name: "Internal" }).click({ force: true });
+            await dialog.getByRole("button", { name: "Next" }).click();
+        });
+
         await series(
             [fill, /^Username/, username, dialog],
             [fill, /^Display Name/, displayName, dialog],
             [fill, /^Email Address/, `${username}@example.com`, dialog],
         );
 
-        await dialog.getByRole("button", { name: "Create User" }).click();
+        await dialog.getByRole("button", { name: "Finish" }).click();
 
         await expect(dialog, "Dialog closes after creating user").toBeHidden();
     });
@@ -79,24 +84,31 @@ test.describe("Users", () => {
         const { fill } = form;
         const { click } = pointer;
 
-        const dialog = page.getByRole("dialog", { name: "New Service Account" });
+        const dialog = page.getByRole("dialog", { name: "New user" });
 
         await expect(dialog, "Dialog is initially closed").toBeHidden();
 
-        await click("New Service Account", "button");
+        await click("New User", "button");
 
         await expect(dialog, "Dialog opens").toBeVisible();
 
+        await test.step("Select user type", async () => {
+            await dialog.getByRole("radio", { name: "Service Account" }).click({ force: true });
+            await dialog.getByRole("button", { name: "Next" }).click();
+        });
+
         await series(
             // ---
             [fill, /^Username/, username, dialog],
         );
 
-        await dialog.getByRole("button", { name: "Create Service Account" }).click();
+        await dialog.getByRole("button", { name: "Next" }).click();
 
-        await expect(dialog, "Dialog is open after creating service account").toBeVisible();
+        await expect(dialog, "Credentials page is visible").toBeVisible();
 
-        await click("Close", "button", dialog);
+        await dialog.getByRole("button", { name: "Finish" }).click();
+
+        await expect(dialog, "Dialog closes after creating service account").toBeHidden();
 
         const userPathsTree = page.getByRole("tree", { name: "User paths" });
         await expect(userPathsTree, "User paths tree is visible").toBeVisible();
@@ -132,7 +144,7 @@ test.describe("Impersonation", () => {
         const { fill, search } = form;
         const { click } = pointer;
 
-        const createDialog = page.getByRole("dialog", { name: "New User" });
+        const createDialog = page.getByRole("dialog", { name: "New user" });
         const impersonateDialog = page.getByRole("dialog", { name: "Impersonate User" });
 
         await test.step("Create user", async () => {
@@ -140,15 +152,20 @@ test.describe("Impersonation", () => {
 
             await expect(createDialog, "Create dialog opens").toBeVisible();
 
+            await test.step("Select user type", async () => {
+                await createDialog.getByRole("radio", { name: "Internal" }).click({ force: true });
+                await createDialog.getByRole("button", { name: "Next" }).click();
+            });
+
             await series(
                 [fill, /^Username/, username, createDialog],
                 [fill, /^Display Name/, displayName, createDialog],
                 [fill, /^Email Address/, `${username}@example.com`, createDialog],
             );
 
-            await createDialog.getByRole("button", { name: "Create User" }).click();
+            await createDialog.getByRole("button", { name: "Finish" }).click();
 
-            await createDialog.waitFor({ state: "hidden" });
+            await createDialog.waitFor({ state: "hidden", timeout: 10_000 });
             await expect(createDialog, "Create dialog closes").toBeHidden();
         });
 
@@ -169,7 +186,9 @@ test.describe("Impersonation", () => {
 
             await impersonateDialog.getByRole("button", { name: "Impersonate" }).click();
 
-            await navigator.waitForPathname("if/user/#/library");
+            await navigator.waitForPathname("if/user/#/library", {
+                timeout: 10_000,
+            });
         });
 
         await test.step("Confirm impersonation", async () => {

From 50ef8365046bd94ac75261044653dfcba1c36ee9 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Fri, 10 Apr 2026 18:15:27 +0200
Subject: [PATCH 10/21] Fix visibility detection.

---
 .../decorators/intersection-observer.ts       | 60 ++++++++++++-------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/web/src/elements/decorators/intersection-observer.ts b/web/src/elements/decorators/intersection-observer.ts
index bd311f3e9314..aa4d3a64b765 100644
--- a/web/src/elements/decorators/intersection-observer.ts
+++ b/web/src/elements/decorators/intersection-observer.ts
@@ -4,7 +4,7 @@
 
 import { findNearestBoxTarget, isInViewport } from "#elements/utils/viewport";
 
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 
 /**
@@ -109,31 +109,51 @@ export function intersectionObserver({
             ...init,
         });
 
-        const { connectedCallback, disconnectedCallback } = target;
+        const synchronizeUseAncestorBox = (nextDisplayBox?: "contents" | "block") => {
+            useAncestorBox = nextDisplayBox === "contents" || initialUseAncestorBox;
+        };
+
+        /**
+         * Applies the necessary lifecycle callback with access to protected properties of the target class.
+         */
+        function applyLifecycleCallbacks(this: T) {
+            const { connectedCallback, disconnectedCallback, updated } = this;
 
-        target.connectedCallback = function connectedCallbackWrapper(this: T) {
-            connectedCallback?.call(this);
+            this.connectedCallback = function connectedCallbackWrapper(this: T) {
+                connectedCallback?.call(this);
 
-            useAncestorBox = this.displayBox === "contents" || initialUseAncestorBox;
+                synchronizeUseAncestorBox(this.displayBox);
 
-            if (this.hasUpdated) {
-                observer.observe(this);
-            } else {
-                this.updateComplete.then(() => {
+                if (this.hasUpdated) {
                     observer.observe(this);
-                });
-            }
-        };
+                } else {
+                    this.updateComplete.then(() => {
+                        observer.observe(this);
+                    });
+                }
+            };
 
-        target.disconnectedCallback = function disconnectedCallbackWrapper(
-            this: LitElementWithDisplayBox,
-        ) {
-            disconnectedCallback?.call(this);
+            this.disconnectedCallback = function disconnectedCallbackWrapper(
+                this: LitElementWithDisplayBox,
+            ) {
+                disconnectedCallback?.call(this);
+
+                if (observer) {
+                    observer.disconnect();
+                }
+            };
+
+            this.updated = function updatedWrapper(this: T, changedProperties: PropertyValues<T>) {
+                updated?.call(this, changedProperties);
+
+                if (changedProperties.has("displayBox")) {
+                    synchronizeUseAncestorBox(this.displayBox);
+                }
+            };
+        }
+
+        applyLifecycleCallbacks.call(target);
 
-            if (observer) {
-                observer.disconnect();
-            }
-        };
         //#endregion
     };
 }

From c38a1f4641ee13d4aec47281f85aba7b63130040 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Fri, 10 Apr 2026 18:16:00 +0200
Subject: [PATCH 11/21] Fix layout, behavior.

---
 web/src/elements/table/Table.ts               | 30 +++++++------------
 .../RACLaunchEndpointModal.ts                 | 29 +++++++++++++-----
 web/src/user/LibraryApplication/index.ts      | 13 ++------
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 1d557b1f9962..ccd2de4d693b 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -261,9 +261,6 @@ export abstract class Table<T extends object, D = T>
     @property({ type: Boolean })
     public checkbox = false;
 
-    @property({ type: Boolean })
-    public clickable = false;
-
     @property({ type: Boolean })
     public radioSelect = false;
 
@@ -295,6 +292,9 @@ export abstract class Table<T extends object, D = T>
     @property({ type: Boolean })
     public expandable = false;
 
+    @property({ type: String, attribute: "row-class" })
+    public rowClassNames = `${this.checkbox || this.expandable ? "pf-m-hoverable" : ""}`;
+
     @property({ type: String, attribute: "search-label" })
     public searchLabel: string | null = null;
 
@@ -772,12 +772,7 @@ export abstract class Table<T extends object, D = T>
         }
 
         return html`
-            <tr
-                aria-selected=${selected ? "true" : "false"}
-                class="${classMap({
-                    "pf-m-hoverable": this.checkbox || this.expandable || this.clickable,
-                })}"
-            >
+            <tr aria-selected=${selected ? "true" : "false"} class="${this.rowClassNames}">
                 ${memoizedCheckbox} ${memoizedExpansion}
                 ${this.row(item).map((cell, columnIndex) => {
                     const columnID = this.#columnIDs.get(this.columns[columnIndex]);
@@ -992,16 +987,13 @@ export abstract class Table<T extends object, D = T>
             this.fetch();
         };
 
-        return html`
-            <ak-table-pagination
-                ?loading=${this.loading}
-                label=${ifPresent(this.label)}
-                class="pf-c-toolbar__item pf-m-pagination"
-                .pages=${this.data?.pagination}
-                .onPageChange=${handler}
-            >
-            </ak-table-pagination>
-        `;
+        return html`<ak-table-pagination
+            ?loading=${this.loading}
+            label=${ifPresent(this.label)}
+            class="pf-c-toolbar__item pf-m-pagination"
+            .pages=${this.data?.pagination}
+            .onPageChange=${handler}
+        ></ak-table-pagination>`;
     }
 
     protected renderLoadingBar(): SlottedTemplateResult {
diff --git a/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts b/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts
index bfb62b4e8dab..5cab72da88e8 100644
--- a/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts
+++ b/web/src/user/LibraryApplication/RACLaunchEndpointModal.ts
@@ -7,14 +7,27 @@ import { SlottedTemplateResult } from "#elements/types";
 import { Application, Endpoint, RacApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html } from "lit";
+import { html } from "lit-html";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-library-rac-endpoint-launch")
 export class RACLaunchEndpointLaunch extends Table<Endpoint> {
-    public override clickable = true;
     protected override searchEnabled = true;
 
+    public override searchPlaceholder = msg("Search for an endpoint by name...");
+    public override emptyStateMessage = msg("No endpoints found for this application.");
+    public override rowClassNames = "pf-m-hoverable";
+    public cancelable = true;
+
+    @property({ attribute: false })
+    public app: Application | null = null;
+
+    public renderHeader(): SlottedTemplateResult {
+        return html`<h1 part="form-header" class="pf-c-title pf-m-2xl">
+            ${msg("Launch Endpoint")}
+        </h1>`;
+    }
+
     protected override rowClickListener(item: Endpoint, event?: InputEvent | PointerEvent) {
         if (!item.launchUrl) {
             return super.rowClickListener(item, event);
@@ -25,10 +38,7 @@ export class RACLaunchEndpointLaunch extends Table<Endpoint> {
         window.open(item.launchUrl, target);
     }
 
-    @property({ attribute: false })
-    public app?: Application;
-
-    async apiEndpoint(): Promise<PaginatedResponse<Endpoint>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Endpoint>> {
         const endpoints = await new RacApi(DEFAULT_CONFIG).racEndpointsList({
             ...(await this.defaultEndpointConfig()),
             provider: this.app?.provider || 0,
@@ -49,8 +59,11 @@ export class RACLaunchEndpointLaunch extends Table<Endpoint> {
         [msg("Name")],
     ];
 
-    row(item: Endpoint): SlottedTemplateResult[] {
-        return [html`${item.name}`];
+    protected override row(item: Endpoint): SlottedTemplateResult[] {
+        return [
+            // ---
+            item.name,
+        ];
     }
 }
 
diff --git a/web/src/user/LibraryApplication/index.ts b/web/src/user/LibraryApplication/index.ts
index ac1307f9d349..5b73300d4483 100644
--- a/web/src/user/LibraryApplication/index.ts
+++ b/web/src/user/LibraryApplication/index.ts
@@ -3,12 +3,13 @@ import "#user/LibraryApplication/RACLaunchEndpointModal";
 
 import { PFSize } from "#common/enums";
 
-import { renderModal } from "#elements/dialogs";
+import { modalInvoker } from "#elements/dialogs";
 import { LitFC } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
 
 import { CardHeader } from "#user/LibraryApplication/CardHeader";
 import { CardMenu } from "#user/LibraryApplication/CardMenu";
+import { RACLaunchEndpointLaunch } from "#user/LibraryApplication/RACLaunchEndpointModal";
 
 import { Application } from "@goauthentik/api";
 
@@ -49,14 +50,6 @@ export const AKLibraryApp: LitFC<AKLibraryAppProps> = ({
 
     const dataID = kebabCase(application.name);
 
-    const launchModal = () => {
-        return renderModal(
-            html`<ak-library-rac-endpoint-launch
-                .app=${application}
-            ></ak-library-rac-endpoint-launch>`,
-        );
-    };
-
     const cardID = `app-${application.pk}`;
     const titleID = `${cardID}-title`;
     const descriptionID = `${cardID}-description`;
@@ -98,7 +91,7 @@ export const AKLibraryApp: LitFC<AKLibraryAppProps> = ({
                       ${primaryRef}
                       role="button"
                       aria-describedby=${descriptionID}
-                      @click=${launchModal}
+                      ${modalInvoker(RACLaunchEndpointLaunch, { app: application })}
                       ${spread(extendedProps)}
                   >
                       ${cardHeader}

From b86538f5e25ddc51c244f399cd96f79c399817f4 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Fri, 10 Apr 2026 18:22:22 +0200
Subject: [PATCH 12/21] Fix type.


From fc5b7c952c6487831308be2abbeafc0fd1d69dc5 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 07:34:06 +0200
Subject: [PATCH 13/21] Flesh out test revisions.

---
 web/e2e/fixtures/FormFixture.ts               |   6 +
 web/playwright.config.js                      |   1 +
 .../admin/applications/ApplicationListPage.ts |   4 +-
 .../components/ak-backchannel-input.ts        |   2 +-
 .../steps/SubmitStepOverviewRenderers.ts      |   6 +-
 .../ak-application-wizard-submit-step.ts      |   5 +-
 .../ak-application-wizard-provider-for-rac.ts |   2 +-
 .../admin/blueprints/BlueprintImportForm.ts   |   6 +-
 web/src/admin/blueprints/BlueprintListPage.ts |   2 +-
 web/src/admin/brands/BrandForm.ts             |   4 +-
 .../admin/crypto/CertificateKeyPairForm.ts    |   1 +
 .../endpoints/DeviceAccessGroupsListPage.ts   |   9 +-
 .../connectors/ConnectorsListPage.ts          |  30 ++---
 .../connectors/agent/AgentConnectorForm.ts    |   4 +-
 .../admin/endpoints/devices/DeviceListPage.ts |  15 ++-
 .../enterprise/EnterpriseLicenseListPage.ts   |  53 ++++----
 web/src/admin/events/RuleListPage.ts          |   3 +
 web/src/admin/events/TransportListPage.ts     |   3 +
 web/src/admin/files/FileListPage.ts           |   1 +
 web/src/admin/flows/FlowForm.ts               |  52 ++++++--
 web/src/admin/flows/FlowListPage.ts           |   2 +-
 web/src/admin/groups/RelatedGroupList.ts      |   4 +-
 web/src/admin/groups/RelatedUserList.ts       |   4 +-
 .../admin/lifecycle/LifecycleRuleListPage.ts  |   2 +-
 web/src/admin/outposts/OutpostListPage.ts     |   4 +-
 .../outposts/ServiceConnectionListPage.ts     |   9 +-
 web/src/admin/policies/PolicyListPage.ts      |  27 ++--
 .../policies/reputation/ReputationListPage.ts |  29 ++--
 .../PropertyMappingListPage.ts                |   1 +
 web/src/admin/providers/ProviderListPage.ts   |   2 +-
 .../providers/ldap/LDAPProviderFormForm.ts    |  16 +--
 .../oauth2/OAuth2ProviderFormForm.ts          |  24 ++--
 .../oauth2/OAuth2ProviderViewPage.ts          |   2 +-
 .../providers/proxy/ProxyProviderFormForm.ts  |   6 +-
 .../admin/providers/rac/RACProviderForm.ts    |   2 +-
 .../radius/RadiusProviderFormForm.ts          |   8 +-
 .../providers/saml/SAMLProviderFormForm.ts    |   6 +-
 .../saml/SAMLProviderImportFormForm.ts        |  10 +-
 .../wsfed/WSFederationProviderFormForm.ts     |   6 +-
 web/src/admin/roles/ak-related-role-table.ts  |   4 +-
 .../admin/roles/ak-role-permission-form.ts    |   2 +-
 .../sources/kerberos/KerberosSourceForm.ts    |   2 +-
 .../admin/sources/oauth/OAuthSourceForm.ts    |   2 +-
 web/src/admin/sources/plex/PlexSourceForm.ts  |   2 +-
 web/src/admin/sources/saml/SAMLSourceForm.ts  |   2 +-
 .../sources/telegram/TelegramSourceForm.ts    |   2 +-
 .../authenticator_duo/DuoDeviceImportForm.ts  |   1 +
 web/src/admin/stages/prompt/PromptListPage.ts |   2 +-
 web/src/admin/users/UserListPage.ts           |  43 +++---
 .../components/HorizontalLightComponent.ts    |  28 ++--
 web/src/components/ak-radio-input.ts          |  19 ++-
 web/src/components/ak-slug-input.ts           |   3 +-
 web/src/components/ak-switch-input.ts         |   4 +-
 web/src/components/ak-wizard/WizardStep.ts    |  10 +-
 web/src/components/ak-wizard/shared.ts        |   2 +-
 web/src/elements/Base.ts                      |   6 +-
 web/src/elements/LicenseNotice.ts             |  17 ++-
 web/src/elements/dialogs/ak-modal.ts          |  17 ++-
 web/src/elements/dialogs/dialog.css           |   3 +
 web/src/elements/dialogs/shared.ts            |   2 +
 web/src/elements/forms/DeleteBulkForm.ts      |   2 +-
 web/src/elements/forms/Form.ts                |  61 ++++++++-
 web/src/elements/forms/FormGroup.css          |  23 +++-
 web/src/elements/forms/FormGroup.ts           |   2 +-
 .../elements/forms/HorizontalFormElement.ts   |  41 +++---
 web/src/elements/forms/ModelForm.ts           |  18 +++
 web/src/elements/forms/Radio.css              |   2 +
 web/src/elements/forms/Radio.ts               |  92 ++++++++-----
 .../forms/SearchSelect/SearchSelect.ts        |   2 +-
 .../SearchSelect/ak-search-select-view.ts     |  18 ++-
 web/src/elements/table/Table.css              |   7 -
 web/src/elements/table/TablePage.css          |   5 +
 web/src/elements/table/TablePage.ts           |   4 +-
 web/src/elements/utils/interactivity.ts       |  16 +--
 web/src/elements/utils/pointer.ts             |   3 +-
 web/src/elements/wizard/CreateWizard.ts       |  19 ++-
 web/src/elements/wizard/Wizard.ts             |  63 ++++++---
 web/src/styles/authentik/base/globals.css     |   3 +-
 .../styles/authentik/components/Form/form.css | 125 +++++++++++++++++-
 web/src/user/ak-interface-user.css            |   4 -
 web/test/browser/applications.test.ts         |  38 +++---
 web/test/browser/providers.test.ts            |  63 +++++----
 web/test/browser/users.test.ts                |  15 +--
 83 files changed, 770 insertions(+), 402 deletions(-)

diff --git a/web/e2e/fixtures/FormFixture.ts b/web/e2e/fixtures/FormFixture.ts
index 2b47d2aa85e6..e758bb4a3532 100644
--- a/web/e2e/fixtures/FormFixture.ts
+++ b/web/e2e/fixtures/FormFixture.ts
@@ -162,6 +162,12 @@ export class FormFixture extends PageFixture {
         await expect(group, `Field "${groupName}" should be visible`).toBeVisible();
         const control = parent.getByRole("radio", { name: fieldName });
 
+        // await control.scrollIntoViewIfNeeded();
+        // await expect(control, `Option "${fieldName}" should be visible`).toBeVisible();
+
+        // TODO: setChecked seems to be buggy with our custom radio buttons, so we use click for now. Revisit this if we switch to native radios.
+        // await control.click();
+        // await expect(control, `Option "${fieldName}" should be checked`).toBeChecked();
         await control.setChecked(true);
     };
 
diff --git a/web/playwright.config.js b/web/playwright.config.js
index c14f4029ff1b..863b1e6eaaa5 100644
--- a/web/playwright.config.js
+++ b/web/playwright.config.js
@@ -36,6 +36,7 @@ export default defineConfig({
         testIdAttribute: "data-test-id",
         baseURL,
         trace: "on-first-retry",
+        colorScheme: "dark",
         launchOptions: {
             logger: {
                 isEnabled() {
diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts
index 02257fa1c3f6..aebb4c6390e6 100644
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/web/src/admin/applications/ApplicationListPage.ts
@@ -47,7 +47,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
     protected override searchEnabled = true;
     public pageTitle = msg("Applications");
     public searchLabel = msg("Applications search");
-    public searchPlaceholder = msg("Search for applications…");
+    public searchPlaceholder = msg("Search for application by name, group or provider...");
 
     public get pageDescription() {
         return msg(
@@ -178,7 +178,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
                     aria-haspopup="menu"
                     aria-controls="new-application-menu"
                     tabindex="0"
-                    aria-label=${msg("Toggle new application menu")}
+                    aria-label=${msg("New Application options")}
                 >
                     <i class="fas fa-caret-down" aria-hidden="true"></i>
                 </button>
diff --git a/web/src/admin/applications/components/ak-backchannel-input.ts b/web/src/admin/applications/components/ak-backchannel-input.ts
index 714a673d9561..132dfbe5972b 100644
--- a/web/src/admin/applications/components/ak-backchannel-input.ts
+++ b/web/src/admin/applications/components/ak-backchannel-input.ts
@@ -65,7 +65,7 @@ export class AkBackchannelProvidersInput extends AKElement {
         return renderModal(html`
             <ak-form
                 headline=${this.label}
-                action-label=${msg("Confirm")}
+                submit-label=${msg("Confirm")}
                 @submit=${(event: AKFormSubmitEvent<Provider[]>) => {
                     const providers = event.target.toJSON();
 
diff --git a/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts b/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts
index 4e32cef5c5d4..18b6a7ed8ef1 100644
--- a/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts
+++ b/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts
@@ -50,8 +50,8 @@ const renderSAMLImportOverview: ProviderOverview<ProvidersSamlImportMetadataCrea
     provider,
 ) => {
     return renderSummary("SAML", provider.name, [
-        [msg("Authorization flow"), provider.authorizationFlow ?? "-"],
-        [msg("Invalidation flow"), provider.invalidationFlow ?? "-"],
+        [msg("Authorization Flow"), provider.authorizationFlow ?? "-"],
+        [msg("Invalidation Flow"), provider.invalidationFlow ?? "-"],
     ]);
 };
 
@@ -153,7 +153,7 @@ const renderOAuth2Overview: ProviderOverview<OAuth2Provider> = (provider) => {
     const label = provider.clientType ? clientTypeToLabel[provider.clientType]() : "";
 
     return renderSummary("OAuth2", provider.name, [
-        [msg("Client type"), label],
+        [msg("Client Type"), label],
         [msg("Client ID"), provider.clientId],
         [msg("Redirect URIs"), formatRedirectUris(provider.redirectUris)],
     ]);
diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
index befe7d2fb90c..f856c4c8a7de 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts
@@ -270,7 +270,10 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
     protected get buttons(): WizardButton[] {
         return match(this.state)
             .with("submitted", () => {
-                return [{ kind: "close" }] satisfies WizardButton[];
+                return [
+                    { kind: "close" },
+                    { kind: "finish", destination: "close" },
+                ] satisfies WizardButton[];
             })
             .with("reviewing", () => {
                 return [
diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
index 2ecb4e605216..9f64f2d73e54 100644
--- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
+++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts
@@ -34,7 +34,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
 
                 <ak-form-element-horizontal
                     name="authorizationFlow"
-                    label=${msg("Authorization flow")}
+                    label=${msg("Authorization Flow")}
                     required
                 >
                     <ak-flow-search
diff --git a/web/src/admin/blueprints/BlueprintImportForm.ts b/web/src/admin/blueprints/BlueprintImportForm.ts
index a26ebc523495..6efd31d32ad9 100644
--- a/web/src/admin/blueprints/BlueprintImportForm.ts
+++ b/web/src/admin/blueprints/BlueprintImportForm.ts
@@ -35,9 +35,11 @@ import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList
 export class BlueprintImportForm extends Form<ManagedBlueprintsImportCreateRequest> {
     static styles: CSSResult[] = [...super.styles, PFDescriptionList, PFBanner];
 
-    public static override verboseName = msg("Blueprint");
-    public static override verboseNamePlural = msg("Blueprints");
+    public static override verboseName = msg("Flow Blueprint");
+    public static override verboseNamePlural = msg("Flow Blueprints");
     public static override createLabel = msg("Import");
+    public static override submitVerb = msg("Import");
+    public static override submittingVerb = msg("Importing");
 
     public override size = PFSize.Medium;
 
diff --git a/web/src/admin/blueprints/BlueprintListPage.ts b/web/src/admin/blueprints/BlueprintListPage.ts
index d2856c123a8e..fc3d54d6800b 100644
--- a/web/src/admin/blueprints/BlueprintListPage.ts
+++ b/web/src/admin/blueprints/BlueprintListPage.ts
@@ -74,7 +74,7 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
     public override expandable = true;
     public override checkbox = true;
     public override clearOnRefresh = true;
-    public override searchPlaceholder = msg("Search for a blueprint...");
+    public override searchPlaceholder = msg("Search for a blueprint by name or path...");
 
     public override order = "name";
 
diff --git a/web/src/admin/brands/BrandForm.ts b/web/src/admin/brands/BrandForm.ts
index ebd810d94201..7590cf73ada3 100644
--- a/web/src/admin/brands/BrandForm.ts
+++ b/web/src/admin/brands/BrandForm.ts
@@ -195,7 +195,7 @@ export class BrandForm extends ModelForm<Brand, string> {
             <ak-form-group label="${msg("Default flows")} ">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         name="flowAuthentication"
                     >
                         <ak-flow-search
@@ -210,7 +210,7 @@ export class BrandForm extends ModelForm<Brand, string> {
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
-                        label=${msg("Invalidation flow")}
+                        label=${msg("Invalidation Flow")}
                         name="flowInvalidation"
                     >
                         <ak-flow-search
diff --git a/web/src/admin/crypto/CertificateKeyPairForm.ts b/web/src/admin/crypto/CertificateKeyPairForm.ts
index 1422a857f0d8..5a19e1431cb2 100644
--- a/web/src/admin/crypto/CertificateKeyPairForm.ts
+++ b/web/src/admin/crypto/CertificateKeyPairForm.ts
@@ -20,6 +20,7 @@ export class CryptoCertificateForm extends ModelForm<CertificateKeyPair, string>
     public static override verboseNamePlural = msg("Certificate-Key Pairs");
     public static override createLabel = msg("Import Existing");
     public static override submitVerb = msg("Import");
+    public static override submittingVerb = msg("Importing");
 
     loadInstance(pk: string): Promise<CertificateKeyPair> {
         return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsRetrieve({
diff --git a/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts b/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts
index 314e095c469f..f3e92aa06a36 100644
--- a/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts
+++ b/web/src/admin/endpoints/DeviceAccessGroupsListPage.ts
@@ -21,16 +21,17 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-endpoints-device-access-groups-list")
 export class DeviceAccessGroupsListPage extends TablePage<DeviceAccessGroup> {
-    public pageIcon = "pf-icon pf-icon-server-group	";
-    public pageTitle = msg("Device access groups");
-    public pageDescription = msg("Create groups of devices to manage access.");
-
     protected searchEnabled: boolean = true;
     protected columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
+    public override pageIcon = "pf-icon pf-icon-server-group	";
+    public override pageTitle = msg("Device access groups");
+    public override pageDescription = msg("Create groups of devices to manage access.");
+    public override searchPlaceholder = msg("Search device groups by name...");
+
     public override checkbox = true;
     public override expandable = true;
 
diff --git a/web/src/admin/endpoints/connectors/ConnectorsListPage.ts b/web/src/admin/endpoints/connectors/ConnectorsListPage.ts
index 66fbc14dee15..1ab16fe31515 100644
--- a/web/src/admin/endpoints/connectors/ConnectorsListPage.ts
+++ b/web/src/admin/endpoints/connectors/ConnectorsListPage.ts
@@ -7,7 +7,7 @@ import "#elements/forms/ModalForm";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
-import { IconEditButtonByTagName } from "#elements/dialogs";
+import { IconEditButtonByTagName, ModalInvokerButton } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
@@ -22,28 +22,29 @@ import { customElement } from "lit/decorators.js";
 
 @customElement("ak-endpoints-connectors-list")
 export class ConnectorsListPage extends TablePage<Connector> {
-    public pageIcon = "pf-icon pf-icon-data-source";
-    public pageTitle = msg("Connectors");
-    public pageDescription = msg(
+    public override searchPlaceholder = msg("Search connectors by name or type...");
+    public override pageIcon = "pf-icon pf-icon-data-source";
+    public override pageTitle = msg("Connectors");
+    public override pageDescription = msg(
         "Configure how devices connect with authentik and ingest external device data.",
     );
 
-    protected searchEnabled: boolean = true;
-    protected columns: TableColumn[] = [
+    protected override searchEnabled: boolean = true;
+    protected override columns: TableColumn[] = [
         [msg("Name"), "name"],
         [msg("Type")],
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    checkbox = true;
+    public override checkbox = true;
 
-    async apiEndpoint(): Promise<PaginatedResponse<Connector>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Connector>> {
         return new EndpointsApi(DEFAULT_CONFIG).endpointsConnectorsList(
             await this.defaultEndpointConfig(),
         );
     }
 
-    row(item: Connector): SlottedTemplateResult[] {
+    protected override row(item: Connector): SlottedTemplateResult[] {
         return [
             html`<a href="#/endpoints/connectors/${item.connectorUuid}">${item.name}</a>`,
             item.verboseName,
@@ -54,17 +55,10 @@ export class ConnectorsListPage extends TablePage<Connector> {
     }
 
     protected override renderObjectCreate(): SlottedTemplateResult {
-        return html`<button
-            class="pf-c-button pf-m-primary"
-            type="button"
-            aria-description="${msg("Open the wizard to create a new connector.")}"
-            ${AKEndpointConnectorWizard.asModalInvoker()}
-        >
-            ${msg("New Connector")}
-        </button>`;
+        return ModalInvokerButton(AKEndpointConnectorWizard);
     }
 
-    protected override renderToolbarSelected() {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Connector(s)")}
diff --git a/web/src/admin/endpoints/connectors/agent/AgentConnectorForm.ts b/web/src/admin/endpoints/connectors/agent/AgentConnectorForm.ts
index 33a4ae0a9d04..45ee532c7079 100644
--- a/web/src/admin/endpoints/connectors/agent/AgentConnectorForm.ts
+++ b/web/src/admin/endpoints/connectors/agent/AgentConnectorForm.ts
@@ -89,11 +89,11 @@ export class AgentConnectorForm extends WithBrandConfig(ModelForm<AgentConnector
             <ak-form-group label="${msg("Authentication settings")}">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
-                        label=${msg("Authorization flow")}
+                        label=${msg("Authorization Flow")}
                         name="authorizationFlow"
                     >
                         <ak-flow-search
-                            label=${msg("Authorization flow")}
+                            label=${msg("Authorization Flow")}
                             flowType=${FlowDesignationEnum.Authorization}
                             .currentFlow=${this.instance?.authorizationFlow}
                         ></ak-flow-search>
diff --git a/web/src/admin/endpoints/devices/DeviceListPage.ts b/web/src/admin/endpoints/devices/DeviceListPage.ts
index fe36ea5d3718..3131ab2da071 100644
--- a/web/src/admin/endpoints/devices/DeviceListPage.ts
+++ b/web/src/admin/endpoints/devices/DeviceListPage.ts
@@ -21,13 +21,7 @@ import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 
 @customElement("ak-endpoints-device-list")
 export class DeviceListPage extends TablePage<EndpointDevice> {
-    public pageTitle = msg("Devices");
-    public pageDescription = "";
-    public pageIcon = "fa fa-laptop";
-
-    checkbox = true;
-
-    static styles: CSSResult[] = [
+    public static styles: CSSResult[] = [
         ...super.styles,
         PFGrid,
         PFBanner,
@@ -37,6 +31,13 @@ export class DeviceListPage extends TablePage<EndpointDevice> {
             }
         `,
     ];
+    public override pageTitle = msg("Devices");
+    public override pageDescription = "";
+    public override pageIcon = "fa fa-laptop";
+
+    public override checkbox = true;
+
+    public override searchPlaceholder = msg("Search devices by name, OS, or group...");
 
     protected searchEnabled: boolean = true;
     protected columns: TableColumn[] = [
diff --git a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
index d1c1450da495..6a0bf437e31d 100644
--- a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
@@ -29,8 +29,8 @@ import {
 } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { css, CSSResult, html, nothing, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResult, html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
 
 import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -40,27 +40,7 @@ import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 
 @customElement("ak-enterprise-license-list")
 export class EnterpriseLicenseListPage extends TablePage<License> {
-    checkbox = true;
-    clearOnRefresh = true;
-
-    protected override searchEnabled = true;
-    public pageTitle = msg("Licenses");
-    public pageDescription = msg("Manage enterprise licenses");
-    public pageIcon = "pf-icon pf-icon-key";
-
-    @property()
-    order = "name";
-
-    @state()
-    forecast?: LicenseForecast;
-
-    @state()
-    summary?: LicenseSummary;
-
-    @state()
-    installID?: string;
-
-    static styles: CSSResult[] = [
+    public static styles: CSSResult[] = [
         ...super.styles,
         PFGrid,
         PFBanner,
@@ -77,6 +57,25 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
         `,
     ];
 
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+
+    protected override searchEnabled = true;
+    public override pageTitle = msg("Licenses");
+    public override pageDescription = msg("Manage enterprise licenses");
+    public override pageIcon = "pf-icon pf-icon-key";
+    public override searchPlaceholder = msg("Search for a license by name...");
+    public override order = "name";
+
+    @state()
+    protected forecast?: LicenseForecast;
+
+    @state()
+    protected summary?: LicenseSummary;
+
+    @state()
+    protected installID?: string;
+
     async apiEndpoint(): Promise<PaginatedResponse<License>> {
         this.forecast = await new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseForecastRetrieve();
         this.summary = await new EnterpriseApi(DEFAULT_CONFIG).enterpriseLicenseSummaryRetrieve({
@@ -99,7 +98,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
 
     // TODO: Make this more generic, maybe automatically get the plural name
     // of the object to use in the renderEmpty
-    renderEmpty(inner?: TemplateResult): SlottedTemplateResult {
+    protected override renderEmpty(inner?: SlottedTemplateResult): SlottedTemplateResult {
         return super.renderEmpty(html`
             ${inner
                 ? inner
@@ -113,7 +112,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
         `);
     }
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("License(s)")}
@@ -141,7 +140,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderSectionBefore(): TemplateResult {
+    protected override renderSectionBefore(): SlottedTemplateResult {
         const {
             externalUsers = 0,
             internalUsers = 0,
@@ -234,7 +233,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
         ];
     }
 
-    renderGetLicenseCard() {
+    protected renderGetLicenseCard() {
         const renderSpinner = () =>
             html` <div class="pf-c-card__body">
                 <ak-spinner></ak-spinner>
diff --git a/web/src/admin/events/RuleListPage.ts b/web/src/admin/events/RuleListPage.ts
index 14054e995e13..43bef45f1bf6 100644
--- a/web/src/admin/events/RuleListPage.ts
+++ b/web/src/admin/events/RuleListPage.ts
@@ -29,6 +29,9 @@ export class RuleListPage extends TablePage<NotificationRule> {
     public override expandable = true;
     public override checkbox = true;
     public override clearOnRefresh = true;
+    public override searchPlaceholder = msg(
+        "Search for a notification rule by name, severity or group...",
+    );
 
     protected override searchEnabled = true;
     public pageTitle = msg("Notification Rules");
diff --git a/web/src/admin/events/TransportListPage.ts b/web/src/admin/events/TransportListPage.ts
index 27977efe226b..8cd1ad7bf8bb 100644
--- a/web/src/admin/events/TransportListPage.ts
+++ b/web/src/admin/events/TransportListPage.ts
@@ -34,6 +34,9 @@ export class TransportListPage extends TablePage<NotificationTransport> {
     public override checkbox = true;
     public override clearOnRefresh = true;
     public override expandable = true;
+    public override searchPlaceholder = msg(
+        "Search for a notification transport by name or mode...",
+    );
 
     public override order = "name";
 
diff --git a/web/src/admin/files/FileListPage.ts b/web/src/admin/files/FileListPage.ts
index 3d0ecb5fe7e0..35ff0762cb34 100644
--- a/web/src/admin/files/FileListPage.ts
+++ b/web/src/admin/files/FileListPage.ts
@@ -37,6 +37,7 @@ export class FileListPage extends WithCapabilitiesConfig(TablePage<FileItem>) {
     public override pageTitle = msg("Files");
     public override pageDescription = msg("Manage uploaded files.");
     public override pageIcon = "pf-icon pf-icon-folder-open";
+    public override searchPlaceholder = msg("Search for a file by name...");
 
     @property({ type: String, useDefault: true })
     public order: FileListOrderKey = "name";
diff --git a/web/src/admin/flows/FlowForm.ts b/web/src/admin/flows/FlowForm.ts
index 77cf80607ba4..ee45e937c03f 100644
--- a/web/src/admin/flows/FlowForm.ts
+++ b/web/src/admin/flows/FlowForm.ts
@@ -11,6 +11,8 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { ModelForm } from "#elements/forms/ModelForm";
 import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 
+import { AKLabel } from "#components/ak-label";
+
 import { DesignationToLabel, LayoutToLabel } from "#admin/flows/utils";
 import { policyEngineModes } from "#admin/policies/PolicyEngineModes";
 
@@ -89,15 +91,28 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
             <ak-slug-input
                 name="slug"
                 value=${ifDefined(this.instance?.slug)}
+                placeholder=${msg("e.g. my-flow")}
                 label=${msg("Slug")}
                 required
                 help=${msg("Visible in the URL.")}
                 input-hint="code"
             ></ak-slug-input>
 
-            <ak-form-element-horizontal label=${msg("Designation")} required name="designation">
-                <select class="pf-c-form-control">
-                    <option value="" ?selected=${!this.instance?.designation}>---------</option>
+            <ak-form-element-horizontal required name="designation">
+                ${AKLabel(
+                    {
+                        slot: "label",
+                        className: "pf-c-form__group-label",
+                        htmlFor: "designation",
+                        required: true,
+                    },
+                    msg("Designation"),
+                )}
+
+                <select id="designation" class="pf-c-form-control" required>
+                    <option value="" ?selected=${!this.instance?.designation}>
+                        ${msg("Select a designation...")}
+                    </option>
                     <option
                         value=${FlowDesignationEnum.Authentication}
                         ?selected=${this.instance?.designation ===
@@ -150,12 +165,18 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal
-                label=${msg("Authentication")}
-                required
-                name="authentication"
-            >
-                <select class="pf-c-form-control">
+            <ak-form-element-horizontal required name="authentication">
+                ${AKLabel(
+                    {
+                        slot: "label",
+                        className: "pf-c-form__group-label",
+                        htmlFor: "authentication",
+                        required: true,
+                    },
+                    msg("Authentication"),
+                )}
+
+                <select id="authentication" class="pf-c-form-control" required>
                     <option
                         value=${AuthenticationEnum.None}
                         ?selected=${this.instance?.authentication === AuthenticationEnum.None}
@@ -267,8 +288,17 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
             </ak-form-group>
             <ak-form-group label="${msg("Appearance settings")}">
                 <div class="pf-c-form">
-                    <ak-form-element-horizontal label=${msg("Layout")} required name="layout">
-                        <select class="pf-c-form-control">
+                    <ak-form-element-horizontal required name="layout">
+                        ${AKLabel(
+                            {
+                                slot: "label",
+                                className: "pf-c-form__group-label",
+                                htmlFor: "layout",
+                                required: true,
+                            },
+                            msg("Layout"),
+                        )}
+                        <select id="layout" class="pf-c-form-control" required>
                             <option
                                 value=${FlowLayoutEnum.Stacked}
                                 ?selected=${this.instance?.layout === FlowLayoutEnum.Stacked}
diff --git a/web/src/admin/flows/FlowListPage.ts b/web/src/admin/flows/FlowListPage.ts
index 49b431016cfd..a3a45d67fa19 100644
--- a/web/src/admin/flows/FlowListPage.ts
+++ b/web/src/admin/flows/FlowListPage.ts
@@ -31,7 +31,7 @@ export class FlowListPage extends TablePage<Flow> {
     static styles = [...super.styles, PFBanner];
 
     protected override searchEnabled = true;
-    public override searchPlaceholder = msg("Search for a flow by name or identifier");
+    public override searchPlaceholder = msg("Search for a flow by name or identifier...");
 
     public override pageTitle = msg("Flows");
     public override pageDescription = msg(
diff --git a/web/src/admin/groups/RelatedGroupList.ts b/web/src/admin/groups/RelatedGroupList.ts
index 1aa09c04ecfe..37dd799c9231 100644
--- a/web/src/admin/groups/RelatedGroupList.ts
+++ b/web/src/admin/groups/RelatedGroupList.ts
@@ -52,7 +52,7 @@ export class RelatedGroupAdd extends Form<{ groups: string[] }> {
         return renderModal(html`
             <ak-form
                 headline=${msg("Select Groups")}
-                action-label=${msg("Confirm")}
+                submit-label=${msg("Confirm")}
                 @submit=${(event: AKFormSubmitEvent<Group[]>) => {
                     this.groupsToAdd = event.target.toJSON();
                 }}
@@ -125,7 +125,7 @@ export class RelatedGroupList extends Table<Group> {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Group(s)")}
-            action-label=${msg("Remove from Group(s)")}
+            submit-label=${msg("Remove from Group(s)")}
             action-subtext=${msg(
                 str`Are you sure you want to remove user ${this.targetUser?.username} from the following groups?`,
             )}
diff --git a/web/src/admin/groups/RelatedUserList.ts b/web/src/admin/groups/RelatedUserList.ts
index 304149c879ff..7eb9c37764b6 100644
--- a/web/src/admin/groups/RelatedUserList.ts
+++ b/web/src/admin/groups/RelatedUserList.ts
@@ -99,7 +99,7 @@ export class AddRelatedUserForm extends Form<{ users: number[] }> {
         return renderModal(html`
             <ak-form
                 headline=${msg("Select users")}
-                action-label=${msg("Confirm")}
+                submit-label=${msg("Confirm")}
                 @submit=${(event: AKFormSubmitEvent<User[]>) => {
                     this.usersToAdd = event.target.toJSON();
                 }}
@@ -228,7 +228,7 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
 
         return html`<ak-forms-delete-bulk
             object-label=${msg("User(s)")}
-            action-label=${msg("Remove User(s)")}
+            submit-label=${msg("Remove User(s)")}
             action=${msg("removed")}
             action-subtext=${targetLabel
                 ? msg(str`Are you sure you want to remove the selected users from ${targetLabel}?`)
diff --git a/web/src/admin/lifecycle/LifecycleRuleListPage.ts b/web/src/admin/lifecycle/LifecycleRuleListPage.ts
index e3a7be96b278..bc5e03532877 100644
--- a/web/src/admin/lifecycle/LifecycleRuleListPage.ts
+++ b/web/src/admin/lifecycle/LifecycleRuleListPage.ts
@@ -29,7 +29,7 @@ export class LifecycleRuleListPage extends TablePage<LifecycleRule> {
     public override expandable = true;
     public override checkbox = true;
     public override clearOnRefresh = true;
-    public override searchPlaceholder = msg("Search for a lifecycle rule...");
+    public override searchPlaceholder = msg("Search for a lifecycle rule by name or target...");
     public override pageTitle = msg("Object Lifecycle Rules");
     public override pageDescription = msg("Schedule periodic reviews for objects in authentik.");
     public override pageIcon = "pf-icon pf-icon-history";
diff --git a/web/src/admin/outposts/OutpostListPage.ts b/web/src/admin/outposts/OutpostListPage.ts
index bfb596bf9181..39d496194987 100644
--- a/web/src/admin/outposts/OutpostListPage.ts
+++ b/web/src/admin/outposts/OutpostListPage.ts
@@ -27,7 +27,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
 export class OutpostListPage extends TablePage<Outpost> {
     protected override searchEnabled = true;
 
-    public override searchPlaceholder = msg("Search outposts...");
+    public override searchPlaceholder = msg(
+        "Search outposts by name, type or assigned integration...",
+    );
     public override pageTitle = msg("Outposts");
     public override pageDescription = msg(
         "Outposts are deployments of authentik components to support different environments and protocols, like reverse proxies.",
diff --git a/web/src/admin/outposts/ServiceConnectionListPage.ts b/web/src/admin/outposts/ServiceConnectionListPage.ts
index 3eac74f742a5..aab3647c3272 100644
--- a/web/src/admin/outposts/ServiceConnectionListPage.ts
+++ b/web/src/admin/outposts/ServiceConnectionListPage.ts
@@ -43,9 +43,12 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
     public pageIcon = "pf-icon pf-icon-integration";
     protected override searchEnabled = true;
 
-    checkbox = true;
-    expandable = true;
-    clearOnRefresh = true;
+    public override checkbox = true;
+    public override expandable = true;
+    public override clearOnRefresh = true;
+    public override searchPlaceholder = msg(
+        "Search for an outpost integration by name, type or assigned integration...",
+    );
 
     async apiEndpoint(): Promise<PaginatedResponse<ServiceConnection>> {
         const connections = await new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList(
diff --git a/web/src/admin/policies/PolicyListPage.ts b/web/src/admin/policies/PolicyListPage.ts
index 97446572f503..76b534865787 100644
--- a/web/src/admin/policies/PolicyListPage.ts
+++ b/web/src/admin/policies/PolicyListPage.ts
@@ -28,23 +28,24 @@ import { PolicyTestForm } from "#admin/policies/PolicyTestForm";
 import { ModelEnum, PoliciesApi, Policy } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-policy-list")
 export class PolicyListPage extends TablePage<Policy> {
     protected override searchEnabled = true;
-    public pageTitle = msg("Policies");
-    public pageDescription = msg(
+
+    public override pageTitle = msg("Policies");
+    public override pageDescription = msg(
         "Allow users to use Applications based on properties, enforce Password Criteria and selectively apply Stages.",
     );
-    public pageIcon = "pf-icon pf-icon-infrastructure";
+    public override pageIcon = "pf-icon pf-icon-infrastructure";
 
-    checkbox = true;
-    clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for a policy by name or type...");
 
-    @property()
-    order = "name";
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override order = "name";
 
     async apiEndpoint(): Promise<PaginatedResponse<Policy>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesAllList(await this.defaultEndpointConfig());
@@ -57,7 +58,7 @@ export class PolicyListPage extends TablePage<Policy> {
         [msg("Actions")],
     ];
 
-    row(item: Policy): SlottedTemplateResult[] {
+    protected override row(item: Policy): SlottedTemplateResult[] {
         return [
             html`<div>${item.name}</div>
                 ${(item.boundTo || 0) > 0
@@ -93,7 +94,7 @@ export class PolicyListPage extends TablePage<Policy> {
         ];
     }
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Policy / Policies")}
@@ -128,8 +129,8 @@ export class PolicyListPage extends TablePage<Policy> {
         `;
     }
 
-    renderToolbar(): TemplateResult {
-        return html` ${super.renderToolbar()}
+    protected override renderToolbar(): SlottedTemplateResult {
+        return html`${super.renderToolbar()}
             <ak-forms-confirm
                 successMessage=${msg("Successfully cleared policy cache")}
                 errorMessage=${msg("Failed to delete policy cache")}
diff --git a/web/src/admin/policies/reputation/ReputationListPage.ts b/web/src/admin/policies/reputation/ReputationListPage.ts
index 1a0f815ed135..046c353deaa4 100644
--- a/web/src/admin/policies/reputation/ReputationListPage.ts
+++ b/web/src/admin/policies/reputation/ReputationListPage.ts
@@ -15,25 +15,24 @@ import { ModelEnum, PoliciesApi, Reputation } from "@goauthentik/api";
 import getUnicodeFlagIcon from "country-flag-icons/unicode";
 
 import { msg } from "@lit/localize";
-import { html, nothing, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("ak-policy-reputation-list")
 export class ReputationListPage extends TablePage<Reputation> {
     protected override searchEnabled = true;
-    public pageTitle = msg("Reputation scores");
-    public pageDescription = msg(
+
+    public override pageTitle = msg("Reputation scores");
+    public override pageDescription = msg(
         "Reputation for IP and user identifiers. Scores are decreased for each failed login and increased for each successful login.",
     );
-    public pageIcon = "fa fa-ban";
-
-    @property()
-    order = "identifier";
-
-    checkbox = true;
-    clearOnRefresh = true;
+    public override pageIcon = "fa fa-ban";
+    public override order = "identifier";
+    public override checkbox = true;
+    public override clearOnRefresh = true;
+    public override searchPlaceholder = msg("Search for a reputation by identifier or IP...");
 
-    async apiEndpoint(): Promise<PaginatedResponse<Reputation>> {
+    protected override async apiEndpoint(): Promise<PaginatedResponse<Reputation>> {
         return new PoliciesApi(DEFAULT_CONFIG).policiesReputationScoresList({
             ...(await this.defaultEndpointConfig()),
         });
@@ -51,7 +50,7 @@ export class ReputationListPage extends TablePage<Reputation> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    protected override renderToolbarSelected(): SlottedTemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Reputation")}
@@ -73,9 +72,9 @@ export class ReputationListPage extends TablePage<Reputation> {
         </ak-forms-delete-bulk>`;
     }
 
-    row(item: Reputation): SlottedTemplateResult[] {
+    protected override row(item: Reputation): SlottedTemplateResult[] {
         return [
-            html`${item.identifier}`,
+            item.identifier,
             html`${item.ipGeoData?.country
                 ? html` ${getUnicodeFlagIcon(item.ipGeoData.country)} `
                 : nothing}
diff --git a/web/src/admin/property-mappings/PropertyMappingListPage.ts b/web/src/admin/property-mappings/PropertyMappingListPage.ts
index 9575568ab0b4..a00cd3391d7d 100644
--- a/web/src/admin/property-mappings/PropertyMappingListPage.ts
+++ b/web/src/admin/property-mappings/PropertyMappingListPage.ts
@@ -46,6 +46,7 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
         "Control how authentik exposes and interprets information.",
     );
     public override pageIcon = "pf-icon pf-icon-blueprint";
+    public override searchPlaceholder = msg("Search for a property mapping by name or type...");
 
     public override checkbox = true;
     public override clearOnRefresh = true;
diff --git a/web/src/admin/providers/ProviderListPage.ts b/web/src/admin/providers/ProviderListPage.ts
index fdc4d9a0c7fd..4d48de03933c 100644
--- a/web/src/admin/providers/ProviderListPage.ts
+++ b/web/src/admin/providers/ProviderListPage.ts
@@ -49,7 +49,7 @@ export class ProviderListPage extends TablePage<Provider> {
     public order = "name";
 
     public searchLabel = msg("Provider Search");
-    public searchPlaceholder = msg("Search for providers…");
+    public searchPlaceholder = msg("Search for provider by name, type or assigned application...");
 
     override async apiEndpoint(): Promise<PaginatedResponse<Provider>> {
         return new ProvidersApi(DEFAULT_CONFIG).providersAllList(
diff --git a/web/src/admin/providers/ldap/LDAPProviderFormForm.ts b/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
index 814862d008aa..237967811f16 100644
--- a/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
+++ b/web/src/admin/providers/ldap/LDAPProviderFormForm.ts
@@ -58,7 +58,7 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
             required
         ></ak-text-input>
         <ak-radio-input
-            label=${msg("Bind mode")}
+            label=${msg("Bind Mode")}
             name="bindMode"
             .options=${bindModeOptions}
             .value=${provider.bindMode}
@@ -67,7 +67,7 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
         </ak-radio-input>
 
         <ak-radio-input
-            label=${msg("Search mode")}
+            label=${msg("Search Mode")}
             name="searchMode"
             .options=${searchModeOptions}
             .value=${provider.searchMode}
@@ -86,13 +86,13 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
         <ak-form-group open label="${msg("Flow settings")}">
             <div class="pf-c-form">
                 <ak-form-element-horizontal
-                    label=${msg("Bind flow")}
+                    label=${msg("Bind Flow")}
                     required
                     name="authorizationFlow"
                     .errorMessages=${errors.authorizationFlow}
                 >
                     <ak-branded-flow-search
-                        label=${msg("Bind flow")}
+                        label=${msg("Bind Flow")}
                         flowType=${FlowDesignationEnum.Authentication}
                         .currentFlow=${provider.authorizationFlow}
                         .brandFlow=${brand?.flowAuthentication}
@@ -104,7 +104,7 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
                 </ak-form-element-horizontal>
 
                 <ak-form-element-horizontal
-                    label=${msg("Unbind flow")}
+                    label=${msg("Unbind Flow")}
                     name="invalidationFlow"
                     required
                 >
@@ -152,7 +152,7 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
                 </ak-form-element-horizontal>
 
                 <ak-text-input
-                    label=${msg("TLS Server name")}
+                    label=${msg("TLS Server Name")}
                     name="tlsServerName"
                     value="${provider.tlsServerName ?? ""}"
                     .errorMessages=${errors.tlsServerName}
@@ -161,7 +161,7 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
                 ></ak-text-input>
 
                 <ak-number-input
-                    label=${msg("UID start number")}
+                    label=${msg("UID Start Number")}
                     required
                     name="uidStartNumber"
                     value="${provider.uidStartNumber ?? 2000}"
@@ -170,7 +170,7 @@ export function renderForm({ provider, errors = {}, brand }: LDAPProviderFormPro
                 ></ak-number-input>
 
                 <ak-number-input
-                    label=${msg("GID start number")}
+                    label=${msg("GID Start Number")}
                     required
                     name="gidStartNumber"
                     value="${provider.gidStartNumber ?? 4000}"
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
index e483a3ef0b85..7ad1081425e6 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderFormForm.ts
@@ -171,12 +171,12 @@ export function renderForm({
                     htmlFor: "authorizationFlow",
                     required: true,
                 },
-                msg("Authorization flow"),
+                msg("Authorization Flow"),
             )}
 
             <ak-flow-search
                 id="authorizationFlow"
-                label=${msg("Authorization flow")}
+                label=${msg("Authorization Flow")}
                 placeholder=${msg("Select an authorization flow...")}
                 flowType=${FlowDesignationEnum.Authorization}
                 .currentFlow=${provider.authorizationFlow}
@@ -191,7 +191,7 @@ export function renderForm({
             <div class="pf-c-form">
                 <ak-radio-input
                     name="clientType"
-                    label=${msg("Client type")}
+                    label=${msg("Client Type")}
                     .value=${provider.clientType}
                     required
                     @change=${(ev: CustomEvent<{ value: ClientTypeEnum }>) => {
@@ -291,10 +291,10 @@ export function renderForm({
             <div class="pf-c-form">
                 <ak-form-element-horizontal
                     name="authenticationFlow"
-                    label=${msg("Authentication flow")}
+                    label=${msg("Authentication Flow")}
                 >
                     <ak-flow-search
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         placeholder=${msg("Select an authentication flow...")}
                         flowType=${FlowDesignationEnum.Authentication}
                         .currentFlow=${provider.authenticationFlow}
@@ -306,12 +306,12 @@ export function renderForm({
                     </p>
                 </ak-form-element-horizontal>
                 <ak-form-element-horizontal
-                    label=${msg("Invalidation flow")}
+                    label=${msg("Invalidation Flow")}
                     name="invalidationFlow"
                     required
                 >
                     <ak-flow-search
-                        label=${msg("Invalidation flow")}
+                        label=${msg("Invalidation Flow")}
                         placeholder=${msg("Select an invalidation flow...")}
                         flowType=${FlowDesignationEnum.Invalidation}
                         .currentFlow=${provider.invalidationFlow}
@@ -329,7 +329,7 @@ export function renderForm({
             <div class="pf-c-form">
                 <ak-text-input
                     name="accessCodeValidity"
-                    label=${msg("Access code validity")}
+                    label=${msg("Access Code Validity")}
                     input-hint="code"
                     required
                     value="${provider.accessCodeValidity ?? "minutes=1"}"
@@ -341,7 +341,7 @@ export function renderForm({
                 </ak-text-input>
                 <ak-text-input
                     name="accessTokenValidity"
-                    label=${msg("Access Token validity")}
+                    label=${msg("Access Token Validity")}
                     value="${provider.accessTokenValidity ?? "minutes=5"}"
                     input-hint="code"
                     required
@@ -354,7 +354,7 @@ export function renderForm({
 
                 <ak-text-input
                     name="refreshTokenValidity"
-                    label=${msg("Refresh Token validity")}
+                    label=${msg("Refresh Token Validity")}
                     value="${provider.refreshTokenValidity ?? "days=30"}"
                     input-hint="code"
                     required
@@ -366,7 +366,7 @@ export function renderForm({
                 </ak-text-input>
                 <ak-text-input
                     name="refreshTokenThreshold"
-                    label=${msg("Refresh Token threshold")}
+                    label=${msg("Refresh Token Threshold")}
                     value="${provider?.refreshTokenThreshold ?? "hours=1"}"
                     input-hint="code"
                     required
@@ -411,7 +411,7 @@ export function renderForm({
 
                 <ak-radio-input
                     name="subMode"
-                    label=${msg("Subject mode")}
+                    label=${msg("Subject Mode")}
                     required
                     .options=${subjectModeOptions}
                     .value=${provider.subMode}
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
index b991940a45c9..28997684028d 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
@@ -214,7 +214,7 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 html`<ak-provider-related-application .provider=${this.provider}>
                                 </ak-provider-related-application>`,
                             ],
-                            [msg("Client type"), html`${TypeToLabel(this.provider?.clientType)}`],
+                            [msg("Client Type"), html`${TypeToLabel(this.provider?.clientType)}`],
                             [msg("Client ID"), html`${this.provider?.clientId}`],
                             [
                                 msg("Redirect URIs"),
diff --git a/web/src/admin/providers/proxy/ProxyProviderFormForm.ts b/web/src/admin/providers/proxy/ProxyProviderFormForm.ts
index 4c624b01775f..49e5ab5f7177 100644
--- a/web/src/admin/providers/proxy/ProxyProviderFormForm.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderFormForm.ts
@@ -220,7 +220,7 @@ export function renderForm({ provider = {}, errors = {}, args }: ProxyProviderFo
         ></ak-text-input>
 
         <ak-form-element-horizontal
-            label=${msg("Authorization flow")}
+            label=${msg("Authorization Flow")}
             required
             name="authorizationFlow"
         >
@@ -355,7 +355,7 @@ ${provider.skipPathRegex}</textarea
         <ak-form-group label="${msg("Advanced flow settings")}">
             <div class="pf-c-form">
                 <ak-form-element-horizontal
-                    label=${msg("Authentication flow")}
+                    label=${msg("Authentication Flow")}
                     name="authenticationFlow"
                 >
                     <ak-flow-search
@@ -369,7 +369,7 @@ ${provider.skipPathRegex}</textarea
                     </p>
                 </ak-form-element-horizontal>
                 <ak-form-element-horizontal
-                    label=${msg("Invalidation flow")}
+                    label=${msg("Invalidation Flow")}
                     name="invalidationFlow"
                     required
                 >
diff --git a/web/src/admin/providers/rac/RACProviderForm.ts b/web/src/admin/providers/rac/RACProviderForm.ts
index 86d86fe9cc92..d1e559312211 100644
--- a/web/src/admin/providers/rac/RACProviderForm.ts
+++ b/web/src/admin/providers/rac/RACProviderForm.ts
@@ -67,7 +67,7 @@ export class RACProviderFormPage extends ModelForm<RACProvider, number> {
 
             <ak-form-element-horizontal
                 name="authorizationFlow"
-                label=${msg("Authorization flow")}
+                label=${msg("Authorization Flow")}
                 required
             >
                 <ak-flow-search
diff --git a/web/src/admin/providers/radius/RadiusProviderFormForm.ts b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
index 70e5aba6e81e..cd59e22c2197 100644
--- a/web/src/admin/providers/radius/RadiusProviderFormForm.ts
+++ b/web/src/admin/providers/radius/RadiusProviderFormForm.ts
@@ -65,13 +65,13 @@ export function renderForm({ provider, errors, brand }: RADIUSProviderFormProps)
         </ak-text-input>
 
         <ak-form-element-horizontal
-            label=${msg("Authentication flow")}
+            label=${msg("Authentication Flow")}
             required
             name="authorizationFlow"
             .errorMessages=${errors.authorizationFlow}
         >
             <ak-branded-flow-search
-                label=${msg("Authentication flow")}
+                label=${msg("Authentication Flow")}
                 placeholder=${msg("Select an authentication flow...")}
                 flowType=${FlowDesignationEnum.Authentication}
                 .currentFlow=${provider.authorizationFlow}
@@ -135,12 +135,12 @@ export function renderForm({ provider, errors, brand }: RADIUSProviderFormProps)
         <ak-form-group label="${msg("Advanced flow settings")}">
             <div class="pf-c-form">
                 <ak-form-element-horizontal
-                    label=${msg("Invalidation flow")}
+                    label=${msg("Invalidation Flow")}
                     name="invalidationFlow"
                     required
                 >
                     <ak-flow-search
-                        label=${msg("Invalidation flow")}
+                        label=${msg("Invalidation Flow")}
                         placeholder=${msg("Select an invalidation flow...")}
                         flowType=${FlowDesignationEnum.Invalidation}
                         .currentFlow=${provider.invalidationFlow}
diff --git a/web/src/admin/providers/saml/SAMLProviderFormForm.ts b/web/src/admin/providers/saml/SAMLProviderFormForm.ts
index 7b13af81fe7c..0b5bd502a9db 100644
--- a/web/src/admin/providers/saml/SAMLProviderFormForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderFormForm.ts
@@ -170,7 +170,7 @@ export function renderForm({
         ></ak-text-input>
         <ak-form-element-horizontal
             name="authorizationFlow"
-            label=${msg("Authorization flow")}
+            label=${msg("Authorization Flow")}
             required
         >
             <ak-flow-search
@@ -242,7 +242,7 @@ export function renderForm({
         <ak-form-group label="${msg("Advanced flow settings")}">
             <div class="pf-c-form">
                 <ak-form-element-horizontal
-                    label=${msg("Authentication flow")}
+                    label=${msg("Authentication Flow")}
                     name="authenticationFlow"
                 >
                     <ak-flow-search
@@ -256,7 +256,7 @@ export function renderForm({
                     </p>
                 </ak-form-element-horizontal>
                 <ak-form-element-horizontal
-                    label=${msg("Invalidation flow")}
+                    label=${msg("Invalidation Flow")}
                     name="invalidationFlow"
                     required
                 >
diff --git a/web/src/admin/providers/saml/SAMLProviderImportFormForm.ts b/web/src/admin/providers/saml/SAMLProviderImportFormForm.ts
index 4e1b88f8fe29..b92d2c60d26b 100644
--- a/web/src/admin/providers/saml/SAMLProviderImportFormForm.ts
+++ b/web/src/admin/providers/saml/SAMLProviderImportFormForm.ts
@@ -14,13 +14,15 @@ export function renderForm(provider: Partial<ProvidersSamlImportMetadataCreateRe
     return html`
         <ak-text-input
             name="name"
-            label=${msg("Name")}
-            .value=${provider.name ?? ""}
+            label=${msg("Provider Name")}
+            placeholder=${msg("Type a provider name...")}
+            spellcheck="false"
+            value=${provider.name ?? ""}
             required
         ></ak-text-input>
 
         <ak-form-element-horizontal
-            label=${msg("Authorization flow")}
+            label=${msg("Authorization Flow")}
             required
             name="authorizationFlow"
         >
@@ -34,7 +36,7 @@ export function renderForm(provider: Partial<ProvidersSamlImportMetadataCreateRe
         </ak-form-element-horizontal>
 
         <ak-form-element-horizontal
-            label=${msg("Invalidation flow")}
+            label=${msg("Invalidation Flow")}
             required
             name="invalidationFlow"
         >
diff --git a/web/src/admin/providers/wsfed/WSFederationProviderFormForm.ts b/web/src/admin/providers/wsfed/WSFederationProviderFormForm.ts
index 18d7e586d413..20d6e9c41c8a 100644
--- a/web/src/admin/providers/wsfed/WSFederationProviderFormForm.ts
+++ b/web/src/admin/providers/wsfed/WSFederationProviderFormForm.ts
@@ -99,7 +99,7 @@ export function renderForm({
         ></ak-text-input>
         <ak-form-element-horizontal
             name="authorizationFlow"
-            label=${msg("Authorization flow")}
+            label=${msg("Authorization Flow")}
             required
         >
             <ak-flow-search
@@ -139,7 +139,7 @@ export function renderForm({
         <ak-form-group label="${msg("Advanced flow settings")}">
             <div class="pf-c-form">
                 <ak-form-element-horizontal
-                    label=${msg("Authentication flow")}
+                    label=${msg("Authentication Flow")}
                     name="authenticationFlow"
                 >
                     <ak-flow-search
@@ -153,7 +153,7 @@ export function renderForm({
                     </p>
                 </ak-form-element-horizontal>
                 <ak-form-element-horizontal
-                    label=${msg("Invalidation flow")}
+                    label=${msg("Invalidation Flow")}
                     name="invalidationFlow"
                     required
                 >
diff --git a/web/src/admin/roles/ak-related-role-table.ts b/web/src/admin/roles/ak-related-role-table.ts
index 8f3c5534d2b9..f3a1f63dc586 100644
--- a/web/src/admin/roles/ak-related-role-table.ts
+++ b/web/src/admin/roles/ak-related-role-table.ts
@@ -61,7 +61,7 @@ export class AddRelatedRoleForm extends Form<{ roles: string[] }> {
         return renderModal(html`
             <ak-form
                 headline=${msg("Assign Additional Roles")}
-                action-label=${msg("Confirm")}
+                submit-label=${msg("Confirm")}
                 @submit=${(event: AKFormSubmitEvent<Role[]>) => {
                     this.rolesToAdd = event.target.toJSON();
                 }}
@@ -181,7 +181,7 @@ export class RelatedRoleTable extends Table<Role> {
         const disabled = !this.selectedElements.length;
         return html`<ak-forms-delete-bulk
             object-label=${msg("Role(s)")}
-            action-label=${msg("Remove from Role(s)")}
+            submit-label=${msg("Remove from Role(s)")}
             action-subtext=${msg(
                 str`Are you sure you want to remove user ${this.targetUser?.username} from the following roles?`,
             )}
diff --git a/web/src/admin/roles/ak-role-permission-form.ts b/web/src/admin/roles/ak-role-permission-form.ts
index a1fea44fa7ee..0d0c8fd1af08 100644
--- a/web/src/admin/roles/ak-role-permission-form.ts
+++ b/web/src/admin/roles/ak-role-permission-form.ts
@@ -61,7 +61,7 @@ export class RolePermissionForm extends ModelForm<RolePermissionAssign, number>
         return renderModal(
             html`<ak-form
                 headline=${msg("Select permissions to assign")}
-                action-label=${msg("Confirm")}
+                submit-label=${msg("Confirm")}
                 @submit=${(event: AKFormSubmitEvent<Permission[]>) => {
                     this.permissionsToAdd = event.target.toJSON();
                 }}
diff --git a/web/src/admin/sources/kerberos/KerberosSourceForm.ts b/web/src/admin/sources/kerberos/KerberosSourceForm.ts
index 33bccf200272..3aaef2eda5db 100644
--- a/web/src/admin/sources/kerberos/KerberosSourceForm.ts
+++ b/web/src/admin/sources/kerberos/KerberosSourceForm.ts
@@ -352,7 +352,7 @@ export class KerberosSourceForm extends BaseSourceForm<KerberosSource> {
             <ak-form-group label="${msg("Flow settings")}">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         name="authenticationFlow"
                     >
                         <ak-source-flow-search
diff --git a/web/src/admin/sources/oauth/OAuthSourceForm.ts b/web/src/admin/sources/oauth/OAuthSourceForm.ts
index 704d54ccf29d..0702e2dfab20 100644
--- a/web/src/admin/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts
@@ -471,7 +471,7 @@ export class OAuthSourceForm extends BaseSourceForm<OAuthSource> {
             <ak-form-group label="${msg("Flow settings")}">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         name="authenticationFlow"
                     >
                         <ak-source-flow-search
diff --git a/web/src/admin/sources/plex/PlexSourceForm.ts b/web/src/admin/sources/plex/PlexSourceForm.ts
index 8f6411286a3b..25bce462c037 100644
--- a/web/src/admin/sources/plex/PlexSourceForm.ts
+++ b/web/src/admin/sources/plex/PlexSourceForm.ts
@@ -275,7 +275,7 @@ export class PlexSourceForm extends BaseSourceForm<PlexSource> {
             <ak-form-group label="${msg("Flow settings")}">
                 <div class="pf-c-form">
                     <ak-form-element-horizontal
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         name="authenticationFlow"
                     >
                         <ak-source-flow-search
diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts
index 0f9f3e23149d..4a3fd7f9bbff 100644
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@@ -511,7 +511,7 @@ export class SAMLSourceForm extends BaseSourceForm<SAMLSource> {
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         name="authenticationFlow"
                     >
                         <ak-source-flow-search
diff --git a/web/src/admin/sources/telegram/TelegramSourceForm.ts b/web/src/admin/sources/telegram/TelegramSourceForm.ts
index e747a2c29ea8..e012a5460af6 100644
--- a/web/src/admin/sources/telegram/TelegramSourceForm.ts
+++ b/web/src/admin/sources/telegram/TelegramSourceForm.ts
@@ -161,7 +161,7 @@ export class TelegramSourceForm extends BaseSourceForm<TelegramSource> {
                         </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
-                        label=${msg("Authentication flow")}
+                        label=${msg("Authentication Flow")}
                         name="authenticationFlow"
                     >
                         <ak-source-flow-search
diff --git a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
index 174ab9cc8bb3..d30210b3820c 100644
--- a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
+++ b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
@@ -33,6 +33,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
     public static override submitVerb = msg("Import");
     public static override modifierLabel = msg("Import");
     public static override saveLabel = msg("Import");
+    public static override submittingVerb = msg("Importing");
 
     loadInstance(pk: string): Promise<AuthenticatorDuoStage> {
         return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorDuoRetrieve({
diff --git a/web/src/admin/stages/prompt/PromptListPage.ts b/web/src/admin/stages/prompt/PromptListPage.ts
index 80721c8745a0..4d09ac85cf9c 100644
--- a/web/src/admin/stages/prompt/PromptListPage.ts
+++ b/web/src/admin/stages/prompt/PromptListPage.ts
@@ -26,7 +26,7 @@ import { customElement } from "lit/decorators.js";
 @customElement("ak-stage-prompt-list")
 export class PromptListPage extends TablePage<Prompt> {
     protected override searchEnabled = true;
-    public override searchPlaceholder = msg("Search for a prompt...");
+    public override searchPlaceholder = msg("Search for a prompt by name, field or type...");
 
     public override pageTitle = msg("Prompts");
     public override pageDescription = msg("Single Prompts that can be used for Prompt Stages.");
diff --git a/web/src/admin/users/UserListPage.ts b/web/src/admin/users/UserListPage.ts
index e6da7b238db5..213a783c3ae5 100644
--- a/web/src/admin/users/UserListPage.ts
+++ b/web/src/admin/users/UserListPage.ts
@@ -26,6 +26,7 @@ import { WithSession } from "#elements/mixins/session";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
+import { SlottedTemplateResult } from "#elements/types";
 
 import { AKUserWizard } from "#admin/users/ak-user-wizard";
 import { RecoveryButtons } from "#admin/users/recovery";
@@ -95,10 +96,10 @@ export class UserListPage extends WithBrandConfig(
     public activePath: string;
 
     @state()
-    hideDeactivated = getURLParam<boolean>("hideDeactivated", false);
+    protected hideDeactivated = getURLParam<boolean>("hideDeactivated", false);
 
     @state()
-    userPaths?: UserPath;
+    protected userPaths: UserPath | null = null;
 
     constructor() {
         super();
@@ -144,7 +145,7 @@ export class UserListPage extends WithBrandConfig(
     }
 
     protected columns: TableColumn[] = [
-        ["", undefined, msg("Avatar")],
+        ["", null, msg("Avatar")],
         [msg("Name"), "username"],
         [msg("Active"), "is_active"],
         [msg("Last login"), "last_login"],
@@ -347,28 +348,24 @@ export class UserListPage extends WithBrandConfig(
     };
 
     protected renderObjectCreate(): SlottedTemplateResult {
-        const defaultPath = this.uiConfig.defaults.userPath;
+        const { activePath } = this;
 
-        return guard([defaultPath], () => {
+        return guard([activePath], () => {
             return [
-                html`
-                    <button
-                        class="pf-c-button pf-m-primary"
-                        type="button"
-                        ${modalInvoker(AKUserWizard, {
-                            defaultPath,
-                        })}
-                        aria-description=${msg("Open the new user wizard")}
-                    >
-                        ${msg("New User")}
-                    </button>
-                `,
-                html`
-                    <ak-reports-export-button
-                        .createExport=${this.createExport}
-                        .exportParams=${this.buildExportParams}
-                    ></ak-reports-export-button>
-                `,
+                html`<button
+                    class="pf-c-button pf-m-primary"
+                    type="button"
+                    ${modalInvoker(AKUserWizard, {
+                        defaultPath: activePath,
+                    })}
+                    aria-description=${msg("Open the new user wizard")}
+                >
+                    ${msg("New User")}
+                </button> `,
+                html`<ak-reports-export-button
+                    .createExport=${this.createExport}
+                    .exportParams=${this.buildExportParams}
+                ></ak-reports-export-button> `,
             ];
         });
     }
diff --git a/web/src/components/HorizontalLightComponent.ts b/web/src/components/HorizontalLightComponent.ts
index 428ad537ec7d..d7255d9696c2 100644
--- a/web/src/components/HorizontalLightComponent.ts
+++ b/web/src/components/HorizontalLightComponent.ts
@@ -10,8 +10,9 @@ import { AKLabel } from "#components/ak-label";
 
 import { IDGenerator } from "@goauthentik/core/id";
 
-import { html, nothing, PropertyValues } from "lit";
+import { html, PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
 
 export interface HorizontalLightComponentProps<T> extends AKElementProps {
     name: string;
@@ -192,14 +193,18 @@ export abstract class HorizontalLightComponent<T>
     protected abstract renderControl(): SlottedTemplateResult;
 
     protected renderHelp(): SlottedTemplateResult | SlottedTemplateResult[] {
-        const bigHelp: SlottedTemplateResult[] = Array.isArray(this.bighelp)
-            ? this.bighelp
-            : [this.bighelp ?? nothing];
-
-        return [
-            this.help ? html`<p class="pf-c-form__helper-text">${this.help}</p>` : nothing,
-            ...bigHelp,
-        ];
+        const { help, bighelp } = this;
+
+        return guard([help, bighelp], () => {
+            const bigHelp: SlottedTemplateResult[] = Array.isArray(this.bighelp)
+                ? this.bighelp
+                : [this.bighelp ?? null];
+
+            return [
+                this.help ? html`<p class="pf-c-form__helper-text">${this.help}</p>` : null,
+                ...bigHelp,
+            ].filter(Boolean);
+        });
     }
 
     render() {
@@ -210,8 +215,7 @@ export abstract class HorizontalLightComponent<T>
             name=${this.name}
             role="presentation"
             .errorMessages=${this.errorMessages}
-        >
-            ${AKLabel(
+            >${AKLabel(
                 {
                     id: this.labelID,
                     className: "pf-c-form__group-label",
@@ -222,7 +226,7 @@ export abstract class HorizontalLightComponent<T>
                 this.label || "",
             )}
             ${this.renderControl()}
-            <div id=${this.helpID}>${this.renderHelp()}</div>
+            <div id=${this.helpID} part="help">${this.renderHelp()}</div>
         </ak-form-element-horizontal> `;
     }
 
diff --git a/web/src/components/ak-radio-input.ts b/web/src/components/ak-radio-input.ts
index a00f51bc94dd..d6e9f2332e2b 100644
--- a/web/src/components/ak-radio-input.ts
+++ b/web/src/components/ak-radio-input.ts
@@ -30,15 +30,26 @@ export class AkRadioInput<T extends Jsonifiable> extends HorizontalLightComponen
         return nothing;
     }
 
-    renderControl() {
+    protected override renderControl(): SlottedTemplateResult {
         const helpText = this.help?.trim();
 
-        return html`<ak-radio
+        return html`${helpText
+                ? html`<p
+                      part="radio-help"
+                      class="pf-c-form__helper-radio"
+                      id=${this.helpID}
+                      slot="label-end"
+                  >
+                      ${helpText}
+                  </p>`
+                : null}<ak-radio
                 .options=${this.options}
                 .value=${this.value}
                 @input=${this.handleInput}
-            ></ak-radio>
-            ${helpText ? html`<p class="pf-c-form__helper-radio">${helpText}</p>` : nothing}`;
+                aria-describedby=${this.help ? this.helpID : nothing}
+                part="radio"
+            >
+            </ak-radio>`;
     }
 }
 
diff --git a/web/src/components/ak-slug-input.ts b/web/src/components/ak-slug-input.ts
index db92f5b79144..6024be1c21bc 100644
--- a/web/src/components/ak-slug-input.ts
+++ b/web/src/components/ak-slug-input.ts
@@ -5,6 +5,7 @@ import { ifPresent } from "#elements/utils/attributes";
 
 import { kebabCase } from "change-case";
 
+import { msg } from "@lit/localize";
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -52,7 +53,7 @@ export class AkSlugInput extends HorizontalLightComponent<string> {
     private input!: HTMLInputElement;
 
     @property({ type: String })
-    public placeholder: string | null = null;
+    public placeholder: string | null = msg("e.g. my-slug");
 
     #origin?: HTMLInputElement | null;
 
diff --git a/web/src/components/ak-switch-input.ts b/web/src/components/ak-switch-input.ts
index 388ff52b0e8a..073da96f2992 100644
--- a/web/src/components/ak-switch-input.ts
+++ b/web/src/components/ak-switch-input.ts
@@ -62,9 +62,7 @@ export class AkSwitchInput extends AKElement {
     render() {
         const doCheck = this.checked ? this.checked : undefined;
 
-        return html` <ak-form-element-horizontal name=${this.name} ?required=${this.required}>
-            <div slot="label" class="pf-c-form__group-label"></div>
-
+        return html`<ak-form-element-horizontal name=${this.name} ?required=${this.required}>
             <label class="pf-c-switch" for="${this.#fieldID}">
                 <input
                     id="${this.#fieldID}"
diff --git a/web/src/components/ak-wizard/WizardStep.ts b/web/src/components/ak-wizard/WizardStep.ts
index 23f62d0d9159..7852462e5190 100644
--- a/web/src/components/ak-wizard/WizardStep.ts
+++ b/web/src/components/ak-wizard/WizardStep.ts
@@ -200,7 +200,15 @@ export abstract class WizardStep extends AKElement {
             throw new Error("Non-navigable button sent to handleNavigationEvent");
         }
 
-        if (button.kind === "next" && !this.reportValidity()) {
+        if (button.kind === "next" || button.kind === "finish") {
+            // Check and report form validation to the user before allowing navigation to proceed.
+            if (!this.reportValidity()) {
+                return;
+            }
+        }
+
+        if (button.kind === "finish") {
+            this.requestClose("finish");
             return;
         }
 
diff --git a/web/src/components/ak-wizard/shared.ts b/web/src/components/ak-wizard/shared.ts
index b0102ee30c69..bc38f4974630 100644
--- a/web/src/components/ak-wizard/shared.ts
+++ b/web/src/components/ak-wizard/shared.ts
@@ -11,7 +11,7 @@ export type WizardButton =
     | { kind: "create"; label?: string; destination: string }
     | { kind: "finish"; label?: string; destination: string };
 
-export const DialogDismissalKinds: ReadonlySet<ButtonKind> = new Set(["close", "cancel"]);
+export const DialogDismissalKinds: ReadonlySet<ButtonKind> = new Set(["close", "cancel", "finish"]);
 
 export type NavigableButton = Extract<WizardButton, { destination: string }>;
 
diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index 105048329cc2..36b8dee5d2ea 100644
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@@ -83,7 +83,7 @@ export class AKElement extends LitElement implements AKElementProps {
         return Array.from(elementSet).reverse().map(createCSSResult);
     }
 
-    protected static attachHostStyles(rootNode: ShadowRoot): void {
+    protected static attachHostStyles(rootNode: StyleRoot): void {
         const { hostStyleSheets } = this;
 
         if (!hostStyleSheets) return;
@@ -93,7 +93,7 @@ export class AKElement extends LitElement implements AKElementProps {
         });
     }
 
-    protected static detachHostStyles(rootNode: ShadowRoot): void {
+    protected static detachHostStyles(rootNode: StyleRoot): void {
         const { hostStyleSheets } = this;
 
         if (!hostStyleSheets) return;
@@ -157,7 +157,7 @@ export class AKElement extends LitElement implements AKElementProps {
 
         const rootNode = this.getRootNode();
 
-        if (rootNode instanceof ShadowRoot) {
+        if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
             (this.constructor as typeof AKElement).attachHostStyles(rootNode);
         }
     }
diff --git a/web/src/elements/LicenseNotice.ts b/web/src/elements/LicenseNotice.ts
index 26451d0313e8..a0753bc9686f 100644
--- a/web/src/elements/LicenseNotice.ts
+++ b/web/src/elements/LicenseNotice.ts
@@ -2,20 +2,29 @@ import "#elements/Alert";
 
 import { AKElement } from "#elements/Base";
 import { WithLicenseSummary } from "#elements/mixins/license";
+import { SlottedTemplateResult } from "#elements/types";
 
 import { msg } from "@lit/localize";
-import { html, nothing } from "lit";
+import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-license-notice")
 export class AKLicenceNotice extends WithLicenseSummary(AKElement) {
-    @property()
+    public static styles = [
+        css`
+            ::part(container) {
+                background-color: transparent;
+            }
+        `,
+    ];
+
+    @property({ type: String })
     public label = msg("Enterprise only");
 
-    @property()
+    @property({ type: String })
     public description = msg("Learn more about the enterprise license.");
 
-    render() {
+    protected override render(): SlottedTemplateResult {
         if (this.hasEnterpriseLicense) {
             return nothing;
         }
diff --git a/web/src/elements/dialogs/ak-modal.ts b/web/src/elements/dialogs/ak-modal.ts
index 677b5bce25f6..eb54a98374d7 100644
--- a/web/src/elements/dialogs/ak-modal.ts
+++ b/web/src/elements/dialogs/ak-modal.ts
@@ -403,7 +403,11 @@ export class AKModal extends AKElement implements TransclusionParentElement {
 
         const modalTitleElement = this.modalTitleRef.value;
 
-        const label = modalTitleElement?.textContent?.trim() ?? ariaLabel ?? null;
+        let label = modalTitleElement?.textContent?.trim() ?? ariaLabel ?? null;
+
+        if (this.slottedElement) {
+            label ||= this.slottedElement.formatARIALabel?.() ?? null;
+        }
 
         dialogElement.ariaLabel = label;
     };
@@ -467,6 +471,12 @@ export class AKModal extends AKElement implements TransclusionParentElement {
                 return null;
             }
 
+            if (slottedElement && !slottedElement.renderHeader) {
+                // Slotted element is possibily nested, but does not implement a header render method,
+                // so we cannot render a header for it.
+                return null;
+            }
+
             const slottedHeader = slottedElement ? slottedElement.renderHeader?.(true) : null;
 
             const content =
@@ -500,6 +510,11 @@ export class AKModal extends AKElement implements TransclusionParentElement {
             if (!hasActionsSlot && !slottedElement) {
                 return null;
             }
+            if (slottedElement && !slottedElement.renderActions) {
+                // Slotted element is possibily nested, but does not implement an actions render method,
+                // so we cannot render actions for it.
+                return null;
+            }
 
             const cancelButton = slottedElement?.cancelable
                 ? html`<button
diff --git a/web/src/elements/dialogs/dialog.css b/web/src/elements/dialogs/dialog.css
index 3d9a814b43b9..42576de17e70 100644
--- a/web/src/elements/dialogs/dialog.css
+++ b/web/src/elements/dialogs/dialog.css
@@ -57,6 +57,9 @@
     border-width: var(--ak-c-dialog--BorderWidth);
     border-color: var(--ak-c-dialog--BorderColor);
 
+    transform: translate3d(0, 0, 0);
+    will-change: transform;
+
     &:focus-visible {
         outline: none;
     }
diff --git a/web/src/elements/dialogs/shared.ts b/web/src/elements/dialogs/shared.ts
index 87875429d94b..8783bb14e137 100644
--- a/web/src/elements/dialogs/shared.ts
+++ b/web/src/elements/dialogs/shared.ts
@@ -139,6 +139,8 @@ export interface TransclusionChildElement extends LitElement {
      * when this element is transcluded.
      */
     cancelable?: boolean;
+
+    formatARIALabel?(): string;
 }
 
 /**
diff --git a/web/src/elements/forms/DeleteBulkForm.ts b/web/src/elements/forms/DeleteBulkForm.ts
index 6ec6a2b20c40..f2827dbcb5ad 100644
--- a/web/src/elements/forms/DeleteBulkForm.ts
+++ b/web/src/elements/forms/DeleteBulkForm.ts
@@ -115,7 +115,7 @@ export class DeleteBulkForm<T> extends ModalButton {
     @property({ type: String, attribute: "object-label" })
     public objectLabel: string | null = null;
 
-    @property({ type: String, attribute: "action-label" })
+    @property({ type: String, attribute: "submit-label" })
     public submitLabel: string | null = null;
 
     @property({ type: String, attribute: "action-subtext" })
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 9779552ce53d..53a81bab89ae 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -138,6 +138,13 @@ export class Form<T = Record<string, unknown>, D = T>
         id: "form.submit.verb.create",
     });
 
+    /**
+     * The gerund to use in the message key for the submission message, e.g. "Creating" or "Updating".
+     */
+    public static submittingVerb: string = msg("Creating", {
+        id: "form.submit.verb.creating",
+    });
+
     //#region Modal helpers
 
     public [TransclusionChildSymbol] = true;
@@ -219,9 +226,17 @@ export class Form<T = Record<string, unknown>, D = T>
      * a default label will be generated based on `verboseName`,
      * falling back to "Create".
      */
-    @property({ type: String, attribute: "action-label", useDefault: true })
+    @property({ type: String, attribute: "submit-label", useDefault: true })
     public submitLabel: string | null = null;
 
+    /**
+     * The label for the submit button while the form is being submitted. If not provided,
+     * a default label will be generated based on `submittingVerb` and `verboseName`,
+     * falling back to "Submitting...".
+     */
+    @property({ type: String, attribute: "submitting-label", useDefault: true })
+    public submittingLabel: string | null = null;
+
     @property({ type: String, attribute: "cancel-label", useDefault: true })
     public cancelButtonLabel: string | null = msg("Cancel");
 
@@ -386,6 +401,22 @@ export class Form<T = Record<string, unknown>, D = T>
             : verb;
     }
 
+    /**
+     * An overridable method for formatting the message shown while the form is being submitted.
+     */
+    protected formatSubmittingLabel(submittingLabel = this.submittingLabel): string {
+        if (submittingLabel) {
+            return submittingLabel;
+        }
+
+        const { submittingVerb, verboseName } = this.constructor as typeof Form;
+
+        return msg(str`${submittingVerb} ${verboseName}...`, {
+            id: "form.submitting",
+            desc: "The message shown while a form is being submitted.",
+        });
+    }
+
     //#endregion
 
     //#region Public methods
@@ -467,6 +498,7 @@ export class Form<T = Record<string, unknown>, D = T>
             return Promise.resolve(false);
         }
 
+        const messageKey = `form-submission-${this.localName}-${Date.now()}`;
         let data: D;
 
         try {
@@ -478,6 +510,7 @@ export class Form<T = Record<string, unknown>, D = T>
                 level: MessageLevel.error,
                 message: msg("An unknown error occurred while submitting the form."),
                 description: pluckErrorDetail(error),
+                key: messageKey,
             });
 
             return Promise.resolve(false);
@@ -491,9 +524,23 @@ export class Form<T = Record<string, unknown>, D = T>
             return Promise.resolve(false);
         }
 
+        showMessage({
+            level: MessageLevel.info,
+            icon: "fas fa-spinner fa-spin",
+            message: this.formatSubmittingLabel(),
+            key: messageKey,
+        });
+
         return this.send(data)
             .then((response) => {
-                showMessage(this.formatAPISuccessMessage(response));
+                const successMessage = this.formatAPISuccessMessage(response);
+
+                if (successMessage) {
+                    showMessage({
+                        ...successMessage,
+                        key: messageKey,
+                    });
+                }
 
                 this.dispatchEvent(
                     new CustomEvent(EVENT_REFRESH, {
@@ -540,7 +587,15 @@ export class Form<T = Record<string, unknown>, D = T>
                             );
                         }
                     }
-                    showMessage(this.formatAPIErrorMessage(parsedError), true);
+
+                    const errorMessage = this.formatAPIErrorMessage(parsedError);
+
+                    if (errorMessage) {
+                        showMessage({
+                            ...errorMessage,
+                            key: messageKey,
+                        });
+                    }
                 }
 
                 // Rethrow the error so the form doesn't close.
diff --git a/web/src/elements/forms/FormGroup.css b/web/src/elements/forms/FormGroup.css
index eb4db876d632..6e6cc746ce6a 100644
--- a/web/src/elements/forms/FormGroup.css
+++ b/web/src/elements/forms/FormGroup.css
@@ -1,6 +1,6 @@
 :host([theme="dark"]) {
-    --marker-color: var(--pf-global--Color--300);
-    --marker-color-hover: var(--pf-global--Color--200);
+    --ak-c-form-group__marker--Color: var(--pf-global--Color--300);
+    --ak-c-form-group__marker--ColorHover: var(--pf-global--Color--200);
 
     details {
         @media (prefers-contrast: more) {
@@ -16,12 +16,21 @@ details {
     }
 
     &::details-content {
-        padding-inline-start: var(--pf-c-form__field-group--GridTemplateColumns--toggle);
+        padding-inline-start: calc(
+            var(--pf-global--spacer--lg) + var(--pf-global--spacer--form-element)
+        );
         padding-inline-end: var(--pf-global--spacer--md);
         padding-block-end: var(--pf-global--spacer--sm);
     }
 
     & > summary {
+        backdrop-filter: var(--ak-c-dialog__backdrop--BackdropFilter);
+
+        inset-block-start: 0;
+        position: sticky;
+        background: var(--ak-c-form-group--BackgroundColor, transparent);
+        z-index: var(--ak-c-form-group--ZIndex, 1);
+
         list-style-position: outside;
         margin-inline-start: var(--pf-global--spacer--sm);
         padding-inline-start: calc(var(--pf-global--spacer--md) + 0.25rem);
@@ -40,14 +49,14 @@ details {
         }
 
         &::marker {
-            color: var(--marker-color, var(--pf-global--Color--200));
+            color: var(--ak-c-form-group__marker--Color, var(--pf-global--Color--200));
             transition: var(--pf-c-form__field-group-toggle-icon--Transition);
             font-family: "Font Awesome 5 Free";
             font-weight: 900;
         }
 
         &:hover::marker {
-            color: var(--marker-color-hover, var(--pf-global--Color--100));
+            color: var(--ak-c-form-group__marker--ColorHover, var(--pf-global--Color--100));
         }
     }
 
@@ -56,6 +65,10 @@ details {
     }
 }
 
+[part="label"] {
+    padding: var(--pf-global--spacer--xs);
+}
+
 .pf-c-form__field-group-header-description {
     text-wrap: balance;
 }
diff --git a/web/src/elements/forms/FormGroup.ts b/web/src/elements/forms/FormGroup.ts
index 87bcddb48bc3..58e629a724af 100644
--- a/web/src/elements/forms/FormGroup.ts
+++ b/web/src/elements/forms/FormGroup.ts
@@ -134,7 +134,7 @@ export class AKFormGroup extends AKElement {
                                 role="heading"
                                 aria-level="3"
                             >
-                                ${this.label}
+                                <div part="label">${this.label}</div>
                                 <slot name="header"></slot>
                             </div>
                         </header>
diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts
index 10c56687648e..8b1936fef988 100644
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/web/src/elements/forms/HorizontalFormElement.ts
@@ -35,7 +35,9 @@ export class HorizontalFormElement extends AKElement {
             .pf-c-form__group {
                 display: grid;
                 grid-template-columns:
+                    [label]
                     var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth)
+                    [control]
                     var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
             }
         `,
@@ -130,23 +132,28 @@ export class HorizontalFormElement extends AKElement {
     render(): TemplateResult {
         this.#synchronizeAttributes();
 
-        return html`<div class="pf-c-form__group">
-            ${this.label
-                ? html`
-                      ${AKLabel(
-                          {
-                              className: "pf-c-form__group-label",
-                              htmlFor: this.fieldID,
-                              required: this.required,
-                          },
-                          this.label,
-                      )}
-                  </div>`
-                : html`<slot name="label"></slot>`}
-
-            <div class="pf-c-form__group-control">
-                <slot class="pf-c-form__horizontal-group"></slot>
-                <div class="pf-c-form__horizontal-group">
+        const { label, required, fieldID } = this;
+
+        const labelTemplate = label
+            ? AKLabel(
+                  {
+                      className: "pf-c-form__group-label",
+                      htmlFor: fieldID,
+                      required,
+                  },
+                  label,
+              )
+            : this.findSlotted("label")
+              ? html`<slot name="label"></slot>`
+              : null;
+
+        return html`<div class="pf-c-form__group" part="form-group">
+            ${labelTemplate}
+            ${this.findSlotted("label-end") ? html`<slot name="label-end"></slot>` : null}
+
+            <div class="pf-c-form__group-control" part="group-control">
+                <slot class="pf-c-form__horizontal-group" part="content"></slot>
+                <div class="pf-c-form__horizontal-group" part="errors">
                     ${AKFormErrors({ errors: this.errorMessages })}
                 </div>
             </div>
diff --git a/web/src/elements/forms/ModelForm.ts b/web/src/elements/forms/ModelForm.ts
index 2e91da73f7df..87ed7437a776 100644
--- a/web/src/elements/forms/ModelForm.ts
+++ b/web/src/elements/forms/ModelForm.ts
@@ -62,6 +62,14 @@ export abstract class ModelForm<
         id: "form.submit.save-changes",
     });
 
+    /**
+     * The label to use for the submit button while the form is being submitted
+     * when editing an instance, e.g. "Saving Changes...".
+     */
+    public static savingLabel: string | null = msg("Saving Changes...", {
+        id: "form.submit.saving-changes",
+    });
+
     /**
      * A helper method to create an invoker for editing an instance of this form.
      *
@@ -164,6 +172,16 @@ export abstract class ModelForm<
         return super.formatSubmitLabel();
     }
 
+    protected override formatSubmittingLabel(): string {
+        const { savingLabel } = this.constructor as typeof ModelForm;
+
+        if (this.instancePk && savingLabel) {
+            return savingLabel;
+        }
+
+        return super.formatSubmittingLabel();
+    }
+
     protected override formatHeadline(): string {
         const modifier = this.instancePk
             ? (this.constructor as typeof ModelForm).modifierLabel
diff --git a/web/src/elements/forms/Radio.css b/web/src/elements/forms/Radio.css
index 364aa5569af9..7da52c032296 100644
--- a/web/src/elements/forms/Radio.css
+++ b/web/src/elements/forms/Radio.css
@@ -1,4 +1,6 @@
 .pf-c-form__group-control {
+    --pf-c-grid__group-control--m-stack--Gap: var(--pf-global--spacer--xs);
+
     /**
      * There's enough complexity within the group label variable composition
      * to add a fallback value.
diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts
index 1b9b7435db10..009253be3c18 100644
--- a/web/src/elements/forms/Radio.ts
+++ b/web/src/elements/forms/Radio.ts
@@ -2,6 +2,7 @@ import { FormAssociatedElement } from "#elements/forms/form-associated-element";
 import Styles from "#elements/forms/Radio.css";
 import { SlottedTemplateResult } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
+import { isInteractiveElement } from "#elements/utils/interactivity";
 
 import { IDGenerator } from "@goauthentik/core/id";
 
@@ -10,8 +11,8 @@ import { Jsonifiable } from "type-fest";
 import { msg } from "@lit/localize";
 import { CSSResult, html, nothing, PropertyValues } from "lit";
 import { ref } from "lit-html/directives/ref.js";
+import { repeat } from "lit-html/directives/repeat.js";
 import { customElement, property } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
 
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
@@ -63,6 +64,10 @@ export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<
      * The stringified value of the currently selected radio option.
      */
     public get value(): string {
+        if (this.#value === null) {
+            return "";
+        }
+
         return typeof this.#value === "string" ? this.#value : JSON.stringify(this.#value);
     }
 
@@ -91,7 +96,10 @@ export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<
 
     #fieldID: string = this.name || IDGenerator.randomID();
 
-    #optionsArray(): RadioOption<T>[] {
+    /**
+     * Read the options, whether they're provided as a static array or a lazy function.
+     */
+    protected readOptions(): RadioOption<T>[] {
         return typeof this.options === "function" ? this.options() : this.options;
     }
 
@@ -102,30 +110,19 @@ export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<
             this.setAttribute("tabindex", "0");
         }
 
-        this.addEventListener("focus", this.#delegateFocusListener);
-
         this.role ||= "group";
     }
 
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-
-        this.removeEventListener("focus", this.#delegateFocusListener);
-    }
-
-    #delegateFocusListener = () => {
-        this.anchorRef?.value?.focus();
-    };
-
     // Set the value if it's not set already. Property changes inside the `willUpdate()` method do
     // not trigger an element update.
     public override willUpdate(changedProperties: PropertyValues<this>): void {
         super.willUpdate(changedProperties);
 
         if (!this.value) {
-            const maybeDefault = this.#optionsArray().filter((opt) => opt.default);
-            if (maybeDefault.length > 0) {
-                this.value = maybeDefault[0].value;
+            const defaultOption = this.readOptions().find((opt) => opt.default);
+
+            if (defaultOption) {
+                this.value = defaultOption.value;
             }
         }
     }
@@ -139,7 +136,7 @@ export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<
     // radio loses its setting, and the selected radio gains its setting. We want radio buttons to
     // present a unified event interface, so we prevent the event from triggering if the value is
     // already set.
-    #buildChangeListener = (option: RadioOption<T>) => {
+    protected buildChangeListener(option: RadioOption<T>): (event: Event) => void {
         return (event: Event) => {
             // This is a controlled input. Stop the native event from escaping or affecting the
             // value. We'll do that ourselves.
@@ -168,17 +165,35 @@ export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<
                 }),
             );
         };
-    };
+    }
 
-    #renderRadio = (option: RadioOption<T>, index: number) => {
+    protected renderRadio = (option: RadioOption<T>, index: number): SlottedTemplateResult => {
         const id = `${this.#fieldID}-${index}`;
 
-        const changeListener = this.#buildChangeListener(option);
+        const changeListener = this.buildChangeListener(option);
 
-        return html`<div
+        const clickListener = (event: Event) => {
+            if (event.target instanceof HTMLInputElement && event.target.type === "radio") {
+                return;
+            }
+
+            if (isInteractiveElement(event.target)) {
+                return;
+            }
+
+            return changeListener(event);
+        };
+
+        const checked = option.value === this.#value;
+
+        return html`<label
             class="pf-c-radio ${option.disabled ? "pf-m-disabled" : ""}"
-            @click=${changeListener}
-        >
+            @click=${clickListener}
+            part="option ${checked ? "checked" : ""} ${option.disabled ? "disabled" : ""}"
+            for=${id}
+            ><div class="pf-c-radio__label ${option.className ?? ""}" part="label">
+                ${option.label}
+            </div>
             <input
                 ${index === 0 ? ref(this.anchorRef) : nothing}
                 class="pf-c-radio__input"
@@ -186,22 +201,31 @@ export class Radio<T extends Jsonifiable = never> extends FormAssociatedElement<
                 name=${ifPresent(this.name)}
                 aria-label=${option.label}
                 id=${id}
-                .checked=${option.value === this.value}
+                .checked=${checked}
                 .disabled=${!!option.disabled}
                 ?required=${this.required}
+                @change=${changeListener}
+                part="input"
             />
-            <label class="pf-c-radio__label ${option.className ?? ""}" for=${id}
-                >${option.label}</label
-            >
+
             ${option.description
-                ? html`<span class="pf-c-radio__description">${option.description}</span>`
-                : nothing}
-        </div>`;
+                ? html`<span class="pf-c-radio__description" part="description"
+                      >${option.description}</span
+                  >`
+                : null}
+        </label>`;
     };
 
-    render() {
-        return html`<div class="pf-c-form__group-control pf-m-stack" ${ref(this.anchorRef)}>
-            ${map(this.#optionsArray(), this.#renderRadio)}
+    protected override render(): SlottedTemplateResult {
+        const options = this.readOptions();
+
+        return html`<div
+            class="pf-c-form__group-control pf-m-stack"
+            ${ref(this.anchorRef)}
+            part="control"
+        >
+            <slot></slot>
+            ${repeat(options, (option) => option, this.renderRadio)}
         </div>`;
     }
 }
diff --git a/web/src/elements/forms/SearchSelect/SearchSelect.ts b/web/src/elements/forms/SearchSelect/SearchSelect.ts
index 2dc97708b19f..4f54fb0667db 100644
--- a/web/src/elements/forms/SearchSelect/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect/SearchSelect.ts
@@ -153,7 +153,7 @@ export abstract class SearchSelectBase<T>
      * @attr
      */
     @property({ type: String })
-    public placeholder: string | null = msg("Select an object.");
+    public placeholder: string | null = msg("Select an object...");
 
     /**
      * A textual string representing "The user has affirmed they want to leave the selection blank."
diff --git a/web/src/elements/forms/SearchSelect/ak-search-select-view.ts b/web/src/elements/forms/SearchSelect/ak-search-select-view.ts
index 5718d886f04d..f1be477b9788 100644
--- a/web/src/elements/forms/SearchSelect/ak-search-select-view.ts
+++ b/web/src/elements/forms/SearchSelect/ak-search-select-view.ts
@@ -6,6 +6,7 @@ import { findFlatOptions, findOptionsSubset, groupOptions, optionsToFlat } from
 import { ListSelect } from "#elements/ak-list-select/ak-list-select";
 import { AKElement } from "#elements/Base";
 import type { GroupedOptions, SelectOption, SelectOptions } from "#elements/types";
+import { ifPresent } from "#elements/utils/attributes";
 import { randomId } from "#elements/utils/randomId";
 
 import { msg } from "@lit/localize";
@@ -28,7 +29,7 @@ export interface ISearchSelectView {
     name?: string;
     placeholder: string;
     managed: boolean;
-    emptyOption: string;
+    emptyOption: string | null;
 }
 
 /**
@@ -165,7 +166,7 @@ export class SearchSelectView extends AKElement implements ISearchSelectView {
      * @attr
      */
     @property({ type: String })
-    public placeholder: string = msg("Select an object.");
+    public placeholder: string = msg("Select an object...");
 
     /**
      * A unique ID to associate with the input and label.
@@ -190,8 +191,8 @@ export class SearchSelectView extends AKElement implements ISearchSelectView {
      *
      * @attr
      */
-    @property()
-    public emptyOption = "---------";
+    @property({ type: String })
+    public emptyOption: string | null = null;
 
     //#endregion
 
@@ -438,8 +439,11 @@ export class SearchSelectView extends AKElement implements ISearchSelectView {
     //#region Render
 
     public override render() {
-        const emptyOption = this.blankable ? this.emptyOption : undefined;
-        const open = this.open;
+        const { open } = this;
+
+        const emptyOption = this.blankable
+            ? this.emptyOption || this.placeholder || msg("Select an option...")
+            : null;
 
         return html`<div class="pf-c-select" part="ak-search-select">
                 <div class="pf-c-select__toggle pf-m-typeahead" part="ak-search-select-toggle">
@@ -481,7 +485,7 @@ export class SearchSelectView extends AKElement implements ISearchSelectView {
                               value=${ifDefined(this.value)}
                               @change=${this.#changeListener}
                               @blur=${this.#blurListener}
-                              emptyOption=${ifDefined(emptyOption)}
+                              emptyOption=${ifPresent(emptyOption)}
                               @keydown=${this.#listKeydownListener}
                               @keyup=${this.#listKeyupListener}
                           ></ak-list-select>
diff --git a/web/src/elements/table/Table.css b/web/src/elements/table/Table.css
index 6b681e6f7c01..59fe3ba941e7 100644
--- a/web/src/elements/table/Table.css
+++ b/web/src/elements/table/Table.css
@@ -187,13 +187,6 @@ time {
     }
 }
 
-/**
- * TODO: Remove after <dialog> modals are implemented.
- */
-.pf-c-dropdown__menu:has(ak-forms-modal) {
-    z-index: var(--pf-global--ZIndex--lg);
-}
-
 :host {
     display: block;
     container-type: inline-size;
diff --git a/web/src/elements/table/TablePage.css b/web/src/elements/table/TablePage.css
index 91c249046357..7f1daf2b2d44 100644
--- a/web/src/elements/table/TablePage.css
+++ b/web/src/elements/table/TablePage.css
@@ -14,3 +14,8 @@
 .pf-c-dropdown {
     --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--md);
 }
+
+.empty-state-primary {
+    display: flex;
+    gap: var(--pf-global--spacer--sm);
+}
diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts
index ea90bbc0a4a7..d43272a9b071 100644
--- a/web/src/elements/table/TablePage.ts
+++ b/web/src/elements/table/TablePage.ts
@@ -114,7 +114,9 @@ export abstract class TablePage<T extends object> extends Table<T> {
                       <div slot="body">
                           ${this.searchEnabled ? this.renderEmptyClearSearch() : nothing}
                       </div>
-                      <div slot="primary">${this.renderObjectCreate()}</div>
+                      <div slot="primary" class="empty-state-primary">
+                          ${this.renderObjectCreate()}
+                      </div>
                   </ak-empty-state>`}
         `);
     }
diff --git a/web/src/elements/utils/interactivity.ts b/web/src/elements/utils/interactivity.ts
index 0d53c4b532f2..2772cbc946e0 100644
--- a/web/src/elements/utils/interactivity.ts
+++ b/web/src/elements/utils/interactivity.ts
@@ -1,4 +1,9 @@
-export function isInteractiveElement(target: Element | null | undefined): target is HTMLElement {
+export const InteractiveElementsQuery =
+    "[href],input,button,i,[role='button'],select,[tabindex]:not([tabindex='-1'])";
+
+export function isInteractiveElement(
+    target: EventTarget | Element | null | undefined,
+): target is HTMLElement {
     if (!target || !(target instanceof HTMLElement)) {
         return false;
     }
@@ -7,16 +12,9 @@ export function isInteractiveElement(target: Element | null | undefined): target
         return false;
     }
 
-    const { tabIndex } = target;
-
     // Despite our type definitions, this method isn't available in all browsers,
     // so we fallback to assuming the element is visible.
     const visible = target.checkVisibility?.() ?? true;
 
-    return (
-        visible &&
-        (tabIndex === 0 ||
-            tabIndex === -1 ||
-            target.matches("button, [role='button'], a[href], input, select, textarea"))
-    );
+    return visible && target.matches(InteractiveElementsQuery);
 }
diff --git a/web/src/elements/utils/pointer.ts b/web/src/elements/utils/pointer.ts
index f42051d77f4f..1f013b311fbf 100644
--- a/web/src/elements/utils/pointer.ts
+++ b/web/src/elements/utils/pointer.ts
@@ -1,5 +1,4 @@
-const InteractiveElementsQuery =
-    "[href],input,button,i,[role='button'],select,[tabindex]:not([tabindex='-1'])";
+import { InteractiveElementsQuery } from "#elements/utils/interactivity";
 
 /**
  * Whether a pointer event is targeting the element itself or one of its children.
diff --git a/web/src/elements/wizard/CreateWizard.ts b/web/src/elements/wizard/CreateWizard.ts
index 5d384bbce63c..b653999eef11 100644
--- a/web/src/elements/wizard/CreateWizard.ts
+++ b/web/src/elements/wizard/CreateWizard.ts
@@ -13,6 +13,8 @@ import {
     modalInvoker,
     ModalInvokerDirectiveResult,
     renderModal,
+    TransclusionChildElement,
+    TransclusionChildSymbol,
 } from "#elements/dialogs";
 import { LitPropertyRecord, SlottedTemplateResult } from "#elements/types";
 import { ifPresent } from "#elements/utils/attributes";
@@ -32,7 +34,7 @@ import { guard } from "lit-html/directives/guard.js";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { property } from "lit/decorators.js";
 
-export class CreateWizard extends AKElement {
+export class CreateWizard extends AKElement implements TransclusionChildElement {
     /**
      * Optional singular label for the type of entity this form creates/edits.
      */
@@ -51,7 +53,7 @@ export class CreateWizard extends AKElement {
      * @see {@linkcode modalInvoker} for the underlying implementation.
      */
     public static asModalInvoker<T extends CreateWizard = CreateWizard>(
-        props?: LitPropertyRecord<T>,
+        props?: LitPropertyRecord<T> | null,
         init?: DialogInit,
     ): ModalInvokerDirectiveResult {
         return modalInvoker(this, props, init);
@@ -75,6 +77,8 @@ export class CreateWizard extends AKElement {
 
     //#region Public Properties
 
+    public [TransclusionChildSymbol] = true;
+
     @property({ attribute: false })
     public creationTypes: TypeCreate[] | null = null;
 
@@ -201,6 +205,17 @@ export class CreateWizard extends AKElement {
         });
     };
 
+    /**
+     * Formats the ARIA label for the wizard, delegating to the wizard component if available,
+     * or using a default label if not.
+     */
+    public formatARIALabel(verboseName = this.verboseName): string {
+        return (
+            this.wizard?.formatARIALabel(verboseName) ??
+            AKWizard.prototype.formatARIALabel.call(this, verboseName)
+        );
+    }
+
     /**
      * An overridable method to filter the wizard's steps when a new type is selected.
      *
diff --git a/web/src/elements/wizard/Wizard.ts b/web/src/elements/wizard/Wizard.ts
index bc9f82c055aa..e8122c6542cc 100644
--- a/web/src/elements/wizard/Wizard.ts
+++ b/web/src/elements/wizard/Wizard.ts
@@ -5,6 +5,7 @@ import { AKRefreshEvent } from "#common/events";
 
 import { AKElement } from "#elements/Base";
 import { listen } from "#elements/decorators/listen";
+import { isTransclusionParentElement } from "#elements/dialogs";
 import { SlottedTemplateResult } from "#elements/types";
 import { findNearestDialog } from "#elements/utils/render-roots";
 import { WizardPage } from "#elements/wizard/WizardPage";
@@ -47,6 +48,11 @@ export const ApplyActionsSlot = "apply-actions";
  */
 @customElement("ak-wizard")
 export class AKWizard<S = Record<string, unknown>> extends AKElement {
+    /**
+     * Optional singular label for the type of entity this wizard creates.
+     */
+    public static verboseName: string | null = null;
+
     public static styles: CSSResult[] = [
         PFButton,
         PFTitle,
@@ -63,6 +69,12 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
                 flex-flow: column;
             }
 
+            .pf-c-wizard__main,
+            .pf-c-wizard__main-body {
+                transform: translate3d(0, 0, 0);
+                will-change: transform;
+            }
+
             .pf-c-wizard__main-body {
                 display: flex;
                 flex: 1 1 auto;
@@ -76,26 +88,27 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
 
     //#region Public Properties
 
-    public formatARIALabel = () => {
-        if (this.verboseName) {
-            return msg(str`New ${this.verboseName} Wizard`, {
-                id: "wizard.ariaLabel.entity-singular",
-                desc: "ARIA label for the creation wizard, where the entity singular is interpolated.",
-            });
-        }
-
-        return msg("Creation Wizard", {
-            id: "wizard.ariaLabel.default",
-            desc: "ARIA label for the creation wizard when no entity singular is provided.",
-        });
-    };
+    /**
+     * Formats the ARIA label for the wizard, using the {@linkcode verboseName} property if available.
+     */
+    public formatARIALabel(verboseName = this.verboseName): string {
+        return verboseName
+            ? msg(str`New ${verboseName} Wizard`, {
+                  id: "wizard.ariaLabel.entity-singular",
+                  desc: "ARIA label for the creation wizard, where the entity singular is interpolated.",
+              })
+            : msg("Wizard", {
+                  id: "wizard.ariaLabel.default",
+                  desc: "ARIA label for the creation wizard when no entity singular is provided.",
+              });
+    }
 
     /**
      * Formats the header text for the wizard, using the {@linkcode verboseName} property if available.
      */
-    public formatHeader(): string {
-        if (this.verboseName) {
-            return msg(str`Create New ${this.verboseName}`, {
+    public formatHeader(verboseName = this.verboseName): string {
+        if (verboseName) {
+            return msg(str`Create New ${verboseName}`, {
                 id: "wizard.header.entity-singular",
                 desc: "Header for the creation wizard, where the entity singular is interpolated.",
             });
@@ -127,11 +140,25 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
     @property()
     public header?: string;
 
+    #verboseName: string | null = null;
+
     /**
-     * Optional singular label for the type of entity this wizard creates, used in messages and the like.
+     * Optional singular label for the type of entity this form creates/edits.
+     *
+     * Overrides the static `verboseName` property for this instance.
      */
     @property({ type: String, attribute: "entity-singular" })
-    public verboseName: string | null = null;
+    public set verboseName(value: string | null) {
+        this.#verboseName = value;
+
+        if (isTransclusionParentElement(this.parentElement)) {
+            this.parentElement.slottedElementUpdatedAt = new Date();
+        }
+    }
+
+    public get verboseName(): string | null {
+        return this.#verboseName || (this.constructor as typeof AKWizard).verboseName;
+    }
 
     /**
      * Optional plural label for the type of entity this wizard creates, used in messages and the like.
diff --git a/web/src/styles/authentik/base/globals.css b/web/src/styles/authentik/base/globals.css
index 73db0d96a32a..204766507fb1 100644
--- a/web/src/styles/authentik/base/globals.css
+++ b/web/src/styles/authentik/base/globals.css
@@ -31,8 +31,9 @@ body {
     }
 }
 
-html[data-dialog-count] {
+[data-dialog-count] {
     overscroll-behavior: none;
+    overflow: hidden;
 }
 
 /* #endregion */
diff --git a/web/src/styles/authentik/components/Form/form.css b/web/src/styles/authentik/components/Form/form.css
index 06a41c588e8b..29130c00a610 100644
--- a/web/src/styles/authentik/components/Form/form.css
+++ b/web/src/styles/authentik/components/Form/form.css
@@ -21,7 +21,7 @@
 }
 
 .pf-c-form.ak-m-content-center {
-    --pf-c-form--GridGap: 0;
+    --pf-c-form--GridGap: var(--pf-global--spacer--sm);
 
     flex: 1 1 auto;
     align-self: self-start;
@@ -174,10 +174,22 @@ fieldset {
 }
 
 label.pf-c-radio {
-    padding-inline: var(--pf-global--spacer--sm);
+    --pf-c-radio--BorderColor: var(--pf-global--BorderColor--300);
+    --pf-c-radio--BoxShadowColor: transparent;
+
+    --pf-c-radio--checked--BackgroundColor: transparent;
+    --pf-c-radio--checked--BorderColor: var(--pf-global--active-color--300);
+    --pf-c-radio--hover--BorderColor: var(--pf-global--active-color--200);
+
+    --pf-c-radio--disabled--BackgroundColor: var(--pf-global--BackgroundColor--150);
+
+    padding-inline: var(--pf-global--spacer--md);
     padding-block: var(--pf-global--spacer--md);
     cursor: pointer;
     background-color: var(--pf-c-radio--BackgroundColor, transparent);
+    border: 1px solid var(--pf-c-radio--BorderColor);
+    border-radius: var(--pf-global--BorderRadius--sm);
+    position: relative;
 
     display: grid;
     grid-template-areas:
@@ -189,29 +201,128 @@ label.pf-c-radio {
     .pf-c-radio__input {
         grid-area: input;
         align-self: center;
-        margin-inline-start: var(--pf-global--spacer--md);
+        margin-block: 0;
+        margin-inline-end: var(--pf-global--spacer--xs);
+        margin-inline-start: var(--pf-global--spacer--sm);
+        appearance: none;
+        content: none;
+        width: 1em;
+        height: 1em;
+
+        &::after {
+            font-family: "Font Awesome 5 Free";
+            font-weight: 900;
+
+            content: "\f00c";
+            display: block;
+            line-height: 1;
+            color: var(--pf-c-radio--checkmark--Color, transparent);
+        }
     }
 
-    &:hover {
-        --pf-c-radio--BackgroundColor: var(--pf-global--BackgroundColor--150);
+    &:not(:last-child) {
+        --pf-c-radio--BoxShadowColor: var(--pf-global--BorderColor--100);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        display: block;
+        background-color: var(--pf-c-radio--BoxShadowColor);
+        height: 0.5px;
+        inset-inline: 0;
+        inset-block-end: 0;
     }
 
     &:has(.pf-c-radio__input:checked) {
-        --pf-c-radio--BackgroundColor: var(--pf-global--BackgroundColor--200);
+        --pf-c-radio--BackgroundColor: var(--pf-c-radio--checked--BackgroundColor);
+        --pf-c-radio--BorderColor: var(--pf-c-radio--checked--BorderColor);
+        --pf-c-radio--checkmark--Color: var(--pf-global--active-color--300);
+    }
+
+    &:hover {
+        --pf-c-radio--BorderColor: var(--pf-c-radio--hover--BorderColor);
+        --pf-c-radio--checkmark--Color: var(--pf-c-radio--hover--BorderColor);
     }
 
     &:has(.pf-c-radio__input:disabled) {
         cursor: not-allowed;
-        --pf-c-radio--BackgroundColor: var(--pf-global--BackgroundColor--200) !important;
+
+        --pf-c-radio--BackgroundColor: var(--pf-c-radio--disabled--BackgroundColor) !important;
     }
 }
 
+.pf-c-form__helper-radio:first-child {
+    margin-block-end: var(--pf-global--spacer--sm);
+    line-height: 1;
+}
+
+:has(ak-radio) {
+    &::part(form-group) {
+        grid-template-columns: [label] auto 1fr;
+    }
+
+    &::part(form-group) {
+        gap: 0;
+    }
+
+    &::part(group-control) {
+        grid-column: label / -label;
+    }
+}
+
+::part(radio-help) {
+    padding-block-start: var(--pf-global--spacer--form-element);
+    font-size: var(--pf-c-form__label--FontSize);
+    line-height: var(--pf-global--LineHeight--md);
+    font-style: italic;
+    color: var(--pf-c-form__group-label-help--Color);
+    text-align: end;
+}
+
 /* #endregion */
 
+ak-switch-input {
+    padding-inline: var(--pf-global--spacer--form-element);
+
+    ::part(form-group) {
+        grid-template-columns: 1fr;
+    }
+
+    .pf-c-switch {
+        grid-template-columns: [label] 1fr [control] 1fr;
+        grid-template-rows: [primary] auto [secondary] auto;
+        justify-content: space-between;
+        padding-block: var(--pf-global--spacer--xs);
+        width: 100%;
+    }
+
+    .pf-c-switch__label {
+        grid-area: primary / label;
+        justify-self: start;
+        font-weight: 500;
+    }
+
+    .pf-c-switch__input,
+    .pf-c-switch__toggle {
+        grid-area: primary / control;
+        justify-self: end;
+    }
+
+    .pf-c-form__helper-text {
+        padding-inline-end: var(--pf-global--spacer--2xl);
+        grid-area: secondary / label / secondary / -1;
+    }
+}
+
 /* #region Dark Theme */
 
 [data-theme="dark"],
 :host([theme="dark"]) {
+    label.pf-c-radio {
+        --pf-c-radio__description--Color: var(--pf-global--palette--blue-50);
+    }
+
     /* #region Inputs */
 
     .pf-c-input-group:not(:has(.pf-c-switch)) {
diff --git a/web/src/user/ak-interface-user.css b/web/src/user/ak-interface-user.css
index b92beddff37a..fc928675f5d0 100644
--- a/web/src/user/ak-interface-user.css
+++ b/web/src/user/ak-interface-user.css
@@ -15,10 +15,6 @@
     }
 }
 
-.display-none {
-    display: none;
-}
-
 .pf-c-brand {
     min-height: 2rem;
     height: 2rem;
diff --git a/web/test/browser/applications.test.ts b/web/test/browser/applications.test.ts
index 8c2f4d45208c..82c0f7724da8 100644
--- a/web/test/browser/applications.test.ts
+++ b/web/test/browser/applications.test.ts
@@ -37,7 +37,7 @@ test.describe("Applications", () => {
 
         //#region Create provider
 
-        const providerDialog = page.getByRole("dialog", { name: "New provider" });
+        const providerDialog = page.getByRole("dialog", { name: "New Provider Wizard" });
 
         await test.step("Create OAuth2 provider", async () => {
             await expect(providerDialog, "Provider dialog is initially closed").toBeHidden();
@@ -48,14 +48,13 @@ test.describe("Applications", () => {
 
             await series(
                 [click, "OAuth2/OpenID", "option"],
-                [click, "Next"],
-                [fill, "Provider name", providerName],
+                [fill, "Provider Name", providerName],
                 [
                     selectSearchValue,
-                    "Authorization flow",
+                    "Authorization Flow",
                     /default-provider-authorization-explicit-consent/,
                 ],
-                [click, "Finish"],
+                [click, "Create"],
             );
 
             await expect(providerDialog, "Provider dialog closes after creation").toBeHidden();
@@ -77,23 +76,23 @@ test.describe("Applications", () => {
 
         const appDialog = page.getByRole("dialog", { name: "New Application" });
 
-        // await test.step("Create application", async () => {
-        await expect(appDialog, "Application dialog is initially closed").toBeHidden();
+        await test.step("Create application", async () => {
+            await expect(appDialog, "Application dialog is initially closed").toBeHidden();
 
-        await click("New Application", "button");
-        await click("With Existing Provider...", "menuitem");
+            await click("New Application options", "button");
+            await click("With Existing Provider...", "menuitem");
 
-        await expect(appDialog, "Application dialog opens").toBeVisible();
+            await expect(appDialog, "Application dialog opens").toBeVisible();
 
-        await series(
-            [fill, /^Application Name/, appName, appDialog],
-            [selectSearchValue, "Provider", providerName, appDialog],
-        );
+            await series(
+                [fill, /^Application Name/, appName, appDialog],
+                [selectSearchValue, "Provider", providerName, appDialog],
+            );
 
-        await appDialog.getByRole("button", { name: "Create Application" }).click();
+            await appDialog.getByRole("button", { name: "Create Application" }).click();
 
-        await expect(appDialog, "Application dialog closes after creation").toBeHidden();
-        // });
+            await expect(appDialog, "Application dialog closes after creation").toBeHidden();
+        });
 
         await test.step("Verify application creation", async () => {
             const $app = await search(appName);
@@ -128,7 +127,6 @@ test.describe("Applications", () => {
             await expect(wizardDialog, "Wizard is initially closed").toBeHidden();
 
             await click("New Application", "button");
-            await click("With New Provider...", "menuitem");
 
             await expect(wizardDialog, "Wizard opens").toBeVisible();
         });
@@ -157,7 +155,7 @@ test.describe("Applications", () => {
 
             await series([
                 selectSearchValue,
-                "Authorization flow",
+                "Authorization Flow",
                 /default-provider-authorization-explicit-consent/,
                 wizardDialog,
             ]);
@@ -178,7 +176,7 @@ test.describe("Applications", () => {
                 timeout: 10_000,
             });
 
-            await click("Close", "button", wizardDialog);
+            await click("Finish", "button", wizardDialog);
         });
 
         await test.step("Verify application creation", async () => {
diff --git a/web/test/browser/providers.test.ts b/web/test/browser/providers.test.ts
index 3ae92ccb5b92..1e85b4fc9179 100644
--- a/web/test/browser/providers.test.ts
+++ b/web/test/browser/providers.test.ts
@@ -15,7 +15,7 @@ test.describe("Provider Wizard", () => {
 
         providerNames.set(testId, providerName);
 
-        const dialog = page.getByRole("dialog", { name: "New provider" });
+        const dialog = page.getByRole("dialog", { name: "New Provider Wizard" });
 
         await test.step("Authenticate", async () => {
             await session.login({
@@ -31,7 +31,7 @@ test.describe("Provider Wizard", () => {
             await expect(dialog, "Dialog opens after clicking on New Provider").toBeVisible();
 
             await expect(
-                page.getByRole("listbox", { name: "Select a provider type" }),
+                page.getByRole("listbox", { name: "Choose Provider Type" }),
                 "Dialog opens with a list of provider types",
             ).toBeVisible();
 
@@ -61,21 +61,21 @@ test.describe("Provider Wizard", () => {
 
     //#region OAuth2
 
-    test("Simple OAuth2 Provider", async ({ form, pointer }, testInfo) => {
+    test("Simple OAuth2 Provider", async ({ form, pointer, page }, testInfo) => {
         const providerName = providerNames.get(testInfo.testId)!;
         const { fill, selectSearchValue } = form;
         const { click } = pointer;
+        const dialog = page.getByRole("dialog", { name: "New Provider Wizard" });
 
         await series(
             [click, "OAuth2/OpenID", "option"],
-            [click, "Next"],
-            [fill, "Provider name", providerName],
+            [fill, "Provider Name", providerName],
             [
                 selectSearchValue,
-                "Authorization flow",
+                "Authorization Flow",
                 /default-provider-authorization-explicit-consent/,
             ],
-            [click, "Finish"],
+            [click, "Create", "button", dialog],
         );
     });
 
@@ -84,16 +84,16 @@ test.describe("Provider Wizard", () => {
 
         const { fill, selectSearchValue, setFormGroup, setRadio, setInputCheck } = form;
         const { click } = pointer;
+        const dialog = page.getByRole("dialog", { name: "New Provider Wizard" });
 
         const $clientSecretInput = page.getByRole("textbox", { name: "Client Secret" });
 
         await series(
             [click, "OAuth2/OpenID", "option"],
-            [click, "Next"],
-            [fill, "Provider name", providerName],
+            [fill, "Provider Name", providerName],
             [
                 selectSearchValue,
-                "Authorization flow",
+                "Authorization Flow",
                 /default-provider-authorization-explicit-consent/,
             ],
             [setFormGroup, "Protocol settings", true],
@@ -113,18 +113,18 @@ test.describe("Provider Wizard", () => {
             ],
             [selectSearchValue, "Signing Key", /authentik Self-signed Certificate/],
             [setFormGroup, "Advanced flow settings", true],
-            [selectSearchValue, "Authentication flow", /default-source-authentication/],
-            [selectSearchValue, "Invalidation flow", /default-invalidation-flow/],
+            [selectSearchValue, "Authentication Flow", /default-source-authentication/],
+            [selectSearchValue, "Invalidation Flow", /default-invalidation-flow/],
             [setFormGroup, "Advanced protocol settings", true],
-            [fill, "Access code validity", "minutes=2"],
-            [fill, "Access token validity", "minutes=10"],
-            [fill, "Refresh token validity", "days=40"],
+            [fill, "Access Code Validity", "minutes=2"],
+            [fill, "Access Token Validity", "minutes=10"],
+            [fill, "Refresh Token Validity", "days=40"],
             [selectSearchValue, "Encryption Key", /authentik Self-signed Certificate/],
             [setInputCheck, "Include claims in id_token", false],
-            [setRadio, "Subject mode", "Based on the User's username"],
-            [setRadio, "Issuer mode", "Same identifier is used for all providers"],
+            [setRadio, "Subject Mode", "Based on the User's username"],
+            [setRadio, "Issuer Mode", "Same identifier is used for all providers"],
             [setFormGroup, "Machine-to-Machine authentication settings", true],
-            [click, "Finish", "button", page.getByRole("dialog", { name: "New Provider" })],
+            [click, "Create", "button", dialog],
         );
     });
 
@@ -136,24 +136,23 @@ test.describe("Provider Wizard", () => {
         const providerName = providerNames.get(testInfo.testId)!;
         const { fill, setFormGroup, selectSearchValue, setInputCheck, setRadio } = form;
         const { click } = pointer;
+        const dialog = page.getByRole("dialog", { name: "New Provider Wizard" });
 
         await series(
             [click, "LDAP", "option"],
-            [click, "Next"],
-
-            [fill, "Provider name", providerName],
+            [fill, "Provider Name", providerName],
             [setFormGroup, "Flow settings", true],
             [setFormGroup, "Protocol settings", true],
-            [selectSearchValue, "Bind flow", /default-authentication-flow/],
+            [selectSearchValue, "Bind Flow", /default-authentication-flow/],
             [fill, "Base DN", "DC=ldap-2,DC=goauthentik,DC=io"],
             [selectSearchValue, "Certificate", /authentik Self-signed Certificate/],
-            [fill, "TLS Server name", "goauthentik.io"],
-            [fill, "UID start number", "2001"],
-            [fill, "GID start number", "4001"],
-            [setRadio, "Search mode", "Direct querying"],
-            [setRadio, "Bind mode", "Direct binding"],
+            [fill, "TLS Server Name", "goauthentik.io"],
+            [fill, "UID Start Number", "2001"],
+            [fill, "GID Start Number", "4001"],
+            [setRadio, "Search Mode", "Direct querying"],
+            [setRadio, "Bind Mode", "Direct binding"],
             [setInputCheck, "MFA Support", false],
-            [click, "Finish", "button", page.getByRole("dialog", { name: "New Provider" })],
+            [click, "Create", "button", dialog],
         );
     });
 
@@ -165,15 +164,15 @@ test.describe("Provider Wizard", () => {
         const providerName = providerNames.get(testInfo.testId)!;
         const { fill, selectSearchValue, setFormGroup } = form;
         const { click } = pointer;
+        const dialog = page.getByRole("dialog", { name: "New Provider Wizard" });
 
         await series(
             [click, "RADIUS", "option"],
-            [click, "Next"],
-            [fill, "Provider name", providerName],
-            [selectSearchValue, "Authentication flow", /default-authentication-flow/],
+            [fill, "Provider Name", providerName],
+            [selectSearchValue, "Authentication Flow", /default-authentication-flow/],
             [setFormGroup, "Protocol settings", true],
             [selectSearchValue, "Certificate", /------/],
-            [click, "Finish", "button", page.getByRole("dialog", { name: "New Provider" })],
+            [click, "Create", "button", dialog],
         );
     });
 
diff --git a/web/test/browser/users.test.ts b/web/test/browser/users.test.ts
index 81995780eca1..c0578f491c4b 100644
--- a/web/test/browser/users.test.ts
+++ b/web/test/browser/users.test.ts
@@ -54,7 +54,7 @@ test.describe("Users", () => {
         const { fill } = form;
         const { click } = pointer;
 
-        const dialog = page.getByRole("dialog", { name: "New user" });
+        const dialog = page.getByRole("dialog", { name: "New User Wizard" });
 
         await expect(dialog, "Dialog is initially closed").toBeHidden();
 
@@ -64,16 +64,16 @@ test.describe("Users", () => {
 
         await test.step("Select user type", async () => {
             await dialog.getByRole("radio", { name: "Internal" }).click({ force: true });
-            await dialog.getByRole("button", { name: "Next" }).click();
         });
 
         await series(
             [fill, /^Username/, username, dialog],
             [fill, /^Display Name/, displayName, dialog],
             [fill, /^Email Address/, `${username}@example.com`, dialog],
+            [fill, /^Path/, "user", dialog],
         );
 
-        await dialog.getByRole("button", { name: "Finish" }).click();
+        await dialog.getByRole("button", { name: "Create" }).click();
 
         await expect(dialog, "Dialog closes after creating user").toBeHidden();
     });
@@ -84,7 +84,7 @@ test.describe("Users", () => {
         const { fill } = form;
         const { click } = pointer;
 
-        const dialog = page.getByRole("dialog", { name: "New user" });
+        const dialog = page.getByRole("dialog", { name: "New User Wizard" });
 
         await expect(dialog, "Dialog is initially closed").toBeHidden();
 
@@ -94,7 +94,6 @@ test.describe("Users", () => {
 
         await test.step("Select user type", async () => {
             await dialog.getByRole("radio", { name: "Service Account" }).click({ force: true });
-            await dialog.getByRole("button", { name: "Next" }).click();
         });
 
         await series(
@@ -144,7 +143,7 @@ test.describe("Impersonation", () => {
         const { fill, search } = form;
         const { click } = pointer;
 
-        const createDialog = page.getByRole("dialog", { name: "New user" });
+        const createDialog = page.getByRole("dialog", { name: "New User Wizard" });
         const impersonateDialog = page.getByRole("dialog", { name: "Impersonate User" });
 
         await test.step("Create user", async () => {
@@ -154,16 +153,16 @@ test.describe("Impersonation", () => {
 
             await test.step("Select user type", async () => {
                 await createDialog.getByRole("radio", { name: "Internal" }).click({ force: true });
-                await createDialog.getByRole("button", { name: "Next" }).click();
             });
 
             await series(
                 [fill, /^Username/, username, createDialog],
                 [fill, /^Display Name/, displayName, createDialog],
                 [fill, /^Email Address/, `${username}@example.com`, createDialog],
+                [fill, /^Path/, "user", createDialog],
             );
 
-            await createDialog.getByRole("button", { name: "Finish" }).click();
+            await createDialog.getByRole("button", { name: "Create" }).click();
 
             await createDialog.waitFor({ state: "hidden", timeout: 10_000 });
             await expect(createDialog, "Create dialog closes").toBeHidden();

From 545175a62f5680c5c3d120e95a7d74e4c38309d9 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Fri, 10 Apr 2026 18:22:22 +0200
Subject: [PATCH 14/21] Fix type.


From ca0547148502af158f155015df6d9354a0ad7532 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 07:57:47 +0200
Subject: [PATCH 15/21] Format.

---
 web/src/admin/ak-interface-admin.ts           | 8 ++------
 web/src/elements/buttons/Dropdown.ts          | 8 ++------
 web/src/elements/notifications/APIDrawer.ts   | 4 +---
 web/src/elements/sidebar/SidebarItem.ts       | 4 +---
 web/src/elements/wizard/Wizard.ts             | 4 +---
 web/src/flow/FlowExecutor.ts                  | 4 +---
 web/src/flow/inspector/FlowInspector.ts       | 4 +---
 web/src/flow/inspector/FlowInspectorButton.ts | 4 +---
 web/src/user/ak-interface-user.ts             | 4 +---
 9 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/web/src/admin/ak-interface-admin.ts b/web/src/admin/ak-interface-admin.ts
index d6b3d56b5d90..1090fbdeefc0 100644
--- a/web/src/admin/ak-interface-admin.ts
+++ b/web/src/admin/ak-interface-admin.ts
@@ -111,17 +111,13 @@ export class AdminInterface extends WithCapabilitiesConfig(
     @state()
     protected drawer: DrawerState = readDrawerParams();
 
-    @listen(AKDrawerChangeEvent, {
-        target: window,
-    })
+    @listen(AKDrawerChangeEvent, { target: window })
     protected drawerListener = (event: AKDrawerChangeEvent) => {
         this.drawer = event.drawer;
         persistDrawerParams(event.drawer);
     };
 
-    @listen(LOCALE_STATUS_EVENT, {
-        target: window,
-    })
+    @listen(LOCALE_STATUS_EVENT, { target: window })
     localeStatusListener = (event: CustomEvent<LocaleStatusEventDetail>) => {
         if (event.detail.status === "ready") {
             this.synchronizeSidebarEntries();
diff --git a/web/src/elements/buttons/Dropdown.ts b/web/src/elements/buttons/Dropdown.ts
index 48494b3987bd..6ca7e8ea1ce3 100644
--- a/web/src/elements/buttons/Dropdown.ts
+++ b/web/src/elements/buttons/Dropdown.ts
@@ -27,9 +27,7 @@ export class DropdownButton extends AKElement {
 
     protected logger = ConsoleLogger.prefix("dropdown");
 
-    @listen(AKRefreshEvent, {
-        target: window,
-    })
+    @listen(AKRefreshEvent, { target: window })
     public hide = (): void => {
         if (!this.menu || !this.toggleButton) return;
 
@@ -48,9 +46,7 @@ export class DropdownButton extends AKElement {
         event.stopPropagation();
     };
 
-    @listen("click", {
-        target: window,
-    })
+    @listen("click", { target: window })
     protected clickHandler = (event: Event): void => {
         if (!this.menu) return;
 
diff --git a/web/src/elements/notifications/APIDrawer.ts b/web/src/elements/notifications/APIDrawer.ts
index e824b41ffebe..807b41977b5b 100644
--- a/web/src/elements/notifications/APIDrawer.ts
+++ b/web/src/elements/notifications/APIDrawer.ts
@@ -78,9 +78,7 @@ export class APIDrawer extends AKElement {
         `,
     ];
 
-    @listen(AKRequestPostEvent, {
-        target: window,
-    })
+    @listen(AKRequestPostEvent, { target: window })
     protected enqueueRequest = ({ requestInfo }: AKRequestPostEvent) => {
         this.requests.push(requestInfo);
 
diff --git a/web/src/elements/sidebar/SidebarItem.ts b/web/src/elements/sidebar/SidebarItem.ts
index 6ce84912bedb..cd4f1bad010d 100644
--- a/web/src/elements/sidebar/SidebarItem.ts
+++ b/web/src/elements/sidebar/SidebarItem.ts
@@ -110,9 +110,7 @@ export class SidebarItem extends WithCapabilitiesConfig(WithLicenseSummary(AKEle
         this.#scrollBehavior ??= "smooth";
     };
 
-    @listen("hashchange", {
-        target: window,
-    })
+    @listen("hashchange", { target: window })
     public synchronize = (): void => {
         const activePath = window.location.hash.slice(1).split(ROUTE_SEPARATOR)[0];
         this.childItems.forEach((item) => {
diff --git a/web/src/elements/wizard/Wizard.ts b/web/src/elements/wizard/Wizard.ts
index e8122c6542cc..7bc6851541e1 100644
--- a/web/src/elements/wizard/Wizard.ts
+++ b/web/src/elements/wizard/Wizard.ts
@@ -395,9 +395,7 @@ export class AKWizard<S = Record<string, unknown>> extends AKElement {
         this.dialog.requestClose(returnValue);
     };
 
-    @listen(AKRefreshEvent, {
-        target: window,
-    })
+    @listen(AKRefreshEvent, { target: window })
     protected refreshListener = (event: AKRefreshEvent) => {
         const { lastPage } = this.takeStepProgress();
 
diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index 6ca42ff518e2..b25e9bfbe223 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -194,9 +194,7 @@ export class FlowExecutor extends WithBrandConfig(Interface) implements StageHos
 
     //#region Listeners
 
-    @listen(AKSessionAuthenticatedEvent, {
-        target: window,
-    })
+    @listen(AKSessionAuthenticatedEvent, { target: window })
     protected sessionAuthenticatedListener = () => {
         if (!document.hidden) {
             return;
diff --git a/web/src/flow/inspector/FlowInspector.ts b/web/src/flow/inspector/FlowInspector.ts
index 18577a4ebe39..1a64e4aa8739 100644
--- a/web/src/flow/inspector/FlowInspector.ts
+++ b/web/src/flow/inspector/FlowInspector.ts
@@ -53,9 +53,7 @@ export class FlowInspector extends AKElement {
 
     //#endregion
 
-    @listen(AKFlowAdvanceEvent, {
-        target: window,
-    })
+    @listen(AKFlowAdvanceEvent, { target: window })
     protected advanceHandler = (): void => {
         new FlowsApi(DEFAULT_CONFIG)
             .flowsInspectorGet({
diff --git a/web/src/flow/inspector/FlowInspectorButton.ts b/web/src/flow/inspector/FlowInspectorButton.ts
index 079ab285f64d..7369f9b6c62a 100644
--- a/web/src/flow/inspector/FlowInspectorButton.ts
+++ b/web/src/flow/inspector/FlowInspectorButton.ts
@@ -25,9 +25,7 @@ export class FlowInspectorButton extends WithCapabilitiesConfig(AKElement) {
     @state()
     private loaded = false;
 
-    @listen(AKFlowInspectorChangeEvent, {
-        target: window,
-    })
+    @listen(AKFlowInspectorChangeEvent, { target: window })
     protected _onInspectorToggle = (ev: AKFlowInspectorChangeEvent) => {
         this.open = ev.open;
     };
diff --git a/web/src/user/ak-interface-user.ts b/web/src/user/ak-interface-user.ts
index 7a1e5bb3f1f2..1977a86c42dc 100644
--- a/web/src/user/ak-interface-user.ts
+++ b/web/src/user/ak-interface-user.ts
@@ -61,9 +61,7 @@ class UserInterface extends WithBrandConfig(WithSession(AuthenticatedInterface))
     @property({ attribute: false, useDefault: true })
     public drawer: DrawerState = readDrawerParams();
 
-    @listen(AKDrawerChangeEvent, {
-        target: window,
-    })
+    @listen(AKDrawerChangeEvent, { target: window })
     protected drawerListener = (event: AKDrawerChangeEvent) => {
         this.drawer = event.drawer;
         persistDrawerParams(event.drawer);

From 8eb54ea48c494f9c29ee7e6c08287f4634c56be7 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 08:02:44 +0200
Subject: [PATCH 16/21] Use plural path.

---
 web/test/browser/users.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/test/browser/users.test.ts b/web/test/browser/users.test.ts
index c0578f491c4b..acecc9fc1cfe 100644
--- a/web/test/browser/users.test.ts
+++ b/web/test/browser/users.test.ts
@@ -70,7 +70,7 @@ test.describe("Users", () => {
             [fill, /^Username/, username, dialog],
             [fill, /^Display Name/, displayName, dialog],
             [fill, /^Email Address/, `${username}@example.com`, dialog],
-            [fill, /^Path/, "user", dialog],
+            [fill, /^Path/, "users", dialog],
         );
 
         await dialog.getByRole("button", { name: "Create" }).click();
@@ -159,7 +159,7 @@ test.describe("Impersonation", () => {
                 [fill, /^Username/, username, createDialog],
                 [fill, /^Display Name/, displayName, createDialog],
                 [fill, /^Email Address/, `${username}@example.com`, createDialog],
-                [fill, /^Path/, "user", createDialog],
+                [fill, /^Path/, "users", createDialog],
             );
 
             await createDialog.getByRole("button", { name: "Create" }).click();

From f7a73127e689df310020c311d79b3510e7566015 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 08:10:36 +0200
Subject: [PATCH 17/21] Fix strict selector in Safari.

---
 web/src/elements/utils/render-roots.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/elements/utils/render-roots.ts b/web/src/elements/utils/render-roots.ts
index ead7f7de8843..1612f735faa1 100644
--- a/web/src/elements/utils/render-roots.ts
+++ b/web/src/elements/utils/render-roots.ts
@@ -25,7 +25,7 @@ export function resolveInterface<T extends HTMLElement = LitElement>(ownerDocume
 export function findTopmost(ownerDocument = document): HTMLElement {
     const interfaceElement = resolveInterface(ownerDocument);
 
-    const dialogs = interfaceElement.renderRoot.querySelectorAll<HTMLDialogElement>("dialog:open");
+    const dialogs = interfaceElement.renderRoot.querySelectorAll<HTMLDialogElement>("dialog[open]");
     return dialogs.length ? dialogs[dialogs.length - 1] : ownerDocument.body;
 }
 

From 24e9aace2ffd2472a9cb7dd8bf03acec3094eca5 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 08:11:32 +0200
Subject: [PATCH 18/21] Remove unused.

---
 web/e2e/fixtures/FormFixture.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/web/e2e/fixtures/FormFixture.ts b/web/e2e/fixtures/FormFixture.ts
index e758bb4a3532..2b47d2aa85e6 100644
--- a/web/e2e/fixtures/FormFixture.ts
+++ b/web/e2e/fixtures/FormFixture.ts
@@ -162,12 +162,6 @@ export class FormFixture extends PageFixture {
         await expect(group, `Field "${groupName}" should be visible`).toBeVisible();
         const control = parent.getByRole("radio", { name: fieldName });
 
-        // await control.scrollIntoViewIfNeeded();
-        // await expect(control, `Option "${fieldName}" should be visible`).toBeVisible();
-
-        // TODO: setChecked seems to be buggy with our custom radio buttons, so we use click for now. Revisit this if we switch to native radios.
-        // await control.click();
-        // await expect(control, `Option "${fieldName}" should be checked`).toBeChecked();
         await control.setChecked(true);
     };
 

From 32ac9eed4ea14a7591455b9cf10bcc215891a064 Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 08:14:07 +0200
Subject: [PATCH 19/21] Spellcheck.

---
 web/src/elements/dialogs/ak-modal.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/elements/dialogs/ak-modal.ts b/web/src/elements/dialogs/ak-modal.ts
index eb54a98374d7..e9cce6ce2fe8 100644
--- a/web/src/elements/dialogs/ak-modal.ts
+++ b/web/src/elements/dialogs/ak-modal.ts
@@ -472,7 +472,7 @@ export class AKModal extends AKElement implements TransclusionParentElement {
             }
 
             if (slottedElement && !slottedElement.renderHeader) {
-                // Slotted element is possibily nested, but does not implement a header render method,
+                // Slotted element is possibly nested, but does not implement a header render method,
                 // so we cannot render a header for it.
                 return null;
             }
@@ -511,7 +511,7 @@ export class AKModal extends AKElement implements TransclusionParentElement {
                 return null;
             }
             if (slottedElement && !slottedElement.renderActions) {
-                // Slotted element is possibily nested, but does not implement an actions render method,
+                // Slotted element is possibly nested, but does not implement an actions render method,
                 // so we cannot render actions for it.
                 return null;
             }

From 54425ceb934fcedf2c5ecde92fc7a61e02b5e7df Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 08:24:45 +0200
Subject: [PATCH 20/21] Partial type fix.

---
 web/src/admin/policies/BoundPoliciesList.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/admin/policies/BoundPoliciesList.ts b/web/src/admin/policies/BoundPoliciesList.ts
index 108d79e0087c..c159cedbcb10 100644
--- a/web/src/admin/policies/BoundPoliciesList.ts
+++ b/web/src/admin/policies/BoundPoliciesList.ts
@@ -89,7 +89,7 @@ export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends
 
     protected getPolicyUserGroupRowLabel(item: PolicyBinding): string {
         if (item.policy) {
-            return msg(str`Policy ${item.policyObj.name}`);
+            return msg(str`Policy ${item.policyObj?.name}`);
         } else if (item.group) {
             return msg(str`Group ${item.groupObj?.name}`);
         } else if (item.user) {
@@ -114,7 +114,7 @@ export class BoundPoliciesList<T extends PolicyBinding = PolicyBinding> extends
             return html`<button
                 type="button"
                 class="pf-c-button pf-m-secondary"
-                ${asInstanceInvokerByTagName(item.policyObj.component, item.policyObj.pk)}
+                ${asInstanceInvokerByTagName(item.policyObj?.component, item.policyObj?.pk)}
             >
                 ${msg("Edit Policy")}
             </button>`;

From 9b32bde07d16ea2827e507219966792bf36980ce Mon Sep 17 00:00:00 2001
From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Date: Sat, 11 Apr 2026 08:33:31 +0200
Subject: [PATCH 21/21] Fix translation.

---
 .../wizard/steps/ak-application-wizard-edit-binding-step.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts
index 468973df94b0..539c51248944 100644
--- a/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts
+++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts
@@ -26,7 +26,7 @@ import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWiz
 
 import { CoreApi, Group, PoliciesApi, Policy, PolicyBinding, User } from "@goauthentik/api";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { html, nothing } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
 
@@ -162,7 +162,7 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep<Poli
                 .config=${this.searchSelectConfigs(policyKind)}
                 class="policy-search-select"
                 blankable
-                placeholder=${msg(`Select a ${title}...`)}
+                placeholder=${msg(str`Select a ${title}...`)}
             ></ak-search-select-ez>
         </ak-form-element-horizontal>`;
     }