diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 0f9d4b631..00a296c87 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -1,6 +1,6 @@
 from rest_framework import serializers
 
-from cookbook.models import MealPlan, MealType
+from cookbook.models import MealPlan, MealType, Recipe, ViewLog
 
 
 class MealPlanSerializer(serializers.ModelSerializer):
@@ -16,3 +16,15 @@ class MealTypeSerializer(serializers.ModelSerializer):
     class Meta:
         model = MealType
         fields = '__all__'
+
+
+class RecipeSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Recipe
+        fields = '__all__'
+
+
+class ViewLogSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ViewLog
+        fields = '__all__'
diff --git a/cookbook/templates/meal_plan.html b/cookbook/templates/meal_plan.html
index b8c051793..65012ac33 100644
--- a/cookbook/templates/meal_plan.html
+++ b/cookbook/templates/meal_plan.html
@@ -46,6 +46,45 @@
     </h3>
 
     <div id="app">
+
+        <div class="row">
+            <div class="col-md-12">
+                <div class="card">
+
+                    <div class="row">
+                        <div class="col-md-12">
+                            <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes">
+                            <!-- TODO remove recipes by backdropping them -->
+                        </div>
+                    </div>
+
+
+                    <draggable class="row" :list="recipes" group="plan" @change="" :empty-insert-threshold="10">
+                        <div class="col-3" v-for="(element, index) in recipes" :key="element.id">
+                            <div class="card">
+                                <div class="card-body">
+                                    <a href="#">[[element.name]]</a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- new note type entry -->
+                        <div :key="-1">
+                             <div class="card">
+                                <div class="card-body">
+                                    New Note
+                                    <input type="text" class="form-control" v-model="new_note_text">
+
+                                </div>
+                            </div>
+                        </div>
+
+                    </draggable>
+
+                </div>
+            </div>
+        </div>
+
         <table class="table table-sm table-striped">
             <thead class="thead-dark">
             <tr>
@@ -58,13 +97,14 @@
                     [[mp.name]]
                 </td>
             </tr>
-            <tr >
+            <tr>
                 <td v-for="d in mp.days">
                     <draggable class="list-group" :list="d.items" group="plan" style="min-height: 40px"
                                @change="log(d.date, mp.meal_type, $event)"
                                :empty-insert-threshold="10">
                         <div class="list-group-item" v-for="(element, index) in d.items" :key="element.id">
-                            <a href="#" v-if="element.title !== ''" @click="plan_detail = element">[[element.title]]</a>
+                            <a href="#" v-if="element.title !== ''"
+                               @click="plan_detail = element">[[element.title]]</a>
                             <a href="#" v-if="element.title === ''" @click="plan_detail = element">[[element.recipe_name]]</a>
                         </div>
                     </draggable>
@@ -104,15 +144,16 @@
                 meal_types: [],
                 meal_plan: {},
                 plan_detail: undefined,
+                recipes: [],
+                recipe_query: '',
 
             },
             mounted: function () {
                 console.log("MOUNTED")
                 this.getPlanEntries();
             },
-            methods: {
+            methods: { // TODO stop chain loading and do async
                 getPlanEntries: function () {
-                    this.loading = true;
                     this.$http.get("{% url 'api:mealplan-list' %}?week=" + week).then((response) => {
                         this.plan_entries = response.data;
                         this.getPlanTypes();
@@ -123,7 +164,6 @@
                         })
                 },
                 getPlanTypes: function () {
-                    this.loading = true;
                     this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
                         this.meal_types = response.data;
                         this.loading = false;
@@ -154,6 +194,20 @@
                     for (e of this.plan_entries) {
                         this.meal_plan[e.meal_type].days[e.date].items.push(e)
                     }
+                    this.getRecipes();
+                },
+                getRecipes: function () {
+                    let url = "{% url 'api:recipe-list' %}?limit=5"
+                    if (this.recipe_query !== '') {
+                        url += '&query=' + this.recipe_query;
+                    }
+
+                    this.$http.get(url).then((response) => {
+                        this.recipes = response.data;
+                    })
+                        .catch((err) => {
+                            console.log(err);
+                        })
                 },
                 log: function (date, meal_type, evt) {
                     if (evt.added !== undefined) {
diff --git a/cookbook/urls.py b/cookbook/urls.py
index bc9261134..7e08b0e30 100644
--- a/cookbook/urls.py
+++ b/cookbook/urls.py
@@ -8,8 +8,10 @@ from cookbook.views import api, import_export
 from cookbook.helper import dal
 
 router = routers.DefaultRouter()
+router.register(r'recipe', api.RecipeViewSet)
 router.register(r'meal-plan', api.MealPlanViewSet)
 router.register(r'meal-type', api.MealTypeViewSet)
+router.register(r'view-log', api.ViewLogViewSet)
 
 urlpatterns = [
     path('', views.index, name='index'),
diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index 0982d1714..7d00ea7fc 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -9,10 +9,10 @@ from django.utils.translation import gettext as _
 from rest_framework import viewsets, permissions
 
 from cookbook.helper.permission_helper import group_required
-from cookbook.models import Recipe, Sync, Storage, CookLog, MealPlan, MealType
+from cookbook.models import Recipe, Sync, Storage, CookLog, MealPlan, MealType, ViewLog
 from cookbook.provider.dropbox import Dropbox
 from cookbook.provider.nextcloud import Nextcloud
-from cookbook.serializer import MealPlanSerializer, MealTypeSerializer
+from cookbook.serializer import MealPlanSerializer, MealTypeSerializer, RecipeSerializer, ViewLogSerializer
 
 
 class MealPlanViewSet(viewsets.ModelViewSet):
@@ -21,6 +21,7 @@ class MealPlanViewSet(viewsets.ModelViewSet):
     permission_classes = [permissions.IsAuthenticated]
 
     def get_queryset(self):
+        # TODO user filter
         queryset = MealPlan.objects.all()
         week = self.request.query_params.get('week', None)
         if week is not None:
@@ -34,6 +35,34 @@ class MealTypeViewSet(viewsets.ModelViewSet):
     permission_classes = [permissions.IsAuthenticated]
 
 
+class RecipeViewSet(viewsets.ModelViewSet):
+    queryset = Recipe.objects.all()
+    serializer_class = RecipeSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_queryset(self):
+        queryset = Recipe.objects.all()
+        query = self.request.query_params.get('query', None)
+        if query is not None:
+            queryset = queryset.filter(name__icontains=query)
+
+        limit = self.request.query_params.get('limit', None)
+        if limit is not None:
+            queryset = queryset[:int(limit)]
+        return queryset
+
+
+class ViewLogViewSet(viewsets.ModelViewSet):
+    queryset = ViewLog.objects.all()
+    serializer_class = ViewLogSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_queryset(self):
+        # TODO user + unique filter
+        queryset = ViewLog.objects.all()[:5]
+        return queryset
+
+
 def get_recipe_provider(recipe):
     if recipe.storage.method == Storage.DROPBOX:
         return Dropbox