diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index e12a76835..b98ff7337 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app" style="margin-bottom: 4vh">
-        <RecipeSwitcher mode="mealplan" />
+        <RecipeSwitcher ref="ref_recipe_switcher"/>
         <div class="row">
             <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
                 <div class="row">
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 7cf1932a9..d87bce61e 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -5,7 +5,7 @@
         </template>
 
         <div v-if="!loading">
-            <RecipeSwitcher :recipe="rootrecipe.id" :name="rootrecipe.name" mode="recipe" @switch="quickSwitch($event)" />
+            <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" />
             <div class="row">
                 <div class="col-12" style="text-align: center">
                     <h3>{{ recipe.name }}</h3>
diff --git a/vue/src/components/Buttons/RecipeSwitcher.vue b/vue/src/components/Buttons/RecipeSwitcher.vue
index 4a1fa47fe..b6d8daf22 100644
--- a/vue/src/components/Buttons/RecipeSwitcher.vue
+++ b/vue/src/components/Buttons/RecipeSwitcher.vue
@@ -1,55 +1,75 @@
 <template>
     <div v-if="recipes !== {}">
         <div id="switcher" class="align-center">
-            <i class="btn btn-outline-dark fas fa-receipt fa-xl fa-fw shadow-none btn-circle"
+            <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle"
                v-b-toggle.related-recipes/>
         </div>
-        <b-sidebar id="related-recipes" title="Quick actions" backdrop right shadow="sm" style="z-index: 10000">
+        <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
+                   @shown="updatePinnedRecipes()">
             <template #default="{ hide }">
 
-                <nav class="mb-3 ml-3">
-                    <b-nav vertical>
-                        <h5><i class="fas fa-calendar fa-fw"></i> Planned</h5>
+                <div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
 
-                        <div v-for="r in planned_recipes" :key="`plan${r.id}`">
-                            <b-nav-item variant="link" @click="
-                                    navRecipe(r)
-                                    hide()
-                                ">{{ r.name }}
-                            </b-nav-item>
+                    <h5>Planned <i class="fas fa-calendar fa-fw"></i></h5>
+
+                    <div class="text-right">
+                        <template v-if="planned_recipes.length > 0">
+                            <div v-for="r in planned_recipes" :key="`plan${r.id}`">
+                                <div class="pb-1 pt-1">
+                                    <a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <span class="text-muted">You have nothing planned for today!</span>
+                        </template>
+                    </div>
+
+                    <h5>Pinned <i class="fas fa-thumbtack fa-fw"></i></h5>
+
+                    <template v-if="pinned_recipes.length > 0">
+                        <div class="text-right">
+                            <div v-for="r in pinned_recipes" :key="`pin${r.id}`">
+                                <b-row class="pb-1 pt-1">
+                                    <b-col cols="2">
+                                        <a href="javascript:void(0)" @click="unPinRecipe(r)"
+                                           class="text-muted"><i class="fas fa-times"></i></a>
+                                    </b-col>
+                                    <b-col cols="10">
+                                        <a @click="navRecipe(r); hide()" href="javascript:void(0);"
+                                           class="align-self-end">{{ r.name }} </a>
+                                    </b-col>
+
+                                </b-row>
+
+                            </div>
                         </div>
-                        <hr/>
-                        <h5><i class="fas fa-thumbtack fa-fw"></i> Pinned</h5>
+                    </template>
+                    <template v-else>
+                        <span class="text-muted">You have no pinned recipes!</span>
+                    </template>
 
-                        <div v-for="r in pinned_recipes" :key="`pin${r.id}`">
-                            <b-nav-item variant="link" @click="
-                                    navRecipe(r)
-                                    hide()
-                                ">{{ r.name }} <a href="javascript:void(0);">x</a>
-                            </b-nav-item>
+
+                    <template v-if="related_recipes.length > 0">
+                        <h5>Related <i class="fas fa-link fa-fw"></i></h5>
+                        <div class="text-right">
+                            <div v-for="r in related_recipes" :key="`related${r.id}`">
+                                <div class="pb-1 pt-1">
+                                    <a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
+                                </div>
+                            </div>
                         </div>
-                        <hr/>
-                        <h5><i class="fas fa-link fa-fw"></i> Related</h5>
+                    </template>
 
-                        <div v-for="r in related_recipes" :key="`related${r.id}`">
-                            <b-nav-item variant="link" @click="
-                                    navRecipe(r)
-                                    hide()
-                                ">{{ r.name }}
-                            </b-nav-item>
-                        </div>
+                </div>
 
-                        <h5><i class="fas fa-link fa-fw"></i> TEST</h5>
 
-                        <div v-for="r in test" :key="`test${r.id}`">
-                            <b-nav-item variant="link" @click="
-                                    navRecipe(r)
-                                    hide()
-                                ">{{ r.name }}
-                            </b-nav-item>
-                        </div>
-                    </b-nav>
-                </nav>
+            </template>
+            <template #footer="{ hide }">
+                <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
+                    <strong class="mr-auto">Quick actions</strong>
+                    <b-button size="sm" @click="hide">Close</b-button>
+                </div>
             </template>
         </b-sidebar>
     </div>
@@ -71,7 +91,6 @@ export default {
             planned_recipes: [],
             pinned_recipes: [],
             recipes: {},
-            test : []
         }
     },
     computed: {
@@ -95,11 +114,16 @@ export default {
         navRecipe: function (recipe) {
 
             if (this.is_recipe_view) {
-                this.$emit("switch", recipe)
+                this.$emit("switch", this.recipes[recipe.id])
             } else {
                 window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
             }
         },
+        updatePinnedRecipes: function () {
+            //TODO clean this up to prevent duplicate API calls
+            this.loadPinnedRecipes()
+            this.loadRecipeData()
+        },
         loadRecipeData: function () {
             let apiClient = new ApiApiFactory()
 
@@ -113,11 +137,10 @@ export default {
                     recipe_ids.push(id)
                 }
             })
-            console.log(recipe_list, recipe_ids)
+
             recipe_ids.forEach((id) => {
                 apiClient.retrieveRecipe(id).then((result) => {
                     this.recipes[id] = result.data
-                    this.test.push(result.data)
                 })
             })
 
@@ -126,9 +149,10 @@ export default {
             let apiClient = new ApiApiFactory()
 
             // get related recipes and save them for later
-            if (this.recipe){
-                return apiClient.relatedRecipe(this.recipe, {query: {levels: 2}}).then((result) => {
-                    this.related_recipes = result.data
+            if (this.$parent.recipe) {
+                this.related_recipes = [this.$parent.recipe]
+                return apiClient.relatedRecipe(this.$parent.recipe.id, {query: {levels: 2, format: 'json'}}).then((result) => {
+                    this.related_recipes =  this.related_recipes.concat(result.data)
                 })
             }
         },
@@ -159,6 +183,13 @@ export default {
                 return Promise.all(promises)
             })
         },
+        unPinRecipe: function (recipe) {
+            let pinnedRecipes = JSON.parse(localStorage.getItem('pinned_recipes')) || []
+            pinnedRecipes = pinnedRecipes.filter((r) => r.id !== recipe.id)
+            console.log('pinned left', pinnedRecipes)
+            this.pinned_recipes = pinnedRecipes
+            localStorage.setItem('pinned_recipes', JSON.stringify(pinnedRecipes))
+        }
     },
 }
 </script>