diff --git a/frontend/components/edit-user.vue b/frontend/components/edit-user.vue
index 5216f1ba79a2ad9af3b6d965dfb30f46d127c1c1..9aa962c38111cac23d02599006c2df45237eeba2 100644
--- a/frontend/components/edit-user.vue
+++ b/frontend/components/edit-user.vue
@@ -10,7 +10,9 @@
       <b-form-input type="email" v-model="user.email"></b-form-input>
     </b-col>
     <b-col cols="1">
-        <b-badge class="mr-1" variant="primary" v-for="role in user.roles" v-bind:key="role">{{role}}</b-badge>
+        <b-badge class="mr-1" href="#" variant="primary" v-for="(role, index) in user.roles" v-bind:key="role" @click="user.roles.splice(index, 1)">
+            {{role}} &times;
+            </b-badge>
     </b-col>
     <b-col cols="3">
       <b-button-group v-show="!showAddRole">
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index ee5d3ddfce7928b765f029b3a0a3f5fff8bf5ee2..4245732a1ea90962f3eccfff7058e87cafbcebcb 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -62,8 +62,42 @@ import axios from 'axios'
 export default {
   methods: {
     saveUser: function(username, index){
-      console.log(username);
-      console.log(index);
+      const user = this.users[index]
+      var query;
+      if (user.password == ""){
+        query= 'mutation{editUser(username: "' + username + '", email: "' + user.email +'"){ok}}'
+      }
+      else {
+        query= 'mutation{editUser(username: "' + username + '", email: "' + user.email +'", password: "' + user.password +'"){ok}}'
+      }
+      axios.post(
+        '/api/admin/graphql', {query: query}).then((res) => {
+            console.log("user updated")
+          });
+      user.roles.forEach( role => {
+        var roleObj = this.roles.find(element => {return element.name == role});
+        if (!roleObj.users.includes(username)){
+          var addRoleMutation = 'mutation{addRoleToUser( role: "' + role + '", username: "' + username +'"){user{username}, role{name}}}'
+          axios.post(
+            '/api/admin/graphql', {
+                query: addRoleMutation
+                }).then((res) => {
+                    roleObj.users.push(username);
+            });
+          }
+        });
+      this.roles.forEach( role => {
+        if(role.users.includes(username) && !user.roles.includes(role.name)){
+          var rmRoleMutation = 'mutation{removeRoleFromUser( role: "' + role.name + '", username: "' + username +'"){ok}}'
+          axios.post(
+            '/api/admin/graphql', {
+                query: rmRoleMutation
+                }).then((res) => {
+                    role.users.splice(role.users.findIndex( element => { return element == username }),1);
+            });
+        }
+
+      })
     },
     selectRole: function(roleName){
         this.selectedRole = roleName;