diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts
index 70eb796ed..67c9c8438 100644
--- a/UI/i18n/Translation.ts
+++ b/UI/i18n/Translation.ts
@@ -217,7 +217,7 @@ export class Translation extends BaseUIElement {
                 continue
             }
             let txt = this.translations[lng]
-            txt = txt.replace(/\..*/, "")
+            txt = txt.replace(/[.<].*/, "")
             txt = Utils.EllipsesAfter(txt, 255)
             tr[lng] = txt
         }
diff --git a/index.ts b/index.ts
index bd6cabc39..5fd61e9ac 100644
--- a/index.ts
+++ b/index.ts
@@ -1,52 +1,18 @@
-import { FixedUiElement } from "./UI/Base/FixedUiElement"
-import Combine from "./UI/Base/Combine"
 import { Utils } from "./Utils"
-import AllThemesGui from "./UI/AllThemesGui"
 import DetermineLayout from "./Logic/DetermineLayout"
-import LayoutConfig from "./Models/ThemeConfig/LayoutConfig"
-import ShowOverlayLayerImplementation from "./UI/ShowDataLayer/ShowOverlayLayerImplementation"
-import { DefaultGuiState } from "./UI/DefaultGuiState"
+import ThemeViewState from "./Models/ThemeViewState"
+import SvelteUIElement from "./UI/Base/SvelteUIElement"
+import ThemeViewGUI from "./UI/ThemeViewGUI.svelte"
 
-ShowOverlayLayerImplementation.Implement()
 // Miscelleanous
 Utils.DisableLongPresses()
 
-class Init {
-    public static Init(layoutToUse: LayoutConfig) {
-        if (layoutToUse === null) {
-            // Something went wrong, error message is already on screen
-            return
-        }
-
-        if (layoutToUse === undefined) {
-            // No layout found
-            new AllThemesGui().setup()
-            return
-        }
-
-        const guiState = new DefaultGuiState()
-        DefaultGuiState.state = guiState
-    }
-}
-
-document.getElementById("decoration-desktop").remove()
-new Combine([
-    "Initializing... <br/>",
-    new FixedUiElement(
-        "<a>If this message persist, something went wrong - click here to try again</a>"
-    )
-        .SetClass("link-underline small")
-        .onClick(() => {
-            localStorage.clear()
-            window.location.reload()
-        }),
-]).AttachTo("centermessage") // Add an initialization and reset button if something goes wrong
-
 // @ts-ignore
 DetermineLayout.GetLayout()
-    .then((value) => {
-        console.log("Got ", value)
-        Init.Init(value)
+    .then((layout) => {
+        const state = new ThemeViewState(layout)
+        const main = new SvelteUIElement(ThemeViewGUI, { state })
+        main.AttachTo("maindiv")
     })
     .catch((err) => {
         console.error("Error while initializing: ", err, err.stack)
diff --git a/index_theme.ts.template b/index_theme.ts.template
index 711ce5727..e03f781de 100644
--- a/index_theme.ts.template
+++ b/index_theme.ts.template
@@ -1,71 +1,13 @@
-import {FixedUiElement} from "./UI/Base/FixedUiElement";
-import {QueryParameters} from "./Logic/Web/QueryParameters";
-import Combine from "./UI/Base/Combine";
-import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
-import MinimapImplementation from "./UI/Base/MinimapImplementation";
-import {Utils} from "./Utils";
+import { Utils } from "./Utils"
+import ThemeViewState from "./Models/ThemeViewState"
+import SvelteUIElement from "./UI/Base/SvelteUIElement"
+import ThemeViewGUI from "./UI/ThemeViewGUI.svelte"
 import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
-import DefaultGUI from "./UI/DefaultGUI";
-import State from "./State";
-import AvailableBaseLayersImplementation from "./Logic/Actors/AvailableBaseLayersImplementation";
-import ShowOverlayLayerImplementation from "./UI/ShowDataLayer/ShowOverlayLayerImplementation";
-import {DefaultGuiState} from "./UI/DefaultGuiState";
-import DashboardGui from "./UI/DashboardGui";
 
-
-document.getElementById("decoration-desktop").remove();
-new Combine(["Initializing... <br/>",
-    new FixedUiElement("<a>If this message persist, something went wrong - click here to try again</a>")
-        .SetClass("link-underline small")
-        .onClick(() => {
-            localStorage.clear();
-            window.location.reload(true);
-
-        })])
-    .AttachTo("centermessage"); // Add an initialization and reset button if something goes wrong
-
-
-
-// Workaround for a stupid crash: inject some functions which would give stupid circular dependencies or crash the other nodejs scripts running from console
-MinimapImplementation.initialize()
-AvailableBaseLayers.implement(new AvailableBaseLayersImplementation())
-ShowOverlayLayerImplementation.Implement();
 // Miscelleanous
 Utils.DisableLongPresses()
-if(new URLSearchParams(window.location.search).get("test") === "true"){
-    console.log(themeConfig)
-}
-const layoutToUse = new LayoutConfig(themeConfig)
 
-
-// Workaround/legacy to keep the old paramters working as I renamed some of them
-if (layoutToUse?.id === "cyclofix") {
-    const legacy = QueryParameters.GetQueryParameter("layer-bike_shops", "true", "Legacy - keep De Fietsambassade working");
-    const correct = QueryParameters.GetQueryParameter("layer-bike_shop", "true", "Legacy - keep De Fietsambassade working")
-    if (legacy.data !== "true") {
-        correct.setData(legacy.data)
-    }
-    console.log("layer-bike_shop toggles: legacy:", legacy.data, "new:", correct.data)
-
-    const legacyCafe = QueryParameters.GetQueryParameter("layer-bike_cafes", "true", "Legacy - keep De Fietsambassade working")
-    const correctCafe = QueryParameters.GetQueryParameter("layer-bike_cafe", "true", "Legacy - keep De Fietsambassade working")
-    if (legacyCafe.data !== "true") {
-        correctCafe.setData(legacy.data)
-    }
-}
-
-
-
-const guiState = new DefaultGuiState()
-State.state = new State(layoutToUse);
-DefaultGuiState.state = guiState;
-// This 'leaks' the global state via the window object, useful for debugging
-// @ts-ignore
-window.mapcomplete_state = State.state;
-
-const mode = QueryParameters.GetQueryParameter("mode", "map", "The mode the application starts in, e.g. 'map' or 'dashboard'")
-if(mode.data === "dashboard"){
-    new DashboardGui(State.state, guiState).setup()
-}else{
-    new DefaultGUI(State.state, guiState).setup()
-}
+const state = new ThemeViewState(new LayoutConfig(<any> layout))
+const main = new SvelteUIElement(ThemeViewGUI, { state })
+main.AttachTo("maindiv")
+        
diff --git a/scripts/generateLayouts.ts b/scripts/generateLayouts.ts
index 69533b7d7..c1e78bc28 100644
--- a/scripts/generateLayouts.ts
+++ b/scripts/generateLayouts.ts
@@ -29,7 +29,7 @@ async function createIcon(iconPath: string, size: number, alreadyWritten: string
         return newname
     }
     alreadyWritten.push(newname)
-    if (existsSync(newname)) {
+    if (existsSync(targetpath)) {
         return newname
     }
 
@@ -187,6 +187,17 @@ async function createManifest(
     }
 }
 
+function asLangSpan(t: Translation, tag = "span"): string {
+    const values: string[] = []
+    for (const lang in t.translations) {
+        if (lang === "_context") {
+            continue
+        }
+        values.push(`<${tag} lang='${lang}'>${t.translations[lang]}</${tag}>`)
+    }
+    return values.join("\n")
+}
+
 async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alreadyWritten) {
     Locale.language.setData(layout.language[0])
     const targetLanguage = layout.language[0]
@@ -258,8 +269,9 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
     ].join("\n")
 
     const loadingText = Translations.t.general.loadingTheme.Subs({ theme: ogTitle })
+
     let output = template
-        .replace("Loading MapComplete, hang on...", loadingText.textFor(targetLanguage))
+        .replace("Loading MapComplete, hang on...", asLangSpan(loadingText, "h1"))
         .replace(
             "Powered by OpenStreetMap",
             Translations.t.general.poweredByOsm.textFor(targetLanguage)
@@ -267,36 +279,19 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
         .replace(/<!-- THEME-SPECIFIC -->.*<!-- THEME-SPECIFIC-END-->/s, themeSpecific)
         .replace(
             /<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s,
-            layout.shortDescription.textFor(targetLanguage)
+            asLangSpan(layout.shortDescription)
         )
         .replace(
             '<script type="module" src="./index.ts"></script>',
             `<script type="module"  src='./index_${layout.id}.ts'></script>`
         )
 
-    try {
-        output = output
-            .replace(
-                /<!-- DECORATION 0 START -->.*<!-- DECORATION 0 END -->/s,
-                `<img src='${icon}' width="100%" height="100%">`
-            )
-            .replace(
-                /<!-- DECORATION 1 START -->.*<!-- DECORATION 1 END -->/s,
-                `<img src='${icon}' width="100%" height="100%">`
-            )
-    } catch (e) {
-        console.warn("Error while applying logo: ", e)
-    }
-
     return output
 }
 
 async function createIndexFor(theme: LayoutConfig) {
     const filename = "index_" + theme.id + ".ts"
-    writeFileSync(
-        filename,
-        `import themeConfig from "./assets/generated/themes/${theme.id}.json"\n`
-    )
+    writeFileSync(filename, `import layout from "./assets/generated/themes/${theme.id}.json"\n`)
     appendFileSync(filename, codeTemplate)
 }
 
diff --git a/theme.html b/theme.html
index 50d3fd9cb..8ef3c47a1 100644
--- a/theme.html
+++ b/theme.html
@@ -39,43 +39,46 @@
 </head>
 <body>
 
-<div id="decoration-desktop" style="position: fixed; left: 1em; bottom: 1em; width:35vh; height:35vh;">
-    <!-- A nice decoration while loading or on errors -->
-    <!-- DECORATION 0 START -->
-    <img src="./assets/svg/add.svg"/>
-    <!-- DECORATION 0 END -->
-</div>
 
-<div class="very-small-screen fixed inset-0 block z-above-controls" id="on-small-screen"></div>
-<div class="fixed inset-0 block z-above-controls hidden hidden-on-very-small-screen md:w-1/3" style="min-width: 28rem" id="fullscreen"></div>
-
-<div class="absolute top-12 sm:top-3 left-3 rounded-3xl z-above-map" id="top-left"></div>
-<div class="absolute top-3 right-2 rounded-3xl z-above-map pl-3 sm:pl-0 w-full sm:w-fit" id="top-right"></div>
-
-<div class="absolute bottom-3 left-3 rounded-3xl z-above-map" id="bottom-left"></div>
-<div class="absolute bottom-3 right-2 rounded-3xl z-above-map" id="bottom-right"></div>
-
-<div class="clutter absolute h-24 left-24 right-24 top-56 text-xl text-center"
-     id="centermessage" style="z-index: 4000">
-    <div style="height: max-content">
-    <div style="margin-top: -3rem">
-        <div class="flex" style="justify-content: center">
-            <img src="./assets/svg/loading.svg" class="animate-spin" style="width: 1.5rem; height: 1.5rem; min-width: 1.5rem;"/>
-            <h1 style="font-weight: bold; font-size: xx-large; margin-bottom: 1rem; padding-left: 1rem">Loading MapComplete, hang on...</h1>
-        </div>
-    <p class="subtle" style="padding-bottom: 1rem">Powered by OpenStreetMap</p>
-    <div style="background: #ffffffaa; padding-bottom: 1rem; border-radius: 0.25rem">
-    <!-- DESCRIPTION START -->
-    MapComplete is an easy to use map viewer and map editor
-    <!-- DESCRIPTION END -->
-    </div>
-    </div>
+<span class="absolute" id="belowmap" style="z-index: -1; visibility: hidden">Below</span>
+<div id="maindiv">
+    <div id="default-main">
+        
+        <span id="default-title">Loading MapComplete, hang on...</span>
+        
+        <!-- DESCRIPTION START -->
+        MapComplete is an easy to use map viewer and map editor
+        <!-- DESCRIPTION END -->
     </div>
 </div>
 
+<script>
 
-<span class="absolute" id="belowmap" style="z-index: -1">Below</span>
-<div id="leafletDiv"></div>
+    let lang  = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2);
+    function filterLangs(maindiv){
+        let foundLangs = 0
+        for(const child of Array.from(maindiv.children)){
+            if(child.attributes.lang?.value === lang){
+                foundLangs ++
+            }
+        }
+        if(foundLangs === 0){
+            lang = "en"
+        }
+        for(const child of Array.from(maindiv.children)){
+            const childLang = child.attributes.lang
+            if(childLang === undefined){
+                continue
+            }
+            if(childLang.value === lang){
+                continue
+            }
+            child.parentElement.removeChild(child)
+        }   
+    }
+    filterLangs( document.getElementById("default-main"))
+    filterLangs( document.getElementById("default-title"))
+</script>
 
 
 <script type="module" src="./index.ts"></script>