diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 65ec1e633..0ec7d79b6 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -798,7 +798,7 @@
                         <div style="overflow-x:visible;  overflow-y: hidden;white-space: nowrap;">
 
                             <b-dropdown id="sortby" :text="sortByLabel" variant="outline-primary" size="sm" style="overflow-y: visible; overflow-x: visible; position: static"
-                                        class="shadow-none" toggle-class="text-decoration-none" >
+                                        class="shadow-none" toggle-class="text-decoration-none">
                                 <div v-for="o in sortOptions" :key="o.id">
                                     <b-dropdown-item
                                         v-on:click="
@@ -832,7 +832,7 @@
                     <div class="row">
                         <div class="col col-md-12">
                             <div
-                                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 0.6rem; grid-auto-rows: max-content;">
+                                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 0.5rem;row-gap: 1rem; grid-auto-rows: max-content; ">
                                 <template v-if="!searchFiltered()">
                                     <recipe-card
                                         v-bind:key="`mp_${m.id}`"
@@ -848,7 +848,7 @@
                                              :footer_text="isRecentOrNew(r)[0]"
                                              :footer_icon="isRecentOrNew(r)[1]"
                                              :use_plural="use_plural">
-                                             </recipe-card>
+                                </recipe-card>
                             </div>
                         </div>
                     </div>
@@ -916,7 +916,7 @@ import LoadingSpinner from "@/components/LoadingSpinner" // TODO: is this deprec
 import RecipeCard from "@/components/RecipeCard"
 import GenericMultiselect from "@/components/GenericMultiselect"
 import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
-import { ApiApiFactory } from "@/utils/openapi/api"
+import {ApiApiFactory} from "@/utils/openapi/api"
 
 Vue.use(VueCookies)
 Vue.use(BootstrapVue)
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 415422dba..cfc14f80d 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <template v-if="recipe && recipe.loading">
-            <b-card no-body v-hover>
+            <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>
 
@@ -19,7 +19,7 @@
             </b-card>
         </template>
         <template v-else>
-            <b-card no-body v-hover v-if="recipe">
+            <b-card no-body v-hover v-if="recipe" style="height: 100%">
 
                 <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
                     <b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image"
@@ -33,7 +33,7 @@
                                                  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"
+                    <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">
                             <i
@@ -48,7 +48,7 @@
 
                 <b-card-body class="p-2 pl-3 pr-3">
                     <span>
-                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" class="text-body two-row-text">
+                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" 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>