diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 8445be26f..f35339425 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -2,8 +2,7 @@
     <div>
         <template v-if="recipe && recipe.loading">
             <b-card no-body v-hover style="height: 100%">
-                <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image"
-                                 v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
+                <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="placeholder_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
 
                 <b-card-body class="p-4">
                     <h6>
@@ -20,30 +19,32 @@
         </template>
         <template v-else>
             <b-card no-body v-hover v-if="recipe" style="height: 100%">
-
                 <a :href="recipe_link">
                     <div class="content">
                         <div class="content-overlay" v-if="recipe.description !== null && recipe.description !== ''"></div>
-                        <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image"
-                                         v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
+                        <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
 
-                        <div class="content-details" >
+                        <div class="content-details">
                             <p class="content-text">
-                               {{ recipe.description }}
+                                {{ recipe.description }}
                             </p>
                         </div>
 
-                        <div class="card-img-overlay d-flex flex-column justify-content-left float-left text-left pt-2" style="width:40%"
-                             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 && recipe.working_time !== undefined">
-                                <i
-                                    class="fa fa-clock"></i> {{ working_time }}
-                            </b-badge>
-                            <b-badge pill variant="secondary" class="mt-1 font-weight-normal"
-                                     v-if="recipe.waiting_time !== 0 && recipe.waiting_time !== undefined">
-                                <i class="fa fa-pause"></i> {{ waiting_time }}
-                            </b-badge>
-                        </div>
+                        <b-row class="card-img-overlay pt-1">
+                            <b-col cols="6">
+                                <div 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 && recipe.working_time !== undefined">
+                                        <i class="fa fa-clock"></i> {{ working_time }}
+                                    </b-badge>
+                                    <b-badge pill variant="secondary" class="mt-1 font-weight-normal" v-if="recipe.waiting_time !== 0 && recipe.waiting_time !== undefined">
+                                        <i class="fa fa-pause"></i> {{ waiting_time }}
+                                    </b-badge>
+                                </div>
+                            </b-col>
+                            <b-col cols="6" class="text-right">
+                                <recipe-rating :recipe="recipe" :pill="true"></recipe-rating>
+                            </b-col>
+                        </b-row>
                     </div>
                 </a>
 
@@ -51,18 +52,20 @@
                     <div class="d-flex flex-row">
                         <div class="flex-grow-1">
                             <a :href="recipe_link" class="text-body font-weight-bold two-row-text">
-                            <template v-if="recipe !== null">{{ recipe.name }}</template>
-                            <template v-else>{{ meal_plan.title }}</template>
-                        </a>
+                                <template v-if="recipe !== null">{{ recipe.name }}</template>
+                                <template v-else>{{ meal_plan.title }}</template>
+                            </a>
                         </div>
                         <div class="justify-content-end">
-                            <recipe-context-menu :recipe="recipe" class="justify-content-end float-right align-items-end pr-0"
-                                                     :disabled_options="context_disabled_options"
-                                                     v-if="recipe !== null && show_context_menu"></recipe-context-menu>
+                            <recipe-context-menu
+                                :recipe="recipe"
+                                class="justify-content-end float-right align-items-end pr-0"
+                                :disabled_options="context_disabled_options"
+                                v-if="recipe !== null && show_context_menu"
+                            ></recipe-context-menu>
                         </div>
                     </div>
 
-
                     <b-card-text style="text-overflow: ellipsis">
                         <template v-if="recipe !== null">
                             <div v-if="show_detail">
@@ -71,34 +74,29 @@
 
                             <p class="mt-1 mb-1">
                                 <last-cooked :recipe="recipe"></last-cooked>
-                                <keywords-component :recipe="recipe" :limit="3" :enable_keyword_links="enable_keyword_links"
-                                                    style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
+                                <keywords-component
+                                    :recipe="recipe"
+                                    :limit="3"
+                                    :enable_keyword_links="enable_keyword_links"
+                                    style="margin-top: 4px; position: relative; z-index: 3"
+                                ></keywords-component>
                             </p>
                             <transition name="fade" mode="in-out">
                                 <div class="row mt-3" v-if="show_detail">
                                     <div class="col-md-12">
-                                        <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}
-                                        </h6>
+                                        <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}</h6>
 
-                                        <ingredients-card
-                                            :steps="recipe.steps"
-                                            :header="false"
-                                            :detailed="false"
-                                            :servings="recipe.servings"/>
+                                        <ingredients-card :steps="recipe.steps" :header="false" :detailed="false" :servings="recipe.servings" />
                                     </div>
                                 </div>
                             </transition>
 
                             <b-badge pill variant="info" v-if="recipe.internal !== undefined && !recipe.internal">{{ $t("External") }}</b-badge>
                         </template>
-
                     </b-card-text>
                 </b-card-body>
-
-
             </b-card>
         </template>
-
     </div>
 
     <!--
@@ -123,14 +121,14 @@
 </template>
 
 <script>
-import RecipeContextMenu from "@/components/RecipeContextMenu"
+import IngredientsCard from "@/components/IngredientsCard"
 import KeywordsComponent from "@/components/KeywordsComponent"
-import {resolveDjangoUrl, ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils"
+import LastCooked from "@/components/LastCooked"
+import RecipeContextMenu from "@/components/RecipeContextMenu"
 import RecipeRating from "@/components/RecipeRating"
+import { ResolveUrlMixin, calculateHourMinuteSplit, resolveDjangoUrl } from "@/utils/utils"
 import moment from "moment/moment"
 import Vue from "vue"
-import LastCooked from "@/components/LastCooked"
-import IngredientsCard from "@/components/IngredientsCard"
 
 Vue.prototype.moment = moment
 
@@ -141,19 +139,20 @@ export default {
         LastCooked,
         KeywordsComponent,
         "recipe-context-menu": RecipeContextMenu,
-        IngredientsCard
+        IngredientsCard,
+        RecipeRating,
     },
     props: {
         recipe: Object,
         meal_plan: Object,
-        use_plural: {type: Boolean, default: false},
+        use_plural: { type: Boolean, default: false },
         footer_text: String,
         footer_icon: String,
-        detailed: {type: Boolean, default: true},
-        show_context_menu: {type: Boolean, default: true},
+        detailed: { type: Boolean, default: true },
+        show_context_menu: { type: Boolean, default: true },
         context_disabled_options: Object,
-        open_recipe_on_click: {type: Boolean, default: true},
-        enable_keyword_links: {type: Boolean, default: true},
+        open_recipe_on_click: { type: Boolean, default: true },
+        enable_keyword_links: { type: Boolean, default: true },
     },
     data() {
         return {
@@ -161,8 +160,7 @@ export default {
         }
     },
 
-    mounted() {
-    },
+    mounted() {},
     computed: {
         show_detail: function () {
             return this.recipe?.steps !== undefined && this.detailed
@@ -180,13 +178,13 @@ export default {
         waiting_time: function () {
             return calculateHourMinuteSplit(this.recipe.waiting_time)
         },
-        recipe_link: function (){
-            if(this.open_recipe_on_click){
-                return this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null
+        recipe_link: function () {
+            if (this.open_recipe_on_click) {
+                return this.recipe.id !== undefined ? resolveDjangoUrl("view_recipe", this.recipe.id) : null
             } else {
                 return "#"
             }
-        }
+        },
     },
     methods: {},
     directives: {
@@ -210,8 +208,7 @@ export default {
     transition: opacity 0.5s;
 }
 
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
-{
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
 }
 
diff --git a/vue/src/components/RecipeRating.vue b/vue/src/components/RecipeRating.vue
index 4b845d42b..49f0658ff 100644
--- a/vue/src/components/RecipeRating.vue
+++ b/vue/src/components/RecipeRating.vue
@@ -1,24 +1,30 @@
 <template>
-  <div>
-    <span class="d-inline" v-if="recipe.rating > 0">
-      <i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
-      <i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i>
-      <i class="far fa-star fa-xs text-secondary" v-for="i in (5 - Math.ceil(recipe.rating))" v-bind:key="i + 10"></i>
-    </span>
-  </div>
-
-
+    <div>
+        <span class="d-inline" v-if="recipe.rating > 0">
+            <div v-if="!pill">
+                <i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
+                <i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i>
+                <i class="far fa-star fa-xs text-secondary" v-for="i in 5 - Math.ceil(recipe.rating)" v-bind:key="i + 10"></i>
+            </div>
+            <div v-else>
+                <b-badge pill variant="light" class="mt-1 font-weight-normal">
+                    <i class="fas fa-star fa-xs text-dark" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
+                    <i class="fas fa-star-half-alt fa-xs text-dark" v-if="recipe.rating % 1 > 0"></i>
+                    <i class="far fa-star fa-xs text-dark" v-for="i in 5 - Math.ceil(recipe.rating)" v-bind:key="i + 10"></i>
+                </b-badge>
+            </div>
+        </span>
+    </div>
 </template>
 
 <script>
 export default {
-  name: "RecipeRating",
-  props: {
-    recipe: Object
-  }
+    name: "RecipeRating",
+    props: {
+        recipe: Object,
+        pill: { required: false, type: Boolean, default: false },
+    },
 }
 </script>
 
-<style scoped>
-
-</style>
\ No newline at end of file
+<style scoped></style>