diff --git a/backend/server.js b/backend/server.js
index 6dfd8352c0aaf3e1d229f261e65cac85ed75d202..269b4fcf9454d448fd986d519235c7fb9ecb991d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -26,6 +26,8 @@ function sendPoint(call, callback) {
   })
 }
 
+
+//Route the grpc function to the microservice
 function sendPointStream(call) {
   http.get("http://localhost:8090/generatePointStream", res =>{
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1a0f39713041e413c132a16b78cf0a59b218c3ab..bd8781613e4376e17b02f57d18c12bff574e78b5 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -30,10 +30,11 @@ export default {
     ScatterPlot,
     Counter  },
   created(){    
+    //To handle to insane amount of points being send over
     const interValsource = interval(1000);
-    interValsource.subscribe(val => this.distributeStreams(val));
-   
+    interValsource.subscribe(val => this.distributeStreams(val));   
   },
+
   data(){
     return {
       pointList: [],
@@ -41,11 +42,14 @@ export default {
       pointCount: 0
     }
   },
+  
   methods: {
     addPoint: function(point){
       this.streamStarted = true;
       this.pointList.push(point);
     },
+    //Update all the components which rely on the data
+    //Is this the best way to do this?
     distributeStreams: function(val){
       //REMOVE THIS LATER
       if(val == -1){
diff --git a/frontend/src/components/gRPCPointclient.vue b/frontend/src/components/gRPCPointclient.vue
index 51f4f127a42da93231363bdd8fc8667a48ca315a..4b3bcc12887bbe827822f34a28db9fc11452b9a4 100644
--- a/frontend/src/components/gRPCPointclient.vue
+++ b/frontend/src/components/gRPCPointclient.vue
@@ -1,3 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+/*THIS IS FOR THE OLD PROTO, REMOVE LATER*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /*eslint-disable*/
 <template>
   <div>
diff --git a/frontend/src/components/gRPCProjectorClient.vue b/frontend/src/components/gRPCProjectorClient.vue
index 3545dfb352167f3c12a2200ae5b23fa78dd80348..d2024e175f7f80bb7db94877b81a56266862dd58 100644
--- a/frontend/src/components/gRPCProjectorClient.vue
+++ b/frontend/src/components/gRPCProjectorClient.vue
@@ -1,6 +1,23 @@
 /*eslint-disable*/
 <template>
   <div>
+    <v-alert
+      v-if="launched"
+      :value="!succesAlert"
+      type="error"
+      transition="scale-transition"
+      dismissible
+      close-icon="mdi-delete"
+    >Cannot connect to server</v-alert>
+
+    <v-alert
+      v-if="launched"
+      :value="succesAlert"
+      type="success"
+      transition="scale-transition"
+      dismissible
+      close-icon="mdi-delete"
+    >Connected to the server!</v-alert>
     <h1>Dapr grpc</h1>
     <h1 class="my-10">Check the developer console for the messages</h1>
 
@@ -14,30 +31,40 @@
 </template>
 
 <script>
+
+
 const { TrainingSet } = require("../generated/projector_pb");
 const { ProjectorClient } = require("../generated/projector_grpc_web_pb");
 
 export default {
   name: "gRPCProjectorClient",
+
   data() {
-    return {};
+    return {
+      succesAlert: false,
+      launched: false
+    };
   },
+
   created: function () {
+    //Setup the server
     const connectURL = "http://" + window.location.hostname + ":8080";
-    console.log(connectURL);
     var client = new ProjectorClient(connectURL, null, null);
-
-    console.log(client);
     var param = new TrainingSet();
 
+    //Call the stream
     var stream = client.getProjectionPoints(param);
 
     stream.on("data", (response) => {
+      this.succesAlert = true;
+      this.launched = true;
       this.$emit("newPoint", response);
     });
+    
     stream.on("error", (err) => {
-      this.errorAlert = true;
-      this.succesAlert = false;
+      this.succesAlert = false
+      this.launched = true;
+
       console.log(
         `Unexpected stream error: code = ${err.code}` +
           `, message = "${err.message}"`
@@ -45,7 +72,6 @@ export default {
     });
   },
   methods: {
-
   },
 };
 </script>
\ No newline at end of file