diff --git a/src/UI/Studio/Region.svelte b/src/UI/Studio/Region.svelte
index d572773f3..7b63ebed5 100644
--- a/src/UI/Studio/Region.svelte
+++ b/src/UI/Studio/Region.svelte
@@ -6,6 +6,7 @@
   import type { ConfigMeta } from "./configMeta"
   import EditLayerState from "./EditLayerState"
   import SchemaBasedInput from "./SchemaBasedInput.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
   export let state: EditLayerState
   export let configs: ConfigMeta[]
@@ -25,15 +26,15 @@
 {:else if configs.length === 0}
   Bug: Region received empty list as configuration at {path.join(".")}
 {:else if title}
-  <div class="flex w-full flex-col">
-    <h3>{title}</h3>
-    <div class="flex w-full flex-col gap-y-1 border border-black pl-2">
-      <slot name="description" />
-      {#each configsFiltered as config}
-        <SchemaBasedInput {state} path={config.path} schema={config} />
-      {/each}
-    </div>
-  </div>
+  <AccordionSingle>
+      <div slot="header">{title}</div>
+      <div class="flex w-full flex-col gap-y-1 border border-black pl-2">
+        <slot name="description" />
+        {#each configsFiltered as config}
+          <SchemaBasedInput {state} path={config.path} schema={config} />
+        {/each}
+      </div>
+  </AccordionSingle>
 {:else}
   <div class="flex w-full flex-col gap-y-1 pl-2">
     {#each configsFiltered as config}
diff --git a/src/UI/Studio/SchemaBasedArray.svelte b/src/UI/Studio/SchemaBasedArray.svelte
index 3957a1c16..c344fa491 100644
--- a/src/UI/Studio/SchemaBasedArray.svelte
+++ b/src/UI/Studio/SchemaBasedArray.svelte
@@ -9,6 +9,7 @@
   import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte"
   import ShowConversionMessage from "./ShowConversionMessage.svelte"
   import Markdown from "../Base/Markdown.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
 
   export let state: EditLayerState
   export let schema: ConfigMeta
@@ -125,20 +126,24 @@
     {/each}
   {:else}
     {#each $currentValue as value, i}
-      {#if !isTagRenderingBlock}
-        <div class="flex items-center justify-between">
-          <h3 class="m-0">{singular} {i}</h3>
-          <button
-            class="h-fit w-fit rounded-full border border-black p-1"
-            on:click={() => {
-              del(i)
-            }}
-          >
-            <TrashIcon class="h-4 w-4" />
-          </button>
-        </div>
-      {/if}
-      <div class="border border-black">
+      <AccordionSingle>
+        <span slot="header">
+          {#if !isTagRenderingBlock}
+            <div class="flex items-center justify-between">
+              <h3 class="m-0">{singular} {i}</h3>
+              <button
+                class="h-fit w-fit rounded-full border border-black p-1"
+                on:click={() => {
+                  del(i)
+                }}
+              >
+                <TrashIcon class="h-4 w-4" />
+              </button>
+            </div>
+          {/if}
+        </span>
+        <div class="normal-background p-2">
+
         {#if isTagRenderingBlock}
           <QuestionPreview {state} path={fusePath(i, [])} {schema}>
             <button
@@ -191,7 +196,10 @@
             <SchemaBasedInput {state} path={fusePath(i, [subpart.path.at(-1)])} schema={subpart} />
           {/each}
         {/if}
-      </div>
+
+        </div>
+      </AccordionSingle>
+
     {/each}
   {/if}
   <div class="flex">
diff --git a/src/UI/StudioGui.ts b/src/UI/StudioGui.ts
index 016df2339..e0b5f9f6d 100644
--- a/src/UI/StudioGui.ts
+++ b/src/UI/StudioGui.ts
@@ -3,7 +3,11 @@ import StudioGUI from "./StudioGUI.svelte"
 
 export default class StudioGui {
     public setup() {
-        new SvelteUIElement(StudioGUI, {}).SetClass("h-full").AttachTo("main")
+        new StudioGUI(
+            {
+                target: document.getElementById("main")
+            }
+        )
     }
 }
 
diff --git a/studio.html b/studio.html
index 0dd374be1..c1fe27b64 100644
--- a/studio.html
+++ b/studio.html
@@ -18,7 +18,7 @@
 
 </head>
 <body>
-<div id="main" class="h-full">Loading studio...</div>
+<div id="main" class="h-full"></div>
 <script src="./src/UI/StudioGui.ts" type="module"></script>
 <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="https://gc.zgo.at/count.js" crossorigin="anonymous" integrity="sha384-QfJMxHNngbaF6IXH2kBwubsLYh7GVSFmJOX1O1YKJBq+zv1VVypB9BysTzyG1D1U"></script>
 
