diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index 1a034d065..95d45ffc3 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -269,13 +269,17 @@ export default defineNuxtComponent({
       recipeName: props.name,
       loading: false,
       menuItems: [] as ContextMenuItem[],
-      newMealdate: new Date(Date.now() - new Date().getTimezoneOffset() * 60000),
+      newMealdate: new Date(),
       newMealType: "dinner" as PlanEntryType,
       pickerMenu: false,
     });
 
     const newMealdateString = computed(() => {
-      return state.newMealdate.toISOString().substring(0, 10);
+      // Format the date to YYYY-MM-DD in the same timezone as newMealdate
+      const year = state.newMealdate.getFullYear();
+      const month = String(state.newMealdate.getMonth() + 1).padStart(2, "0");
+      const day = String(state.newMealdate.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
     });
 
     const i18n = useI18n();
diff --git a/frontend/pages/household/mealplan/planner.vue b/frontend/pages/household/mealplan/planner.vue
index 273a466d4..df05e04c3 100644
--- a/frontend/pages/household/mealplan/planner.vue
+++ b/frontend/pages/household/mealplan/planner.vue
@@ -5,7 +5,6 @@
       :close-on-content-click="false"
       transition="scale-transition"
       offset-y
-      max-width="290px"
       min-width="auto"
     >
       <template #activator="{ props }">
@@ -20,29 +19,26 @@
           {{ $d(weekRange.start, "short") }} - {{ $d(weekRange.end, "short") }}
         </v-btn>
       </template>
-      <v-date-picker
-        v-model="state.range"
-        hide-header
-        :multiple="'range'"
-        :first-day-of-week="firstDayOfWeek"
-        :local="$i18n.locale"
-      >
-        <v-text-field
-          v-model="numberOfDays"
-          type="number"
-          :label="$t('meal-plan.numberOfDays-label')"
-          :hint="$t('meal-plan.numberOfDays-hint')"
-          persistent-hint
+
+      <v-card>
+        <v-date-picker
+          v-model="state.range"
+          hide-header
+          :multiple="'range'"
+          :first-day-of-week="firstDayOfWeek"
+          :local="$i18n.locale"
         />
-        <v-spacer />
-        <v-btn
-          variant="text"
-          color="primary"
-          @click="state.picker = false"
-        >
-          {{ $t("general.ok") }}
-        </v-btn>
-      </v-date-picker>
+
+        <v-card-text>
+          <v-text-field
+            v-model="numberOfDays"
+            type="number"
+            :label="$t('meal-plan.numberOfDays-label')"
+            :hint="$t('meal-plan.numberOfDays-hint')"
+            persistent-hint
+          />
+        </v-card-text>
+      </v-card>
     </v-menu>
 
     <div class="d-flex flex-wrap align-center justify-space-between mb-2">