diff --git a/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx b/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
index e8bb9e2..f230cb4 100644
--- a/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
+++ b/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
@@ -169,14 +169,16 @@ export class DyneSlangroomEditor {
                 <Section title={EditorId.CONTRACT}>
                   <dyne-code-editor
                     name={EditorId.CONTRACT}
-                    config={{ doc: this.contract, extensions: this.keyboardExtension }}
+                    content={this.contract}
+                    config={{ extensions: this.keyboardExtension }}
                   ></dyne-code-editor>
                 </Section>
 
                 <Section title={EditorId.DATA}>
                   <dyne-code-editor
                     name={EditorId.DATA}
-                    config={{ doc: this.data, extensions: [this.keyboardExtension, json()] }}
+                    content={this.data}
+                    config={{ extensions: [this.keyboardExtension, json()] }}
                   ></dyne-code-editor>
                 </Section>
 
@@ -184,7 +186,8 @@ export class DyneSlangroomEditor {
                   <Section title={EditorId.KEYS}>
                     <dyne-code-editor
                       name={EditorId.KEYS}
-                      config={{ doc: this.keys, extensions: [this.keyboardExtension, json()] }}
+                      content={this.keys}
+                      config={{ extensions: [this.keyboardExtension, json()] }}
                     ></dyne-code-editor>
                   </Section>
                 )}
diff --git a/src/components/dyne-slangroom-preset-loader/dyne-slangroom-preset-loader.tsx b/src/components/dyne-slangroom-preset-loader/dyne-slangroom-preset-loader.tsx
index d7793c9..9c22028 100644
--- a/src/components/dyne-slangroom-preset-loader/dyne-slangroom-preset-loader.tsx
+++ b/src/components/dyne-slangroom-preset-loader/dyne-slangroom-preset-loader.tsx
@@ -104,7 +104,7 @@ export class DyneSlangroomPresetLoader {
         <dyne-button size="small" emphasis="m" onClick={() => this.dialog?.showModal()}>
           Select preset
         </dyne-button>
-        <dialog class="backdrop:bg-black backdrop:opacity-75 h-screen m-0">
+        <dialog class="backdrop:bg-black backdrop:opacity-75 h-screen m-0 bg-white">
           <div class="sticky top-0 bg-white">
             <div class="flex gap-4 justify-between items-center p-4 border-b ">
               <p>Select a Slangroom preset</p>