diff --git a/cookbook/helper/template_helper.py b/cookbook/helper/template_helper.py
index 8190f3a4d..f709dccc8 100644
--- a/cookbook/helper/template_helper.py
+++ b/cookbook/helper/template_helper.py
@@ -16,7 +16,7 @@ class IngredientObject(object):
         if ingredient.no_amount:
             self.amount = ""
         else:
-            self.amount = f"<scalable-number v-bind:number='{bleach.clean(str(ingredient.amount))}' v-bind:factor='servings'></scalable-number>"
+            self.amount = f"<scalable-number v-bind:number='{bleach.clean(str(ingredient.amount))}' v-bind:factor='ingredient_factor'></scalable-number>"
         if ingredient.unit:
             self.unit = bleach.clean(str(ingredient.unit))
         else:
diff --git a/cookbook/templates/recipe_view.html b/cookbook/templates/recipe_view.html
index 61308c50f..8b0c738ef 100644
--- a/cookbook/templates/recipe_view.html
+++ b/cookbook/templates/recipe_view.html
@@ -64,6 +64,7 @@
 
     <script type="application/javascript">
         window.RECIPE_ID = {{recipe.pk}};
+        window.USER_SERVINGS = {{ user_servings }};
         window.USER_PREF = {
             'use_fractions': {% if request.user.userpreference.use_fractions %} true {% else %} false {% endif %},
             'ingredient_decimals': {{ request.user.userpreference.ingredient_decimals }},
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 901e8817f..e326eb65d 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -87,7 +87,7 @@
                     <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                     <template v-for="s in recipe.steps">
                       <template v-for="i in s.ingredients">
-                        <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"
+                        <Ingredient :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
                                     @checked-state-changed="updateIngredientCheckedState"></Ingredient>
                       </template>
                     </template>
@@ -110,7 +110,7 @@
 
           <div class="row" style="margin-top: 2vh">
             <div class="col-12">
-              <Nutrition :recipe="recipe" :servings="servings"></Nutrition>
+              <Nutrition :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition>
             </div>
           </div>
         </div>
@@ -127,7 +127,7 @@
       </div>
 
       <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-        <Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
+        <Step :recipe="recipe" :step="s" :ingredient_factor="ingredient_factor" :index="index" :start_time="start_time"
               @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
       </div>
     </div>
@@ -175,6 +175,11 @@ export default {
     Keywords,
     LoadingSpinner,
   },
+  computed: {
+    ingredient_factor: function () {
+      return this.servings / this.recipe.servings
+    },
+  },
   data() {
     return {
       loading: true,
@@ -192,6 +197,11 @@ export default {
     loadRecipe: function (recipe_id) {
       apiLoadRecipe(recipe_id).then(recipe => {
 
+        if (window.USER_SERVINGS !== 0) {
+          recipe.servings = window.USER_SERVINGS
+        }
+        this.servings = recipe.servings
+
         let total_time = 0
         for (let step of recipe.steps) {
           this.ingredient_count += step.ingredients.length
diff --git a/vue/src/components/CompileComponent.vue b/vue/src/components/CompileComponent.vue
index 6dbac1b8a..af09786c4 100644
--- a/vue/src/components/CompileComponent.vue
+++ b/vue/src/components/CompileComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <component :is="compiled" :servings="servings" :code="code"></component>
+    <component :is="compiled" :ingredient_factor="ingredient_factor" :code="code"></component>
   </div>
 </template>
 
@@ -18,7 +18,7 @@ obviously only run trusted code this way ...
 
 export default {
   name: 'CompileComponent',
-  props: ['code', 'servings'],
+  props: ['code', 'ingredient_factor'],
   data() {
     return {
       compiled: null,
@@ -26,7 +26,7 @@ export default {
   },
   mounted() {
     this.compiled = Vue.component('compiled-component', {
-      props: ['servings', 'code'],
+      props: ['ingredient_factor', 'code'],
       components: {
         ScalableNumber, // eslint-disable-line
       },
diff --git a/vue/src/components/Ingredient.vue b/vue/src/components/Ingredient.vue
index 735126ae8..a367f615c 100644
--- a/vue/src/components/Ingredient.vue
+++ b/vue/src/components/Ingredient.vue
@@ -35,7 +35,7 @@ export default {
   name: 'Ingredient',
   props: {
     ingredient: Object,
-    servings: {
+    ingredient_factor: {
       type: Number,
       default: 1,
     }
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     calculateAmount: function (x) {
-      return calculateAmount(x, this.servings)
+      return calculateAmount(x, this.ingredient_factor)
     }
   }
 }
diff --git a/vue/src/components/Nutrition.vue b/vue/src/components/Nutrition.vue
index 2a6ec4db5..b2607c40b 100644
--- a/vue/src/components/Nutrition.vue
+++ b/vue/src/components/Nutrition.vue
@@ -65,11 +65,11 @@ export default {
   ],
   props: {
     recipe: Object,
-    servings: Number,
+    ingredient_factor: Number,
   },
   methods: {
     calculateAmount: function (x) {
-      return calculateAmount(x, this.servings)
+      return calculateAmount(x, this.ingredient_factor)
     }
   }
 }
diff --git a/vue/src/components/Step.vue b/vue/src/components/Step.vue
index 4255fe1f5..9cb5a836b 100644
--- a/vue/src/components/Step.vue
+++ b/vue/src/components/Step.vue
@@ -34,13 +34,13 @@
             <table class="table table-sm">
               <!-- eslint-disable vue/no-v-for-template-key-on-child -->
               <template v-for="i in step.ingredients">
-                <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
+                <Ingredient v-bind:ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
               </template>
               <!-- eslint-enable vue/no-v-for-template-key-on-child -->
             </table>
           </div>
           <div class="col" :class="{ 'col-md-8':  recipe.steps.length > 1, 'col-md-12':  recipe.steps.length <= 1,}">
-            <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
+            <compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
           </div>
         </div>
       </b-collapse>
@@ -71,7 +71,7 @@
       <b-collapse id="collapse-1" v-model="details_visible">
         <div class="row" v-if="step.instruction !== ''">
           <div class="col col-md-12" style="text-align: center">
-            <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
+            <compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
           </div>
         </div>
       </b-collapse>
@@ -134,7 +134,7 @@ export default {
   },
   props: {
     step: Object,
-    servings: Number,
+    ingredient_factor: Number,
     index: Number,
     recipe: Object,
     start_time: String,
@@ -151,7 +151,7 @@ export default {
   methods: {
     calculateAmount: function (x) {
       // used by the jinja2 template
-      return calculateAmount(x, this.servings)
+      return calculateAmount(x, this.ingredient_factor)
     },
     updateTime: function () {
       this.$emit('update-start-time', moment(this.set_time_input).add(this.time_offset * -1, 'minutes').format('yyyy-MM-DDTHH:mm'))
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 5b35adb19..f7a9699b0 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.cfc8fcd2004c1b08df3e.hot-update.js","publicPath":"http://localhost:8080/recipe_view.cfc8fcd2004c1b08df3e.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.cfc8fcd2004c1b08df3e.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Keywords.vue\n  3:7  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.5c9c79044479f9c9ebe7.hot-update.js","publicPath":"http://localhost:8080/recipe_view.5c9c79044479f9c9ebe7.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.5c9c79044479f9c9ebe7.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Keywords.vue\n  3:7  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file