diff --git a/web/vue/src/App.vue b/web/vue/src/App.vue
index 45d9159..1a8d03b 100644
--- a/web/vue/src/App.vue
+++ b/web/vue/src/App.vue
@@ -2,14 +2,14 @@
   <div id="app">
     <Heading msg="Cook-Assistant"/>
     <section class="section" id="recipes-view">
-      <p v-if="status.loading">Loading...</p>
+      <div v-if="status.loading" class="notification is-info">Loading...</div>
       <div v-if="status.error" class="notification is-danger">Error: {{ status.error_msg }}</div>
-      <h2 v-else class="subtitle">Livre de recettes</h2>
       <div class="container">
         <keep-alive>
         <RecipeDetails v-if="active_view > -1"
           v-bind:item="items[active_view]"
-          v-on:close="closeActiveView" />
+          v-on:close="closeActiveView"
+          v-on:add="addToPlanning" />
         <RecipeList v-else
           v-bind:items="items"
           v-on:open-details="setActiveView" />
@@ -18,7 +18,7 @@
     </section>
     <section class="section has-background-grey-lighter" id="planner-view">
       <h2 class="subtitle">Planning</h2>
-      <Planner />
+      <Planner ref="weekPlanning" />
     </section>
   </div>
 </template>
@@ -60,6 +60,11 @@ export default {
     closeActiveView: function() {
       this.active_view = -1;
     },
+    addToPlanning: function(idx) {
+      let mealKey = ["Lundi", "Lunch"];
+      let mealData = this.items[idx];
+      this.$refs.weekPlanning.setMeal(mealKey, mealData);
+    },
     deleteRecipe: function(id) {
       fetch("http://localhost:8000/api/delete/" + id)
         .then((res) => res.json())
@@ -87,10 +92,14 @@ export default {
           this.statue.error_msg = err;
           console.error(err);
         });
+    },
+    initWeekPlanning: function() {
+      this.$refs.weekPlanning.fetchSolution();
     }
   },
   mounted () {
     this.fetchRecipesList();
+    this.initWeekPlanning();
   }
 }
 </script>
diff --git a/web/vue/src/components/Heading.vue b/web/vue/src/components/Heading.vue
index c24b77c..b399376 100644
--- a/web/vue/src/components/Heading.vue
+++ b/web/vue/src/components/Heading.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar" role="navigation" aria-label="main navigation">
+  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <a class="navbar-item" href="#">
       {{ msg }}
diff --git a/web/vue/src/components/Planner.vue b/web/vue/src/components/Planner.vue
index b278836..4d9baea 100644
--- a/web/vue/src/components/Planner.vue
+++ b/web/vue/src/components/Planner.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="box">
     <button @click="fetchSolution"
-            class="button is-primary"
+            class="button is-primary is-fullwidth"
             v-bind:class="{'is-loading': is_loading }">
     FetchSolution</button>
-    <hr />
     <div v-if="template">
-      <div class="columns is-desktop is-vcentered is-multiline">
+      <div class="columns is-mobile is-vcentered is-multiline">
         <div v-for="day_meals in itemsGroupedByDay"
-             class="column is-one-quarter">
-          <strong> {{ day_meals[0] }}</strong>
+             class="column is-one-quarter-desktop is-half-mobile">
+          <p class="subtitle"><strong> {{ day_meals[0] }}</strong></p>
           <div v-for="meal in day_meals[1]">
-            <div v-if="meal.value" class="tags has-addons">
+            <p v-if="meal.value" class="tags has-addons">
               <span class="tag is-info">{{ meal.key[1] }}</span>
               <span class="tag is-light">{{ meal.value.title }}</span>
               <a @click="unsetMeal(meal.key)"
                  class="tag is-delete"></a>
-            </div>
+            </p>
             <div v-else class="tag is-warning">Empty</div>
           </div>
         </div>
@@ -75,6 +74,15 @@ export default {
         return item.key == mealKey;
       });
       this.template.items[idx].value = null;
+      //console.log("vm" + this.vm.items);
+    },
+    setMeal: function(mealKey, mealData) {
+      let idx = this.template.items.findIndex((item) => {
+        return (item.key[0] == mealKey[0]
+             && item.key[1] == mealKey[1]);
+      });
+      console.log(idx)
+      this.template.items[idx].value = mealData;
     }
   },
   computed: {
diff --git a/web/vue/src/components/RecipeDetails.vue b/web/vue/src/components/RecipeDetails.vue
index 71c98c7..83ea33f 100644
--- a/web/vue/src/components/RecipeDetails.vue
+++ b/web/vue/src/components/RecipeDetails.vue
@@ -1,11 +1,19 @@
 <template>
   <div class="columns">
     <div class="column is-narrow">
-      <a @click="$emit('close')" class="has-text-dark">
+      <a @click="$emit('close')"
+         class="has-text-dark">
         <span class="icon is-large">
           <i class="mdi mdi-48px mdi-view-list"></i>
         </span>
       </a>
+      <br class="is-hidden-mobile"/>
+      <a @click="$emit('add', item.id)"
+         class="has-text-success">
+        <span class="icon is-large">
+          <i class="mdi mdi-36px mdi-table-plus"></i>
+        </span>
+      </a>
     </div>
     <div class="column">
       <h4 class="title">{{ item.title }}</h4>
diff --git a/web/vue/src/components/RecipeList.vue b/web/vue/src/components/RecipeList.vue
index 30eff29..8330bf1 100644
--- a/web/vue/src/components/RecipeList.vue
+++ b/web/vue/src/components/RecipeList.vue
@@ -20,7 +20,7 @@
         </a>
       </div>
       <div class="column">
-        <h2 class="subtitle">{{ categories[active_category].name }}</h2>
+        <h2 class="title">{{ categories[active_category].name }}</h2>
         <ul class="content">
           <li v-for="item in displayed" :key="item.id" class="has-text-left">
             <a href=""