diff --git a/frontend/src/components/Dashboard/Incidents.vue b/frontend/src/components/Dashboard/Incidents.vue
index 10f5aaed..d38b1347 100644
--- a/frontend/src/components/Dashboard/Incidents.vue
+++ b/frontend/src/components/Dashboard/Incidents.vue
@@ -1,16 +1,17 @@
 <template>
     <div class="col-12">
-        <div v-for="(incident, i) in incidents" class="card contain-card text-black-50 bg-white mb-4">
+
+        <div v-for="incident in incidents" :key="incident.id" class="card contain-card text-black-50 bg-white mb-4">
             <div class="card-header">Incident: {{incident.title}}
                 <button @click="deleteIncident(incident)" class="btn btn-sm btn-danger float-right">
                     <font-awesome-icon icon="times" />  Delete
                 </button>
             </div>
 
-                <FormIncidentUpdates :incident="incident"/>
+            <FormIncidentUpdates :incident="incident"/>
 
-                <span class="font-2 p-2 pl-3">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
-            </div>
+            <span class="font-2 p-2 pl-3">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
+        </div>
 
 
         <div class="card contain-card text-black-50 bg-white">
@@ -44,59 +45,70 @@
                 </form>
             </div>
         </div>
+        
     </div>
 </template>
 
 <script>
-import Api from "../../API";
-import FormIncidentUpdates from "@/forms/IncidentUpdates";
+    import Api from "../../API";
+    import FormIncidentUpdates from "@/forms/IncidentUpdates";
 
-export default {
-    name: 'Incidents',
-  components: {FormIncidentUpdates},
-  data() {
-        return {
-            service_id: 0,
-              ready: false,
-              incidents: [],
-              incident: {
+    export default {
+        name: 'Incidents',
+        components: {FormIncidentUpdates},
+        data() {
+            return {
+                serviceID: 0,
+                incidents: [],
+                incident: {
+                    title: "",
+                    description: "",
+                    service: 0,
+                  }
+              }
+          },
+
+    created() {
+        this.serviceID = Number(this.$route.params.id);
+        this.incident.service = Number(this.$route.params.id);
+    },
+
+    async mounted() {
+        await this.loadIncidents()
+    },
+
+    methods: {
+
+        async deleteIncident(incident) {
+            let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
+            if (c) {
+                this.res = await Api.incident_delete(incident)
+                if (this.res.status === "success") {
+                    this.incidents = this.incidents.filter(obj => obj.id !== incident.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                    //await this.loadIncidents()
+                } // TODO: further error checking here... maybe alert user it failed with modal or so
+            }
+        },
+
+        async createIncident() {
+            this.res = await Api.incident_create(this.serviceID, this.incident)
+            if (this.res.status === "success") {
+                this.incidents.push(this.res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                //await this.loadIncidents()
+            } // TODO: further error checking here... maybe alert user it failed with modal or so
+
+            // reset the form data
+            this.incident = {
                 title: "",
                 description: "",
-                service: 0,
-              }
+                service: this.serviceID,
+            }
+        },
+
+        async loadIncidents() {
+            this.incidents = await Api.incidents_service(this.serviceID)
         }
-    },
-  computed:{
-    theID() {
-      return this.$route.params.id
-    }
-  },
-  async mounted() {
-    await this.loadIncidents()
-  },
-  methods: {
-      async getIncidents() {
-        return await Api.incidents_service(this.theID)
-      },
-      async deleteIncident(incident) {
-        let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
-        if (c) {
-          await Api.incident_delete(incident)
-          await this.loadIncidents()
-        }
-      },
-      async loadIncidents() {
-        this.incidents = await Api.incidents_service(this.service_id)
-      },
-      async createIncident() {
-        await Api.incident_create(this.theID, this.incident)
-        await this.loadIncidents()
-        this.incident = {
-          title: "",
-          description: "",
-          service: this.service_id,
-        }
-      }
+
     }
 }
 </script>
diff --git a/frontend/src/forms/IncidentUpdates.vue b/frontend/src/forms/IncidentUpdates.vue
index 466c4b82..37095af7 100644
--- a/frontend/src/forms/IncidentUpdates.vue
+++ b/frontend/src/forms/IncidentUpdates.vue
@@ -5,87 +5,103 @@
             No updates found, create a new Incident Update below.
         </div>
 
-        <div v-for="(update, i) in updates">
+        <div v-for="update in updates" :key="update.id">
             <div class="alert alert-light" role="alert">
                 <span class="badge badge-pill badge-info text-uppercase">{{update.type}}</span>
                 <span class="float-right font-2">{{ago(update.created_at)}} ago</span>
                 <span class="d-block mt-2">{{update.message}}
-                        <button @click="delete_update(update)" type="button" class="close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                        </span>
+                    <button @click="delete_update(update)" type="button" class="close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </span>
             </div>
         </div>
-    <form class="row" @submit.prevent="createIncidentUpdate">
-        <div class="col-3">
-            <select v-model="incident_update.type" class="form-control">
-                <option value="Investigating">Investigating</option>
-                <option value="Update">Update</option>
-                <option value="Unknown">Unknown</option>
-                <option value="Resolved">Resolved</option>
-            </select>
-        </div>
-        <div class="col-7">
-            <input v-model="incident_update.message" rows="5" name="description" class="form-control" id="message" required>
-        </div>
 
-        <div class="col-2">
-            <button @click.prevent="createIncidentUpdate"
-                    :disabled="!incident_update.message"
-                    type="submit" class="btn btn-block btn-primary">
-                Add
-            </button>
-        </div>
-    </form>
+        <form class="row" @submit.prevent="createIncidentUpdate">
+            <div class="col-3">
+                <select v-model="incident_update.type" class="form-control">
+                    <option value="Investigating">Investigating</option>
+                    <option value="Update">Update</option>
+                    <option value="Unknown">Unknown</option>
+                    <option value="Resolved">Resolved</option>
+                </select>
+            </div>
+            <div class="col-7">
+                <input v-model="incident_update.message" rows="5" name="description" class="form-control" id="message" required>
+            </div>
+
+            <div class="col-2">
+                <button @click.prevent="createIncidentUpdate"
+                        :disabled="!incident_update.message"
+                        type="submit" class="btn btn-block btn-primary">
+                    Add
+                </button>
+            </div>
+        </form>
+
     </div>
 </template>
 
 <script>
-  import Api from "../API";
-  import flatPickr from 'vue-flatpickr-component';
-  import 'flatpickr/dist/flatpickr.css';
+    import Api from "../API";
+    import flatPickr from 'vue-flatpickr-component';
+    import 'flatpickr/dist/flatpickr.css';
 
-  export default {
-  name: 'FormIncidentUpdates',
-  components: {
+    export default {
+        name: 'FormIncidentUpdates',
+        components: {},
+        props: {
+            incident: {
+                type: Object,
+                required: true
+            }
+        },
+        data () {
+            return {
+                updates: [],
+                incident_update: {
+                    incident: this.incident.id,
+                    message: "",
+                    type: "Investigating" // TODO: default to something.. theres is no error checking for blank submission...
+                }
+            }
+        },
 
-  },
-  props: {
-    incident: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      updates: this.incident.updates,
-        incident_update: {
-            incident: this.incident.id,
-            message: "",
-            type: ""
+        async mounted() {
+            await this.loadUpdates()
+        },
+
+        methods: {
+
+            async delete_update(update) {
+                this.res = await Api.incident_update_delete(update)
+                if (this.res.status === "success") {
+                    this.updates = this.updates.filter(obj => obj.id !== update.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                    //await this.loadUpdates()
+                }
+            },
+
+            async createIncidentUpdate() {
+                this.res = await Api.incident_update_create(this.incident_update)
+                if (this.res.status === "success") {
+                    this.updates.push(this.res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates
+                    //await this.loadUpdates()
+                } // TODO: further error checking here... maybe alert user it failed with modal or so
+
+                // reset the form data
+                this.incident_update = {
+                    incident: this.incident.id,
+                    message: "",
+                    type: "Investigating"
+                }
+
+            },
+
+            async loadUpdates() {
+                this.updates = await Api.incident_updates(this.incident)
+            }
         }
     }
-  },
-    beforeRouteUpdate (to, from, next) {
-
-    },
-    async mounted() {
-      await this.loadUpdates()
-    },
-    methods: {
-      async delete_update(update) {
-        await Api.incident_update_delete(update)
-        await this.loadUpdates()
-      },
-          async createIncidentUpdate() {
-              await Api.incident_update_create(this.incident_update)
-                await this.loadUpdates()
-          },
-          async loadUpdates() {
-                this.updates = await Api.incident_updates(this.incident)
-          }
-  }
-}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->