diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index 522470ca3b..6eb2e0ed85 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -5,7 +5,6 @@ import {
     TITLE_DEFAULT,
 } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
-import { purify } from "@goauthentik/common/purify";
 import { configureSentry } from "@goauthentik/common/sentry";
 import { first } from "@goauthentik/common/utils";
 import { WebsocketClient } from "@goauthentik/common/ws";
@@ -14,6 +13,7 @@ import "@goauthentik/elements/LoadingOverlay";
 import "@goauthentik/elements/ak-locale-context";
 import { DefaultBrand } from "@goauthentik/elements/sidebar/SidebarBrand";
 import { themeImage } from "@goauthentik/elements/utils/images";
+import "@goauthentik/flow/components/ak-brand-footer";
 import "@goauthentik/flow/sources/apple/AppleLoginInit";
 import "@goauthentik/flow/sources/plex/PlexLoginInit";
 import "@goauthentik/flow/stages/FlowErrorStage";
@@ -537,27 +537,10 @@ export class FlowExecutor extends Interface implements StageHost {
                                             </div>
                                             ${until(this.renderChallenge())}
                                         </div>
-                                        <footer class="pf-c-login__footer">
-                                            <ul class="pf-c-list pf-m-inline">
-                                                ${this.brand?.uiFooterLinks?.map((link) => {
-                                                    if (link.href) {
-                                                        return html`${purify(
-                                                            html`<li>
-                                                                <a href="${link.href}"
-                                                                    >${link.name}</a
-                                                                >
-                                                            </li>`,
-                                                        )}`;
-                                                    }
-                                                    return html`<li>
-                                                        <span>${link.name}</span>
-                                                    </li>`;
-                                                })}
-                                                <li>
-                                                    <span>${msg("Powered by authentik")}</span>
-                                                </li>
-                                            </ul>
-                                        </footer>
+                                        <ak-brand-links
+                                            class="pf-c-login__footer"
+                                            .links=${this.brand?.uiFooterLinks ?? []}
+                                        ></ak-brand-links>
                                     </div>
                                 </div>
                             </div>
diff --git a/web/src/flow/components/ak-brand-footer.ts b/web/src/flow/components/ak-brand-footer.ts
new file mode 100644
index 0000000000..a30cb4ddcc
--- /dev/null
+++ b/web/src/flow/components/ak-brand-footer.ts
@@ -0,0 +1,51 @@
+import { purify } from "@goauthentik/common/purify";
+import { AKElement } from "@goauthentik/elements/Base.js";
+
+import { msg } from "@lit/localize";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+
+import PFList from "@patternfly/patternfly/components/List/list.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { FooterLink } from "@goauthentik/api";
+
+const styles = css`
+    .pf-c-list a {
+        color: unset;
+    }
+    ul.pf-c-list.pf-m-inline {
+        justify-content: center;
+        padding: calc(var(--pf-global--spacer--xs) / 2) 0px;
+    }
+`;
+
+const poweredBy: FooterLink = { name: msg("Powered by authentik"), href: null };
+
+@customElement("ak-brand-links")
+export class BrandLinks extends AKElement {
+    static get styles() {
+        return [PFBase, PFList, styles];
+    }
+
+    @property({ type: Array, attribute: false })
+    links: FooterLink[] = [];
+
+    render() {
+        const links = [...(this.links ?? []), poweredBy];
+        return html` <ul class="pf-c-list pf-m-inline">
+            ${map(links, (link) =>
+                link.href
+                    ? purify(html`<li><a href="${link.href}">${link.name}</a></li>`)
+                    : html`<li><span>${link.name}</span></li>`,
+            )}
+        </ul>`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-brand-links": BrandLinks;
+    }
+}