diff --git a/README.md b/README.md
index 89ff00b..0a44538 100644
--- a/README.md
+++ b/README.md
@@ -19,4 +19,8 @@
     1. after submission the user should get a confirmation, and an order id along with the link to said order page
     2. the form should disappear after submission
     3. there should be a button to go back to creating a new form
+### adding a new cake: 
+1. user selects the _new cake_ button
+2. enters the new details
+3. user selects submit
     
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 6d0b8a6..4e28837 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,6 @@
     <title>IROON</title>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <script src="htmx-2.04.js"></script>
-    <script src="script.js" defer></script>
 </head>
 
 <body>
@@ -43,12 +42,12 @@
                 <script>
                     document.getElementById("reset_button").addEventListener("click", function () {
                         document.getElementById("selected_cakes").innerHTML = "";
-                        document.querySelectorAll("#dropdown option").forEach(option => option.disabled = false);
                     })
                 </script>
             </form>
             <!--A dropdown with all available cakes loaded dynamically-->
-            <div hx-get="cake/options" hx-swap="outerHTML" hx-trigger="load" hx-target="closest div"></div>
+            <div hx-get="cake/options" hx-swap="innerHTML" hx-trigger="load" hx-target="closest div">
+            </div>
             <!--A space to fit the response after submitting the form-->
             <div id="new_order_response"></div>
         </div>
diff --git a/templates/available_cakes.html b/templates/available_cakes.html
index 2ee668a..e431830 100644
--- a/templates/available_cakes.html
+++ b/templates/available_cakes.html
@@ -1,22 +1,24 @@
-<select id="dropdown">
-    <option value="">Select an item...</option>
+<div id="add_cakes_dropdown">
     {{range .Cakes}}
-    <option value="{{.ID}}">{{.Name}}</option>
+    <button onclick="addCake('{{.ID}}', '{{.Name}}')" id=" cake_button[{{.ID}}]">{{.Name}}</button>
     {{end}}
-</select>
+</div>
 <script>
-    document.getElementById("dropdown").addEventListener("change", function () {
-        const selectedOption = this.options[this.selectedIndex]
-        selectedOption.disabled = true;
+    function addCake(id, name) {
+        const existing = document.getElementById("cake[" + id + "]")
+        if (existing != null) {
+            existing.value++
+            return
+        }
 
         const label = document.createElement('label')
-        label.innerText = this.options[this.selectedIndex].text
-        label.setAttribute("for", "cake[" + this.value + "]")
+        label.innerText = name
+        label.setAttribute("for", "cake[" + id + "]")
 
         const input = document.createElement('input')
         input.setAttribute("type", "number")
-        input.setAttribute("id", "cake[" + this.value + "]")
-        input.setAttribute("name", "cake[" + this.value + "]")
+        input.setAttribute("id", "cake[" + id + "]")
+        input.setAttribute("name", "cake[" + id + "]")
         input.setAttribute("value", 1)
 
         const selected = document.createElement('div')
@@ -28,14 +30,11 @@
         deleteButton.innerText = "delete"
         deleteButton.addEventListener("click", function () {
             selected.remove()
-            selectedOption.disabled = false
         })
 
         selected.appendChild(deleteButton)
 
         const parent = document.getElementById("selected_cakes")
         parent.appendChild(selected)
-
-        this.selectedIndex = 0;
-    })
+    }
 </script>
\ No newline at end of file
