diff --git a/package.json b/package.json
index 7a102e223..e3832db2b 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
 		"nextcloud-axios": "^0.1.2",
 		"nextcloud-server": "^0.15.9",
 		"nextcloud-vue": "^0.10.0",
+		"nextcloud-vue-collections": "^0.4.0",
 		"vue": "^2.5.16",
 		"vue-click-outside": "^1.0.7",
 		"vue-color": "^2.7.0",
diff --git a/js/views/CollaborationView.vue b/src/components/CollaborationView.vue
similarity index 58%
rename from js/views/CollaborationView.vue
rename to src/components/CollaborationView.vue
index 9eb9649bc..ee1fc1d5a 100644
--- a/js/views/CollaborationView.vue
+++ b/src/components/CollaborationView.vue
@@ -22,35 +22,36 @@
 
 <template>
 	<div>
-		<collection-list v-if="boardId" type="deck" :id="boardId" :name="boardTitle"></collection-list>
+		<collection-list v-if="boardId" :id="boardId" :name="boardTitle"
+			type="deck" />
 	</div>
 </template>
 
 <script>
-	import { CollectionList } from 'nextcloud-vue-collections';
-	import Vue from 'vue';
-	import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu'
+import { CollectionList } from 'nextcloud-vue-collections'
+import Vue from 'vue'
+import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu'
 
-	Vue.component('popover-menu', PopoverMenu);
+Vue.component('popover-menu', PopoverMenu)
 
-	export default {
-		name: 'CollaborationView',
-		computed: {
-			boardId() {
-				if (this.$root.model && this.$root.model.id) {
-					return '' + this.$root.model.id;
-				}
-				return null;
-			},
-			boardTitle() {
-				if (this.$root.model && this.$root.model.title) {
-					return '' + this.$root.model.title;
-				}
-				return '';
+export default {
+	name: 'CollaborationView',
+	components: {
+		CollectionList: CollectionList
+	},
+	computed: {
+		boardId() {
+			if (this.$root.model && this.$root.model.id) {
+				return '' + this.$root.model.id
 			}
+			return null
 		},
-		components: {
-			CollectionList: CollectionList
+		boardTitle() {
+			if (this.$root.model && this.$root.model.title) {
+				return '' + this.$root.model.title
+			}
+			return ''
 		}
 	}
+}
 </script>
diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebard.vue
index da5e75e36..dc831f065 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebard.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<multiselect :options="sharees" label="label" @search-change="asyncFind">
+		<multiselect v-model="addAcl" :options="sharees" label="label"
+			@input="clickAddAcl" @search-change="asyncFind">
 			<template #option="scope">
 				{{ scope.option.label }}
 			</template>
@@ -21,20 +22,35 @@
 				<span class="has-tooltip username">
 					{{ acl.participant.displayname }}
 				</span>
+
+				<input :checked="acl.permissionEdit" type="checkbox" @click="clickEditAcl(acl)">
+				<label for="checkbox">{{ t('deck', 'Edit') }}</label>
+
+				<input :checked="acl.permissionShare" type="checkbox" @click="clickShareAcl(acl)">
+				<label for="checkbox">{{ t('deck', 'Share') }}</label>
+
+				<input :checked="acl.permissionManage" type="checkbox" @click="clickManageAcl(acl)">
+				<label for="checkbox">{{ t('deck', 'Manage') }}</label>
+
+				<button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="clickDeleteAcl(acl)" />
+
 			</li>
 		</ul>
+		<CollaborationView />
 	</div>
 </template>
 
 <script>
 import { Avatar, Multiselect } from 'nextcloud-vue'
+import CollaborationView from '../CollaborationView'
 import { mapGetters } from 'vuex'
 
 export default {
 	name: 'SharingTabSidebard',
 	components: {
 		Avatar,
-		Multiselect
+		Multiselect,
+		CollaborationView
 	},
 	props: {
 		board: {
@@ -44,7 +60,9 @@ export default {
 	},
 	data() {
 		return {
-			isLoading: false
+			isLoading: false,
+			addAcl: null,
+			addAclForAPI: null
 		}
 	},
 	computed: {
@@ -58,8 +76,35 @@ export default {
 			this.$store.dispatch('loadSharees').then(response => {
 				this.isLoading = false
 			})
+		},
+		clickAddAcl() {
+			this.addAclForAPI = {
+				type: 0,
+				participant: this.addAcl.value.shareWith,
+				permissionEdit: false,
+				permissionShare: false,
+				permissionManage: false
+			}
+			this.$store.dispatch('addAclToCurrentBoard', this.addAclForAPI)
+		},
+		clickEditAcl(acl) {
+			this.addAclForAPI = Object.assign({}, acl)
+			this.addAclForAPI.permissionEdit = !acl.permissionEdit
+			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+		},
+		clickShareAcl(acl) {
+			this.addAclForAPI = Object.assign({}, acl)
+			this.addAclForAPI.permissionShare = !acl.permissionShare
+			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+		},
+		clickManageAcl(acl) {
+			this.addAclForAPI = Object.assign({}, acl)
+			this.addAclForAPI.permissionManage = !acl.permissionManage
+			this.$store.dispatch('updateAclFromCurrentBoard', this.addAclForAPI)
+		},
+		clickDeleteAcl(acl) {
+			this.$store.dispatch('deleteAclFromCurrentBoard', acl)
 		}
 	}
-
 }
 </script>
diff --git a/src/services/BoardApi.js b/src/services/BoardApi.js
index 8f8efb23f..66857269f 100644
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -181,4 +181,51 @@ export class BoardApi {
 			})
 	}
 
+	// Acl API Calls
+
+	addAcl(acl) {
+		return axios.post(this.url(`/boards/${acl.boardId}/acl`), acl)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	updateAcl(acl) {
+		return axios.put(this.url(`/boards/${acl.boardId}/acl/${acl.id}`), acl)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	deleteAcl(acl) {
+		return axios.delete(this.url(`/boards/${acl.boardId}/acl/${acl.id}`))
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 }
diff --git a/src/store/main.js b/src/store/main.js
index 1cb946e12..a7540edea 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -163,6 +163,27 @@ export default new Vuex.Store({
 		addLabelToCurrentBoard(state, newLabel) {
 
 			state.currentBoard.labels.push(newLabel)
+		},
+
+		// acl mutators
+		addAclToCurrentBoard(state, acl) {
+			console.log(state.currentBoard)
+		},
+		updateAclFromCurrentBoard(state, acl) {
+			for (var acl_ in state.currentBoard.acl) {
+				if (state.currentBoard.acl[acl_].participant.uid === acl.participant.uid) {
+					state.currentBoard.acl[acl_] = acl
+					break
+				}
+			}
+		},
+		deleteAclFromCurrentBoard(state, acl) {
+			for (var acl_ in state.currentBoard.acl) {
+				if (state.currentBoard.acl[acl_].participant.uid === acl.participant.uid) {
+					delete state.currentBoard.acl[acl_]
+					break
+				}
+			}
 		}
 	},
 	actions: {
@@ -261,6 +282,29 @@ export default new Vuex.Store({
 				.then((newLabel) => {
 					commit('addLabelToCurrentBoard', newLabel)
 				})
+		},
+
+		// acl actions
+		addAclToCurrentBoard({ commit }, acl) {
+			acl.boardId = this.state.currentBoard.id
+			apiClient.addAcl(acl)
+				.then((acl) => {
+					commit('addAclToCurrentBoard', acl)
+				})
+		},
+		updateAclFromCurrentBoard({ commit }, acl) {
+			acl.boardId = this.state.currentBoard.id
+			apiClient.updateAcl(acl)
+				.then((acl) => {
+					commit('updateAclFromCurrentBoard', acl)
+				})
+		},
+		deleteAclFromCurrentBoard({ commit }, acl) {
+			acl.boardId = this.state.currentBoard.id
+			apiClient.deleteAcl(acl)
+				.then((acl) => {
+					commit('deleteAclFromCurrentBoard', acl)
+				})
 		}
 	}
 })