diff --git a/apps/files/src/components/FileSharingSidebar.vue b/apps/files/src/components/FileSharingSidebar.vue
index b4ad30f6c72..5dfada5b74d 100644
--- a/apps/files/src/components/FileSharingSidebar.vue
+++ b/apps/files/src/components/FileSharingSidebar.vue
@@ -30,6 +30,39 @@
             <span>{{ buildRecipientDisplay(item) }}</span>
           </template>
         </oc-autocomplete>
+        <div v-if="selectedItem" class="uk-margin-medium-bottom">
+          <div class="uk-flex-inline uk-flex-column uk-flex-middle uk-margin-small-bottom">
+            <oc-avatar src="https://picsum.photos/64/64?image=1075" />
+            <span>{{ selectedItem.label }}</span>
+          </div>
+          <div>
+            <oc-grid gutter="small">
+              <div class="uk-width-1-1 uk-width-1-2@xl">
+                <label class="oc-label">Role</label>
+                <oc-button id="files-collaborators-role-button" class="uk-width-1-1 files-collaborators-role-button"><span v-if="!selectedNewRole">Select role</span><template v-else>{{ selectedNewRole.name }}</template></oc-button>
+                <p v-if="selectedNewRole" class="uk-text-meta uk-margin-remove">{{ selectedNewRole.description }}</p>
+                <oc-drop id="files-collaborators-roles-dropdown" toggle="#files-collaborators-role-button" mode="click" :options="{ 'offset': 0 }" class="oc-autocomplete-dropdown">
+                  <ul class="oc-autocomplete-suggestion-list">
+                    <li v-for="(role, key) in roles" :key="key" class="oc-autocomplete-suggestion" @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 class="uk-width-1-1 uk-width-1-2@xl">
+                <label class="oc-label">Expiration date <span class="uk-text-meta uk-remove-margin">(optional)</span></label>
+                <oc-text-input type="date" class="uk-width-1-1 oc-button-role">04 - 07 - 2019</oc-text-input>
+              </div>
+              <div>
+                <oc-button @click="$_ocCollaborators_newCollaboratorsCancel"><translate>Cancel</translate></oc-button>
+              </div>
+              <div>
+                <oc-button variation="primary"><translate>Add collaborators</translate></oc-button>
+              </div>
+            </oc-grid>
+          </div>
+        </div>
         <oc-accordion v-if="!sharesLoading" :multiple=true>
           <oc-accordion-item v-for="(collaborator, index) in shares" :key="index" class="uk-margin-small-bottom">
             <template slot="title">
@@ -110,13 +143,13 @@ export default {
   watch: {
     selectedItem: function (newSelectedSharee) {
       // TODO: handle groups as well
-      this.addShare({
-        client: this.$client,
-        path: this.selectedFiles[0].path,
-        $gettext: this.$gettext,
-        shareWith: newSelectedSharee.value.shareWith,
-        shareType: newSelectedSharee.value.shareType
-      })
+      // this.addShare({
+      //   client: this.$client,
+      //   path: this.selectedFiles[0].path,
+      //   $gettext: this.$gettext,
+      //   shareWith: newSelectedSharee.value.shareWith,
+      //   shareType: newSelectedSharee.value.shareType
+      // })
     }
   },
   data () {
@@ -144,7 +177,8 @@ export default {
         //   name: this.$gettext('Custom role'),
         //   description: this.$gettext('Set detailed permissions')
         // }
-      }
+      },
+      selectedNewRole: ''
     }
   },
   computed: {
@@ -230,6 +264,12 @@ export default {
           this.editing = { name: null }
           this.saving = false
         })
+    },
+    $_ocCollaborators_newCollaboratorsCancel () {
+      this.selectedItem = ''
+    },
+    $_ocCollaborators_newCollaboratorsSelectRole (role) {
+      this.selectedNewRole = role
     }
   }
 }