diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 381a624e8..e72b3005a 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -81,11 +81,15 @@
             <br/>
             <div class="row">
               <div class="col-md-12">
+                <table class="table table-sm">
                   <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                   <template v-for="s in recipe.steps">
-                      <Ingredients :step="s" :servings="servings" :key="s.id"></Ingredients>
+                    <template v-for="i in s.ingredients">
+                      <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
+                    </template>
                   </template>
                   <!-- eslint-enable vue/no-v-for-template-key-on-child -->
+                </table>
               </div>
             </div>
           </div>
@@ -139,7 +143,7 @@ import {apiLoadRecipe} from "@/utils/api";
 import Step from "@/components/Step";
 import RecipeContextMenu from "@/components/RecipeContextMenu";
 import {GettextMixin, ToastMixin} from "@/utils/utils";
-import Ingredients from "@/components/Ingredients";
+import Ingredient from "@/components/Ingredient";
 
 import PdfViewer from "@/components/PdfViewer";
 import ImageViewer from "@/components/ImageViewer";
@@ -160,7 +164,7 @@ export default {
   components: {
     PdfViewer,
     ImageViewer,
-    Ingredients,
+    Ingredient,
     Step,
     RecipeContextMenu,
     Nutrition,
diff --git a/vue/src/components/IngredientRow.vue b/vue/src/components/Ingredient.vue
similarity index 94%
rename from vue/src/components/IngredientRow.vue
rename to vue/src/components/Ingredient.vue
index a7b2239ad..cdafcbf5f 100644
--- a/vue/src/components/IngredientRow.vue
+++ b/vue/src/components/Ingredient.vue
@@ -3,7 +3,7 @@
       <td>
         <input type="checkbox">
       </td>
-      <td style="text-align: right">
+      <td>
         <span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
       </td>
       <td>
@@ -31,7 +31,7 @@
 import {calculateAmount} from "@/utils/utils";
 
 export default {
-  name: 'IngredientRow',
+  name: 'Ingredient',
   props: {
     ingredient: Object,
     servings: {
diff --git a/vue/src/components/Ingredients.vue b/vue/src/components/Ingredients.vue
deleted file mode 100644
index d9bfe1e9d..000000000
--- a/vue/src/components/Ingredients.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-
-  <table class="table table-sm">
-    <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-    <template v-for="i in step.ingredients">
-      <IngredientRow v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></IngredientRow>
-    </template>
-    <!-- eslint-enable vue/no-v-for-template-key-on-child -->
-  </table>
-
-
-</template>
-
-<script>
-
-import IngredientRow from "@/components/IngredientRow";
-
-export default {
-  name: 'Ingredient',
-  components: {
-    IngredientRow,
-  },
-  props: {
-    step: Object,
-    servings: {
-      type: Number,
-      default: 1,
-    }
-  },
-}
-</script>
diff --git a/vue/src/components/Step.vue b/vue/src/components/Step.vue
index 23382edc5..66b5bc7b2 100644
--- a/vue/src/components/Step.vue
+++ b/vue/src/components/Step.vue
@@ -31,7 +31,13 @@
       <b-collapse id="collapse-1" v-model="details_visible">
         <div class="row">
           <div class="col col-md-4" v-if="step.ingredients.length > 0 && recipe.steps.length > 1">
-            <Ingredients :step="step" :servings="servings"></Ingredients>
+            <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"></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>
@@ -108,12 +114,12 @@
 
 import {calculateAmount} from "@/utils/utils";
 
+import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
 
 import CompileComponent from "@/components/CompileComponent";
 import Vue from "vue";
 import moment from "moment";
-import Ingredients from "@/components/Ingredients";
 
 Vue.prototype.moment = moment
 
@@ -123,7 +129,7 @@ export default {
     GettextMixin,
   ],
   components: {
-    Ingredients,
+    Ingredient,
     CompileComponent,
   },
   props: {
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 1df9b2067..40ac4d359 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.e0742691919ff3fcce04.hot-update.js","publicPath":"http://localhost:8080/recipe_view.e0742691919ff3fcce04.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.e0742691919ff3fcce04.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n  Errors compiling template:\n\n  text \"Test\" outside root element will be ignored.\n\n  7  |    </template>\n  8  |    <!-- eslint-enable vue/no-v-for-template-key-on-child -->\n  9  |  </table>\n     |          \n  10 |  Test\n     |  ^^^^\n  11 |  \n     |  \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.fab07d3cd83db7e32016.hot-update.js","publicPath":"http://localhost:8080/recipe_view.fab07d3cd83db7e32016.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.fab07d3cd83db7e32016.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Step.vue\n  79:9  error  '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead  vue/no-deprecated-v-bind-sync\n\n✖ 1 problem (1 error, 0 warnings)\n  1 error and 0 warnings potentially fixable with the `--fix` option.\n"}
\ No newline at end of file