diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index e4e96b964..8244c2472 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -1,9 +1,15 @@
 from rest_framework import serializers
 
-from cookbook.models import MealPlan
+from cookbook.models import MealPlan, MealType
 
 
 class MealPlanSerializer(serializers.ModelSerializer):
     class Meta:
         model = MealPlan
-        fields = ['recipe', 'title', 'note', 'meal_type']
+        fields = '__all__'
+
+
+class MealTypeSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = MealType
+        fields = '__all__'
diff --git a/cookbook/static/js/vue-draggable.min.js b/cookbook/static/js/vue-draggable.min.js
new file mode 100644
index 000000000..91dc71a6d
--- /dev/null
+++ b/cookbook/static/js/vue-draggable.min.js
@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueDraggable",[],e):"object"==typeof exports?exports.VueDraggable=e():t.VueDraggable=e()}(this,(function(){return function(t){var e={};function r(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=t,r.c=e,r.d=function(t,e,i){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(i,n,function(e){return t[e]}.bind(null,n));return i},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,r){"use strict";r.r(e);var i=function(t,e){return t.querySelectorAll(e)},n=function(t,e){return t.querySelectorAll(e)},s=function(t){this.targets=i(t,this.defaultOptions.dropzoneSelector),this.items=n(t,this.defaultOptions.draggableSelector);for(var e=0;e<this.targets.length;e++)this.targets[e].setAttribute("aria-dropeffect","none");for(var r=0;r<this.items.length;r++)this.items[r].setAttribute("draggable","true"),"true"!==this.items[r].getAttribute("aria-grabbed")&&this.items[r].setAttribute("aria-grabbed","false"),this.items[r].setAttribute("tabindex","0")},o=function(t){this.targets=i(t,this.defaultOptions.dropzoneSelector),this.items=n(t,this.defaultOptions.draggableSelector);for(var e=0;e<this.targets.length;e++)this.targets[e].setAttribute("aria-dropeffect","none");for(var r=0;r<this.items.length;r++)this.items[r].setAttribute("draggable","true"),this.items[r].setAttribute("aria-grabbed","false"),this.items[r].setAttribute("tabindex","0")},a=function(){for(var t=document.querySelectorAll(".item-dropzone-area"),e=0;e<t.length;e++)t[e].remove()},l=function(t,e,r){for(var i=r.length,n=0;n<i;n++)r[n]!==e.owner&&"none"===r[n].getAttribute("aria-dropeffect")&&(r[n].setAttribute("aria-dropeffect","move"),r[n].setAttribute("tabindex","0"));for(var s=t.length,o=0;o<s;o++)t[o].parentNode!==e.owner&&t[o].getAttribute("aria-grabbed")&&(t[o].removeAttribute("aria-grabbed"),t[o].removeAttribute("tabindex"))},c=function(t,e,r){if(e.items.length){for(var i=0;i<r.length;i++)"none"!==r[i].getAttribute("aria-dropeffect")&&(r[i].setAttribute("aria-dropeffect","none"),r[i].removeAttribute("tabindex"));for(var n=0;n<t.length;n++)t[n].getAttribute("aria-grabbed")?"true"===t[n].getAttribute("aria-grabbed")&&t[n].setAttribute("tabindex","0"):(t[n].setAttribute("aria-grabbed","false"),t[n].setAttribute("tabindex","0"))}},u=function(t){return t.ctrlKey||t.metaKey||t.shiftKey};function f(t){return function(t){if(Array.isArray(t)){for(var e=0,r=new Array(t.length);e<t.length;e++)r[e]=t[e];return r}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var d=function(t){this.selections.owner||(this.selections.owner=t.parentNode),(this.defaultOptions.multipleDropzonesItemsDraggingEnabled||this.selections.owner===t.parentNode)&&(t.setAttribute("aria-grabbed","true"),this.selections.items=this.selections.items.indexOf(t)>=0?this.selections.items:[].concat(f(this.selections.items),[t]))},h=function(t){t.setAttribute("aria-grabbed","false");for(var e=0;e<this.selections.items.length;e++)if(this.selections.items[e]===t){this.selections.items.splice(e,1);break}},p=function(){if(this.selections.items.length){this.selections.owner=null;for(var t=0;t<this.selections.items.length;t++)this.selections.items[t].setAttribute("aria-grabbed","false");this.selections.items=[]}},g=function(){throw new Error("Requested D&D stop...")};function b(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function m(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var v=function(t,e,r){var i=function(t,e){return new CustomEvent(t,{detail:e})}(t,e);r.dispatchEvent(i)},y=function(t){var e=this.selections.droptarget.querySelectorAll(this.defaultOptions.draggableSelector),r=this.nextItemElement?Array.prototype.indexOf.call(e,this.nextItemElement):e.length,i=function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?b(r,!0).forEach((function(e){m(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):b(r).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}({ids:this.selections.items.map((function(t){return t.dataset.id})),index:r,nativeEvent:t},this.selections);this.selections.droptarget!==this.selections.owner?(v("added",i,this.selections.droptarget),v("removed",i,this.selections.owner)):v("reordered",i,this.selections.droptarget)},O=function(t){if(this.defaultOptions.handlerSelector&&!t.target.closest(this.defaultOptions.handlerSelector))return;var e=t.target.closest(this.defaultOptions.draggableSelector);e&&e.getAttribute("draggable")?(c(this.items,this.selections,this.targets),u(t)||"false"!==e.getAttribute("aria-grabbed")||(p.bind(this)(),d.bind(this)(e))):u(t)?c(this.items,this.selections,this.targets):(c(this.items,this.selections,this.targets),p.bind(this)())},w=function(t,e,r){return t.parentNode===e.parentNode&&(e.offsetTop>r.offsetTop&&t.offsetTop<=e.offsetTop&&t.offsetTop>=r.offsetTop||t.offsetTop>=e.offsetTop&&t.offsetTop<=r.offsetTop)},D=function(t){var e=t.target.closest(this.defaultOptions.draggableSelector);if(e&&e.getAttribute("draggable"))if(u(t))if(this.selections.items.length&&t.shiftKey){var r=this.selections.items.slice(-1).pop();if(this.items&&this.items.length>0)for(var i=0;i<this.items.length;i++){var n=this.items[i];w(n,e,r)&&d.bind(this)(n)}}else"true"===e.getAttribute("aria-grabbed")?(h.bind(this)(e),this.selections.items.length||(this.selections.owner=null)):d.bind(this)(e);else p.bind(this)(),d.bind(this)(e)};function j(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function E(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var P={previousTarget:null,dragoverCalls:0},A=function(t){if(P.dragoverCalls%100==0||t.target!==P.previousTarget&&t.target&&"item-dropzone-area"!==t.target.className){P.dragoverCalls++,P.previousTarget=t.target,this.nextItemElement=t.target.closest(this.defaultOptions.draggableSelector),this.selections.droptarget=t.target.closest(this.defaultOptions.dropzoneSelector);var e=document.createElement("div");e.className="item-dropzone-area",a(),this.selections.droptarget&&this.nextItemElement&&this.selections.droptarget.insertBefore(e,P.previousTarget.closest(this.defaultOptions.draggableSelector)),this.selections.droptarget&&!this.nextItemElement&&this.selections.droptarget.appendChild(e)}},S=function(t){if(this.selections.items.length&&t.preventDefault(),this.defaultOptions.showDropzoneAreas&&(A.bind(this)(t),"function"==typeof this.defaultOptions.onDragover))try{this.defaultOptions.onDragover(function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?j(r,!0).forEach((function(e){E(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):j(r).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}({nativeEvent:t,stop:function(){throw new Error("Stop method is available only for callbacks\n                    'onDragstart' and 'onDragend'. For more info look at\n                    https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n                  ")}},this.selections))}catch(e){return void t.preventDefault()}};function x(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function k(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var T=function(t){var e=t.target.closest(this.defaultOptions.draggableSelector);if(this.defaultOptions.multipleDropzonesItemsDraggingEnabled||!e||this.selections.owner===e.parentNode){if("function"==typeof this.defaultOptions.onDragstart)try{this.defaultOptions.onDragstart(function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?x(r,!0).forEach((function(e){k(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):x(r).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}({nativeEvent:t,stop:g},this.selections))}catch(e){return t.preventDefault(),void a()}u(t)&&"false"===e.getAttribute("aria-grabbed")&&d.bind(this)(e),t.dataTransfer.setData("text",""),l(this.items,this.selections,this.targets)}else t.preventDefault()};function N(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function L(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var I=function(t){if(this.related=t.target,"function"==typeof this.defaultOptions.onDragenter)try{this.defaultOptions.onDragenter(function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?N(r,!0).forEach((function(e){L(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):N(r).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}({nativeEvent:t,stop:function(){throw new Error("Stop method is available only for callbacks\n                    'onDragstart' and 'onDragend'. For more info look at\n                    https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n                  ")}},this.selections))}catch(e){return void t.preventDefault()}},C=function(){var t=function(t){var e=t;do{if(e&&1===e.nodeType&&e.getAttribute("aria-dropeffect"))return e}while(e=e?e.parentNode:null);return null}(this.related);t!==this.selections.droptarget&&(this.selections.droptarget&&(this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,"")),t&&(t.className+=" dragover"),this.selections.droptarget=t)};function z(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function K(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?z(r,!0).forEach((function(e){V(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):z(r).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function V(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var q=function(t){if("function"==typeof this.defaultOptions.onDragend)try{this.defaultOptions.onDragend(K({nativeEvent:t,stop:g},this.selections))}catch(t){return void a()}this.selections.droptarget&&(this.defaultOptions.reactivityEnabled?y.bind(this)(t):function(t,e,r){for(var i=0;i<e.length;i++)r?t.insertBefore(e[i],r):t.appendChild(e[i])}(this.selections.droptarget,this.selections.items,this.nextItemElement),"function"==typeof this.defaultOptions.onDrop&&this.defaultOptions.onDrop(K({nativeEvent:t,stop:function(){throw new Error("Stop method is available only for callbacks\n                    'onDragstart' and 'onDragend'. For more info look at\n                    https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n                  ")}},this.selections)),t.preventDefault()),this.selections.items.length&&(c(this.items,this.selections,this.targets),this.selections.droptarget&&(p.bind(this)(),this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,""),this.selections.droptarget=null)),a()},M=function(t,e){return t.parentNode===e.parentNode},$=function(t){if(t.target.getAttribute("aria-grabbed")){if(32===t.keyCode&&(u(t)?"true"===t.target.getAttribute("aria-grabbed")?(1===this.selections.items.length&&c(this.items,this.selections,this.targets),h.bind(this)(t.target),this.selections.items.length&&l(this.items,this.selections,this.targets),this.selections.items.length||(this.selections.owner=null)):(d.bind(this)(t.target),l(this.items,this.selections,this.targets)):"false"===t.target.getAttribute("aria-grabbed")?(c(this.items,this.selections,this.targets),p.bind(this)(),d.bind(this)(t.target),l(this.items,this.selections,this.targets)):l(this.items,this.selections,this.targets),t.preventDefault()),65===t.keyCode&&(t.ctrlKey||t.metaKey)){var e=this.selections.items.slice(-1).pop();if(this.items&&this.items.length>0)for(var r=0;r<this.items.length;r++){var i=this.items[r];M(i,e)&&d.bind(this)(i)}t.preventDefault()}if(77===t.keyCode&&u(t)){if(this.selections.items.length)if(l(this.items,this.selections,this.targets),this.selections.owner===this.targets[this.targets.length-1])this.targets[0].focus();else for(var n=0;n<this.targets.length;n++)if(this.selections.owner===this.targets[n]){this.targets[n+1].focus();break}t.preventDefault()}}if(27===t.keyCode&&this.selections.items.length&&(c(this.items,this.selections,this.targets),this.selections.items[this.selections.items.length-1].focus(),p.bind(this)()),t.target.getAttribute("aria-dropeffect")&&(13===t.keyCode||77===t.keyCode&&u(t))){if(this.defaultOptions.reactivityEnabled)this.selections.droptarget=t.target,y.bind(this)(t);else for(var s=0;s<this.selections.items.length;s++)t.target.appendChild(this.selections.items[s]);c(this.items,this.selections,this.targets),this.selections.items[this.selections.items.length-1].focus(),p.bind(this)(),t.preventDefault()}},_=function(t){t.addEventListener("mousedown",O.bind(this),!1),t.addEventListener("mouseup",D.bind(this),!1),t.addEventListener("dragstart",T.bind(this),!1),t.addEventListener("keydown",$.bind(this),!1),t.addEventListener("dragenter",I.bind(this),!1),t.addEventListener("dragleave",C.bind(this),!1),t.addEventListener("dragover",S.bind(this),!1),t.addEventListener("dragend",q.bind(this),!1)};function R(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function F(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var B=function(t,e){return function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?R(r,!0).forEach((function(e){F(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):R(r).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}({dropzoneSelector:"ul",draggableSelector:"li",handlerSelector:null,reactivityEnabled:!0,multipleDropzonesItemsDraggingEnabled:!1,showDropzoneAreas:!0},e,{onDragstart:(e.onDragstart||function(){}).bind(t),onDragenter:(e.onDragenter||function(){}).bind(t),onDragover:(e.onDragover||function(){}).bind(t),onDragend:(e.onDragend||function(){}).bind(t),onDrop:(e.onDrop||function(){}).bind(t)})},G=function(){return{targets:null,items:null,nextItemElement:null,related:null,selections:{items:[],owner:null,droptarget:null}}};function U(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var H=function(){function t(e,r,i){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),Object.assign(this,G(),{defaultOptions:B(r,i)},{el:e}),this.registerListeners(e),this.initiate(e)}var e,r,i;return e=t,(r=[{key:"registerListeners",value:function(t){_.bind(this)(t)}},{key:"initiate",value:function(t){o.bind(this)(t)}},{key:"update",value:function(t){s.bind(this)(t)}}])&&U(e.prototype,r),i&&U(e,i),t}();function J(t){return function(t){if(Array.isArray(t)){for(var e=0,r=new Array(t.length);e<t.length;e++)r[e]=t[e];return r}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var Q=["added","removed","reordered"],W={name:"VueDraggableGroup",props:{groups:{required:!0,type:Array},value:{required:!0,type:Array},itemsKey:{type:String,default:"items"}},render:function(){return this.$scopedSlots.default({})},methods:{added:function(t){var e,r=this,i=this.groups.map((function(t){return t[r.itemsKey]})).reduce((function(t,e){return[].concat(J(t),J(e))}),[]).filter((function(e){return t.detail.ids.map(Number).indexOf(e.id)>=0}));(e=this.value).splice.apply(e,[t.detail.index,0].concat(J(i))),this.$emit("change",this.groups)},removed:function(t){var e=this.value.filter((function(e){return t.detail.ids.map(Number).indexOf(e.id)<0}));this.$emit("input",e)},reordered:function(t,e){var r=this.value.filter((function(e){return t.detail.ids.map(Number).indexOf(e.id)>=0})),i=this.value.filter((function(e){return t.detail.ids.map(Number).indexOf(e.id)<0}));i.splice.apply(i,[t.detail.index,0].concat(J(r))),this.$emit("input",i),this.$emit("change",this.groups)},addListeners:function(){var t=this;Q.forEach((function(e){return t.$el.addEventListener(e,t[e])}))},removeListeners:function(){var t=this;Q.forEach((function(e){return t.$el.removeEventListener(e,t[e])}))}},mounted:function(){this.addListeners()},beforeDestroy:function(){this.removeListeners()}};r.d(e,"VueDraggableDirective",(function(){return Y}));var X=[],Y={bind:function(t,e,r){var i=new H(t,r.context,e.value);X.push(i)},componentUpdated:function(t){setTimeout((function(){X.forEach((function(e){e.el===t&&e.update(t)}))}))},unbind:function(t){X=X.filter((function(e){return e.el!==t}))}};H.install=function(t){t.directive("drag-and-drop",Y),t.component("vue-draggable-group",W)};e.default=H}])}));
+//# sourceMappingURL=vue-draggable.min.js.map
\ No newline at end of file
diff --git a/cookbook/templates/meal_plan.html b/cookbook/templates/meal_plan.html
index a22e9b149..004b34916 100644
--- a/cookbook/templates/meal_plan.html
+++ b/cookbook/templates/meal_plan.html
@@ -9,6 +9,12 @@
     <script src="{% static 'js/vue.min.js' %}"></script>
     <script src="{% static 'js/vue-resource.js' %}"></script>
     <script src="{% static 'js/moment-with-locales.min.js' %}"></script>
+
+    <!-- CDNJS :: Sortable (https://cdnjs.com/) -->
+    <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
+    <!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
+
 {% endblock %}
 
 {% block content %}
@@ -37,24 +43,78 @@
     </h3>
 
     <div id="app">
+        <table class="table">
+            <thead>
+            <tr>
+                <td v-for="d in days">[[d]]</td>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="t in meal_types">
+                <td>[[t]]</td>
+            </tr>
+            </tbody>
+        </table>
         [[plan_entries]]
+
+
     </div>
 
+    <template>
+        <div class="row">
+            <div class="col-3">
+                <h3>Draggable 1</h3>
+                <draggable class="list-group" :list="list1" group="people" @change="log">
+                    <div
+                            class="list-group-item"
+                            v-for="(element, index) in list1"
+                            :key="element.name"
+                    >
+                        {{ element.name }} {{ index }}
+                    </div>
+                </draggable>
+            </div>
+
+            <div class="col-3">
+                <h3>Draggable 2</h3>
+                <draggable class="list-group" :list="list2" group="people" @change="log">
+                    <div
+                            class="list-group-item"
+                            v-for="(element, index) in list2"
+                            :key="element.name"
+                    >
+                        {{ element.name }} {{ index }}
+                    </div>
+                </draggable>
+            </div>
+
+            <rawDisplayer class="col-3" :value="list1" title="List 1"/>
+
+            <rawDisplayer class="col-3" :value="list2" title="List 2"/>
+        </div>
+    </template>
+
     <script type="application/javascript">
+        var week = moment().format('W')
+        moment.locale('{{request.LANGUAGE_CODE}}');
+
         var app = new Vue({
             delimiters: ['[[', ']]'],
             el: '#app',
             data: {
-                message: 'Hello Vue!',
-                plan_entries: []
+                days: moment.weekdays(),
+                plan_entries: [],
+                meal_types: []
             },
             mounted: function () {
-                this.getArticles();
+                this.getPlanEntries();
+                this.getPlanTypes();
+
             },
             methods: {
-                getArticles: function () {
+                getPlanEntries: function () {
                     this.loading = true;
-                    this.$http.get("{% url 'api:mealplan-list' %}?week=" + moment().format('W')).then((response) => {
+                    this.$http.get("{% url 'api:mealplan-list' %}?week=" + week).then((response) => {
                         this.plan_entries = response.data;
                         this.loading = false;
                     })
@@ -63,8 +123,66 @@
                             console.log(err);
                         })
                 },
+                getPlanTypes: function () {
+                    this.loading = true;
+                    this.$http.get("{% url 'api:mealtype-list' %}").then((response) => {
+                        this.meal_types = response.data;
+                        this.loading = false;
+                        this.buildGrid();
+                    })
+                        .catch((err) => {
+                            this.loading = false;
+                            console.log(err);
+                        })
+                },
+                buildGrid: function () {
+
+                },
             }
         });
 
+        import draggable from 'vuedraggable';
+
+        export default {
+            name: "two-lists",
+            display: "Two Lists",
+            order: 1,
+            components: {
+                vuedraggable
+            },
+            data() {
+                return {
+                    list1: [
+                        {name: "John", id: 1},
+                        {name: "Joao", id: 2},
+                        {name: "Jean", id: 3},
+                        {name: "Gerard", id: 4}
+                    ],
+                    list2: [
+                        {name: "Juan", id: 5},
+                        {name: "Edgard", id: 6},
+                        {name: "Johnson", id: 7}
+                    ]
+                };
+            },
+            methods: {
+                add: function () {
+                    this.list.push({name: "Juan"});
+                },
+                replace: function () {
+                    this.list = [{name: "Edgard"}];
+                },
+                clone: function (el) {
+                    return {
+                        name: el.name + " cloned"
+                    };
+                },
+                log: function (evt) {
+                    window.console.log(evt);
+                }
+            }
+        };
+
+
     </script>
 {% endblock %}
\ No newline at end of file
diff --git a/cookbook/urls.py b/cookbook/urls.py
index 33ec44ddb..d150876a7 100644
--- a/cookbook/urls.py
+++ b/cookbook/urls.py
@@ -9,6 +9,7 @@ from cookbook.helper import dal
 
 router = routers.DefaultRouter()
 router.register(r'meal-plan', api.MealPlanViewSet)
+router.register(r'meal-type', api.MealTypeViewSet)
 
 urlpatterns = [
     path('', views.index, name='index'),
diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index 45d393d24..0982d1714 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
+from cookbook.models import Recipe, Sync, Storage, CookLog, MealPlan, MealType
 from cookbook.provider.dropbox import Dropbox
 from cookbook.provider.nextcloud import Nextcloud
-from cookbook.serializer import MealPlanSerializer
+from cookbook.serializer import MealPlanSerializer, MealTypeSerializer
 
 
 class MealPlanViewSet(viewsets.ModelViewSet):
@@ -28,6 +28,12 @@ class MealPlanViewSet(viewsets.ModelViewSet):
         return queryset
 
 
+class MealTypeViewSet(viewsets.ModelViewSet):
+    queryset = MealType.objects.all()
+    serializer_class = MealTypeSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+
 def get_recipe_provider(recipe):
     if recipe.storage.method == Storage.DROPBOX:
         return Dropbox