diff --git a/webapp/graphql/admin/Roles.js b/webapp/graphql/admin/Roles.js
new file mode 100644
index 000000000..4542708f3
--- /dev/null
+++ b/webapp/graphql/admin/Roles.js
@@ -0,0 +1,25 @@
+import gql from 'graphql-tag'
+
+export const FetchAllRoles = gql`
+  query {
+    __type(name: "UserGroup") {
+      name
+      enumValues {
+        name
+      }
+    }
+  }
+`
+
+export const updateUserRole = (role, id) => {
+  return gql`
+        mutation {
+            switchUserRole(role: ${role}, id: "${id}" ) {
+                name
+                role
+                id
+                updatedAt
+                email
+            }
+        }`
+}
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index 3d9a4f660..1b761770f 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -48,6 +48,23 @@
         <template #createdAt="scope">
           {{ scope.row.createdAt | dateTime }}
         </template>
+
+        <template slot="role" slot-scope="scope">
+          <ApolloQuery :query="FetchAllRoles">
+            <template v-slot="{ result: { data } }">
+              <template v-if="data">
+                <select
+                  :value="`${scope.row.role}`"
+                  v-on:change="changeUserRole(scope.row.id, $event)"
+                >
+                  <option v-for="value in data.__type.enumValues" :key="value.name">
+                    {{ value.name }}
+                  </option>
+                </select>
+              </template>
+            </template>
+          </ApolloQuery>
+        </template>
       </ds-table>
       <pagination-buttons :hasNext="hasNext" :hasPrevious="hasPrevious" @next="next" @back="back" />
     </base-card>
@@ -62,6 +79,7 @@ import gql from 'graphql-tag'
 import { isEmail } from 'validator'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
 import PaginationButtons from '~/components/_new/generic/PaginationButtons/PaginationButtons'
+import { FetchAllRoles, updateUserRole } from '~/graphql/admin/Roles'
 
 export default {
   components: {
@@ -77,6 +95,7 @@ export default {
       hasNext: false,
       email: null,
       filter: null,
+      FetchAllRoles,
       form: {
         formData: {
           query: '',
@@ -174,6 +193,16 @@ export default {
         }
       }
     },
+    changeUserRole(id, event) {
+      const newRole = event.target.value
+      // this.role = '';
+      // const id = this.User[0].id;
+      this.$apollo
+        .mutate({
+          mutation: updateUserRole(newRole, id),
+        })
+        .catch((error) => this.$toast.error(error.message))
+    },
   },
 }
 </script>