diff --git a/cookbook/templates/shopping_list.html b/cookbook/templates/shopping_list.html
index 855dc27fd..f4c4e24f2 100644
--- a/cookbook/templates/shopping_list.html
+++ b/cookbook/templates/shopping_list.html
@@ -27,41 +27,46 @@
         </div>
     </div>
 
+    <template v-if="shopping_list !== undefined">
 
-    <div v-if="edit_mode">
-        <div class="row">
-            <div class="col col-md-6">
-                <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
-                       placeholder="{% trans 'Search Recipe' %}">
-                <ul class="list-group" style="margin-top: 8px">
-                    <li class="list-group-item" v-for="x in recipes">[[x.name]]
-                        <button @click="addRecipeToList(x)"><i class="fa fa-plus"></i></button>
-                    </li>
-                </ul>
+
+        <div v-if="edit_mode">
+            <div class="row">
+                <div class="col col-md-6">
+                    <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
+                           placeholder="{% trans 'Search Recipe' %}">
+                    <ul class="list-group" style="margin-top: 8px">
+                        <li class="list-group-item" v-for="x in recipes">[[x.name]]
+                            <button @click="addRecipeToList(x)"><i class="fa fa-plus"></i></button>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="col col-md-6">
+                    <ul class="list-group" style="margin-top: 8px">
+                        <li class="list-group-item" v-for="x in shopping_list.recipes">[[x.recipe.name]] <input
+                                type="number" v-model="x.multiplier" @change="updateMultiplier(x.id)">
+                        </li>
+                    </ul>
+                </div>
             </div>
 
-            <div class="col col-md-6">
-                <ul class="list-group" style="margin-top: 8px" v-if="shopping_list !== undefined">
-                    <li class="list-group-item" v-for="x in shopping_list.recipes">[[x.recipe.name]] <input
-                            type="number" v-model="x.multiplier">
-                    </li>
-                </ul>
+            <div class="row" style="margin-top: 8px">
+                <div class="col col-12">
+                    <table class="table table-sm table-striped">
+                        <tr v-for="x in shopping_list.entries">
+                            <td>[[x.amount]]</td>
+                            <td>[[x.unit.name]]</td>
+                            <td>[[x.food.name]]</td>
+                        </tr>
+                    </table>
+                </div>
             </div>
         </div>
-        <div class="row">
-            <div class="col col-12">
-                <table>
-                    <tr v-for="x in shopping_list.entries">
-                        <td>[[x]]</td>
-                    </tr>
-                </table>
-            </div>
+        <div v-else>
+            Non Edit
         </div>
-    </div>
-    <div v-else>
-        Non Edit
-    </div>
-
+    </template>
 
 
 {% endblock %}
@@ -139,23 +144,44 @@
                 },
                 addRecipeToList: function (recipe) {
                     console.log(this.shopping_list)
-                    this.shopping_list.recipes.push({
+
+                    let slr = {
+                        "id": Math.random() * 1000,
                         "recipe": recipe,
                         "multiplier": 1
-                    })
+                    }
+                    this.shopping_list.recipes.push(slr)
 
                     for (let s of recipe.steps) {
                         for (let i of s.ingredients) {
-                            this.shopping_list.entries.push({
-                                'list_recipe': recipe.id,
-                                'food': i.food,
-                                'unit': i.unit,
-                                'amount': i.amount,
-                                'order': 0
-                            })
+
+                            if (!i.is_header) {
+                                this.shopping_list.entries.push({
+                                    'list_recipe': slr.id,
+                                    'food': i.food,
+                                    'unit': ((i.unit !== undefined) ? i.unit : {'name': ''}),
+                                    'amount': i.amount,
+                                    'order': 0
+                                })
+                            }
                         }
                     }
                 },
+                updateMultiplier: function(slr_id) {
+                    console.log('searching', slr_id)
+                    let slr = undefined
+                    for (let r of this.shopping_list.recipes){
+                        console.log(r, r.id)
+                        if (r.id === slr_id) {
+                            console.log('FOUND')
+                            slr = r
+                        }
+                    }
+
+                    for (let e of this.shopping_list.entries){
+                        e.amount = (e.amount * slr.multiplier)
+                    }
+                },
                 searchKeywords: function (query) {
                     this.keywords_loading = true
                     this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {