diff --git a/content/2-templating/4-event-click/svelte5/Counter.svelte b/content/2-templating/4-event-click/svelte5/Counter.svelte
index 1a6eb50a..e0108645 100644
--- a/content/2-templating/4-event-click/svelte5/Counter.svelte
+++ b/content/2-templating/4-event-click/svelte5/Counter.svelte
@@ -7,4 +7,4 @@
 </script>
 
 <p>Counter: {count}</p>
-<button on:click={incrementCount}>+1</button>
+<button onclick={incrementCount}>+1</button>
diff --git a/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte b/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
index 97630c66..4c788b16 100644
--- a/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
+++ b/content/4-component-composition/2-emit-to-parent/svelte5/AnswerButton.svelte
@@ -1,17 +1,7 @@
 <script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  function clickYes() {
-    dispatch("yes");
-  }
-
-  function clickNo() {
-    dispatch("no");
-  }
+  let { onYes, onNo } = $props()
 </script>
 
-<button on:click={clickYes}> YES </button>
+<button onclick={onYes}> YES </button>
 
-<button on:click={clickNo}> NO </button>
+<button onclick={onNo}> NO </button>
diff --git a/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte b/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
index a5350593..98c9079c 100644
--- a/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
+++ b/content/4-component-composition/2-emit-to-parent/svelte5/App.svelte
@@ -13,5 +13,5 @@
 </script>
 
 <p>Are you happy?</p>
-<AnswerButton on:yes={onAnswerYes} on:no={onAnswerNo} />
+<AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
 <p style="font-size: 50px;">{isHappy ? "😀" : "😥"}</p>
diff --git a/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte b/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
index 5f6a3c2d..a2dfb480 100644
--- a/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
+++ b/content/4-component-composition/3-slot/svelte5/FunnyButton.svelte
@@ -1,5 +1,9 @@
+<script>
+  let { children } = $props();
+</script>
+
 <button
   style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;"
 >
-  <slot />
+  {@render children()}
 </button>
diff --git a/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte b/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
index 6a5cbd30..cc69aaac 100644
--- a/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
+++ b/content/4-component-composition/4-slot-fallback/svelte5/FunnyButton.svelte
@@ -1,7 +1,13 @@
+<script>
+  let { children } = $props();
+</script>
+
 <button
   style="background: rgba(0, 0, 0, 0.4); color: #fff; padding: 10px 20px; font-size: 30px; border: 2px solid #fff; margin: 8px; transform: scale(0.9); box-shadow: 4px 4px rgba(0, 0, 0, 0.4); transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; outline: 0;"
 >
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <span>No content found</span>
-  </slot>
+  {/if}
 </button>
diff --git a/content/7-webapp-features/1-render-app/svelte5/app.js b/content/7-webapp-features/1-render-app/svelte5/app.js
index 5332616b..3b238b99 100644
--- a/content/7-webapp-features/1-render-app/svelte5/app.js
+++ b/content/7-webapp-features/1-render-app/svelte5/app.js
@@ -1,6 +1,7 @@
+import { mount } from "svelte"
 import App from "./App.svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById("app"),
 });