diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index c0c8a2c0d..a76c7f051 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/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index d87cd6a60..0000d491c 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -5,6 +5,7 @@
         </template>
 
         <div v-if="!loading">
+            <RecipeSwitcher :recipe="rootrecipe.id" :name="rootrecipe.name" mode="recipe" @switch="quickSwitch($event)" />
             <div class="row">
                 <div class="col-12" style="text-align: center">
                     <h3>{{ recipe.name }}</h3>
@@ -75,12 +76,12 @@
                             />
                         </div>
                         <div class="my-auto">
-                            <span class="text-primary"
-                                ><b
-                                    ><template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template
-                                    ><template v-else>{{ recipe.servings_text }}</template></b
-                                ></span
-                            >
+                            <span class="text-primary">
+                                <b>
+                                    <template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template>
+                                    <template v-else>{{ recipe.servings_text }}</template>
+                                </b>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -172,6 +173,7 @@ import IngredientsCard from "@/components/IngredientsCard"
 import StepComponent from "@/components/StepComponent"
 import KeywordsComponent from "@/components/KeywordsComponent"
 import NutritionComponent from "@/components/NutritionComponent"
+import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 
 Vue.prototype.moment = moment
 
@@ -192,22 +194,32 @@ export default {
         KeywordsComponent,
         LoadingSpinner,
         AddRecipeToBook,
+        RecipeSwitcher,
     },
     computed: {
         ingredient_factor: function () {
             return this.servings / this.recipe.servings
         },
+        ingredient_count() {
+            return this.recipe?.steps.map((x) => x.ingredients).flat().length
+        },
     },
     data() {
         return {
             loading: true,
             recipe: undefined,
-            ingredient_count: 0,
+            rootrecipe: undefined,
             servings: 1,
+            servings_cache: {},
             start_time: "",
             share_uid: window.SHARE_UID,
         }
     },
+    watch: {
+        servings(newVal, oldVal) {
+            this.servings_cache[this.recipe.id] = this.servings
+        },
+    },
     mounted() {
         this.loadRecipe(window.RECIPE_ID)
         this.$i18n.locale = window.CUSTOM_LOCALE
@@ -218,12 +230,9 @@ export default {
                 if (window.USER_SERVINGS !== 0) {
                     recipe.servings = window.USER_SERVINGS
                 }
-                this.servings = recipe.servings
 
                 let total_time = 0
                 for (let step of recipe.steps) {
-                    this.ingredient_count += step.ingredients.length
-
                     for (let ingredient of step.ingredients) {
                         this.$set(ingredient, "checked", false)
                     }
@@ -237,7 +246,8 @@ export default {
                     this.start_time = moment().format("yyyy-MM-DDTHH:mm")
                 }
 
-                this.recipe = recipe
+                this.recipe = this.rootrecipe = recipe
+                this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings
                 this.loading = false
             })
         },
@@ -253,6 +263,15 @@ export default {
                 }
             }
         },
+        quickSwitch: function (e) {
+            if (e === -1) {
+                this.recipe = this.rootrecipe
+                this.servings = this.servings_cache[this.rootrecipe?.id ?? 1]
+            } else {
+                this.recipe = e
+                this.servings = this.servings_cache?.[e.id] ?? e.servings
+            }
+        },
     },
 }
 </script>
diff --git a/vue/src/components/Buttons/RecipeSwitcher.vue b/vue/src/components/Buttons/RecipeSwitcher.vue
new file mode 100644
index 000000000..607155655
--- /dev/null
+++ b/vue/src/components/Buttons/RecipeSwitcher.vue
@@ -0,0 +1,185 @@
+<template>
+    <div v-if="recipes.length > 0">
+        <div id="switcher">
+            <i class="btn btn-outline-dark fas fa-receipt fa-xl shadow-none btn-circle" v-b-toggle.related-recipes />
+        </div>
+        <b-sidebar id="related-recipes" :title="title" backdrop right shadow="sm" style="z-index: 10000">
+            <template #default="{ hide }">
+                <nav class="mb-3">
+                    <b-nav vertical>
+                        <b-nav-item
+                            variant="link"
+                            @click="
+                                navRecipe(-1)
+                                hide()
+                            "
+                            >{{ name }}</b-nav-item
+                        >
+                        <div v-for="r in recipes" :key="r.id">
+                            <b-nav-item
+                                variant="link"
+                                @click="
+                                    navRecipe(r)
+                                    hide()
+                                "
+                                >{{ r.name }}</b-nav-item
+                            >
+                        </div>
+                    </b-nav>
+                </nav>
+            </template>
+        </b-sidebar>
+    </div>
+</template>
+
+<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 },
+        mode: { type: String, default: "recipe" },
+    },
+    data() {
+        return {
+            recipes: [],
+            recipe_list: [],
+        }
+    },
+    computed: {
+        title() {
+            let title = ""
+            switch (this.mode) {
+                case "recipe":
+                    title = this.$t("related_recipes")
+                    break
+                case "mealplan":
+                    title = this.$t("today_recipes")
+                    break
+            }
+            return title
+        },
+    },
+    mounted() {
+        this.recipes = []
+        switch (this.mode) {
+            case "recipe":
+                this.loadRecipes()
+                break
+            case "mealplan":
+                this.loadMealPlans()
+                break
+        }
+    },
+
+    methods: {
+        navRecipe: function (recipe) {
+            switch (this.mode) {
+                case "recipe":
+                    this.$emit("switch", recipe)
+                    break
+                case "mealplan":
+                    window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
+                    break
+                default:
+                    console.log(this.mode, " isn't defined.")
+            }
+        },
+        loadRecipes: function () {
+            let apiClient = new ApiApiFactory()
+
+            apiClient
+                .relatedRecipe(this.recipe, { query: { levels: 2 } })
+                // get related recipes and save them for later
+                .then((result) => {
+                    this.recipe_list = result.data
+                })
+                // get all recipes for today
+                .then(() => {
+                    this.loadMealPlans()
+                })
+        },
+        loadMealPlans: function () {
+            let apiClient = new ApiApiFactory()
+            // TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
+            var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
+            let today = new Date(Date.now() - tzoffset).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, servings: mealplan?.servings })
+                        const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
+                        promises.push(
+                            apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
+                                // scale all recipes to mealplan servings
+                                r.data = r.data.map((x) => {
+                                    return { ...x, factor: serving_factor }
+                                })
+                                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.retrieveRecipe(recipe.id).then((result) => {
+                                        // scale all recipes to mealplan servings
+                                        result.data.servings = recipe?.servings ?? result.data.servings * (recipe?.factor ?? 1)
+                                        this.recipes.push(result.data)
+                                    })
+                                )
+                            }
+                        })
+                        return Promise.all(promises)
+                    })
+                })
+        },
+    },
+}
+</script>
+
+<style>
+.btn-circle {
+    width: 50px;
+    height: 50px;
+    padding: 10px 16px;
+    text-align: center;
+    border-radius: 35px;
+    font-size: 24px;
+    line-height: 1.33;
+    z-index: 9000;
+}
+
+@media screen and (max-width: 600px) {
+    #switcher .btn-circle {
+        position: fixed;
+        top: 9px;
+        left: 80px;
+        color: white;
+    }
+}
+
+@media screen and (max-width: 2000px) {
+    #switcher .btn-circle {
+        position: fixed;
+        bottom: 10px;
+        right: 50px;
+    }
+}
+</style>
diff --git a/vue/src/locales/en.json b/vue/src/locales/en.json
index c718fe126..fcf49e540 100644
--- a/vue/src/locales/en.json
+++ b/vue/src/locales/en.json
@@ -280,5 +280,7 @@
     "mark_complete": "Mark Complete",
     "QuickEntry": "Quick Entry",
     "shopping_add_onhand_desc": "Mark food 'On Hand' when checked off shopping list.",
-    "shopping_add_onhand": "Auto On Hand"
+    "shopping_add_onhand": "Auto On Hand",
+    "related_recipes": "Related Recipes",
+    "today_recipes": "Today's Recipes"
 }