diff --git a/cookbook/templates/meal_plan.html b/cookbook/templates/meal_plan.html
index baf3deccf..a622a6afe 100644
--- a/cookbook/templates/meal_plan.html
+++ b/cookbook/templates/meal_plan.html
@@ -24,10 +24,6 @@
 {% block content %}
 
     <div id="app">
-        <h3>
-            {% trans 'Meal-Plan' %}
-        </h3>
-
         <div class="row">
             <div class="col-md-4 offset-md-4">
                 <div class="input-group" style="margin-top: 8px; margin-bottom: 8px">
@@ -47,7 +43,6 @@
             </div>
         </div>
 
-
         <div class="row">
             <div class="col-md-12">
                 <table class="table table-sm table-striped table-responsive-sm">
@@ -74,10 +69,10 @@
                                             <a href="#" v-if="element.title !== ''"
                                                @click="plan_detail = element" data-toggle="modal"
                                                data-target="#exampleModal">[[element.title]]</a>
-                                            <a href="#" v-if="element.recipe_name !== ''" @click="plan_detail = element"
+                                            <a href="#" v-else-if="element.recipe_name !== ''" @click="plan_detail = element"
                                                data-toggle="modal"
                                                data-target="#exampleModal">[[element.recipe_name]]</a>
-                                            <a href="#" v-if="element.name !== ''"
+                                            <a href="#" v-else-if="element.name !== ''"
                                                @click="plan_detail = element" data-toggle="modal"
                                                data-target="#exampleModal">[[element.name]]</a>
                                         </div>
@@ -92,51 +87,48 @@
         </div>
 
         <hr/>
-        <div class="row">
-            <div class="col-md-6">
-                <div class="card">
-                    <div class="card-header">
-                        {% trans 'Recipes' %}
-                    </div>
+        <div class="card">
+            <div class="card-header">
+                <i class="fas fa-calendar-plus"></i> {% trans 'New Entry' %}
+            </div>
+            <div class="row">
+                <div class="col-md-6">
+
                     <div class="card-body">
                         <div class="row">
                             <div class="col-md-12">
                                 <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
-                                       placeholder="{% trans 'Search Recipe' %}">
+                                       placeholder="{% trans 'Search Recipe' %}" style="margin-bottom: 8px">
                                 <!-- TODO remove recipes by backdropping them -->
                             </div>
                         </div>
-
                         <draggable class="list-group" :list="recipes"
                                    :group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneRecipe">
                             <div class="list-group-item" v-for="(element, index) in recipes" :key="element.id">
-                                <a href="#">[[element.name]]</a>
+                                <i class="fas fa-arrows-alt"></i> <a href="#">[[element.name]]</a>
                             </div>
                         </draggable>
                     </div>
                 </div>
+                <div class="col-md-6">
+                    <div>
 
-            </div>
-            <div class="col-md-6">
-                <div :key="-1">
-                    <div class="card">
-                        <div class="card-header">
-                            {% trans 'New Note' %}
-                        </div>
                         <div class="card-body">
                             <input type="text" class="form-control" v-model="new_note_title"
-                                   placeholder="{% trans 'Title' %}">
+                                   placeholder="{% trans 'Title' %}" style="margin-bottom: 8px">
                             <textarea class="form-control" v-model="new_note_text"
                                       placeholder="{% trans 'Note (optional)' %}"></textarea>
 
+                            <br/>
                             <draggable :list="pseudo_note_list"
                                        :group="{ name: 'plan', pull: 'clone', put: false }" :clone="cloneNote">
                                 <div class="list-group-item" v-for="(element, index) in pseudo_note_list"
                                      :key="element.id">
-                                    <button class="btn">{% trans 'Drag me' %}</button>
+                                    <i class="fas fa-arrows-alt"></i> {% trans 'Create only note' %}
                                 </div>
                             </draggable>
                         </div>
+
                     </div>
                 </div>
             </div>
@@ -156,8 +148,8 @@
                             <template v-if="plan_detail.title !==''">[[ plan_detail.title ]]</template>
                             <template v-else>[[ plan_detail.recipe_name ]]</template>
                             <small
-                                class="text-muted"><br/>[[ plan_detail.meal_type_name ]] [[
-                            formatLocalDate(plan_detail.date) ]]</small>
+                                    class="text-muted"><br/>[[ plan_detail.meal_type_name ]] [[
+                                formatLocalDate(plan_detail.date) ]]</small>
                         </h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
@@ -219,7 +211,7 @@
                 plan_entries: [],
                 meal_types: [],
                 meal_plan: {},
-                plan_detail: {shared:[]},
+                plan_detail: {shared: []},
                 recipes: [],
                 recipe_query: '',
                 pseudo_note_list: [
@@ -236,7 +228,7 @@
 
                 this.default_shared_users = [{% for u in request.user.userpreference.plan_share.all %}
                     {{ u.pk }},
-                {% endfor %}]
+                {% endfor %} {{ request.user.pk }}]
 
                 this.user_id_update = Array.from(this.default_shared_users)
 
@@ -292,7 +284,7 @@
                         this.meal_plan[e.meal_type].days[e.date].items.push(e)
 
                         for (let u of e.shared) {
-                            if (! this.user_id_update.includes(parseInt(u))){
+                            if (!this.user_id_update.includes(parseInt(u))) {
                                 this.user_id_update.push(parseInt(u))
                             }
                         }
@@ -312,9 +304,9 @@
                         console.log(err);
                     })
                 },
-                updateUserNames: function(){
+                updateUserNames: function () {
                     console.log("UPDATE USER NAMES EXECUTED")
-                    return this.$http.get("{% url 'api:username-list' %}?filter_list=["+this.user_id_update+']').then((response) => {
+                    return this.$http.get("{% url 'api:username-list' %}?filter_list=[" + this.user_id_update + ']').then((response) => {
                         for (let u of response.data) {
                             let name = u.username
                             if (`${u.first_name} ${u.last_name}` !== ' ') {
@@ -375,6 +367,8 @@
                         id: Math.round(Math.random() * 1000) + 10000,
                         recipe: recipe.id,
                         recipe_name: recipe.name,
+                        title: this.new_note_title,
+                        note: this.new_note_text,
                         is_new: true
                     }
                 },