diff --git a/modules/banner/element-web/package.json b/modules/banner/element-web/package.json
index 6b62066422..a513f03e46 100644
--- a/modules/banner/element-web/package.json
+++ b/modules/banner/element-web/package.json
@@ -12,6 +12,7 @@
         "test": "echo no tests yet"
     },
     "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
         "@element-hq/element-web-module-api": "^1.0.0",
         "@types/node": "^22.10.7",
         "@types/react": "^19",
diff --git a/modules/banner/element-web/src/index.tsx b/modules/banner/element-web/src/index.tsx
index f6baa9c896..447fbf4969 100644
--- a/modules/banner/element-web/src/index.tsx
+++ b/modules/banner/element-web/src/index.tsx
@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { ThemeProvider } from "styled-components";
+import compound from "@vector-im/compound-web/dist/style.css" with { type: "css" };
 
 import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
 import Translations from "./translations.json";
@@ -21,6 +22,8 @@ class BannerModule implements Module {
     public constructor(private api: Api) {}
 
     public async load(): Promise<void> {
+        document.adoptedStyleSheets.push(compound);
+
         this.api.i18n.register(Translations);
 
         try {
diff --git a/modules/banner/element-web/src/vite-env.d.ts b/modules/banner/element-web/src/vite-env.d.ts
index ef030aec3d..bfeaf6b7af 100644
--- a/modules/banner/element-web/src/vite-env.d.ts
+++ b/modules/banner/element-web/src/vite-env.d.ts
@@ -6,3 +6,4 @@ Please see LICENSE files in the repository root for full details.
 */
 
 /// <reference types="vite-plugin-svgr/client" />
+/// <reference types="@arcmantle/vite-plugin-import-css-sheet/client" />
diff --git a/modules/banner/element-web/vite.config.ts b/modules/banner/element-web/vite.config.ts
index f57993abbd..d7ae139b11 100644
--- a/modules/banner/element-web/vite.config.ts
+++ b/modules/banner/element-web/vite.config.ts
@@ -12,6 +12,7 @@ import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
 import svgr from "vite-plugin-svgr";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -31,6 +32,7 @@ export default defineConfig({
         },
     },
     plugins: [
+        importCSSSheet(),
         react(),
         svgr(),
         nodePolyfills({
diff --git a/modules/restricted-guests/element-web/package.json b/modules/restricted-guests/element-web/package.json
index 4d48c54ba4..130ade1ec1 100644
--- a/modules/restricted-guests/element-web/package.json
+++ b/modules/restricted-guests/element-web/package.json
@@ -12,6 +12,7 @@
         "test": "echo no tests yet"
     },
     "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
         "@element-hq/element-web-module-api": "^1.0.0",
         "@types/node": "^22.10.7",
         "@types/react": "^19",
diff --git a/modules/restricted-guests/element-web/src/index.tsx b/modules/restricted-guests/element-web/src/index.tsx
index 564945ffe3..a28b5c6c5f 100644
--- a/modules/restricted-guests/element-web/src/index.tsx
+++ b/modules/restricted-guests/element-web/src/index.tsx
@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import compound from "@vector-im/compound-web/dist/style.css" with { type: "css" };
+
 import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
 import Translations from "./translations.json";
 import { ModuleConfig, CONFIG_KEY } from "./config";
@@ -28,6 +30,8 @@ class RestrictedGuestsModule implements Module {
     public constructor(private api: Api) {}
 
     public async load(): Promise<void> {
+        document.adoptedStyleSheets.push(compound);
+
         this.api.i18n.register(Translations);
 
         try {
diff --git a/modules/restricted-guests/element-web/src/vite-env.d.ts b/modules/restricted-guests/element-web/src/vite-env.d.ts
new file mode 100644
index 0000000000..bfeaf6b7af
--- /dev/null
+++ b/modules/restricted-guests/element-web/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="@arcmantle/vite-plugin-import-css-sheet/client" />
diff --git a/modules/restricted-guests/element-web/vite.config.ts b/modules/restricted-guests/element-web/vite.config.ts
index 3663c873e1..24798ac03f 100644
--- a/modules/restricted-guests/element-web/vite.config.ts
+++ b/modules/restricted-guests/element-web/vite.config.ts
@@ -11,6 +11,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import externalGlobals from "rollup-plugin-external-globals";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -30,6 +31,7 @@ export default defineConfig({
         },
     },
     plugins: [
+        importCSSSheet(),
         react(),
         nodePolyfills({
             include: ["events"],