diff --git a/cookbook/templates/frontend/tandoor.html b/cookbook/templates/frontend/tandoor.html
index dc0599358..c2edcc442 100644
--- a/cookbook/templates/frontend/tandoor.html
+++ b/cookbook/templates/frontend/tandoor.html
@@ -1,5 +1,10 @@
 {% load django_vite %}
 
+{% load theming_tags %}
+{% load custom_tags %}
+
+{% theme_values request as theme_values %}
+
 <!DOCTYPE html>
 <html>
 <head>
@@ -8,7 +13,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui, shrink-to-fit=no">
     <meta name="robots" content="noindex,nofollow"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
-    
+
+    <link rel="icon" href="{{ theme_values.logo_color_svg }}">
+    <link rel="icon" href="{{ theme_values.logo_color_32 }}" sizes="32x32">
+    <link rel="icon" href="{{ theme_values.logo_color_128 }}" sizes="128x128">
+    <link rel="icon" href="{{ theme_values.logo_color_192 }}" sizes="192x192">
+    <link rel="apple-touch-icon" href="{{ theme_values.logo_color_180 }}" sizes="180x180">
+
+    <meta name="msapplication-TileColor" content="{{ theme_values.nav_bg_color }}">
+    <meta name="msapplication-TileImage" content="{{ theme_values.logo_color_144 }}">
+
+    <meta name="theme-color" content="{{ theme_values.nav_bg_color }}">
+
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+
+
 </head>
 <body>
 <div id="app"></div>
diff --git a/vue3/src/components/display/HorizontalRecipeWindow.vue b/vue3/src/components/display/HorizontalRecipeWindow.vue
index 9451b6486..b30fe48d6 100644
--- a/vue3/src/components/display/HorizontalRecipeWindow.vue
+++ b/vue3/src/components/display/HorizontalRecipeWindow.vue
@@ -57,7 +57,7 @@ const props = defineProps(
 const {title, recipes} = toRefs(props)
 
 let numberOfCols = computed(() => {
-    return mdAndUp.value ? 5 : 2
+    return mdAndUp.value ? 4 : 2
 })
 
 type CustomWindow = {
diff --git a/vue3/src/components/display/KeywordsBar.vue b/vue3/src/components/display/KeywordsBar.vue
index a0d134e6a..47e1c9191 100644
--- a/vue3/src/components/display/KeywordsBar.vue
+++ b/vue3/src/components/display/KeywordsBar.vue
@@ -1,19 +1,20 @@
 <template>
-
-    <v-chip color="info" size="x-small" v-for="k in keywords"> {{ k?.label }}</v-chip>
+    <template v-if="keywords">
+        <v-chip color="info" size="x-small" v-for="k in keywords"> {{ k.label }}</v-chip>
+    </template>
 
 </template>
 
 <script lang="ts">
 
-import {Keyword} from "@/openapi";
+import {Keyword, KeywordLabel} from "@/openapi";
 import {PropType} from "vue";
 
 export default {
     name: 'KeywordsBar',
     mixins: [],
     props: {
-        keywords: Array as PropType<Array<Keyword>>,
+        keywords: Array as PropType<Array<Keyword> | Array<KeywordLabel> | undefined>,
     },
     computed: {},
     methods: {}
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index 3e6f4e40e..eb466f5bc 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -7,49 +7,52 @@
                 no-click-animation
                 :open-on-hover="recipe.description != null && recipe.description != ''"
                 contained
-                opacity="2%"
             >
                 <template v-slot:activator="{ props }">
-                    <v-img v-if="recipe.image != null" v-bind="props"
-                           cover
+                    <v-img cover
                            height="60%"
-                           :src="recipe.image"
-                    ></v-img>
-                    <v-img v-else src="../../assets/recipe_no_image.svg" cover v-bind="props"
-                           height="60%"></v-img>
+                           :src="recipeImageUrl"
+                    >
+                        <v-chip size="x-small" prepend-icon="fa fa-clock" label color="light" variant="elevated"
+                                class="float-start ms-1 mt-1">
+                            {{ recipe.workingTime }}
+                        </v-chip>
+                        <v-chip size="x-small" prepend-icon="fa fa-pause" label color="secondary" variant="elevated"
+                                class="float-start ms-1 mt-1">
+                            {{ recipe.waitingTime }}
+                        </v-chip>
+                    </v-img>
+                    <v-divider class="p-0" v-if="recipe.image == null"></v-divider>
 
                 </template>
                 <div v-if="recipe.description != null && recipe.description != ''">
-                    {{recipe.description}}
+                    {{ recipe.description }}
                 </div>
             </v-tooltip>
 
             <v-card-item>
-                <v-card-title>{{ recipe.name }}</v-card-title>
+                <v-card-title>
+                             {{ recipe.name }}
+                            <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>
+
+                </v-card-title>
+
 
                 <v-card-subtitle v-if="show_keywords">
                     <KeywordsComponent :keywords="recipe.keywords"></KeywordsComponent>
                 </v-card-subtitle>
+                <v-rating
+                    v-if="recipe.rating != null"
+                    v-model="recipe.rating"
+                    color="amber"
+                    density="comfortable"
+                    half-increments
+                    readonly
+                    size="x-small"
+                ></v-rating>
+
             </v-card-item>
 
-            <v-card-text v-if="show_description">
-                <v-row align="center" class="mx-0" v-if="recipe.rating">
-                    <v-rating
-                        :model-value="recipe.rating"
-                        color="amber"
-                        density="compact"
-                        half-increments
-                        readonly
-                        size="small"
-                    ></v-rating>
-
-                    <div class="text-grey ">
-                        {{ recipe.rating }}
-                    </div>
-                </v-row>
-
-            </v-card-text>
-
         </v-card>
     </template>
     <template v-else>
@@ -71,16 +74,23 @@
 import {defineComponent, PropType} from 'vue'
 import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 import {Recipe, RecipeOverview} from "@/openapi";
+import recipeNoImage from '@/assets/recipe_no_image.svg';
+import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 
 export default defineComponent({
     name: "RecipeCard",
-    components: {KeywordsComponent},
+    components: {RecipeContextMenu, KeywordsComponent},
     props: {
         recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
         loading: {type: Boolean, required: false},
         show_keywords: {type: Boolean, required: false},
         show_description: {type: Boolean, required: false},
         height: {type: String, required: false, default: '25vh'},
+    },
+    computed: {
+        recipeImageUrl: function () {
+            return (this.recipe.image != null) ? this.recipe.image : recipeNoImage
+        }
     }
 })
 </script>
