diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index c74988669..434ac6d8c 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -1,15 +1,49 @@
 <template>
   <div id="app" v-if="!loading">
-    <h1>{{ recipe.name }}</h1>
-    <recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
 
-    <img v-bind:src="recipe.image">
+    <div class="row">
+      <div class="col col-md-8">
+        <h3>{{ recipe.name }}</h3>
+        <!--TODO rating -->
+        <!--TODO username -->
+        <!--TODO storage -->
+      </div>
+      <div class="col col-md-4 d-print-none" style="text-align: right">
+        <recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
+      </div>
+    </div>
+
+    <!--TODO keywords -->
+    <span class="badge badge-secondary"><i class="fas fa-user-clock"></i>
+      {{ _('Preparation time ~') }} {{ recipe.working_time }} {{ _('min') }}
+    </span>
+    <span class="badge badge-secondary"><i class="far fa-clock"></i>
+      {{ _('Waiting time ~') }} {{ recipe.waiting_time }} {{ _('min') }}
+    </span>
+
+
+    <div class="row">
+      <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && has_ingredients">
+        <div v-for="s in recipe.steps" v-bind:key="s.id">
+          <div v-for="i in s.ingredients" v-bind:key="i.id">
+            <Ingredient v-bind:ingredient="i"></Ingredient>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
+        <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
+             :alt="_( 'Recipe Image')">
+        <br/>
+        <br/>
+      </div>
+    </div>
 
     <div v-for="s in recipe.steps" v-bind:key="s.id">
       <Step v-bind:step="s" v-bind:servings="servings"></Step>
     </div>
-  </div>
 
+  </div>
 </template>
 
 <script>
@@ -23,6 +57,7 @@ import {apiLoadRecipe} from "@/utils/api";
 import Step from "@/components/Step";
 import RecipeContextMenu from "@/components/RecipeContextMenu";
 import {GettextMixin, ToastMixin} from "@/utils/utils";
+import Ingredient from "@/components/Ingredient";
 
 Vue.use(BootstrapVue)
 
@@ -33,6 +68,7 @@ export default {
     ToastMixin,
   ],
   components: {
+    Ingredient,
     Step,
     RecipeContextMenu,
   },
@@ -41,6 +77,7 @@ export default {
       loading: true,
       recipe_id: window.RECIPE_ID,
       recipe: undefined,
+      has_ingredients: false,
       servings: 1,
     }
   },
@@ -52,6 +89,15 @@ export default {
       apiLoadRecipe(recipe_id).then(recipe => {
         this.recipe = recipe
         this.loading = false
+
+        for (let step of this.recipe.steps) {
+          if (step.ingredients.length > 0) {
+            this.has_ingredients = true
+          }
+          if (step.time !== 0) {
+            this.has_times = true
+          }
+        }
       })
     }
   }
diff --git a/vue/src/components/RecipeContextMenu.vue b/vue/src/components/RecipeContextMenu.vue
index 5d61f63fd..2b3467aaa 100644
--- a/vue/src/components/RecipeContextMenu.vue
+++ b/vue/src/components/RecipeContextMenu.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    {{ resolveDjangoUrl('api:recipe-detail', 5) }}
 
-    <div class="col col-md-4 d-print-none" style="text-align: right">
       <div class="dropdown">
         <a class="btn shadow-none" href="#" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -41,7 +39,7 @@
         </div>
 
 
-      </div>
+
     </div>
 
   </div>
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index bd4d042cf..90f3bb864 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.298e10642301889fe8ed.hot-update.js","publicPath":"http://localhost:8080/recipe_view.298e10642301889fe8ed.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.298e10642301889fe8ed.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  href=\"{% url 'view_export' %}?r={{ recipe.pk }}\": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id=\"{{ val }}\">, use <div :id=\"val\">.\n\n  34 |        </button>\n  35 |  \n  36 |        <a class=\"dropdown-item\" href=\"{% url 'view_export' %}?r={{ recipe.pk }}\" target=\"_blank\"\n     |                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  37 |           rel=\"noopener noreferrer\"><i class=\"fas fa-file-export fa-fw\"></i> {% trans 'Export' %}</a>\n  38 |        {% if recipe.internal %}\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.7d030f252e9720efc1eb.hot-update.js","publicPath":"http://localhost:8080/recipe_view.7d030f252e9720efc1eb.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.7d030f252e9720efc1eb.hot-update.js"}]},"error":"ModuleBuildError","message":"Module build failed (from ./node_modules/eslint-loader/index.js):\nError: ENOENT: no such file or directory, open 'F:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\main.js'"}
\ No newline at end of file