diff --git a/src/StylesheetTestGui.ts b/src/StylesheetTestGui.ts
index 6f6fe84c4..de0b9b1d2 100644
--- a/src/StylesheetTestGui.ts
+++ b/src/StylesheetTestGui.ts
@@ -1,4 +1,5 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import StylesheetTestGui from "./UI/StylesheetTestGui.svelte"
 
-new SvelteUIElement(StylesheetTestGui, {}).AttachTo("main")
+new StylesheetTestGui({
+    target: document.getElementById("maindiv")
+})
diff --git a/src/UI/AllThemesGui.svelte b/src/UI/AllThemesGui.svelte
index dfbe08bf2..b14c80e81 100644
--- a/src/UI/AllThemesGui.svelte
+++ b/src/UI/AllThemesGui.svelte
@@ -65,6 +65,7 @@
   }
 </script>
 
+<main>
 <div class="m-4 flex flex-col">
   <LanguagePicker
     clss="self-end max-w-full"
@@ -165,3 +166,4 @@
     v{Constants.vNumber}
   </div>
 </div>
+</main>
diff --git a/src/UI/Leaderboard.svelte b/src/UI/Leaderboard.svelte
index 4b6ffd21e..daf788383 100644
--- a/src/UI/Leaderboard.svelte
+++ b/src/UI/Leaderboard.svelte
@@ -30,7 +30,7 @@
       }
   > = UIEventSource.FromPromise(Utils.downloadJsonCached(source))
 </script>
-
+<main>
 <h1>Contributed images with MapComplete: leaderboard</h1>
 
 {#if $data}
@@ -67,3 +67,4 @@
 <div>
   Logged in as {$loggedInContributor}
 </div>
+</main>
diff --git a/src/UI/NotFound.svelte b/src/UI/NotFound.svelte
index d7e0534cf..ee7e9889b 100644
--- a/src/UI/NotFound.svelte
+++ b/src/UI/NotFound.svelte
@@ -5,6 +5,7 @@
   console.log("???")
 </script>
 
+<main>
 <div class="flex flex-col">
   <Tr t={Translations.t.general["404"]} />
   <BackButton
@@ -18,3 +19,4 @@
     </div>
   </BackButton>
 </div>
+</main>
diff --git a/src/UI/PrivacyGui.svelte b/src/UI/PrivacyGui.svelte
index 1afdef92d..d92ca15c8 100644
--- a/src/UI/PrivacyGui.svelte
+++ b/src/UI/PrivacyGui.svelte
@@ -16,7 +16,7 @@
     userRelatedState: new UserRelatedState(osmConnection)
   }
 </script>
-
+<main>
 <div class="flex h-screen flex-col overflow-hidden px-4">
   <div class="flex justify-between">
     <h2 class="flex items-center">
@@ -33,3 +33,4 @@
     <Tr t={Translations.t.general.backToIndex} />
   </a>
 </div>
+</main>
diff --git a/src/UI/StylesheetTestGui.svelte b/src/UI/StylesheetTestGui.svelte
index 27aa90772..755b0b6c0 100644
--- a/src/UI/StylesheetTestGui.svelte
+++ b/src/UI/StylesheetTestGui.svelte
@@ -6,6 +6,7 @@
   import { UIEventSource } from "../Logic/UIEventSource"
 </script>
 
+<main>
 <div>
   <h1>Stylesheet testing grounds</h1>
 
@@ -167,3 +168,4 @@
     </select>
   </div>
 </div>
+</main>
diff --git a/src/UI/Test.svelte b/src/UI/Test.svelte
index 4475d846c..f94b33a65 100644
--- a/src/UI/Test.svelte
+++ b/src/UI/Test.svelte
@@ -1,16 +1,8 @@
 <script lang="ts">
-  import { Translation } from "./i18n/Translation"
-  import LanguagePicker from "./InputElement/LanguagePicker.svelte"
-  import Tr from "./Base/Tr.svelte"
-  import ToSvelte from "./Base/ToSvelte.svelte"
-
-  const m = new Map<string, string>()
-  m.set("nl", "Nederlands")
-  const tr = Translation.fromMap(m, true)
+  import { Button, Search } from "flowbite-svelte"
 </script>
 
-<LanguagePicker/>
-<h1>Svelte native</h1>
-<Tr t={tr}/>
-<h1>ToSvelte</h1>
-<ToSvelte construct={tr}/>
+<main>
+<Search size="md">
+</Search>
+</main>
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 48220206b..41d4a5984 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -203,6 +203,7 @@
 
 </script>
 
+<main>
 <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
   <MaplibreMap map={maplibremap} mapProperties={mapproperties} />
 </div>
@@ -688,3 +689,4 @@
 <CloseAnimation isOpened={selectedElement.map(sl => sl !== undefined && sl?.properties?.id === LastClickFeatureSource.newPointElementId)} moveTo={openNewElementButton} debug="newElement"/>
 <CloseAnimation isOpened={state.guistate.filtersPanelIsOpened} moveTo={openFilterButton} debug="filter"/>
 <CloseAnimation isOpened={state.guistate.backgroundLayerSelectionIsOpened} moveTo={openBackgroundButton} debug="bg"/>
+</main>
diff --git a/src/all_themes_index.ts b/src/all_themes_index.ts
index 864457e3c..6cc03b2c6 100644
--- a/src/all_themes_index.ts
+++ b/src/all_themes_index.ts
@@ -28,4 +28,6 @@ if (layout !== "") {
     )
 }
 
-new SvelteUIElement(AllThemesGui, {}).AttachTo("main")
+new AllThemesGui({
+    target: document.getElementById("main")
+})
diff --git a/src/index.ts b/src/index.ts
index 10e28cc55..1cebb856f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -52,8 +52,10 @@ async function main() {
         ])
         console.log("The available layers on server are", Array.from(availableLayers))
         const state = new ThemeViewState(layout, availableLayers)
-        const main = new SvelteUIElement(ThemeViewGUI, { state })
-        main.AttachTo("maindiv")
+        new ThemeViewGUI({
+            target: document.getElementById("maindiv"),
+            props: {state}
+        })
         Array.from(document.getElementsByClassName("delete-on-load")).forEach((el) => {
             el.parentElement.removeChild(el)
         })
diff --git a/src/index_theme.ts.template b/src/index_theme.ts.template
index 6092f8453..048a54e12 100644
--- a/src/index_theme.ts.template
+++ b/src/index_theme.ts.template
@@ -1,5 +1,4 @@
 import ThemeViewState from "./src/Models/ThemeViewState"
-import SvelteUIElement from "./src/UI/Base/SvelteUIElement"
 import ThemeViewGUI from "./src/UI/ThemeViewGUI.svelte"
 import LayoutConfig from "./src/Models/ThemeConfig/LayoutConfig";
 import MetaTagging from "./src/Logic/MetaTagging";
@@ -47,8 +46,10 @@ async function main() {
         MetaTagging.setThemeMetatagging(new ThemeMetaTagging())
         // LAYOUT.ADD_LAYERS
         const state = new ThemeViewState(new LayoutConfig(<any> layout), availableLayers)
-        const main = new SvelteUIElement(ThemeViewGUI, { state })
-        main.AttachTo("maindiv")
+        new ThemeViewGUI({
+            target: document.getElementById("maindiv"),
+            props: {state}
+        })
         Array.from(document.getElementsByClassName("delete-on-load")).forEach(el => {
                     el.parentElement.removeChild(el)
                 })
diff --git a/src/leaderboard.ts b/src/leaderboard.ts
index 3a15cf261..1d974d77e 100644
--- a/src/leaderboard.ts
+++ b/src/leaderboard.ts
@@ -1,4 +1,5 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import Leaderboard from "./UI/Leaderboard.svelte"
 
-new SvelteUIElement(Leaderboard, {}).AttachTo("main")
+new Leaderboard({
+    target: document.getElementById("main")
+})
diff --git a/src/notfound.ts b/src/notfound.ts
index da596ea9d..1cb23811e 100644
--- a/src/notfound.ts
+++ b/src/notfound.ts
@@ -1,4 +1,5 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import NotFound from "./UI/NotFound.svelte"
 
-new SvelteUIElement(NotFound, {}).AttachTo("maindiv")
+new NotFound({
+    target: document.getElementById("maindiv")
+})
diff --git a/src/privacy_index.ts b/src/privacy_index.ts
index c8da1465e..68587dfc4 100644
--- a/src/privacy_index.ts
+++ b/src/privacy_index.ts
@@ -1,3 +1,4 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import PrivacyGui from "./UI/PrivacyGui.svelte"
-new SvelteUIElement(PrivacyGui, {}).AttachTo("main")
+new PrivacyGui({
+    target: document.getElementById("main")
+})
diff --git a/src/test.ts b/src/test.ts
index 52729071c..248e34073 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,4 +1,6 @@
 import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import Test from "./UI/Test.svelte"
 
-new SvelteUIElement(Test).AttachTo("maindiv")
+new Test({
+    target: document.getElementById("maindiv")
+})