diff --git a/application/views/monpas/pages/partials/draganddrop_agenda.php b/application/views/monpas/pages/partials/draganddrop_agenda.php
new file mode 100644
index 0000000..96e1c09
--- /dev/null
+++ b/application/views/monpas/pages/partials/draganddrop_agenda.php
@@ -0,0 +1,175 @@
+<div class="row" id="huidigdragdrop">
+
+    <h4>Huidige situatie</h4>
+    <div class="col-xs-12">
+        <table style=" margin-bottom: 40px; width: 100%">
+            <tr class="modal-header">
+                <td style="width: 5%">nr.</td>
+                <td style="width:70%;"><?=$labels['Ykpunten']?> </td>
+                <td style="width: 5%; text-align:center" class="rood"> 1</td>
+                <td style="width: 5%; text-align:center" class="oranje"> 2</td>
+                <td style=";width: 5% text-align:center" class="groen"> 3</td>
+                <td style="width: 5% text-align:center" class="blauw"> 4</td>
+                <td style="width: 5%; text-align:center; background-color: #808080;" > </td>
+            </tr>
+            <tbody data-bind="foreach : results">
+            <tr class=" fixedH" >
+                <td class="allborders"
+                    data-bind="text: nummer, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}"
+                    style="text-align:right; padding-right:3px; vertical-align:top">
+                </td>
+                <td  style="vertical-align:top; "
+                     class="allborders fixedH clickable"
+                     data-bind=" click: $parent.fToonToelichting, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}">
+                    <span data-bind="text: omschrijving"></span>
+                    <span data-bind="visible: disabled == 'T'" > (Uitgezet.)</span>
+                    <span data-bind="visible: disabled == 'F' && disablentv == 'T'" > (Niet van toepassing.)</span>
+
+                </td>
+                <td class="allborders" ><div class="cirkel" data-bind="css: {'rood' : huidig() == 1}"></div></td>
+                <td class="allborders"><div class="cirkel" data-bind="css: {'oranje' : huidig() == 2}"></div></td>
+                <td class="allborders"><div class="cirkel" data-bind="css: {'groen' : huidig() == 3}"></div></td>
+                <td class="allborders"><div class="cirkel" data-bind="css: {'blauw' : huidig() == 4}"></div></td>
+                <td class="allborders"><div class="cirkel" data-bind="css: {'grijs' : huidig() == 5}"></div></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+
+<div class="row"  id="gewenstdragdrop">
+
+    <h4>Gewenste situatie
+        <span style="font-size: 14px;">(Schuif de iconen naar het streefniveau.)</span>
+    </h4>
+
+    <div class="col-xs-5" >
+
+        <table style="width: 100%;  ">
+            <tr>
+                <td class="allborders"
+                    style="width: 12%; padding: 2px; height: 20px; vertical-align: top;
+                        background-color: #6F0B3D; color:#f1f4f7; border-right: none; "
+                >nr.
+                </td>
+                <td class="allborders"
+                    style=" width: 90%; vertical-align: top;  padding: 2px; height: 20px;background-color: #6F0B3D;
+                        color:#f1f4f7; border-left: none; "
+                > <?=$labels['Ykpunten']?>
+                </td>
+            </tr>
+            <!-- ko foreach: results -->
+            <tr>
+                <td class="allborders"
+                    style="width: 10%; text-align: right; padding: 3px; height: 56px; vertical-align: top"
+                    data-bind="text: nummer, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}">
+                </td>
+                <td class="allborders clickable "
+                    style=" width: 90%; vertical-align: top;  padding: 3px; height: 56px; "
+                    data-bind="click: $parent.fToonToelichting, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''} ">
+                    <span data-bind="text: omschrijving"></span>
+                    <span data-bind="visible: disabled == 'T'" > (Uitgezet.)</span>
+                    <span data-bind="visible: disabled == 'F' && disablentv == 'T'" > (Niet van toepassing.)</span>
+
+                </td>
+            </tr>
+            <!--/ko-->
+
+        </table>
+    </div>
+    <div class="col-xs-7" >
+
+
+        <div style=" height: 27px; width:19%; background-color: #808080; color:#f1f4f7; text-align: center; display: inline-block;">&nbsp</div>
+        <div style=" height: 27px; width:19%; display: inline-block; background-color: #e08885; color:#f1f4f7; text-align: center">1</div>
+        <div style=" height: 27px; width:19%; display: inline-block; background-color: #ffcc80;color:#f1f4f7;text-align: center">2</div>
+        <div style=" height: 27px; width:19%; display: inline-block; background-color: #9fdf9f;color:#f1f4f7;text-align: center">3</div>
+        <div style=" height: 27px; width:19%; display: inline-block; background-color: #99d6ff;color:#f1f4f7;text-align: center">4</div>
+
+
+        <div  id="acceptatie" data-bind=" foreach: acceptaties ">
+
+            <div class="draggable" draggable="true"
+                 data-bind="event:{
+                                   dragstart : $root.fDragstart.bind($data, event, $index(), 'ACC'),
+                                   dragend   : $root.fDragend.bind($data, event, $index()),
+                                   dragover  :  $root.fDragover.bind($data, event ),
+                                   dragenter : $root.fDragenter.bind($data, event, $index(), 'ACC'),
+                                   dragleave : $root.fDragleave.bind($data, event),
+                                   drop      : $root.fDrop.bind($data, event, $index(), 'ACC' )
+                         }">
+                <!--            <div data-bind="text: afbeelding"></div>-->
+                <div data-bind='attr: {class: afbeelding}'></div>
+            </div>
+
+        </div>
+        <div id="betrokken" data-bind=" foreach: betrokkenen ">
+
+            <div class="draggable" draggable="true"
+                 data-bind="event:{
+                                   dragstart : $root.fDragstart.bind($data, event, $index(), 'BTR'),
+                                   dragend   : $root.fDragend.bind($data, event, $index()),
+                                   dragover  :  $root.fDragover.bind($data, event ),
+                                   dragenter : $root.fDragenter.bind($data, event, $index(), 'BTR'),
+                                   dragleave : $root.fDragleave.bind($data, event),
+                                   drop      : $root.fDrop.bind($data, event, $index(), 'BTR' )
+                         }">
+                <!--            <div data-bind="text: afbeelding"></div>-->
+                <div data-bind='attr: {class: afbeelding}'></div>
+            </div>
+
+        </div>
+        <div id="differentiatie" data-bind=" foreach: diffs ">
+
+            <div class="draggable" draggable="true"
+                 data-bind="event:{
+                                   dragstart : $root.fDragstart.bind($data, event, $index(), 'DIF'),
+                                   dragend   : $root.fDragend.bind($data, event, $index()),
+                                   dragover  :  $root.fDragover.bind($data, event ),
+                                   dragenter : $root.fDragenter.bind($data, event, $index(), 'DIF'),
+                                   dragleave : $root.fDragleave.bind($data, event),
+                                   drop      : $root.fDrop.bind($data, event, $index(), 'DIF' )
+                         }">
+                <!--            <div data-bind="text: afbeelding"></div>-->
+                <div data-bind='attr: {class: afbeelding}'></div>
+            </div>
+
+        </div>
+        <div id="extra" data-bind=" foreach: extras ">
+
+            <div class="draggable" draggable="true"
+                 data-bind="event:{
+                                   dragstart : $root.fDragstart.bind($data, event, $index(), 'EXT'),
+                                   dragend   : $root.fDragend.bind($data, event, $index()),
+                                   dragover  :  $root.fDragover.bind($data, event ),
+                                   dragenter : $root.fDragenter.bind($data, event, $index(), 'EXT'),
+                                   dragleave : $root.fDragleave.bind($data, event),
+                                   drop      : $root.fDrop.bind($data, event, $index(), 'EXT' )
+                         }">
+                <!--            <div data-bind="text: afbeelding"></div>-->
+                <div data-bind='attr: {class: afbeelding}'></div>
+            </div>
+
+        </div>
+        <div id="omgeving" data-bind=" foreach: omgevingen ">
+
+            <div class="draggable" draggable="true"
+                 data-bind="event:{
+                           dragstart : $root.fDragstart.bind($data, event, $index(), 'OMG'),
+                           dragend   : $root.fDragend.bind($data, event, $index()),
+                           dragover  :  $root.fDragover.bind($data, event ),
+                           dragenter : $root.fDragenter.bind($data, event, $index(), 'OMG'),
+                           dragleave : $root.fDragleave.bind($data, event),
+                           drop      : $root.fDrop.bind($data, event, $index(), 'OMG' )
+                 }">
+                <!--            <div data-bind="text: afbeelding"></div>-->
+
+                <div data-bind='attr: {class: afbeelding}'></div>
+            </div>
+
+        </div>
+    </div>
+
+</div>
+
diff --git a/application/views/monpas/pages/partials/tabel_agenda.php b/application/views/monpas/pages/partials/tabel_agenda.php
new file mode 100644
index 0000000..b227327
--- /dev/null
+++ b/application/views/monpas/pages/partials/tabel_agenda.php
@@ -0,0 +1,58 @@
+
+<table  id="standaardagenda" style="width: 100%; margin-bottom: 40px;">
+    <colgroup>
+        <col style="width: 25px">
+        <col >
+        <col span='11' style="width: 35px">
+    </colgroup>
+    <tr>
+        <td colspan=7 style="text-align:right; padding-right: 15px"> <b>huidige situatie</b><br/> &nbsp;</td>
+        <td></td>
+        <td colspan =5 > <b> gewenste situatie</b><br/> &nbsp;</td>
+    <tr>
+    <tr class="modal-header">
+        <td style="width: 25px"></td>
+        <td><?=$labels['Ykpunten']?> </td>
+        <td style=" text-align:center" class="rood"> 1</td>
+        <td style=" text-align:center" class="oranje"> 2</td>
+        <td style=" text-align:center" class="groen"> 3</td>
+        <td style=" text-align:center" class="blauw"> 4</td>
+        <td style=" text-align:center; background-color: #808080;"  > </td>
+        <td style="background-color:#ffffff"></td>
+        <td style="text-align:center" class="rood"	> 1</td>
+        <td style=" text-align:center" class="oranje"	> 2</td>
+        <td style="text-align:center" class="groen"	> 3</td>
+        <td style="text-align:center" class="blauw"	> 4</td>
+        <td style="text-align:center; background-color: #808080; " > </td>
+    </tr>
+    <tbody data-bind="foreach : results">
+    <tr class=" fixedH" >
+        <td class="allborders"
+            data-bind="text: nummer,
+                                       style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}"
+            style="text-align:right; padding-right:3px; vertical-align:top">
+        </td>
+        <td  style="vertical-align:top; "
+             class="allborders fixedH clickable"
+             data-bind=" click: $parent.fToonToelichting, style: {backgroundColor: disabled == 'T' || disablentv == 'T' ? '#cccccc' : ''}">
+            <span data-bind="text: omschrijving"></span>
+            <span data-bind="visible: disabled == 'T'" > (Uitgezet.)</span>
+            <span data-bind="visible: disabled == 'F' && disablentv == 'T'" > (Niet van toepassing.)</span>
+
+        </td>
+        <td class="allborders" ><div class="cirkel" data-bind="css: {'rood' : huidig() == 1}"></div></td>
+        <td class="allborders"><div class="cirkel" data-bind="css: {'oranje' : huidig() == 2}"></div></td>
+        <td class="allborders"><div class="cirkel" data-bind="css: {'groen' : huidig() == 3}"></div></td>
+        <td class="allborders"><div class="cirkel" data-bind="css: {'blauw' : huidig() == 4}"></div></td>
+        <td class="allborders"><div class="cirkel" data-bind="css: {'grijs' : huidig() == 5}"></div></td>
+
+        <td style="border-bottom:none; border-top:none"></td>
+
+        <td class="allborders" 	data-bind="click: $parent.fUpdateGewenst.bind($data,1)"><div class="cirkel" data-bind="css: {'rood' : gewenst() == 1}">	</div></td>
+        <td class="allborders"  data-bind="click: $parent.fUpdateGewenst.bind($data,2)"><div class="cirkel"  data-bind="css: {'oranje' : gewenst() == 2}">	</div></td>
+        <td class="allborders"  data-bind="click: $parent.fUpdateGewenst.bind($data,3)"><div class="cirkel" data-bind="css: {'groen' : gewenst() == 3}">	</div></td>
+        <td class="allborders"  data-bind="click: $parent.fUpdateGewenst.bind($data,4)"><div class="cirkel" data-bind="css: {'blauw' : gewenst() == 4}">	</div></td>
+        <td class="allborders" ><div class="cirkel" data-bind="css: {'grijs' : gewenst() == 5}">	</div></td>
+    </tr>
+    </tbody>
+</table>