diff --git a/Logic/InstalledThemes.ts b/Logic/InstalledThemes.ts
new file mode 100644
index 000000000..79d138cef
--- /dev/null
+++ b/Logic/InstalledThemes.ts
@@ -0,0 +1,60 @@
+import LayoutConfig from "../Customizations/JSON/LayoutConfig";
+import {OsmPreferences} from "./Osm/OsmPreferences";
+import {UIEventSource} from "./UIEventSource";
+import {OsmConnection} from "./Osm/OsmConnection";
+
+export default class InstalledThemes {
+    
+    private static DeleteInvalid(osmConnection: OsmConnection, invalidThemes: any[]){
+       // for (const invalid of invalidThemes) {
+       //     console.error("Attempting to remove ", invalid)
+       //     osmConnection.GetLongPreference(
+       //         "installed-theme-" + invalid
+       //     ).setData(null);
+       // }
+    }
+    
+    static InstalledThemes(osmConnection: OsmConnection) : UIEventSource<{ layout: LayoutConfig; definition: string }[]>{
+       return osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => {
+            const installedThemes: { layout: LayoutConfig, definition: string }[] = [];
+            console.log("UPdating the installed themes")
+            console.log("All preferences are ",allPreferences)
+            if (allPreferences === undefined) {
+                console.log("All prefs is undefined");
+                return installedThemes;
+            }
+            const invalidThemes = []
+            for (var allPreferencesKey in allPreferences) {
+                const themename = allPreferencesKey.match(/^mapcomplete-installed-theme-(.*)-combined-length$/);
+                console.log("Preference key match:",themename," for key ",allPreferencesKey);
+                if (themename && themename[1] !== "") {
+                    const customLayout = osmConnection.GetLongPreference("installed-theme-" + themename[1]);
+                    if (customLayout.data === undefined) {
+                        console.log("No data defined for ", themename[1]);
+                        continue;
+                    }
+                    try {
+                        var json = atob(customLayout.data);
+                        console.log(json);
+                        const layout = new LayoutConfig(
+                            JSON.parse(json));
+                        installedThemes.push({
+                            layout: layout,
+                            definition: customLayout.data
+                        });
+                    } catch (e) {
+                        console.warn("Could not parse custom layout from preferences - deleting: ", allPreferencesKey, e, customLayout.data);
+                        invalidThemes.push(themename[1])
+                    }
+                }
+            }
+
+            InstalledThemes.DeleteInvalid(osmConnection, invalidThemes);
+
+            return installedThemes;
+
+        });
+
+    }
+    
+}
\ No newline at end of file
diff --git a/State.ts b/State.ts
index b7cb7ebaf..775cb83d4 100644
--- a/State.ts
+++ b/State.ts
@@ -14,6 +14,7 @@ import {BaseLayer} from "./Logic/BaseLayer";
 import LayoutConfig from "./Customizations/JSON/LayoutConfig";
 import Hash from "./Logic/Web/Hash";
 import {MangroveIdentity} from "./Logic/Web/MangroveReviews";
+import InstalledThemes from "./Logic/InstalledThemes";
 
 /**
  * Contains the global state: a bunch of UI-event sources
@@ -233,47 +234,7 @@ export default class State {
         })
 
 
-        this.installedThemes = this.osmConnection.preferencesHandler.preferences.map<{ layout: LayoutConfig, definition: string }[]>(allPreferences => {
-            const installedThemes: { layout: LayoutConfig, definition: string }[] = [];
-            if (allPreferences === undefined) {
-                return installedThemes;
-            }
-            const invalidThemes = []
-            for (const allPreferencesKey in allPreferences) {
-                const themename = allPreferencesKey.match(/^mapcomplete-installed-theme-(.*)-combined-length$/);
-                if (themename && themename[1] !== "") {
-                    const customLayout = self.osmConnection.GetLongPreference("installed-theme-" + themename[1]);
-                    if (customLayout.data === undefined) {
-                        console.log("No data defined for ", themename[1]);
-                        continue;
-                    }
-                    try {
-                        const json = btoa(customLayout.data);
-                        console.log(json);
-                        const layout = new LayoutConfig(
-                            JSON.parse(json));
-                        installedThemes.push({
-                            layout: layout,
-                            definition: customLayout.data
-                        });
-                    } catch (e) {
-                        console.warn("Could not parse custom layout from preferences - deleting: ", allPreferencesKey, e, customLayout.data);
-                        invalidThemes.push(themename[1])
-                    }
-                }
-            }
-
-            for (const invalid of invalidThemes) {
-                console.error("Attempting to remove ", invalid)
-                this.osmConnection.GetLongPreference(
-                    "installed-theme-" + invalid
-                ).setData(null);
-            }
-
-            return installedThemes;
-
-        });
-
+        this.installedThemes = InstalledThemes.InstalledThemes(this.osmConnection );
 
         // IMportant: the favourite layers are initiliazed _after_ the installed themes, as these might contain an installedTheme
         this.favouriteLayers = this.osmConnection.GetLongPreference("favouriteLayers").map(
diff --git a/UI/MoreScreen.ts b/UI/MoreScreen.ts
index a3f58dc80..ba3ce28d1 100644
--- a/UI/MoreScreen.ts
+++ b/UI/MoreScreen.ts
@@ -100,6 +100,7 @@ export class MoreScreen extends UIElement {
 
 
         const customThemesNames = State.state.installedThemes.data ?? [];
+        
         if (customThemesNames.length > 0) {
             els.push(Translations.t.general.customThemeIntro)