diff --git a/cookbook/migrations/0159_add_shoppinglistentry_fields.py b/cookbook/migrations/0159_add_shoppinglistentry_fields.py
index 9a1b25f9f..9df880d08 100644
--- a/cookbook/migrations/0159_add_shoppinglistentry_fields.py
+++ b/cookbook/migrations/0159_add_shoppinglistentry_fields.py
@@ -66,6 +66,11 @@ class Migration(migrations.Migration):
             name='mealplan',
             field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='cookbook.mealplan'),
         ),
+        migrations.AddField(
+            model_name='shoppinglistrecipe',
+            name='name',
+            field=models.CharField(blank=True, default='', max_length=32),
+        ),
         migrations.AddField(
             model_name='shoppinglistentry',
             name='ingredient',
diff --git a/vue/package.json b/vue/package.json
index aa7218e46..f0b1f8c29 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -84,5 +84,4 @@
         "@vue/cli-plugin-pwa/workbox-webpack-plugin": "^5.1.3",
         "coa": "2.0.2"
     }
-  }
 }
diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 889eff9e4..5df7945d4 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -258,7 +258,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 import ContextMenu from "@/components/ContextMenu/ContextMenu"
 import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
 import MealPlanCard from "@/components/MealPlanCard"
-import MealPlanEditModal from "@/components/MealPlanEditModal"
+import MealPlanEditModal from "@/components/Modals/MealPlanEditModal"
 import MealPlanCalenderHeader from "@/components/MealPlanCalenderHeader"
 import EmojiInput from "@/components/Modals/EmojiInput"
 
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index ad0f217ff..44596edce 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -25,34 +25,8 @@
             </div>
 
             <div style="text-align: center">
-        <keywords-component :recipe="recipe"></keywords-component>
-      </div>
-
-      <hr/>
-      <div class="row">
-        <div class="col col-md-3">
-          <div class="row d-flex" style="padding-left: 16px">
-            <div class="my-auto" style="padding-right: 4px">
-              <i class="fas fa-user-clock fa-2x text-primary"></i>
+                <keywords-component :recipe="recipe" />
             </div>
-            <div class="my-auto" style="padding-right: 4px">
-              <span class="text-primary"><b>{{ $t('Preparation') }}</b></span><br/>
-              {{ recipe.working_time }} {{ $t('min') }}
-            </div>
-
-            <div class="row text-center">
-                <div class="col col-md-12">
-                    <recipe-rating :recipe="recipe"></recipe-rating>
-                    <last-cooked :recipe="recipe" class="mt-2"></last-cooked>
-                </div>
-            </div>
-
-            <div class="my-auto">
-                <div class="col-12" style="text-align: center">
-                    <i>{{ recipe.description }}</i>
-                </div>
-            </div>
-
 
             <hr />
             <div class="row">
@@ -118,32 +92,38 @@
                         </div>
                     </div>
 
+                    <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
+                        <div class="col-12">
+                            <Nutrition-component :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
+            <template v-if="!recipe.internal">
+                <div v-if="recipe.file_path.includes('.pdf')">
+                    <PdfViewer :recipe="recipe"></PdfViewer>
+                </div>
+                <div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
+                    <ImageViewer :recipe="recipe"></ImageViewer>
+                </div>
+            </template>
 
-          <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
-            <div class="col-12">
-              <Nutrition-component :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition-component>
+            <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
+                <step-component
+                    :recipe="recipe"
+                    :step="s"
+                    :ingredient_factor="ingredient_factor"
+                    :index="index"
+                    :start_time="start_time"
+                    @update-start-time="updateStartTime"
+                    @checked-state-changed="updateIngredientCheckedState"
+                ></step-component>
             </div>
         </div>
 
         <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
 
-        <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'">
-            <div class="col col-md-12">
-                <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a>
-            </div>
-        </div>
-      </template>
-
-
-      <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-        <step-component :recipe="recipe" :step="s" :ingredient_factor="ingredient_factor" :index="index" :start_time="start_time"
-              @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></step-component>
-      </div>
-    </div>
-
-        <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
-
         <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'">
             <div class="col col-md-12">
                 <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a>
@@ -159,7 +139,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css"
 
 import { apiLoadRecipe } from "@/utils/api"
 
-import StepComponent from "@/components/StepComponent";
+import StepComponent from "@/components/StepComponent"
 import RecipeContextMenu from "@/components/ContextMenu/RecipeContextMenu"
 import { ResolveUrlMixin, ToastMixin } from "@/utils/utils"
 
@@ -168,8 +148,8 @@ import ImageViewer from "@/components/ImageViewer"
 import IngredientsCard from "@/components/IngredientsCard"
 
 import moment from "moment"
-import KeywordsComponent from "@/components/KeywordsComponent";
-import NutritionComponent from "@/components/NutritionComponent";
+import KeywordsComponent from "@/components/KeywordsComponent"
+import NutritionComponent from "@/components/NutritionComponent"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import AddRecipeToBook from "@/components/Modals/AddRecipeToBook"
 import RecipeRating from "@/components/RecipeRating"
diff --git a/vue/src/components/IngredientsCard.vue b/vue/src/components/IngredientsCard.vue
index 8dc2c272b..a0ee4fba4 100644
--- a/vue/src/components/IngredientsCard.vue
+++ b/vue/src/components/IngredientsCard.vue
@@ -25,7 +25,7 @@
                         <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                         <template v-for="s in steps">
                             <template v-for="i in s.ingredients">
-                                <ingredient
+                                <ingredient-component
                                     :ingredient="i"
                                     :ingredient_factor="ingredient_factor"
                                     :key="i.id"
@@ -52,14 +52,14 @@ import Vue from "vue"
 import { BootstrapVue } from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
-import Ingredient from "@/components/Ingredient"
+import IngredientComponent from "@/components/IngredientComponent"
 import { ApiMixin, StandardToasts } from "@/utils/utils"
 Vue.use(BootstrapVue)
 
 export default {
     name: "IngredientCard",
     mixins: [ApiMixin],
-    components: { Ingredient },
+    components: { IngredientComponent },
     props: {
         steps: {
             type: Array,
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 6154bcd44..d504e828c 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -7,22 +7,15 @@
                     <recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
                 </a>
             </div>
-            <div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2" v-if="recipe.waiting_time !== 0">
-                <b-badge pill variant="light" class="mt-1 font-weight-normal"><i class="fa fa-clock"></i> {{ recipe.working_time }} {{ $t("min") }} </b-badge>
-                <b-badge pill variant="secondary" class="mt-1 font-weight-normal"><i class="fa fa-pause"></i> {{ recipe.waiting_time }} {{ $t("min") }} </b-badge>
+            <div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2" v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
+                <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0"
+                    ><i class="fa fa-clock"></i> {{ recipe.working_time }} {{ $t("min") }}
+                </b-badge>
+                <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0"
+                    ><i class="fa fa-pause"></i> {{ recipe.waiting_time }} {{ $t("min") }}
+                </b-badge>
             </div>
         </a>
-      </div>
-      <div class="card-img-overlay w-50 d-flex flex-column justify-content-left float-left text-left pt-2"
-           v-if="recipe.working_time !== 0 || recipe.waiting_time !== 0">
-        <b-badge pill variant="light" class="mt-1 font-weight-normal" v-if="recipe.working_time !== 0"><i class="fa fa-clock"></i>
-          {{ recipe.working_time }} {{ $t('min') }}
-        </b-badge>
-        <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0"><i class="fa fa-pause"></i>
-          {{ recipe.waiting_time }} {{ $t('min') }}
-        </b-badge>
-      </div>
-    </a>
 
         <b-card-body class="p-4">
             <h6>
@@ -69,7 +62,7 @@
 
 <script>
 import RecipeContextMenu from "@/components/ContextMenu/RecipeContextMenu"
-import KeywordsComponent from "@/components/KeywordsComponent";
+import KeywordsComponent from "@/components/KeywordsComponent"
 import { resolveDjangoUrl, ResolveUrlMixin } from "@/utils/utils"
 import RecipeRating from "@/components/RecipeRating"
 import moment from "moment/moment"
diff --git a/vue/src/utils/openapi/api.ts b/vue/src/utils/openapi/api.ts
index 6593dd532..042ebf117 100644
--- a/vue/src/utils/openapi/api.ts
+++ b/vue/src/utils/openapi/api.ts
@@ -2940,6 +2940,12 @@ export interface UserPreference {
      * @memberof UserPreference
      */
     default_page?: UserPreferenceDefaultPageEnum;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UserPreference
+     */
+    use_kj?: boolean;
     /**
      * 
      * @type {string}