diff --git a/frontend/components/edit-user.vue b/frontend/components/edit-user.vue
index 71c623fe5473daf10c9f64d7f784bc6f0fbd73fe..78ac492339f34d689639e0a1ff14e401aa399e05 100644
--- a/frontend/components/edit-user.vue
+++ b/frontend/components/edit-user.vue
@@ -1,6 +1,6 @@
 <template>
   <b-row class="mb-2">
-    <b-col cols="1">
+    <b-col>
       {{ user.username }}
     </b-col>
     <b-col>
@@ -10,44 +10,20 @@
       <b-form-input type="email" v-model="user.email"></b-form-input>
     </b-col>
     <b-col>
-      <b-row>
-        <b-col cols="6">
-          <b-badge v-for="role in user.roles"
-                   variant="primary"
-                   v-bind:key="role"
-                   class="mr-1">
-            {{ role }}
-          </b-badge>
-        </b-col>
-        <b-col>
-          <b-form-input list="available-roles" v-on:keyup.enter="addRole($event)"></b-form-input>
-        </b-col>
-      </b-row>
-    </b-col>
-    <b-col cols="3">
-      <b-row>
-        <b-col>
+      <b-button-group class="ml-auto">
           <b-button v-show="isModified" variant="outline-primary" v-on:click="savePressed()">Save</b-button>
-        </b-col>
-        <b-col>
           <b-button variant="outline-danger" v-on:click="$emit('delete')">Delete</b-button>
-        </b-col>
-      </b-row>
+      </b-button-group>
     </b-col>
   </b-row>
 </template>
 <script>
 export default {
-  props: ['user', 'roles'],
+  props: ['user'],
   methods: {
     savePressed: function(){
       this.$emit('save');
       this.isModified = false;
-    },
-    addRole: function(event){
-      if(this.roles.includes(event.target.value)){
-        this.$vnode.data.attrs.value.roles.push(event.target.value);
-      }
     }
   },
   watch: {
diff --git a/frontend/components/edit-users.vue b/frontend/components/edit-users.vue
index 8559104ca682f036e73ccdd6dbf991f68062dd83..67d8f0e990c0c4401b7cba3887488be2c92d0570 100644
--- a/frontend/components/edit-users.vue
+++ b/frontend/components/edit-users.vue
@@ -1,10 +1,7 @@
 <template>
   <div>
-    <datalist id="available-roles">
-      <option v-for="role in roles">{{ role }}</option>
-    </datalist>
-    <b-row>
-      <b-col cols="1">
+    <b-row class="mb-3 mt-3">
+      <b-col>
         <label>Username</label>
       </b-col>
       <b-col>
@@ -14,13 +11,9 @@
         <label>email</label>
       </b-col>
       <b-col>
-        <label>Roles</label>
-      </b-col>
-      <b-col cols="3">
       </b-col>
     </b-row>
     <edit-user v-for="(user, index) in users"
-               :roles="roles"
                v-model="users[index]"
                v-bind:user="user"
                v-bind:key="user.username"
@@ -33,6 +26,6 @@
 import editUser from '~/components/edit-user'
 export default {
   components: { editUser },
-  props: ['users', 'roles']
+  props: ['users']
 }
 </script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 525627dc8c574c4dc4c86d203c6f90ce2b192fae..d7cd95b2c86b0dfbfa19b8905431329154834ecf 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -21,8 +21,6 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
-    <b-container class="md-4">
       <nuxt />
-    </b-container>
   </div>
 </template>
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index 9c78bd5e7bfd2dca0a3f37aca081cb968397bccc..b1a76b574df6adcb05b925e4bba07fea7dac2828 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -1,8 +1,20 @@
 <template>
-  <div>
-    <edit-users v-bind:users="users"
-                :roles="roles"
-                v-model="users"
+  <div class=".wrapper" style="display: flex; width: 100%; align-items: stretch">
+    <div style="min-height: 100vh; min-width: 200px; max-width: 200px" class="border-right d-none d-md-block">
+    <b-list-group flush>
+        <b-list-group-item button v-bind:active="'all'==selectedRole" class="d-flex justify-content-between align-items-center" @click="selectRole('all')">
+         All
+         <b-badge pill variant="primary">{{ users.length }}</b-badge>
+        </b-list-group-item>
+        <b-list-group-item button v-bind:active="role==selectedRole" class="d-flex justify-content-between align-items-center" v-for="role in roles" v-bind:key="role" @click="selectRole(role)">
+            {{ role }}
+         <b-badge pill variant="primary">{{ role.length }}</b-badge>
+        </b-list-group-item>
+    </b-list-group>
+    </div>
+    <div class="container">
+    <edit-users v-bind:users="selectedUsers"
+                v-model="selectedUsers"
                 v-on:save="saveUser"
                 v-on:delete="deleteUser">
     </edit-users>
@@ -38,6 +50,7 @@
                v-show="userFormVisibility"
                v-on:delete="cancelAddUser">
     </edit-user>
+    </div>
   </div>
 </template>
 <script>
@@ -51,6 +64,10 @@ export default {
       console.log(username);
       console.log(index);
     },
+    selectRole: function(role){
+        console.log(role)
+        this.selectedRole = role;
+    },
     deleteUser: function(username, index){
       axios.post(
         '/api/admin/graphql', {
@@ -144,7 +161,8 @@ export default {
       addUserButtonVisibility: true,
       usernameFormVisibility: false,
       userFormVisibility: false,
-      newUsernameFeedback: "Username has to be a least 2 charachters long and unique"
+      newUsernameFeedback: "Username has to be a least 2 charachters long and unique",
+      selectedRole: "all"
     }
   },
   computed: {
@@ -153,6 +171,14 @@ export default {
       return !this.users.find(function(user){
         return user.username === this;
       }, this.newUser.username)
+    },
+    selectedUsers(){
+      if (this.selectedRole != "all"){
+        return this.users.filter(user => user.roles.includes(this.selectedRole));
+        }
+      else{
+        return this.users;
+      }
     }
   }
 }