diff --git a/cookbook/tests/api/test_api_related_recipe.py b/cookbook/tests/api/test_api_related_recipe.py
index ce6221880..1a381ed5c 100644
--- a/cookbook/tests/api/test_api_related_recipe.py
+++ b/cookbook/tests/api/test_api_related_recipe.py
@@ -65,7 +65,6 @@ def test_related_mixed_space(request, recipe,  u1_s2):
             reverse(RELATED_URL, args={recipe.id})).content)) == 0
 
 
-# TODO add tests for mealplan related when thats added
 # TODO if/when related recipes includes multiple levels (related recipes of related recipes) add the following tests
 #   -- step recipes included in step recipes
 #   -- step recipes included in food recipes
diff --git a/cookbook/tests/api/test_api_shopping_recipe.py b/cookbook/tests/api/test_api_shopping_recipe.py
index 6b0630c8b..37ac53ba6 100644
--- a/cookbook/tests/api/test_api_shopping_recipe.py
+++ b/cookbook/tests/api/test_api_shopping_recipe.py
@@ -229,7 +229,6 @@ def test_shopping_recipe_mixed_authors(u1_s1, u2_s1):
         assert len(json.loads(u2_s1.get(reverse(SHOPPING_LIST_URL)).content)) == 0
 
 
-# TODO test adding recipe with ingredients that are not food
 @pytest.mark.parametrize("recipe", [{'steps__ingredients__header': 1}], indirect=['recipe'])
 def test_shopping_with_header_ingredient(u1_s1, recipe):
     # with scope(space=recipe.space):
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index 8efde72ab..9b7571fc8 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -1,5 +1,6 @@
 <template>
     <div id="app" style="margin-bottom: 4vh">
+        <RecipeSwitcher mode="mealplan" />
         <div class="row">
             <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
                 <div class="row">
@@ -244,6 +245,7 @@ import RecipeCard from "@/components/RecipeCard"
 import GenericMultiselect from "@/components/GenericMultiselect"
 import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 
 Vue.use(BootstrapVue)
 
@@ -252,7 +254,7 @@ let SETTINGS_COOKIE_NAME = "search_settings"
 export default {
     name: "RecipeSearchView",
     mixins: [ResolveUrlMixin, ApiMixin],
-    components: { GenericMultiselect, RecipeCard, Treeselect },
+    components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher },
     data() {
         return {
             // this.Models and this.Actions inherited from ApiMixin
diff --git a/vue/src/components/Buttons/RecipeSwitcher.vue b/vue/src/components/Buttons/RecipeSwitcher.vue
index 73d062a99..ddf6667ec 100644
--- a/vue/src/components/Buttons/RecipeSwitcher.vue
+++ b/vue/src/components/Buttons/RecipeSwitcher.vue
@@ -34,9 +34,11 @@
 
 <script>
 const { ApiApiFactory } = require("@/utils/openapi/api")
+import { ResolveUrlMixin } from "@/utils/utils"
 
 export default {
     name: "RecipeSwitcher",
+    mixins: [ResolveUrlMixin],
     props: {
         recipe: { type: Number, default: undefined },
         name: { type: String, default: undefined },
@@ -64,7 +66,14 @@ export default {
     },
     mounted() {
         this.recipes = []
-        this.loadRecipes()
+        switch (this.mode) {
+            case "recipe":
+                this.loadRecipes()
+                break
+            case "mealplan":
+                this.loadMealPlans()
+                break
+        }
     },
 
     methods: {
@@ -74,7 +83,8 @@ export default {
                     this.$emit("switch", recipe)
                     break
                 case "mealplan":
-                    console.log("navigate to", recipe)
+                    console.log("navigate to")
+                    window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
                     break
                 default:
                     console.log(this.mode, " isn't defined.")
@@ -82,7 +92,7 @@ export default {
         },
         loadRecipes: function () {
             let apiClient = new ApiApiFactory()
-            let today = new Date(Date.now()).toISOString().split("T")[0]
+
             apiClient
                 .relatedRecipe(this.recipe, { query: { levels: 2 } })
                 // get related recipes and save them for later
@@ -91,39 +101,44 @@ export default {
                 })
                 // get all recipes for today
                 .then(() => {
-                    apiClient
-                        .listMealPlans({
-                            query: {
-                                from_date: today,
-                                to_date: today,
-                            },
-                        })
-                        .then((result) => {
-                            let promises = []
-                            result.data.forEach((mealplan) => {
-                                this.recipe_list.push(mealplan?.recipe)
+                    this.loadMealPlans()
+                })
+        },
+        loadMealPlans: function () {
+            let apiClient = new ApiApiFactory()
+            let today = new Date(Date.now()).toISOString().split("T")[0]
+            apiClient
+                .listMealPlans({
+                    query: {
+                        from_date: today,
+                        to_date: today,
+                    },
+                })
+                .then((result) => {
+                    let promises = []
+                    result.data.forEach((mealplan) => {
+                        this.recipe_list.push(mealplan?.recipe)
+                        promises.push(
+                            apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
+                                this.recipe_list = [...this.recipe_list, ...r.data]
+                            })
+                        )
+                    })
+                    return Promise.all(promises).then(() => {
+                        let promises = []
+                        let dedup = []
+                        this.recipe_list.forEach((recipe) => {
+                            if (!dedup.includes(recipe.id)) {
+                                dedup.push(recipe.id)
                                 promises.push(
-                                    apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
-                                        this.recipe_list = [...this.recipe_list, ...r.data]
+                                    apiClient.retrieveRecipe(recipe.id).then((result) => {
+                                        this.recipes.push(result.data)
                                     })
                                 )
-                            })
-                            return Promise.all(promises).then(() => {
-                                let promises = []
-                                let dedup = []
-                                this.recipe_list.forEach((recipe) => {
-                                    if (!dedup.includes(recipe.id)) {
-                                        dedup.push(recipe.id)
-                                        promises.push(
-                                            apiClient.retrieveRecipe(recipe.id).then((result) => {
-                                                this.recipes.push(result.data)
-                                            })
-                                        )
-                                    }
-                                })
-                                return Promise.all(promises)
-                            })
+                            }
                         })
+                        return Promise.all(promises)
+                    })
                 })
         },
     },