diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts
index 124e64bd6..911befcbb 100644
--- a/web/src/elements/EmptyState.ts
+++ b/web/src/elements/EmptyState.ts
@@ -4,7 +4,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import AKGlobal from "../authentik.css";
 
-import { SpinnerSize } from "./Spinner";
+import { PFSize } from "./Spinner";
 
 @customElement("ak-empty-state")
 export class EmptyState extends LitElement {
@@ -30,7 +30,7 @@ export class EmptyState extends LitElement {
             <div class="pf-c-empty-state__content">
                 ${this.loading ?
                     html`<div class="pf-c-empty-state__icon">
-                        <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+                        <ak-spinner size=${PFSize.XLarge}></ak-spinner>
                     </div>`:
                     html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`}
                 <h1 class="pf-c-title pf-m-lg">
diff --git a/web/src/elements/Spinner.ts b/web/src/elements/Spinner.ts
index 84ca4c199..d4888c9bd 100644
--- a/web/src/elements/Spinner.ts
+++ b/web/src/elements/Spinner.ts
@@ -2,7 +2,7 @@ import { t } from "@lingui/macro";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 
-export enum SpinnerSize {
+export enum PFSize {
     Small = "pf-m-sm",
     Medium = "pf-m-md",
     Large = "pf-m-lg",
@@ -12,7 +12,7 @@ export enum SpinnerSize {
 @customElement("ak-spinner")
 export class Spinner extends LitElement {
     @property()
-    size: SpinnerSize = SpinnerSize.Medium;
+    size: PFSize = PFSize.Medium;
 
     static get styles(): CSSResult[] {
         return [PFSpinner];
diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 507243094..401639bff 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -12,11 +12,12 @@ import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../../authentik.css";
+import { PFSize } from "../Spinner";
 
 @customElement("ak-modal-button")
 export class ModalButton extends LitElement {
     @property()
-    href?: string;
+    size: PFSize = PFSize.Large;
 
     @property({type: Boolean})
     open = false;
@@ -78,7 +79,7 @@ export class ModalButton extends LitElement {
         return html`<div class="pf-c-backdrop">
             <div class="pf-l-bullseye">
                 <div
-                    class="pf-c-modal-box pf-m-lg"
+                    class="pf-c-modal-box ${this.size}"
                     role="dialog"
                     aria-modal="true"
                 >
diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts
index 5476ea27f..71c7c5d84 100644
--- a/web/src/elements/buttons/SpinnerButton.ts
+++ b/web/src/elements/buttons/SpinnerButton.ts
@@ -3,7 +3,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import AKGlobal from "../../authentik.css";
-import { SpinnerSize } from "../Spinner";
+import { PFSize } from "../Spinner";
 import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
 
 @customElement("ak-spinner-button")
@@ -69,7 +69,7 @@ export class SpinnerButton extends LitElement {
             }}>
             ${this.isRunning
                 ? html` <span class="pf-c-button__progress">
-                            <ak-spinner size=${SpinnerSize.Medium}></ak-spinner>
+                            <ak-spinner size=${PFSize.Medium}></ak-spinner>
                         </span>`
                 : ""}
             <slot></slot>
diff --git a/web/src/elements/cards/AggregatePromiseCard.ts b/web/src/elements/cards/AggregatePromiseCard.ts
index bf2bf0eaf..b36a189c9 100644
--- a/web/src/elements/cards/AggregatePromiseCard.ts
+++ b/web/src/elements/cards/AggregatePromiseCard.ts
@@ -2,7 +2,7 @@ import { customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
 import { AggregateCard } from "./AggregateCard";
 import "../Spinner";
-import { SpinnerSize } from "../Spinner";
+import { PFSize } from "../Spinner";
 
 @customElement("ak-aggregate-card-promise")
 export class AggregatePromiseCard extends AggregateCard {
@@ -20,7 +20,7 @@ export class AggregatePromiseCard extends AggregateCard {
 
     renderInner(): TemplateResult {
         return html`<p class="center-value">
-            ${until(this.promiseProxy(), html`<ak-spinner size="${SpinnerSize.Large}"></ak-spinner>`)}
+            ${until(this.promiseProxy(), html`<ak-spinner size="${PFSize.Large}"></ak-spinner>`)}
         </p>`;
     }
 
diff --git a/web/src/flows/FlowExecutor.ts b/web/src/flows/FlowExecutor.ts
index b422b6d1c..dbad89642 100644
--- a/web/src/flows/FlowExecutor.ts
+++ b/web/src/flows/FlowExecutor.ts
@@ -40,7 +40,7 @@ import { DEFAULT_CONFIG } from "../api/Config";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { until } from "lit-html/directives/until";
 import { AccessDeniedChallenge } from "./access_denied/FlowAccessDenied";
-import { SpinnerSize } from "../elements/Spinner";
+import { PFSize } from "../elements/Spinner";
 import { TITLE_SUFFIX } from "../constants";
 
 @customElement("ak-flow-executor")
@@ -164,7 +164,7 @@ export class FlowExecutor extends LitElement implements StageHost {
 
     renderLoading(): TemplateResult {
         return html`<div class="ak-loading">
-            <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+            <ak-spinner size=${PFSize.XLarge}></ak-spinner>
         </div>`;
     }
 
diff --git a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
index d02788e3b..93ed4947c 100644
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
@@ -7,7 +7,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import AKGlobal from "../../../authentik.css";
-import { SpinnerSize } from "../../../elements/Spinner";
+import { PFSize } from "../../../elements/Spinner";
 import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
 import { BaseStage } from "../base";
 import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
@@ -91,7 +91,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
                 html`<div class="pf-c-empty-state__content">
                         <div class="pf-l-bullseye">
                             <div class="pf-l-bullseye__item">
-                                <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
+                                <ak-spinner size="${PFSize.XLarge}"></ak-spinner>
                             </div>
                         </div>
                     </div>`:
diff --git a/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
index ff2f52134..b5ece5387 100644
--- a/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
+++ b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
@@ -8,7 +8,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import AKGlobal from "../../../authentik.css";
-import { SpinnerSize } from "../../../elements/Spinner";
+import { PFSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
 
@@ -100,7 +100,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
                     html`<div class="pf-c-empty-state__content">
                             <div class="pf-l-bullseye">
                                 <div class="pf-l-bullseye__item">
-                                    <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
+                                    <ak-spinner size="${PFSize.XLarge}"></ak-spinner>
                                 </div>
                             </div>
                         </div>`:
diff --git a/web/src/flows/stages/captcha/CaptchaStage.ts b/web/src/flows/stages/captcha/CaptchaStage.ts
index 5fc87a495..e622ee661 100644
--- a/web/src/flows/stages/captcha/CaptchaStage.ts
+++ b/web/src/flows/stages/captcha/CaptchaStage.ts
@@ -8,7 +8,7 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import AKGlobal from "../../../authentik.css";
-import { SpinnerSize } from "../../../elements/Spinner";
+import { PFSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import "../../../elements/forms/FormElement";
 import "../../../elements/EmptyState";
@@ -83,7 +83,7 @@ export class CaptchaStage extends BaseStage {
                         </div>
                     </ak-form-static>
                     <div class="ak-loading">
-                        <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+                        <ak-spinner size=${PFSize.XLarge}></ak-spinner>
                     </div>
                 </form>
             </div>
diff --git a/web/src/pages/admin-overview/cards/AdminStatusCard.ts b/web/src/pages/admin-overview/cards/AdminStatusCard.ts
index af06f975d..bfca58a5d 100644
--- a/web/src/pages/admin-overview/cards/AdminStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/AdminStatusCard.ts
@@ -2,7 +2,7 @@ import { html, TemplateResult } from "lit-html";
 import { until } from "lit-html/directives/until";
 import { EVENT_REFRESH } from "../../../constants";
 import { AggregateCard } from "../../../elements/cards/AggregateCard";
-import { SpinnerSize } from "../../../elements/Spinner";
+import { PFSize } from "../../../elements/Spinner";
 
 export interface AdminStatus {
     icon: string;
@@ -38,7 +38,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
                         <i class="${status.icon}"></i>&nbsp;${this.renderValue()}
                     </p>
                     ${status.message ? html`<p class="subtext">${status.message}</p>` : html``}`;
-            }), html`<ak-spinner size="${SpinnerSize.Large}"></ak-spinner>`)}
+            }), html`<ak-spinner size="${PFSize.Large}"></ak-spinner>`)}
         </p>`;
     }
 }
diff --git a/web/src/pages/events/EventInfo.ts b/web/src/pages/events/EventInfo.ts
index e7490ceab..7203a801b 100644
--- a/web/src/pages/events/EventInfo.ts
+++ b/web/src/pages/events/EventInfo.ts
@@ -4,7 +4,7 @@ import { until } from "lit-html/directives/until";
 import { FlowsApi } from "authentik-api";
 import "../../elements/Spinner";
 import "../../elements/Expand";
-import { SpinnerSize } from "../../elements/Spinner";
+import { PFSize } from "../../elements/Spinner";
 import { EventContext, EventWithContext } from "../../api/Events";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
@@ -91,7 +91,7 @@ export class EventInfo extends LitElement {
 
     render(): TemplateResult {
         if (!this.event) {
-            return html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`;
+            return html`<ak-spinner size=${PFSize.Medium}></ak-spinner>`;
         }
         switch (this.event?.action) {
         case "model_created":
@@ -113,7 +113,7 @@ export class EventInfo extends LitElement {
                             flowUuid: this.event.context.flow as string,
                         }).then(resp => {
                             return html`<a href="#/flow/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
-                        }), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}
+                        }), html`<ak-spinner size=${PFSize.Medium}></ak-spinner>`)}
                         </span>
                     </div>
                 </div>