diff --git a/demo/src/main/java/com/example/demo/controller/SiteController.java b/demo/src/main/java/com/example/demo/controller/SiteController.java
index 22fee15..e022d1c 100644
--- a/demo/src/main/java/com/example/demo/controller/SiteController.java
+++ b/demo/src/main/java/com/example/demo/controller/SiteController.java
@@ -35,4 +35,9 @@ public class SiteController {
     public String viewRegisterPage(Model model) {
         return "create-account";
     }
+    
+    @GetMapping("/create")
+    public String viewCreatePage(Model model) {
+        return "create-recipe";
+    }
 }
\ No newline at end of file
diff --git a/demo/src/main/resources/static/css/create-recipe.css b/demo/src/main/resources/static/css/create-recipe.css
new file mode 100644
index 0000000..c954aa6
--- /dev/null
+++ b/demo/src/main/resources/static/css/create-recipe.css
@@ -0,0 +1,434 @@
+:root {
+  --dusty-red: #D43F3F;
+  --dusty-red-hover: #C73636;
+  --dark-yellow: #FFD27F;
+  --pale-yellow: #FFECB3;
+  --peach: #F5A96E;
+  --dark: #850000;
+}
+
+body, html {
+  height: 100%;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  background-color: var(--pale-yellow);
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+}
+
+/* Header Styles */
+.top-header {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dusty-red);
+  color: var(--dark-yellow);
+  padding: 10px 20px;
+  height: 60px;
+ gap: 40px;
+}
+
+.top-header .swirl {
+  height: 40px;
+  width: auto;
+  margin: 0 20px;
+}
+
+.site-name {
+  font-size: 2.5em;
+  font-weight: bold;
+  letter-spacing: 4px;
+  font-family: 'EB Garamond', serif;}
+
+
+/* Main Content */
+.main-content {
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;}
+
+.form-wrap {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1.5rem 1rem;
+}
+
+/* commented out but i was trying to split it
+.form-split {
+  width:100%;
+  display:flex;
+  flex: 1;
+}
+*/
+
+.form-section {
+  background: var(--peach);
+  border-radius: 15px;
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.section-title {
+  font-size: 30px;
+  font-weight: 800;
+  color: var(--dark);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 1rem;
+}
+
+.field {
+  color: var(--dusty-red);
+  margin-bottom: 1rem;
+}
+
+.field:last-child {
+  margin-bottom: 0;
+}
+
+label {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--dark);
+  margin-bottom: 6px;
+}
+
+
+.required {
+  color: var(--dusty-red-hover);
+  margin-left: 3px;
+}
+
+input[type="text"],
+textarea,
+select {
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 16px;
+  padding: 0 10px;
+  height: 36px;
+  border: 1px;
+  border-radius: 6px;
+  outline: none;
+  font-family: inherit;
+  color: var(--dusty-red);
+  background: var(--pale-yellow);
+}
+
+input[type="text"]:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--dusty-red);
+}
+
+textarea {
+  height: auto;
+  min-height: 80px;
+  padding: 8px 10px;
+  resize: vertical;
+}
+
+::placeholder {
+  color: var(--dusty-red);
+  opacity: 1;
+}
+
+.dynamic-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.dynamic-row input,
+.dynamic-row textarea {
+  flex: 1;
+}
+
+.dynamic-row textarea {
+  min-height: 30px;
+  resize: vertical;
+}
+
+.step-bubble {
+  width: 26px;
+  height: 26px;
+  min-width: 26px;
+  background: transparent;
+  color: var(--dusty-red);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 700;
+  align-self: flex-start;
+  margin-top: 8px;
+}
+
+.btn-remove {
+  background: var(--dusty-red);
+  border: 1px;
+  border-radius: 6px;
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--dark-yellow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  margin-top: 4px;
+}
+
+.btn-remove:hover {
+  background: var(--dusty-red-hover);
+}
+
+.btn-add {
+  width: 100%;
+  margin-top: 4px;
+  padding: 8px;
+  background: var(--dusty-red);
+  border: 1px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--dark-yellow);
+  cursor: pointer;
+}
+
+.btn-add:hover {
+  background: var(--dusty-red-hover);
+}
+
+/* Image upload */
+.image-drop {
+  border: 1.5px dashed var(--dusty-red);
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  cursor: pointer;
+  background: var(--dark-yellow);
+}
+
+.image-drop:hover {
+  border-color: var(--dark);
+}
+
+.image-drop .upload-icon {
+  font-size: 30px;
+  margin-bottom: 8px;
+}
+
+.image-drop .upload-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--dusty-red);
+  margin: 0 0 4px;
+}
+
+.image-drop .upload-sub {
+  font-size: 16px;
+  color: var(--dark);
+  margin: 0;
+}
+
+.image-preview {
+  display: none;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-preview img {
+  width: 100%;
+  display: block;
+  max-height: 200px;
+  object-fit: cover;
+}
+
+.remove-img {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0,0,0,0.5);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* Two-column row */
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+/* Tags */
+.tag-input-row {
+  display: flex;
+  gap: 6px;
+}
+
+.tag-input-row input {
+  flex: 1;
+}
+
+.tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.tag {
+  font-size: 12px;
+  background: var(--pale-yellow);
+  color: var(--dusty-red);
+  padding: 3px 10px;
+  border-radius: 99px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag .remove-tag {
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.tag .remove-tag:hover {
+  opacity: 1;
+}
+
+/* Actions */
+.actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.btn,
+.btn-create {
+  background: var(--dusty-red);
+  color: var(--dark-yellow);
+  border: none;
+  border-radius: 8px;
+  padding: 0 20px;
+  height: 36px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn:hover,
+.btn-create:hover {
+  background: var(--dusty-red-hover);
+}
+
+.btn-create {
+  width: 50%;
+  font-size: 20px;
+  font-weight: 700;
+  border-radius: 10px;
+  padding: 0 20px;
+  height: 46px;
+}
+  
+/* small screens */
+@media (max-width: 600px) {
+  body {
+    font-size: 20px; 
+  }
+  
+  .form-wrap {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+  }
+  
+  label {
+    font-size: 26px; 
+    margin-bottom: 12px; 
+  }
+
+  input[type="text"],
+  textarea,
+  select {
+    font-size: 20px; 
+    padding: 10px 14px;
+    height: 50px;
+  }
+
+  textarea {
+    height: auto;
+    padding: 12px 14px;
+}
+
+  .field {
+    margin-bottom: 1.5rem; 
+  }
+
+  .form-section {
+    padding: 1.75rem 2rem; 
+    margin-bottom: 1.25rem;
+  }
+
+  .section-title {
+    font-size: 16px;
+    margin-bottom: 1.25rem;
+  }
+
+  .dynamic-row {
+    gap: 12px; 
+    margin-bottom: 12px;
+  }
+
+  .btn-add {
+    padding: 14px;
+    font-size: 18px;
+    margin-top: 8px;
+  }
+  
+  ::placeholder {
+    font-size: 50px;
+  }
+
+  .actions {
+    gap: 12px;
+    margin-top: 1.5rem;
+  }
+  .row {
+    grid-template-columns: 1fr;
+  }
+
+  .btn,
+  .btn-create {
+    height: 44px;
+    font-size: 15px;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+    gap: 10px;
+  }
+
+  .actions button {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/demo/src/main/resources/templates/create-recipe.html b/demo/src/main/resources/templates/create-recipe.html
new file mode 100644
index 0000000..e557bac
--- /dev/null
+++ b/demo/src/main/resources/templates/create-recipe.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Create Thyme Crunch Recipe</title>
+    <link rel="stylesheet" th:href="@{css/create-recipe.css}">
+</head>
+<body>
+
+<header class="top-header">
+    <img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
+    <h1 class="site-name">Thyme Crunch</h1>
+    <img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
+</header>
+
+<div class="form-wrap">
+<div class="form-split">
+
+  <!-- Main Content -->
+  <div class="form-section">
+    <div class="section-title">New Recipe</div>
+
+    <div class="field">
+      <label for="title">Title <span class="required">*</span></label>
+      <input type="text" id="title" placeholder="Your recipe title...">
+    </div>
+
+    <div class="field">
+      <label for="desc">Description <span class="required">*</span></label>
+      <textarea id="desc" rows="3" placeholder="Briefly describe your recipe. Who or where is it from?"></textarea>
+    </div>
+
+    <div class="field">
+  	  <label>Ingredients <span class="required">*</span></label>
+      <div id="ingredients-container"></div>
+      <button class="btn-add" id="add-ingredient-btn">+ Add ingredient</button>
+    </div>
+
+    <div class="field">
+      <label>Instructions <span class="required">*</span></label>
+      <div id="steps-container"></div>
+      <button class="btn-add" id="add-step-btn">+ Add step</button>
+    </div>
+    
+  </div>
+
+  <!-- Cover image / Right -->
+  <div class="form-section">
+    <div class="field">
+      <div class="image-drop" id="drop-zone">
+        <p class="upload-title">Click to upload or drag and drop an image.</p>
+      </div>
+      <div class="image-preview" id="preview">
+        <img id="preview-img" src="" alt="Cover preview">
+        <button class="remove-img" id="remove-img-btn">Remove</button>
+      </div>
+      <input type="file" id="img-input" accept="image/*" style="display: none;">
+    </div>
+    
+    <div class="field">
+      <label for="prep">Preparation Time: <span class="required">*</span></label>
+      <input type="text" id="prep" placeholder="0">
+    </div>
+    
+     <div class="field">
+      <label for="cooking">Cooking Time: <span class="required">*</span></label>
+      <input type="text" id="cooking" placeholder="0">
+    </div>
+    
+    <div class="field">
+      <label for="servings">Servings: <span class="required">*</span></label>
+      <input type="text" id="servings" placeholder="0">
+    </div>
+    
+     <div class="field">
+      <label for="cost">Estimated Cost: <span class="required">*</span></label>
+      <input type="text" id="cost" placeholder="0">
+    </div>
+  </div>
+  </div>
+
+  <!-- Tags -->
+  <div class="form-section">
+    
+    <div class="field">
+      <label>Tags</label>
+      <div class="tag-input-row">
+        <input type="text" id="tag-input" placeholder="Type in a tag and click Add">
+        <button class="btn" id="add-tag-btn">Add</button>
+      </div>
+      <div class="tag-wrap" id="tag-wrap"></div>
+    </div>
+  </div>
+
+  <div class="actions">
+    <button class="btn-create" id="publish-btn">CREATE</button>
+  </div>
+
+</div>
+
+<script>
+
+// ---- Ingredients ----
+const ingredientContainer = document.getElementById('ingredients-container');
+document.getElementById('add-ingredient-btn').addEventListener('click', addIngredient);
+addIngredient(); // start with one
+
+function addIngredient() {
+  const row = document.createElement('div');
+  row.className = 'dynamic-row';
+  row.innerHTML = `
+    <input type="text" placeholder="e.g. 3 tbsp of sugar">
+    <button class="btn-remove" title="Remove">✕</button>`;
+  row.querySelector('.btn-remove').addEventListener('click', () => {
+    row.remove();
+  });
+  ingredientContainer.appendChild(row);
+}
+
+// ---- Steps ----
+const stepsContainer = document.getElementById('steps-container');
+document.getElementById('add-step-btn').addEventListener('click', addStep);
+addStep(); // start with one
+
+function addStep() {
+  const row = document.createElement('div');
+  row.className = 'dynamic-row';
+  row.innerHTML = `
+    <div class="step-bubble">?</div>
+    <textarea placeholder="Describe this step..."></textarea>
+    <button class="btn-remove" title="Remove">✕</button>
+  `;
+  row.querySelector('.btn-remove').addEventListener('click', () => {
+    row.remove();
+    renumberSteps();
+  });
+  stepsContainer.appendChild(row);
+  renumberSteps();
+}
+
+function renumberSteps() {
+  stepsContainer.querySelectorAll('.step-bubble').forEach((bubble, i) => {
+    bubble.textContent = i + 1;
+  });
+}
+
+// ---- Collecting on submit ----
+// Call this wherever you build your POST payload:
+function getIngredients() {
+  return [...ingredientContainer.querySelectorAll('input')]
+    .map((el, i) => ({ order: i + 1, name: el.value.trim() }))
+    .filter(item => item.name);
+}
+
+function getSteps() {
+  return [...stepsContainer.querySelectorAll('textarea')]
+    .map((el, i) => ({ step_number: i + 1, instruction: el.value.trim() }))
+    .filter(item => item.instruction);
+}
+
+// --- Image upload ---
+const dropZone = document.getElementById('drop-zone');
+const imgInput = document.getElementById('img-input');
+
+dropZone.addEventListener('click', () => imgInput.click());
+
+imgInput.addEventListener('change', function () {
+  if (!this.files || !this.files[0]) return;
+  const url = URL.createObjectURL(this.files[0]);
+  document.getElementById('preview-img').src = url;
+  dropZone.style.display = 'none';
+  document.getElementById('preview').style.display = 'block';
+});
+
+document.getElementById('remove-img-btn').addEventListener('click', function () {
+  imgInput.value = '';
+  document.getElementById('preview').style.display = 'none';
+  dropZone.style.display = 'block';
+});
+
+// --- Tags ---
+const tags = [];
+
+document.getElementById('tag-input').addEventListener('keydown', function (e) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    addTag();
+  }
+});
+
+document.getElementById('add-tag-btn').addEventListener('click', addTag);
+
+function addTag() {
+  const input = document.getElementById('tag-input');
+  const val = input.value.trim().toLowerCase().replace(/\s+/g, '-');
+  if (!val || tags.includes(val)) { input.value = ''; return; }
+  tags.push(val);
+  input.value = '';
+  renderTags();
+}
+
+function removeTag(t) {
+  tags.splice(tags.indexOf(t), 1);
+  renderTags();
+}
+
+function renderTags() {
+  document.getElementById('tag-wrap').innerHTML = tags
+    .map(t => `<div class="tag">${t} <span class="remove-tag" data-tag="${t}">✕</span></div>`)
+    .join('');
+
+  document.querySelectorAll('.remove-tag').forEach(btn => {
+    btn.addEventListener('click', () => removeTag(btn.dataset.tag));
+  });
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/src/main/resources/templates/home.html b/demo/src/main/resources/templates/home.html
index 009d2fb..aba8581 100644
--- a/demo/src/main/resources/templates/home.html
+++ b/demo/src/main/resources/templates/home.html
@@ -29,7 +29,7 @@
                 </li>
             </ul>
         </nav>
-        <a href="#" target="_blank" class="create_icon">
+        <a th:href="@{/create}" target="_blank" class="create_icon">
             <img th:src="@{images/create_icon.png}" alt="Description of the icon">
         </a>
     </div>