diff --git a/Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml b/Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml
index 0c8a725..aa05493 100644
--- a/Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml
+++ b/Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml
@@ -5,114 +5,38 @@
 	{
 		<div class="instruction-item" id="instruction-@Model.Instructions[i].Id">
 			<div class="instruction-controls">
-				<input type="file" />
-				<textarea placeholder="Beschreibung" class="form-control">@Model.Instructions[i].Description</textarea>
-				<button type="button" class="btn-delete" onclick="removeInstruction('@Model.Instructions[i].Id')">🗑️</button>
+				@if (Model.Instructions[i].MediaFiles != null && Model.Instructions[i].MediaFiles.Any())
+				{
+					var mediaFile = Model.Instructions[i].MediaFiles.First();
+					if (mediaFile.Data != null)
+					{
+						<div class="instruction-media">
+							<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)"
+								 alt="Instruction Media" class="instruction-media-preview" />
+						</div>
+					}
+				}
+				<input type="file" name="InstructionViewModel.Instructions[@i].MediaFile" class="instruction-file" />
+				<textarea name="InstructionViewModel.Instructions[@i].Description" placeholder="Beschreibung" class="form-control">@Model.Instructions[i].Description</textarea>
+
+				<button type="button" class="btn-delete" onclick="removeInstruction('@Model.Instructions[i].Id', '@Model.RecipeId',)">🗑️</button>
 			</div>
 			<div class="instruction-actions">
-				<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model.Instructions[i].Id')">⬆️</button>
-				<button type="button" class="btn-move-down" onclick="moveInstructionDown('@Model.Instructions[i].Id')">⬇️</button>
+				<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model.Instructions[i].Id', '@Model.RecipeId')">⬆️</button>
+				<button type="button" class="btn-move-down" onclick="moveInstructionDown('@Model.Instructions[i].Id', '@Model.RecipeId')">⬇️</button>
 			</div>
 		</div>
 	}
 </div>
 
+
+
+
 <button type="button" class="btn-add" onclick="addInstruction()">Schritte hinzufügen</button>
 
 
 @section Scripts {
 	<script>
-		htmx.on('htmx:afterSwap', (event) => {
-			if (event.target.id === 'instructions-container') {
-				console.log('Instructions reloaded.');
-			}
-		});
-
-		const recipeId = '@Model.RecipeId';
-	
-
-		async function moveInstructionUp(instructionId) {
-			try {
-				const response = await fetch(`/Recipe/${recipeId}/Instruction/${instructionId}/move-up`, {
-					method: 'POST',
-					headers: {
-						'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
-					}
-				});
-
-				if (response.ok) {
-					htmx.ajax('GET', `/Recipe/${recipeId}/Instructions`, '#instructions-container');
-				} else {
-					const error = await response.json();
-					alert(error.Error || 'Failed to move instruction up.');
-				}
-			} catch (error) {
-				console.error('Error moving instruction up:', error);
-			}
-		}
-
-		async function moveInstructionDown(instructionId) {
-			try {
-				const response = await fetch(`/Recipe/${recipeId}/Instruction/${instructionId}/move-down`, {
-					method: 'POST',
-					headers: {
-						'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
-					}
-				});
-
-				if (response.ok) {
-					htmx.ajax('GET', `/Recipe/${recipeId}/Instructions`, '#instructions-container');
-				} else {
-					const error = await response.json();
-					alert(error.Error || 'Failed to move instruction down.');
-				}
-			} catch (error) {
-				console.error('Error moving instruction down:', error);
-			}
-		}
-
-		async function removeInstruction(instructionId) {
-			if (!confirm('Möchtest du diesen Schritt wirklich löschen?')) return;
-
-			try {
-				const response = await fetch(`/${recipeId}/RemoveInstruction/${instructionId}`, {
-					method: 'POST',
-					headers: {
-						'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
-					}
-				});
-
-				if (response.ok) {
-					const element = document.getElementById(`instruction-${instructionId}`);
-					if (element) {
-						element.remove();
-					}
-				} else {
-					const error = await response.json();
-					alert(error.Error || 'Fehler beim Löschen der Anweisung.');
-				}
-			} catch (error) {
-				console.error('Fehler beim Löschen:', error);
-			}
-		}
-
-
-		function addInstruction() {
-			const container = document.getElementById('instructions-container');
-			const newInstructionHtml = `
-				<div class="instruction-item">
-					<div class="instruction-controls">
-						<input type="file" />
-						<textarea placeholder="Beschreibung" class="form-control"></textarea>
-						<button type="button" class="btn-delete" onclick="deleteInstruction()">🗑️</button>
-					</div>
-					<div class="instruction-actions">
-						<button type="button" class="btn-move-up" onclick="moveInstructionUp()">⬆️</button>
-						<button type="button" class="btn-move-down" onclick="moveInstructionDown()">⬇️</button>
-					</div>
-				</div>
-			`;
-			container.insertAdjacentHTML('beforeend', newInstructionHtml);
-		}
+		setRecipeId('@Model.RecipeId');
 	</script>
 }
diff --git a/Francesco.Recipes.World/Views/Shared/_IngredientsPartial.cshtml b/Francesco.Recipes.World/Views/Shared/_IngredientsPartial.cshtml
new file mode 100644
index 0000000..98670c5
--- /dev/null
+++ b/Francesco.Recipes.World/Views/Shared/_IngredientsPartial.cshtml
@@ -0,0 +1,35 @@
+@model Francesco.Recipes.World.Models.IngredientViewModel
+@Html.AntiForgeryToken()
+<div id="ingredients-container">
+	@for (int i = 0; i < Model.Ingredients.Count; i++)
+	{
+		<div class="ingredient-item" id="ingredient-@Model.Ingredients[i].Id">
+			<div class="ingredient-controls">
+				<input type="text" name="IngredientViewModel.Ingredients[@i].Name" value="@Model.Ingredients[i].Name" placeholder="Name" class="form-control" />
+				<input type="number" name="IngredientViewModel.Ingredients[@i].RecipeIngredients[0].Quantity" value="@(Model.Ingredients[i].RecipeIngredients.FirstOrDefault()?.Quantity)" placeholder="Menge" class="form-control" />
+				<select name="IngredientViewModel.Ingredients[@i].RecipeIngredients[0].Unit.Id" class="form-control">
+					@foreach (var unit in Model.Units)
+					{
+						@if (Model.Ingredients[i].RecipeIngredients.FirstOrDefault()?.Unit?.Id == unit.Id)
+						{
+							<option value="@unit.Id" selected>@unit.Name (@unit.Symbol)</option>
+						}
+						else
+						{
+							<option value="@unit.Id">@unit.Name (@unit.Symbol)</option>
+						}
+					}
+				</select>
+				<button type="button" class="btn-delete" onclick="removeIngredient('@Model.Ingredients[i].Id')">🗑️</button>
+			</div>
+		</div>
+	}
+</div>
+
+<button type="button" class="btn-add" onclick="addIngredient()">Zutat hinzufügen</button>
+
+@section Scripts {
+	<script>
+		recipeId = '@Model.RecipeId';
+	</script>
+}