diff --git a/frontend/composables/use-group-mealplan.ts b/frontend/composables/use-group-mealplan.ts
index ce7e7ab3b97d..b1cbd7b0287d 100644
--- a/frontend/composables/use-group-mealplan.ts
+++ b/frontend/composables/use-group-mealplan.ts
@@ -1,5 +1,5 @@
-import { useAsync, ref } from "@nuxtjs/composition-api";
-import { addDays, subDays, format } from "date-fns";
+import { useAsync, ref, Ref, watch } from "@nuxtjs/composition-api";
+import { format } from "date-fns";
 import { useAsyncKey } from "./use-utils";
 import { useUserApi } from "~/composables/api";
 import { CreateMealPlan, UpdateMealPlan } from "~/api/class-interfaces/group-mealplan";
@@ -13,7 +13,12 @@ export const planTypeOptions = [
   { text: "Snack", value: "snack" },
 ];
 
-export const useMealplans = function () {
+export interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+export const useMealplans = function (range: Ref<DateRange>) {
   const api = useUserApi();
   const loading = ref(false);
   const validForm = ref(true);
@@ -23,8 +28,8 @@ export const useMealplans = function () {
       loading.value = true;
       const units = useAsync(async () => {
         const query = {
-          start: format(subDays(new Date(), 30), "yyyy-MM-dd"),
-          limit: format(addDays(new Date(), 30), "yyyy-MM-dd"),
+          start: format(range.value.start, "yyyy-MM-dd"),
+          limit: format(range.value.end, "yyyy-MM-dd"),
         };
         // @ts-ignore
         const { data } = await api.mealplans.getAll(query.start, query.limit);
@@ -38,8 +43,8 @@ export const useMealplans = function () {
     async refreshAll() {
       loading.value = true;
       const query = {
-        start: format(subDays(new Date(), 30), "yyyy-MM-dd"),
-        limit: format(addDays(new Date(), 30), "yyyy-MM-dd"),
+        start: format(range.value.start, "yyyy-MM-dd"),
+        limit: format(range.value.end, "yyyy-MM-dd"),
       };
       // @ts-ignore
       const { data } = await api.mealplans.getAll(query.start, query.limit);
@@ -90,5 +95,7 @@ export const useMealplans = function () {
 
   const mealplans = actions.getAll();
 
+  watch(range, actions.refreshAll);
+
   return { mealplans, actions, validForm, loading };
 };
diff --git a/frontend/pages/meal-plan/planner.vue b/frontend/pages/meal-plan/planner.vue
index f2fdc2ef88c2..446fb56c5bb0 100644
--- a/frontend/pages/meal-plan/planner.vue
+++ b/frontend/pages/meal-plan/planner.vue
@@ -200,7 +200,7 @@
     </v-row>
   </v-container>
 </template>
-  
+
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs, watch } from "@nuxtjs/composition-api";
 import { isSameDay, addDays, subDays, parseISO, format } from "date-fns";
@@ -218,19 +218,25 @@ export default defineComponent({
     RecipeCard,
   },
   setup() {
-    const { mealplans, actions, loading } = useMealplans();
-
-    useRecipes(true, true);
     const state = reactive({
       createMealDialog: false,
       edit: false,
       hover: {},
       pickerMenu: null,
-      start: null as Date | null,
       today: new Date(),
-      end: null as Date | null,
     });
 
+    const weekRange = computed(() => {
+      return {
+        start: subDays(state.today, 1),
+        end: addDays(state.today, 6),
+      };
+    });
+
+    const { mealplans, actions, loading } = useMealplans(weekRange);
+
+    useRecipes(true, true);
+
     function filterMealByDate(date: Date) {
       if (!mealplans.value) return;
       return mealplans.value.filter((meal) => {
@@ -241,13 +247,11 @@ export default defineComponent({
 
     function forwardOneWeek() {
       if (!state.today) return;
-      // @ts-ignore
       state.today = addDays(state.today, +5);
     }
 
     function backOneWeek() {
       if (!state.today) return;
-      // @ts-ignore
       state.today = addDays(state.today, -5);
     }
 
@@ -282,16 +286,7 @@ export default defineComponent({
       });
     });
 
-    const weekRange = computed(() => {
-      // @ts-ignore - Not Sure Why This is not working
-      const end = addDays(state.today, 6);
-      // @ts-ignore - Not sure why the type is invalid
-      const start = subDays(state.today, 1);
-      return { start, end, today: state.today };
-    });
-
     const days = computed(() => {
-      if (weekRange.value?.start === null) return [];
       return Array.from(Array(8).keys()).map(
         // @ts-ignore
         (i) => new Date(weekRange.value.start.getTime() + i * 24 * 60 * 60 * 1000)
@@ -390,4 +385,3 @@ export default defineComponent({
   border-bottom: 2px solid var(--v-primary-base) !important;
 }
 </style>
-  
\ No newline at end of file