diff --git a/web/src/pages/recipe/[id]/edit.astro b/web/src/pages/recipe/[id]/edit.astro
new file mode 100644
index 0000000..672288b
--- /dev/null
+++ b/web/src/pages/recipe/[id]/edit.astro
@@ -0,0 +1,104 @@
+---
+import Base from "@layout/Base";
+import { authPB } from "@data/pb";
+
+const pb = await authPB()
+const { id } = Astro.params
+
+const rec = await pb.collection('recipes').getOne(id as string)
+
+const templateHeaders = rec.cooklang
+const recipeId = id as string
+---
+
+<script lang="ts" define:vars={{ recipeId }}>
+    document.addEventListener('DOMContentLoaded', () => {
+        document.querySelector('#btn-save').addEventListener('click', async () => {
+            try {
+                const cooklangTextarea = document.querySelector('#cooklang')
+                const cooklangContent = cooklangTextarea.value;
+
+                // Get the file input
+                const photoInput = document.querySelector('#photo')
+                const photoFile = photoInput?.files?.[0];
+
+                // Create FormData for the upload
+                const formData = new FormData();
+                formData.append('cooklang', cooklangContent);
+                
+                if (photoFile) {
+                    formData.append('images', photoFile);
+                }
+
+                // Update the existing recipe using PATCH
+                const response = await fetch(`/api/collections/recipes/records/${recipeId}`, {
+                    method: 'PATCH',
+                    body: formData
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    // Redirect to the recipe page
+                    window.location.href = `/recipe/${result.id}`;
+                } else {
+                    const error = await response.text();
+                    console.error('Update failed:', error);
+                    alert('Failed to update recipe: ' + error);
+                }
+            } catch (error) {
+                console.error('Error updating recipe:', error);
+                alert('Error updating recipe: ' + error);
+            }
+        });
+    });
+</script>
+
+<Base>
+    <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
+        <div class="flex md:flex-1/3 flex-col sticky">
+            
+            <div class="flex mb-2 items-center">
+                <p class="text-[28pt] mr-auto">Edit Recipe</p>
+                <button
+                    id="btn-save"
+                    class="px-3 py-2 bg-white/10 hover:bg-white/20 active:bg-white/30 transition-colors rounded-lg"
+                >
+                    Save
+                </button>
+            </div>
+            
+            <div class="relative">
+                <input 
+                id="photo" 
+                type="file" 
+                accept="image/png,image/jpeg" 
+                class="w-full bg-white/10 rounded-lg h-50
+                                file:mr-4 file:py-2 file:px-4 
+                                file:rounded-lg file:border-0 file:hidden
+                                before:content-['camera'] before:w-full before:h-full before:flex 
+                                before:items-center before:justify-center before:absolute
+                                relative cursor-pointer
+                                [&::-webkit-file-upload-button]:hidden"
+                >
+            </div>
+            
+            
+            
+        </div>
+        
+        <div class="flex mt-4 md:mt-16 md:flex-2/3 w-full flex-col md:ml-3">
+            
+            <!-- Steps -->
+            
+            <div class="bg-[#2a2b2c] rounded-lg mb-2 p-2">
+                <textarea
+                id="cooklang"
+                rows="13"
+                class="block  w-full rounded-lg px-3 py-1 font-mono resize-none"
+                oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'">{templateHeaders}</textarea>
+            </div>
+            
+            <p class="text-sm italic text-white/40">Recipie uses <a class="underline" href="https://cooklang.org">Cooklang.</a> Visit the documentation to learn more.</p>
+        </div>
+    </div>
+</Base>
\ No newline at end of file
diff --git a/web/src/pages/recipe/[id].astro b/web/src/pages/recipe/[id]/index.astro
similarity index 100%
rename from web/src/pages/recipe/[id].astro
rename to web/src/pages/recipe/[id]/index.astro