diff --git a/apps/files/src/components/Collaborators/AdditionalPermissions.vue b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
new file mode 100644
index 00000000000..9a656f9c113
--- /dev/null
+++ b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
@@ -0,0 +1,66 @@
+<template>
+  <oc-grid gutter="small">
+    <label v-for="permission in permissions" :key="permission.name">
+      <oc-checkbox
+        class="uk-margin-xsmall-right"
+        v-model="permission.value"
+        @change="permissionChecked"
+      />
+      {{ permission.description }}
+    </label>
+  </oc-grid>
+</template>
+
+<script>
+import filterObject from 'filter-obj'
+
+export default {
+  name: 'AdditionalPermissions',
+  props: {
+    /**
+     * Available permissions for the role
+     */
+    availablePermissions: {
+      type: Object,
+      required: true
+    },
+    /**
+     * Additional permissions of the collaborator with values
+     */
+    collaboratorsPermissions: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    permissions () {
+      const permissions = this.availablePermissions
+
+      for (const permission in permissions) {
+        if (this.collaboratorsPermissions && this.collaboratorsPermissions[permission]) {
+          permissions[permission].value = true
+          continue
+        }
+
+        permissions[permission].value = false
+      }
+
+      return permissions
+    }
+  },
+  methods: {
+    permissionChecked () {
+      const selectedPermissions = []
+      const permissions = filterObject(this.permissions, (key, value) => {
+        return value.value === true
+      })
+
+      for (const permission in permissions) {
+        selectedPermissions.push(permission)
+      }
+
+      this.$emit('permissionChecked', selectedPermissions)
+    }
+  }
+}
+</script>
diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 441b791b2cc..8bbc55553b6 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-flex uk-flex-middle">
-    <oc-spinner v-if="loading" uk-spinner="ratio:1.6" class="uk-margin-small-right" />
+    <oc-spinner v-if="loading" uk-spinner="ratio:1.6" class="uk-margin-small-right" :aria-label="$gettext('Loading avatar')" />
     <template v-else>
       <oc-avatar v-if="avatar" :src="avatar" class="uk-margin-small-right" width=50 height=50 />
       <template v-else>
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Mixins from './mixins'
+import Mixins from '../../mixins/collaborators'
 
 export default {
   name: 'AutocompleteItem',
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index f14f707bfb9..556e981cc34 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -18,58 +18,23 @@
               ({{ collaborator.info.share_with_additional_info }})
             </span>
           </div>
-          <span class="oc-text">{{ roles[collaborator.role].name }}<template v-if="collaborator.expires"> | <translate :translate-params="{expires: formDateFromNow(collaborator.expires)}">Expires: %{expires}</translate></template></span>
-          <span class="uk-text-meta">{{ $_ocCollaborators_collaboratorType(collaborator.info.share_type) }}</span>
+          <span class="oc-text">{{ originalRole.label }}<template v-if="collaborator.expires"> | <translate :translate-params="{expires: formDateFromNow(collaborator.expires)}">Expires: %{expires}</translate></template></span>
+          <span class="uk-text-meta" v-text="$_ocCollaborators_collaboratorType(collaborator.info.share_type)" />
         </div>
       </div>
     </template>
     <template slot="content">
-      <oc-grid gutter="small" class="uk-margin-bottom">
-        <div class="uk-width-1-1 uk-position-relative">
-          <label class="oc-label"><translate>Role</translate></label>
-          <oc-button :id="`files-collaborators-role-button-${collaborator.info.id}`" class="uk-width-1-1 files-collaborators-role-button">{{ $_ocCollaborators_selectedRoleName(collaborator) }}</oc-button>
-          <p class="uk-text-meta uk-margin-remove">{{ $_ocCollaborators_selectedRoleDescription(collaborator) }}</p>
-          <oc-drop :dropId="`files-collaborators-roles-dropdown-${collaborator.info.id}`" closeOnClick :toggle="`#files-collaborators-role-button-${collaborator.info.id}`" mode="click" :options="{ offset: 0, delayHide: 0 }" class="oc-autocomplete-dropdown">
-            <ul class="oc-autocomplete-suggestion-list">
-              <li
-                v-for="(role, key) in roles"
-                :key="key"
-                class="oc-autocomplete-suggestion"
-                :class="rolesDropItemClass(role)"
-                @click="$_ocCollaborators_changeRole(role); onChange()"
-              >
-                <span class="uk-text-bold">{{ role.name }}</span>
-                <p class="uk-text-meta uk-margin-remove">{{ role.description }}</p>
-              </li>
-            </ul>
-          </oc-drop>
-        </div>
-        <div v-if="false" class="uk-width-1-1">
-          <label class="oc-label"><translate>Expiration date</translate> <translate class="uk-text-meta uk-remove-margin">(optional)</translate></label>
-          <oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
-        </div>
-        <oc-grid gutter="small">
-          <div class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle">
-            <oc-switch :key="switchKey" class="uk-margin-small-right" :model="canShare" @change="$_ocCollaborators_switchPermission('canShare')" /> <translate :class="{ 'uk-text-muted': !canShare }">Can share</translate>
-          </div>
-          <template v-if="(collaborator.role === 'custom' && !selectedNewRole) || (selectedNewRole && selectedNewRole.tag === 'custom')">
-            <div class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle">
-              <oc-switch :key="switchKey" class="uk-margin-small-right" :model="canChange" @change="$_ocCollaborators_switchPermission('canChange')" /> <translate :class="{ 'uk-text-muted': !canChange }">Can change</translate>
-            </div>
-            <div v-if="highlightedFile.type === 'folder'" class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle">
-              <oc-switch :key="switchKey" class="uk-margin-small-right" :model="canCreate" @change="$_ocCollaborators_switchPermission('canCreate')" /> <translate :class="{ 'uk-text-muted': !canCreate }">Can create</translate>
-            </div>
-            <div v-if="highlightedFile.type === 'folder'" class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle">
-              <oc-switch :key="switchKey" class="uk-margin-small-right" :model="canDelete" @change="$_ocCollaborators_switchPermission('canDelete')" /> <translate :class="{ 'uk-text-muted': !canDelete }">Can delete</translate>
-            </div>
-          </template>
-        </oc-grid>
-      </oc-grid>
+      <collaborators-edit-options
+        :existingRole="collaborator.role"
+        :collaboratorsPermissions="collaborator.customPermissions"
+        @optionChange="collaboratorOptionChanged"
+        class="uk-margin-bottom"
+      />
       <template v-if="editing">
         <oc-button :disabled="collaboratorSaving" @click="$_ocCollaborators_cancelChanges">
           <translate>Cancel</translate>
         </oc-button>
-        <oc-button variation="primary" :disabled="collaboratorSaving" :aria-label="_saveButtonLabel" @click="$_ocCollaborators_saveChanges(collaborator)">
+        <oc-button variation="primary" :disabled="collaboratorSaving" :aria-label="_saveButtonLabel" @click="saveChanges(collaborator)">
           <translate>Save</translate>
         </oc-button>
       </template>
@@ -81,10 +46,16 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import Mixins from './mixins'
+import Mixins from '../../mixins/collaborators'
+import { roleToBitmask } from '../../helpers/collaborators'
+
+const CollaboratorsEditOptions = () => import('./CollaboratorsEditOptions.vue')
 
 export default {
   name: 'Collaborator',
+  components: {
+    CollaboratorsEditOptions
+  },
   props: ['collaborator'],
   mixins: [
     Mixins
@@ -94,13 +65,9 @@ export default {
       avatar: '',
       loading: false,
       editing: false,
-      canShare: this.collaborator.canShare,
-      canChange: this.collaborator.customPermissions.change,
-      canCreate: this.collaborator.customPermissions.create,
-      canDelete: this.collaborator.customPermissions.delete,
-      selectedNewRole: null,
       permissionsChanged: false,
-      switchKey: Math.floor(Math.random() * 100) // Ensure switch gets back to orginal position after cancel
+      selectedRole: null,
+      additionalPermissions: null
     }
   },
   computed: {
@@ -116,7 +83,11 @@ export default {
     },
 
     originalRole () {
-      return this.roles[this.collaborator.role].tag
+      if (this.collaborator.role.name === 'advancedRole') {
+        return this.advancedRole
+      }
+
+      return this.roles[this.collaborator.role.name]
     }
   },
   mounted () {
@@ -130,60 +101,35 @@ export default {
         client: this.$client,
         share: share
       })
+      this.editing = false
+      this.toggleCollaboratorsEdit(false)
     },
-    $_ocCollaborators_saveChanges (collaborator) {
-      if (!this.selectedNewRole) this.selectedNewRole = this.roles[collaborator.role]
+    saveChanges (collaborator) {
+      if (!this.selectedRole) this.selectedRole = this.roles[collaborator.role.name]
       this.changeShare({
         client: this.$client,
         share: collaborator,
-        canShare: this.canShare,
-        canChange: this.canChange,
-        canCreate: this.canCreate,
-        canDelete: this.canDelete,
-        role: this.selectedNewRole.tag
+        role: this.selectedRole,
+        permissions: roleToBitmask(this.selectedRole, this.additionalPermissions, this.highlightedFile.type === 'folder')
       })
         .then(() => {
           this.editing = false
           this.toggleCollaboratorsEdit(false)
-          this.selectedNewRole = null
         })
     },
-    $_ocCollaborators_changeRole (role) {
-      this.selectedNewRole = role
-    },
-    $_ocCollaborators_selectedRoleName (collaborator) {
-      if (!this.selectedNewRole) {
-        return this.roles[collaborator.role].name
-      }
-
-      return this.selectedNewRole.name
-    },
-    $_ocCollaborators_selectedRoleDescription (collaborator) {
-      if (!this.selectedNewRole) {
-        return this.roles[collaborator.role].description
-      }
-
-      return this.selectedNewRole.description
-    },
     $_ocCollaborators_cancelChanges () {
-      this.selectedNewRole = null
-      this.canShare = this.collaborator.canShare
-      this.canChange = this.collaborator.customPermissions.change
-      this.canCreate = this.collaborator.customPermissions.create
-      this.canDelete = this.collaborator.customPermissions.delete
       this.editing = false
-      this.switchKey = Math.floor(Math.random() * 100)
       this.toggleCollaboratorsEdit(false)
     },
 
     onChange () {
-      if (this.selectedNewRole.tag === this.originalRole && !this.permissionsChanged) {
-        this.editing = false
-        this.toggleCollaboratorsEdit(false)
-        return
-      }
+      // TODO: Bring this back
+      // if (this.selectedRole.name === this.originalRole.name && !this.permissionsChanged) {
+      //   this.editing = false
+      //   this.toggleCollaboratorsEdit(false)
+      //   return
+      // }
 
-      this.editing = true
       this.toggleCollaboratorsEdit(true)
     },
 
@@ -197,6 +143,7 @@ export default {
 </script>
 
 <style>
+  /* TODO: Move to ODS  */
   .oc-text {
     font-size: 1rem;
   }
diff --git a/apps/files/src/components/Collaborators/CollaboratorsEditOptions.vue b/apps/files/src/components/Collaborators/CollaboratorsEditOptions.vue
new file mode 100644
index 00000000000..fa761f4ee01
--- /dev/null
+++ b/apps/files/src/components/Collaborators/CollaboratorsEditOptions.vue
@@ -0,0 +1,88 @@
+<template>
+  <oc-grid gutter="small" childWidth="1-1">
+    <roles-select
+      :selectedRole="role"
+      @roleSelected="selectRole"
+    />
+    <additional-permissions
+      :availablePermissions="role.additionalPermissions"
+      :collaboratorsPermissions="collaboratorsPermissions"
+      @permissionChecked="checkAdditionalPermissions"
+    />
+  </oc-grid>
+</template>
+
+<script>
+import collaboratorsMixins from '../../mixins/collaborators'
+
+const RolesSelect = () => import('./RolesSelect.vue')
+const AdditionalPermissions = () => import('./AdditionalPermissions.vue')
+
+export default {
+  name: 'CollaboratorsEditOptions',
+  mixins: [
+    collaboratorsMixins
+  ],
+  props: {
+    existingRole: {
+      type: Object,
+      required: false
+    },
+    collaboratorsPermissions: {
+      type: Object,
+      required: false
+    }
+  },
+  components: {
+    RolesSelect,
+    AdditionalPermissions
+  },
+  data () {
+    return {
+      selectedRole: null,
+      additionalPermissions: null
+    }
+  },
+  computed: {
+    role () {
+      // Returns default role
+      if (!this.existingRole && !this.selectedRole) {
+        const defaultRole = this.roles[Object.keys(this.roles)[0]]
+        this.selectRole(defaultRole, false)
+        return defaultRole
+      }
+
+      if (
+        (
+          this.existingRole && this.existingRole.name === 'advancedRole'
+        ) || (
+          this.selectedRole && this.selectedRole.name === 'advancedRole'
+        )
+      ) {
+        this.selectRole(this.advancedRole, false)
+        return this.advancedRole
+      }
+
+      if (this.existingRole && !this.selectedRole) {
+        this.selectRole(this.existingRole, false)
+        return this.existingRole
+      }
+
+      return this.selectedRole
+    }
+  },
+  methods: {
+    selectRole (role, propagate = true) {
+      this.selectedRole = role
+
+      this.$emit('optionChange', { role: this.selectedRole, permissions: this.additionalPermissions, propagate: propagate })
+    },
+
+    checkAdditionalPermissions (permissions) {
+      this.additionalPermissions = permissions
+
+      this.$emit('optionChange', { role: this.selectedRole, permissions: this.additionalPermissions })
+    }
+  }
+}
+</script>
diff --git a/apps/files/src/components/Collaborators/NewCollaborator.vue b/apps/files/src/components/Collaborators/NewCollaborator.vue
index a4273f632dd..5efba2d238b 100644
--- a/apps/files/src/components/Collaborators/NewCollaborator.vue
+++ b/apps/files/src/components/Collaborators/NewCollaborator.vue
@@ -1,204 +1,122 @@
 <template>
   <div>
     <oc-autocomplete
-        @input="$_ocCollaborators_selectAutocompleteResult"
-        :items="autocompleteResults"
-        :itemsLoading="autocompleteInProgress"
-        :placeholder="$_ocCollaborationStatus_autocompletePlacholder"
-        @update:input="onAutocompleteInput"
-        :filter="filterRecipients"
-        id="oc-sharing-autocomplete"
-        class="uk-margin-bottom"
-        :disabled="collaboratorsEditInProgress && selectedCollaborators.length < 1"
-        dropdownClass="uk-width-1-1"
-      >
-        <template v-slot:item="{item}">
-          <autocomplete-item :item="item" />
-        </template>
-      </oc-autocomplete>
-      <div v-if="selectedCollaborators.length > 0" class="uk-margin-medium-bottom">
-        <div>
-          <div>
-            <translate>Selected collaborators</translate>:
+      @input="$_ocCollaborators_selectAutocompleteResult"
+      :items="autocompleteResults"
+      :itemsLoading="autocompleteInProgress"
+      :placeholder="$_ocCollaborationStatus_autocompletePlacholder"
+      @update:input="onAutocompleteInput"
+      :filter="filterRecipients"
+      id="oc-sharing-autocomplete"
+      class="uk-margin-bottom"
+      :disabled="collaboratorsEditInProgress && selectedCollaborators.length < 1"
+      dropdownClass="uk-width-1-1"
+    >
+      <template v-slot:item="{ item }">
+        <autocomplete-item :item="item" />
+      </template>
+    </oc-autocomplete>
+    <div
+      v-if="selectedCollaborators.length > 0"
+      class="uk-margin-medium-bottom"
+    >
+      <div>
+        <div><translate>Selected collaborators</translate>:</div>
+        <div
+          v-for="(collaborator, index) in selectedCollaborators"
+          :key="collaborator.label"
+          class="uk-flex-inline uk-flex-row uk-flex-start uk-margin-small-bottom"
+          :class="{
+            'uk-margin-small-right': index + 1 !== selectedCollaborators.length
+          }"
+        >
+          <div class="uk-margin-small-top">
+            <span class="uk-text-bold" v-text="collaborator.label" />
+            <span v-if="collaborator.value.shareType === 1" class="uk-text-meta">
+              (<translate>group</translate>)
+            </span>
           </div>
-          <div
-            v-for="(collaborator, index) in selectedCollaborators"
-            :key="index"
-            class="uk-flex-inline uk-flex-row uk-flex-start uk-margin-small-bottom"
-            :class="{ 'uk-margin-small-right': (index + 1) !== selectedCollaborators.length }"
-          >
-            <div class="uk-margin-small-top">
-              <span class="uk-text-bold">{{ collaborator.label }}</span>
-              <translate v-if="collaborator.value.shareType === 1" class="uk-text-meta">(group)</translate>
-            </div>
-            <oc-icon
-              name="close"
-              variation="danger"
-              class="oc-cursor-pointer"
-              role="button"
-              @click="$_ocCollaborators_removeFromSelection(collaborator)"
-            />
-          </div>
-        </div>
-        <div>
-          <oc-grid gutter="small">
-            <div class="uk-width-1-1">
-              <label class="oc-label">
-                <translate>Role</translate>:
-              </label>
-              <oc-button
-                id="files-collaborators-role-button"
-                class="uk-width-1-1 files-collaborators-role-button"
-                v-text="selectedNewRole.name"
-              />
-              <p
-                v-if="selectedNewRole"
-                class="uk-text-meta uk-margin-remove"
-                v-text="selectedNewRole.description"
-              />
-              <oc-drop
-                closeOnClick
-                dropId="files-collaborators-roles-dropdown"
-                toggle="#files-collaborators-role-button"
-                mode="click"
-                :options="{ offset: 0, delayHide: 0 }"
-                class="oc-autocomplete-dropdown"
-              >
-                <ul class="oc-autocomplete-suggestion-list">
-                  <li
-                    v-for="(role, key) in roles"
-                    :key="key"
-                    :id="`files-collaborator-new-collaborator-role-${role.tag}`"
-                    class="oc-autocomplete-suggestion"
-                    :class="{ 'oc-autocomplete-suggestion-selected' : selectedNewRole === role }"
-                    @click="$_ocCollaborators_newCollaboratorsSelectRole(role)"
-                  >
-                    <span class="uk-text-bold">{{ role.name }}</span>
-                    <p class="uk-text-meta uk-margin-remove">{{ role.description }}</p>
-                  </li>
-                </ul>
-              </oc-drop>
-            </div>
-            <div v-if="false" class="uk-width-1-1">
-              <label class="oc-label">
-                <translate>Expiration date</translate>
-                <translate class="uk-text-meta uk-remove-margin">(optional)</translate>
-              </label>
-              <oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
-            </div>
-            <oc-grid v-if="selectedNewRole" gutter="small" class="uk-width-1-1">
-              <div class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle">
-                <oc-switch
-                  class="uk-margin-small-right"
-                  @change="$_ocCollaborators_switchPermission('canShare')"
-                />
-                <translate :class="{ 'uk-text-muted': !canShare }">Can share</translate>
-              </div>
-              <template v-if="selectedNewRole.tag === 'custom'">
-                <div class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle">
-                  <oc-switch
-                    class="uk-margin-small-right"
-                    @change="$_ocCollaborators_switchPermission('canChange')"
-                  />
-                  <translate :class="{ 'uk-text-muted': !canChange }">Can change</translate>
-                </div>
-                <div
-                  v-if="highlightedFile.type === 'folder'"
-                  class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle"
-                >
-                  <oc-switch
-                    class="uk-margin-small-right"
-                    @change="$_ocCollaborators_switchPermission('canCreate')"
-                  />
-                  <translate :class="{ 'uk-text-muted': !canCreate }">Can create</translate>
-                </div>
-                <div
-                  v-if="highlightedFile.type === 'folder'"
-                  class="uk-flex uk-flex-row uk-flex-wrap uk-flex-middle"
-                >
-                  <oc-switch
-                    class="uk-margin-small-right"
-                    @change="$_ocCollaborators_switchPermission('canDelete')"
-                  />
-                  <translate :class="{ 'uk-text-muted': !canDelete }">Can delete</translate>
-                </div>
-              </template>
-            </oc-grid>
-            <div>
-              <oc-button @click="$_ocCollaborators_newCollaboratorsCancel">
-                <translate>Cancel</translate>
-              </oc-button>
-            </div>
-            <div>
-              <oc-button
-                id="files-collaborators-add-new-button"
-                variation="primary"
-                @click="$_ocCollaborators_newCollaboratorsAdd(selectedCollaborators)"
-                :disabled="!selectedNewRole"
-              >
-                <translate>Add collaborators</translate>
-              </oc-button>
-            </div>
-          </oc-grid>
+          <oc-icon
+            name="close"
+            variation="danger"
+            class="oc-cursor-pointer"
+            role="button"
+            @click="$_ocCollaborators_removeFromSelection(collaborator)"
+          />
         </div>
       </div>
+      <collaborators-edit-options class="uk-margin-bottom" @optionChange="collaboratorOptionChanged" />
+      <div class="uk-flex uk-flex-between">
+        <oc-button @click="$_ocCollaborators_newCollaboratorsCancel">
+          <translate>Cancel</translate>
+        </oc-button>
+        <oc-button
+          id="files-collaborators-add-new-button"
+          variation="primary"
+          @click="addCollaborators(selectedCollaborators)"
+        >
+          <translate>Add collaborators</translate>
+        </oc-button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import Mixins from './mixins'
+import Mixins from '../../mixins/collaborators'
+import { roleToBitmask } from '../../helpers/collaborators'
 
 import AutocompleteItem from './AutocompleteItem.vue'
+const CollaboratorsEditOptions = () => import('./CollaboratorsEditOptions.vue')
 
 export default {
   name: 'NewCollaborator',
   mixins: [Mixins],
   components: {
-    AutocompleteItem
+    AutocompleteItem,
+    CollaboratorsEditOptions
   },
   data () {
     return {
       autocompleteResults: [],
       autocompleteInProgress: false,
       selectedCollaborators: [],
-      canShare: false,
-      canChange: false,
-      canCreate: false,
-      canDelete: false,
-      selectedNewRole: null
+      selectedRole: null,
+      additionalPermissions: null
     }
   },
   computed: {
-    ...mapGetters('Files', ['shares', 'highlightedFile', 'collaboratorsEditInProgress']),
+    ...mapGetters('Files', [
+      'shares',
+      'highlightedFile',
+      'collaboratorsEditInProgress'
+    ]),
     ...mapGetters(['user']),
 
     $_ocCollaborationStatus_autocompletePlacholder () {
-      return this.$gettext("Add new collaborator by name, email or federation ID's")
-    },
-
-    defaultRole () {
-      return this.roles[Object.keys(this.roles)[0]]
-    }
-  },
-
-  watch: {
-    // Switch back to default role after selecting different file
-    highlightedFile () {
-      this.selectedNewRole = this.defaultRole
+      return this.$gettext(
+        "Add new collaborator by name, email or federation ID's"
+      )
     }
   },
-  mounted () {
-    // Ensure default role is not undefined
-    this.selectedNewRole = this.defaultRole
-  },
 
   methods: {
-    ...mapActions('Files', ['shareSetOpen', 'loadShares', 'sharesClearState',
-      'addShare', 'deleteShare', 'changeShare', 'toggleCollaboratorsEdit']),
+    ...mapActions('Files', [
+      'shareSetOpen',
+      'loadShares',
+      'sharesClearState',
+      'addShare',
+      'deleteShare',
+      'changeShare',
+      'toggleCollaboratorsEdit'
+    ]),
 
     onAutocompleteInput (value) {
-      if (value.length < parseInt(this.user.capabilities.files_sharing.search_min_length, 10)) {
+      if (
+        value.length <
+        parseInt(this.user.capabilities.files_sharing.search_min_length, 10)
+      ) {
         this.autocompleteInProgress = false
         this.autocompleteResults = []
         return
@@ -247,9 +165,14 @@ export default {
     },
     filterRecipients (item, queryText) {
       if (item.value.shareType === 6) {
-        return item.label.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) >
-          -1 && item.label.indexOf('@') > -1 && item.label.indexOf('.') > -1 &&
+        return (
+          item.label
+            .toLocaleLowerCase()
+            .indexOf(queryText.toLocaleLowerCase()) > -1 &&
+          item.label.indexOf('@') > -1 &&
+          item.label.indexOf('.') > -1 &&
           item.label.lastIndexOf('.') + 1 !== item.label.length
+        )
       }
       return (
         item.label.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) >
@@ -264,33 +187,7 @@ export default {
       this.toggleCollaboratorsEdit(false)
       this.selectedNewRole = this.defaultRole
     },
-    $_ocCollaborators_newCollaboratorsSelectRole (role) {
-      this.selectedNewRole = role
-    },
-    $_ocCollaborators_newCollaboratorsAdd (collaborators) {
-      let permissions = 1
-      const changePerm = 2
-      const createPerm = 4
-      const deletePerm = 8
-      const resharePerm = 16
-      switch (this.selectedNewRole.tag) {
-        case 'viewer':
-          permissions = this.canShare ? 17 : 1
-          break
-        case 'editor':
-          if (this.highlightedFile.type === 'folder') {
-            permissions = this.canShare ? 31 : 15
-            break
-          }
-          permissions = this.canShare ? 19 : 3
-          break
-        case 'custom':
-          if (this.canChange) permissions += changePerm
-          if (this.canCreate) permissions += createPerm
-          if (this.canDelete) permissions += deletePerm
-          if (this.canShare) permissions += resharePerm
-          break
-      }
+    addCollaborators (collaborators) {
       for (const collaborator of collaborators) {
         this.addShare({
           client: this.$client,
@@ -298,15 +195,10 @@ export default {
           $gettext: this.$gettext,
           shareWith: collaborator.value.shareWith,
           shareType: collaborator.value.shareType,
-          permissions: permissions
+          permissions: roleToBitmask(this.selectedRole, this.additionalPermissions, this.highlightedFile.type === 'folder')
         })
       }
       this.selectedCollaborators = []
-      this.selectedNewRole = this.defaultRole
-      this.canChange = false
-      this.canCreate = false
-      this.canDelete = false
-      this.canShare = false
       this.toggleCollaboratorsEdit(false)
     },
     $_ocCollaborators_selectAutocompleteResult (collaborator) {
diff --git a/apps/files/src/components/Collaborators/RolesSelect.vue b/apps/files/src/components/Collaborators/RolesSelect.vue
new file mode 100644
index 00000000000..3cdf75f2ffe
--- /dev/null
+++ b/apps/files/src/components/Collaborators/RolesSelect.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <label class="oc-label">
+      <translate>Role</translate>:
+    </label>
+    <oc-button
+      id="files-collaborators-role-button"
+      class="uk-width-1-1 files-collaborators-role-button"
+      v-text="selectedRole.label"
+    />
+    <oc-drop
+      closeOnClick
+      dropId="files-collaborators-roles-dropdown"
+      toggle="#files-collaborators-role-button"
+      mode="click"
+      :options="{ offset: 0, delayHide: 0 }"
+      class="oc-autocomplete-dropdown"
+    >
+      <ul class="oc-autocomplete-suggestion-list">
+        <li
+          v-for="role in roles"
+          :key="role.name"
+          :id="`files-collaborator-new-collaborator-role-${role.name}`"
+          class="oc-autocomplete-suggestion"
+          :class="{ 'oc-autocomplete-suggestion-selected': role.name === selectedRole.name }"
+          @click="selectRole(role)"
+        >
+          <span class="uk-text-bold" v-text="role.label" />
+          <p
+            class="uk-text-meta uk-margin-remove"
+            v-text="role.description"
+          />
+        </li>
+      </ul>
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+import collaboratorsMixin from '../../mixins/collaborators'
+
+export default {
+  name: 'RolesSelect',
+  mixins: [
+    collaboratorsMixin
+  ],
+  props: {
+    selectedRole: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    selectRole (role) {
+      this.$emit('roleSelected', role)
+    }
+  }
+}
+</script>
diff --git a/apps/files/src/components/FileSharingSidebar.vue b/apps/files/src/components/FileSharingSidebar.vue
index 478fdd9683c..65de32ec486 100644
--- a/apps/files/src/components/FileSharingSidebar.vue
+++ b/apps/files/src/components/FileSharingSidebar.vue
@@ -36,7 +36,7 @@
 
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex'
-import Mixins from './Collaborators/mixins'
+import Mixins from '../mixins/collaborators'
 const NewCollaborator = _ => import('./Collaborators/NewCollaborator.vue')
 const Collaborator = _ => import('./Collaborators/Collaborator.vue')
 
diff --git a/apps/files/src/helpers/collaboratorRolesDefinition.js b/apps/files/src/helpers/collaboratorRolesDefinition.js
new file mode 100644
index 00000000000..30ae7ebba3b
--- /dev/null
+++ b/apps/files/src/helpers/collaboratorRolesDefinition.js
@@ -0,0 +1,69 @@
+// Return original string in case no translate function is provided
+function returnOriginal (string) {
+  return string
+}
+
+// TODO: Bring default role in here. Later might go to the roles API
+/**
+   * Returns object with collaborator roles
+   * @param {boolean} isFolder  Defines if the item is folder
+   * @param {function} $gettext  Function to translate neccessary strings
+   * @returns {object}  Collaborator roles
+   */
+export default ({ isFolder = false, $gettext = returnOriginal }) => {
+  if (isFolder) {
+    return {
+      viewer: {
+        name: 'viewer',
+        label: $gettext('Viewer'),
+        description: $gettext('Download and preview'),
+        permissions: ['read'],
+        additionalPermissions: {
+          share: {
+            name: 'share',
+            description: $gettext('Allow re-Sharing')
+          }
+        }
+      },
+      editor: {
+        name: 'editor',
+        label: $gettext('Editor'),
+        description: $gettext('Upload, edit, delete, download and preview'),
+        permissions: ['read', 'update', 'create', 'delete'],
+        additionalPermissions: {
+          share: {
+            name: 'share',
+            description: $gettext('Allow re-Sharing')
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    viewer: {
+      name: 'viewer',
+      label: $gettext('Viewer'),
+      description: $gettext('Download and preview'),
+      permissions: ['read'],
+      additionalPermissions: {
+        share: {
+          name: 'share',
+          description: $gettext('Allow re-Sharing')
+        }
+      }
+    },
+    editor: {
+      name: 'editor',
+      label: $gettext('Editor'),
+      description: $gettext('Edit, download and preview'),
+      permissions: ['read', 'update'],
+      additionalPermissions: {
+        share: {
+          name: 'share',
+          description: $gettext('Allow re-Sharing')
+        }
+      }
+    }
+  }
+}
diff --git a/apps/files/src/helpers/collaborators.js b/apps/files/src/helpers/collaborators.js
new file mode 100644
index 00000000000..3228910ab3c
--- /dev/null
+++ b/apps/files/src/helpers/collaborators.js
@@ -0,0 +1,79 @@
+import roles from './collaboratorRolesDefinition'
+
+/**
+ * Bitmask of ownCloud permission
+ */
+export const permissionsBitmask = {
+  read: 1,
+  update: 2,
+  create: 4,
+  delete: 8,
+  share: 16,
+  all: 31
+}
+
+/**
+ * Maps role to its bitmask
+ * @param {object} role  Role which is to be mapped to permissions
+ * @param {array} additionalPermissions  Array of selected additional permissions
+ * @returns {integer}  Role bitmask
+ */
+export function roleToBitmask (role, additionalPermissions = []) {
+  let bitmask = 0
+
+  for (const permission of role.permissions) {
+    bitmask |= permissionsBitmask[permission]
+  }
+
+  if (additionalPermissions) {
+    for (const additionalPermission of additionalPermissions) {
+      bitmask |= permissionsBitmask[additionalPermission]
+    }
+  }
+
+  return bitmask
+}
+
+/**
+ * Maps bitmask to role
+ * @param {number} bitmask Permissions which are to be mapped to role
+ * @param {boolean} isFolder Defines if the item is folder
+ * @returns {object} Role mapped to the bitmask
+ */
+export function bitmaskToRole (bitmask, isFolder) {
+  // TODO: inject the result of "roles()" in the function header and have the caller of bitmaskToRole call roles() with appropriate arguments including translation
+  // Not passing in translation as we don't need it
+  const currentRoles = roles({ isFolder: isFolder })
+  bitmask = parseInt(bitmask, 10)
+
+  for (const role in currentRoles) {
+    const currentRole = currentRoles[role]
+    let rolePermissionsBitmask = 0
+
+    // Get bitmask of basic permissions
+    currentRole.permissions.forEach(permission => {
+      rolePermissionsBitmask |= permissionsBitmask[permission]
+    })
+
+    // Copy basic permissions bitmask so that in case that no additional permissions have been set, the role is still mapped
+    const roleBasicPermissionsBitmask = rolePermissionsBitmask
+
+    // Get bitmask of additional permissions
+    const additionalPermissions = currentRole.additionalPermissions
+    for (const additionalPermission in additionalPermissions) {
+      rolePermissionsBitmask |= permissionsBitmask[additionalPermissions[additionalPermission].name]
+    }
+
+    // TODO: Use bitmask
+    if (
+      rolePermissionsBitmask === bitmask ||
+      roleBasicPermissionsBitmask === bitmask
+    ) {
+      return currentRole
+    }
+  }
+
+  return {
+    name: 'advancedRole'
+  }
+}
diff --git a/apps/files/src/components/Collaborators/mixins.js b/apps/files/src/mixins/collaborators.js
similarity index 51%
rename from apps/files/src/components/Collaborators/mixins.js
rename to apps/files/src/mixins/collaborators.js
index 6e08b940ee3..851612c6b63 100644
--- a/apps/files/src/components/Collaborators/mixins.js
+++ b/apps/files/src/mixins/collaborators.js
@@ -1,32 +1,52 @@
 import { mapGetters, mapActions } from 'vuex'
+import roles from '../helpers/collaboratorRolesDefinition'
 
 export default {
-  data () {
-    return {
-      roles: {
-        viewer: {
-          tag: 'viewer',
-          name: this.$gettext('Viewer'),
-          description: this.$gettext('Download and preview')
-        },
-        editor: {
-          tag: 'editor',
-          name: this.$gettext('Editor'),
-          description: this.$gettext(
-            'Upload, edit, delete, download and preview'
-          )
-        },
-        custom: {
-          tag: 'custom',
-          name: this.$gettext('Custom role'),
-          description: this.$gettext('Set detailed permissions')
+  computed: {
+    ...mapGetters(['getToken']),
+    ...mapGetters('Files', ['highlightedFile']),
+
+    advancedRole () {
+      const advancedRole = {
+        name: 'advancedRole',
+        label: this.$gettext('Advanced permissions'),
+        description: this.$gettext('Set detailed permissions'),
+        permissions: ['read'],
+        additionalPermissions: {
+          share: {
+            name: 'share',
+            description: this.$gettext('Allow re-Sharing')
+          },
+          update: {
+            name: 'update',
+            description: this.$gettext('Allow editing')
+          }
         }
       }
+
+      if (this.highlightedFile.type === 'folder') {
+        const permissions = advancedRole.additionalPermissions
+        permissions.create = {
+          name: 'create',
+          description: this.$gettext('Allow creating')
+        }
+        permissions.delete = {
+          name: 'delete',
+          description: this.$gettext('Allow deleting')
+        }
+      }
+
+      return advancedRole
+    },
+
+    roles () {
+      const isFolder = this.highlightedFile.type === 'folder'
+      const collaboratorRoles = roles({ translate: this.$gettext, isFolder: isFolder })
+      collaboratorRoles.advancedRole = this.advancedRole
+
+      return collaboratorRoles
     }
   },
-  computed: {
-    ...mapGetters(['getToken'])
-  },
   methods: {
     ...mapActions('Files', ['toggleCollaboratorsEdit']),
 
@@ -78,6 +98,16 @@ export default {
         .finally(_ => {
           this.loading = false
         })
+    },
+
+    collaboratorOptionChanged ({ role, permissions, propagate = true }) {
+      this.selectedRole = role
+      this.additionalPermissions = permissions
+
+      if (propagate) {
+        this.editing = true
+        this.toggleCollaboratorsEdit(true)
+      }
     }
   }
 }
diff --git a/apps/files/src/store/actions.js b/apps/files/src/store/actions.js
index 62e34216aae..8e919001add 100644
--- a/apps/files/src/store/actions.js
+++ b/apps/files/src/store/actions.js
@@ -1,4 +1,5 @@
 import moment from 'moment'
+import { bitmaskToRole } from '../helpers/collaborators'
 
 function _buildFile (file) {
   let ext = ''
@@ -204,7 +205,7 @@ function _buildLink (l, $gettext) {
   }
 }
 
-function _buildShare (s) {
+function _buildShare (s, file) {
   const share = {
     info: s
   }
@@ -215,22 +216,17 @@ function _buildShare (s) {
     case ('6'):
     // fall through
     case ('1'): // group share
-      share.role = 'custom'
-      if (s.permissions === '1' || s.permissions === '17') {
-        share.role = 'viewer'
-      }
-      if (s.permissions === '3' || s.permissions === '15' || s.permissions === '19' || s.permissions === '31') {
-        share.role = 'editor'
-      }
+      share.role = bitmaskToRole(s.permissions, file.type === 'folder')
       share.permissions = s.permissions
-      share.canShare = s.permissions === '17' || s.permissions === '19' || s.permissions === '21' || s.permissions === '25' || s.permissions === '31'
       share.avatar = 'https://picsum.photos/64/64?image=1075' // TODO where do we get the avatar from? by uid? remote.php/dav/avatars/admin/128.png
       share.name = s.share_with // this is the recipient userid, rename to uid or subject? add separate field userName?
       share.displayName = s.share_with_displayname
+      // TODO: Refactor to work with roles / prepare for roles API
       share.customPermissions = {
-        change: s.permissions === '3' || s.permissions === '15' || s.permissions === '19' || s.permissions === '31',
+        update: s.permissions === '3' || s.permissions === '15' || s.permissions === '19' || s.permissions === '31',
         create: s.permissions === '5' || s.permissions === '15' || s.permissions === '21' || s.permissions === '31',
-        delete: s.permissions === '9' || s.permissions === '15' || s.permissions === '25' || s.permissions === '31'
+        delete: s.permissions === '9' || s.permissions === '15' || s.permissions === '25' || s.permissions === '31',
+        share: s.permissions === '17' || s.permissions === '19' || s.permissions === '21' || s.permissions === '25' || s.permissions === '31'
       }
       // share.email = 'foo@djungle.com' // hm, where do we get the mail from? share_with_additional_info:Object?
       break
@@ -541,7 +537,7 @@ export default {
     client.shares.getShares(path, { reshares: true })
       .then(data => {
         context.commit('SHARES_LOAD', data.map(element => {
-          return _buildShare(element.shareInfo)
+          return _buildShare(element.shareInfo, context.getters.highlightedFile)
         }))
       })
       .catch(error => {
@@ -553,39 +549,11 @@ export default {
     context.commit('SHARES_LOAD', [])
     context.commit('SHARES_ERROR', null)
   },
-  changeShare (context, { client, share, role, canShare, canChange, canCreate, canDelete }) {
-    context.commit('TOGGLE_COLLABORATOR_SAVING', true)
-    const params = {}
-    let perms = 1
-    const changePerm = 2
-    const createPerm = 4
-    const deletePerm = 8
-    const resharePerm = 16
-    switch (role) {
-      case ('viewer'):
-        params.permissions = canShare ? 17 : 1
-        break
-      case ('editor'):
-        if (share.info.item_type === 'file') {
-          params.permissions = canShare ? 19 : 3
-          break
-        }
-        params.permissions = canShare ? 31 : 15
-        break
-      case ('custom'):
-        if (canChange) perms += changePerm
-        if (canCreate) perms += createPerm
-        if (canDelete) perms += deletePerm
-        if (canShare) perms += resharePerm
-        params.permissions = perms
-
-        if (perms === 1 || perms === 17) {
-          role = 'viewer'
-        }
-        if (perms === 3 || perms === 15 || perms === 19 || perms === 31) {
-          role = 'editor'
-        }
-        break
+  changeShare ({ commit }, { client, share, role, permissions }) {
+    commit('TOGGLE_COLLABORATOR_SAVING', true)
+
+    const params = {
+      permissions: permissions
     }
 
     if (!params.permissions) {
@@ -597,13 +565,13 @@ export default {
     client.shares.updateShare(share.info.id, params)
       .then(() => {
         // TODO: work with response once it is available: https://github.com/owncloud/owncloud-sdk/issues/208
-        context.commit('SHARES_UPDATE_SHARE', { share, role })
+        commit('SHARES_UPDATE_SHARE', { share, role })
       })
       .catch(e => {
         console.log(e)
       })
       .finally(_ => {
-        context.commit('TOGGLE_COLLABORATOR_SAVING', false)
+        commit('TOGGLE_COLLABORATOR_SAVING', false)
       })
   },
   addShare (context, { client, path, $gettext, shareWith, shareType, permissions }) {
@@ -612,7 +580,7 @@ export default {
     if (shareType === 1) {
       client.shares.shareFileWithGroup(path, shareWith, { permissions: permissions })
         .then(share => {
-          context.commit('SHARES_ADD_SHARE', _buildShare(share.shareInfo))
+          context.commit('SHARES_ADD_SHARE', _buildShare(share.shareInfo, context.getters.highlightedFile))
           context.commit('SHARES_LOADING', false)
         })
         .catch(e => {
@@ -636,7 +604,7 @@ export default {
 
     client.shares.shareFileWithUser(path, shareWith, { permissions: permissions, remoteUser: remoteShare })
       .then(share => {
-        context.commit('SHARES_ADD_SHARE', _buildShare(share.shareInfo))
+        context.commit('SHARES_ADD_SHARE', _buildShare(share.shareInfo, context.getters.highlightedFile))
         context.commit('SHARES_LOADING', false)
       })
       .catch(e => {
diff --git a/package.json b/package.json
index 8ddab55fdf0..2007113ce6e 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "eslint-plugin-vue": "^5.2.3",
     "execa": "^2.0.3",
     "file-loader": "^4.1.0",
+    "filter-obj": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
     "husky": ">=3.0.5",
     "lint-staged": ">=9",
diff --git a/yarn.lock b/yarn.lock
index 0478f0854ce..1784344e17f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3789,6 +3789,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-2.0.1.tgz#34d9f0536786f072df7aeac3a8bda1c6e767aec6"
+  integrity sha512-yDEp513p7+iLdFHWBVdZFnRiOYwg8ZqmpaAiZCMjzqsbo7tCS4Qm4ulXOht337NGzkukKa9u3W4wqQ9tQPm3Ug==
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"