diff --git a/src/components/AddAccountId.svelte b/src/components/AddAccountId.svelte
index c9df06d..e7380a0 100644
--- a/src/components/AddAccountId.svelte
+++ b/src/components/AddAccountId.svelte
@@ -46,12 +46,13 @@
   }
 </script>
 
-<Modal id="add-account-id" {isOpen} close={onCancel}>
-  <span slot="title">
-    Add an Account Id to MSA (<span class="font-light">{$user.msaId}</span>)
-  </span>
-
-  <div slot="body">
+<Modal
+  id="add-account-id"
+  {isOpen}
+  close={onCancel}
+  title="Add an Account Id to MSA (<span class='font-light'>{$user.msaId}</span>)"
+>
+  <div>
     <form class="column">
       <DropDownMenu
         id="AddAccountId"
diff --git a/src/components/ConnectProvider.svelte b/src/components/ConnectProvider.svelte
index 660ff19..a624cc6 100644
--- a/src/components/ConnectProvider.svelte
+++ b/src/components/ConnectProvider.svelte
@@ -10,7 +10,6 @@
   let { close, isOpen = false }: Props = $props();
 </script>
 
-<Modal id="connect-provider" {close} {isOpen}>
-  <span slot="title">Connect Provider</span>
-  <LoginForm slot="body" onConnect={close} onCancel={close} />
+<Modal id="connect-provider" {close} {isOpen} title="Connect Provider">
+  <LoginForm onConnect={close} onCancel={close} />
 </Modal>
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
index 510cb0a..38f9c4b 100644
--- a/src/components/DropDownMenu.svelte
+++ b/src/components/DropDownMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends { toString: () => string }">
-  interface Props {
+  interface Props<T> {
     label: string;
     id: string;
     options: T[];
@@ -19,12 +19,12 @@
     onChange = undefined,
     formatter = (value) => value.toString(),
     disabled = false,
-  }: Props = $props();
+  }: Props<T> = $props();
 </script>
 
 <div>
   <label class="label mb-3.5 block" for={id}>{label}</label>
-  <select {...$$restProps} {id} bind:value on:change={onChange} data-test-id={id} {disabled}>
+  <select {id} {value} onchange={onChange} data-test-id={id} {disabled}>
     {#if placeholder !== ''}
       <option class="text-disabled" value={null} disabled selected>{placeholder}</option>
     {/if}
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 1d9ef3b..378abfc 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
   interface Props {
+    title: string;
     id: string;
     close: () => void;
     isOpen: boolean;
+    children: Snippet;
   }
 
-  let { id, close, isOpen = false }: Props = $props();
+  let { title, id, close, isOpen = false, children }: Props = $props();
+
+  function handleStopProp(e: Event) {
+    e.stopPropagation();
+  }
 </script>
 
 {#if isOpen}
@@ -19,13 +27,13 @@
   >
     <div
       class="content-block flex w-modal cursor-default flex-col gap-7"
-      on:click|stopPropagation={() => {}}
-      on:keyup|stopPropagation={() => {}}
+      onclick={handleStopProp}
+      onkeyup={handleStopProp}
       tabindex="0"
       role="button"
     >
-      <h2 class="section-title-underlined"><slot name="title" /></h2>
-      <slot name="body" />
+      <h2 class="section-title-underlined">{title}</h2>
+      {@render children()}
     </div>
   </div>
 {/if}
diff --git a/src/components/Stake.svelte b/src/components/Stake.svelte
index 2bf1895..095f102 100644
--- a/src/components/Stake.svelte
+++ b/src/components/Stake.svelte
@@ -12,10 +12,8 @@
   let { isOpen, close, stakeAmount = 1n }: Props = $props();
 </script>
 
-<Modal id="stake-to-provider" {isOpen} {close}>
-  <span slot="title">Stake to Provider</span>
-
-  <div slot="body">
+<Modal id="stake-to-provider" {isOpen} {close} title="Stake to Provider">
+  <div>
     <StakeForm {close} {stakeAmount} />
 
     <span class="min-w-full border-b border-b-divider"></span>