Merge branch 'master' into next

2021-03-17 20:09:47 +01:00 · 2021-03-17 20:09:47 +01:00 · cd1218c78e
parent eb884f7ef7 a8c1fd1e4e
commit cd1218c78e
74 changed files with 962 additions and 29964 deletions
--- a/authentik/admin/templates/administration/property_mapping/test.html
+++ b/authentik/admin/templates/administration/property_mapping/test.html
@ -0,0 +1,28 @@
+{% extends 'generic/form.html' %}
+
+{% load i18n %}
+
+{% block above_form %}
+<h1>{% blocktrans with property_mapping=property_mapping %}Test {{ property_mapping }}{% endblocktrans %}</h1>
+{% endblock %}
+
+{% block beneath_form %}
+{% if result %}
+<div class="pf-c-form__group ">
+    <div class="pf-c-form__group-label">
+        <label class="pf-c-form__label" for="context-1">
+            <span class="pf-c-form__label-text">{% trans 'Result' %}</span>
+        </label>
+    </div>
+    <div class="pf-c-form__group-control">
+        <div class="c-form__horizontal-group">
+            <ak-codemirror mode="javascript"><textarea class="pf-c-form-control">{{ result }}</textarea></ak-codemirror>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block action %}
+{% trans 'Test' %}
+{% endblock %}
--- a/authentik/core/templates/login/base.html
+++ b/authentik/core/templates/login/base.html
@ -21,37 +21,6 @@
    {% endblock %}
 </div>
 <footer class="pf-c-login__main-footer">
-    {% if config.login.subtext %}
-    <p>{{ config.login.subtext }}</p>
-    {% endif %}
    <ul class="pf-c-login__main-footer-links">
-        {% for source in sources %}
-        <li class="pf-c-login__main-footer-links-item">
-            <a href="{{ source.url }}" class="pf-c-login__main-footer-links-item-link">
-                {% if source.icon_url %}
-                <img src="{{ source.icon_url }}" alt="{{ source.name }}">
-                {% else %}
-                <i class="pf-icon pf-icon-arrow" title="{{ source.name }}"></i>
-                {% endif %}
-            </a>
-        </li>
-        {% endfor %}
    </ul>
-    {% if enroll_url or recovery_url %}
-    <div class="pf-c-login__main-footer-band">
-        {% if enroll_url %}
-        <p class="pf-c-login__main-footer-band-item">
-            {% trans 'Need an account?' %}
-            <a href="{{ enroll_url }}">{% trans 'Sign up.' %}</a>
-        </p>
-        {% endif %}
-        {% if recovery_url %}
-        <p class="pf-c-login__main-footer-band-item">
-            <a href="{{ recovery_url }}">
-                {% trans 'Forgot username or password?' %}
-            </a>
-        </p>
-        {% endif %}
-    </div>
-    {% endif %}
 </footer>
--- a/authentik/events/api/event.py
+++ b/authentik/events/api/event.py
@ -29,6 +29,18 @@ class EventSerializer(ModelSerializer):
        ]


+class EventTopPerUserParams(Serializer):
+    """Query params for top_per_user"""
+
+    top_n = IntegerField(default=15)
+
+    def create(self, request: Request) -> Response:
+        raise NotImplementedError
+
+    def update(self, request: Request) -> Response:
+        raise NotImplementedError
+
+
 class EventTopPerUserSerializer(Serializer):
    """Response object of Event's top_per_user"""

@ -60,12 +72,14 @@ class EventViewSet(ReadOnlyModelViewSet):
    filterset_fields = ["action"]

    @swagger_auto_schema(
-        method="GET", responses={200: EventTopPerUserSerializer(many=True)}
+        method="GET",
+        responses={200: EventTopPerUserSerializer(many=True)},
+        query_serializer=EventTopPerUserParams,
    )
    @action(detail=False, methods=["GET"])
    def top_per_user(self, request: Request):
        """Get the top_n events grouped by user count"""
-        filtered_action = request.query_params.get("filter_action", EventAction.LOGIN)
+        filtered_action = request.query_params.get("action", EventAction.LOGIN)
        top_n = request.query_params.get("top_n", 15)
        return Response(
            Event.objects.filter(action=filtered_action)
--- a/authentik/root/asgi.py
+++ b/authentik/root/asgi.py
@ -46,24 +46,11 @@ ASGI_IP_HEADERS = (
 LOGGER = get_logger("authentik.asgi")


-class ASGILoggerMiddleware:
-    """Main ASGI Logger middleware, starts an ASGILogger for each request"""
-
-    def __init__(self, app: ASGIApp) -> None:
-        self.app = app
-
-    async def __call__(self, scope: Scope, receive: Receive, send: Send):
-        responder = ASGILogger(self.app)
-        await responder(scope, receive, send)
-        return
-
-
 class ASGILogger:
    """ASGI Logger, instantiated for each request"""

    app: ASGIApp

-    scope: Scope
    headers: dict[ByteString, Any]

    status_code: int
@ -75,7 +62,6 @@ class ASGILogger:
        self.app = app

    async def __call__(self, scope: Scope, receive: Receive, send: Send) -> None:
-        self.scope = scope
        self.content_length = 0
        self.headers = dict(scope.get("headers", []))
        self.request_id = ""
@ -100,7 +86,7 @@ class ASGILogger:
                "more_body", True
            ):
                runtime = int((time() - self.start) * 1000)
-                self.log(runtime, request_id=self.request_id)
+                self.log(scope, runtime, request_id=self.request_id)
            await send(message)

        self.start = time()
@ -110,27 +96,27 @@ class ASGILogger:
            return
        await self.app(scope, receive, send_hooked)

-    def _get_ip(self) -> str:
+    def _get_ip(self, scope: Scope) -> str:
        client_ip = None
        for header in ASGI_IP_HEADERS:
            if header in self.headers:
                client_ip = self.headers[header].decode()
        if not client_ip:
-            client_ip, _ = self.scope.get("client", ("", 0))
+            client_ip, _ = scope.get("client", ("", 0))
        # Check if header has multiple values, and use the first one
        return client_ip.split(", ")[0]

-    def log(self, runtime: float, **kwargs):
+    def log(self, scope: Scope, runtime: float, **kwargs):
        """Outpot access logs in a structured format"""
-        host = self._get_ip()
+        host = self._get_ip(scope)
        query_string = ""
-        if self.scope.get("query_string", b"") != b"":
-            query_string = f"?{self.scope.get('query_string').decode()}"
+        if scope.get("query_string", b"") != b"":
+            query_string = f"?{scope.get('query_string').decode()}"
        LOGGER.info(
-            f"{self.scope.get('path', '')}{query_string}",
+            f"{scope.get('path', '')}{query_string}",
            host=host,
-            method=self.scope.get("method", ""),
-            scheme=self.scope.get("scheme", ""),
+            method=scope.get("method", ""),
+            scheme=scope.get("scheme", ""),
            status=self.status_code,
            size=self.content_length / 1000 if self.content_length > 0 else 0,
            runtime=runtime,
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@ -282,6 +282,7 @@ stages:
                docker run --rm -v $(pwd):/local openapitools/openapi-generator-cli generate -i /local/swagger.yaml -g typescript-fetch -o /local/web/api --additional-properties=typescriptThreePlus=true,supportsES6=true,npmName=authentik-api,npmVersion=1.0.0
                sudo chmod 777 -R api/
                cd web
+                sudo chmod 777 -R api/
                npm i
                npm run build
          - task: CmdLine@2
--- a/outpost/go.mod
+++ b/outpost/go.mod
@ -23,7 +23,7 @@ require (
 	github.com/pelletier/go-toml v1.8.1 // indirect
 	github.com/pkg/errors v0.9.1
 	github.com/pquerna/cachecontrol v0.0.0-20200921180117-858c6e7e6b7e // indirect
-	github.com/recws-org/recws v1.2.1
+	github.com/recws-org/recws v1.3.0 // indirect
 	github.com/sirupsen/logrus v1.8.1
 	github.com/spf13/afero v1.5.1 // indirect
 	github.com/spf13/cast v1.3.1 // indirect
--- a/outpost/go.sum
+++ b/outpost/go.sum
@ -438,6 +438,7 @@ github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8Hm
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
 github.com/jpillora/backoff v0.0.0-20180909062703-3050d21c67d7 h1:K//n/AqR5HjG3qxbrBCL4vJPW0MVFSs9CPK1OOJdRME=
 github.com/jpillora/backoff v0.0.0-20180909062703-3050d21c67d7/go.mod h1:2iMrUgbbvHEiQClaW2NsSzMyGHqN+rDFqY705q49KG0=
+github.com/jpillora/backoff v1.0.0/go.mod h1:J/6gKK9jxlEcS3zixgDgUAsiuZ7yrSoa/FX5e0EB2j4=
 github.com/json-iterator/go v1.1.6/go.mod h1:+SdeFBvtyEkXs7REEP0seUULqWtbJapLOCVDaaPEHmU=
 github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
 github.com/jstemmer/go-junit-report v0.0.0-20190106144839-af01ea7f8024/go.mod h1:6v2b51hI/fHJwM22ozAgKL4VKDeJcHhJFhtBdhmNjmU=
@ -598,6 +599,7 @@ github.com/prometheus/procfs v0.0.0-20190507164030-5867b95ac084/go.mod h1:TjEm7z
 github.com/prometheus/tsdb v0.7.1/go.mod h1:qhTCs0VvXwvX/y3TZrWD7rabWM+ijKTux40TwIPHuXU=
 github.com/recws-org/recws v1.2.1 h1:bYocRkAsS71hlQ9AMCVS+hYXHEgEyQsAbYKXf394gZ8=
 github.com/recws-org/recws v1.2.1/go.mod h1:SxTgwQU/jqYSzEgUh4ifDxq/7enApS150f8nZ5Sczk8=
+github.com/recws-org/recws v1.3.0/go.mod h1:gRH/uJLMsO7lbcecAB1Im1Zc6eKxs93ftGR0R39QeYA=
 github.com/rogpeppe/fastuuid v0.0.0-20150106093220-6724a57986af/go.mod h1:XWv6SoW27p1b0cqNHllgS5HIMJraePCO15w5zCzIWYg=
 github.com/rogpeppe/go-internal v1.1.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.2.2/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
--- a/swagger.yaml
+++ b/swagger.yaml
@ -1854,6 +1854,11 @@ paths:
          description: Page Size
          required: false
          type: integer
+        - name: top_n
+          in: query
+          required: false
+          type: integer
+          default: 15
      responses:
        '200':
          description: Response object of Event's top_per_user
--- a/web/nginx.conf
+++ b/web/nginx.conf
@ -72,11 +72,17 @@ http {
        listen      80;
        server_name _;
        charset     utf-8;
+        root   /usr/share/nginx/html;

        location / {
-            root   /usr/share/nginx/html;
            access_log /dev/stdout json_combined;
        }
+        location /static/ {
+            expires @31d;
+            add_header Cache-Control "public, no-transform";
+            add_header X-authentik-version "2021.3.4";
+            add_header Vary X-authentik-version;
+        }
    }

 }
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -74,9 +74,9 @@
            }
        },
        "@fortawesome/fontawesome-free": {
-            "version": "5.15.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
-            "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
+            "version": "5.15.3",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w=="
        },
        "@mrmlnc/readdir-enhanced": {
            "version": "2.2.1",
@ -2764,9 +2764,9 @@
            }
        },
        "rollup": {
-            "version": "2.41.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.2.tgz",
-            "integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==",
+            "version": "2.41.4",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.4.tgz",
+            "integrity": "sha512-f9IHfMO8p2Y8OdisI7Oj3oKkPuaQ6cgSwYqAi0TDvP3w2p+oX1VejX/w28a1h8WTnrapzfO5d4Uqhww+gL0b0g==",
            "requires": {
                "fsevents": "~2.3.1"
            }
--- a/web/package.json
+++ b/web/package.json
@ -10,7 +10,7 @@
        "lit-analyse": "lit-analyzer src"
    },
    "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.2",
+        "@fortawesome/fontawesome-free": "^5.15.3",
        "@patternfly/patternfly": "^4.90.5",
        "@sentry/browser": "^6.2.2",
        "@sentry/tracing": "^6.2.2",
@ -25,7 +25,7 @@
        "flowchart.js": "^1.15.0",
        "lit-element": "^2.4.0",
        "lit-html": "^1.3.0",
-        "rollup": "^2.41.2",
+        "rollup": "^2.41.4",
        "rollup-plugin-copy": "^3.4.0",
        "rollup-plugin-cssimport": "^1.0.2",
        "rollup-plugin-external-globals": "^0.6.1",
--- a/web/rollup.config.js
+++ b/web/rollup.config.js
@ -15,6 +15,17 @@ const resources = [
    { src: "src/assets/*", dest: "dist/assets" },
    { src: "./icons/*", dest: "dist/assets/icons" },
 ];
+// eslint-disable-next-line no-undef
+const isProdBuild = process.env.NODE_ENV === "production";
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function manualChunks(id) {
+    if (id.includes("node_modules")) {
+        if (id.includes("codemirror")) {
+            return "vendor-cm";
+        }
+        return "vendor";
+    }
+}

 export default [
    // Autogenerated API Client
@ -29,8 +40,7 @@ export default [
        ],
        plugins: [
            typescript(),
-            // eslint-disable-next-line no-undef
-            process.env.NODE_ENV === "production" ? terser() : undefined,
+            isProdBuild && terser(),
        ].filter(p => p),
        watch: {
            clearScreen: false,
@ -44,6 +54,7 @@ export default [
                format: "es",
                dir: "dist",
                sourcemap: true,
+                manualChunks: manualChunks,
            },
        ],
        plugins: [
@ -55,8 +66,7 @@ export default [
            resolve({ browser: true }),
            commonjs(),
            sourcemaps(),
-            // eslint-disable-next-line no-undef
-            process.env.NODE_ENV === "production" ? terser() : undefined,
+            isProdBuild && terser(),
            copy({
                targets: [...resources],
                copyOnce: false,
@ -75,6 +85,7 @@ export default [
                format: "es",
                dir: "dist",
                sourcemap: true,
+                manualChunks: manualChunks,
            },
        ],
        plugins: [
@ -86,8 +97,7 @@ export default [
            resolve({ browser: true }),
            commonjs(),
            sourcemaps(),
-            // eslint-disable-next-line no-undef
-            process.env.NODE_ENV === "production" ? terser() : undefined,
+            isProdBuild && terser(),
            copy({
                targets: [...resources],
                copyOnce: false,
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@ -20,54 +20,6 @@ html > input {
    display: block;
 }

-/* login page's icons */
-.pf-c-login__main-footer-links-item-link img {
-    fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
-    width: 100%;
-    max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
-    height: 100%;
-    max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
-}
-
-/* fix multiple selects height */
-select[multiple] {
-    height: 15em;
-}
-
-/* Form with user */
-.form-control-static {
-    margin-top: var(--pf-global--spacer--sm);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.form-control-static .left {
-    display: flex;
-    align-items: center;
-}
-.form-control-static img {
-    margin-right: var(--pf-global--spacer--xs);
-}
-.form-control-static a {
-    padding-top: var(--pf-global--spacer--xs);
-    padding-bottom: var(--pf-global--spacer--xs);
-    line-height: var(--pf-global--spacer--xl);
-}
-
-/* Static OTP Tokens, authentik.stages.otp_static */
-.ak-otp-tokens {
-    list-style: circle;
-    columns: 2;
-    -webkit-columns: 2;
-    -moz-columns: 2;
-    margin-left: var(--pf-global--spacer--xs);
-    width: 100%;
-}
-.ak-otp-tokens li {
-    font-size: var(--pf-global--FontSize--2xl);
-    font-family: monospace;
-}
-
 .pf-c-content h1 {
    display: flex;
    align-items: flex-start;
@ -79,14 +31,6 @@ select[multiple] {
    margin-right: var(--pf-global--spacer--sm);
 }

-.subtext {
-    font-size: var(--pf-global--FontSize--sm);
-}
-
-.pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
-    z-index: auto !important;
-}
-
 /* ensure background on non-flow pages match */
 .pf-c-background-image::before {
    background-image: url("/static/dist/assets/images/flow_background.jpg");
@ -98,6 +42,28 @@ ak-message {
    display: block;
 }

+.pf-m-success {
+    color: var(--pf-global--success-color--100);
+}
+.pf-c-button.pf-m-success {
+    color: var(--pf-c-button--m-primary--Color);
+    background-color: var(--pf-global--success-color--100);
+}
+.pf-m-warning {
+    color: var(--pf-global--warning-color--100);
+}
+.pf-c-button.pf-m-warning {
+    color: var(--pf-c-button--m-primary--Color);
+    background-color: var(--pf-global--warning-color--100);
+}
+.pf-m-danger {
+    color: var(--pf-global--danger-color--100);
+}
+.pf-c-button.pf-m-danger {
+    color: var(--pf-c-button--m-primary--Color);
+    background-color: var(--pf-global--danger-color--100);
+}
+
@media (prefers-color-scheme: dark) {
    :root {
        --ak-dark-foreground: #fafafa;
@ -124,7 +90,7 @@ ak-message {
    }
    /* Header sections */
    .pf-c-page__main-section {
-        background-color: var(--ak-dark-background);
+        --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
    }
    .pf-c-page__main-section.pf-m-light {
        background-color: var(--ak-dark-background-light);
@ -162,6 +128,16 @@ ak-message {
    .pf-c-table__sort-indicator i {
        color: var(--ak-dark-foreground) !important;
    }
+    .pf-c-table__expandable-row.pf-m-expanded {
+        --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--ak-dark-background-lighter);
+    }
+    /* tabs */
+    .pf-c-tabs {
+        background-color: var(--ak-dark-background-light);
+    }
+    .pf-c-tabs__item.pf-m-current {
+        --pf-c-tabs__link--after--BorderColor: #fd4b2d;
+    }
    /* tabs, vertical */
    .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
        background-color: var(--ak-dark-background-light);
@ -199,7 +175,7 @@ ak-message {
        --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
        --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
        --pf-global--BackgroundColor--100: transparent;
-        background-color: var(--ak-dark-background-light);
+        --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
        color: var(--ak-dark-foreground);
    }
    .pf-c-form-control[readonly] {
--- a/web/src/common/styles.ts
+++ b/web/src/common/styles.ts
@ -1,32 +0,0 @@
-import { css, CSSResult } from "lit-element";
-import PF from "@patternfly/patternfly/patternfly.css";
-import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
-import AKGlobal from "../authentik.css";
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
-
-export const ColorStyles = css`
-    .pf-m-success {
-        color: var(--pf-global--success-color--100);
-    }
-    .pf-c-button.pf-m-success {
-        color: var(--pf-c-button--m-primary--Color);
-        background-color: var(--pf-global--success-color--100);
-    }
-    .pf-m-warning {
-        color: var(--pf-global--warning-color--100);
-    }
-    .pf-c-button.pf-m-warning {
-        color: var(--pf-c-button--m-primary--Color);
-        background-color: var(--pf-global--warning-color--100);
-    }
-    .pf-m-danger {
-        color: var(--pf-global--danger-color--100);
-    }
-    .pf-c-button.pf-m-danger {
-        color: var(--pf-c-button--m-primary--Color);
-        background-color: var(--pf-global--danger-color--100);
-    }
-`;
-export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme, ColorStyles];
--- a/web/src/elements/EmptyState.ts
+++ b/web/src/elements/EmptyState.ts
@ -1,7 +1,10 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import AKGlobal from "../authentik.css";
+
+import { SpinnerSize } from "./Spinner";

@customElement("ak-empty-state")
 export class EmptyState extends LitElement {
@ -9,17 +12,27 @@ export class EmptyState extends LitElement {
    @property({type: String})
    icon = "";

+    @property({type: Boolean})
+    loading = false;
+
+    @property({type: Boolean})
+    fullHeight = false;
+
    @property()
-    header?: string;
+    header = "";

    static get styles(): CSSResult[] {
-        return [PFEmptyState, PFBase, FA];
+        return [PFBase, PFEmptyState, PFTitle, AKGlobal];
    }

    render(): TemplateResult {
-        return html`<div class="pf-c-empty-state">
+        return html`<div class="pf-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
            <div class="pf-c-empty-state__content">
-                <i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>
+                ${this.loading ?
+                    html`<div class="pf-c-empty-state__icon">
+                        <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
+                    </div>`:
+                    html`<i class="pf-icon fa ${this.icon || "fa-question-circle"} pf-c-empty-state__icon" aria-hidden="true"></i>`}
                <h1 class="pf-c-title pf-m-lg">
                    ${this.header}
                </h1>
--- a/web/src/elements/Spinner.ts
+++ b/web/src/elements/Spinner.ts
@ -1,7 +1,6 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
+import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";

 export enum SpinnerSize {
    Small = "pf-m-sm",
@ -16,7 +15,7 @@ export class Spinner extends LitElement {
    size: SpinnerSize = SpinnerSize.Medium;

    static get styles(): CSSResult[] {
-        return [SpinnerStyle];
+        return [PFSpinner];
    }

    render(): TemplateResult {
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@ -1,10 +1,7 @@
 import { LitElement, html, customElement, property, CSSResult, TemplateResult, css } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-// @ts-ignore
-import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-// @ts-ignore
+import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
+import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
 import AKGlobal from "../authentik.css";
 import { CURRENT_CLASS } from "../constants";
 import { gettext } from "django";
@ -18,7 +15,7 @@ export class Tabs extends LitElement {
    vertical = false;

    static get styles(): CSSResult[] {
-        return [GlobalsStyle, TabsStyle, AKGlobal, css`
+        return [PFGlobal, PFTabs, AKGlobal, css`
            ::slotted(*) {
                height: 100%;
                flex-grow: 2;
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@ -1,11 +1,24 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
+import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import AKGlobal from "../../authentik.css";
+import CodeMirrorStyle from "codemirror/lib/codemirror.css";
+import CodeMirrorTheme from "codemirror/theme/monokai.css";

 import { convertToSlug } from "../../utils";
 import { SpinnerButton } from "./SpinnerButton";
 import { PRIMARY_CLASS } from "../../constants";
 import { showMessage } from "../messages/MessageContainer";
-import { COMMON_STYLES } from "../../common/styles";

@customElement("ak-modal-button")
 export class ModalButton extends LitElement {
@ -19,7 +32,7 @@ export class ModalButton extends LitElement {
    modal = "<slot name='modal'></slot>";

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal, CodeMirrorStyle, CodeMirrorTheme].concat(
            css`
                :host {
                    text-align: left;
@ -30,6 +43,10 @@ export class ModalButton extends LitElement {
                .pf-c-modal-box > .pf-c-button + * {
                    margin-right: 0;
                }
+                /* fix multiple selects height */
+                select[multiple] {
+                    height: 15em;
+                }
            `
        );
    }
--- a/web/src/elements/buttons/SpinnerButton.ts
+++ b/web/src/elements/buttons/SpinnerButton.ts
@ -1,13 +1,9 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-// @ts-ignore
-import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
-// @ts-ignore
-import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import { SpinnerSize } from "../Spinner";
 import { PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
-import { ColorStyles } from "../../common/styles";

@customElement("ak-spinner-button")
 export class SpinnerButton extends LitElement {
@ -19,10 +15,9 @@ export class SpinnerButton extends LitElement {

    static get styles(): CSSResult[] {
        return [
-            GlobalsStyle,
-            ButtonStyle,
-            SpinnerStyle,
-            ColorStyles,
+            PFBase,
+            PFButton,
+            PFSpinner,
            css`
                button {
                    /* Have to use !important here, as buttons with pf-m-progress have transition already */
--- a/web/src/elements/buttons/TokenCopyButton.ts
+++ b/web/src/elements/buttons/TokenCopyButton.ts
@ -1,12 +1,10 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-// @ts-ignore
-import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { CoreApi } from "authentik-api";
 import { ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
-import { ColorStyles } from "../../common/styles";
 import { DEFAULT_CONFIG } from "../../api/Config";
+import AKGlobal from "../../authentik.css";

@customElement("ak-token-copy-button")
 export class TokenCopyButton extends LitElement {
@ -18,9 +16,9 @@ export class TokenCopyButton extends LitElement {

    static get styles(): CSSResult[] {
        return [
-            GlobalsStyle,
-            ButtonStyle,
-            ColorStyles,
+            PFBase,
+            PFButton,
+            AKGlobal,
            css`
                button {
                    transition: background-color 0.3s ease 0s;
--- a/web/src/elements/cards/AggregateCard.ts
+++ b/web/src/elements/cards/AggregateCard.ts
@ -1,7 +1,10 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
+import AKGlobal from "../../authentik.css";

@customElement("ak-aggregate-card")
 export class AggregateCard extends LitElement {
@ -15,7 +18,7 @@ export class AggregateCard extends LitElement {
    headerLink?: string;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat([css`
+        return [PFBase, PFCard, PFFlex, AKGlobal].concat([css`
            .pf-c-card.pf-c-card-aggregate {
                height: 100%;
            }
@ -24,6 +27,9 @@ export class AggregateCard extends LitElement {
                text-align: center;
                color: var(--pf-global--Color--100);
            }
+            .subtext {
+                font-size: var(--pf-global--FontSize--sm);
+            }
        `]);
    }

--- a/web/src/elements/forms/FormElement.ts
+++ b/web/src/elements/forms/FormElement.ts
@ -1,22 +1,21 @@
 import { customElement, LitElement, CSSResult, property, css } from "lit-element";
 import { TemplateResult, html } from "lit-html";
 import { Error } from "../../api/Flows";
-import { COMMON_STYLES } from "../../common/styles";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";

@customElement("ak-form-element")
 export class FormElement extends LitElement {

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
-            css`
+        return [PFForm, PFFormControl, css`
            slot {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
            }
-            `
-        );
+        `];
    }

    @property()
--- a/web/src/elements/messages/Message.ts
+++ b/web/src/elements/messages/Message.ts
@ -1,5 +1,9 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";
+import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";

 export interface APIMessage {
    level_tag: string;
@ -27,7 +31,7 @@ export class Message extends LitElement {
    onRemove?: (m: APIMessage) => void;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFButton, PFAlert, PFAlertGroup];
    }

    firstUpdated(): void {
--- a/web/src/elements/messages/MessageContainer.ts
+++ b/web/src/elements/messages/MessageContainer.ts
@ -1,8 +1,9 @@
 import { gettext } from "django";
 import { LitElement, html, customElement, TemplateResult, property, CSSResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 import "./Message";
 import { APIMessage } from "./Message";
+import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 export function showMessage(message: APIMessage): void {
    const container = document.querySelector<MessageContainer>("ak-message-container");
@ -23,7 +24,7 @@ export class MessageContainer extends LitElement {
    retryDelay = 200;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFAlertGroup];
    }

    constructor() {
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@ -3,7 +3,11 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import { EventsApi, Notification } from "authentik-api";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import AKGlobal from "../../authentik.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";

@customElement("ak-notification-drawer")
 export class NotificationDrawer extends LitElement {
@ -15,7 +19,7 @@ export class NotificationDrawer extends LitElement {
    unread = 0;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
            css`
                .pf-c-notification-drawer__header {
                    height: 114px;
@ -55,9 +59,9 @@ export class NotificationDrawer extends LitElement {
        default:
            break;
        }
-        return html`<li class="pf-c-notification-drawer__list-item pf-m-read ${level}">
+        return html`<li class="pf-c-notification-drawer__list-item pf-m-read">
            <div class="pf-c-notification-drawer__list-item-header">
-                <span class="pf-c-notification-drawer__list-item-header-icon">
+                <span class="pf-c-notification-drawer__list-item-header-icon ${level}">
                    <i class="fas fa-info-circle" aria-hidden="true"></i>
                </span>
                <h2 class="pf-c-notification-drawer__list-item-header-title">
@ -65,6 +69,11 @@ export class NotificationDrawer extends LitElement {
                </h2>
            </div>
            <div class="pf-c-notification-drawer__list-item-action">
+                ${item.event && html`
+                    <a class="pf-c-dropdown__toggle pf-m-plain" href="#/events/log/${item.event?.pk}">
+                        <i class="fas fas fa-share-square"></i>
+                    </a>
+                `}
                <button class="pf-c-dropdown__toggle pf-m-plain" type="button" @click=${() => {
                    new EventsApi(DEFAULT_CONFIG).eventsNotificationsPartialUpdate({
                        uuid: item.pk || "",
--- a/web/src/elements/notifications/NotificationTrigger.ts
+++ b/web/src/elements/notifications/NotificationTrigger.ts
@ -1,11 +1,13 @@
 import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";

@customElement("ak-notification-trigger")
 export class NotificationRule extends LitElement {

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFDropdown, FA];
    }

    constructor() {
--- a/web/src/elements/router/Router404.ts
+++ b/web/src/elements/router/Router404.ts
@ -1,6 +1,8 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

@customElement("ak-router-404")
 export class Router404 extends LitElement {
@ -9,7 +11,7 @@ export class Router404 extends LitElement {
    url = "";

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFEmptyState, PFTitle];
    }

    render(): TemplateResult {
--- a/web/src/elements/router/RouterOutlet.ts
+++ b/web/src/elements/router/RouterOutlet.ts
@ -1,12 +1,8 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import CodeMirrorStyle from "codemirror/lib/codemirror.css";
-// @ts-ignore
-import CodeMirrorTheme from "codemirror/theme/monokai.css";
-import { COMMON_STYLES } from "../../common/styles";
 import { Route } from "./Route";
 import { ROUTES } from "../../routes";
 import { RouteMatch } from "./RouteMatch";
+import AKGlobal from "../../authentik.css";

 import "../../pages/generic/SiteShell";
 import "./Router404";
@ -20,12 +16,11 @@ export class RouterOutlet extends LitElement {
    defaultUrl?: string;

    static get styles(): CSSResult[] {
-        return [
-            CodeMirrorStyle,
-            CodeMirrorTheme,
+        return [AKGlobal,
            css`
                :host {
                    height: 100vh;
+                    background-color: var(--ak-dark-background, var(--pf-c-page--BackgroundColor)) !important;
                }
                *:first-child {
                    height: 100%;
@ -33,7 +28,7 @@ export class RouterOutlet extends LitElement {
                    flex-direction: column;
                }
            `,
-        ].concat(...COMMON_STYLES);
+        ];
    }

    constructor() {
@ -68,9 +63,9 @@ export class RouterOutlet extends LitElement {
            console.debug(`authentik/router: route "${activeUrl}" not defined`);
            const route = new Route(
                RegExp(""),
-                html`<ak-site-shell class="pf-c-page__main" url=${activeUrl}>
-                    <div slot="body"></div>
-                </ak-site-shell>`
+                html`<div class="pf-c-page__main">
+                    <ak-router-404 url=${activeUrl}></ak-router-404>
+                </div>`
            );
            matchedRoute = new RouteMatch(route);
            matchedRoute.arguments = route.url.exec(activeUrl)?.groups || {};
--- a/web/src/elements/sidebar/Sidebar.ts
+++ b/web/src/elements/sidebar/Sidebar.ts
@ -1,11 +1,7 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import PageStyle from "@patternfly/patternfly/components/Page/page.css";
-// @ts-ignore
-import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-// @ts-ignore
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import AKGlobal from "../../authentik.css";

 import { until } from "lit-html/directives/until";
@ -99,9 +95,9 @@ export class Sidebar extends LitElement {

    static get styles(): CSSResult[] {
        return [
-            GlobalsStyle,
-            PageStyle,
-            NavStyle,
+            PFBase,
+            PFPage,
+            PFNav,
            AKGlobal,
            css`
                .pf-c-nav__link.pf-m-current::after,
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@ -1,8 +1,6 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
-import PageStyle from "@patternfly/patternfly/components/Page/page.css";
-// @ts-ignore
-import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
 import { configureSentry } from "../../api/Config";
 import { Config } from "authentik-api";
 import { ifDefined } from "lit-html/directives/if-defined";
@ -23,8 +21,8 @@ export class SidebarBrand extends LitElement {

    static get styles(): CSSResult[] {
        return [
-            GlobalsStyle,
-            PageStyle,
+            PFGlobal,
+            PFPage,
            css`
                :host {
                    display: flex;
--- a/web/src/elements/sidebar/SidebarHamburger.ts
+++ b/web/src/elements/sidebar/SidebarHamburger.ts
@ -1,11 +1,13 @@
 import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import AKGlobal from "../../authentik.css";

@customElement("ak-sidebar-hamburger")
 export class SidebarHamburger extends LitElement {

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFButton, AKGlobal].concat(
            css`
                :host {
                    position: absolute;
--- a/web/src/elements/sidebar/SidebarUser.ts
+++ b/web/src/elements/sidebar/SidebarUser.ts
@ -1,12 +1,9 @@
 import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-// @ts-ignore
-import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
-// @ts-ignore
-import fa from "@fortawesome/fontawesome-free/css/all.css";
-// @ts-ignore
-import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css";
+import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import { me } from "../../api/Users";
 import { until } from "lit-html/directives/until";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import "../notifications/NotificationTrigger";
 import { ifDefined } from "lit-html/directives/if-defined";
@ -16,9 +13,9 @@ export class SidebarUser extends LitElement {

    static get styles(): CSSResult[] {
        return [
-            fa,
-            NavStyle,
-            AvatarStyle,
+            PFBase,
+            PFNav,
+            PFAvatar,
            css`
                :host {
                    display: flex;
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@ -1,12 +1,18 @@
 import { gettext } from "django";
 import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFTable from "@patternfly/patternfly/components/Table/table.css";
+import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
+import AKGlobal from "../../authentik.css";

 import "./TablePagination";
 import "../EmptyState";
-import "../Spinner";
-import { SpinnerSize } from "../Spinner";

 export class TableColumn {

@ -109,7 +115,7 @@ export abstract class Table<T> extends LitElement {
    expandedRows: boolean[] = [];

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFTable, PFBullseye, PFButton, PFToolbar, PFDropdown, PFPagination, AKGlobal];
    }

    constructor() {
@ -138,14 +144,10 @@ export abstract class Table<T> extends LitElement {
        return html`<tr role="row">
            <td role="cell" colspan="25">
                <div class="pf-l-bullseye">
-                    <div class="pf-c-empty-state pf-m-sm">
-                        <div class="pf-c-empty-state__content">
-                            <div class="pf-c-empty-state__icon">
-                                <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
-                            </div>
-                            <h2 class="pf-c-title pf-m-lg">${gettext("Loading")}</h2>
-                        </div>
-                    </div>
+                    <ak-empty-state
+                        ?loading="${true}"
+                        header=${gettext("Loading")}>
+                    </ak-empty-state>
                </div>
            </td>
        </tr>`;
--- a/web/src/elements/table/TablePage.ts
+++ b/web/src/elements/table/TablePage.ts
@ -1,8 +1,11 @@
 import { gettext } from "django";
+import { CSSResult } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { Table } from "./Table";
 import "./TableSearch";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";

 export abstract class TablePage<T> extends Table<T> {
    abstract pageTitle(): string;
@ -10,6 +13,10 @@ export abstract class TablePage<T> extends Table<T> {
    abstract pageIcon(): string;
    abstract searchEnabled(): boolean;

+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFPage, PFContent);
+    }
+
    renderSearch(): TemplateResult {
        if (!this.searchEnabled()) {
            return super.renderSearch();
--- a/web/src/elements/table/TablePagination.ts
+++ b/web/src/elements/table/TablePagination.ts
@ -1,7 +1,10 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 import { AKPagination } from "../../api/Client";
 import { gettext } from "django";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
+import AKGlobal from "../../authentik.css";

@customElement("ak-table-pagination")
 export class TablePagination extends LitElement {
@ -13,7 +16,7 @@ export class TablePagination extends LitElement {
    pageChangeHandler: (page: number) => void = (page: number) => {}

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFButton, PFPagination, AKGlobal];
    }

    render(): TemplateResult {
--- a/web/src/elements/table/TableSearch.ts
+++ b/web/src/elements/table/TableSearch.ts
@ -1,6 +1,11 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
+import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import AKGlobal from "../../authentik.css";

@customElement("ak-table-search")
 export class TableSearch extends LitElement {
@ -12,7 +17,7 @@ export class TableSearch extends LitElement {
    onSearch?: (value: string) => void;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFButton, PFToolbar, PFInputGroup, PFFormControl, AKGlobal];
    }

    render(): TemplateResult {
--- a/web/src/elements/utils/LoadingState.ts
+++ b/web/src/elements/utils/LoadingState.ts
@ -1,23 +0,0 @@
-import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
-import { SpinnerSize } from "../Spinner";
-
-@customElement("ak-loading-state")
-export class LoadingState extends LitElement {
-
-    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-empty-state pf-m-full-height">
-            <div class="pf-c-empty-state__content">
-                <div class="pf-l-bullseye">
-                    <div class="pf-l-bullseye__item">
-                        <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
-                    </div>
-                </div>
-            </div>
-        </div>`;
-    }
-}
--- a/web/src/flows/FlowExecutor.ts
+++ b/web/src/flows/FlowExecutor.ts
@ -1,10 +1,12 @@
 import { gettext } from "django";
 import { LitElement, html, customElement, property, TemplateResult, CSSResult, css } from "lit-element";

-import PFLogin from "../../node_modules/@patternfly/patternfly/components/Login/login.css";
-import PFBackgroundImage from "../../node_modules/@patternfly/patternfly/components/BackgroundImage/background-image.css";
-import PFList from "../../node_modules/@patternfly/patternfly/components/List/list.css";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
 import AKGlobal from "../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";

 import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import "./stages/authenticator_static/AuthenticatorStaticStage";
@ -30,7 +32,6 @@ import { AuthenticatorStaticChallenge } from "./stages/authenticator_static/Auth
 import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage";
 import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
 import { CaptchaChallenge } from "./stages/captcha/CaptchaStage";
-import { COMMON_STYLES } from "../common/styles";
 import { SpinnerSize } from "../elements/Spinner";
 import { StageHost } from "./stages/base";
 import { Challenge, ChallengeTypeEnum, FlowsApi } from "authentik-api";
@ -48,7 +49,7 @@ export class FlowExecutor extends LitElement implements StageHost {
    loading = false;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFLogin, PFTitle].concat(css`
            .ak-loading {
                display: flex;
                height: 100%;
@ -64,6 +65,10 @@ export class FlowExecutor extends LitElement implements StageHost {
            :host {
                position: relative;
            }
+            .ak-exception {
+                font-family: monospace;
+                overflow-x: scroll;
+            }
        `);
    }

@ -110,13 +115,7 @@ export class FlowExecutor extends LitElement implements StageHost {
    errorMessage(error: string): void {
        this.challenge = <ShellChallenge>{
            type: ChallengeTypeEnum.Shell,
-            body: `<style>
-                    .ak-exception {
-                        font-family: monospace;
-                        overflow-x: scroll;
-                    }
-                </style>
-                <header class="pf-c-login__main-header">
+            body: `<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
                    ${gettext("Whoops!")}
                </h1>
--- a/web/src/flows/FormStatic.ts
+++ b/web/src/flows/FormStatic.ts
@ -0,0 +1,39 @@
+import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+
+@customElement("ak-form-static")
+export class FormStatic extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [css`
+            /* Form with user */
+            .form-control-static {
+                margin-top: var(--pf-global--spacer--sm);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .form-control-static slot[name=avatar] {
+                display: flex;
+                align-items: center;
+            }
+            .form-control-static img {
+                margin-right: var(--pf-global--spacer--xs);
+            }
+            .form-control-static a {
+                padding-top: var(--pf-global--spacer--xs);
+                padding-bottom: var(--pf-global--spacer--xs);
+                line-height: var(--pf-global--spacer--xl);
+            }
+        `];
+    }
+
+    render(): TemplateResult {
+        return html`
+            <div class="form-control-static">
+                <slot name="avatar"></slot>
+                <slot name="link"></slot>
+            </div>
+        `;
+    }
+
+}
--- a/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
+++ b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
@ -1,10 +1,17 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
-import "../form";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/forms/FormElement";
+import "../../../elements/EmptyState";
+import "../../FormStatic";

 export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
    codes: number[];
@ -17,7 +24,7 @@ export class AuthenticatorStaticStage extends BaseStage {
    challenge?: AuthenticatorStaticChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
            /* Static OTP Tokens */
            .ak-otp-tokens {
                list-style: circle;
@ -35,7 +42,10 @@ export class AuthenticatorStaticStage extends BaseStage {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
@ -44,17 +54,15 @@ export class AuthenticatorStaticStage extends BaseStage {
            </header>
            <div class="pf-c-login__main-body">
                <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <div class="pf-c-form__group">
-                        <div class="form-control-static">
-                            <div class="left">
+                    <ak-form-static class="pf-c-form__group">
+                        <div slot="avatar">
                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
                            ${this.challenge.pending_user}
                        </div>
-                            <div class="right">
+                        <div slot="link">
                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                        </div>
-                        </div>
-                    </div>
+                    </ak-form-static>
                    <ak-form-element
                        label="${gettext("Tokens")}"
                        ?required="${true}"
--- a/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+++ b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
@ -1,12 +1,19 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
 import "webcomponent-qr-code";
-import "../form";
+import "../../../elements/forms/FormElement";
 import { showMessage } from "../../../elements/messages/MessageContainer";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
+import "../../FormStatic";

 export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
    config_url: string;
@ -19,12 +26,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
    challenge?: AuthenticatorTOTPChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
    }

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
@ -33,17 +43,15 @@ export class AuthenticatorTOTPStage extends BaseStage {
            </header>
            <div class="pf-c-login__main-body">
                <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <div class="pf-c-form__group">
-                        <div class="form-control-static">
-                            <div class="left">
+                    <ak-form-static class="pf-c-form__group">
+                        <div slot="avatar">
                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
                            ${this.challenge.pending_user}
                        </div>
-                            <div class="right">
+                        <div slot="link">
                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                        </div>
-                        </div>
-                    </div>
+                    </ak-form-static>
                    <input type="hidden" name="otp_uri" value=${this.challenge.config_url} />
                    <ak-form-element>
                        <!-- @ts-ignore -->
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
@ -1,7 +1,13 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage, StageHost } from "../base";
 import "./AuthenticatorValidateStageWebAuthn";
 import "./AuthenticatorValidateStageCode";
@ -41,7 +47,7 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
    }

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css`
            ul > li:not(:last-child) {
                padding-bottom: 1rem;
            }
@ -134,7 +140,10 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+    ?loading="${true}"
+    header=${gettext("Loading")}>
+</ak-empty-state>`;
        }
        // User only has a single device class, so we don't show a picker
        if (this.challenge?.device_challenges.length === 1) {
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
@ -1,11 +1,18 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
 import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
-import "../form";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/forms/FormElement";
+import "../../../elements/EmptyState";
 import { PasswordManagerPrefill } from "../identification/IdentificationStage";
+import "../../FormStatic";

@customElement("ak-stage-authenticator-validate-code")
 export class AuthenticatorValidateStageWebCode extends BaseStage {
@ -20,26 +27,27 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
    showBackButton = false;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
    }

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<div class="pf-c-login__main-body">
            <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                <div class="pf-c-form__group">
-                    <div class="form-control-static">
-                        <div class="left">
+                <ak-form-static class="pf-c-form__group">
+                    <div slot="avatar">
                        <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
                        ${this.challenge.pending_user}
                    </div>
-                        <div class="right">
+                    <div slot="link">
                        <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                    </div>
-                    </div>
-                </div>
+                </ak-form-static>
                <ak-form-element
                    label="${gettext("Code")}"
                    ?required="${true}"
--- a/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
@ -1,6 +1,12 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { SpinnerSize } from "../../../elements/Spinner";
 import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
 import { BaseStage } from "../base";
@ -25,7 +31,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
    showBackButton = false;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
    }

    async authenticate(): Promise<void> {
--- a/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
+++ b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
@ -1,7 +1,13 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { SpinnerSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
@ -27,7 +33,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage {
    registerMessage = "";

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFFormControl, PFForm, PFTitle, PFButton, AKGlobal];
    }

    async register(): Promise<void> {
--- a/web/src/flows/stages/autosubmit/AutosubmitStage.ts
+++ b/web/src/flows/stages/autosubmit/AutosubmitStage.ts
@ -1,9 +1,15 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";

 export interface AutosubmitChallenge extends WithUserInfoChallenge {
    url: string;
@ -17,7 +23,7 @@ export class AutosubmitStage extends BaseStage {
    challenge?: AutosubmitChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
    }

    updated(): void {
@ -26,7 +32,10 @@ export class AutosubmitStage extends BaseStage {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
@ -38,8 +47,10 @@ export class AutosubmitStage extends BaseStage {
                    ${Object.entries(this.challenge.attrs).map(([ key, value ]) => {
                        return html`<input type="hidden" name="${key}" value="${value}">`;
                    })}
-                    <ak-loading-state></ak-loading-state>
-
+                    <ak-empty-state
+                        ?loading="${true}"
+                        header=${gettext("Loading")}>
+                    </ak-empty-state>
                    <div class="pf-c-form__group pf-m-action">
                        <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
                            ${gettext("Continue")}
--- a/web/src/flows/stages/captcha/CaptchaStage.ts
+++ b/web/src/flows/stages/captcha/CaptchaStage.ts
@ -1,11 +1,18 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { SpinnerSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
-import "../form";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/forms/FormElement";
+import "../../../elements/EmptyState";
+import "../../FormStatic";

 export interface CaptchaChallenge extends WithUserInfoChallenge {
    site_key: string;
@ -18,7 +25,7 @@ export class CaptchaStage extends BaseStage {
    challenge?: CaptchaChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
    }

    submitFormAlt(token: string): void {
@ -29,7 +36,7 @@ export class CaptchaStage extends BaseStage {

    firstUpdated(): void {
        const script = document.createElement("script");
-        script.src = "https://www.google.com/recaptcha/api.js";//?render=${this.challenge?.site_key}`;
+        script.src = "https://www.google.com/recaptcha/api.js";
        script.async = true;
        script.defer = true;
        const captchaContainer = document.createElement("div");
@ -54,7 +61,10 @@ export class CaptchaStage extends BaseStage {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                    ?loading="${true}"
+                    header=${gettext("Loading")}>
+                </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
@ -63,17 +73,15 @@ export class CaptchaStage extends BaseStage {
            </header>
            <div class="pf-c-login__main-body">
                <form class="pf-c-form">
-                    <div class="pf-c-form__group">
-                        <div class="form-control-static">
-                            <div class="left">
+                    <ak-form-static class="pf-c-form__group">
+                        <div slot="avatar">
                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
                            ${this.challenge.pending_user}
                        </div>
-                            <div class="right">
+                        <div slot="link">
                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                        </div>
-                        </div>
-                    </div>
+                    </ak-form-static>
                    <div class="ak-loading">
                        <ak-spinner size=${SpinnerSize.XLarge}></ak-spinner>
                    </div>
--- a/web/src/flows/stages/consent/ConsentStage.ts
+++ b/web/src/flows/stages/consent/ConsentStage.ts
@ -1,9 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";
+import "../../FormStatic";

 export interface Permission {
    name: string;
@ -24,12 +31,15 @@ export class ConsentStage extends BaseStage {
    challenge?: ConsentChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
    }

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
@ -38,17 +48,15 @@ export class ConsentStage extends BaseStage {
            </header>
            <div class="pf-c-login__main-body">
                <form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
-                    <div class="pf-c-form__group">
-                        <div class="form-control-static">
-                            <div class="left">
+                    <ak-form-static class="pf-c-form__group">
+                        <div slot="avatar">
                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
                            ${this.challenge.pending_user}
                        </div>
-                            <div class="right">
+                        <div slot="link">
                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                        </div>
-                        </div>
-                    </div>
+                    </ak-form-static>

                    <div class="pf-c-form__group">
                        <p id="header-text">
--- a/web/src/flows/stages/email/EmailStage.ts
+++ b/web/src/flows/stages/email/EmailStage.ts
@ -1,9 +1,15 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { Challenge } from "authentik-api";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/EmptyState";

 export type EmailChallenge = Challenge;

@ -14,12 +20,15 @@ export class EmailStage extends BaseStage {
    challenge?: EmailChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
    }

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
--- a/web/src/flows/stages/identification/IdentificationStage.ts
+++ b/web/src/flows/stages/identification/IdentificationStage.ts
@ -1,9 +1,15 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
-import "../form";
-import "../../../elements/utils/LoadingState";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
+import "../../../elements/forms/FormElement";
+import "../../../elements/EmptyState";
 import { Challenge } from "../../../api/Flows";

 export const PasswordManagerPrefill: {
@ -40,10 +46,15 @@ export class IdentificationStage extends BaseStage {
    challenge?: IdentificationChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(
            css`
+                /* login page's icons */
                .pf-c-login__main-footer-links-item-link img {
-                    width: 100px;
+                    fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
+                    width: 100%;
+                    max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
+                    height: 100%;
+                    max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
                }
            `
        );
@ -113,7 +124,7 @@ export class IdentificationStage extends BaseStage {
    }

    renderSource(source: UILoginButton): TemplateResult {
-        let icon = html`<i class="pf-icon pf-icon-arrow" title="${source.name}"></i>`;
+        let icon = html`<i class="fas fas fa-share-square" title="${source.name}"></i>`;
        if (source.icon_url) {
            icon = html`<img src="${source.icon_url}" alt="${source.name}">`;
        }
@ -144,7 +155,10 @@ export class IdentificationStage extends BaseStage {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
--- a/web/src/flows/stages/password/PasswordStage.ts
+++ b/web/src/flows/stages/password/PasswordStage.ts
@ -1,11 +1,18 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
-import "../form";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/forms/FormElement";
+import "../../../elements/EmptyState";
 import { PasswordManagerPrefill } from "../identification/IdentificationStage";
+import "../../FormStatic";

 export interface PasswordChallenge extends WithUserInfoChallenge {
    recovery_url?: string;
@ -18,12 +25,15 @@ export class PasswordStage extends BaseStage {
    challenge?: PasswordChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
    }

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
@ -32,17 +42,15 @@ export class PasswordStage extends BaseStage {
            </header>
            <div class="pf-c-login__main-body">
                <form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}>
-                    <div class="pf-c-form__group">
-                        <div class="form-control-static">
-                            <div class="left">
+                    <ak-form-static class="pf-c-form__group">
+                        <div slot="avatar">
                            <img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
                            ${this.challenge.pending_user}
                        </div>
-                            <div class="right">
+                        <div slot="link">
                            <a href="/flows/-/cancel/">${gettext("Not you?")}</a>
                        </div>
-                        </div>
-                    </div>
+                    </ak-form-static>

                    <input name="username" autocomplete="username" type="hidden" value="${this.challenge.pending_user}">
                    <ak-form-element
--- a/web/src/flows/stages/prompt/PromptStage.ts
+++ b/web/src/flows/stages/prompt/PromptStage.ts
@ -1,10 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { COMMON_STYLES } from "../../../common/styles";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
 import { BaseStage } from "../base";
-import "../form";
-import "../../../elements/utils/LoadingState";
+import "../../../elements/forms/FormElement";
+import "../../../elements/EmptyState";
 import { Challenge } from "../../../api/Flows";

 export interface Prompt {
@ -27,7 +33,7 @@ export class PromptStage extends BaseStage {
    challenge?: PromptChallenge;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
    }

    renderPromptInner(prompt: Prompt): string {
@ -113,7 +119,10 @@ export class PromptStage extends BaseStage {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state
+    ?loading="${true}"
+    header=${gettext("Loading")}>
+</ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">
--- a/web/src/interfaces/Interface.ts
+++ b/web/src/interfaces/Interface.ts
@ -1,12 +1,15 @@
-import { gettext } from "django";
-import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
+import { css, CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
 import { SidebarItem } from "../elements/sidebar/Sidebar";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFSkipToContent from "@patternfly/patternfly/components/SkipToContent/skip-to-content.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";

 import "../elements/router/RouterOutlet";
 import "../elements/messages/MessageContainer";
 import "../elements/sidebar/SidebarHamburger";
 import "../elements/notifications/NotificationDrawer";
-import { COMMON_STYLES } from "../common/styles";

 export abstract class Interface extends LitElement {
    @property({type: Boolean})
@ -18,7 +21,11 @@ export abstract class Interface extends LitElement {
    abstract get sidebar(): SidebarItem[];

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFSkipToContent, PFButton, PFDrawer, css`
+            .pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer {
+                z-index: auto !important;
+            }
+        `];
    }

    constructor() {
@ -38,7 +45,6 @@ export abstract class Interface extends LitElement {
    render(): TemplateResult {
        return html`<ak-message-container></ak-message-container>
            <div class="pf-c-page">
-                <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">${gettext("Skip to content")}</a>
                <ak-sidebar-hamburger>
                </ak-sidebar-hamburger>
                <ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}" .items=${this.sidebar}>
--- a/web/src/pages/LibraryPage.ts
+++ b/web/src/pages/LibraryPage.ts
@ -6,8 +6,16 @@ import { Application, CoreApi } from "authentik-api";
 import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
 import { me } from "../api/Users";
-import { COMMON_STYLES } from "../common/styles";
 import { loading, truncate } from "../utils";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import AKGlobal from "../authentik.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";

@customElement("ak-library-app")
 export class LibraryApplication extends LitElement {
@ -15,13 +23,16 @@ export class LibraryApplication extends LitElement {
    application?: Application;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFCard, PFAvatar, AKGlobal,
            css`
                a {
                    height: 100%;
                }
                i.pf-icon {
                    height: 36px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
                }
                .pf-c-avatar {
                    --pf-c-avatar--BorderRadius: 0;
@ -36,7 +47,7 @@ export class LibraryApplication extends LitElement {
                    margin-right: 0.25em;
                }
            `
-        );
+        ];
    }

    render(): TemplateResult {
@ -47,7 +58,7 @@ export class LibraryApplication extends LitElement {
            <div class="pf-c-card__header">
                ${this.application.metaIcon
                    ? html`<img class="app-icon pf-c-avatar" src="${ifDefined(this.application.metaIcon)}" alt="Application Icon"/>`
-                    : html`<i class="pf-icon pf-icon-arrow"></i>`}
+                    : html`<i class="fas fas fa-share-square"></i>`}
                ${until(me().then((u) => {
                    if (!u.isSuperuser) return html``;
                    return html`
@ -75,7 +86,7 @@ export class LibraryPage extends LitElement {
    apps?: AKResponse<Application>;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFEmptyState, PFTitle, PFPage, PFContent, PFGallery, AKGlobal].concat(css`
            :host,
            main {
                height: 100%;
--- a/web/src/pages/admin-overview/AdminOverviewPage.ts
+++ b/web/src/pages/admin-overview/AdminOverviewPage.ts
@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";

 import "../../elements/charts/AdminLoginsChart";
 import "../../elements/cards/AggregatePromiseCard";
@ -14,11 +13,16 @@ import "./cards/UserCountStatusCard";
 import "./cards/VersionStatusCard";
 import "./cards/WorkerStatusCard";

+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import AKGlobal from "../../authentik.css";
+
@customElement("ak-admin-overview")
 export class AdminOverviewPage extends LitElement {

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFGallery, PFPage, PFContent, AKGlobal];
    }

    render(): TemplateResult {
--- a/web/src/pages/admin-overview/TopApplicationsTable.ts
+++ b/web/src/pages/admin-overview/TopApplicationsTable.ts
@ -1,7 +1,8 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
 import { EventsApi, EventTopPerUser } from "authentik-api";
+import PFTable from "@patternfly/patternfly/components/Table/table.css";
+import AKGlobal from "../../authentik.css";

 import "../../elements/Spinner";
 import { DEFAULT_CONFIG } from "../../api/Config";
@ -13,7 +14,7 @@ export class TopApplicationsTable extends LitElement {
    topN?: EventTopPerUser[];

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFTable, AKGlobal];
    }

    firstUpdated(): void {
--- a/web/src/pages/applications/ApplicationListPage.ts
+++ b/web/src/pages/applications/ApplicationListPage.ts
@ -10,6 +10,7 @@ import { PAGE_SIZE } from "../../constants";
 import { Application, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";

@customElement("ak-application-list")
 export class ApplicationListPage extends TablePage<Application> {
@ -39,7 +40,7 @@ export class ApplicationListPage extends TablePage<Application> {
    }

    static get styles(): CSSResult[] {
-        return super.styles.concat(css`
+        return super.styles.concat(PFAvatar, css`
            tr td:first-child {
                width: auto;
                min-width: 0px;
@ -64,7 +65,7 @@ export class ApplicationListPage extends TablePage<Application> {
        return [
            item.metaIcon ?
                html`<img class="app-icon pf-c-avatar" src="${item.metaIcon}" alt="${gettext("Application Icon")}">` :
-                html`<i class="pf-icon pf-icon-arrow"></i>`,
+                html`<i class="fas fas fa-share-square"></i>`,
            html`<a href="#/core/applications/${item.slug}">
                <div>
                    ${item.name}
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@ -1,15 +1,20 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";

 import "../../elements/Tabs";
 import "../../elements/charts/ApplicationAuthorizeChart";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
-import "../../elements/utils/LoadingState";
+import "../../elements/EmptyState";
 import { Application, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

@customElement("ak-application-view")
 export class ApplicationViewPage extends LitElement {
@ -31,7 +36,7 @@ export class ApplicationViewPage extends LitElement {
    application!: Application;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFPage, PFContent, PFGallery, PFCard, AKGlobal].concat(
            css`
                img.pf-icon {
                    max-height: 24px;
@ -52,7 +57,10 @@ export class ApplicationViewPage extends LitElement {
                    </h1>
                </div>
            </section>
-            <ak-loading-state></ak-loading-state>`;
+            <ak-empty-state
+                ?loading="${true}"
+                header=${gettext("Loading")}>
+            </ak-empty-state>`;
        }
        return html`<section class="pf-c-page__main-section pf-m-light">
                <div class="pf-c-content">
--- a/web/src/pages/events/EventInfo.ts
+++ b/web/src/pages/events/EventInfo.ts
@ -2,13 +2,17 @@ import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
 import { FlowsApi } from "authentik-api";
-import { COMMON_STYLES } from "../../common/styles";
 import "../../elements/Spinner";
 import "../../elements/Expand";
 import { SpinnerSize } from "../../elements/Spinner";
 import { EventContext, EventWithContext } from "../../api/Events";
 import { DEFAULT_CONFIG } from "../../api/Config";

+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
+
@customElement("ak-event-info")
 export class EventInfo extends LitElement {

@ -16,7 +20,7 @@ export class EventInfo extends LitElement {
    event!: EventWithContext;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFFlex, PFList, PFDescriptionList,
            css`
                code {
                    display: block;
@ -29,7 +33,7 @@ export class EventInfo extends LitElement {
                    min-width: 25%;
                }
            `
-        );
+        ];
    }

    getModelInfo(context: EventContext): TemplateResult {
--- a/web/src/pages/events/EventInfoPage.ts
+++ b/web/src/pages/events/EventInfoPage.ts
@ -3,7 +3,10 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import { EventsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { EventWithContext } from "../../api/Events";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import AKGlobal from "../../authentik.css";
 import "./EventInfo";

@customElement("ak-event-info-page")
@ -26,7 +29,7 @@ export class EventInfoPage extends LitElement {
    event!: EventWithContext;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [PFBase, PFPage, PFCard, AKGlobal].concat(css`
            .pf-c-card {
                color: var(--ak-dark-foreground);
            }
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";

 import "../../elements/Tabs";
 import "../../elements/buttons/ModalButton";
@ -11,6 +10,11 @@ import "./FlowDiagram";
 import { Flow, FlowsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";

+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
@customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
    @property()
@ -26,7 +30,7 @@ export class FlowViewPage extends LitElement {
    flow!: Flow;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFBase, PFPage, PFContent, AKGlobal].concat(
            css`
                img.pf-icon {
                    max-height: 24px;
--- a/web/src/pages/generic/SiteShell.ts
+++ b/web/src/pages/generic/SiteShell.ts
@ -4,7 +4,10 @@ import { showMessage } from "../../elements/messages/MessageContainer";
 import { gettext } from "django";
 import { SentryIgnoredError } from "../../common/errors";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";

@customElement("ak-site-shell")
 export class SiteShell extends LitElement {
@ -23,7 +26,7 @@ export class SiteShell extends LitElement {
    body = "";

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(
+        return [PFPage, PFGallery, PFContent].concat(
            css`
                :host,
                ::slotted(*) {
--- a/web/src/pages/outposts/OutpostHealth.ts
+++ b/web/src/pages/outposts/OutpostHealth.ts
@ -3,8 +3,9 @@ import { CSSResult, customElement, html, LitElement, property, TemplateResult }
 import { until } from "lit-html/directives/until";
 import { OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { COMMON_STYLES } from "../../common/styles";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import "../../elements/Spinner";
+import AKGlobal from "../../authentik.css";

@customElement("ak-outpost-health")
 export class OutpostHealth extends LitElement {
@ -13,7 +14,7 @@ export class OutpostHealth extends LitElement {
    outpostId?: string;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, AKGlobal];
    }

    render(): TemplateResult {
--- a/web/src/pages/providers/OAuth2ProviderViewPage.ts
+++ b/web/src/pages/providers/OAuth2ProviderViewPage.ts
@ -1,6 +1,18 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@ -47,7 +59,7 @@ export class OAuth2ProviderViewPage extends Page {
    providerUrls?: OAuth2ProviderSetupURLs;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, PFForm, PFFormControl, AKGlobal];
    }

    constructor() {
--- a/web/src/pages/providers/ProviderViewPage.ts
+++ b/web/src/pages/providers/ProviderViewPage.ts
@ -1,9 +1,8 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
-import "../../elements/utils/LoadingState";
+import "../../elements/EmptyState";

 import "./SAMLProviderViewPage";
 import "./OAuth2ProviderViewPage";
@ -26,16 +25,16 @@ export class ProviderViewPage extends LitElement {
    provider?: Provider;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [css`
            * {
                height: 100%;
            }
-        `);
+        `];
    }

    render(): TemplateResult {
        if (!this.provider) {
-            return html`<ak-loading-state></ak-loading-state>`;
+            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
        }
        switch (this.provider?.objectType) {
            case "saml":
--- a/web/src/pages/providers/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/ProxyProviderViewPage.ts
@ -1,6 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@ -40,7 +50,7 @@ export class ProxyProviderViewPage extends Page {
    provider?: ProxyProvider;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
    }

    constructor() {
--- a/web/src/pages/providers/SAMLProviderViewPage.ts
+++ b/web/src/pages/providers/SAMLProviderViewPage.ts
@ -1,7 +1,17 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@ -41,7 +51,7 @@ export class SAMLProviderViewPage extends Page {
    provider?: SAMLProvider;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
    }

    constructor() {
--- a/web/src/pages/sources/LDAPSourceViewPage.ts
+++ b/web/src/pages/sources/LDAPSourceViewPage.ts
@ -1,6 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@ -38,7 +48,7 @@ export class LDAPSourceViewPage extends Page {
    source!: LDAPSource;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
    }

    constructor() {
--- a/web/src/pages/sources/OAuthSourceViewPage.ts
+++ b/web/src/pages/sources/OAuthSourceViewPage.ts
@ -1,6 +1,16 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@ -36,7 +46,7 @@ export class OAuthSourceViewPage extends Page {
    source?: OAuthSource;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
    }

    constructor() {
--- a/web/src/pages/sources/SAMLSourceViewPage.ts
+++ b/web/src/pages/sources/SAMLSourceViewPage.ts
@ -1,7 +1,17 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { COMMON_STYLES } from "../../common/styles";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@ -37,7 +47,7 @@ export class SAMLSourceViewPage extends Page {
    source?: SAMLSource;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES;
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
    }

    constructor() {
--- a/web/src/pages/sources/SourceViewPage.ts
+++ b/web/src/pages/sources/SourceViewPage.ts
@ -1,11 +1,10 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Source, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { COMMON_STYLES } from "../../common/styles";

 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
-import { SpinnerSize } from "../../elements/Spinner";
+import "../../elements/EmptyState";

 import "./LDAPSourceViewPage";
 import "./OAuthSourceViewPage";
@ -31,24 +30,16 @@ export class SourceViewPage extends LitElement {
    source?: Source;

    static get styles(): CSSResult[] {
-        return COMMON_STYLES.concat(css`
+        return [css`
            * {
                height: 100%;
            }
-        `);
+        `];
    }

    render(): TemplateResult {
        if (!this.source) {
-            return html`<div class="pf-c-empty-state pf-m-full-height">
-                <div class="pf-c-empty-state__content">
-                    <div class="pf-l-bullseye">
-                        <div class="pf-l-bullseye__item">
-                            <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
+            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
        }
        switch (this.source?.objectType) {
            case "ldap":
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@ -1,5 +1,6 @@
+import { gettext } from "django";
 import { html, TemplateResult } from "lit-html";
-import "./elements/utils/LoadingState";
+import "./elements/EmptyState";

 export function getCookie(name: string): string {
    let cookieValue = "";
@ -43,7 +44,10 @@ export function truncate(input?: string, max = 10): string {

 export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
    if (!v) {
-        return html`<ak-loading-state></ak-loading-state>`;
+        return html`<ak-empty-state
+            ?loading="${true}"
+            header=${gettext("Loading")}>
+        </ak-empty-state>`;
    }
    return actual;
 }
--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@ -11,8 +11,8 @@
        "serve": "docusaurus serve"
    },
    "dependencies": {
-        "@docusaurus/core": "2.0.0-alpha.71",
-        "@docusaurus/preset-classic": "2.0.0-alpha.71",
+        "@docusaurus/core": "2.0.0-alpha.72",
+        "@docusaurus/preset-classic": "2.0.0-alpha.72",
        "@mdx-js/react": "^1.6.22",
        "clsx": "^1.1.1",
        "postcss": "^8.2.8",