diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html
index ae41d82ea..4c47e0476 100644
--- a/authentik/core/templates/base/skeleton.html
+++ b/authentik/core/templates/base/skeleton.html
@@ -14,6 +14,7 @@
         <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
         <script src="{% url 'authentik_api:javascript-catalog' %}?v={{ ak_version }}"></script>
+        <script src="{% static 'dist/adoptedStyleSheets.js' %}?v={{ ak_version }}" type="module"></script>
         {% block head %}
         {% endblock %}
     </head>
diff --git a/web/rollup.config.js b/web/rollup.config.js
index 84045077d..98034e240 100644
--- a/web/rollup.config.js
+++ b/web/rollup.config.js
@@ -25,10 +25,6 @@ const resources = [
 const isProdBuild = process.env.NODE_ENV === "production";
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function manualChunks(id) {
-    if (id.includes("construct-style-sheets-polyfill")) {
-        // Keep polyfills in the main file so they are loaded when dependencies are loaded
-        return "vendor-poly";
-    }
     if (id.includes("node_modules")) {
         if (id.includes("codemirror")) {
             return "vendor-cm";
@@ -63,6 +59,33 @@ export default [
             clearScreen: false,
         },
     },
+    // Polyfills (imported first)
+    {
+        input: [
+            "construct-style-sheets-polyfill"
+        ],
+        output: [
+            {
+                format: "es",
+                dir: "dist",
+                sourcemap: true,
+            }
+        ],
+        plugins: [
+            cssimport(),
+            typescript(),
+            externalGlobals({
+                django: "django",
+            }),
+            resolve({ browser: true }),
+            commonjs(),
+            sourcemaps(),
+            isProdBuild && terser(),
+        ].filter(p => p),
+        watch: {
+            clearScreen: false,
+        },
+    },
     // Main Application
     {
         input: "./src/interfaces/AdminInterface.ts",
diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts
index 0418c459e..d28345034 100644
--- a/web/src/interfaces/AdminInterface.ts
+++ b/web/src/interfaces/AdminInterface.ts
@@ -1,5 +1,3 @@
-import "construct-style-sheets-polyfill";
-
 // Elements that are used by SiteShell pages
 // And can't dynamically be imported
 import "../elements/CodeMirror";
diff --git a/web/src/interfaces/admin/index.html b/web/src/interfaces/admin/index.html
index dcaad682b..37e6199e4 100644
--- a/web/src/interfaces/admin/index.html
+++ b/web/src/interfaces/admin/index.html
@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
         <script src="/api/jsi18n/"></script>
+        <script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
         <script src="/static/dist/AdminInterface.js" type="module"></script>
         <title>authentik</title>
     </head>
diff --git a/web/src/interfaces/flow/index.html b/web/src/interfaces/flow/index.html
index ceec0869c..395b8867b 100644
--- a/web/src/interfaces/flow/index.html
+++ b/web/src/interfaces/flow/index.html
@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
         <script src="/api/jsi18n/"></script>
+        <script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
         <script src="/static/dist/FlowInterface.js" type="module"></script>
         <title>authentik</title>
     </head>