diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 2a8feabcf..53e269925 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/RecipeContextMenu.vue b/vue/src/components/RecipeContextMenu.vue
index bf22a952f..0bbd4b1cf 100644
--- a/vue/src/components/RecipeContextMenu.vue
+++ b/vue/src/components/RecipeContextMenu.vue
@@ -1,36 +1,40 @@
 <template>
     <div>
         <div class="dropdown d-print-none">
-            <a class="btn shadow-none pr-0 pl-0" href="javascript:void(0);" role="button" id="dropdownMenuLink"
-               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <a class="btn shadow-none pr-0 pl-0" href="javascript:void(0);" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="fas fa-ellipsis-v fa-lg"></i>
             </a>
 
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink" >
-                <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)" v-if="!disabled_options.edit"><i
-                    class="fas fa-pencil-alt fa-fw"></i> {{ $t("Edit") }}</a>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+                <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)" v-if="!disabled_options.edit"
+                    ><i class="fas fa-pencil-alt fa-fw"></i> {{ $t("Edit") }}</a
+                >
 
                 <a class="dropdown-item" :href="resolveDjangoUrl('view_property_editor', recipe.id)" v-if="!disabled_options.edit">
-                    <i class="fas fa-table"></i> {{ $t("Property_Editor") }}</a>
+                    <i class="fas fa-table"></i> {{ $t("Property_Editor") }}</a
+                >
 
-                <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)"
-                   v-if="!recipe.internal && !disabled_options.convert"><i class="fas fa-exchange-alt fa-fw"></i> {{ $t("convert_internal") }}</a>
+                <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal && !disabled_options.convert"
+                    ><i class="fas fa-exchange-alt fa-fw"></i> {{ $t("convert_internal") }}</a
+                >
 
                 <a href="javascript:void(0);">
-                    <button class="dropdown-item" @click="$bvModal.show(`id_modal_add_book_${modal_id}`)" v-if="!disabled_options.books"><i
-                        class="fas fa-bookmark fa-fw"></i> {{ $t("Manage_Books") }}
+                    <button class="dropdown-item" @click="$bvModal.show(`id_modal_add_book_${modal_id}`)" v-if="!disabled_options.books">
+                        <i class="fas fa-bookmark fa-fw"></i> {{ $t("Manage_Books") }}
                     </button>
                 </a>
 
-                <a class="dropdown-item" v-if="recipe.internal && !disabled_options.shopping" @click="addToShopping" href="#" > <i
-                    class="fas fa-shopping-cart fa-fw"></i> {{ $t("Add_to_Shopping") }} </a>
+                <a class="dropdown-item" v-if="recipe.internal && !disabled_options.shopping" @click="addToShopping" href="#">
+                    <i class="fas fa-shopping-cart fa-fw"></i> {{ $t("Add_to_Shopping") }}
+                </a>
 
-                <a class="dropdown-item" @click="createMealPlan" href="javascript:void(0);" v-if="!disabled_options.plan"><i
-                    class="fas fa-calendar fa-fw"></i> {{ $t("Add_to_Plan") }} </a>
+                <a class="dropdown-item" @click="createMealPlan" href="javascript:void(0);" v-if="!disabled_options.plan"
+                    ><i class="fas fa-calendar fa-fw"></i> {{ $t("Add_to_Plan") }}
+                </a>
 
                 <a href="javascript:void(0);">
-                    <button class="dropdown-item" @click="$bvModal.show(`id_modal_cook_log_${modal_id}`)" v-if="!disabled_options.log"><i
-                        class="fas fa-clipboard-list fa-fw"></i> {{ $t("Log_Cooking") }}
+                    <button class="dropdown-item" @click="$bvModal.show(`id_modal_cook_log_${modal_id}`)" v-if="!disabled_options.log">
+                        <i class="fas fa-clipboard-list fa-fw"></i> {{ $t("Log_Cooking") }}
                     </button>
                 </a>
 
@@ -41,56 +45,49 @@
                     </button>
                 </a>
                 <a href="javascript:void(0);">
-                    <button class="dropdown-item" @click="copyToNew" v-if="!disabled_options.copy"><i class="fas fa-copy fa-fw"></i>
+                    <button class="dropdown-item" @click="copyToNew" v-if="!disabled_options.copy">
+                        <i class="fas fa-copy fa-fw"></i>
                         {{ $t("copy_to_new") }}
                     </button>
                 </a>
 
-                <a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank"
-                   rel="noopener noreferrer" v-if="!disabled_options.export"><i class="fas fa-file-export fa-fw"></i> {{ $t("Export") }}</a>
+                <a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank" rel="noopener noreferrer" v-if="!disabled_options.export"
+                    ><i class="fas fa-file-export fa-fw"></i> {{ $t("Export") }}</a
+                >
 
                 <a href="javascript:void(0);">
                     <button class="dropdown-item" @click="pinRecipe()" v-if="!disabled_options.pin">
                         <i class="fas fa-thumbtack fa-fw"></i>
-                        {{ isPinned ? $t("Unpin") : $t("Pin")}}
+                        {{ isPinned ? $t("Unpin") : $t("Pin") }}
                     </button>
                 </a>
 
                 <a href="javascript:void(0);">
-                    <button class="dropdown-item" @click="createShareLink()" v-if="recipe.internal && !disabled_options.share" ><i
-                        class="fas fa-share-alt fa-fw"></i> {{ $t("Share") }}
+                    <button class="dropdown-item" @click="createShareLink()" v-if="recipe.internal && !disabled_options.share">
+                        <i class="fas fa-share-alt fa-fw"></i> {{ $t("Share") }}
                     </button>
                 </a>
             </div>
         </div>
 
         <cook-log :recipe="recipe" :modal_id="modal_id"></cook-log>
-        <add-recipe-to-book :recipe="recipe" :modal_id="modal_id"
-                            :entryEditing_inital_servings="servings_value"></add-recipe-to-book>
-        <shopping-modal :recipe="recipe" :servings="servings_value" :modal_id="modal_id" :mealplan="undefined"/>
+        <add-recipe-to-book :recipe="recipe" :modal_id="modal_id" :entryEditing_inital_servings="servings_value"></add-recipe-to-book>
+        <shopping-modal :recipe="recipe" :servings="servings_value" :modal_id="modal_id" :mealplan="undefined" />
 
         <b-modal :id="`modal-share-link_${modal_id}`" v-bind:title="$t('Share')" hide-footer>
             <div class="row">
                 <div class="col col-md-12">
                     <label v-if="recipe_share_link !== undefined">{{ $t("Public share link") }}</label>
-                    <input ref="share_link_ref" class="form-control" v-model="recipe_share_link"/>
-                    <b-button class="mt-2 mb-3 d-none d-md-inline" variant="secondary"
-                              @click="$bvModal.hide(`modal-share-link_${modal_id}`)">{{ $t("Close") }}
-                    </b-button>
-                    <b-button class="mt-2 mb-3 ml-md-2" variant="primary" @click="copyShareLink()">{{
-                            $t("Copy")
-                        }}
-                    </b-button>
-                    <b-button class="mt-2 mb-3 ml-2 float-right" variant="success" @click="shareIntend()">{{
-                            $t("Share")
-                        }} <i class="fa fa-share-alt"></i></b-button>
+                    <input ref="share_link_ref" class="form-control" v-model="recipe_share_link" />
+                    <b-button class="mt-2 mb-3 d-none d-md-inline" variant="secondary" @click="$bvModal.hide(`modal-share-link_${modal_id}`)">{{ $t("Close") }} </b-button>
+                    <b-button class="mt-2 mb-3 ml-md-2" variant="primary" @click="copyShareLink()">{{ $t("Copy") }} </b-button>
+                    <b-button class="mt-2 mb-3 ml-2 float-right" variant="success" @click="shareIntend()">{{ $t("Share") }} <i class="fa fa-share-alt"></i></b-button>
                 </div>
             </div>
         </b-modal>
 
         <meal-plan-edit-modal
             :entry="entryEditing"
-            :entryEditing_inital_servings="servings_value"
             @save-entry="saveMealPlan"
             :modal_id="`modal-meal-plan_${modal_id}`"
             :allow_delete="false"
@@ -100,16 +97,16 @@
 </template>
 
 <script>
-import {makeToast, resolveDjangoUrl, ResolveUrlMixin, StandardToasts} from "@/utils/utils"
 import CookLog from "@/components/CookLog"
-import axios from "axios"
-import AddRecipeToBook from "@/components/Modals/AddRecipeToBook"
 import MealPlanEditModal from "@/components/MealPlanEditModal"
+import AddRecipeToBook from "@/components/Modals/AddRecipeToBook"
 import ShoppingModal from "@/components/Modals/ShoppingModal"
+import { useMealPlanStore } from "@/stores/MealPlanStore"
+import { ApiApiFactory } from "@/utils/openapi/api"
+import { makeToast, resolveDjangoUrl, ResolveUrlMixin, StandardToasts } from "@/utils/utils"
+import axios from "axios"
 import moment from "moment"
 import Vue from "vue"
-import {ApiApiFactory} from "@/utils/openapi/api"
-import {useMealPlanStore} from "@/stores/MealPlanStore";
 
 Vue.prototype.moment = moment
 
@@ -143,7 +140,7 @@ export default {
                 },
             },
             entryEditing: {},
-            mealplan: undefined
+            mealplan: undefined,
         }
     },
     props: {
@@ -154,19 +151,18 @@ export default {
         },
         disabled_options: {
             type: Object,
-            default: () => ({print:true}),
+            default: () => ({ print: true }),
         },
     },
     mounted() {
         this.servings_value = this.servings === -1 ? this.recipe.servings : this.servings
 
         let pinnedRecipes = JSON.parse(localStorage.getItem("pinned_recipes")) || []
-        this.isPinned = pinnedRecipes.some((r) => r.id == this.recipe.id);
+        this.isPinned = pinnedRecipes.some((r) => r.id == this.recipe.id)
     },
     watch: {
         recipe: {
-            handler() {
-            },
+            handler() {},
             deep: true,
         },
         servings: function (newVal) {
@@ -174,14 +170,14 @@ export default {
         },
     },
     methods: {
-        pinRecipe () {
+        pinRecipe() {
             let pinnedRecipes = JSON.parse(localStorage.getItem("pinned_recipes")) || []
-            if(this.isPinned) {
+            if (this.isPinned) {
                 pinnedRecipes = pinnedRecipes.filter((r) => r.id !== this.recipe.id)
-                makeToast(this.$t("Unpin"), this.$t("UnpinnedConfirmation", {recipe: this.recipe.name}), "info")
+                makeToast(this.$t("Unpin"), this.$t("UnpinnedConfirmation", { recipe: this.recipe.name }), "info")
             } else {
-                pinnedRecipes.push({id: this.recipe.id, name: this.recipe.name})
-                makeToast(this.$t("Pin"), this.$t("PinnedConfirmation", {recipe: this.recipe.name}), "info")
+                pinnedRecipes.push({ id: this.recipe.id, name: this.recipe.name })
+                makeToast(this.$t("Pin"), this.$t("PinnedConfirmation", { recipe: this.recipe.name }), "info")
             }
             this.isPinned = !this.isPinned
             localStorage.setItem("pinned_recipes", JSON.stringify(pinnedRecipes))
@@ -211,6 +207,7 @@ export default {
         createMealPlan(data) {
             this.entryEditing = this.options.entryEditing
             this.entryEditing.recipe = this.recipe
+            this.entryEditing.servings = this.recipe.servings
             this.entryEditing.from_date = moment(new Date()).format("YYYY-MM-DD")
             this.entryEditing.to_date = moment(new Date()).format("YYYY-MM-DD")
             this.$nextTick(function () {
@@ -218,17 +215,20 @@ export default {
             })
         },
         createShareLink: function () {
-            console.log('create')
-            axios.get(resolveDjangoUrl("api_share_link", this.recipe.id)).then((result) => {
-                console.log('success')
-                this.$bvModal.show(`modal-share-link_${this.modal_id}`)
-                this.recipe_share_link = result.data.link
-            }).catch((err) => {
-                console.log('fail')
-                if (err.response.status === 403) {
-                    makeToast(this.$t("Share"), this.$t("Sharing is not enabled for this space or your user account."), "danger")
-                }
-            })
+            console.log("create")
+            axios
+                .get(resolveDjangoUrl("api_share_link", this.recipe.id))
+                .then((result) => {
+                    console.log("success")
+                    this.$bvModal.show(`modal-share-link_${this.modal_id}`)
+                    this.recipe_share_link = result.data.link
+                })
+                .catch((err) => {
+                    console.log("fail")
+                    if (err.response.status === 403) {
+                        makeToast(this.$t("Share"), this.$t("Sharing is not enabled for this space or your user account."), "danger")
+                    }
+                })
         },
         copyShareLink: function () {
             let share_input = this.$refs.share_link_ref
@@ -251,21 +251,21 @@ export default {
 
             let apiClient = new ApiApiFactory()
             apiClient.retrieveRecipe(this.recipe.id).then((results) => {
-                let recipe = {...results.data, ...{id: undefined, name: recipe_name}}
+                let recipe = { ...results.data, ...{ id: undefined, name: recipe_name } }
                 recipe.steps = recipe.steps.map((step) => {
                     return {
                         ...step,
                         ...{
                             id: undefined,
                             ingredients: step.ingredients.map((ingredient) => {
-                                return {...ingredient, ...{id: undefined}}
+                                return { ...ingredient, ...{ id: undefined } }
                             }),
                         },
                     }
                 })
 
-                recipe.properties = recipe.properties.map(p => {
-                    return { ...p, ...{ id: undefined, } }
+                recipe.properties = recipe.properties.map((p) => {
+                    return { ...p, ...{ id: undefined } }
                 })
 
                 apiClient
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>