diff --git a/src/SEQTA.ts b/src/SEQTA.ts
index b7350ff6..b2b1561e 100644
--- a/src/SEQTA.ts
+++ b/src/SEQTA.ts
@@ -17,6 +17,7 @@ import coursesicon from './seqta/icons/coursesIcon'
 import { delay } from "./seqta/utils/delay"
 import { enableCurrentTheme } from "./seqta/ui/themes/enableCurrent";
 import iframeCSS from "./css/iframe.scss?raw"
+import injectedCSS from './css/injected.scss?inline'
 import stringToHTML from './seqta/utils/stringToHTML'
 import { updateAllColors } from './seqta/ui/colors/Manager'
 import { SettingsResizer } from "./seqta/ui/SettingsResizer";
@@ -64,7 +65,15 @@ async function init() {
       await initializeSettingsState();
       
       if (settingsState.onoff) {
-        import('./css/injected.scss')
+
+        // TEMP FIX for bug! -> this is a hack to get the injected.css file to have HMR in development mode as this import system is currently broken with crxjs
+        if (import.meta.env.MODE === 'development') {
+          import('./css/injected.scss')
+        } else {
+          const injectedStyle = document.createElement('style')
+          injectedStyle.textContent = injectedCSS
+          document.head.appendChild(injectedStyle)
+        } 
       }
       
       main()
diff --git a/src/css/injected.scss b/src/css/injected.scss
index 6702709a..578fb1af 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -3050,4 +3050,4 @@ li[data-message] {
     transform: translateY(0);
     scale: 1;
   }
-}
+}
\ No newline at end of file