--- a/client/src/components/map/contextbox/Staging.vue	Thu Nov 22 12:40:45 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Thu Nov 22 13:10:22 2018 +0100
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="w-90">
         <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
             <i class="fa fa-list-ol mr-2"></i>
             Staging Area
@@ -12,6 +12,7 @@
                     <th>Importdate</th>
                     <th>ImportID</th>
                     <th>&nbsp;</th>
+                    <th>&nbsp;</th>
                 </tr>
             </thead>
             <tbody v-if="filteredData.length">
@@ -23,13 +24,22 @@
                     <td>{{ data.date }}</td>
                     <td>{{ data.importID }}</td>
                     <td>
-                        <button class="btn btn-outline-info">
-                            <i class="fa fa-thumbs-up"></i>
-                        </button>
-                        &nbsp;
-                        <button class="btn btn-outline-info">
-                            <i class="fa fa-thumbs-down"></i>
-                        </button>
+                        <a
+                            @click="toggleApproval(data.id, $options.STATES.APPROVED)"
+                            v-if="isApproved(data) || needsApproval(data)"
+                            class="text-success"
+                        >
+                            <i class="fa fa-check"></i>
+                        </a>
+                    </td>
+                    <td>
+                        <a
+                            @click="toggleApproval(data.id, $options.STATES.REJECTED)"
+                            v-if="isRejected(data) || needsApproval(data)"
+                            class="text-danger"
+                        >
+                            <i class="fa fa-close"></i>
+                        </a>
                     </td>
                 </tr>
             </tbody>
@@ -61,50 +71,58 @@
  */
 import { mapState } from "vuex";
 
-const demodata = [
-  {
-    id: 1,
-    name: "B1",
-    date: "2018-11-19 10:23",
-    location: [16.5364, 48.1471],
-    status: "Not approved",
-    importID: "123456789",
-    type: "bottleneck"
-  },
-  {
-    id: 2,
-    name: "B2",
-    date: "2018-11-19 10:24",
-    location: [16.5364, 48.1472],
-    status: "Not approved",
-    importID: "123456789",
-    type: "bottleneck"
+export default {
+  STATES: {
+    NEEDSAPPROVAL: "NEEDSAPPROVAL",
+    APPROVED: "APPROVED",
+    REJECTED: "REJECTED"
   },
-  {
-    id: 3,
-    name: "s1",
-    date: "2018-11-13 10:25",
-    location: [16.5364, 48.1473],
-    status: "Not approved",
-    importID: "987654321",
-    type: "soundingresult"
+  data() {
+    return {
+      demodata: [
+        {
+          id: 1,
+          name: "B1",
+          date: "2018-11-19 10:23",
+          location: [16.5364, 48.1471],
+          status: "NEEDSAPPROVAL",
+          importID: "123456789",
+          type: "bottleneck"
+        },
+        {
+          id: 2,
+          name: "B2",
+          date: "2018-11-19 10:24",
+          location: [16.5364, 48.1472],
+          status: "NEEDSAPPROVAL",
+          importID: "123456789",
+          type: "bottleneck"
+        },
+        {
+          id: 3,
+          name: "s1",
+          date: "2018-11-13 10:25",
+          location: [16.5364, 48.1473],
+          status: "NEEDSAPPROVAL",
+          importID: "987654321",
+          type: "soundingresult"
+        },
+        {
+          id: 4,
+          name: "s2",
+          date: "2018-11-13 10:26",
+          location: [16.5364, 48.1474],
+          status: "NEEDSAPPROVAL",
+          importID: "987654321",
+          type: "soundingresult"
+        }
+      ]
+    };
   },
-  {
-    id: 4,
-    name: "s2",
-    date: "2018-11-13 10:26",
-    location: [16.5364, 48.1474],
-    status: "Not approved",
-    importID: "987654321",
-    type: "soundingresult"
-  }
-];
-
-export default {
   computed: {
     ...mapState("application", ["searchQuery"]),
     filteredData() {
-      return demodata.filter(data => {
+      return this.demodata.filter(data => {
         const nameFound = data.name
           .toLowerCase()
           .includes(this.searchQuery.toLowerCase());
@@ -139,18 +157,40 @@
     }
   },
   methods: {
+    needsApproval(item) {
+      return item.status === this.$options.STATES.NEEDSAPPROVAL;
+    },
+    isRejected(item) {
+      return item.status === this.$options.STATES.REJECTED;
+    },
+    isApproved(item) {
+      return item.status === this.$options.STATES.APPROVED;
+    },
     zoomTo(coordinates) {
       this.$store.commit("map/moveMap", {
         coordinates: coordinates,
         zoom: 17,
         preventZoomOut: true
       });
+    },
+    toggleApproval(id, newStatus) {
+      const stagedResult = this.demodata.find(e => {
+        return e.id === id;
+      });
+      if (this.needsApproval(stagedResult)) {
+        stagedResult.status = newStatus;
+      } else {
+        stagedResult.status = this.isApproved(stagedResult)
+          ? this.$options.STATES.REJECTED
+          : this.$options.STATES.APPROVED;
+      }
     }
   }
 };
 </script>
 
-<style lang="sass" scoped>
+<style lang="sass" scoped>   
+  
 .table th,
 td
   font-size: 0.9rem