diff --git a/index.html b/index.html
index 7f698b258..fb92252c5 100644
--- a/index.html
+++ b/index.html
@@ -11,13 +11,7 @@
     <link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
     <!-- putting styles here to avoid having to wait for styles to load up -->
     <link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
-    <link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="theme-preview-holder" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="component-style-holder" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="editor-overall-holder" type="text/css" href="/static/empty.css" />
-    <link rel="stylesheet" id="old-editor-overall-holder" type="text/css" href="/static/empty.css" />
+    <link rel="stylesheet" id="custom-styles-holder" type="text/css" href="/static/empty.css" />
     <!--server-generated-meta-->
   </head>
   <body>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3d85db3aa..5b696185a 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -8,34 +8,45 @@ import localforage from 'localforage'
 // Otherwise it will return an array
 const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
 
+const stylesheets = {}
+
 const createStyleSheet = (id) => {
-  if (supportsAdoptedStyleSheets) {
-    return {
-      el: null,
-      sheet: new CSSStyleSheet(),
-      rules: []
+  const newStyleSheet = {
+    rules: [],
+    ready: false,
+    addRule (rule) {
+      this.rules.push(
+        rule
+          .replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
+          .replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
+      )
     }
   }
 
-  const el = document.getElementById(id)
-  // Clear all rules in it
-  for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
-    el.sheet.deleteRule(i)
-  }
-
-  return {
-    el,
-    sheet: el.sheet,
-    rules: []
-  }
+  stylesheets[id] = newStyleSheet
+  return newStyleSheet
 }
 
-const EAGER_STYLE_ID = 'pleroma-eager-styles'
-const LAZY_STYLE_ID = 'pleroma-lazy-styles'
 
-const adoptStyleSheets = (styles) => {
+export const adoptStyleSheets = () => {
   if (supportsAdoptedStyleSheets) {
-    document.adoptedStyleSheets = styles.map(s => s.sheet)
+    document.adoptedStyleSheets = Object
+      .values(stylesheets)
+      .filter(x => x.ready)
+      .map(x => {
+        const css = new CSSStyleSheet()
+        x.rules.forEach(r => css.insertRule(r, css.cssRules.length))
+        return css
+      })
+  } else {
+    const holder = document.getElementById('custom-styles-holder')
+
+    Object
+      .values(stylesheets)
+      .forEach(sheet => {
+        sheet.rules.forEach(r => holder.sheet.insertRule(r))
+      })
+
   }
   // Some older browsers do not support document.adoptedStyleSheets.
   // In this case, we use the <style> elements.
@@ -43,6 +54,10 @@ const adoptStyleSheets = (styles) => {
   // is nothing to do here.
 }
 
+
+const EAGER_STYLE_ID = 'pleroma-eager-styles'
+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+
 export const generateTheme = (inputRuleset, callbacks, debug) => {
   const {
     onNewRule = () => {},
@@ -97,10 +112,13 @@ export const tryLoadCache = async () => {
       const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
       const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-      cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
-      cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
+      cache.data[0].forEach(rule => eagerStyles.addRule(rule, 'index-max'))
+      cache.data[1].forEach(rule => lazyStyles.addRule(rule, 'index-max'))
 
-      adoptStyleSheets([eagerStyles, lazyStyles])
+      eagerStyles.ready = true
+      lazyStyles.ready = true
+
+      adoptStyleSheets()
 
       console.info(`Loaded theme from cache`)
       return true
@@ -123,54 +141,26 @@ export const applyTheme = (
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-  const insertRule = (styles, rule) => {
-    try {
-      // Try to use modern syntax first
-      try {
-        styles.sheet.insertRule(rule, 'index-max')
-        styles.rules.push(rule)
-      } catch {
-        // Fallback for older browsers that don't support 'index-max'
-        styles.sheet.insertRule(rule, styles.sheet.cssRules.length)
-        styles.rules.push(rule)
-      }
-    } catch (e) {
-      console.warn('Can\'t insert rule due to lack of support', e, rule)
-
-      // Try to sanitize the rule for better compatibility
-      try {
-        // Remove any potentially problematic CSS features
-        let sanitizedRule = rule
-          .replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
-          .replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
-
-        if (sanitizedRule !== rule) {
-          styles.sheet.insertRule(sanitizedRule, styles.sheet.cssRules.length)
-          styles.rules.push(sanitizedRule)
-        }
-      } catch (e2) {
-        console.error('Failed to insert even sanitized rule', e2)
-      }
-    }
-  }
 
   const { lazyProcessFunc } = generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
         if (isLazy) {
-          insertRule(lazyStyles, rule)
+          lazyStyles.addRule(rule)
         } else {
-          insertRule(eagerStyles, rule)
+          eagerStyles.addRule(rule)
         }
       },
       onEagerFinished () {
-        adoptStyleSheets([eagerStyles])
+        eagerStyles.ready = true
+        adoptStyleSheets()
         onEagerFinish()
         console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
       },
       onLazyFinished () {
-        adoptStyleSheets([eagerStyles, lazyStyles])
+        eagerStyles.ready = true
+        adoptStyleSheets()
         const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
         localforage.setItem('pleromafe-theme-cache', cache)
@@ -239,17 +229,18 @@ export const applyConfig = (input) => {
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  const styleEl = document.getElementById('theme-holder')
-  const styleSheet = styleEl.sheet
+  const styleSheet = createStyleSheet('theme-holder')
 
-  styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
+  styleSheet.addRule(`:root { ${rules} }`, 'index-max')
 
   // TODO find a way to make this not apply to theme previews
   if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
-    styleSheet.insertRule(` *:not(.preview-block) {
+    styleSheet.addRule(` *:not(.preview-block) {
         --roundness: var(--forcedRoundness) !important;
     }`, 'index-max')
   }
+  styleSheet.ready = true
+  adoptStyleSheets()
 }
 
 export const getResourcesIndex = async (url, parser = JSON.parse) => {
