diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 5c4acfcd8..726504b24 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -14,7 +14,7 @@
             <router-view></router-view>
         </v-main>
 
-        <v-navigation-drawer>
+        <v-navigation-drawer v-if="lgAndUp">
             <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
             <v-divider></v-divider>
             <v-list-item prepend-icon="fas fa-book" title="Home" :to="{name: 'view_home', params: {}}"></v-list-item>
@@ -23,7 +23,7 @@
             <v-list-item prepend-icon="fas fa-bars" title="More" :to="{name: 'view_books', params: {}}"></v-list-item> <!-- TODO link -->
         </v-navigation-drawer>
 
-        <v-bottom-navigation grow class="d-lg-none">
+        <v-bottom-navigation grow v-if="!lgAndUp">
             <v-btn value="recent" :to="{name: 'view_home', params: {}}">
                 <v-icon icon="fa-fw fas fa-book "/>
                 <span>Recipes</span>
@@ -51,26 +51,18 @@
     </v-app>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 
-import {defineComponent} from 'vue'
 import GlobalSearchDialog from "@/components/inputs/GlobalSearchDialog.vue";
+import {ref} from "vue";
+import {useDisplay} from "vuetify";
 
-export default defineComponent({
-    components: {GlobalSearchDialog},
-    mixins: [],
-    data() {
-        return {
-            drawer: true,
-            rail: true,
-            overlay: false
-        }
-    },
-    mounted() {
+const {lgAndUp} = useDisplay()
+
+const drawer = ref(true)
+const rail = ref(true)
+const overlay = ref(false)
 
-    },
-    methods: {},
-})
 
 </script>
 
diff --git a/vue3/src/components/display/MealPlanCalendarItem.vue b/vue3/src/components/display/MealPlanCalendarItem.vue
index 616d061fc..02e1bfdf7 100644
--- a/vue3/src/components/display/MealPlanCalendarItem.vue
+++ b/vue3/src/components/display/MealPlanCalendarItem.vue
@@ -7,7 +7,7 @@
             :class="value.classes">
         <v-card-text class="pa-0">
             <div class="d-flex flex-row align-items-center">
-                <div class="flex-column">
+                <div class="flex-column" v-if="detailedItems">
                     <recipe-image :height="itemHeight" :width="itemHeight" :recipe="mealPlan.recipe"></recipe-image>
                 </div>
                 <div class="flex-column flex-grow-0 pa-1">
@@ -31,7 +31,6 @@ import RecipeImage from "@/components/display/RecipeImage.vue";
 
 const emit = defineEmits({
     onDragStart: (value: IMealPlanNormalizedCalendarItem, event: DragEvent) => {
-        console.log(value, event)
         return true
     },
 })
diff --git a/vue3/src/components/display/MealPlanView.vue b/vue3/src/components/display/MealPlanView.vue
new file mode 100644
index 000000000..72bdc3566
--- /dev/null
+++ b/vue3/src/components/display/MealPlanView.vue
@@ -0,0 +1,274 @@
+<template>
+    <v-row class="h-100">
+        <v-col>
+            <CalendarView
+                :items="planItems"
+                class="theme-default"
+                :item-content-height="calendarItemHeight"
+                :enable-drag-drop="true"
+                @dropOnDate="dropCalendarItemOnDate">
+                <template #header="{ headerProps }">
+                    <CalendarViewHeader :header-props="headerProps" />
+                </template>
+                <template #item="{ value, weekStartDate, top }">
+                    <meal-plan-calendar-item :item-height="calendarItemHeight" :value="value" :item-top="top" @onDragStart="currentlyDraggedMealplan = value" :detailed-items="lgAndUp"></meal-plan-calendar-item>
+                </template>
+            </CalendarView>
+        </v-col>
+    </v-row>
+</template>
+
+
+<script setup lang="ts">
+
+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";
+import {computed, onMounted, ref} from "vue";
+import {ApiApi, MealPlan} from "@/openapi";
+import {DateTime} from "luxon";
+import {useDisplay} from "vuetify";
+
+const {lgAndUp} = useDisplay()
+
+const mealPlans = ref([] as MealPlan[])
+const currentlyDraggedMealplan = ref({} as IMealPlanNormalizedCalendarItem)
+
+const planItems = computed(() => {
+    let items = [] as IMealPlanCalendarItem[]
+    mealPlans.value.forEach(mp => {
+        items.push({
+            startDate: mp.fromDate,
+            endDate: mp.toDate,
+            id: mp.id,
+            mealPlan: mp,
+        } as IMealPlanCalendarItem)
+    })
+    return items
+})
+
+const calendarItemHeight = computed(() => {
+    if (lgAndUp.value) {
+        return '2.6rem'
+    } else {
+        return '1.3rem'
+    }
+})
+
+onMounted(() => {
+    let api = new ApiApi()
+    api.apiMealPlanList().then(r => {
+        mealPlans.value = r
+    })
+})
+
+function dropCalendarItemOnDate(undefinedItem: IMealPlanNormalizedCalendarItem, targetDate: Date, event: DragEvent) {
+    //The item argument is undefined because our custom calendar item cannot manipulate the calendar state so the item is unknown to the calendar (probably fixable by somehow binding state to the item)
+    mealPlans.value.forEach(mealPlan => {
+        if (mealPlan.id == currentlyDraggedMealplan.value.originalItem.mealPlan.id) {
+            let fromToDiff = DateTime.fromJSDate(mealPlan.toDate).diff(DateTime.fromJSDate(mealPlan.fromDate), 'days')
+            if (event.ctrlKey) {
+                let new_entry = Object.assign({}, mealPlan)
+                new_entry.fromDate = targetDate
+                new_entry.toDate = DateTime.fromJSDate(targetDate).plus(fromToDiff).toJSDate()
+
+                //this.createEntry(new_entry) //TODO implement once API works
+            } else {
+                mealPlan.fromDate = targetDate
+                mealPlan.toDate = DateTime.fromJSDate(targetDate).plus(fromToDiff).toJSDate()
+                console.log(mealPlan.fromDate, mealPlan.toDate)
+                //this.saveEntry(entry) //TODO implement once API works
+            }
+        }
+    })
+}
+
+</script>
+
+
+<style scoped>
+/* TODO remove unused styles */
+
+.slide-fade-enter-active {
+    transition: all 0.3s ease;
+}
+
+.slide-fade-leave-active {
+    transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+    transform: translateY(10px);
+    opacity: 0;
+}
+
+.calender-row {
+    height: calc(100vh - 140px);
+}
+
+.calender-parent {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    height: 100%
+}
+
+.cv-item {
+    white-space: inherit !important;
+    padding: 0;
+    border-radius: 3px !important;
+}
+
+
+.isHovered {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.cv-day.draghover {
+    box-shadow: inset 0 0 0.2em 0.2em rgb(221, 191, 134) !important;
+}
+
+.modal-backdrop {
+    opacity: 0.5;
+}
+
+/*
+**************************************************************
+This theme is the default shipping theme, it includes some
+decent defaults, but is separate from the calendar component
+to make it easier for users to implement their own themes w/o
+having to override as much.
+**************************************************************
+*/
+
+/* Header */
+
+.theme-default .cv-header,
+.theme-default .cv-header-day {
+    background-color: #f0f0f0;
+}
+
+.theme-default .cv-header .periodLabel {
+    font-size: 1.5em;
+}
+
+/* Grid */
+
+.theme-default .cv-weeknumber {
+    background-color: #e0e0e0;
+    border-color: #ccc;
+    color: #808080;
+}
+
+.theme-default .cv-weeknumber span {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.theme-default .cv-day.past {
+    background-color: #fafafa;
+}
+
+.theme-default .cv-day.outsideOfMonth {
+    background-color: #f7f7f7;
+}
+
+.theme-default .cv-day.today {
+    background-color: #ffe;
+}
+
+.theme-default .cv-day[aria-selected] {
+    background-color: #ffc;
+}
+
+/* Events */
+
+.theme-default .cv-item {
+    border-color: #e0e0f0;
+    border-radius: 0.5em;
+    background-color: #fff;
+    text-overflow: ellipsis;
+}
+
+.theme-default .cv-item.purple {
+    background-color: #f0e0ff;
+    border-color: #e7d7f7;
+}
+
+.theme-default .cv-item.orange {
+    background-color: #ffe7d0;
+    border-color: #f7e0c7;
+}
+
+.theme-default .cv-item.continued::before,
+.theme-default .cv-item.toBeContinued::after {
+    /*
+    removed because it breaks a line and would increase item size https://github.com/TandoorRecipes/recipes/issues/2678
+    content: " \21e2 ";
+    color: #999;
+     */
+    content: "";
+}
+
+.theme-default .cv-item.toBeContinued {
+    border-right-style: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.theme-default .cv-item.isHovered.hasUrl {
+    text-decoration: underline;
+}
+
+.theme-default .cv-item.continued {
+    border-left-style: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.cv-item.span3,
+.cv-item.span4,
+.cv-item.span5,
+.cv-item.span6,
+.cv-item.span7 {
+    text-align: center;
+}
+
+/* Event Times */
+
+.theme-default .cv-item .startTime,
+.theme-default .cv-item .endTime {
+    font-weight: bold;
+    color: #666;
+}
+
+/* Drag and drop */
+
+.theme-default .cv-day.draghover {
+    box-shadow: inset 0 0 0.2em 0.2em yellow;
+}
+
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+
+@media (max-width: 767.9px) {
+    .periodLabel {
+        font-size: 18px !important;
+    }
+}
+
+.b-calendar-grid-help {
+    padding: 0.25rem;
+}
+</style>
\ No newline at end of file
diff --git a/vue3/src/pages/MealPlanPage.vue b/vue3/src/pages/MealPlanPage.vue
index 7f1b2528c..c23a37e1d 100644
--- a/vue3/src/pages/MealPlanPage.vue
+++ b/vue3/src/pages/MealPlanPage.vue
@@ -1,270 +1,14 @@
 <template>
+    <meal-plan-view></meal-plan-view>
 
-    <v-row class="h-100">
-        <v-col>
-            <CalendarView
-                :items="planItems"
-                class="theme-default"
-                :item-content-height="calendarItemHeight"
-            :enable-drag-drop="true"
-            @dropOnDate="dropCalendarItemOnDate">
-                <template #item="{ value, weekStartDate, top }">
-                    <meal-plan-calendar-item :item-height="calendarItemHeight" :value="value" :item-top="top"></meal-plan-calendar-item>
-                </template>
-            </CalendarView>
-        </v-col>
-    </v-row>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
 
-import {VCalendar} from 'vuetify/labs/VCalendar'
-import {ApiApi, MealPlan} from "@/openapi";
+import MealPlanView from "@/components/display/MealPlanView.vue";
 
-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";
-import {DateTime} from "luxon";
-
-
-export default defineComponent({
-    name: "MealPlanPage",
-    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
-        },
-        calendarItemHeight: function (){
-            return '2.6rem' //TODO switch depending on display size
-        }
-    },
-    data() {
-        return {
-            mealPlans: [] as MealPlan[]
-        }
-    },
-    mounted() {
-        let api = new ApiApi()
-        api.apiMealPlanList().then(r => {
-            this.mealPlans = r
-        })
-    },
-    methods: {
-        dropCalendarItemOnDate(item: IMealPlanNormalizedCalendarItem, targetDate: Date, event: DragEvent){
-            console.log(item, targetDate, event)
-            //TODO item is undefined because we have a custom item that does not set the state correctly
-            this.mealPlans.forEach(mealPlan => {
-                if (mealPlan.id == item.originalItem.mealPlan.id){
-                    let fromToDiff = DateTime.fromJSDate(mealPlan.fromDate).diff(DateTime.fromJSDate(mealPlan.toDate), 'days')
-
-                    if (event.ctrlKey) {
-                        let new_entry = Object.assign({}, mealPlan)
-                        new_entry.fromDate = targetDate
-                        new_entry.toDate = DateTime.fromJSDate(targetDate).plus(fromToDiff).toJSDate()
-                        //this.createEntry(new_entry)
-                    } else {
-                        mealPlan.fromDate = targetDate
-                        mealPlan.toDate = DateTime.fromJSDate(targetDate).plus(fromToDiff).toJSDate()
-                        //this.saveEntry(entry)
-                    }
-                }
-            })
-        }
-    }
-
-})
 </script>
 
 <style scoped>
-.slide-fade-enter-active {
-    transition: all 0.3s ease;
-}
 
-.slide-fade-leave-active {
-    transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slide-fade-enter,
-.slide-fade-leave-to {
-    transform: translateY(10px);
-    opacity: 0;
-}
-
-.calender-row {
-    height: calc(100vh - 140px);
-}
-
-.calender-parent {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    height: 100%
-}
-
-.cv-item {
-    white-space: inherit !important;
-    padding: 0;
-    border-radius: 3px !important;
-}
-
-
-.isHovered {
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-}
-
-.cv-day.draghover {
-    box-shadow: inset 0 0 0.2em 0.2em rgb(221, 191, 134) !important;
-}
-
-.modal-backdrop {
-    opacity: 0.5;
-}
-
-/*
-**************************************************************
-This theme is the default shipping theme, it includes some
-decent defaults, but is separate from the calendar component
-to make it easier for users to implement their own themes w/o
-having to override as much.
-**************************************************************
-*/
-
-/* Header */
-
-.theme-default .cv-header,
-.theme-default .cv-header-day {
-    background-color: #f0f0f0;
-}
-
-.theme-default .cv-header .periodLabel {
-    font-size: 1.5em;
-}
-
-/* Grid */
-
-.theme-default .cv-weeknumber {
-    background-color: #e0e0e0;
-    border-color: #ccc;
-    color: #808080;
-}
-
-.theme-default .cv-weeknumber span {
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.theme-default .cv-day.past {
-    background-color: #fafafa;
-}
-
-.theme-default .cv-day.outsideOfMonth {
-    background-color: #f7f7f7;
-}
-
-.theme-default .cv-day.today {
-    background-color: #ffe;
-}
-
-.theme-default .cv-day[aria-selected] {
-    background-color: #ffc;
-}
-
-/* Events */
-
-.theme-default .cv-item {
-    border-color: #e0e0f0;
-    border-radius: 0.5em;
-    background-color: #fff;
-    text-overflow: ellipsis;
-}
-
-.theme-default .cv-item.purple {
-    background-color: #f0e0ff;
-    border-color: #e7d7f7;
-}
-
-.theme-default .cv-item.orange {
-    background-color: #ffe7d0;
-    border-color: #f7e0c7;
-}
-
-.theme-default .cv-item.continued::before,
-.theme-default .cv-item.toBeContinued::after {
-    /*
-    removed because it breaks a line and would increase item size https://github.com/TandoorRecipes/recipes/issues/2678
-    content: " \21e2 ";
-    color: #999;
-     */
-    content: "";
-}
-
-.theme-default .cv-item.toBeContinued {
-    border-right-style: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.theme-default .cv-item.isHovered.hasUrl {
-    text-decoration: underline;
-}
-
-.theme-default .cv-item.continued {
-    border-left-style: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.cv-item.span3,
-.cv-item.span4,
-.cv-item.span5,
-.cv-item.span6,
-.cv-item.span7 {
-    text-align: center;
-}
-
-/* Event Times */
-
-.theme-default .cv-item .startTime,
-.theme-default .cv-item .endTime {
-    font-weight: bold;
-    color: #666;
-}
-
-/* Drag and drop */
-
-.theme-default .cv-day.draghover {
-    box-shadow: inset 0 0 0.2em 0.2em yellow;
-}
-
-.ghost {
-    opacity: 0.5;
-    background: #c8ebfb;
-}
-
-@media (max-width: 767.9px) {
-    .periodLabel {
-        font-size: 18px !important;
-    }
-}
-
-.b-calendar-grid-help {
-    padding: 0.25rem;
-}
 </style>
\ No newline at end of file