diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index f19bac15c..ba62776f5 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -14,6 +14,7 @@ from zipfile import ZipFile
 
 import requests
 import validators
+from PIL import UnidentifiedImageError
 from annoying.decorators import ajax_request
 from annoying.functions import get_object_or_None
 from django.contrib import messages
@@ -183,8 +184,8 @@ class FuzzyFilterMixin(viewsets.ModelViewSet, ExtendedRecipeMixin):
         if query is not None and query not in ["''", '']:
             if fuzzy and (settings.DATABASES['default']['ENGINE'] == 'django.db.backends.postgresql'):
                 if (
-                    self.request.user.is_authenticated
-                    and any([self.model.__name__.lower() in x for x in self.request.user.searchpreference.unaccent.values_list('field', flat=True)])
+                        self.request.user.is_authenticated
+                        and any([self.model.__name__.lower() in x for x in self.request.user.searchpreference.unaccent.values_list('field', flat=True)])
                 ):
                     self.queryset = self.queryset.annotate(trigram=TrigramSimilarity('name__unaccent', query))
                 else:
@@ -616,8 +617,8 @@ class FoodViewSet(TreeMixin):
             return JsonResponse(
                 {
                     'msg':
-                    'API Key Rate Limit reached/exceeded, see https://api.data.gov/docs/rate-limits/ for more information. \
-                            Configure your key in Tandoor using environment FDC_API_KEY variable.'
+                        'API Key Rate Limit reached/exceeded, see https://api.data.gov/docs/rate-limits/ for more information. \
+                                Configure your key in Tandoor using environment FDC_API_KEY variable.'
                 },
                 status=429,
                 json_dumps_params={'indent': 4})
@@ -630,7 +631,7 @@ class FoodViewSet(TreeMixin):
         food.properties_food_unit = Unit.objects.get_or_create(
             base_unit__iexact='g',
             space=self.request.space,
-            defaults={ 'name': 'g', 'base_unit': 'g', 'space': self.request.space}
+            defaults={'name': 'g', 'base_unit': 'g', 'space': self.request.space}
         )[0]
 
         food.save()
@@ -662,13 +663,13 @@ class FoodViewSet(TreeMixin):
                                      space=self.request.space,
                                      ))
 
-            properties = Property.objects.bulk_create(food_property_list, unique_fields=('space', 'property_type', ))
+            properties = Property.objects.bulk_create(food_property_list, unique_fields=('space', 'property_type',))
 
             property_food_relation_list = []
             for p in properties:
                 property_food_relation_list.append(Food.properties.through(food_id=food.id, property_id=p.pk))
 
-            FoodProperty.objects.bulk_create(property_food_relation_list, ignore_conflicts=True, unique_fields=('food_id', 'property_id', ))
+            FoodProperty.objects.bulk_create(property_food_relation_list, ignore_conflicts=True, unique_fields=('food_id', 'property_id',))
 
             return self.retrieve(request, pk)
         except Exception:
@@ -1126,13 +1127,13 @@ class ShoppingListRecipeViewSet(viewsets.ModelViewSet):
 
 
 @extend_schema_view(list=extend_schema(parameters=[
-            OpenApiParameter(name='id', description=_('Returns the shopping list entry with a primary key of id.  Multiple values allowed.'), type=int),
-            OpenApiParameter(
-                name='checked',
-                description=_('Filter shopping list entries on checked.  [''true'', ''false'', ''both'', ''<b>recent</b>'']<br>  \
+    OpenApiParameter(name='id', description=_('Returns the shopping list entry with a primary key of id.  Multiple values allowed.'), type=int),
+    OpenApiParameter(
+        name='checked',
+        description=_('Filter shopping list entries on checked.  [''true'', ''false'', ''both'', ''<b>recent</b>'']<br>  \
                             - ''recent'' includes unchecked items and recently completed items.')
-            ),
-            OpenApiParameter(name='supermarket', description=_('Returns the shopping list entries sorted by supermarket category order.'), type=int),
+    ),
+    OpenApiParameter(name='supermarket', description=_('Returns the shopping list entries sorted by supermarket category order.'), type=int),
 ]))
 class ShoppingListEntryViewSet(viewsets.ModelViewSet):
     queryset = ShoppingListEntry.objects
diff --git a/vue3/src/components/display/MealPlanCalendarItem.vue b/vue3/src/components/display/MealPlanCalendarItem.vue
new file mode 100644
index 000000000..68965b0c2
--- /dev/null
+++ b/vue3/src/components/display/MealPlanCalendarItem.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="card cv-item meal-plan-card p-0"
+         :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
+         :key="value.id"
+         :class="value.classes"
+    >
+
+        <div class="d-flex flex-row align-items-center">
+            <div class="flex-column">
+                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" :src="mealPlan.recipe.image"
+                     v-if="mealPlan.recipe != undefined && detailedItems"/>
+                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" src="../../assets/recipe_no_image.svg"
+                     v-if="detailedItems && ((mealPlan.recipe == undefined && mealPlan.note === '') || (mealPlan.recipe != undefined && mealPlan.recipe.image === null))"/>
+            </div>
+            <div class="flex-column flex-grow-0 align-middle justify-content-center">
+                <div class="card-body p-0 pl-1 align-middle">
+
+                    <span class="font-light" :class="{'two-line-text': detailedItems,'one-line-text': !detailedItems,}">
+                       <i class="fas fa-shopping-cart fa-xs float-left"  v-if="mealPlan.shopping"/>
+                        {{ itemTitle }}</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import {computed, PropType} from "vue";
+import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+
+
+let props = defineProps({
+    value: {type: {} as PropType<IMealPlanNormalizedCalendarItem>, required: true},
+    itemHeight: {type: String, default: '2.6rem'},
+    itemTop: {type: String,},
+    detailedItems: {type: Boolean, default: true}
+})
+
+const mealPlan = computed(() => {
+    return props.value.originalItem.mealPlan
+})
+
+const itemTitle = computed(() => {
+    if (mealPlan.value.recipe != undefined) {
+        return mealPlan.value.recipe.name
+    } else if (mealPlan.value.title != null && mealPlan.value.title !== "") {
+        return mealPlan.value.title
+    } else {
+        return 'ERROR'
+    }
+})
+
+
+</script>
+
+<style scoped>
+.meal-plan-card {
+    background-color: #fff;
+}
+
+@media (max-width: 767.9px) {
+    .meal-plan-card {
+        font-size: 13px;
+    }
+}
+
+.two-line-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.one-line-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/vue3/src/pages/MealPlanPage.vue b/vue3/src/pages/MealPlanPage.vue
index 7ca68c1f4..4eb1eba02 100644
--- a/vue3/src/pages/MealPlanPage.vue
+++ b/vue3/src/pages/MealPlanPage.vue
@@ -1,10 +1,13 @@
 <template>
 
     <v-row class="h-100">
-        <v-col >
+        <v-col>
             <CalendarView
+                :items="planItems"
                 class="theme-default ">
-
+                <template #item="{ value, weekStartDate, top }">
+                    <meal-plan-calendar-item :value="value"></meal-plan-calendar-item>
+                </template>
             </CalendarView>
         </v-col>
     </v-row>
@@ -19,11 +22,27 @@ import {ApiApi, MealPlan} from "@/openapi";
 import {CalendarView, CalendarViewHeader} from "vue-simple-calendar"
 import "vue-simple-calendar/dist/style.css"
 import "vue-simple-calendar/dist/css/default.css"
+import MealPlanCalendarItem from "@/components/display/MealPlanCalendarItem.vue";
+import {IMealPlanCalendarItem, IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {VCalendar, CalendarView, CalendarViewHeader},
-    computed: {},
+    components: {MealPlanCalendarItem,  VCalendar, CalendarView, CalendarViewHeader},
+    computed: {
+        planItems: function(){
+            let items = [] as IMealPlanCalendarItem[]
+            this.mealPlans.forEach(mp => {
+                items.push({
+                    startDate: mp.fromDate,
+                    endDate: mp.toDate,
+                    id: mp.id,
+                    mealPlan: mp,
+                } as IMealPlanCalendarItem)
+            })
+            return items
+        }
+    },
     data() {
         return {
             mealPlans: [] as MealPlan[]
diff --git a/vue3/src/types/MealPlan.ts b/vue3/src/types/MealPlan.ts
new file mode 100644
index 000000000..cc8434e4b
--- /dev/null
+++ b/vue3/src/types/MealPlan.ts
@@ -0,0 +1,15 @@
+import {MealPlan} from "@/openapi";
+import {ICalendarItem} from "vue-simple-calendar/dist/src/ICalendarItem";
+
+export interface IMealPlanCalendarItem {
+	startDate: Date,
+	endDate: Date,
+	id: number,
+	mealPlan: MealPlan
+}
+export interface IMealPlanNormalizedCalendarItem extends ICalendarItem {
+	endDate: Date
+	originalItem: IMealPlanCalendarItem
+	classes: string[]
+	itemRow?: number
+}
\ No newline at end of file