diff --git a/src/initializer.tsx b/src/initializer.tsx
index 1af05740..65183b0d 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -36,7 +36,6 @@ class DependencyLoadStates {
   // olm: LoadState = LoadState.None;
   config: LoadState = LoadState.None;
   sentry: LoadState = LoadState.None;
-  i18n: LoadState = LoadState.None;
 
   allDepsAreLoaded() {
     return !Object.values(this).some((s) => s !== LoadState.Loaded);
@@ -45,6 +44,96 @@ class DependencyLoadStates {
 
 export class Initializer {
   private static internalInstance: Initializer;
+  public static initBeforeReact() {
+    // this maybe also needs to return a promise in the future,
+    // if we have to do async inits before showing the loading screen
+    // but this should be avioded if possible
+
+    //i18n
+    const languageDetector = new LanguageDetector();
+    languageDetector.addDetector({
+      name: "urlFragment",
+      // Look for a language code in the URL's fragment
+      lookup: () => getUrlParams().lang ?? undefined,
+    });
+
+    i18n
+      .use(Backend)
+      .use(languageDetector)
+      .use(initReactI18next)
+      .init({
+        fallbackLng: "en-GB",
+        defaultNS: "app",
+        keySeparator: false,
+        nsSeparator: false,
+        pluralSeparator: "|",
+        contextSeparator: "|",
+        interpolation: {
+          escapeValue: false, // React has built-in XSS protections
+        },
+        detection: {
+          // No localStorage detectors or caching here, since we don't have any way
+          // of letting the user manually select a language
+          order: ["urlFragment", "navigator"],
+          caches: [],
+        },
+      });
+
+    // Custom Themeing
+    if (import.meta.env.VITE_CUSTOM_THEME) {
+      const style = document.documentElement.style;
+      style.setProperty(
+        "--accent",
+        import.meta.env.VITE_THEME_ACCENT as string
+      );
+      style.setProperty(
+        "--accent-20",
+        import.meta.env.VITE_THEME_ACCENT_20 as string
+      );
+      style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
+      style.setProperty(
+        "--alert-20",
+        import.meta.env.VITE_THEME_ALERT_20 as string
+      );
+      style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
+      style.setProperty(
+        "--primary-content",
+        import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
+      );
+      style.setProperty(
+        "--secondary-content",
+        import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
+      );
+      style.setProperty(
+        "--tertiary-content",
+        import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
+      );
+      style.setProperty(
+        "--tertiary-content-20",
+        import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
+      );
+      style.setProperty(
+        "--quaternary-content",
+        import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
+      );
+      style.setProperty(
+        "--quinary-content",
+        import.meta.env.VITE_THEME_QUINARY_CONTENT as string
+      );
+      style.setProperty(
+        "--system",
+        import.meta.env.VITE_THEME_SYSTEM as string
+      );
+      style.setProperty(
+        "--background",
+        import.meta.env.VITE_THEME_BACKGROUND as string
+      );
+      style.setProperty(
+        "--background-85",
+        import.meta.env.VITE_THEME_BACKGROUND_85 as string
+      );
+    }
+  }
 
   public static init(): Promise<void> | null {
     if (Initializer?.internalInstance?.initPromise) {
@@ -104,39 +193,6 @@ export class Initializer {
       this.loadStates.sentry = LoadState.Loaded;
     }
 
-    //i18n
-    if (this.loadStates.i18n === LoadState.None) {
-      const languageDetector = new LanguageDetector();
-      languageDetector.addDetector({
-        name: "urlFragment",
-        // Look for a language code in the URL's fragment
-        lookup: () => getUrlParams().lang ?? undefined,
-      });
-
-      i18n
-        .use(Backend)
-        .use(languageDetector)
-        .use(initReactI18next)
-        .init({
-          fallbackLng: "en-GB",
-          defaultNS: "app",
-          keySeparator: false,
-          nsSeparator: false,
-          pluralSeparator: "|",
-          contextSeparator: "|",
-          interpolation: {
-            escapeValue: false, // React has built-in XSS protections
-          },
-          detection: {
-            // No localStorage detectors or caching here, since we don't have any way
-            // of letting the user manually select a language
-            order: ["urlFragment", "navigator"],
-            caches: [],
-          },
-        });
-      this.loadStates.i18n = LoadState.Loaded;
-    }
-
     if (this.loadStates.allDepsAreLoaded()) {
       // resolve if there is no dependency that is not loaded
       resolve();
diff --git a/src/main.tsx b/src/main.tsx
index bf4ab5f1..793021e8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -27,6 +27,7 @@ import { createBrowserHistory } from "history";
 import "./index.css";
 import App from "./App";
 import { init as initRageshake } from "./settings/rageshake";
+import { Initializer } from "./initializer";
 
 initRageshake();
 
@@ -51,53 +52,7 @@ if (fatalError !== null) {
   throw fatalError; // Stop the app early
 }
 
-if (import.meta.env.VITE_CUSTOM_THEME) {
-  const style = document.documentElement.style;
-  style.setProperty("--accent", import.meta.env.VITE_THEME_ACCENT as string);
-  style.setProperty(
-    "--accent-20",
-    import.meta.env.VITE_THEME_ACCENT_20 as string
-  );
-  style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
-  style.setProperty(
-    "--alert-20",
-    import.meta.env.VITE_THEME_ALERT_20 as string
-  );
-  style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
-  style.setProperty(
-    "--primary-content",
-    import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
-  );
-  style.setProperty(
-    "--secondary-content",
-    import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
-  );
-  style.setProperty(
-    "--tertiary-content",
-    import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
-  );
-  style.setProperty(
-    "--tertiary-content-20",
-    import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
-  );
-  style.setProperty(
-    "--quaternary-content",
-    import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
-  );
-  style.setProperty(
-    "--quinary-content",
-    import.meta.env.VITE_THEME_QUINARY_CONTENT as string
-  );
-  style.setProperty("--system", import.meta.env.VITE_THEME_SYSTEM as string);
-  style.setProperty(
-    "--background",
-    import.meta.env.VITE_THEME_BACKGROUND as string
-  );
-  style.setProperty(
-    "--background-85",
-    import.meta.env.VITE_THEME_BACKGROUND_85 as string
-  );
-}
+Initializer.initBeforeReact();
 
 const history = createBrowserHistory();