diff --git a/src/lib/components/CreateStepList.svelte b/src/lib/components/CreateStepList.svelte
index 1a88250..ca089fe 100644
--- a/src/lib/components/CreateStepList.svelte
+++ b/src/lib/components/CreateStepList.svelte
@@ -247,7 +247,8 @@ export function add_new_step(){
 		instructions[list_index].steps.push(new_step.step)
 	}
 	const el = document.querySelector("#step")
-	el.innerHTML = step_placeholder
+	el.innerHTML = ""
+	new_step.step = ""
 	instructions = instructions //tells svelte to update dom
 }
 
diff --git a/src/lib/components/EditRecipeNote.svelte b/src/lib/components/EditRecipeNote.svelte
index a4e55d6..36102cc 100644
--- a/src/lib/components/EditRecipeNote.svelte
+++ b/src/lib/components/EditRecipeNote.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	let { note = $bindable("") } = $props<{ note?: string }>();
 </script>
 <style>
 div{
@@ -14,9 +15,25 @@ div{
 h3{
 	margin-block: 0;
 }
+textarea {
+	width: 100%;
+	min-height: 80px;
+	padding: 0.5em;
+	border-radius: 5px;
+	border: none;
+	color: white;
+	font-size: 1rem;
+	resize: vertical;
+	margin-top: 0.5em;
+	font-family: sans-serif;
+	background-color: transparent;
+}
+textarea::placeholder {
+	color: rgba(255, 255, 255, 0.6);
+}
 </style>
 
 <div>
 	<h3>Notiz:</h3>
-	<slot></slot>
+	<textarea bind:value={note} placeholder="Füge eine Notiz für dieses Rezept hinzu..."></textarea>
 </div>
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index 53522f6..3f0e834 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -4,7 +4,7 @@
 
 <style>
 .toggle-wrapper {
-	display: flex;
+	display: inline-flex;
 }
 
 .toggle-wrapper label {