web: Fix brand preference order. Adjust header height.

web: Safari fixes merge branch (#14181 )
* web/admin: Fix layout centering. Adjust theming. * web: Fix issue where references to Lit SSR break page styles. * web: Fix issues surrounding color scheme/theme mixup in UI.
2025-04-24 19:05:46 +02:00 · 2025-04-24 10:16:04 -04:00 · 2025-04-24 13:52:37 +02:00 · 2025-04-24 13:34:43 +02:00 · 2025-04-24 11:20:37 +00:00 · 2025-04-24 13:03:04 +02:00
79 changed files with 2192 additions and 1100 deletions
--- a/authentik/outposts/models.py
+++ b/authentik/outposts/models.py
@ -74,6 +74,8 @@ class OutpostConfig:
    kubernetes_ingress_annotations: dict[str, str] = field(default_factory=dict)
    kubernetes_ingress_secret_name: str = field(default="authentik-outpost-tls")
    kubernetes_ingress_class_name: str | None = field(default=None)
+    kubernetes_httproute_annotations: dict[str, str] = field(default_factory=dict)
+    kubernetes_httproute_parent_refs: list[dict[str, str]] = field(default_factory=list)
    kubernetes_service_type: str = field(default="ClusterIP")
    kubernetes_disabled_components: list[str] = field(default_factory=list)
    kubernetes_image_pull_secrets: list[str] = field(default_factory=list)
--- a/authentik/providers/proxy/controllers/k8s/httproute.py
+++ b/authentik/providers/proxy/controllers/k8s/httproute.py
@ -0,0 +1,234 @@
+from dataclasses import asdict, dataclass, field
+from typing import TYPE_CHECKING
+from urllib.parse import urlparse
+
+from dacite.core import from_dict
+from kubernetes.client import ApiextensionsV1Api, CustomObjectsApi, V1ObjectMeta
+
+from authentik.outposts.controllers.base import FIELD_MANAGER
+from authentik.outposts.controllers.k8s.base import KubernetesObjectReconciler
+from authentik.outposts.controllers.k8s.triggers import NeedsUpdate
+from authentik.outposts.controllers.kubernetes import KubernetesController
+from authentik.providers.proxy.models import ProxyMode, ProxyProvider
+
+if TYPE_CHECKING:
+    from authentik.outposts.controllers.kubernetes import KubernetesController
+
+
+@dataclass(slots=True)
+class RouteBackendRef:
+    name: str
+    port: int
+
+
+@dataclass(slots=True)
+class RouteSpecParentRefs:
+    name: str
+    sectionName: str | None = None
+    port: int | None = None
+    namespace: str | None = None
+    kind: str = "Gateway"
+    group: str = "gateway.networking.k8s.io"
+
+
+@dataclass(slots=True)
+class HTTPRouteSpecRuleMatchPath:
+    type: str
+    value: str
+
+
+@dataclass(slots=True)
+class HTTPRouteSpecRuleMatchHeader:
+    name: str
+    value: str
+    type: str = "Exact"
+
+
+@dataclass(slots=True)
+class HTTPRouteSpecRuleMatch:
+    path: HTTPRouteSpecRuleMatchPath
+    headers: list[HTTPRouteSpecRuleMatchHeader]
+
+
+@dataclass(slots=True)
+class HTTPRouteSpecRule:
+    backendRefs: list[RouteBackendRef]
+    matches: list[HTTPRouteSpecRuleMatch]
+
+
+@dataclass(slots=True)
+class HTTPRouteSpec:
+    parentRefs: list[RouteSpecParentRefs]
+    hostnames: list[str]
+    rules: list[HTTPRouteSpecRule]
+
+
+@dataclass(slots=True)
+class HTTPRouteMetadata:
+    name: str
+    namespace: str
+    annotations: dict = field(default_factory=dict)
+    labels: dict = field(default_factory=dict)
+
+
+@dataclass(slots=True)
+class HTTPRoute:
+    apiVersion: str
+    kind: str
+    metadata: HTTPRouteMetadata
+    spec: HTTPRouteSpec
+
+
+class HTTPRouteReconciler(KubernetesObjectReconciler):
+    """Kubernetes Gateway API HTTPRoute Reconciler"""
+
+    def __init__(self, controller: "KubernetesController") -> None:
+        super().__init__(controller)
+        self.api_ex = ApiextensionsV1Api(controller.client)
+        self.api = CustomObjectsApi(controller.client)
+        self.crd_group = "gateway.networking.k8s.io"
+        self.crd_version = "v1"
+        self.crd_plural = "httproutes"
+
+    @staticmethod
+    def reconciler_name() -> str:
+        return "httproute"
+
+    @property
+    def noop(self) -> bool:
+        if not self.crd_exists():
+            self.logger.debug("CRD doesn't exist")
+            return True
+        if not self.controller.outpost.config.kubernetes_httproute_parent_refs:
+            self.logger.debug("HTTPRoute parentRefs not set.")
+            return True
+        return False
+
+    def crd_exists(self) -> bool:
+        """Check if the Gateway API resources exists"""
+        return bool(
+            len(
+                self.api_ex.list_custom_resource_definition(
+                    field_selector=f"metadata.name={self.crd_plural}.{self.crd_group}"
+                ).items
+            )
+        )
+
+    def reconcile(self, current: HTTPRoute, reference: HTTPRoute):
+        super().reconcile(current, reference)
+        if current.metadata.annotations != reference.metadata.annotations:
+            raise NeedsUpdate()
+        if current.spec.parentRefs != reference.spec.parentRefs:
+            raise NeedsUpdate()
+        if current.spec.hostnames != reference.spec.hostnames:
+            raise NeedsUpdate()
+        if current.spec.rules != reference.spec.rules:
+            raise NeedsUpdate()
+
+    def get_object_meta(self, **kwargs) -> V1ObjectMeta:
+        return super().get_object_meta(
+            **kwargs,
+        )
+
+    def get_reference_object(self) -> HTTPRoute:
+        hostnames = []
+        rules = []
+
+        for proxy_provider in ProxyProvider.objects.filter(outpost__in=[self.controller.outpost]):
+            proxy_provider: ProxyProvider
+            external_host_name = urlparse(proxy_provider.external_host)
+            if proxy_provider.mode in [ProxyMode.FORWARD_SINGLE, ProxyMode.FORWARD_DOMAIN]:
+                rule = HTTPRouteSpecRule(
+                    backendRefs=[RouteBackendRef(name=self.name, port=9000)],
+                    matches=[
+                        HTTPRouteSpecRuleMatch(
+                            headers=[
+                                HTTPRouteSpecRuleMatchHeader(
+                                    name="Host",
+                                    value=external_host_name.hostname,
+                                )
+                            ],
+                            path=HTTPRouteSpecRuleMatchPath(
+                                type="PathPrefix", value="/outpost.goauthentik.io"
+                            ),
+                        )
+                    ],
+                )
+            else:
+                rule = HTTPRouteSpecRule(
+                    backendRefs=[RouteBackendRef(name=self.name, port=9000)],
+                    matches=[
+                        HTTPRouteSpecRuleMatch(
+                            headers=[
+                                HTTPRouteSpecRuleMatchHeader(
+                                    name="Host",
+                                    value=external_host_name.hostname,
+                                )
+                            ],
+                            path=HTTPRouteSpecRuleMatchPath(type="PathPrefix", value="/"),
+                        )
+                    ],
+                )
+            hostnames.append(external_host_name.hostname)
+            rules.append(rule)
+
+        return HTTPRoute(
+            apiVersion=f"{self.crd_group}/{self.crd_version}",
+            kind="HTTPRoute",
+            metadata=HTTPRouteMetadata(
+                name=self.name,
+                namespace=self.namespace,
+                annotations=self.controller.outpost.config.kubernetes_httproute_annotations,
+                labels=self.get_object_meta().labels,
+            ),
+            spec=HTTPRouteSpec(
+                parentRefs=[
+                    from_dict(RouteSpecParentRefs, spec)
+                    for spec in self.controller.outpost.config.kubernetes_httproute_parent_refs
+                ],
+                hostnames=hostnames,
+                rules=rules,
+            ),
+        )
+
+    def create(self, reference: HTTPRoute):
+        return self.api.create_namespaced_custom_object(
+            group=self.crd_group,
+            version=self.crd_version,
+            plural=self.crd_plural,
+            namespace=self.namespace,
+            body=asdict(reference),
+            field_manager=FIELD_MANAGER,
+        )
+
+    def delete(self, reference: HTTPRoute):
+        return self.api.delete_namespaced_custom_object(
+            group=self.crd_group,
+            version=self.crd_version,
+            plural=self.crd_plural,
+            namespace=self.namespace,
+            name=self.name,
+        )
+
+    def retrieve(self) -> HTTPRoute:
+        return from_dict(
+            HTTPRoute,
+            self.api.get_namespaced_custom_object(
+                group=self.crd_group,
+                version=self.crd_version,
+                plural=self.crd_plural,
+                namespace=self.namespace,
+                name=self.name,
+            ),
+        )
+
+    def update(self, current: HTTPRoute, reference: HTTPRoute):
+        return self.api.patch_namespaced_custom_object(
+            group=self.crd_group,
+            version=self.crd_version,
+            plural=self.crd_plural,
+            namespace=self.namespace,
+            name=self.name,
+            body=asdict(reference),
+            field_manager=FIELD_MANAGER,
+        )
--- a/authentik/providers/proxy/controllers/kubernetes.py
+++ b/authentik/providers/proxy/controllers/kubernetes.py
@ -3,6 +3,7 @@
 from authentik.outposts.controllers.base import DeploymentPort
 from authentik.outposts.controllers.kubernetes import KubernetesController
 from authentik.outposts.models import KubernetesServiceConnection, Outpost
+from authentik.providers.proxy.controllers.k8s.httproute import HTTPRouteReconciler
 from authentik.providers.proxy.controllers.k8s.ingress import IngressReconciler
 from authentik.providers.proxy.controllers.k8s.traefik import TraefikMiddlewareReconciler

@ -18,8 +19,10 @@ class ProxyKubernetesController(KubernetesController):
            DeploymentPort(9443, "https", "tcp"),
        ]
        self.reconcilers[IngressReconciler.reconciler_name()] = IngressReconciler
+        self.reconcilers[HTTPRouteReconciler.reconciler_name()] = HTTPRouteReconciler
        self.reconcilers[TraefikMiddlewareReconciler.reconciler_name()] = (
            TraefikMiddlewareReconciler
        )
        self.reconcile_order.append(IngressReconciler.reconciler_name())
+        self.reconcile_order.append(HTTPRouteReconciler.reconciler_name())
        self.reconcile_order.append(TraefikMiddlewareReconciler.reconciler_name())
--- a/go.mod
+++ b/go.mod
@ -27,7 +27,7 @@ require (
 	github.com/spf13/cobra v1.9.1
 	github.com/stretchr/testify v1.10.0
 	github.com/wwt/guac v1.3.2
-	goauthentik.io/api/v3 v3.2025024.8
+	goauthentik.io/api/v3 v3.2025024.9
 	golang.org/x/exp v0.0.0-20230210204819-062eb4c674ab
 	golang.org/x/oauth2 v0.29.0
 	golang.org/x/sync v0.13.0
--- a/go.sum
+++ b/go.sum
@ -290,8 +290,8 @@ go.opentelemetry.io/otel/trace v1.24.0 h1:CsKnnL4dUAr/0llH9FKuc698G04IrpWV0MQA/Y
 go.opentelemetry.io/otel/trace v1.24.0/go.mod h1:HPc3Xr/cOApsBI154IU0OI0HJexz+aw5uPdbs3UCjNU=
 go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
 go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
-goauthentik.io/api/v3 v3.2025024.8 h1:2mG4CqGSsmZq2CtRehxpDjsER43U/JQSoTOn5VC1ui4=
-goauthentik.io/api/v3 v3.2025024.8/go.mod h1:zz+mEZg8rY/7eEjkMGWJ2DnGqk+zqxuybGCGrR2O4Kw=
+goauthentik.io/api/v3 v3.2025024.9 h1:i3tbkyotE32ZpJ729BsPWTuLQUdtZ54Li4aP1amZzsM=
+goauthentik.io/api/v3 v3.2025024.9/go.mod h1:zz+mEZg8rY/7eEjkMGWJ2DnGqk+zqxuybGCGrR2O4Kw=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
--- a/lifecycle/aws/package-lock.json
+++ b/lifecycle/aws/package-lock.json
@ -9,7 +9,7 @@
            "version": "0.0.0",
            "license": "MIT",
            "devDependencies": {
-                "aws-cdk": "^2.1010.0",
+                "aws-cdk": "^2.1012.0",
                "cross-env": "^7.0.3"
            },
            "engines": {
@ -17,9 +17,9 @@
            }
        },
        "node_modules/aws-cdk": {
-            "version": "2.1010.0",
-            "resolved": "https://registry.npmjs.org/aws-cdk/-/aws-cdk-2.1010.0.tgz",
-            "integrity": "sha512-kYNzBXVUZoRrTuYxRRA2Loz/Uvay0MqHobg8KPZaWylIbw/meUDgtoATRNt+stOdJ9PHODTjWmlDKI+2/KoF+w==",
+            "version": "2.1012.0",
+            "resolved": "https://registry.npmjs.org/aws-cdk/-/aws-cdk-2.1012.0.tgz",
+            "integrity": "sha512-C6jSWkqP0hkY2Cs300VJHjspmTXDTMfB813kwZvRbd/OsKBfTBJBbYU16VoLAp1LVEOnQMf8otSlaSgzVF0X9A==",
            "dev": true,
            "license": "Apache-2.0",
            "bin": {
--- a/lifecycle/aws/package.json
+++ b/lifecycle/aws/package.json
@ -10,7 +10,7 @@
        "node": ">=20"
    },
    "devDependencies": {
-        "aws-cdk": "^2.1010.0",
+        "aws-cdk": "^2.1012.0",
        "cross-env": "^7.0.3"
    }
 }
--- a/lifecycle/system_migrations/tenant_to_brand.py
+++ b/lifecycle/system_migrations/tenant_to_brand.py
@ -3,7 +3,7 @@ from lifecycle.migrate import BaseMigration

 SQL_STATEMENT = """
 BEGIN TRANSACTION;
-ALTER TABLE authentik_tenants_tenant RENAME TO authentik_brands_brand;
+ALTER TABLE IF EXISTS authentik_tenants_tenant RENAME TO authentik_brands_brand;
 UPDATE django_migrations SET app = replace(app, 'authentik_tenants', 'authentik_brands');
 UPDATE django_content_type SET app_label = replace(app_label, 'authentik_tenants', 'authentik_brands');
 COMMIT;
--- a/locale/en/LC_MESSAGES/django.po
+++ b/locale/en/LC_MESSAGES/django.po
@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-04-22 13:40+0000\n"
+"POT-Creation-Date: 2025-04-23 09:00+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@ -1255,20 +1255,6 @@ msgstr ""
 msgid "Reputation Scores"
 msgstr ""

-#: authentik/policies/templates/policies/buffer.html
-msgid "Waiting for authentication..."
-msgstr ""
-
-#: authentik/policies/templates/policies/buffer.html
-msgid ""
-"You're already authenticating in another tab. This page will refresh once "
-"authentication is completed."
-msgstr ""
-
-#: authentik/policies/templates/policies/buffer.html
-msgid "Authenticate in this tab"
-msgstr ""
-
 #: authentik/policies/templates/policies/denied.html
 msgid "Permission denied"
 msgstr ""
--- a/locale/fr/LC_MESSAGES/django.po
+++ b/locale/fr/LC_MESSAGES/django.po
@ -9,8 +9,8 @@
 # Kyllian Delaye-Maillot, 2023
 # Manuel Viens, 2023
 # Mordecai, 2023
+# Tina, 2024
 # Charles Leclerc, 2025
-# Tina, 2025
 # nerdinator <florian.dupret@gmail.com>, 2025
 # Marc Schmitt, 2025
 # 
@ -19,7 +19,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-04-17 00:09+0000\n"
+"POT-Creation-Date: 2025-04-23 09:00+0000\n"
 "PO-Revision-Date: 2022-09-26 16:47+0000\n"
 "Last-Translator: Marc Schmitt, 2025\n"
 "Language-Team: French (https://app.transifex.com/authentik/teams/119923/fr/)\n"
@ -502,6 +502,38 @@ msgstr "Utilisation de la licence"
 msgid "License Usage Records"
 msgstr "Registre d'utilisation de la licence"

+#: authentik/enterprise/policies/unique_password/models.py
+#: authentik/policies/password/models.py
+msgid "Field key to check, field keys defined in Prompt stages are available."
+msgstr ""
+"Clé de champ à vérifier ; les clés de champ définies dans les étapes de "
+"d'invite sont disponibles."
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Number of passwords to check against."
+msgstr "Nombre de mots de passe à vérifier."
+
+#: authentik/enterprise/policies/unique_password/models.py
+#: authentik/policies/password/models.py
+msgid "Password not set in context"
+msgstr "Mot de passe non défini dans le contexte"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "This password has been used previously. Please choose a different one."
+msgstr "Ce mot de passe a déjà été utilisé. Veuillez en choisir un autre."
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Password Uniqueness Policy"
+msgstr "Politique d'unicité des mots de passe"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Password Uniqueness Policies"
+msgstr "Politiques d'unicité des mots de passe"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "User Password History"
+msgstr "Historique des mots de passe utilisateur"
+
 #: authentik/enterprise/policy.py
 msgid "Enterprise required to access this feature."
 msgstr "Entreprise est requis pour accéder à cette fonctionnalité."
@ -1296,12 +1328,6 @@ msgstr "Voir les métriques de cache de la politique"
 msgid "Clear Policy's cache metrics"
 msgstr "Nettoyer les métriques de cache de la politique"

-#: authentik/policies/password/models.py
-msgid "Field key to check, field keys defined in Prompt stages are available."
-msgstr ""
-"Clé de champ à vérifier ; les clés de champ définies dans les étapes de "
-"d'invite sont disponibles."
-
 #: authentik/policies/password/models.py
 msgid "How many times the password hash is allowed to be on haveibeenpwned"
 msgstr ""
@ -1315,10 +1341,6 @@ msgstr ""
 "Si le score zxcvbn est égal ou inférieur à cette valeur, la politique "
 "échouera."

-#: authentik/policies/password/models.py
-msgid "Password not set in context"
-msgstr "Mot de passe non défini dans le contexte"
-
 #: authentik/policies/password/models.py
 msgid "Invalid password."
 msgstr "Mot de passe invalide."
@ -1360,22 +1382,6 @@ msgstr "Score de Réputation"
 msgid "Reputation Scores"
 msgstr "Scores de Réputation"

-#: authentik/policies/templates/policies/buffer.html
-msgid "Waiting for authentication..."
-msgstr "En attente de l'authentification..."
-
-#: authentik/policies/templates/policies/buffer.html
-msgid ""
-"You're already authenticating in another tab. This page will refresh once "
-"authentication is completed."
-msgstr ""
-"Vous êtes déjà en cours d'authentification dans un autre onglet. Cette page "
-"se rafraîchira lorsque l'authentification sera terminée."
-
-#: authentik/policies/templates/policies/buffer.html
-msgid "Authenticate in this tab"
-msgstr "S'authentifier dans cet onglet"
-
 #: authentik/policies/templates/policies/denied.html
 msgid "Permission denied"
 msgstr "Permission refusée"
@ -3485,6 +3491,15 @@ msgstr ""
 "Lorsqu'activé, l'étape réussira et continuera même lorsque les informations "
 "utilisateurs entrées sont invalides."

+#: authentik/stages/identification/models.py
+msgid ""
+"Show the user the 'Remember me on this device' toggle, allowing repeat users"
+" to skip straight to entering their password."
+msgstr ""
+"Afficher à l'utilisateur l'option \"Se souvenir de moi sur cet appareil\", "
+"afin de permettre aux utilisateurs réguliers de passer directement à la "
+"saisie de leur mot de passe."
+
 #: authentik/stages/identification/models.py
 msgid "Optional enrollment flow, which is linked at the bottom of the page."
 msgstr "Flux d'inscription facultatif, qui sera accessible en bas de page."
--- a/locale/zh-Hans/LC_MESSAGES/django.po
+++ b/locale/zh-Hans/LC_MESSAGES/django.po
@ -15,7 +15,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-04-18 00:09+0000\n"
+"POT-Creation-Date: 2025-04-23 09:00+0000\n"
 "PO-Revision-Date: 2022-09-26 16:47+0000\n"
 "Last-Translator: deluxghost, 2025\n"
 "Language-Team: Chinese Simplified (https://app.transifex.com/authentik/teams/119923/zh-Hans/)\n"
@ -461,6 +461,36 @@ msgstr "许可证使用情况"
 msgid "License Usage Records"
 msgstr "许可证使用情况记录"

+#: authentik/enterprise/policies/unique_password/models.py
+#: authentik/policies/password/models.py
+msgid "Field key to check, field keys defined in Prompt stages are available."
+msgstr "要检查的字段键，可以使用输入阶段中定义的字段键。"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Number of passwords to check against."
+msgstr "检查指定数量的密码。"
+
+#: authentik/enterprise/policies/unique_password/models.py
+#: authentik/policies/password/models.py
+msgid "Password not set in context"
+msgstr "未在上下文中设置密码"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "This password has been used previously. Please choose a different one."
+msgstr "此密码被使用过。请选择其他密码。"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Password Uniqueness Policy"
+msgstr "密码唯一性策略"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Password Uniqueness Policies"
+msgstr "密码唯一性策略"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "User Password History"
+msgstr "用户密码历史记录"
+
 #: authentik/enterprise/policy.py
 msgid "Enterprise required to access this feature."
 msgstr "访问此功能需要企业版。"
@ -1190,10 +1220,6 @@ msgstr "查看策略缓存指标"
 msgid "Clear Policy's cache metrics"
 msgstr "清除策略缓存指标"

-#: authentik/policies/password/models.py
-msgid "Field key to check, field keys defined in Prompt stages are available."
-msgstr "要检查的字段键，可以使用输入阶段中定义的字段键。"
-
 #: authentik/policies/password/models.py
 msgid "How many times the password hash is allowed to be on haveibeenpwned"
 msgstr "密码哈希允许出现在 HaveIBeenPwned 中多少次"
@ -1203,10 +1229,6 @@ msgid ""
 "If the zxcvbn score is equal or less than this value, the policy will fail."
 msgstr "如果 zxcvbn 分数小于等于此值，则策略失败。"

-#: authentik/policies/password/models.py
-msgid "Password not set in context"
-msgstr "未在上下文中设置密码"
-
 #: authentik/policies/password/models.py
 msgid "Invalid password."
 msgstr "无效密码。"
@ -1248,20 +1270,6 @@ msgstr "信誉分数"
 msgid "Reputation Scores"
 msgstr "信誉分数"

-#: authentik/policies/templates/policies/buffer.html
-msgid "Waiting for authentication..."
-msgstr "正在等待身份验证…"
-
-#: authentik/policies/templates/policies/buffer.html
-msgid ""
-"You're already authenticating in another tab. This page will refresh once "
-"authentication is completed."
-msgstr "您正在另一个标签页中验证身份。身份验证完成后，此页面会刷新。"
-
-#: authentik/policies/templates/policies/buffer.html
-msgid "Authenticate in this tab"
-msgstr "在此标签页中验证身份"
-
 #: authentik/policies/templates/policies/denied.html
 msgid "Permission denied"
 msgstr "权限被拒绝"
--- a/locale/zh_CN/LC_MESSAGES/django.po
+++ b/locale/zh_CN/LC_MESSAGES/django.po
@ -14,7 +14,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-04-18 00:09+0000\n"
+"POT-Creation-Date: 2025-04-23 09:00+0000\n"
 "PO-Revision-Date: 2022-09-26 16:47+0000\n"
 "Last-Translator: deluxghost, 2025\n"
 "Language-Team: Chinese (China) (https://app.transifex.com/authentik/teams/119923/zh_CN/)\n"
@ -460,6 +460,36 @@ msgstr "许可证使用情况"
 msgid "License Usage Records"
 msgstr "许可证使用情况记录"

+#: authentik/enterprise/policies/unique_password/models.py
+#: authentik/policies/password/models.py
+msgid "Field key to check, field keys defined in Prompt stages are available."
+msgstr "要检查的字段键，可以使用输入阶段中定义的字段键。"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Number of passwords to check against."
+msgstr "检查指定数量的密码。"
+
+#: authentik/enterprise/policies/unique_password/models.py
+#: authentik/policies/password/models.py
+msgid "Password not set in context"
+msgstr "未在上下文中设置密码"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "This password has been used previously. Please choose a different one."
+msgstr "此密码被使用过。请选择其他密码。"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Password Uniqueness Policy"
+msgstr "密码唯一性策略"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "Password Uniqueness Policies"
+msgstr "密码唯一性策略"
+
+#: authentik/enterprise/policies/unique_password/models.py
+msgid "User Password History"
+msgstr "用户密码历史记录"
+
 #: authentik/enterprise/policy.py
 msgid "Enterprise required to access this feature."
 msgstr "访问此功能需要企业版。"
@ -1189,10 +1219,6 @@ msgstr "查看策略缓存指标"
 msgid "Clear Policy's cache metrics"
 msgstr "清除策略缓存指标"

-#: authentik/policies/password/models.py
-msgid "Field key to check, field keys defined in Prompt stages are available."
-msgstr "要检查的字段键，可以使用输入阶段中定义的字段键。"
-
 #: authentik/policies/password/models.py
 msgid "How many times the password hash is allowed to be on haveibeenpwned"
 msgstr "密码哈希允许出现在 HaveIBeenPwned 中多少次"
@ -1202,10 +1228,6 @@ msgid ""
 "If the zxcvbn score is equal or less than this value, the policy will fail."
 msgstr "如果 zxcvbn 分数小于等于此值，则策略失败。"

-#: authentik/policies/password/models.py
-msgid "Password not set in context"
-msgstr "未在上下文中设置密码"
-
 #: authentik/policies/password/models.py
 msgid "Invalid password."
 msgstr "无效密码。"
@ -1247,20 +1269,6 @@ msgstr "信誉分数"
 msgid "Reputation Scores"
 msgstr "信誉分数"

-#: authentik/policies/templates/policies/buffer.html
-msgid "Waiting for authentication..."
-msgstr "正在等待身份验证…"
-
-#: authentik/policies/templates/policies/buffer.html
-msgid ""
-"You're already authenticating in another tab. This page will refresh once "
-"authentication is completed."
-msgstr "您正在另一个标签页中验证身份。身份验证完成后，此页面会刷新。"
-
-#: authentik/policies/templates/policies/buffer.html
-msgid "Authenticate in this tab"
-msgstr "在此标签页中验证身份"
-
 #: authentik/policies/templates/policies/denied.html
 msgid "Permission denied"
 msgstr "权限被拒绝"
--- a/packages/docusaurus-config/css/badges.css
+++ b/packages/docusaurus-config/css/badges.css
@ -18,9 +18,7 @@
 }

 .badge--support-community {
-    --ifm-badge-background-color: var(
-        --ifm-color-secondary-contrast-foreground
-    );
+    --ifm-badge-background-color: var(--ifm-color-secondary-contrast-foreground);
    --ifm-badge-border-color: var(--ifm-color-secondary-dark);
    --ifm-badge-color: var(--ifm-color-secondary-contrast-background);
 }
--- a/packages/docusaurus-config/css/fonts.css
+++ b/packages/docusaurus-config/css/fonts.css
@ -1,12 +1,12 @@
 :root {
    --ifm-font-family-base:
-        RedHatVF, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
-        Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        RedHatVF, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
+        sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --ifm-font-family-monospace:
-        RedHatMonoVF, SFMono-Regular, Menlo, Monaco, Consolas,
-        "Liberation Mono", "Courier New", monospace;
+        RedHatMonoVF, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+        monospace;

    --ifm-heading-font-family: RedHatDisplayVF, var(--ifm-font-family-base);

--- a/packages/docusaurus-config/css/homepage.css
+++ b/packages/docusaurus-config/css/homepage.css
@ -7,11 +7,7 @@
 }

 .homepage_hero__subtitle p {
-    font-size: clamp(
-        1.125rem,
-        0.9946rem + 0.6522vi,
-        1.5rem
-    ); /* Adjust font as page scales */
+    font-size: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem); /* Adjust font as page scales */
    max-width: 28ch; /* Apply a maximum to keep everything in the box */
    text-wrap: balance; /* Prevent widows, orphans, and runts. Doesn't work in Safari */
 }
--- a/packages/docusaurus-config/css/menu.css
+++ b/packages/docusaurus-config/css/menu.css
@ -1,5 +1,5 @@
 :root {
-    --ifm-menu-link-padding-vertical: 1em;
+    --ifm-menu-link-padding-vertical: 0.5em;
 }

 .menu__list-item {
--- a/packages/docusaurus-config/css/navbar.css
+++ b/packages/docusaurus-config/css/navbar.css
@ -75,17 +75,14 @@
        --ifm-navbar-item-padding-horizontal: 1rem;
    }

-    .docs-wrapper .navbar {
+    .navbar {
        margin: 0;
        padding-inline-start: 0;
    }

    .navbar__brand {
        justify-content: center;
-    }
-
-    .docs-wrapper .navbar__brand {
-        width: var(--doc-sidebar-width);
+        width: var(--doc-sidebar-width, 300px);
        margin: 0;
    }

@ -122,12 +119,8 @@

        @media (min-width: 999px) {
            border-inline-start: 1px solid var(--ifm-hover-overlay);
-            margin-inline-start: calc(
-                var(--ifm-navbar-item-padding-horizontal) / 2
-            );
-            padding-inline-start: calc(
-                var(--ifm-navbar-item-padding-horizontal) / 2
-            );
+            margin-inline-start: calc(var(--ifm-navbar-item-padding-horizontal) / 2);
+            padding-inline-start: calc(var(--ifm-navbar-item-padding-horizontal) / 2);
        }
    }

@ -151,19 +144,14 @@
        hsl(236.84deg 34.55% 10.78%)
    );
    --docsearch-key-shadow:
-        inset 0 -2px 0 0 hsl(233.33deg 36% 24.51%),
-        inset 0 0 1px 1px hsl(232.11deg 34.86% 57.25%),
+        inset 0 -2px 0 0 hsl(233.33deg 36% 24.51%), inset 0 0 1px 1px hsl(232.11deg 34.86% 57.25%),
        0 2px 2px 0 rgba(3, 4, 9, 0.3);
    --docsearch-key-pressed-shadow:
-        inset 0 -2px 0 0 #282d55,
-        inset 0 0 1px 1px hsl(231.82deg 21.36% 40.39%),
+        inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px hsl(231.82deg 21.36% 40.39%),
        0 1px 1px 0 hsl(230deg 50% 2.35% / 30.2%);

-    padding: var(--ifm-navbar-item-padding-vertical)
-        var(--ifm-navbar-item-padding-horizontal) !important;
-    padding-inline-end: calc(
-        var(--ifm-navbar-item-padding-horizontal) * 1.25
-    ) !important;
+    padding: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal) !important;
+    padding-inline-end: calc(var(--ifm-navbar-item-padding-horizontal) * 1.25) !important;

    .DocSearch-Button-Placeholder {
        font-family: var(--ifm-heading-font-family);
--- a/packages/docusaurus-config/css/root.css
+++ b/packages/docusaurus-config/css/root.css
@ -13,7 +13,3 @@

    --ifm-color-content: hsl(216 35% 3%);
 }
-
-body {
-    overscroll-behavior-x: none;
-}
--- a/packages/docusaurus-config/lib/common.js
+++ b/packages/docusaurus-config/lib/common.js
@ -4,8 +4,8 @@
 * @import { Config as DocusaurusConfig } from "@docusaurus/types"
 * @import { UserThemeConfig } from "./theme.js"
 */
-
 import { deepmerge } from "deepmerge-ts";
+
 import { createThemeConfig } from "./theme.js";

 //#region Types
--- a/packages/docusaurus-config/lib/theme.js
+++ b/packages/docusaurus-config/lib/theme.js
@ -4,7 +4,6 @@
 * @import { UserThemeConfig as UserThemeConfigCommon } from "@docusaurus/theme-common";
 * @import { UserThemeConfig as UserThemeConfigAlgolia } from "@docusaurus/theme-search-algolia";
 */
-
 import { deepmerge } from "deepmerge-ts";
 import { themes as prismThemes } from "prism-react-renderer";

--- a/packages/docusaurus-config/package-lock.json
+++ b/packages/docusaurus-config/package-lock.json
@ -1,12 +1,12 @@
 {
    "name": "@goauthentik/docusaurus-config",
-    "version": "1.0.2",
+    "version": "1.0.5",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@goauthentik/docusaurus-config",
-            "version": "1.0.2",
+            "version": "1.0.5",
            "license": "MIT",
            "dependencies": {
                "deepmerge-ts": "^7.1.5",
--- a/packages/docusaurus-config/package.json
+++ b/packages/docusaurus-config/package.json
@ -1,6 +1,6 @@
 {
    "name": "@goauthentik/docusaurus-config",
-    "version": "1.0.4",
+    "version": "1.0.5",
    "description": "authentik's Docusaurus config",
    "license": "MIT",
    "scripts": {
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -25,7 +25,6 @@
                "@formatjs/intl-listformat": "^7.5.7",
                "@fortawesome/fontawesome-free": "^6.6.0",
                "@goauthentik/api": "^2025.2.4-1745325566",
-                "@lit-labs/ssr": "^3.2.2",
                "@lit/context": "^1.1.2",
                "@lit/localize": "^0.12.2",
                "@lit/reactive-element": "^2.0.4",
@ -66,6 +65,7 @@
                "remark-gfm": "^4.0.1",
                "remark-mdx-frontmatter": "^5.0.0",
                "style-mod": "^4.1.2",
+                "trusted-types": "^2.0.0",
                "ts-pattern": "^5.4.0",
                "unist-util-visit": "^5.0.0",
                "webcomponent-qr-code": "^1.2.0",
@ -2281,47 +2281,11 @@
                "@lezer/lr": "^1.0.0"
            }
        },
-        "node_modules/@lit-labs/ssr": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-3.3.1.tgz",
-            "integrity": "sha512-JlF1PempxvzrGEpRFrF+Ki0MHzR3HA51SK8Zv0cFpW9p0bPW4k0FeCwrElCu371UEpXF7RcaE2wgYaE1az0XKg==",
-            "dependencies": {
-                "@lit-labs/ssr-client": "^1.1.7",
-                "@lit-labs/ssr-dom-shim": "^1.3.0",
-                "@lit/reactive-element": "^2.0.4",
-                "@parse5/tools": "^0.3.0",
-                "@types/node": "^16.0.0",
-                "enhanced-resolve": "^5.10.0",
-                "lit": "^3.1.2",
-                "lit-element": "^4.0.4",
-                "lit-html": "^3.1.2",
-                "node-fetch": "^3.2.8",
-                "parse5": "^7.1.1"
-            },
-            "engines": {
-                "node": ">=13.9.0"
-            }
-        },
-        "node_modules/@lit-labs/ssr-client": {
-            "version": "1.1.7",
-            "resolved": "https://registry.npmjs.org/@lit-labs/ssr-client/-/ssr-client-1.1.7.tgz",
-            "integrity": "sha512-VvqhY/iif3FHrlhkzEPsuX/7h/NqnfxLwVf0p8ghNIlKegRyRqgeaJevZ57s/u/LiFyKgqksRP5n+LmNvpxN+A==",
-            "dependencies": {
-                "@lit/reactive-element": "^2.0.4",
-                "lit": "^3.1.2",
-                "lit-html": "^3.1.2"
-            }
-        },
        "node_modules/@lit-labs/ssr-dom-shim": {
            "version": "1.3.0",
            "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
            "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ=="
        },
-        "node_modules/@lit-labs/ssr/node_modules/@types/node": {
-            "version": "16.18.126",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.126.tgz",
-            "integrity": "sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw=="
-        },
        "node_modules/@lit/context": {
            "version": "1.1.5",
            "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.5.tgz",
@ -3557,6 +3521,7 @@
            "version": "0.3.0",
            "resolved": "https://registry.npmjs.org/@parse5/tools/-/tools-0.3.0.tgz",
            "integrity": "sha512-zxRyTHkqb7WQMV8kTNBKWb1BeOFUKXBXTBWuxg9H9hfvQB3IwP6Iw2U75Ia5eyRxPNltmY7E8YAlz6zWwUnjKg==",
+            "dev": true,
            "dependencies": {
                "parse5": "^7.0.0"
            }
@ -10723,6 +10688,7 @@
            "version": "4.0.1",
            "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
            "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+            "dev": true,
            "engines": {
                "node": ">= 12"
            }
@ -11343,6 +11309,7 @@
            "version": "5.18.1",
            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
            "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+            "dev": true,
            "dependencies": {
                "graceful-fs": "^4.2.4",
                "tapable": "^2.2.0"
@ -13820,7 +13787,8 @@
        "node_modules/graceful-fs": {
            "version": "4.2.11",
            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-            "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+            "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "dev": true
        },
        "node_modules/grapheme-splitter": {
            "version": "1.0.4",
@ -18256,6 +18224,7 @@
            "version": "3.3.2",
            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
            "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+            "dev": true,
            "dependencies": {
                "data-uri-to-buffer": "^4.0.0",
                "fetch-blob": "^3.1.4",
@ -22373,6 +22342,7 @@
            "version": "2.2.1",
            "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
            "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+            "dev": true,
            "engines": {
                "node": ">=6"
            }
@ -22724,6 +22694,12 @@
                "url": "https://github.com/sponsors/wooorm"
            }
        },
+        "node_modules/trusted-types": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/trusted-types/-/trusted-types-2.0.0.tgz",
+            "integrity": "sha512-Eam+AUp6lg04YjmYkuLNhEJX+6ByocrKTpY/TtfRK/gV6OmxeN0OwkIasor28SUJ606snArpPLGtPMGbqdaaUA==",
+            "license": "W3C-20150513"
+        },
        "node_modules/ts-api-utils": {
            "version": "2.1.0",
            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -13,7 +13,6 @@
        "@formatjs/intl-listformat": "^7.5.7",
        "@fortawesome/fontawesome-free": "^6.6.0",
        "@goauthentik/api": "^2025.2.4-1745325566",
-        "@lit-labs/ssr": "^3.2.2",
        "@lit/context": "^1.1.2",
        "@lit/localize": "^0.12.2",
        "@lit/reactive-element": "^2.0.4",
@ -54,6 +53,7 @@
        "remark-gfm": "^4.0.1",
        "remark-mdx-frontmatter": "^5.0.0",
        "style-mod": "^4.1.2",
+        "trusted-types": "^2.0.0",
        "ts-pattern": "^5.4.0",
        "unist-util-visit": "^5.0.0",
        "webcomponent-qr-code": "^1.2.0",
--- a/web/src/admin/AdminInterface/AdminInterface.ts
+++ b/web/src/admin/AdminInterface/AdminInterface.ts
@ -4,13 +4,17 @@ import { ROUTES } from "@goauthentik/admin/Routes";
 import {
    EVENT_API_DRAWER_TOGGLE,
    EVENT_NOTIFICATION_DRAWER_TOGGLE,
+    EVENT_SIDEBAR_TOGGLE,
 } from "@goauthentik/common/constants";
 import { configureSentry } from "@goauthentik/common/sentry";
 import { me } from "@goauthentik/common/users";
 import { WebsocketClient } from "@goauthentik/common/ws";
 import { AuthenticatedInterface } from "@goauthentik/elements/Interface";
+import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider.js";
 import "@goauthentik/elements/ak-locale-context";
 import "@goauthentik/elements/banner/EnterpriseStatusBanner";
+import "@goauthentik/elements/banner/EnterpriseStatusBanner";
+import "@goauthentik/elements/banner/VersionBanner";
 import "@goauthentik/elements/banner/VersionBanner";
 import "@goauthentik/elements/messages/MessageContainer";
 import "@goauthentik/elements/messages/MessageContainer";
@ -21,25 +25,32 @@ import "@goauthentik/elements/router/RouterOutlet";
 import "@goauthentik/elements/sidebar/Sidebar";
 import "@goauthentik/elements/sidebar/SidebarItem";

-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";

 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

-import { SessionUser, UiThemeEnum } from "@goauthentik/api";
+import { LicenseSummaryStatusEnum, SessionUser, UiThemeEnum } from "@goauthentik/api";

-import "./AdminSidebar";
+import {
+    AdminSidebarEnterpriseEntries,
+    AdminSidebarEntries,
+    renderSidebarItems,
+} from "./AdminSidebar.js";

 if (process.env.NODE_ENV === "development") {
    await import("@goauthentik/esbuild-plugin-live-reload/client");
 }

@customElement("ak-interface-admin")
-export class AdminInterface extends AuthenticatedInterface {
+export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
+    //#region Properties
+
    @property({ type: Boolean })
    notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);

@ -54,12 +65,29 @@ export class AdminInterface extends AuthenticatedInterface {
    @query("ak-about-modal")
    aboutModal?: AboutModal;

+    @property({ type: Boolean, reflect: true })
+    public sidebarOpen: boolean;
+
+    #toggleSidebar = () => {
+        this.sidebarOpen = !this.sidebarOpen;
+    };
+
+    #sidebarMatcher: MediaQueryList;
+    #sidebarListener = (event: MediaQueryListEvent) => {
+        this.sidebarOpen = event.matches;
+    };
+
+    //#endregion
+
+    //#region Styles
+
    static get styles(): CSSResult[] {
        return [
            PFBase,
            PFPage,
            PFButton,
            PFDrawer,
+            PFNav,
            css`
                .pf-c-page__main,
                .pf-c-drawer__content,
@ -67,23 +95,30 @@ export class AdminInterface extends AuthenticatedInterface {
                    z-index: auto !important;
                    background-color: transparent;
                }
+
                .display-none {
                    display: none;
                }
+
                .pf-c-page {
                    background-color: var(--pf-c-page--BackgroundColor) !important;
                }
-                /* Global page background colour */
-                :host([theme="dark"]) .pf-c-page {
-                    --pf-c-page--BackgroundColor: var(--ak-dark-background);
+
+                :host([theme="dark"]) {
+                    /* Global page background colour */
+                    .pf-c-page {
+                        --pf-c-page--BackgroundColor: var(--ak-dark-background);
+                    }
                }
-                ak-enterprise-status,
-                ak-version-banner {
+
+                ak-page-navbar {
                    grid-area: header;
                }
-                ak-admin-sidebar {
+
+                .ak-sidebar {
                    grid-area: nav;
                }
+
                .pf-c-drawer__panel {
                    z-index: var(--pf-global--ZIndex--xl);
                }
@ -91,10 +126,23 @@ export class AdminInterface extends AuthenticatedInterface {
        ];
    }

+    //#endregion
+
+    //#region Lifecycle
+
    constructor() {
        super();
        this.ws = new WebsocketClient();

+        this.#sidebarMatcher = window.matchMedia("(min-width: 1200px)");
+        this.sidebarOpen = this.#sidebarMatcher.matches;
+    }
+
+    public connectedCallback() {
+        super.connectedCallback();
+
+        window.addEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar);
+
        window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
            this.notificationDrawerOpen = !this.notificationDrawerOpen;
            updateURLParams({
@ -108,6 +156,14 @@ export class AdminInterface extends AuthenticatedInterface {
                apiDrawerOpen: this.apiDrawerOpen,
            });
        });
+
+        this.#sidebarMatcher.addEventListener("change", this.#sidebarListener);
+    }
+
+    public disconnectedCallback(): void {
+        super.disconnectedCallback();
+        window.removeEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar);
+        this.#sidebarMatcher.removeEventListener("change", this.#sidebarListener);
    }

    async firstUpdated(): Promise<void> {
@ -118,6 +174,7 @@ export class AdminInterface extends AuthenticatedInterface {
            this.user.user.isSuperuser ||
            // TODO: somehow add `access_admin_interface` to the API schema
            this.user.user.systemPermissions.includes("access_admin_interface");
+
        if (!canAccessAdmin && this.user.user.pk > 0) {
            window.location.assign("/if/user/");
        }
@ -125,10 +182,14 @@ export class AdminInterface extends AuthenticatedInterface {

    render(): TemplateResult {
        const sidebarClasses = {
+            "pf-c-page__sidebar": true,
            "pf-m-light": this.activeTheme === UiThemeEnum.Light,
+            "pf-m-expanded": this.sidebarOpen,
+            "pf-m-collapsed": !this.sidebarOpen,
        };

        const drawerOpen = this.notificationDrawerOpen || this.apiDrawerOpen;
+
        const drawerClasses = {
            "pf-m-expanded": drawerOpen,
            "pf-m-collapsed": !drawerOpen,
@ -136,11 +197,18 @@ export class AdminInterface extends AuthenticatedInterface {

        return html` <ak-locale-context>
            <div class="pf-c-page">
-                <ak-enterprise-status interface="admin"></ak-enterprise-status>
-                <ak-version-banner></ak-version-banner>
-                <ak-admin-sidebar
-                    class="pf-c-page__sidebar ${classMap(sidebarClasses)}"
-                ></ak-admin-sidebar>
+                <ak-page-navbar>
+                    <ak-version-banner></ak-version-banner>
+                    <ak-enterprise-status interface="admin"></ak-enterprise-status>
+                </ak-page-navbar>
+
+                <ak-sidebar class="${classMap(sidebarClasses)}">
+                    ${renderSidebarItems(AdminSidebarEntries)}
+                    ${this.licenseSummary?.status !== LicenseSummaryStatusEnum.Unlicensed
+                        ? renderSidebarItems(AdminSidebarEnterpriseEntries)
+                        : nothing}
+                </ak-sidebar>
+
                <div class="pf-c-page__drawer">
                    <div class="pf-c-drawer ${classMap(drawerClasses)}">
                        <div class="pf-c-drawer__main">
--- a/web/src/admin/AdminInterface/AdminSidebar.ts
+++ b/web/src/admin/AdminInterface/AdminSidebar.ts
@ -1,186 +1,97 @@
-import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants";
-import { me } from "@goauthentik/common/users";
-import { AKElement } from "@goauthentik/elements/Base";
-import {
-    CapabilitiesEnum,
-    WithCapabilitiesConfig,
-} from "@goauthentik/elements/Interface/capabilitiesProvider";
-import { WithVersion } from "@goauthentik/elements/Interface/versionProvider";
 import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "@goauthentik/elements/router/Route";
-import { getRootStyle } from "@goauthentik/elements/utils/getRootStyle";
 import { spread } from "@open-wc/lit-helpers";

 import { msg } from "@lit/localize";
 import { TemplateResult, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
+import { repeat } from "lit/directives/repeat.js";

-import { UiThemeEnum } from "@goauthentik/api";
-import type { SessionUser, UserSelf } from "@goauthentik/api";
+// The second attribute type is of string[] to help with the 'activeWhen' control, which was
+// commonplace and singular enough to merit its own handler.
+type SidebarEntry = [
+    path: string | null,
+    label: string,
+    attributes?: Record<string, any> | string[] | null, // eslint-disable-line
+    children?: SidebarEntry[],
+];

-@customElement("ak-admin-sidebar")
-export class AkAdminSidebar extends WithCapabilitiesConfig(WithVersion(AKElement)) {
-    @property({ type: Boolean, reflect: true })
-    open = true;
+/**
+ * Recursively renders a sidebar entry.
+ */
+export function renderSidebarItem([
+    path,
+    label,
+    attributes,
+    children,
+]: SidebarEntry): TemplateResult {
+    const properties = Array.isArray(attributes)
+        ? { ".activeWhen": attributes }
+        : (attributes ?? {});

-    @state()
-    impersonation: UserSelf["username"] | null = null;
-
-    constructor() {
-        super();
-        me().then((user: SessionUser) => {
-            this.impersonation = user.original ? user.user.username : null;
-        });
-        this.toggleOpen = this.toggleOpen.bind(this);
-        this.checkWidth = this.checkWidth.bind(this);
+    if (path) {
+        properties.path = path;
    }

-    // This has to be a bound method so the event listener can be removed on disconnection as
-    // needed.
-    toggleOpen() {
-        this.open = !this.open;
-    }
-
-    checkWidth() {
-        // This works just fine, but it assumes that the `--ak-sidebar--minimum-auto-width` is in
-        // REMs. If that changes, this code will have to be adjusted as well.
-        const minWidth =
-            parseFloat(getRootStyle("--ak-sidebar--minimum-auto-width")) *
-            parseFloat(getRootStyle("font-size"));
-        this.open = window.innerWidth >= minWidth;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener(EVENT_SIDEBAR_TOGGLE, this.toggleOpen);
-        window.addEventListener("resize", this.checkWidth);
-        // After connecting to the DOM, we can now perform this check to see if the sidebar should
-        // be open by default.
-        this.checkWidth();
-    }
-
-    // The symmetry (☟, ☝) here is critical in that you want to start adding these handlers after
-    // connection, and removing them before disconnection.
-
-    disconnectedCallback() {
-        window.removeEventListener(EVENT_SIDEBAR_TOGGLE, this.toggleOpen);
-        window.removeEventListener("resize", this.checkWidth);
-        super.disconnectedCallback();
-    }
-
-    render() {
-        return html`
-            <ak-sidebar
-                class="pf-c-page__sidebar ${this.open ? "pf-m-expanded" : "pf-m-collapsed"} ${this
-                    .activeTheme === UiThemeEnum.Light
-                    ? "pf-m-light"
-                    : ""}"
-            >
-                ${this.renderSidebarItems()}
-            </ak-sidebar>
-        `;
-    }
-
-    updated() {
-        // This is permissible as`:host.classList` is not one of the properties Lit uses as a
-        // scheduling trigger. This sort of shenanigans can trigger an loop, in that it will trigger
-        // a browser reflow, which may trigger some other styling the application is monitoring,
-        // triggering a re-render which triggers a browser reflow, ad infinitum. But we've been
-        // living with that since jQuery, and it's both well-known and fortunately rare.
-
-        // eslint-disable-next-line wc/no-self-class
-        this.classList.remove("pf-m-expanded", "pf-m-collapsed");
-        // eslint-disable-next-line wc/no-self-class
-        this.classList.add(this.open ? "pf-m-expanded" : "pf-m-collapsed");
-    }
-
-    renderSidebarItems(): TemplateResult {
-        // The second attribute type is of string[] to help with the 'activeWhen' control, which was
-        // commonplace and singular enough to merit its own handler.
-        type SidebarEntry = [
-            path: string | null,
-            label: string,
-            attributes?: Record<string, any> | string[] | null, // eslint-disable-line
-            children?: SidebarEntry[],
-        ];
-
-        // prettier-ignore
-        const sidebarContent: SidebarEntry[] = [
-            [null, msg("Dashboards"), { "?expanded": true }, [
-                ["/administration/overview", msg("Overview")],
-                ["/administration/dashboard/users", msg("User Statistics")],
-                ["/administration/system-tasks", msg("System Tasks")]]],
-            [null, msg("Applications"), null, [
-                ["/core/applications", msg("Applications"), [`^/core/applications/(?<slug>${SLUG_REGEX})$`]],
-                ["/core/providers", msg("Providers"), [`^/core/providers/(?<id>${ID_REGEX})$`]],
-                ["/outpost/outposts", msg("Outposts")]]],
-            [null, msg("Events"), null, [
-                ["/events/log", msg("Logs"), [`^/events/log/(?<id>${UUID_REGEX})$`]],
-                ["/events/rules", msg("Notification Rules")],
-                ["/events/transports", msg("Notification Transports")]]],
-            [null, msg("Customization"), null, [
-                ["/policy/policies", msg("Policies")],
-                ["/core/property-mappings", msg("Property Mappings")],
-                ["/blueprints/instances", msg("Blueprints")],
-                ["/policy/reputation", msg("Reputation scores")]]],
-            [null, msg("Flows and Stages"), null, [
-                ["/flow/flows", msg("Flows"), [`^/flow/flows/(?<slug>${SLUG_REGEX})$`]],
-                ["/flow/stages", msg("Stages")],
-                ["/flow/stages/prompts", msg("Prompts")]]],
-            [null, msg("Directory"), null, [
-                ["/identity/users", msg("Users"), [`^/identity/users/(?<id>${ID_REGEX})$`]],
-                ["/identity/groups", msg("Groups"), [`^/identity/groups/(?<id>${UUID_REGEX})$`]],
-                ["/identity/roles", msg("Roles"), [`^/identity/roles/(?<id>${UUID_REGEX})$`]],
-                ["/identity/initial-permissions", msg("Initial Permissions"), [`^/identity/initial-permissions/(?<id>${ID_REGEX})$`]],
-                ["/core/sources", msg("Federation and Social login"), [`^/core/sources/(?<slug>${SLUG_REGEX})$`]],
-                ["/core/tokens", msg("Tokens and App passwords")],
-                ["/flow/stages/invitations", msg("Invitations")]]],
-            [null, msg("System"), null, [
-                ["/core/brands", msg("Brands")],
-                ["/crypto/certificates", msg("Certificates")],
-                ["/outpost/integrations", msg("Outpost Integrations")],
-                ["/admin/settings", msg("Settings")]]],
-        ];
-
-        // Typescript requires the type here to correctly type the recursive path
-        type SidebarRenderer = (_: SidebarEntry) => TemplateResult;
-
-        const renderOneSidebarItem: SidebarRenderer = ([path, label, attributes, children]) => {
-            const properties = Array.isArray(attributes)
-                ? { ".activeWhen": attributes }
-                : (attributes ?? {});
-            if (path) {
-                properties.path = path;
-            }
-            return html`<ak-sidebar-item ${spread(properties)}>
-                ${label ? html`<span slot="label">${label}</span>` : nothing}
-                ${map(children, renderOneSidebarItem)}
-            </ak-sidebar-item>`;
-        };
-
-        // prettier-ignore
-        return html`
-            ${map(sidebarContent, renderOneSidebarItem)}
-            ${this.renderEnterpriseMenu()}
-        `;
-    }
-
-    renderEnterpriseMenu() {
-        return this.can(CapabilitiesEnum.IsEnterprise)
-            ? html`
-                  <ak-sidebar-item>
-                      <span slot="label">${msg("Enterprise")}</span>
-                      <ak-sidebar-item path="/enterprise/licenses">
-                          <span slot="label">${msg("Licenses")}</span>
-                      </ak-sidebar-item>
-                  </ak-sidebar-item>
-              `
-            : nothing;
-    }
+    return html`<ak-sidebar-item ${spread(properties)}>
+        ${label ? html`<span slot="label">${label}</span>` : nothing}
+        ${children ? renderSidebarItems(children) : nothing}
+    </ak-sidebar-item>`;
 }

-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-admin-sidebar": AkAdminSidebar;
-    }
+/**
+ * Recursively renders a collection of sidebar entries.
+ */
+export function renderSidebarItems(entries: readonly SidebarEntry[]) {
+    return repeat(entries, ([path, label]) => path || label, renderSidebarItem);
 }
+
+// prettier-ignore
+export const AdminSidebarEntries: readonly SidebarEntry[] = [
+    [null, msg("Dashboards"), { "?expanded": true }, [
+        ["/administration/overview", msg("Overview")],
+        ["/administration/dashboard/users", msg("User Statistics")],
+        ["/administration/system-tasks", msg("System Tasks")]]
+    ],
+    [null, msg("Applications"), null, [
+        ["/core/applications", msg("Applications"), [`^/core/applications/(?<slug>${SLUG_REGEX})$`]],
+        ["/core/providers", msg("Providers"), [`^/core/providers/(?<id>${ID_REGEX})$`]],
+        ["/outpost/outposts", msg("Outposts")]]
+    ],
+    [null, msg("Events"), null, [
+        ["/events/log", msg("Logs"), [`^/events/log/(?<id>${UUID_REGEX})$`]],
+        ["/events/rules", msg("Notification Rules")],
+        ["/events/transports", msg("Notification Transports")]]
+    ],
+    [null, msg("Customization"), null, [
+        ["/policy/policies", msg("Policies")],
+        ["/core/property-mappings", msg("Property Mappings")],
+        ["/blueprints/instances", msg("Blueprints")],
+        ["/policy/reputation", msg("Reputation scores")]]
+    ],
+    [null, msg("Flows and Stages"), null, [
+        ["/flow/flows", msg("Flows"), [`^/flow/flows/(?<slug>${SLUG_REGEX})$`]],
+        ["/flow/stages", msg("Stages")],
+        ["/flow/stages/prompts", msg("Prompts")]]
+    ],
+    [null, msg("Directory"), null, [
+        ["/identity/users", msg("Users"), [`^/identity/users/(?<id>${ID_REGEX})$`]],
+        ["/identity/groups", msg("Groups"), [`^/identity/groups/(?<id>${UUID_REGEX})$`]],
+        ["/identity/roles", msg("Roles"), [`^/identity/roles/(?<id>${UUID_REGEX})$`]],
+        ["/identity/initial-permissions", msg("Initial Permissions"), [`^/identity/initial-permissions/(?<id>${ID_REGEX})$`]],
+        ["/core/sources", msg("Federation and Social login"), [`^/core/sources/(?<slug>${SLUG_REGEX})$`]],
+        ["/core/tokens", msg("Tokens and App passwords")],
+        ["/flow/stages/invitations", msg("Invitations")]]
+    ],
+    [null, msg("System"), null, [
+        ["/core/brands", msg("Brands")],
+        ["/crypto/certificates", msg("Certificates")],
+        ["/outpost/integrations", msg("Outpost Integrations")],
+        ["/admin/settings", msg("Settings")]]
+    ],
+];
+
+// prettier-ignore
+export const AdminSidebarEnterpriseEntries: readonly SidebarEntry[] = [
+    [null, msg("Enterprise"), null, [
+        ["/enterprise/licenses", msg("Licenses"), null]
+    ],
+]]
--- a/web/src/admin/admin-overview/AdminOverviewPage.ts
+++ b/web/src/admin/admin-overview/AdminOverviewPage.ts
@ -94,10 +94,13 @@ export class AdminOverviewPage extends AdminOverviewBase {
    }

    render(): TemplateResult {
-        const name = this.user?.user.name ?? this.user?.user.username;
+        const username = this.user?.user.name || this.user?.user.username;

-        return html`<ak-page-header description=${msg("General system status")} ?hasIcon=${false}>
-                <span slot="header"> ${msg(str`Welcome, ${name || ""}.`)} </span>
+        return html` <ak-page-header
+                header=${msg(str`Welcome, ${username || ""}.`)}
+                description=${msg("General system status")}
+                ?hasIcon=${false}
+            >
            </ak-page-header>
            <section class="pf-c-page__main-section">
                <div class="pf-l-grid pf-m-gutter">
--- a/web/src/admin/admin-settings/AdminSettingsPage.ts
+++ b/web/src/admin/admin-settings/AdminSettingsPage.ts
@ -83,13 +83,10 @@ export class AdminSettingsPage extends AKElement {
    }

    render() {
-        if (!this.settings) {
-            return nothing;
-        }
+        if (!this.settings) return nothing;
+
        return html`
-            <ak-page-header icon="fa fa-cog" header="" description="">
-                <span slot="header"> ${msg("System settings")} </span>
-            </ak-page-header>
+            <ak-page-header icon="fa fa-cog" header="${msg("System settings")}"> </ak-page-header>
            <section 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">
--- a/web/src/common/purify.ts
+++ b/web/src/common/purify.ts
@ -1,26 +1,110 @@
 import type { Config as DOMPurifyConfig } from "dompurify";
 import DOMPurify from "dompurify";
+import { trustedTypes } from "trusted-types";

-import { render } from "@lit-labs/ssr";
-import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
-import { TemplateResult, html } from "lit";
+import { render } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { until } from "lit/directives/until.js";

+/**
+ * Trusted types policy that escapes HTML content in place.
+ *
+ * @see {@linkcode SanitizedTrustPolicy} to strip HTML content.
+ *
+ * @returns {TrustedHTML} All HTML content, escaped.
+ */
+export const EscapeTrustPolicy = trustedTypes.createPolicy("authentik-escape", {
+    createHTML: (untrustedHTML: string) => {
+        return DOMPurify.sanitize(untrustedHTML, {
+            RETURN_TRUSTED_TYPE: false,
+        });
+    },
+});
+
+/**
+ * Trusted types policy, stripping all HTML content.
+ *
+ * @returns {TrustedHTML} Text content only, all HTML tags stripped.
+ */
+export const SanitizedTrustPolicy = trustedTypes.createPolicy("authentik-sanitize", {
+    createHTML: (untrustedHTML: string) => {
+        return DOMPurify.sanitize(untrustedHTML, {
+            RETURN_TRUSTED_TYPE: false,
+            ALLOWED_TAGS: ["#text"],
+        });
+    },
+});
+
+/**
+ * Trusted types policy, allowing a minimal set of _safe_ HTML tags supplied by
+ * a trusted source, such as the brand API.
+ */
+export const BrandedHTMLPolicy = trustedTypes.createPolicy("authentik-restrict", {
+    createHTML: (untrustedHTML: string) => {
+        return DOMPurify.sanitize(untrustedHTML, {
+            RETURN_TRUSTED_TYPE: false,
+            FORBID_TAGS: [
+                "script",
+                "style",
+                "iframe",
+                "link",
+                "object",
+                "embed",
+                "applet",
+                "meta",
+                "base",
+                "form",
+                "input",
+                "textarea",
+                "select",
+                "button",
+            ],
+            FORBID_ATTR: [
+                "onerror",
+                "onclick",
+                "onload",
+                "onmouseover",
+                "onmouseout",
+                "onmouseup",
+                "onmousedown",
+                "onfocus",
+                "onblur",
+                "onsubmit",
+            ],
+        });
+    },
+});
+
+export type AuthentikTrustPolicy =
+    | typeof EscapeTrustPolicy
+    | typeof SanitizedTrustPolicy
+    | typeof BrandedHTMLPolicy;
+
+/**
+ * Sanitize an untrusted HTML string using a trusted types policy.
+ */
+export function sanitizeHTML(trustPolicy: AuthentikTrustPolicy, untrustedHTML: string) {
+    return unsafeHTML(trustPolicy.createHTML(untrustedHTML).toString());
+}
+
+/**
+ * DOMPurify configuration for strict sanitization.
+ *
+ * This configuration only allows text nodes and disallows all HTML tags.
+ */
 export const DOM_PURIFY_STRICT = {
    ALLOWED_TAGS: ["#text"],
 } as const satisfies DOMPurifyConfig;

-export async function renderStatic(input: TemplateResult): Promise<string> {
-    return await collectResult(render(input));
-}
+/**
+ * Render untrusted HTML to a string without escaping it.
+ *
+ * @returns {string} The rendered HTML string.
+ */
+export function renderStaticHTMLUnsafe(untrustedHTML: unknown): string {
+    const container = document.createElement("html");
+    render(untrustedHTML, container);

-export function purify(input: TemplateResult): TemplateResult {
-    return html`${until(
-        (async () => {
-            const rendered = await renderStatic(input);
-            const purified = DOMPurify.sanitize(rendered);
-            return html`${unsafeHTML(purified)}`;
-        })(),
-    )}`;
+    const result = container.innerHTML;
+
+    return result;
 }
--- a/web/src/common/styles/authentik.css
+++ b/web/src/common/styles/authentik.css
@ -17,6 +17,13 @@

    /* Minimum width after which the sidebar becomes automatic */
    --ak-sidebar--minimum-auto-width: 80rem;
+
+    /**
+     * The height of the navbar and branded sidebar.
+     * @todo This shouldn't be necessary. The sidebar can instead use a grid layout
+     * ensuring they share the same height.
+     */
+    --ak-navbar--height: 7rem;
 }

@supports selector(::-webkit-scrollbar) {
--- a/web/src/common/stylesheets.ts
+++ b/web/src/common/stylesheets.ts
@ -0,0 +1,264 @@
+/**
+ * @file Stylesheet utilities.
+ */
+import { CSSResult, CSSResultOrNative, ReactiveElement, css } from "lit";
+
+/**
+ * Elements containing adoptable stylesheets.
+ */
+export type StyleSheetParent = Pick<DocumentOrShadowRoot, "adoptedStyleSheets">;
+
+/**
+ * Type-predicate to determine if a given object has adoptable stylesheets.
+ */
+export function isAdoptableStyleSheetParent(input: unknown): input is StyleSheetParent {
+    // Sanity check - Does the input have the right shape?
+
+    if (!input || typeof input !== "object") return false;
+
+    if (!("adoptedStyleSheets" in input) || !input.adoptedStyleSheets) return false;
+
+    if (typeof input.adoptedStyleSheets !== "object") return false;
+
+    // We avoid `Array.isArray` because the adopted stylesheets property
+    // is defined as a proxied array.
+    // All we care about is that it's shaped like an array.
+    if (!("length" in input.adoptedStyleSheets)) return false;
+
+    if (typeof input.adoptedStyleSheets.length !== "number") return false;
+
+    // Finally is the array mutable?
+    return "push" in input.adoptedStyleSheets;
+}
+
+/**
+ * Assert that the given input can adopt stylesheets.
+ */
+export function assertAdoptableStyleSheetParent<T>(
+    input: T,
+): asserts input is T & StyleSheetParent {
+    if (isAdoptableStyleSheetParent(input)) return;
+
+    console.debug("Given input missing `adoptedStyleSheets`", input);
+
+    throw new TypeError("Assertion failed: `adoptedStyleSheets` missing in given input");
+}
+
+export function resolveStyleSheetParent<T extends HTMLElement | DocumentFragment | Document>(
+    renderRoot: T,
+) {
+    const styleRoot = "ShadyDOM" in window ? document : renderRoot;
+
+    assertAdoptableStyleSheetParent(styleRoot);
+
+    return styleRoot;
+}
+
+export type StyleSheetInit = string | CSSResult | CSSStyleSheet;
+
+/**
+ * Given a source of CSS, create a `CSSStyleSheet`.
+ *
+ * @throw {@linkcode TypeError} if the input cannot be converted to a `CSSStyleSheet`
+ *
+ * @remarks
+ *
+ * Storybook's `build` does not currently have a coherent way of importing
+ * CSS-as-text into CSSStyleSheet.
+ *
+ * It works well when Storybook is running in `dev`, but in `build` it fails.
+ * Storied components will have to map their textual CSS imports.
+ */
+export function createStyleSheet(input: string): CSSResult {
+    const inputTemplate = [input] as unknown as TemplateStringsArray;
+
+    const result = css(inputTemplate, []);
+
+    return result;
+}
+
+/**
+ * Given a source of CSS, create a `CSSStyleSheet`.
+ *
+ * @see {@linkcode createStyleSheet}
+ */
+export function normalizeCSSSource(css: string): CSSStyleSheet;
+export function normalizeCSSSource(styleSheet: CSSStyleSheet): CSSStyleSheet;
+export function normalizeCSSSource(cssResult: CSSResult): CSSResult;
+export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative;
+export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative {
+    if (typeof input === "string") return createStyleSheet(input);
+
+    return input;
+}
+
+/**
+ * Create a `CSSStyleSheet` from the given input.
+ */
+export function createStyleSheetUnsafe(input: StyleSheetInit): CSSStyleSheet {
+    const result = normalizeCSSSource(input);
+    if (result instanceof CSSStyleSheet) return result;
+
+    if (!result.styleSheet) {
+        console.debug(
+            "authentik/common/stylesheets: CSSResult missing styleSheet, returning empty",
+            { result, input },
+        );
+
+        throw new TypeError("Expected a CSSStyleSheet");
+    }
+
+    return result.styleSheet;
+}
+
+/**
+ * A symbol to indicate that a stylesheet has been adopted by a style parent.
+ *
+ * @remarks
+ * Safari considers stylesheet removed from the `adoptedStyleSheets` array
+ * ready for garbage collection. Reuse of the stylesheet will result in tab-crash.
+ *
+ * Always discard the stylesheet after use.
+ */
+const StyleSheetAdoptedParent = Symbol("stylesheet-adopted");
+
+/**
+ * A CSS style sheet that has been adopted by a style parent.
+ */
+export interface AdoptedStyleSheet extends CSSStyleSheet {
+    [StyleSheetAdoptedParent]: WeakRef<StyleSheetParent>;
+}
+
+/**
+ * Type-predicate to determine if a given stylesheet has been adopted.
+ */
+export function isAdoptedStyleSheet(styleSheet: CSSStyleSheet): styleSheet is AdoptedStyleSheet {
+    if (!(StyleSheetAdoptedParent in styleSheet)) return false;
+
+    return styleSheet[StyleSheetAdoptedParent] instanceof WeakRef;
+}
+
+/**
+ * Append stylesheet(s) to the given roots.
+ *
+ * @see {@linkcode removeStyleSheet} to remove a stylesheet from a given roots.
+ */
+export function appendStyleSheet(
+    styleParent: StyleSheetParent,
+    ...insertions: CSSStyleSheet[]
+): void {
+    insertions = Array.isArray(insertions) ? insertions : [insertions];
+
+    for (const styleSheetInsertion of insertions) {
+        if (isAdoptedStyleSheet(styleSheetInsertion)) {
+            console.warn("Attempted to append adopted stylesheet", {
+                styleSheetInsertion,
+                currentParent: styleSheetInsertion[StyleSheetAdoptedParent]?.deref(),
+                rules: serializeStyleSheet(styleSheetInsertion),
+            });
+
+            throw new TypeError("Attempted to append a previously adopted stylesheet");
+        }
+
+        if (styleParent.adoptedStyleSheets.includes(styleSheetInsertion)) return;
+
+        styleParent.adoptedStyleSheets = [...styleParent.adoptedStyleSheets, styleSheetInsertion];
+
+        Object.assign(styleSheetInsertion, {
+            [StyleSheetAdoptedParent]: new WeakRef(styleParent),
+        });
+    }
+}
+
+/**
+ * Remove a stylesheet from the given roots, matching by referential equality.
+ *
+ * @see {@linkcode appendStyleSheet} to append a stylesheet to a given roots.
+ */
+export function removeStyleSheet(
+    styleParent: StyleSheetParent,
+    ...removals: CSSStyleSheet[]
+): void {
+    const nextAdoptedStyleSheets = styleParent.adoptedStyleSheets.filter(
+        (styleSheet) => !removals.includes(styleSheet),
+    );
+
+    if (nextAdoptedStyleSheets.length === styleParent.adoptedStyleSheets.length) return;
+
+    styleParent.adoptedStyleSheets = nextAdoptedStyleSheets;
+}
+
+/**
+ * Serialize a stylesheet to a string.
+ *
+ * This is useful for debugging or inspecting the contents of a stylesheet.
+ */
+export function serializeStyleSheet(stylesheet: CSSStyleSheet): string {
+    return Array.from(stylesheet.cssRules || [], (rule) => rule.cssText || "").join("\n");
+}
+
+/**
+ * Inspect the adopted stylesheets of a given style parent, serializing them to strings.
+ */
+export function inspectStyleSheets(styleParent: StyleSheetParent): string[] {
+    return styleParent.adoptedStyleSheets.map((styleSheet) => serializeStyleSheet(styleSheet));
+}
+
+interface InspectedStyleSheetEntry {
+    tagName: string;
+    element: ReactiveElement;
+    styles: string[];
+    children?: InspectedStyleSheetEntry[];
+}
+
+/**
+ * Recursively inspect the adopted stylesheets of a given style parent, serializing them to strings.
+ */
+export function inspectStyleSheetTree(element: ReactiveElement): InspectedStyleSheetEntry {
+    const styleParent = resolveStyleSheetParent(element.renderRoot);
+    const styles = inspectStyleSheets(styleParent);
+    const tagName = element.tagName.toLowerCase();
+
+    const treewalker = document.createTreeWalker(element.renderRoot, NodeFilter.SHOW_ELEMENT, {
+        acceptNode(node) {
+            if (node instanceof ReactiveElement) {
+                return NodeFilter.FILTER_ACCEPT;
+            }
+            return NodeFilter.FILTER_SKIP;
+        },
+    });
+    const children: InspectedStyleSheetEntry[] = [];
+    let currentNode: Node | null = treewalker.nextNode();
+    while (currentNode) {
+        const childElement = currentNode as ReactiveElement;
+
+        if (!isAdoptableStyleSheetParent(childElement.renderRoot)) {
+            currentNode = treewalker.nextNode();
+            continue;
+        }
+
+        const childStyles = inspectStyleSheets(childElement.renderRoot);
+
+        children.push({
+            tagName: childElement.tagName.toLowerCase(),
+            element: childElement,
+            styles: childStyles,
+        });
+        currentNode = treewalker.nextNode();
+    }
+
+    return {
+        tagName,
+        element,
+        styles,
+        children,
+    };
+}
+
+if (process.env.NODE_ENV === "development") {
+    Object.assign(window, {
+        inspectStyleSheetTree,
+        serializeStyleSheet,
+        inspectStyleSheets,
+    });
+}
--- a/web/src/common/theme.ts
+++ b/web/src/common/theme.ts
@ -0,0 +1,200 @@
+/**
+ * @file Theme utilities.
+ */
+import { UIConfig } from "@goauthentik/common/ui/config";
+
+import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
+
+//#region Scheme Types
+
+/**
+ * Valid CSS color scheme values.
+ *
+ * @link {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme | MDN}
+ *
+ * @category CSS
+ */
+export type CSSColorSchemeValue = "dark" | "light" | "auto";
+
+/**
+ * A CSS color scheme value that can be preferred by the user, i.e. not `"auto"`.
+ *
+ * @category CSS
+ */
+export type ResolvedCSSColorSchemeValue = Exclude<CSSColorSchemeValue, "auto">;
+
+//#endregion
+
+//#region UI Theme Types
+
+/**
+ * A UI color scheme value that can be preferred by the user.
+ *
+ * i.e. not an lack of preference or unknown value.
+ *
+ * @category CSS
+ */
+export type ResolvedUITheme = typeof UiThemeEnum.Light | typeof UiThemeEnum.Dark;
+
+/**
+ * A mapping of theme values to their respective inversion.
+ *
+ * @category CSS
+ */
+export const UIThemeInversion = {
+    dark: "light",
+    light: "dark",
+} as const satisfies Record<ResolvedUITheme, ResolvedUITheme>;
+
+/**
+ * Either a valid CSS color scheme value, or a theme preference.
+ */
+export type UIThemeHint = CSSColorSchemeValue | UiThemeEnum;
+
+//#endregion
+
+//#region Scheme Functions
+
+/**
+ * Creates an event target for the given color scheme.
+ *
+ * @param colorScheme The color scheme to target.
+ * @returns A {@linkcode MediaQueryList} that can be used to listen for changes to the color scheme.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MDN}
+ *
+ * @category CSS
+ */
+export function createColorSchemeTarget(colorScheme: ResolvedCSSColorSchemeValue): MediaQueryList {
+    return window.matchMedia(`(prefers-color-scheme: ${colorScheme})`);
+}
+
+/**
+ * Formats the given input into a valid CSS color scheme value.
+ *
+ * If the input is not provided, it defaults to "auto".
+ *
+ * @category CSS
+ */
+export function formatColorScheme(theme: ResolvedUITheme): ResolvedCSSColorSchemeValue;
+export function formatColorScheme(
+    colorScheme: ResolvedCSSColorSchemeValue,
+): ResolvedCSSColorSchemeValue;
+export function formatColorScheme(hint?: UIThemeHint): CSSColorSchemeValue;
+export function formatColorScheme(hint?: UIThemeHint): CSSColorSchemeValue {
+    if (!hint) return "auto";
+
+    switch (hint) {
+        case "dark":
+        case UiThemeEnum.Dark:
+            return "dark";
+        case "light":
+        case UiThemeEnum.Light:
+            return "light";
+        case "auto":
+        case UiThemeEnum.Automatic:
+            return "auto";
+        default:
+            console.warn(`Unknown color scheme hint: ${hint}. Defaulting to "auto".`);
+            return "auto";
+    }
+}
+
+//#endregion
+
+//#region Theme Functions
+
+/**
+ * Resolve the current UI theme based on the user's preference or the provided color scheme.
+ *
+ * @param hint The color scheme hint to use.
+ *
+ * @category CSS
+ */
+export function resolveUITheme(
+    hint?: UIThemeHint,
+    defaultUITheme: ResolvedUITheme = UiThemeEnum.Light,
+): ResolvedUITheme {
+    const colorScheme = formatColorScheme(hint);
+
+    if (colorScheme !== "auto") return colorScheme;
+
+    // Given that we don't know the user's preference,
+    // we can determine the theme based on whether the default theme is
+    // currently being overridden.
+
+    const colorSchemeInversion = formatColorScheme(UIThemeInversion[defaultUITheme]);
+
+    const mediaQueryList = createColorSchemeTarget(colorSchemeInversion);
+
+    return mediaQueryList.matches ? colorSchemeInversion : defaultUITheme;
+}
+
+/**
+ * Effect listener invoked when the color scheme changes.
+ */
+export type UIThemeListener = (currentUITheme: ResolvedUITheme) => void;
+/**
+ * Create an effect that runs
+ *
+ * @returns A cleanup function that removes the effect.
+ */
+export function createUIThemeEffect(
+    effect: UIThemeListener,
+    listenerOptions?: AddEventListenerOptions,
+): () => void {
+    const colorSchemeTarget = resolveUITheme();
+    const invertedColorSchemeTarget = UIThemeInversion[colorSchemeTarget];
+
+    let previousUITheme: ResolvedUITheme | undefined;
+
+    // First, wrap the effect to ensure we can abort it.
+    const changeListener = (event: MediaQueryListEvent) => {
+        if (listenerOptions?.signal?.aborted) return;
+
+        const currentUITheme = event.matches ? colorSchemeTarget : invertedColorSchemeTarget;
+
+        if (previousUITheme === currentUITheme) return;
+
+        previousUITheme = currentUITheme;
+
+        effect(currentUITheme);
+    };
+
+    const mediaQueryList = createColorSchemeTarget(colorSchemeTarget);
+
+    // Trigger the effect immediately.
+    effect(colorSchemeTarget);
+
+    // Listen for changes to the color scheme...
+    mediaQueryList.addEventListener("change", changeListener, listenerOptions);
+
+    // Finally, allow the caller to remove the effect.
+    const cleanup = () => {
+        mediaQueryList.removeEventListener("change", changeListener);
+    };
+
+    return cleanup;
+}
+
+//#endregion
+
+//#region Theme Element
+
+/**
+ * An element that can be themed.
+ */
+export interface ThemedElement extends HTMLElement {
+    brand?: CurrentBrand;
+    uiConfig?: UIConfig;
+    config?: Config;
+    activeTheme: ResolvedUITheme;
+}
+
+export function rootInterface<T extends ThemedElement = ThemedElement>(): T | null {
+    const element = document.body.querySelector<T>("[data-ak-interface-root]");
+
+    return element;
+}
+
+//#endregion
--- a/web/src/components/ak-nav-buttons.ts
+++ b/web/src/components/ak-nav-buttons.ts
@ -95,7 +95,7 @@ export class NavigationButtons extends AKElement {
            );
        };

-        return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
+        return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-xl">
            <button class="pf-c-button pf-m-plain" type="button" @click=${onClick}>
                <pf-tooltip position="top" content=${msg("Open API drawer")}>
                    <i class="fas fa-code" aria-hidden="true"></i>
@ -116,7 +116,7 @@ export class NavigationButtons extends AKElement {
            );
        };

-        return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
+        return html`<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-xl">
            <button
                class="pf-c-button pf-m-plain"
                type="button"
@ -156,9 +156,7 @@ export class NavigationButtons extends AKElement {
    }

    renderImpersonation() {
-        if (!this.me?.original) {
-            return nothing;
-        }
+        if (!this.me?.original) return nothing;

        const onClick = async () => {
            await new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve();
@ -175,6 +173,14 @@ export class NavigationButtons extends AKElement {
            </div>`;
    }

+    renderAvatar() {
+        return html`<img
+            class="pf-c-page__header-tools-item pf-c-avatar pf-m-hidden pf-m-visible-on-xl"
+            src=${ifDefined(this.me?.user.avatar)}
+            alt="${msg("Avatar image")}"
+        />`;
+    }
+
    get userDisplayName() {
        return match<UserDisplay | undefined, string | undefined>(this.uiConfig?.navbar.userDisplay)
            .with(UserDisplay.username, () => this.me?.user.username)
@ -206,17 +212,13 @@ export class NavigationButtons extends AKElement {
            </div>
            ${this.renderImpersonation()}
            ${this.userDisplayName != ""
-                ? html`<div class="pf-c-page__header-tools-group">
-                      <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
+                ? html`<div class="pf-c-page__header-tools-group pf-m-hidden">
+                      <div class="pf-c-page__header-tools-item pf-m-visible-on-2xl">
                          ${this.userDisplayName}
                      </div>
                  </div>`
                : nothing}
-            <img
-                class="pf-c-avatar"
-                src=${ifDefined(this.me?.user.avatar)}
-                alt="${msg("Avatar image")}"
-            />
+            ${this.renderAvatar()}
        </div>`;
    }
 }
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@ -1,165 +1,140 @@
-import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
-import { UIConfig } from "@goauthentik/common/ui/config";
-import { adaptCSS } from "@goauthentik/common/utils";
-import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet";
+import {
+    StyleSheetInit,
+    StyleSheetParent,
+    appendStyleSheet,
+    createStyleSheetUnsafe,
+    removeStyleSheet,
+    resolveStyleSheetParent,
+} from "@goauthentik/common/stylesheets";
+import {
+    CSSColorSchemeValue,
+    ResolvedUITheme,
+    UIThemeListener,
+    createUIThemeEffect,
+    formatColorScheme,
+    resolveUITheme,
+} from "@goauthentik/common/theme";
+import { type ThemedElement } from "@goauthentik/common/theme";

 import { localized } from "@lit/localize";
-import { LitElement, ReactiveElement } from "lit";
+import { CSSResultGroup, CSSResultOrNative, LitElement } from "lit";
+import { property } from "lit/decorators.js";

 import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import OneDark from "@goauthentik/common/styles/one-dark.css";
 import ThemeDark from "@goauthentik/common/styles/theme-dark.css";

-import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
+import { UiThemeEnum } from "@goauthentik/api";

-type AkInterface = HTMLElement & {
-    getTheme: () => Promise<UiThemeEnum>;
-    brand?: CurrentBrand;
-    uiConfig?: UIConfig;
-    config?: Config;
-    get activeTheme(): UiThemeEnum | undefined;
-};
-
-export const rootInterface = <T extends AkInterface>(): T | undefined =>
-    (document.body.querySelector("[data-ak-interface-root]") as T) ?? undefined;
-
-export const QUERY_MEDIA_COLOR_LIGHT = "(prefers-color-scheme: light)";
-
-// Ensure themes are converted to a static instance of CSS Stylesheet, otherwise the
-// when changing themes we might not remove the correct css stylesheet instance.
-const _darkTheme = ensureCSSStyleSheet(ThemeDark);
+// Re-export the theme helpers
+export { rootInterface } from "@goauthentik/common/theme";

@localized()
-export class AKElement extends LitElement {
-    _mediaMatcher?: MediaQueryList;
-    _mediaMatcherHandler?: (ev?: MediaQueryListEvent) => void;
-    _activeTheme?: UiThemeEnum;
+export class AKElement extends LitElement implements ThemedElement {
+    //#region Properties

-    get activeTheme(): UiThemeEnum | undefined {
-        return this._activeTheme;
+    /**
+     * The resolved theme of the current element.
+     *
+     * @remarks
+     *
+     * Unlike the browser's current color scheme, this is a value that can be
+     * resolved to a specific theme, i.e. dark or light.
+     */
+    @property({
+        attribute: "theme",
+        type: String,
+        reflect: true,
+    })
+    public activeTheme: ResolvedUITheme;
+
+    //#endregion
+
+    //#region Private Properties
+
+    readonly #preferredColorScheme: CSSColorSchemeValue;
+
+    #customCSSStyleSheet: CSSStyleSheet | null;
+    #darkThemeStyleSheet: CSSStyleSheet | null = null;
+    #themeAbortController: AbortController | null = null;
+
+    //#endregion
+
+    //#region Lifecycle
+
+    protected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {
+        // Ensure all style sheets being passed are really style sheets.
+        const baseStyles: StyleSheetInit[] = [AKGlobal, OneDark];
+
+        if (!styles) return baseStyles.map(createStyleSheetUnsafe);
+
+        if (Array.isArray(styles)) {
+            return [
+                //---
+                ...(styles as unknown as CSSResultOrNative[]),
+                ...baseStyles,
+            ].flatMap(createStyleSheetUnsafe);
+        }
+        return [styles, ...baseStyles].map(createStyleSheetUnsafe);
    }

    constructor() {
        super();
+
+        const { brand } = globalAK();
+
+        this.#preferredColorScheme = formatColorScheme(brand.uiTheme);
+        this.activeTheme = resolveUITheme(brand?.uiTheme);
+
+        this.#customCSSStyleSheet = brand?.brandingCustomCss
+            ? createStyleSheetUnsafe(brand.brandingCustomCss)
+            : null;
    }

-    setInitialStyles(root: DocumentOrShadowRoot) {
-        const styleRoot: DocumentOrShadowRoot = (
-            "ShadyDOM" in window ? document : root
-        ) as DocumentOrShadowRoot;
-        styleRoot.adoptedStyleSheets = adaptCSS([
-            ...styleRoot.adoptedStyleSheets,
-            ensureCSSStyleSheet(AKGlobal),
-            ensureCSSStyleSheet(OneDark),
-        ]);
-        this._initTheme(styleRoot);
-        this._initCustomCSS(styleRoot);
+    public disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.#themeAbortController?.abort();
    }

-    protected createRenderRoot() {
-        this.fixElementStyles();
-        const root = super.createRenderRoot();
-        this.setInitialStyles(root as unknown as DocumentOrShadowRoot);
-        return root;
-    }
+    #styleRoot?: StyleSheetParent;

-    async getTheme(): Promise<UiThemeEnum> {
-        return rootInterface()?.getTheme() || UiThemeEnum.Automatic;
-    }
+    #dispatchTheme: UIThemeListener = (nextUITheme) => {
+        if (!this.#styleRoot) return;

-    fixElementStyles() {
-        // Ensure all style sheets being passed are really style sheets.
-        (this.constructor as typeof ReactiveElement).elementStyles = (
-            this.constructor as typeof ReactiveElement
-        ).elementStyles.map(ensureCSSStyleSheet);
-    }
-
-    async _initTheme(root: DocumentOrShadowRoot): Promise<void> {
-        // Early activate theme based on media query to prevent light flash
-        // when dark is preferred
-        this._applyTheme(root, globalAK().brand.uiTheme);
-        this._applyTheme(root, await this.getTheme());
-    }
-
-    async _initCustomCSS(root: DocumentOrShadowRoot): Promise<void> {
-        const brand = globalAK().brand;
-        if (!brand) {
-            return;
+        if (nextUITheme === UiThemeEnum.Dark) {
+            this.#darkThemeStyleSheet ||= createStyleSheetUnsafe(ThemeDark);
+            appendStyleSheet(this.#styleRoot, this.#darkThemeStyleSheet);
+            this.activeTheme = UiThemeEnum.Dark;
+        } else if (this.#darkThemeStyleSheet) {
+            removeStyleSheet(this.#styleRoot, this.#darkThemeStyleSheet);
+            this.#darkThemeStyleSheet = null;
+            this.activeTheme = UiThemeEnum.Light;
        }
-        const sheet = await new CSSStyleSheet().replace(brand.brandingCustomCss);
-        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    };
+
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        const renderRoot = super.createRenderRoot();
+        this.#styleRoot = resolveStyleSheetParent(renderRoot);
+
+        if (this.#customCSSStyleSheet) {
+            console.debug(`authentik/element[${this.tagName.toLowerCase()}]: Adding custom CSS`);
+
+            appendStyleSheet(this.#styleRoot, this.#customCSSStyleSheet);
+        }
+
+        this.#themeAbortController = new AbortController();
+
+        if (this.#preferredColorScheme === "dark") {
+            this.#dispatchTheme(UiThemeEnum.Dark);
+        } else if (this.#preferredColorScheme === "auto") {
+            createUIThemeEffect(this.#dispatchTheme, {
+                signal: this.#themeAbortController.signal,
+            });
+        }
+
+        return renderRoot;
    }

-    _applyTheme(root: DocumentOrShadowRoot, theme?: UiThemeEnum): void {
-        if (!theme) {
-            theme = UiThemeEnum.Automatic;
-        }
-        if (theme === UiThemeEnum.Automatic) {
-            // Create a media matcher to automatically switch the theme depending on
-            // prefers-color-scheme
-            if (!this._mediaMatcher) {
-                this._mediaMatcher = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT);
-                this._mediaMatcherHandler = (ev?: MediaQueryListEvent) => {
-                    const theme =
-                        ev?.matches || this._mediaMatcher?.matches
-                            ? UiThemeEnum.Light
-                            : UiThemeEnum.Dark;
-                    this._activateTheme(theme, root);
-                };
-                this._mediaMatcherHandler(undefined);
-                this._mediaMatcher.addEventListener("change", this._mediaMatcherHandler);
-            }
-            return;
-        } else if (this._mediaMatcher && this._mediaMatcherHandler) {
-            // Theme isn't automatic and we have a matcher configured, remove the matcher
-            // to prevent changes
-            this._mediaMatcher.removeEventListener("change", this._mediaMatcherHandler);
-            this._mediaMatcher = undefined;
-        }
-        this._activateTheme(theme, root);
-    }
-
-    static themeToStylesheet(theme?: UiThemeEnum): CSSStyleSheet | undefined {
-        if (theme === UiThemeEnum.Dark) {
-            return _darkTheme;
-        }
-        return undefined;
-    }
-
-    /**
-     * Directly activate a given theme, accepts multiple document/ShadowDOMs to apply the stylesheet
-     * to. The stylesheets are applied to each DOM in order. Does nothing if the given theme is already active.
-     */
-    _activateTheme(theme: UiThemeEnum, ...roots: DocumentOrShadowRoot[]) {
-        if (theme === this._activeTheme) {
-            return;
-        }
-        // Make sure we only get to this callback once we've picked a concise theme choice
-        this.dispatchEvent(
-            new CustomEvent(EVENT_THEME_CHANGE, {
-                bubbles: true,
-                composed: true,
-                detail: theme,
-            }),
-        );
-        this.setAttribute("theme", theme);
-        const stylesheet = AKElement.themeToStylesheet(theme);
-        const oldStylesheet = AKElement.themeToStylesheet(this._activeTheme);
-        roots.forEach((root) => {
-            if (stylesheet) {
-                root.adoptedStyleSheets = [
-                    ...root.adoptedStyleSheets,
-                    ensureCSSStyleSheet(stylesheet),
-                ];
-            }
-            if (oldStylesheet) {
-                root.adoptedStyleSheets = root.adoptedStyleSheets.filter(
-                    (v) => v !== oldStylesheet,
-                );
-            }
-        });
-        this._activeTheme = theme;
-        this.requestUpdate();
-    }
+    //#endregion
 }
--- a/web/src/elements/Interface/BrandContextController.ts
+++ b/web/src/elements/Interface/BrandContextController.ts
@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { ThemedElement } from "@goauthentik/common/theme";
 import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts";
 import type { ReactiveElementHost } from "@goauthentik/elements/types.js";

@ -9,14 +10,12 @@ import type { ReactiveController } from "lit";
 import type { CurrentBrand } from "@goauthentik/api";
 import { CoreApi } from "@goauthentik/api";

-import type { AkInterface } from "./Interface";
-
 export class BrandContextController implements ReactiveController {
-    host!: ReactiveElementHost<AkInterface>;
+    host!: ReactiveElementHost<ThemedElement>;

    context!: ContextProvider<{ __context__: CurrentBrand | undefined }>;

-    constructor(host: ReactiveElementHost<AkInterface>) {
+    constructor(host: ReactiveElementHost<ThemedElement>) {
        this.host = host;
        this.context = new ContextProvider(this.host, {
            context: authentikBrandContext,
--- a/web/src/elements/Interface/ConfigContextController.ts
+++ b/web/src/elements/Interface/ConfigContextController.ts
@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
+import { ThemedElement } from "@goauthentik/common/theme";
 import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts";
 import type { ReactiveElementHost } from "@goauthentik/elements/types.js";

@ -10,14 +11,12 @@ import type { ReactiveController } from "lit";
 import type { Config } from "@goauthentik/api";
 import { RootApi } from "@goauthentik/api";

-import type { AkInterface } from "./Interface";
-
 export class ConfigContextController implements ReactiveController {
-    host!: ReactiveElementHost<AkInterface>;
+    host!: ReactiveElementHost<ThemedElement>;

    context!: ContextProvider<{ __context__: Config | undefined }>;

-    constructor(host: ReactiveElementHost<AkInterface>) {
+    constructor(host: ReactiveElementHost<ThemedElement>) {
        this.host = host;
        this.context = new ContextProvider(this.host, {
            context: authentikConfigContext,
--- a/web/src/elements/Interface/Interface.ts
+++ b/web/src/elements/Interface/Interface.ts
@ -1,107 +1,78 @@
-import { UIConfig, uiConfig } from "@goauthentik/common/ui/config";
+import {
+    appendStyleSheet,
+    createStyleSheetUnsafe,
+    resolveStyleSheetParent,
+} from "@goauthentik/common/stylesheets";
+import { ThemedElement } from "@goauthentik/common/theme";
+import { UIConfig } from "@goauthentik/common/ui/config";
+import { AKElement } from "@goauthentik/elements/Base";
 import { VersionContextController } from "@goauthentik/elements/Interface/VersionContextController";
 import { ModalOrchestrationController } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
-import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet";

 import { state } from "lit/decorators.js";

 import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import type { Config, CurrentBrand, LicenseSummary, Version } from "@goauthentik/api";
-import { UiThemeEnum } from "@goauthentik/api";

-import { AKElement, rootInterface } from "../Base";
 import { BrandContextController } from "./BrandContextController";
 import { ConfigContextController } from "./ConfigContextController";
 import { EnterpriseContextController } from "./EnterpriseContextController";

-export type AkInterface = HTMLElement & {
-    getTheme: () => Promise<UiThemeEnum>;
-    brand?: CurrentBrand;
-    uiConfig?: UIConfig;
-    config?: Config;
-};
-
-const brandContext = Symbol("brandContext");
 const configContext = Symbol("configContext");
 const modalController = Symbol("modalController");
 const versionContext = Symbol("versionContext");

-export class Interface extends AKElement implements AkInterface {
-    [brandContext]!: BrandContextController;
+export abstract class Interface extends AKElement implements ThemedElement {
+    protected static readonly PFBaseStyleSheet = createStyleSheetUnsafe(PFBase);

-    [configContext]!: ConfigContextController;
+    [configContext]: ConfigContextController;

-    [modalController]!: ModalOrchestrationController;
+    [modalController]: ModalOrchestrationController;

    @state()
-    uiConfig?: UIConfig;
+    public config?: Config;

    @state()
-    config?: Config;
-
-    @state()
-    brand?: CurrentBrand;
+    public brand?: CurrentBrand;

    constructor() {
        super();
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets, ensureCSSStyleSheet(PFBase)];
-        this._initContexts();
-        this.dataset.akInterfaceRoot = "true";
-    }
+        const styleParent = resolveStyleSheetParent(document);

-    _initContexts() {
-        this[brandContext] = new BrandContextController(this);
+        this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
+
+        appendStyleSheet(styleParent, Interface.PFBaseStyleSheet);
+
+        this.addController(new BrandContextController(this));
        this[configContext] = new ConfigContextController(this);
        this[modalController] = new ModalOrchestrationController(this);
    }
-
-    _activateTheme(theme: UiThemeEnum, ...roots: DocumentOrShadowRoot[]): void {
-        if (theme === this._activeTheme) {
-            return;
-        }
-        console.debug(
-            `authentik/interface[${rootInterface()?.tagName.toLowerCase()}]: Enabling theme ${theme}`,
-        );
-        // Special case for root interfaces, as they need to modify the global document CSS too
-        // Instead of calling ._activateTheme() twice, we insert the root document in the call
-        // since multiple calls to ._activateTheme() would not do anything after the first call
-        // as the theme is already enabled.
-        roots.unshift(document as unknown as DocumentOrShadowRoot);
-        super._activateTheme(theme, ...roots);
-    }
-
-    async getTheme(): Promise<UiThemeEnum> {
-        if (!this.uiConfig) {
-            this.uiConfig = await uiConfig();
-        }
-        return this.uiConfig.theme?.base || UiThemeEnum.Automatic;
-    }
 }

-export type AkAuthenticatedInterface = AkInterface & {
+export interface AkAuthenticatedInterface extends ThemedElement {
    licenseSummary?: LicenseSummary;
    version?: Version;
-};
+}

 const enterpriseContext = Symbol("enterpriseContext");

-export class AuthenticatedInterface extends Interface {
+export class AuthenticatedInterface extends Interface implements AkAuthenticatedInterface {
    [enterpriseContext]!: EnterpriseContextController;
    [versionContext]!: VersionContextController;

    @state()
-    licenseSummary?: LicenseSummary;
+    public uiConfig?: UIConfig;

    @state()
-    version?: Version;
+    public licenseSummary?: LicenseSummary;
+
+    @state()
+    public version?: Version;

    constructor() {
        super();
-    }

-    _initContexts(): void {
-        super._initContexts();
        this[enterpriseContext] = new EnterpriseContextController(this);
        this[versionContext] = new VersionContextController(this);
    }
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@ -5,20 +5,23 @@ import {
 } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
 import { currentInterface } from "@goauthentik/common/sentry";
-import { UIConfig, UserDisplay, uiConfig } from "@goauthentik/common/ui/config";
+import { UIConfig, UserDisplay, getConfigForUser } from "@goauthentik/common/ui/config";
 import { me } from "@goauthentik/common/users";
 import "@goauthentik/components/ak-nav-buttons";
 import { AKElement } from "@goauthentik/elements/Base";
 import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
+import { DefaultBrand } from "@goauthentik/elements/sidebar/SidebarBrand";
+import { themeImage } from "@goauthentik/elements/utils/images";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html, nothing } from "lit";
+import { CSSResult, LitElement, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

 import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import PFNotificationBadge from "@patternfly/patternfly/components/NotificationBadge/notification-badge.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
@ -26,34 +29,52 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import { SessionUser } from "@goauthentik/api";

-@customElement("ak-page-header")
-export class PageHeader extends WithBrandConfig(AKElement) {
-    @property()
-    icon?: string;
+//#region Page Navbar

-    @property({ type: Boolean })
-    iconImage = false;
-
-    @property()
-    header = "";
-
-    @property()
+export interface PageNavbarDetails {
+    header?: string;
    description?: string;
+    icon?: string;
+    iconImage?: boolean;
+}

-    @property({ type: Boolean })
-    hasIcon = true;
+/**
+ * A global navbar component at the top of the page.
+ *
+ * Internally, this component listens for the `ak-page-header` event, which is
+ * dispatched by the `ak-page-header` component.
+ */
+@customElement("ak-page-navbar")
+export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavbarDetails {
+    //#region Static Properties

-    @state()
-    me?: SessionUser;
+    private static elementRef: AKPageNavbar | null = null;

-    @state()
-    uiConfig!: UIConfig;
+    static readonly setNavbarDetails = (detail: Partial<PageNavbarDetails>): void => {
+        const { elementRef } = AKPageNavbar;
+        if (!elementRef) {
+            console.debug(
+                `ak-page-header: Could not find ak-page-navbar, skipping event dispatch.`,
+            );
+            return;
+        }
+
+        const { header, description, icon, iconImage } = detail;
+
+        elementRef.header = header;
+        elementRef.description = description;
+        elementRef.icon = icon;
+        elementRef.iconImage = iconImage || false;
+        elementRef.hasIcon = !!icon;
+    };

    static get styles(): CSSResult[] {
        return [
            PFBase,
            PFButton,
            PFPage,
+            PFDrawer,
+
            PFNotificationBadge,
            PFContent,
            PFAvatar,
@ -63,143 +84,404 @@ export class PageHeader extends WithBrandConfig(AKElement) {
                    position: sticky;
                    top: 0;
                    z-index: var(--pf-global--ZIndex--lg);
+                    --pf-c-page__header-tools--MarginRight: 0;
+                    --ak-brand-logo-height: var(--pf-global--FontSize--4xl, 2.25rem);
+                    --ak-brand-background-color: var(
+                        --pf-c-page__sidebar--m-light--BackgroundColor
+                    );
+                    --host-navbar-height: var(--ak-c-page-header--height, 7.5rem);
                }
-                .bar {
+
+                :host([theme="dark"]) {
+                    --ak-brand-background-color: var(--pf-c-page__sidebar--BackgroundColor);
+                    --pf-c-page__sidebar--BackgroundColor: var(--ak-dark-background-light);
+                    color: var(--ak-dark-foreground);
+                }
+
+                navbar {
                    border-bottom: var(--pf-global--BorderWidth--sm);
                    border-bottom-style: solid;
                    border-bottom-color: var(--pf-global--BorderColor--100);
+                    background-color: var(--pf-c-page--BackgroundColor);
+
                    display: flex;
                    flex-direction: row;
-                    min-height: 114px;
-                    max-height: 114px;
-                    background-color: var(--pf-c-page--BackgroundColor);
+
+                    display: grid;
+                    row-gap: var(--pf-global--spacer--sm);
+                    column-gap: var(--pf-global--spacer--sm);
+                    grid-template-columns: [brand] auto [toggle] auto [primary] 1fr [secondary] auto;
+                    grid-template-rows: auto auto;
+                    grid-template-areas:
+                        "brand toggle primary secondary"
+                        "brand toggle description secondary";
+
+                    @media (min-width: 426px) {
+                        height: var(--host-navbar-height);
+                    }
+
+                    @media (max-width: 768px) {
+                        row-gap: var(--pf-global--spacer--xs);
+
+                        align-items: center;
+                        grid-template-areas:
+                            "toggle primary secondary"
+                            "toggle description description";
+                        justify-content: space-between;
+                        width: 100%;
+                    }
                }
-                .pf-c-page__main-section.pf-m-light {
-                    background-color: transparent;
+
+                .items {
+                    display: block;
+
+                    &.primary {
+                        grid-column: primary;
+                        grid-row: primary / description;
+
+                        align-content: center;
+                        padding-block: var(--pf-global--spacer--md);
+
+                        @media (min-width: 426px) {
+                            &.block-sibling {
+                                padding-block-end: 0;
+                                grid-row: primary;
+                            }
+                        }
+
+                        @media (max-width: 768px) {
+                            padding-block: var(--pf-global--spacer--sm);
+                        }
+
+                        .accent-icon {
+                            height: 1em;
+                            width: 1em;
+
+                            @media (max-width: 768px) {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    &.page-description {
+                        grid-area: description;
+                        margin-block-end: var(--pf-global--spacer--md);
+
+                        display: box;
+                        display: -webkit-box;
+                        line-clamp: 2;
+                        -webkit-line-clamp: 2;
+                        box-orient: vertical;
+                        -webkit-box-orient: vertical;
+                        overflow: hidden;
+
+                        @media (max-width: 425px) {
+                            display: none;
+                        }
+
+                        @media (min-width: 769px) {
+                            text-wrap: balance;
+                        }
+                    }
+
+                    &.secondary {
+                        grid-area: secondary;
+                        flex: 0 0 auto;
+                        justify-self: end;
+                        padding-block: var(--pf-global--spacer--sm);
+                        padding-inline-end: var(--pf-global--spacer--sm);
+
+                        @media (min-width: 769px) {
+                            align-content: center;
+                            padding-block: var(--pf-global--spacer--md);
+                            padding-inline-end: var(--pf-global--spacer--xl);
+                        }
+                    }
                }
-                .pf-c-page__main-section {
-                    flex-grow: 1;
-                    flex-shrink: 1;
+
+                .brand {
+                    grid-area: brand;
+                    background-color: var(--ak-brand-background-color);
+                    height: 100%;
+                    width: var(--pf-c-page__sidebar--Width);
+                    align-items: center;
+                    padding-inline: var(--pf-global--spacer--sm);
+
                    display: flex;
-                    flex-direction: column;
                    justify-content: center;
+
+                    &.pf-m-collapsed {
+                        display: none;
+                    }
+
+                    @media (max-width: 1199px) {
+                        display: none;
+                    }
                }
-                img.pf-icon {
-                    max-height: 24px;
+
+                .sidebar-trigger {
+                    grid-area: toggle;
+                    height: 100%;
                }
+
+                .logo {
+                    flex: 0 0 auto;
+                    height: var(--ak-brand-logo-height);
+
+                    & img {
+                        height: 100%;
+                    }
+                }
+
                .sidebar-trigger,
                .notification-trigger {
-                    font-size: 24px;
+                    font-size: 1.5rem;
                }
+
                .notification-trigger.has-notifications {
                    color: var(--pf-global--active-color--100);
                }
+
+                .page-title {
+                    display: flex;
+                    gap: var(--pf-global--spacer--xs);
+                }
+
                h1 {
                    display: flex;
                    flex-direction: row;
                    align-items: center !important;
                }
-                .pf-c-page__header-tools {
-                    flex-shrink: 0;
-                }
-                .pf-c-page__header-tools-group {
-                    height: 100%;
-                }
-                :host([theme="dark"]) .pf-c-page__header-tools {
-                    color: var(--ak-dark-foreground) !important;
-                }
            `,
        ];
    }

-    constructor() {
-        super();
-        window.addEventListener(EVENT_WS_MESSAGE, () => {
-            this.firstUpdated();
-        });
-    }
+    //#endregion

-    async firstUpdated() {
-        this.me = await me();
-        this.uiConfig = await uiConfig();
-        this.uiConfig.navbar.userDisplay = UserDisplay.none;
-    }
+    //#region Properties

-    setTitle(header?: string) {
+    @property({ type: String })
+    icon?: string;
+
+    @property({ type: Boolean })
+    iconImage = false;
+
+    @property({ type: String })
+    header?: string;
+
+    @property({ type: String })
+    description?: string;
+
+    @property({ type: Boolean })
+    hasIcon = true;
+
+    @property({ type: Boolean })
+    open = true;
+
+    @state()
+    session?: SessionUser;
+
+    @state()
+    uiConfig!: UIConfig;
+
+    //#endregion
+
+    //#region Private Methods
+
+    #setTitle(header?: string) {
        const currentIf = currentInterface();
        let title = this.brand?.brandingTitle || TITLE_DEFAULT;
+
        if (currentIf === "admin") {
            title = `${msg("Admin")} - ${title}`;
        }
        // Prepend the header to the title
-        if (header !== undefined && header !== "") {
+        if (header) {
            title = `${header} - ${title}`;
        }
        document.title = title;
    }

+    #toggleSidebar() {
+        this.open = !this.open;
+
+        this.dispatchEvent(
+            new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
+                bubbles: true,
+                composed: true,
+            }),
+        );
+    }
+
+    //#endregion
+
+    //#region Lifecycle
+
+    public connectedCallback(): void {
+        super.connectedCallback();
+        AKPageNavbar.elementRef = this;
+
+        window.addEventListener(EVENT_WS_MESSAGE, () => {
+            this.firstUpdated();
+        });
+    }
+
+    public disconnectedCallback(): void {
+        super.disconnectedCallback();
+        AKPageNavbar.elementRef = null;
+    }
+
+    public async firstUpdated() {
+        this.session = await me();
+        this.uiConfig = getConfigForUser(this.session.user);
+        this.uiConfig.navbar.userDisplay = UserDisplay.none;
+    }
+
    willUpdate() {
        // Always update title, even if there's no header value set,
        // as in that case we still need to return to the generic title
-        this.setTitle(this.header);
+        this.#setTitle(this.header);
    }

+    //#endregion
+
+    //#region Render
+
    renderIcon() {
        if (this.icon) {
            if (this.iconImage && !this.icon.startsWith("fa://")) {
-                return html`<img class="pf-icon" src="${this.icon}" alt="page icon" />`;
+                return html`<img class="accent-icon pf-icon" src="${this.icon}" alt="page icon" />`;
            }
+
            const icon = this.icon.replaceAll("fa://", "fa ");
-            return html`<i class=${icon}></i>`;
+
+            return html`<i class="accent-icon ${icon}"></i>`;
        }
        return nothing;
    }

    render(): TemplateResult {
-        return html`<div class="bar">
-            <button
-                class="sidebar-trigger pf-c-button pf-m-plain"
-                @click=${() => {
-                    this.dispatchEvent(
-                        new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
-                            bubbles: true,
-                            composed: true,
-                        }),
-                    );
-                }}
-            >
-                <i class="fas fa-bars"></i>
-            </button>
-            <section class="pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1>
+        return html`<navbar aria-label="Main" class="navbar">
+                <aside class="brand ${this.open ? "" : "pf-m-collapsed"}">
+                    <a href="#/">
+                        <div class="logo">
+                            <img
+                                src=${themeImage(
+                                    this.brand?.brandingLogo ?? DefaultBrand.brandingLogo,
+                                )}
+                                alt="${msg("authentik Logo")}"
+                                loading="lazy"
+                            />
+                        </div>
+                    </a>
+                </aside>
+                <button
+                    class="sidebar-trigger pf-c-button pf-m-plain"
+                    @click=${this.#toggleSidebar}
+                    aria-label=${msg("Toggle sidebar")}
+                    aria-expanded=${this.open ? "true" : "false"}
+                >
+                    <i class="fas fa-bars"></i>
+                </button>
+
+                <section
+                    class="items primary pf-c-content ${this.description ? "block-sibling" : ""}"
+                >
+                    <h1 class="page-title">
                        ${this.hasIcon
-                            ? html`<slot name="icon">${this.renderIcon()}</slot>&nbsp;`
+                            ? html`<slot name="icon">${this.renderIcon()}</slot>`
                            : nothing}
-                        <slot name="header">${this.header}</slot>
+                        ${this.header}
                    </h1>
-                    ${this.description ? html`<p>${this.description}</p>` : html``}
-                </div>
-            </section>
-            <div class="pf-c-page__header-tools">
-                <div class="pf-c-page__header-tools-group">
-                    <ak-nav-buttons .uiConfig=${this.uiConfig} .me=${this.me}>
-                        <a
-                            class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
-                            href="${globalAK().api.base}if/user/"
-                            slot="extra"
-                        >
-                            ${msg("User interface")}
-                        </a>
-                    </ak-nav-buttons>
-                </div>
-            </div>
-        </div>`;
+                </section>
+                ${this.description
+                    ? html`<section class="items page-description pf-c-content">
+                          <p>${this.description}</p>
+                      </section>`
+                    : nothing}
+
+                <section class="items secondary">
+                    <div class="pf-c-page__header-tools-group">
+                        <ak-nav-buttons .uiConfig=${this.uiConfig} .me=${this.session}>
+                            <a
+                                class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
+                                href="${globalAK().api.base}if/user/"
+                                slot="extra"
+                            >
+                                ${msg("User interface")}
+                            </a>
+                        </ak-nav-buttons>
+                    </div>
+                </section>
+            </navbar>
+            <slot></slot>`;
+    }
+
+    //#endregion
+}
+
+//#endregion
+
+//#region Page Header
+
+/**
+ * A page header component, used to display the page title and description.
+ *
+ * Internally, this component dispatches the `ak-page-header` event, which is
+ * listened to by the `ak-page-navbar` component.
+ *
+ * @singleton
+ */
+@customElement("ak-page-header")
+export class AKPageHeader extends LitElement implements PageNavbarDetails {
+    @property({ type: String })
+    header?: string;
+
+    @property({ type: String })
+    description?: string;
+
+    @property({ type: String })
+    icon?: string;
+
+    @property({ type: Boolean })
+    iconImage = false;
+
+    static get styles(): CSSResult[] {
+        return [
+            css`
+                :host {
+                    display: none;
+                }
+            `,
+        ];
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+
+        AKPageNavbar.setNavbarDetails({
+            header: this.header,
+            description: this.description,
+            icon: this.icon,
+            iconImage: this.iconImage,
+        });
+    }
+
+    updated(): void {
+        AKPageNavbar.setNavbarDetails({
+            header: this.header,
+            description: this.description,
+            icon: this.icon,
+            iconImage: this.iconImage,
+        });
    }
 }

+//#endregion
+
 declare global {
    interface HTMLElementTagNameMap {
-        "ak-page-header": PageHeader;
+        "ak-page-header": AKPageHeader;
+        "ak-page-navbar": AKPageNavbar;
    }
 }
--- a/web/src/elements/sidebar/Sidebar.ts
+++ b/web/src/elements/sidebar/Sidebar.ts
@ -22,6 +22,7 @@ export class Sidebar extends AKElement {
            css`
                :host {
                    z-index: 100;
+                    --pf-c-page__sidebar--Transition: 0 !important;
                }
                .pf-c-nav__link.pf-m-current::after,
                .pf-c-nav__link.pf-m-current:hover::after,
@ -35,10 +36,7 @@ export class Sidebar extends AKElement {
                .pf-c-nav__section + .pf-c-nav__section {
                    --pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm);
                }
-                .pf-c-nav__list .sidebar-brand {
-                    max-height: 82px;
-                    margin-bottom: -0.5rem;
-                }
+
                nav {
                    display: flex;
                    flex-direction: column;
@ -70,7 +68,6 @@ export class Sidebar extends AKElement {
            class="pf-c-nav ${this.activeTheme === UiThemeEnum.Light ? "pf-m-light" : ""}"
            aria-label=${msg("Global")}
        >
-            <ak-sidebar-brand></ak-sidebar-brand>
            <ul class="pf-c-nav__list">
                <slot></slot>
            </ul>
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@ -1,17 +1,3 @@
-import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/common/constants";
-import { AKElement } from "@goauthentik/elements/Base";
-import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
-import { themeImage } from "@goauthentik/elements/utils/images";
-
-import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
 import { CurrentBrand, UiThemeEnum } from "@goauthentik/api";

 // If the viewport is wider than MIN_WIDTH, the sidebar
@ -28,79 +14,3 @@ export const DefaultBrand: CurrentBrand = {
    matchedDomain: "",
    defaultLocale: "",
 };
-
-@customElement("ak-sidebar-brand")
-export class SidebarBrand extends WithBrandConfig(AKElement) {
-    static get styles(): CSSResult[] {
-        return [
-            PFBase,
-            PFGlobal,
-            PFPage,
-            PFButton,
-            css`
-                :host {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    height: 114px;
-                    min-height: 114px;
-                    border-bottom: var(--pf-global--BorderWidth--sm);
-                    border-bottom-style: solid;
-                    border-bottom-color: var(--pf-global--BorderColor--100);
-                }
-                .pf-c-brand img {
-                    padding: 0 0.5rem;
-                    height: 42px;
-                }
-                button.pf-c-button.sidebar-trigger {
-                    background-color: transparent;
-                    border-radius: 0px;
-                    height: 100%;
-                    color: var(--ak-dark-foreground);
-                }
-            `,
-        ];
-    }
-
-    constructor() {
-        super();
-        window.addEventListener("resize", () => {
-            this.requestUpdate();
-        });
-    }
-
-    render(): TemplateResult {
-        return html` ${window.innerWidth <= MIN_WIDTH
-                ? html`
-                      <button
-                          class="sidebar-trigger pf-c-button"
-                          @click=${() => {
-                              this.dispatchEvent(
-                                  new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
-                                      bubbles: true,
-                                      composed: true,
-                                  }),
-                              );
-                          }}
-                      >
-                          <i class="fas fa-bars"></i>
-                      </button>
-                  `
-                : html``}
-            <a href="#/" class="pf-c-page__header-brand-link">
-                <div class="pf-c-brand ak-brand">
-                    <img
-                        src=${themeImage(this.brand?.brandingLogo ?? DefaultBrand.brandingLogo)}
-                        alt="${msg("authentik Logo")}"
-                        loading="lazy"
-                    />
-                </div>
-            </a>`;
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "ak-sidebar-brand": SidebarBrand;
-    }
-}
--- a/web/src/elements/tests/utils.ts
+++ b/web/src/elements/tests/utils.ts
@ -1,19 +1,21 @@
+import {
+    appendStyleSheet,
+    assertAdoptableStyleSheetParent,
+    createStyleSheetUnsafe,
+} from "@goauthentik/common/stylesheets.js";
+
 import { TemplateResult, render as litRender } from "lit";

 import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

-import { ensureCSSStyleSheet } from "../utils/ensureCSSStyleSheet.js";
-
 // A special version of render that ensures our style sheets will always be available
 // to all elements under test.  Ensures they look right during testing, and that any
 // CSS-based checks for visibility will return correct values.

 export const render = (body: TemplateResult) => {
-    document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        ensureCSSStyleSheet(PFBase),
-        ensureCSSStyleSheet(AKGlobal),
-    ];
+    assertAdoptableStyleSheetParent(document);
+
+    appendStyleSheet(document, ...[PFBase, AKGlobal].map(createStyleSheetUnsafe));
    return litRender(body, document.body);
 };
--- a/web/src/elements/types.ts
+++ b/web/src/elements/types.ts
@ -1,9 +1,14 @@
-import { AKElement } from "@goauthentik/elements/Base";
-
 import { type LitElement, type ReactiveControllerHost, type TemplateResult, nothing } from "lit";
 import "lit";

-export type ReactiveElementHost<T = AKElement> = Partial<ReactiveControllerHost> & T;
+/**
+ * A custom element which may be used as a host for a ReactiveController.
+ *
+ * @remarks
+ *
+ * This type is derived from an internal type in Lit.
+ */
+export type ReactiveElementHost<T> = Partial<ReactiveControllerHost & T> & HTMLElement;

 export type AbstractLitElementConstructor = abstract new (...args: never[]) => LitElement;

--- a/web/src/elements/utils/ensureCSSStyleSheet.ts
+++ b/web/src/elements/utils/ensureCSSStyleSheet.ts
@ -1,35 +0,0 @@
-import { CSSResult, unsafeCSS } from "lit";
-
-const supportsAdoptingStyleSheets: boolean =
-    window.ShadowRoot &&
-    (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
-    "adoptedStyleSheets" in Document.prototype &&
-    "replace" in CSSStyleSheet.prototype;
-
-function stringToStylesheet(css: string) {
-    if (supportsAdoptingStyleSheets) {
-        const sheet = unsafeCSS(css).styleSheet;
-        if (sheet === undefined) {
-            throw new Error(
-                `CSS processing error: undefined stylesheet from string.  Source: ${css}`,
-            );
-        }
-        return sheet;
-    }
-
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(css);
-    return sheet;
-}
-
-function cssResultToStylesheet(css: CSSResult) {
-    const sheet = css.styleSheet;
-    return sheet ? sheet : stringToStylesheet(css.toString());
-}
-
-export const ensureCSSStyleSheet = (css: string | CSSStyleSheet | CSSResult): CSSStyleSheet =>
-    css instanceof CSSResult
-        ? cssResultToStylesheet(css)
-        : typeof css === "string"
-          ? stringToStylesheet(css)
-          : css;
--- a/web/src/elements/utils/iframe.ts
+++ b/web/src/elements/utils/iframe.ts
@ -0,0 +1,55 @@
+/**
+ * @file IFrame Utilities
+ */
+
+interface IFrameLoadResult {
+    contentWindow: Window;
+    contentDocument: Document;
+}
+
+export function pluckIFrameContent(iframe: HTMLIFrameElement) {
+    const contentWindow = iframe.contentWindow;
+    const contentDocument = iframe.contentDocument;
+
+    if (!contentWindow) {
+        throw new Error("Iframe contentWindow is not accessible");
+    }
+
+    if (!contentDocument) {
+        throw new Error("Iframe contentDocument is not accessible");
+    }
+
+    return {
+        contentWindow,
+        contentDocument,
+    };
+}
+
+export function resolveIFrameContent(iframe: HTMLIFrameElement): Promise<IFrameLoadResult> {
+    if (iframe.contentDocument?.readyState === "complete") {
+        return Promise.resolve(pluckIFrameContent(iframe));
+    }
+
+    return new Promise((resolve) => {
+        iframe.addEventListener("load", () => resolve(pluckIFrameContent(iframe)), { once: true });
+    });
+}
+
+/**
+ * Creates a minimal HTML wrapper for an iframe.
+ *
+ * @deprecated Use the `contentDocument.body` directly instead.
+ */
+export function createIFrameHTMLWrapper(bodyContent: string): string {
+    const html = String.raw;
+
+    return html`<!doctype html>
+        <html>
+            <head>
+                <meta charset="utf-8" />
+            </head>
+            <body style="display:flex;flex-direction:row;justify-content:center;">
+                ${bodyContent}
+            </body>
+        </html>`;
+}
--- a/web/src/elements/utils/images.ts
+++ b/web/src/elements/utils/images.ts
@ -1,13 +1,8 @@
-import { QUERY_MEDIA_COLOR_LIGHT, rootInterface } from "@goauthentik/elements/Base";
-
-import { UiThemeEnum } from "@goauthentik/api";
+import { resolveUITheme } from "@goauthentik/common/theme";
+import { rootInterface } from "@goauthentik/elements/Base";

 export function themeImage(rawPath: string) {
-    let enabledTheme = rootInterface()?.activeTheme;
-    if (!enabledTheme || enabledTheme === UiThemeEnum.Automatic) {
-        enabledTheme = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches
-            ? UiThemeEnum.Light
-            : UiThemeEnum.Dark;
-    }
+    const enabledTheme = rootInterface()?.activeTheme || resolveUITheme();
+
    return rawPath.replaceAll("%(theme)s", enabledTheme);
 }
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@ -46,7 +46,6 @@ import {
    FlowsApi,
    ResponseError,
    ShellChallenge,
-    UiThemeEnum,
 } from "@goauthentik/api";

@customElement("ak-flow-executor")
@ -200,10 +199,6 @@ export class FlowExecutor extends Interface implements StageHost {
        });
    }

-    async getTheme(): Promise<UiThemeEnum> {
-        return globalAK()?.brand.uiTheme || UiThemeEnum.Automatic;
-    }
-
    async submit(
        payload?: FlowChallengeResponseRequest,
        options?: SubmitOptions,
--- a/web/src/flow/components/ak-brand-footer.ts
+++ b/web/src/flow/components/ak-brand-footer.ts
@ -1,4 +1,4 @@
-import { purify } from "@goauthentik/common/purify";
+import { BrandedHTMLPolicy, sanitizeHTML } from "@goauthentik/common/purify";
 import { AKElement } from "@goauthentik/elements/Base.js";

 import { msg } from "@lit/localize";
@ -21,8 +21,6 @@ const styles = css`
    }
 `;

-const poweredBy: FooterLink = { name: msg("Powered by authentik"), href: null };
-
@customElement("ak-brand-links")
 export class BrandLinks extends AKElement {
    static get styles() {
@ -33,13 +31,21 @@ export class BrandLinks extends AKElement {
    links: FooterLink[] = [];

    render() {
-        const links = [...(this.links ?? []), poweredBy];
+        const links = [...(this.links ?? [])];
+
        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>`,
-            )}
+            ${map(links, (link) => {
+                const children = sanitizeHTML(BrandedHTMLPolicy, link.name);
+
+                if (link.href) {
+                    return html`<li><a href="${link.href}">${children}</a></li>`;
+                }
+
+                return html`<li>
+                    <span> ${children} </span>
+                </li>`;
+            })}
+            <li><span>${msg("Powered by authentik")}</span></li>
        </ul>`;
    }
 }
--- a/web/src/flow/stages/captcha/CaptchaStage.ts
+++ b/web/src/flow/stages/captcha/CaptchaStage.ts
@ -1,15 +1,16 @@
-///<reference types="@hcaptcha/types"/>
-import { renderStatic } from "@goauthentik/common/purify";
+/// <reference types="@hcaptcha/types"/>
+/// <reference types="turnstile-types"/>
+import { renderStaticHTMLUnsafe } from "@goauthentik/common/purify";
 import "@goauthentik/elements/EmptyState";
 import { akEmptyState } from "@goauthentik/elements/EmptyState";
 import { bound } from "@goauthentik/elements/decorators/bound";
 import "@goauthentik/elements/forms/FormElement";
+import { createIFrameHTMLWrapper } from "@goauthentik/elements/utils/iframe";
 import { ListenerController } from "@goauthentik/elements/utils/listenerController.js";
 import { randomId } from "@goauthentik/elements/utils/randomId";
 import "@goauthentik/flow/FormStatic";
 import { BaseStage } from "@goauthentik/flow/stages/base";
 import { P, match } from "ts-pattern";
-import type * as _ from "turnstile-types";

 import { msg } from "@lit/localize";
 import { CSSResult, PropertyValues, TemplateResult, css, html, nothing } from "lit";
@ -56,40 +57,36 @@ type CaptchaHandler = {
 // a resize. Because the Captcha is itself in an iframe, the reported height is often off by some
 // margin, so adding 2rem of height to our container adds padding and prevents scroll bars or hidden
 // rendering.
+function iframeTemplate(children: TemplateResult, challengeURL: string): TemplateResult {
+    return html` ${children}
+        <script>
+            new ResizeObserver((entries) => {
+                const height =
+                    document.body.offsetHeight +
+                    parseFloat(getComputedStyle(document.body).fontSize) * 2;

-const iframeTemplate = (captchaElement: TemplateResult, challengeUrl: string) =>
-    html`<!doctype html>
-        <head>
-            <html>
-                <body style="display:flex;flex-direction:row;justify-content:center;">
-                    ${captchaElement}
-                    <script>
-                        new ResizeObserver((entries) => {
-                            const height =
-                                document.body.offsetHeight +
-                                parseFloat(getComputedStyle(document.body).fontSize) * 2;
-                            window.parent.postMessage({
-                                message: "resize",
-                                source: "goauthentik.io",
-                                context: "flow-executor",
-                                size: { height },
-                            });
-                        }).observe(document.querySelector(".ak-captcha-container"));
-                    </script>
-                    <script src=${challengeUrl}></script>
-                    <script>
-                        function callback(token) {
-                            window.parent.postMessage({
-                                message: "captcha",
-                                source: "goauthentik.io",
-                                context: "flow-executor",
-                                token: token,
-                            });
-                        }
-                    </script>
-                </body>
-            </html>
-        </head>`;
+                window.parent.postMessage({
+                    message: "resize",
+                    source: "goauthentik.io",
+                    context: "flow-executor",
+                    size: { height },
+                });
+            }).observe(document.querySelector(".ak-captcha-container"));
+        </script>
+
+        <script src=${challengeURL}></script>
+
+        <script>
+            function callback(token) {
+                window.parent.postMessage({
+                    message: "captcha",
+                    source: "goauthentik.io",
+                    context: "flow-executor",
+                    token,
+                });
+            }
+        </script>`;
+}

@customElement("ak-stage-captcha")
 export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeResponseRequest> {
@ -305,11 +302,25 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
    }

    async renderFrame(captchaElement: TemplateResult) {
-        this.captchaFrame.contentWindow?.document.open();
-        this.captchaFrame.contentWindow?.document.write(
-            await renderStatic(iframeTemplate(captchaElement, this.challenge.jsUrl)),
+        const { contentDocument } = this.captchaFrame || {};
+
+        if (!contentDocument) {
+            console.debug(
+                "authentik/stages/captcha: unable to render captcha frame, no contentDocument",
+            );
+
+            return;
+        }
+
+        contentDocument.open();
+
+        contentDocument.write(
+            createIFrameHTMLWrapper(
+                renderStaticHTMLUnsafe(iframeTemplate(captchaElement, this.challenge.jsUrl)),
+            ),
        );
-        this.captchaFrame.contentWindow?.document.close();
+
+        contentDocument.close();
    }

    renderBody() {
--- a/web/src/standalone/api-browser/index.ts
+++ b/web/src/standalone/api-browser/index.ts
@ -3,7 +3,6 @@ import "rapidoc";

 import { CSRFHeaderName } from "@goauthentik/common/api/config";
 import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
-import { globalAK } from "@goauthentik/common/global";
 import { first, getCookie } from "@goauthentik/common/utils";
 import { Interface } from "@goauthentik/elements/Interface";
 import "@goauthentik/elements/ak-locale-context";
@ -62,10 +61,6 @@ export class APIBrowser extends Interface {
        );
    }

-    async getTheme(): Promise<UiThemeEnum> {
-        return globalAK()?.brand.uiTheme || UiThemeEnum.Automatic;
-    }
-
    render(): TemplateResult {
        return html`
            <ak-locale-context>
--- a/web/src/standalone/loading/index.ts
+++ b/web/src/standalone/loading/index.ts
@ -1,4 +1,3 @@
-import { globalAK } from "@goauthentik/common/global";
 import { Interface } from "@goauthentik/elements/Interface";

 import { msg } from "@lit/localize";
@ -10,8 +9,6 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

-import { UiThemeEnum } from "@goauthentik/api";
-
@customElement("ak-loading")
 export class Loading extends Interface {
    static get styles(): CSSResult[] {
@ -28,7 +25,7 @@ export class Loading extends Interface {
        ];
    }

-    _initContexts(): void {
+    registerContexts(): void {
        // Stub function to avoid making API requests for things we don't need. The `Interface` base class loads
        // a bunch of data that is used globally by various things, however this is an interface that is shown
        // very briefly and we don't need any of that data.
@ -38,10 +35,6 @@ export class Loading extends Interface {
        // Stub function to avoid fetching custom CSS.
    }

-    async getTheme(): Promise<UiThemeEnum> {
-        return globalAK()?.brand.uiTheme || UiThemeEnum.Automatic;
-    }
-
    render(): TemplateResult {
        return html` <section
            class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl"
--- a/web/src/stories/flow-interface.ts
+++ b/web/src/stories/flow-interface.ts
@ -1,18 +1,9 @@
 import { FlowExecutor } from "@goauthentik/flow/FlowExecutor";

-import { customElement, property } from "lit/decorators.js";
-
-import { UiThemeEnum } from "@goauthentik/api";
+import { customElement } from "lit/decorators.js";

@customElement("ak-storybook-interface-flow")
-export class StoryFlowInterface extends FlowExecutor {
-    @property()
-    storyTheme: UiThemeEnum = UiThemeEnum.Dark;
-
-    async getTheme(): Promise<UiThemeEnum> {
-        return this.storyTheme;
-    }
-}
+export class StoryFlowInterface extends FlowExecutor {}

 declare global {
    interface HTMLElementTagNameMap {
--- a/web/src/stories/interface.ts
+++ b/web/src/stories/interface.ts
@ -1,18 +1,9 @@
 import { Interface } from "@goauthentik/elements/Interface";

-import { customElement, property } from "lit/decorators.js";
-
-import { UiThemeEnum } from "@goauthentik/api";
+import { customElement } from "lit/decorators.js";

@customElement("ak-storybook-interface")
-export class StoryInterface extends Interface {
-    @property()
-    storyTheme: UiThemeEnum = UiThemeEnum.Dark;
-
-    async getTheme(): Promise<UiThemeEnum> {
-        return this.storyTheme;
-    }
-}
+export class StoryInterface extends Interface {}

 declare global {
    interface HTMLElementTagNameMap {
--- a/web/src/user/UserInterface.ts
+++ b/web/src/user/UserInterface.ts
@ -6,7 +6,7 @@ import {
 } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
 import { configureSentry } from "@goauthentik/common/sentry";
-import { UIConfig } from "@goauthentik/common/ui/config";
+import { UIConfig, getConfigForUser } from "@goauthentik/common/ui/config";
 import { me } from "@goauthentik/common/users";
 import { WebsocketClient } from "@goauthentik/common/ws";
 import "@goauthentik/components/ak-nav-buttons";
@ -292,6 +292,7 @@ export class UserInterface extends AuthenticatedInterface {

    async connectedCallback() {
        super.connectedCallback();
+
        window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, this.toggleNotificationDrawer);
        window.addEventListener(EVENT_API_DRAWER_TOGGLE, this.toggleApiDrawer);
        window.addEventListener(EVENT_WS_MESSAGE, this.fetchConfigurationDetails);
@ -301,6 +302,7 @@ export class UserInterface extends AuthenticatedInterface {
        window.removeEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, this.toggleNotificationDrawer);
        window.removeEventListener(EVENT_API_DRAWER_TOGGLE, this.toggleApiDrawer);
        window.removeEventListener(EVENT_WS_MESSAGE, this.fetchConfigurationDetails);
+
        super.disconnectedCallback();
    }

@ -319,8 +321,10 @@ export class UserInterface extends AuthenticatedInterface {
    }

    fetchConfigurationDetails() {
-        me().then((me: SessionUser) => {
-            this.me = me;
+        me().then((session: SessionUser) => {
+            this.me = session;
+            this.uiConfig = getConfigForUser(session.user);
+
            new EventsApi(DEFAULT_CONFIG)
                .eventsNotificationsList({
                    seen: false,
@ -334,12 +338,16 @@ export class UserInterface extends AuthenticatedInterface {
        });
    }

-    get isFullyConfigured() {
-        return Boolean(this.uiConfig && this.me);
-    }
-
    render() {
-        if (!this.isFullyConfigured) {
+        if (!this.me) {
+            console.debug(`authentik/user/UserInterface: waiting for user session to be available`);
+
+            return nothing;
+        }
+
+        if (!this.uiConfig) {
+            console.debug(`authentik/user/UserInterface: waiting for UI config to be available`);
+
            return nothing;
        }

--- a/web/xliff/fr.xlf
+++ b/web/xliff/fr.xlf
@ -9788,18 +9788,23 @@ Les liaisons avec les groupes/utilisateurs sont vérifiées par rapport à l'uti
 </trans-unit>
 <trans-unit id="s844baf19a6c4a9b4">
  <source>Enable "Remember me on this device"</source>
+  <target>Activer "Se souvenir de moi sur cet appareil"</target>
 </trans-unit>
 <trans-unit id="sfa72bca733f40692">
  <source>When enabled, the user can save their username in a cookie, allowing them to skip directly to entering their password.</source>
+  <target>Si cette option est activée, l'utilisateur peut enregistrer son nom d'utilisateur dans un cookie, ce qui lui permet de passer directement à la saisie de son mot de passe.</target>
 </trans-unit>
 <trans-unit id="s1c336c2d6cef77b3">
  <source>Remember me on this device</source>
+  <target>Se souvenir de moi sur cet appareil</target>
 </trans-unit>
 <trans-unit id="s86cf007b861152ca">
  <source>Ensure that the user's new password is different from their previous passwords. The number of past passwords to check is configurable.</source>
+  <target>Vérifiez que le nouveau mot de passe de l'utilisateur est différent de ses mots de passe précédents. Le nombre d'anciens mots de passe à vérifier est configurable.</target>
 </trans-unit>
 <trans-unit id="s79b3fcd40dd63921">
  <source>Number of previous passwords to check</source>
+  <target>Nombre d'anciens mots de passe à vérifier</target>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/zh-Hans.xlf
+++ b/web/xliff/zh-Hans.xlf
@ -9801,9 +9801,11 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s86cf007b861152ca">
  <source>Ensure that the user's new password is different from their previous passwords. The number of past passwords to check is configurable.</source>
+  <target>确保用户的密码与之前使用的不同。可以配置检查多少个历史密码。</target>
 </trans-unit>
 <trans-unit id="s79b3fcd40dd63921">
  <source>Number of previous passwords to check</source>
+  <target>检查历史密码数量</target>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/zh_CN.xlf
+++ b/web/xliff/zh_CN.xlf
@ -9798,6 +9798,14 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s1c336c2d6cef77b3">
  <source>Remember me on this device</source>
  <target>在此设备上记住我</target>
+</trans-unit>
+<trans-unit id="s86cf007b861152ca">
+  <source>Ensure that the user's new password is different from their previous passwords. The number of past passwords to check is configurable.</source>
+  <target>确保用户的密码与之前使用的不同。可以配置检查多少个历史密码。</target>
+</trans-unit>
+<trans-unit id="s79b3fcd40dd63921">
+  <source>Number of previous passwords to check</source>
+  <target>检查历史密码数量</target>
 </trans-unit>
    </body>
  </file>
--- a/website/docs/add-secure-apps/flows-stages/flow/examples/default_flows.md
+++ b/website/docs/add-secure-apps/flows-stages/flow/examples/default_flows.md
@ -4,7 +4,7 @@ title: Default flows

 When you create a new provider, you can select certain default flows that will be used with the provider and its associated application. For example, you can [create a custom flow](../index.md#create-a-custom-flow) that override the defaults configured on the brand.

-If no default flow is selected when the provider is created, to determine which flow should be used authentik will first check if there is a default flow configured in the active [**Brand**](../../../../customize/brands.md). If no default is configured there, authentik will go through all flows with the matching designation, sorted by `slug` and evaluate policies bound directly to the flows, and the first flow whose policies allow access will be picked.
+If no default flow is selected when the provider is created, to determine which flow should be used authentik will first check if there is a default flow configured in the active [**Brand**](../../../../sys-mgmt/brands.md). If no default is configured there, authentik will go through all flows with the matching designation, sorted by `slug` and evaluate policies bound directly to the flows, and the first flow whose policies allow access will be picked.

 import DefaultFlowList from "../../flow/flow_list/\_defaultflowlist.mdx";

--- a/website/docs/add-secure-apps/flows-stages/flow/executors/user-settings.md
+++ b/website/docs/add-secure-apps/flows-stages/flow/executors/user-settings.md
@ -6,4 +6,4 @@ The user interface (/if/user/) uses a specialized flow executor to allow individ

 Because the stages in a flow can change during its execution, be aware that configuring this executor to use any stage type other than Prompt or User Write will automatically trigger a redirect to the standard executor.

-An admin can customize which fields can be changed by the user by updating the default-user-settings-flow, or copying it to create a new flow with a Prompt Stage and a User Write Stage. Different variants of your flow can be applied to different [Brands](../../../../customize/brands.md) on the same authentik instance.
+An admin can customize which fields can be changed by the user by updating the default-user-settings-flow, or copying it to create a new flow with a Prompt Stage and a User Write Stage. Different variants of your flow can be applied to different [Brands](../../../../sys-mgmt/brands.md) on the same authentik instance.
--- a/website/docs/add-secure-apps/flows-stages/flow/index.md
+++ b/website/docs/add-secure-apps/flows-stages/flow/index.md
@ -46,7 +46,7 @@ To create a flow, follow these steps:

 After creating the flow, you can then [bind specific stages](../stages/index.md#bind-a-stage-to-a-flow) to the flow and [bind policies](../../../customize/policies/working_with_policies.md) to the flow to further customize the user's log in and authentication process.

-To determine which flow should be used, authentik will first check which default authentication flow is configured in the active [**Brand**](../../../customize/brands.md). If no default is configured there, the policies in all flows with the matching designation are checked, and the first flow with matching policies sorted by `slug` will be used.
+To determine which flow should be used, authentik will first check which default authentication flow is configured in the active [**Brand**](../../../sys-mgmt/brands.md). If no default is configured there, the policies in all flows with the matching designation are checked, and the first flow with matching policies sorted by `slug` will be used.

 ## Flow configuration options

--- a/website/docs/customize/branding.md
+++ b/website/docs/customize/branding.md
@ -0,0 +1,10 @@
+---
+title: Branding
+slug: /branding
+---
+
+You can configure several differently "branded" options depending on the associated domain, even though objects such as applications, providers, etc, are still global. This can be handy to use the same authentik instance, but branded differently for different domains.
+
+The main settings that control your instance's appearance and behaviour are the _default flows_ and the _branding settings_.
+
+To create or modify a brand, open the Admin interface and navigate to **System** > **Brands**. For complete instructions refer to our [Brands documentation](../sys-mgmt/brands.md).
--- a/website/docs/customize/brands.md
+++ b/website/docs/customize/brands.md
@ -1,39 +0,0 @@
---
-title: Brands
-slug: /brands
---
-
-You can configure several differently "branded" options depending on the associated domain, even though objects such as applications, providers, etc, are still global. This can be handy to use the same authentik instance, but branded differently for different domains.
-
-The main settings that brands influence are flows and branding.
-
-## Flows
-
-You can explicitly select, in your instance's Brand settings, the _default flows_ to use for the current brand. To do so, log in as an administrator, open the Admin interface, and navigate to **System -> Brands**. There you can optionally configure these default flows:
-
- Authentication flow: the flow used to authenticate users. If left empty, the first applicable flow sorted by the slug is used.
- Invalidation flow: for typical use cases, select the `default-invalidation-flow` (Logout) flow. This flow logs the user out of authentik when the application session ends (user logs out of the app).
- Recovery flow: if set, the user can access an option to recover their login credentials.
- Unenrollment flow: if set, users are able to unenroll themselves using this flow. If no flow is set, option is not shown.
- User settings flow: if set, users are able to configure details of their profile.
- Device code flow: if set, the OAuth Device Code profile can be used, and the selected flow will be used to enter the code.
-
-If a default flow is _not_ set in the brand, then authentik selects any flow that:
-
-    - matches the required designation
-    - comes first sorted by slug
-    - is allowed by policies
-
-This means that if you want to select a default flow based on policy, you can leave the brand default empty. To learn more about default flows, refer to our [documentation](../add-secure-apps/flows-stages/flow/examples/default_flows.md).
-
-## Branding
-
-The brand configuration controls the branding title (shown in website document title and several other places), the sidebar/header logo that appears in the upper left of the product interface, and the favicon on a browser tab.
-
-:::info
-Starting with authentik 2024.6.2, the placeholder `%(theme)s` can be used in the logo configuration option, which will be replaced with the active theme.
-:::
-
-## External user settings
-
-You can configure authentik to redirect external users to a default application when they successfully authenticate (without being sent from a specific application). To do so, use the **Default application** configuration on the **System -> Brands** page of the Admin interface.
--- a/website/docs/customize/index.md
+++ b/website/docs/customize/index.md
@ -0,0 +1,13 @@
+---
+title: Customize your instance
+---
+
+You can customize the behaviour, look, and available resources for your authentik instance. For more information refer to each of the topics below:
+
+- [Policies](./policies/working_with_policies.md)
+- Interfaces:
+    - [Flows](./interfaces/flow/customization.mdx)
+    - [User interface](./interfaces/user/customization.mdx)
+    - [Admin interface](./interfaces/admin/customization.mdx)
+- [Blueprints](./blueprints/index.mdx)
+- [Branding](./branding.md)
--- a/website/docs/developer-docs/docs/style-guide.mdx
+++ b/website/docs/developer-docs/docs/style-guide.mdx
@ -146,7 +146,6 @@ When writing out steps in a procedural topic, avoid starting with "Once...". Ins

 - Use _italic_ for:

-    - Variables or placeholders to indicate that the value should be replaced by the user (e.g., _your-domain.com_). Clearly indicate whether variables in code snippets need to be defined by the user, are system-provided, or generated.
    - Emphasis, but sparingly, to avoid overuse. For example, you can use italics for important terms or concepts on first mention in a section.

 - Use `code formatting` for:
@ -157,11 +156,9 @@ When writing out steps in a procedural topic, avoid starting with "Once...". Ins

 - When handling URLs:

-    - For URLs entered as values or defined in fields _italicize_ any variables within them to emphasize that placeholders require user input.
+    - For URLs entered as values or defined in fields, enclose any variables inside angle brackets (`< >`) to clearly indicate that these are placeholders that require user input.

-        In Markdown, use this syntax: `<kbd>https://<em>company-domain</em>/source/oauth/callback/<em>source-slug</em></kbd>`
-
-        Rendered formatting: <kbd>https://<em>company-domain</em>/source/oauth/callback/<em>source-slug</em></kbd>
+        For example: `https://authentik.company/application/o/<slug>/.well-known/openid-configuration`

    - When mentioning URLs in text or within procedural instructions, omit code formatting. For instance: "In your browser, go to https://example.com."

--- a/website/docs/enterprise/manage-enterprise.mdx
+++ b/website/docs/enterprise/manage-enterprise.mdx
@ -115,9 +115,13 @@ The following events occur when a license expires or the internal/external user

 ### About users and licenses

-License usage is calculated based on total user counts that authentik regularly captures. This data is checked against all valid licenses, and the sum total of all users. Internal and external users are counted based on the number of active users of the respective type saved in authentik. Service account users are not counted towards the license.
+License usage is calculated based on total user counts that authentik regularly captures. This data is checked against all valid licenses, and the sum total of all users. Internal and external users are counted based on the total number of users of the respective type saved in authentik.

-An **internal** user is typically a team member, such as a company employee, who has access to the full Enterprise feature set. An **external** user might be an external consultant, a volunteer in a charitable site, or a B2C customer who logged onto your website to shop. External users don't get access to Enterprise features, nor to the **My applications** page in authentik. Instead, external users are authenticated and then redirected to log directly into their [default application](../customize/brands.md#external-user-settings).
+:::info
+Accounts that are disabled, as well as service accounts, are excluded from the license user count.
+:::
+
+An **internal** user is typically a team member, such as a company employee, who has access to the full Enterprise feature set. An **external** user might be an external consultant, a volunteer in a charitable site, or a B2C customer who logged onto your website to shop. External users don't get access to Enterprise features, nor to the **My applications** page in authentik. Instead, external users are authenticated and then redirected to log directly into their [default application](../sys-mgmt/brands.md#external-user-settings).

 ### Upgrade the number of users in a license

--- a/website/docs/releases/2024/v2024.2.md
+++ b/website/docs/releases/2024/v2024.2.md
@ -25,7 +25,7 @@ slug: /releases/2024.2

    Blueprints using `authentik_tenants.tenant` will need to be changed to use `authentik_brands.brand`.

-    For more information, refer to the [documentation for _brands_](../../customize/brands.md).
+    For more information, refer to the [documentation for _brands_](../../sys-mgmt/brands.md).

    Also, **the event retention settings configured in brands (previously tenants, see above) has been removed and is now a system setting**, managed in the Admin interface or via the API (see below).

--- a/website/docs/releases/2024/v2024.8.md
+++ b/website/docs/releases/2024/v2024.8.md
@ -110,7 +110,7 @@ slug: "/releases/2024.8"

 - **WebFinger support**

-    With the addition of the [default application](../../customize/brands.md#external-user-settings) setting, when the default application uses an OIDC provider, a WebFinger endpoint is available now.
+    With the addition of the [default application](../../sys-mgmt/brands.md#external-user-settings) setting, when the default application uses an OIDC provider, a WebFinger endpoint is available now.

 ## Upgrading

--- a/website/docs/sys-mgmt/brands.md
+++ b/website/docs/sys-mgmt/brands.md
@ -0,0 +1,61 @@
+---
+title: Brands
+slug: /brands
+---
+
+As an authentik admin, you can customize your instance's appearance and behavior using brands. While a single authentik instance supports only one brand per domain, you can apply a separate brand to each domain.
+
+For an overview of branding and other customization options in authentik refer to [Customize your instance](../customize/index.md).
+
+## Create or edit a brand
+
+To create or edit a brand, follow these steps:
+
+1. Log in as an administrator, open the authentik Admin interface, and navigate to **System** > **Brands**.
+
+2. Click **Create** to add a new brand, or click the **Edit** icon next to an existing brand to modify it.
+
+3. Define the configurations in the following settings:
+
+### Branding settings
+
+The brand settings define the visual identity of the brand, including:
+
+- **Branding title**: Displayed in the browser tab (document title) and throughout the UI;
+- **Logo**: Appears in the sidebar/header;
+- **Favicon**: Shown on the browser tab.
+
+:::info
+Starting with authentik 2024.6.2, the placeholder `%(theme)s` can be used in the logo configuration option, which will be replaced with the active theme.
+:::
+
+### External user settings
+
+You can configure authentik to redirect external users to a default application after they log in (if they weren't originally redirected from a specific application). To do this:
+
+1. Open the authentik Admin interface and navigate to **System** > **Brands**.
+2. Click the **Edit** icon for the relevant brand.
+3. Under **External user settings** select a **Default application**.
+
+### Default flows
+
+You can explicitly select, in your instance's Brand settings, the _default flows_ to use for the current brand. You can optionally configure these default flows ([learn more about each default flow](../add-secure-apps/flows-stages/flow/examples/default_flows.md)):
+
+- **Authentication** flow: the flow used to authenticate users. If left empty, the first applicable flow sorted by the slug is used.
+- **Invalidation flow**: for typical use cases, select the `default-invalidation-flow` (Logout) flow. This flow logs the user out of authentik when the application session ends (user logs out of the app).
+- **Recovery flow**: if set, the user can access an option to recover their login credentials.
+- **Unenrollment flow**: if set, users are able to unenroll themselves using this flow. If no flow is set, option is not shown.
+- **User settings flow**: if set, users are able to configure details of their profile.
+- **Device code flow**: if set, the OAuth Device Code profile can be used, and the selected flow will be used to enter the code.
+
+If a default flow is _not_ set in the brand, then authentik selects any flow that:
+
+    - matches the required designation
+    - comes first sorted by slug
+    - is allowed by policies
+
+This means that if you want to select a default flow based on policy, you can leave the brand default empty.
+
+## Other global settings
+
+Under **Other global settings** you can specify an exact web certificate.
--- a/website/docs/sys-mgmt/tenancy.md
+++ b/website/docs/sys-mgmt/tenancy.md
@ -8,7 +8,7 @@ This feature is in alpha. Use at your own risk.
 ::::

 ::::info
-This feature is available from 2024.2 and is not to be confused with [brands](../customize/brands.md), which were previously called tenants.
+This feature is available from 2024.2 and is not to be confused with [brands](../sys-mgmt/brands.md), which were previously called tenants.
 ::::

 ## About tenants
--- a/website/docs/users-sources/groups/group_ref.md
+++ b/website/docs/users-sources/groups/group_ref.md
@ -4,13 +4,32 @@ title: Group properties and attributes

 ## Object properties

-The Group object has the following properties:
+The group object has the following properties:

- `name` Group's display name.
- `is_superuser` Boolean field if the group's users are superusers.
- `parent` The parent Group of this Group.
- `attributes` Dynamic attributes, see [Attributes](#attributes)
+- `name`: The group's display name.
+- `is_superuser`: A boolean field that determines if the group's users are superusers.
+- `parent`: The parent group of this group.
+- `attributes`: Dynamic attributes, see [Attributes](#attributes).
+
+## Examples
+
+These are examples of how group objects can be used within authentik policies and property mappings.
+
+### List all group members
+
+Use the following examples to list all users that are members of a group:
+
+```python title="Get all members of a group object"
+group.users.all()
+```
+
+```python title="Specify a group object based on name and return all of its members"
+from authentik.core.models import Group
+Group.objects.get(name="name of group").users.all()
+```

 ## Attributes

+By default, authentik group objects are created with no attributes, however custom attributes can be set.
+
 See [the user reference](../user/user_ref.mdx#attributes) for well-known attributes.
--- a/website/docs/users-sources/user/user_ref.mdx
+++ b/website/docs/users-sources/user/user_ref.mdx
@ -7,41 +7,43 @@ title: User properties and attributes
 The User object has the following properties:

 - `username`: User's username.
- `email` User's email.
- `uid` User's unique ID
- `name` User's display name.
- `is_staff` Boolean field if user is staff.
- `is_active` Boolean field if user is active.
- `date_joined` Date user joined/was created.
- `password_change_date` Date password was last changed.
- `path` User's path, see [Path](#path)
- `attributes` Dynamic attributes, see [Attributes](#attributes)
- `group_attributes()` Merged attributes of all groups the user is member of and the user's own attributes.
- `ak_groups` This is a queryset of all the user's groups.
-
-    You can do additional filtering like:
-
-    ```python
-    user.ak_groups.filter(name__startswith='test')
-    ```
-
-    For Django field lookups, see [here](https://docs.djangoproject.com/en/4.2/ref/models/querysets/#id4).
-
-    To get the name of all groups, you can use this command:
-
-    ```python
-    [group.name for group in user.ak_groups.all()]
-    ```
+- `email`: User's email.
+- `uid`: User's unique ID. Read-only.
+- `name`: User's display name.
+- `is_staff`: Boolean field defining if user is staff.
+- `is_active`: Boolean field defining if user is active.
+- `date_joined`: Date user joined/was created. Read-only.
+- `password_change_date`: Date password was last changed. Read-only.
+- `path`: User's path, see [Path](#path)
+- `attributes`: Dynamic attributes, see [Attributes](#attributes)
+- `group_attributes()`: Merged attributes of all groups the user is member of and the user's own attributes. Ready-only.
+- `ak_groups`: This is a queryset of all the user's groups.

 ## Examples

-List all the User's group names:
+These are examples of how User objects can be used within Policies and Property Mappings.
+
+### List a user's group memberships
+
+Use the following example to list all groups that a User object is a member of:

 ```python
 for group in user.ak_groups.all():
    yield group.name
 ```

+### List a user's group memberships and filter based on group name
+
+Use the following example to list groups that a User object is a member of, but filter based on group name:
+
+```python
+user.ak_groups.filter(name__startswith='test')
+```
+
+:::info
+For Django field lookups, see the [Django documentation](https://docs.djangoproject.com/en/stable/ref/models/querysets/#id4).
+:::
+
 ## Path

 Paths can be used to organize users into folders depending on which source created them or organizational structure. Paths may not start or end with a slash, but they can contain any other character as path segments. The paths are currently purely used for organization, it does not affect their permissions, group memberships, or anything else.
@ -87,7 +89,7 @@ This field is only used by the Proxy Provider.
 Some applications can be configured to create new users using header information forwarded from authentik. You can forward additional header information by adding each header
 underneath `additionalHeaders`:

-#### Example:
+#### Example

 ```yaml
 additionalHeaders:
--- a/website/integrations/services/apache-guacamole/index.mdx
+++ b/website/integrations/services/apache-guacamole/index.mdx
@ -66,7 +66,7 @@ Docker containers are typically configured using environment variables. To ensur
    OPENID_CLIENT_ID=<Client ID from authentik>
    OPENID_ISSUER=https://authentik.company/application/o/<your-slug>/
    OPENID_JWKS_ENDPOINT=https://authentik.company/application/o/<your-slug>/jwks/
-    OPENID_REDIRECT_URI=https://guacamole.company/ # Must match Redirect URI in authentik
+    OPENID_REDIRECT_URI=https://guacamole.company/
    OPENID_USERNAME_CLAIM_TYPE=preferred_username
    ```

@ -85,7 +85,7 @@ Additionally, ensure your `guacamole.properties` file (typically located in `/et
    openid-client-id=<Client ID from authentik>
    openid-issuer=https://authentik.company/application/o/<your-slug>/
    openid-jwks-endpoint=https://authentik.company/application/o/<your-slug>/jwks/
-    openid-redirect-uri=https://guacamole.company/ # This must match the Redirect URI set in authentik (Including trailing slash).
+    openid-redirect-uri=https://guacamole.company/
    openid-username-claim-type=preferred_username
    ```

--- a/website/integrations/services/mealie/index.md
+++ b/website/integrations/services/mealie/index.md
@ -0,0 +1,70 @@
+---
+title: Integrate with Mealie
+sidebar_label: Mealie
+support_level: community
+---
+
+## What is Mealie
+
+> Mealie is a self hosted recipe manager and meal planner. Easily add recipes by providing the url and Mealie will automatically import the relevant data or add a family recipe with the UI editor.
+>
+> -- https://mealie.io/
+
+## Preparation
+
+The following placeholders are used in this guide:
+
+- `mealie.company` is the FQDN of the Mealie installation.
+- `authentik.company` is the FQDN of the authentik installation.
+
+:::note
+This documentation lists only the settings that you need to change from their default values. Be aware that any changes other than those explicitly mentioned in this guide could cause issues accessing your application.
+:::
+
+## authentik configuration
+
+To support the integration of Mealie with authentik, you need to create an application/provider pair in authentik.
+
+### Create an application and provider in authentik
+
+1. Log in to authentik as an admin, and open the authentik Admin interface.
+2. Navigate to **Applications** > **Applications** and click **Create with Provider** to create an application and provider pair. (Alternatively you can first create a provider separately, then create the application and connect it with the provider.)
+
+- **Application**: provide a descriptive name, an optional group for the type of application, the policy engine mode, and optional UI settings.
+- **Choose a Provider type**: select **OAuth2/OpenID Connect** as the provider type.
+- **Configure the Provider**: provide a name (or accept the auto-provided name), the authorization flow to use for this provider, and the following required configurations.
+    - Note the **Client ID**, **Client Secret**, , and **slug** values because they will be required later.
+    - Create two `Strict` redirect URIs and set to `https://mealie.company/login` and `https://mealie.company/login?direct=1`.
+- **Configure Bindings** _(optional)_: you can create a [binding](/docs/add-secure-apps/flows-stages/bindings/) (policy, group, or user) to manage the listing and access to applications on a user's **My applications** page.
+
+3. Click **Submit** to save the new application and provider.
+
+### Create the users and administrators groups
+
+Using the authentik Admin interface, navigate to **Directory** -> **Groups** and click **Create** to create two groups, with names of your choosing, one for **Users** (ex: `mealie-users`) and one for **Admins** (ex: `mealie-admins`).
+
+After creating the groups, select a group, navigate to **Directory** > **Users**, and manage its members by using the **Add existing user** and **Create user** buttons as needed. An admin will need to be added as a member to both groups to function properly.
+
+## Mealie configuration
+
+To enable OIDC login with Mealie, update your environment variables to include the following:
+
+```yaml showLineNumbers
+OIDC_AUTH_ENABLED=true
+OIDC_PROVIDER_NAME=authentik
+OIDC_CONFIGURATION_URL=https://authentik.company/application/o/<slug from authentik>/.well-known/openid-configuration
+OIDC_CLIENT_ID=<Client ID from authentik>
+OIDC_CLIENT_SECRET=<Client secret from authentik>
+OIDC_SIGNUP_ENABLED=true
+OIDC_USER_GROUP=<Your users group created in authentik>
+OIDC_ADMIN_GROUP=<Your admins group created in authentik>
+OIDC_AUTO_REDIRECT=true   # Optional: The login page will be bypassed and you will be sent directly to your Identity Provider.
+OIDC_REMEMBER_ME=true     # Optional: By setting this value to true, a session will be extended as if "Remember Me" was checked.
+```
+
+Restart the Mealie service for the changes to take effect.
+
+## Configuration verification
+
+1. To confirm that authentik is properly configured with Mealie, log out and log back in via authentik.
+2. In Mealie click on the user profile icon in the top left. Then click on **Members**, confirm the admins set in your authentik group are an **Admin** in Mealie as expected.
--- a/website/integrations/services/netbird/index.md
+++ b/website/integrations/services/netbird/index.md
@ -33,12 +33,26 @@ To support the integration of NetBird with authentik, you need to create an appl
 - **Application**: provide a descriptive name, an optional group for the type of application, the policy engine mode, and optional UI settings.
 - **Choose a Provider type**: select **OAuth2/OpenID Connect** as the provider type.
 - **Configure the Provider**: provide a name (or accept the auto-provided name), the authorization flow to use for this provider, and the following required configurations.
-    - Note the **Client ID**,**Client Secret**, and **slug** values because they will be required later.
-    - Add two `Strict` redirect URIs and set them to <kbd>http://localhost:53000</kbd> and <kbd>https://<em>netbird.company</em></kbd>. Then, add a `Regex` redirect URI and set it to <kbd>https://<em>netbird.company</em>/.\*</kbd>.
-    - Select any available signing key.
-    - Under **Advanced Protocol Settings**, set **Access Code Validity** to `minutes=10`, then set **Subject Mode** to be `Based on the User's ID`.
+    - Under **Protocol Settings**:
+        - Note the **Client ID**, and **slug** values because they will be required later.
+        - Set **Client type** to `Public`.
+        - Add two `Strict` redirect URIs: `http://localhost:53000` and `https://<netbird.company>`.
+        - Add a `Regex` redirect: `https://<netbird.company>.*`.
+        - Select any available signing key.
+    - Under **Advanced Protocol Settings**:
+        - Set **Access Code Validity** to `minutes=10`.
+        - Set **Subject Mode** to be `Based on the User's ID`.
+        - Add the `authentik default OAuth Mapping: OpenID 'offline_access'` and `authentik default OAuth Mapping: authentik API access` scopes to **Selected Scopes**.
 - **Configure Bindings** _(optional)_: you can create a [binding](/docs/add-secure-apps/flows-stages/bindings/) (policy, group, or user) to manage the listing and access to applications on a user's **My applications** page.

+:::warning
+It is important to set a signing key to secure the provider because this is a `Public` client.
+:::
+
+:::note
+If an access group is created for the Netbird application, the Netbird service account must be included in the group. Otherwise you will see a 401 error after login.
+:::
+
 3. Click **Submit** to save the new application and provider.

 ### Set up a service account
@ -55,12 +69,26 @@ NetBird requires the service account to have full administrative access to the a
 2. Navigate to **Directory** > **Groups**, and click **`authentik Admins`**.
 3. On the top of the group configuration page, switch to the **Users** tab near the top of the page, then click **Add existing user**, and select the service account you just created.

+### Create and apply a device token authentication flow
+
+1. Log in to authentik as an admin, and open the authentik Admin interface.
+2. Navigate to **Flows and Stages** > **Flows** and click **Create**.
+3. Set the following required configurations:
+    - **Name**: provide a name (e.g. `default-device-code-flow`)
+    - **Title**: provide a title (e.g. `Device code flow`)
+    - **Slug**: provide a slug (e.g `default-device-code-flow`)
+    - **Designation**: `Stage Configuration`
+    - **Authentication**: `Require authentication`
+4. Click **Create**.
+5. Navigate to **System** > **Brands** and click the **Edit** icon on the default brand.
+6. Set **Default code flow** to the newly created device code flow and click **Update**.
+
 ## NetBird configuration

-To configure NetBird to use authentik, add the following values to your `setup.env` file:
+To configure NetBird to use authentik, add the following environment variables to your NetBird deployment:

-```
-NETBIRD_AUTH_OIDC_CONFIGURATION_ENDPOINT="https://authentik.company/application/o/netbird/.well-known/openid-configuration"
+```yaml showLineNumbers title="setup.env"
+NETBIRD_AUTH_OIDC_CONFIGURATION_ENDPOINT="https://authentik.company/application/o/<application slug>/.well-known/openid-configuration"
 NETBIRD_USE_AUTH0=false
 NETBIRD_AUTH_CLIENT_ID="<Your Client ID>"
 NETBIRD_AUTH_SUPPORTED_SCOPES="openid profile email offline_access api"
@ -73,6 +101,19 @@ NETBIRD_IDP_MGMT_EXTRA_USERNAME="Netbird"
 NETBIRD_IDP_MGMT_EXTRA_PASSWORD="<Your Service Account password>"
 ```

-After making these changes, restart your Docker containers to apply the new configuration.
+Restart the NetBird service for the changes to take effect. If using Docker, redeploy the NetBird container for the changes to take effect.

-Once completed, NetBird should be successfully configured to use authentik as its Single Sign-On provider.
+## Configuration verification
+
+To confirm that authentik is properly configured with NetBird, log out and log back in via authentik.
+
+## Troubleshooting
+
+When accessing NetBird through a reverse proxy, you might encounter a loop where the `/peers` URL continuously reloads. To resolve this, set the following variables accordingly:
+
+```yaml title="setup.env"
+NETBIRD_MGMT_API_PORT=443
+NETBIRD_SIGNAL_PORT=443
+```
+
+Run the `configure.sh` script for the change to take effect.
--- a/website/integrations/services/paperless-ngx/index.mdx
+++ b/website/integrations/services/paperless-ngx/index.mdx
@ -66,7 +66,7 @@ environment:
                "client_id": "<Client ID>",
                "secret": "<Client Secret>",
                "settings": {
-                  "server_url": "https://authentik.company/application/o/paperless/.well-known/openid-configuration"
+                  "server_url": "https://authentik.company/application/o/<slug>/.well-known/openid-configuration"
                }
              }
            ],
--- a/website/netlify.toml
+++ b/website/netlify.toml
@ -63,11 +63,14 @@
  status = 302

 [[redirects]]
-  from = "/docs/add-secure-apps/flows-stages/flow/layouts.md"
-  to = "/docs/add-secure-apps/flows-stages/flow/executors/if-flow.md"
+  from = "/docs/add-secure-apps/flows-stages/flow/layouts"
+  to = "/docs/add-secure-apps/flows-stages/flow/executors/if-flow"
  status = 302

-
+[[redirects]]
+  from = "/docs/customize/brands"
+  to = "/docs/customize/branding"
+  status = 302


 # Migration to new structure with script Sept 2025
--- a/website/package-lock.json
+++ b/website/package-lock.json
@ -18,7 +18,7 @@
                "@docusaurus/theme-mermaid": "^3.7.0",
                "@goauthentik/docusaurus-config": "^1.0.4",
                "@mdx-js/react": "^3.1.0",
-                "@swc/html-linux-x64-gnu": "1.11.21",
+                "@swc/html-linux-x64-gnu": "1.11.22",
                "clsx": "^2.1.1",
                "disqus-react": "^1.1.6",
                "docusaurus-plugin-openapi-docs": "4.3.4",
@ -42,22 +42,22 @@
                "@types/semver": "^7.7.0",
                "cross-env": "^7.0.3",
                "prettier": "3.5.3",
-                "typescript": "~5.8.2",
+                "typescript": "~5.8.3",
                "wireit": "^0.14.12"
            },
            "engines": {
                "node": ">=20"
            },
            "optionalDependencies": {
-                "@rspack/binding-darwin-arm64": "1.3.5",
-                "@rspack/binding-linux-arm64-gnu": "1.3.5",
-                "@rspack/binding-linux-x64-gnu": "1.3.5",
-                "@swc/core-darwin-arm64": "1.11.21",
-                "@swc/core-linux-arm64-gnu": "1.11.21",
-                "@swc/core-linux-x64-gnu": "1.11.21",
-                "@swc/html-darwin-arm64": "1.11.21",
-                "@swc/html-linux-arm64-gnu": "1.11.21",
-                "@swc/html-linux-x64-gnu": "1.11.21",
+                "@rspack/binding-darwin-arm64": "1.3.6",
+                "@rspack/binding-linux-arm64-gnu": "1.3.6",
+                "@rspack/binding-linux-x64-gnu": "1.3.6",
+                "@swc/core-darwin-arm64": "1.11.22",
+                "@swc/core-linux-arm64-gnu": "1.11.22",
+                "@swc/core-linux-x64-gnu": "1.11.22",
+                "@swc/html-darwin-arm64": "1.11.22",
+                "@swc/html-linux-arm64-gnu": "1.11.22",
+                "@swc/html-linux-x64-gnu": "1.11.22",
                "lightningcss-darwin-arm64": "1.29.3",
                "lightningcss-linux-arm64-gnu": "1.29.3",
                "lightningcss-linux-x64-gnu": "1.29.3"
@ -4626,9 +4626,9 @@
            }
        },
        "node_modules/@rspack/binding-darwin-arm64": {
-            "version": "1.3.5",
-            "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-arm64/-/binding-darwin-arm64-1.3.5.tgz",
-            "integrity": "sha512-bhqi9nZ0jrlQc/YgTklzD02y0E8Emdrov6HLcxt/Dzwq5SZryl4Ik8yc/8E1M0PWNkr09+TO8i1Zc51z0Gfu2g==",
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-arm64/-/binding-darwin-arm64-1.3.6.tgz",
+            "integrity": "sha512-Ejf2m01lQEM30qkyRZmGbuKzUGdTuirVs9yE8GBCvs3q3GsGQRVkYlQNtuvVtXyvF9TlfW+N6nInoheRpsvBfA==",
            "cpu": [
                "arm64"
            ],
@ -4653,9 +4653,9 @@
            "peer": true
        },
        "node_modules/@rspack/binding-linux-arm64-gnu": {
-            "version": "1.3.5",
-            "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.3.5.tgz",
-            "integrity": "sha512-oEfPjYx3RVsMeHG/kI9k96nLJUQhYfQS9HUKS37Ko3RWC84qTuzMAAdWIXE9ys8GHwpks7pL953AfYNK5PLhPw==",
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.3.6.tgz",
+            "integrity": "sha512-xleG9XJp6BoURNhSrbz9Wnig2I3xQxKj3Sk/MynPYXMGVBF9wUbgUpvrdIlm5wenwxGpLftpPdXkI9bkf6+5JQ==",
            "cpu": [
                "arm64"
            ],
@ -4680,9 +4680,9 @@
            "peer": true
        },
        "node_modules/@rspack/binding-linux-x64-gnu": {
-            "version": "1.3.5",
-            "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.3.5.tgz",
-            "integrity": "sha512-JehI/z61Y9wwkcTxbAdPtjUnAyyAUCJZOqP3FwQTAd2gBFG/8k7v1quGwrfOLsCLOcT3azbd8YFoHmkveGQayQ==",
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.3.6.tgz",
+            "integrity": "sha512-vDXC/29U26uYaSNJ9wttdykz+VPU6qbpBMHjS6aQWtp3kUYnI3w11f4HvzZYr9c1UbfQBFemljBuz/3elQPrNQ==",
            "cpu": [
                "x64"
            ],
@ -5173,9 +5173,9 @@
            }
        },
        "node_modules/@swc/core-darwin-arm64": {
-            "version": "1.11.21",
-            "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.21.tgz",
-            "integrity": "sha512-v6gjw9YFWvKulCw3ZA1dY+LGMafYzJksm1mD4UZFZ9b36CyHFowYVYug1ajYRIRqEvvfIhHUNV660zTLoVFR8g==",
+            "version": "1.11.22",
+            "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.22.tgz",
+            "integrity": "sha512-upSiFQfo1TE2QM3+KpBcp5SrOdKKjoc+oUoD1mmBDU2Wv4Bjjv16Z2I5ADvIqMV+b87AhYW+4Qu6iVrQD7j96Q==",
            "cpu": [
                "arm64"
            ],
@ -5221,9 +5221,9 @@
            }
        },
        "node_modules/@swc/core-linux-arm64-gnu": {
-            "version": "1.11.21",
-            "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.21.tgz",
-            "integrity": "sha512-DQD+ooJmwpNsh4acrftdkuwl5LNxxg8U4+C/RJNDd7m5FP9Wo4c0URi5U0a9Vk/6sQNh9aSGcYChDpqCDWEcBw==",
+            "version": "1.11.22",
+            "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.22.tgz",
+            "integrity": "sha512-xZ+bgS60c5r8kAeYsLNjJJhhQNkXdidQ277pUabSlu5GjR0CkQUPQ+L9hFeHf8DITEqpPBPRiAiiJsWq5eqMBg==",
            "cpu": [
                "arm64"
            ],
@ -5253,9 +5253,9 @@
            }
        },
        "node_modules/@swc/core-linux-x64-gnu": {
-            "version": "1.11.21",
-            "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.21.tgz",
-            "integrity": "sha512-NesdBXv4CvVEaFUlqKj+GA4jJMNUzK2NtKOrUNEtTbXaVyNiXjFCSaDajMTedEB0jTAd9ybB0aBvwhgkJUWkWA==",
+            "version": "1.11.22",
+            "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.22.tgz",
+            "integrity": "sha512-htmAVL+U01gk9GyziVUP0UWYaUQBgrsiP7Ytf6uDffrySyn/FclUS3MDPocNydqYsOpj3OpNKPxkaHK+F+X5fg==",
            "cpu": [
                "x64"
            ],
@ -5411,9 +5411,9 @@
            }
        },
        "node_modules/@swc/html-darwin-arm64": {
-            "version": "1.11.21",
-            "resolved": "https://registry.npmjs.org/@swc/html-darwin-arm64/-/html-darwin-arm64-1.11.21.tgz",
-            "integrity": "sha512-b4RwP927+h1rtIxpgXBoENsQ+xuVKvHyt2jxWnzfptARMcU11bGLpop5PzF2OEz4ikt1yXWyiEWEh9HOLLslNw==",
+            "version": "1.11.22",
+            "resolved": "https://registry.npmjs.org/@swc/html-darwin-arm64/-/html-darwin-arm64-1.11.22.tgz",
+            "integrity": "sha512-nsrm0UplPVzMwFiOnNot1Z7TSZcCVR7bsGENlUXIynicLk+T51tow0z65XavXzLl//9xeymbSTo3XtoKkn33Hg==",
            "cpu": [
                "arm64"
            ],
@ -5459,9 +5459,9 @@
            }
        },
        "node_modules/@swc/html-linux-arm64-gnu": {
-            "version": "1.11.21",
-            "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-gnu/-/html-linux-arm64-gnu-1.11.21.tgz",
-            "integrity": "sha512-Dpv/zP3bLi8Ffvz/97B2chlK2akS9fqN4YP/Jf9ahjB1IgbQtD9Abr5ByCt8Y+8GQXKdc05gsU9nApKNVoerTw==",
+            "version": "1.11.22",
+            "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-gnu/-/html-linux-arm64-gnu-1.11.22.tgz",
+            "integrity": "sha512-TfTQocbg6ZV5d0ROT5uSnN63C3e76fLZzru2rMpyoI7D9POeU3DWyI2PPTdgb/xgyi2jgXdqMmKu7G+n6kBkPA==",
            "cpu": [
                "arm64"
            ],
@ -5491,9 +5491,9 @@
            }
        },
        "node_modules/@swc/html-linux-x64-gnu": {
-            "version": "1.11.21",
-            "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-gnu/-/html-linux-x64-gnu-1.11.21.tgz",
-            "integrity": "sha512-+5LH2ChaWG/EA9/Jq6yflwizulo6pU7+5N4v5rYAOBIyGJPcyN/mQQlmOw2Kc4PWC1ASBNU/GWLoKGp+EuC04g==",
+            "version": "1.11.22",
+            "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-gnu/-/html-linux-x64-gnu-1.11.22.tgz",
+            "integrity": "sha512-W+MHCjHk6y2d6VB1lMjzGCpbDJtKZR+BLlAZoLOITZfhMC5PUmUBZb9PQJoQdFsfNZpuLwHgwykTwz//s/w6mQ==",
            "cpu": [
                "x64"
            ],
@ -23375,9 +23375,9 @@
            }
        },
        "node_modules/typescript": {
-            "version": "5.8.2",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-            "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+            "version": "5.8.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+            "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
            "license": "Apache-2.0",
            "bin": {
                "tsc": "bin/tsc",
--- a/website/package.json
+++ b/website/package.json
@ -61,22 +61,22 @@
        "@types/react": "^18.3.13",
        "cross-env": "^7.0.3",
        "prettier": "3.5.3",
-        "typescript": "~5.8.2",
+        "typescript": "~5.8.3",
        "wireit": "^0.14.12"
    },
    "optionalDependencies": {
-        "@rspack/binding-darwin-arm64": "1.3.5",
-        "@rspack/binding-linux-arm64-gnu": "1.3.5",
-        "@rspack/binding-linux-x64-gnu": "1.3.5",
+        "@rspack/binding-darwin-arm64": "1.3.6",
+        "@rspack/binding-linux-arm64-gnu": "1.3.6",
+        "@rspack/binding-linux-x64-gnu": "1.3.6",
        "lightningcss-darwin-arm64": "1.29.3",
        "lightningcss-linux-arm64-gnu": "1.29.3",
        "lightningcss-linux-x64-gnu": "1.29.3",
-        "@swc/core-darwin-arm64": "1.11.21",
-        "@swc/core-linux-arm64-gnu": "1.11.21",
-        "@swc/core-linux-x64-gnu": "1.11.21",
-        "@swc/html-darwin-arm64": "1.11.21",
-        "@swc/html-linux-arm64-gnu": "1.11.21",
-        "@swc/html-linux-x64-gnu": "1.11.21"
+        "@swc/core-darwin-arm64": "1.11.22",
+        "@swc/core-linux-arm64-gnu": "1.11.22",
+        "@swc/core-linux-x64-gnu": "1.11.22",
+        "@swc/html-darwin-arm64": "1.11.22",
+        "@swc/html-linux-arm64-gnu": "1.11.22",
+        "@swc/html-linux-x64-gnu": "1.11.22"
    },
    "wireit": {
        "lint:lockfile": {
--- a/website/sidebars.js
+++ b/website/sidebars.js
@ -368,6 +368,10 @@ export default {
            type: "category",
            label: "Customize your instance",
            collapsed: true,
+            link: {
+                type: "doc",
+                id: "customize/index",
+            },
            items: [
                {
                    type: "category",
@ -438,7 +442,7 @@ export default {
                        },
                    ],
                },
-                "customize/brands",
+                "customize/branding",
            ],
        },
        {
@ -582,6 +586,7 @@ export default {
            label: "System Management",
            collapsed: true,
            items: [
+                "sys-mgmt/brands",
                {
                    type: "category",
                    label: "Operations",
--- a/website/sidebarsIntegrations.js
+++ b/website/sidebarsIntegrations.js
@ -127,9 +127,9 @@ module.exports = {
                        "services/fortigate-ssl/index",
                        "services/fortimanager/index",
                        "services/gravity/index",
+                        "services/netbird/index",
                        "services/opnsense/index",
                        "services/pfsense/index",
-                        "services/netbird/index",
                    ],
                },
                {
@ -148,6 +148,7 @@ module.exports = {
                        "services/immich/index",
                        "services/jellyfin/index",
                        "services/komga/index",
+                        "services/mealie/index",
                        "services/miniflux/index",
                        "services/node-red/index",
                        "services/open-webui/index",
Author	SHA1	Message	Date
Teffen Ellis	d8474cf36d	web: Fix brand preference order. Adjust header height.	2025-04-24 19:05:46 +02:00
Teffen Ellis	cf160f800d	web: Safari fixes merge branch (#14181 ) * web/admin: Fix layout centering. Adjust theming. * web: Fix issue where references to Lit SSR break page styles. * web: Fix issues surrounding color scheme/theme mixup in UI.	2025-04-24 10:16:04 -04:00
dependabot[bot]	e9822cd937	website: bump the build group in /website with 9 updates (#14204 ) Bumps the build group in /website with 9 updates: \| Package \| From \| To \| \| --- \| --- \| --- \| \| [@rspack/binding-darwin-arm64](https://github.com/web-infra-dev/rspack/tree/HEAD/packages/rspack) \| `1.3.5` \| `1.3.6` \| \| [@rspack/binding-linux-arm64-gnu](https://github.com/web-infra-dev/rspack/tree/HEAD/packages/rspack) \| `1.3.5` \| `1.3.6` \| \| [@rspack/binding-linux-x64-gnu](https://github.com/web-infra-dev/rspack/tree/HEAD/packages/rspack) \| `1.3.5` \| `1.3.6` \| \| [@swc/core-darwin-arm64](https://github.com/swc-project/swc) \| `1.11.21` \| `1.11.22` \| \| [@swc/core-linux-arm64-gnu](https://github.com/swc-project/swc) \| `1.11.21` \| `1.11.22` \| \| [@swc/core-linux-x64-gnu](https://github.com/swc-project/swc) \| `1.11.21` \| `1.11.22` \| \| [@swc/html-darwin-arm64](https://github.com/swc-project/swc) \| `1.11.21` \| `1.11.22` \| \| [@swc/html-linux-arm64-gnu](https://github.com/swc-project/swc) \| `1.11.21` \| `1.11.22` \| \| [@swc/html-linux-x64-gnu](https://github.com/swc-project/swc) \| `1.11.21` \| `1.11.22` \| Updates `@rspack/binding-darwin-arm64` from 1.3.5 to 1.3.6 - [Release notes](https://github.com/web-infra-dev/rspack/releases) - [Commits](https://github.com/web-infra-dev/rspack/commits/v1.3.6/packages/rspack) Updates `@rspack/binding-linux-arm64-gnu` from 1.3.5 to 1.3.6 - [Release notes](https://github.com/web-infra-dev/rspack/releases) - [Commits](https://github.com/web-infra-dev/rspack/commits/v1.3.6/packages/rspack) Updates `@rspack/binding-linux-x64-gnu` from 1.3.5 to 1.3.6 - [Release notes](https://github.com/web-infra-dev/rspack/releases) - [Commits](https://github.com/web-infra-dev/rspack/commits/v1.3.6/packages/rspack) Updates `@swc/core-darwin-arm64` from 1.11.21 to 1.11.22 - [Release notes](https://github.com/swc-project/swc/releases) - [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/swc-project/swc/compare/v1.11.21...v1.11.22) Updates `@swc/core-linux-arm64-gnu` from 1.11.21 to 1.11.22 - [Release notes](https://github.com/swc-project/swc/releases) - [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/swc-project/swc/compare/v1.11.21...v1.11.22) Updates `@swc/core-linux-x64-gnu` from 1.11.21 to 1.11.22 - [Release notes](https://github.com/swc-project/swc/releases) - [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/swc-project/swc/compare/v1.11.21...v1.11.22) Updates `@swc/html-darwin-arm64` from 1.11.21 to 1.11.22 - [Release notes](https://github.com/swc-project/swc/releases) - [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/swc-project/swc/compare/v1.11.21...v1.11.22) Updates `@swc/html-linux-arm64-gnu` from 1.11.21 to 1.11.22 - [Release notes](https://github.com/swc-project/swc/releases) - [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/swc-project/swc/compare/v1.11.21...v1.11.22) Updates `@swc/html-linux-x64-gnu` from 1.11.21 to 1.11.22 - [Release notes](https://github.com/swc-project/swc/releases) - [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md) - [Commits](https://github.com/swc-project/swc/compare/v1.11.21...v1.11.22) --- updated-dependencies: - dependency-name: "@rspack/binding-darwin-arm64" dependency-version: 1.3.6 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@rspack/binding-linux-arm64-gnu" dependency-version: 1.3.6 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@rspack/binding-linux-x64-gnu" dependency-version: 1.3.6 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@swc/core-darwin-arm64" dependency-version: 1.11.22 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@swc/core-linux-arm64-gnu" dependency-version: 1.11.22 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@swc/core-linux-x64-gnu" dependency-version: 1.11.22 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@swc/html-darwin-arm64" dependency-version: 1.11.22 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@swc/html-linux-arm64-gnu" dependency-version: 1.11.22 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build - dependency-name: "@swc/html-linux-x64-gnu" dependency-version: 1.11.22 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: build ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-04-24 13:52:37 +02:00
dependabot[bot]	5244f64be4	website: bump typescript from 5.8.2 to 5.8.3 in /website (#13786 ) Bumps [typescript](https://github.com/microsoft/TypeScript) from 5.8.2 to 5.8.3. - [Release notes](https://github.com/microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release-publish.yml) - [Commits](https://github.com/microsoft/TypeScript/commits) --- updated-dependencies: - dependency-name: typescript dependency-version: 5.8.3 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-04-24 13:34:43 +02:00
Marc 'risson' Schmitt	0df4824fd4	lifecycle/migrate: fix migration failing if killed during first startup (#14207 ) Co-authored-by: Taylor Jones <bigfootjonesy@gmail.com>	2025-04-24 11:20:37 +00:00
authentik-automation[bot]	ea22abc75d	core, web: update translations (#14203 ) Co-authored-by: rissson <18313093+rissson@users.noreply.github.com>	2025-04-24 13:03:04 +02:00
dependabot[bot]	b09bab7543	lifecycle/aws: bump aws-cdk from 2.1010.0 to 2.1012.0 in /lifecycle/aws (#14205 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-04-24 12:59:45 +02:00
Dewi Roberts	5aedc8a5f2	website/integrations: improves netbird documentation (#14191 ) * Matches up the doc with the official NetBird documentation. Also fixes order of the sidebar. * Removed kbd and used angle brackets * Changed wording of final section to mention filename and script that needs to be run * Update website/integrations/services/netbird/index.md Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/integrations/services/netbird/index.md Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * added title to codeblock --------- Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Co-authored-by: Dominic R <dominic@sdko.org>	2025-04-24 08:26:40 +00:00
Tana M Berry	2f3ae0f607	website/docs: updated user count info (#14186 ) * updated user count info * Update website/docs/enterprise/manage-enterprise.mdx Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> --------- Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> Co-authored-by: Tana M Berry <tana@goauthentik.io> Co-authored-by: Dominic R <dominic@sdko.org>	2025-04-23 18:16:09 -05:00
Tana M Berry	e3674426b7	website/docs: rearranged brands docs (#14116 ) * first pass * fixed links. * tweaks * remove extensions in redirects * added edits from review * missed an edit --------- Co-authored-by: Tana M Berry <tana@goauthentik.io>	2025-04-23 16:39:06 -05:00
Dominic R	df915d3a5e	website: integrations: apache guacamole: remove redirect URI comments (#14113 ) * website: integrations: apache guacamole: remove redirect URI comments Self-evident. + Just follow the docs tbh * Update website/integrations/services/apache-guacamole/index.mdx Co-authored-by: Jens L. <jens@beryju.org> Signed-off-by: Dominic R <dominic@sdko.org> --------- Signed-off-by: Dominic R <dominic@sdko.org> Co-authored-by: Jens L. <jens@beryju.org>	2025-04-23 14:15:35 -05:00
Teffen Ellis	4949c31860	packages/docusaurus-theme: Fix header alignment, overscroll, vertical padding. (#14120 ) * docusaurus-theme: Fix header alignment, overscroll, vertical padding. * docusaurus-theme: Lint. * website/docs: Update package-lock.	2025-04-23 13:19:38 -04:00
Marc 'risson' Schmitt	4580dec06b	outposts: add support for gateway API (#13272 )	2025-04-23 16:22:10 +00:00
transifex-integration[bot]	56de969640	translate: Updates for file web/xliff/en.xlf in fr (#14200 ) Translate web/xliff/en.xlf in fr 100% translated source file: 'web/xliff/en.xlf' on 'fr'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>	2025-04-23 15:37:48 +00:00
transifex-integration[bot]	413902508d	translate: Updates for file locale/en/LC_MESSAGES/django.po in fr (#14199 ) * Translate locale/en/LC_MESSAGES/django.po in fr 100% translated source file: 'locale/en/LC_MESSAGES/django.po' on 'fr'. * Translate locale/en/LC_MESSAGES/django.po in fr 100% translated source file: 'locale/en/LC_MESSAGES/django.po' on 'fr'. --------- Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>	2025-04-23 15:36:58 +00:00
Dewi Roberts	64af0ccba6	website/docs: adds code examples for getting user objects from a group object (#14101 ) * Added example of how to get user objects fro a group object * Updated wording * Updated wording, added titles to examples, capitalised group, added explanation of examples * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/groups/group_ref.md Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Changes based on Tana's feedback * Word * Capitalization --------- Signed-off-by: Dewi Roberts <dewi@goauthentik.io> Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com>	2025-04-23 16:36:19 +01:00
transifex-integration[bot]	673db53777	translate: Updates for file web/xliff/en.xlf in zh-Hans (#14198 ) Translate web/xliff/en.xlf in zh-Hans 100% translated source file: 'web/xliff/en.xlf' on 'zh-Hans'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>	2025-04-23 15:32:35 +00:00
transifex-integration[bot]	8df7716d90	translate: Updates for file locale/en/LC_MESSAGES/django.po in zh_CN (#14195 ) Translate locale/en/LC_MESSAGES/django.po in zh_CN 100% translated source file: 'locale/en/LC_MESSAGES/django.po' on 'zh_CN'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>	2025-04-23 15:29:05 +00:00
transifex-integration[bot]	19bb2de13f	translate: Updates for file locale/en/LC_MESSAGES/django.po in zh-Hans (#14197 ) Translate django.po in zh-Hans 100% translated source file: 'django.po' on 'zh-Hans'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>	2025-04-23 17:20:01 +02:00
transifex-integration[bot]	a218fd7628	translate: Updates for file web/xliff/en.xlf in zh_CN (#14196 ) Translate web/xliff/en.xlf in zh_CN 100% translated source file: 'web/xliff/en.xlf' on 'zh_CN'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>	2025-04-23 17:19:32 +02:00
TrisBits	78cfb50a90	website/integrations: mealie add integration (#14188 ) * Mealie Integration Documentation Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update configuration text. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update to configuration text. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update to configuration text. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update sidebarsIntegrations.js, add mealie. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update for missed service name replacement. Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Updated Mealie description. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update to format, in authentik configuration statement. Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update to format in redirect URI section. Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Change case of Authentik to authentik. Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Mealie updates to correct styles and improve content. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Removed tip text now part of a new section. Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update website/integrations/services/mealie/index.md Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update group example format. Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Update to navigation description. Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> * Removed quotes in env., Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> --------- Signed-off-by: TrisBits <44067868+TrisBits@users.noreply.github.com> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> Co-authored-by: Dominic R <dominic@sdko.org> Co-authored-by: Dewi Roberts <dewi@goauthentik.io>	2025-04-23 13:59:53 +01:00
authentik-automation[bot]	2033d52dc2	core, web: update translations (#14187 ) Co-authored-by: melizeche <484773+melizeche@users.noreply.github.com> Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>	2025-04-23 10:57:09 +00:00
dependabot[bot]	be00f47ddc	core: bump goauthentik.io/api/v3 from 3.2025024.8 to 3.2025024.9 (#14189 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-04-23 12:44:09 +02:00
Dewi Roberts	2cc5f4b273	website/docs: update user object doc (#14132 ) * Updated formatting, changed examples, added headers, updated django doc link to stable * Prettier fix * Update website/docs/users-sources/user/user_ref.mdx Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space> Signed-off-by: Dewi Roberts <dewi@goauthentik.io> * Update website/docs/users-sources/user/user_ref.mdx Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> --------- Signed-off-by: Dewi Roberts <dewi@goauthentik.io> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space> Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com>	2025-04-23 08:26:10 +01:00
Dominic R	4e8f3407a4	website/docs: dev-docs: style guide: no longer using italic for vars (#14185 ) We no longer use italic for variables Signed-off-by: Dominic R <dominic@sdko.org>	2025-04-22 17:30:46 -05:00
Dominic R	7f861cc2a1	website/docs: dev docs: style guide: update style conventions for urls (#14184 ) * website/docs: dev docs: style guide: update style conventions for urls Updates URL styling conventions to use angle bracket surrounded values instead of <em>s and <kbd>s Part of https://www.notion.so/authentiksecurity/Check-ins-17caee05b24e80a0aec6c7d508406435?pvs=4#1ddaee05b24e80138155e120174c3502 Signed-off-by: Dominic R <dominic@sdko.org> * yep Signed-off-by: Dominic R <dominic@sdko.org> --------- Signed-off-by: Dominic R <dominic@sdko.org>	2025-04-22 17:30:02 -05:00
Dominic R	7bf58d0ba2	website/integrations: paperless: use <slug>. instead of hardcoded slug value (#14183 ) Closes https://github.com/goauthentik/authentik/issues/13778 Signed-off-by: Dominic R <dominic@sdko.org>	2025-04-22 16:55:53 -05:00