diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7c25dd42c5aeeaa296251d818e8c639bf11a7ad0..8a7ddf2602ba72eedc0b3da60149d2f386f3ec37 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,6 +4,7 @@
     <Navbar/>
     <v-main class="grey lighten-2" align="center">
       <gRPCclient v-on:newPoint="addPoint($event)" />
+
       <ScatterPlot ref = "scatter"/>
     </v-main>
   </v-app>
@@ -19,8 +20,7 @@ export default {
   components: {
     Navbar,
     gRPCclient,
-    ScatterPlot
-  },
+    ScatterPlot  },
   created(){
   },
   data(){
diff --git a/frontend/src/components/gRPCclient.vue b/frontend/src/components/gRPCclient.vue
index 7369ca43fe4041a8326d1ea7ad35622cbfc82b63..35e1599e58d39d87cebfdec2bdd9e0231910426a 100644
--- a/frontend/src/components/gRPCclient.vue
+++ b/frontend/src/components/gRPCclient.vue
@@ -1,8 +1,27 @@
 /*eslint-disable*/
 <template>
   <div>
+
+    <v-alert :value="errorAlert" type="error" transition="scale-transition" dismissible
+      close-icon="mdi-delete">
+      Cannot connect to server
+    </v-alert>
+
+    <v-alert :value="succesAlert" type="success" transition="scale-transition" dismissible
+      close-icon="mdi-delete">
+      Connected to the server!
+    </v-alert>
+    
     <h1 class = "my-10">Check the developer console for the messages</h1>
-    <v-btn v-on:click="requestPoint">Request new point</v-btn>
+
+    <v-layout row>
+          <v-spacer></v-spacer>
+
+    <v-btn v-on:click="requestPoint" >Request new point</v-btn>
+        <v-file-input show-size counter dense label="File input"></v-file-input>
+        <v-spacer></v-spacer>
+
+    </v-layout>
   </div>
 </template>
 
@@ -14,6 +33,8 @@ export default {
   name: "gRPCclient",
   data(){
     return{
+      errorAlert: false,
+      succesAlert: false,
       client: null,
       request: null
     }    
@@ -38,6 +59,8 @@ export default {
       this.receivedPoint(response);
     });
     stream.on("error", (err) => {
+      this.errorAlert = true
+      this.succesAlert=false
       console.log(
         `Unexpected stream error: code = ${err.code}` +
           `, message = "${err.message}"`
@@ -50,6 +73,8 @@ export default {
     },
     unaryResponseHandler: function (err, response) {
       if (err) {
+      this.errorAlert = true
+      this.succesAlert=false
         console.log(
           `Unexpected error for readPoint: code = ${err.code}` +
             `, message = "${err.message}"`
@@ -60,6 +85,8 @@ export default {
       }
     },
     receivedPoint: function(point){
+      this.succesAlert = true
+      this.errorAlert = false
       this.$emit('newPoint', point);
     },
     pointToString: function (point) {