diff --git a/css/icons.scss b/css/icons.scss
index ef9755890..2410c082d 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -5,10 +5,6 @@
   background-image: url('../img/deck-dark.svg');
 }
 
-.icon-group {
-  background-image: url('../../../settings/img/users.svg');
-}
-
 .icon-help {
   background-image: url('../../../settings/img/help.svg');
 }
@@ -59,7 +55,7 @@
   @include icon-black-white('archive', 'deck', 1);
   @include icon-black-white('circles', 'deck', 1);
   @include icon-black-white('clone', 'deck', 1);
-	
+
 	.icon-toggle-compact-collapsed {
 		@include icon-color('toggle-view-expand', 'deck', $color-black);
 	}
diff --git a/lib/Service/PermissionService.php b/lib/Service/PermissionService.php
index 2a815fe01..76a450d1c 100644
--- a/lib/Service/PermissionService.php
+++ b/lib/Service/PermissionService.php
@@ -262,6 +262,27 @@ class PermissionService {
 					$users[$user->getUID()] = new User($user);
 				}
 			}
+
+			if ($this->circlesEnabled && $acl->getType() === Acl::PERMISSION_TYPE_CIRCLE) {
+				try {
+					$circle = \OCA\Circles\Api\v1\Circles::detailsCircle($acl->getParticipant(), true);
+					if ($circle === null) {
+						$this->logger->info('No circle found for acl rule ' . $acl->getId());
+						continue;
+					}
+				
+					foreach ($circle->getMembers() as $member) {
+						$user = $this->userManager->get($member->getUserId());
+						if ($user === null) {
+							$this->logger->info('No user found for circle member ' . $member->getUserId());
+						} else {
+							$users[$member->getUserId()] = new User($user);
+						}
+					}   
+				} catch (\Exception $e) {
+					$this->logger->info('Member not found in circle that was accessed. This should not happen.');
+				}
+			}
 		}
 		$this->users[(string) $boardId] = $users;
 		return $this->users[(string) $boardId];
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 56d810155..bbf397b96 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -90,14 +90,21 @@ export default {
 	},
 	methods: {
 		fetchData() {
-			this.boardApi.loadById(this.id)
+
+			this.$store.dispatch('loadBoardById', this.id).then(response => {
+				this.$store.dispatch('loadStacks', this.id).then(response => {
+					this.loading = false
+				})
+			})
+
+			/* this.boardApi.loadById(this.id)
 				.then((board) => {
 					this.$store.dispatch('setCurrentBoard', board)
 					this.$store.dispatch('loadStacks', board)
 					this.$store.dispatch('setAssignableUsers', board.users)
 					this.loading = false
 					this.$store.state.labels = board.labels
-				})
+				}) */
 		},
 		onDropStack({ removedIndex, addedIndex }) {
 			this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index a283d7e55..4c880a889 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -27,11 +27,11 @@
 		@close="closeSidebar">
 
 		<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
-			<SharingTabSidebard :board="board" />
+			<SharingTabSidebar :board="board" />
 		</AppSidebarTab>
 
 		<AppSidebarTab :order="1" name="Tags" icon="icon-tag">
-			<TagsTabSidebard :board="board" />
+			<TagsTabSidebar :board="board" />
 		</AppSidebarTab>
 
 		<AppSidebarTab :order="2" name="Deleted items" icon="icon-delete">
@@ -39,7 +39,7 @@
 		</AppSidebarTab>
 
 		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
-			<TimelineTabSidebard :board="board" />
+			<TimelineTabSidebar :board="board" />
 		</AppSidebarTab>
 
 	</app-sidebar>
@@ -47,10 +47,10 @@
 
 <script>
 import { mapState } from 'vuex'
-import SharingTabSidebard from './SharingTabSidebard'
-import TagsTabSidebard from './TagsTabSidebard'
+import SharingTabSidebar from './SharingTabSidebar'
+import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
-import TimelineTabSidebard from './TimelineTabSidebard'
+import TimelineTabSidebar from './TimelineTabSidebar'
 import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
 
 export default {
@@ -58,10 +58,10 @@ export default {
 	components: {
 		AppSidebar,
 		AppSidebarTab,
-		SharingTabSidebard,
-		TagsTabSidebard,
+		SharingTabSidebar,
+		TagsTabSidebar,
 		DeletedTabSidebar,
-		TimelineTabSidebard
+		TimelineTabSidebar
 	},
 	props: {
 		id: {
diff --git a/src/components/board/SharingTabSidebard.vue b/src/components/board/SharingTabSidebar.vue
similarity index 86%
rename from src/components/board/SharingTabSidebard.vue
rename to src/components/board/SharingTabSidebar.vue
index 2c7470ec7..9986bf20d 100644
--- a/src/components/board/SharingTabSidebard.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -20,9 +20,13 @@
 				</span>
 			</li>
 			<li v-for="acl in board.acl" :key="acl.participant.uid">
-				<avatar :user="acl.participant.uid" />
+				<avatar v-if="acl.type===0" :user="acl.participant.uid" />
+				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
+				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
 				<span class="has-tooltip username">
 					{{ acl.participant.displayname }}
+					<span v-if="acl.type===1">{{ t('deck', '(Group)') }}</span>
+					<span v-if="acl.type===7">{{ t('deck', '(Circle)') }}</span>
 				</span>
 
 				<Actions>
@@ -47,7 +51,7 @@ import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters } from 'vuex'
 
 export default {
-	name: 'SharingTabSidebard',
+	name: 'SharingTabSidebar',
 	components: {
 		Avatar,
 		Actions,
@@ -97,9 +101,13 @@ export default {
 		},
 		unallocatedSharees() {
 			return this.sharees.filter((sharee) => {
-				return Object.values(this.board.acl).findIndex((acl) => {
+				let foundIndex = this.board.acl.findIndex((acl) => {
 					return acl.participant.uid === sharee.value.shareWith
 				})
+				if (foundIndex === -1) {
+					return true
+				}
+				return false
 			})
 		}
 	},
@@ -156,4 +164,10 @@ export default {
 	.avatarLabel {
 		padding: 6px
 	}
+	.avatardiv {
+		background-color: #f5f5f5;
+		border-radius: 16px;
+		width: 32px;
+		height: 32px;
+	}
 </style>
diff --git a/src/components/board/TagsTabSidebard.vue b/src/components/board/TagsTabSidebar.vue
similarity index 99%
rename from src/components/board/TagsTabSidebard.vue
rename to src/components/board/TagsTabSidebar.vue
index 97d02f2bc..e7319422d 100644
--- a/src/components/board/TagsTabSidebard.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -49,7 +49,7 @@ import { Compact } from 'vue-color'
 import ColorPicker from '../ColorPicker'
 
 export default {
-	name: 'TagsTabSidebard',
+	name: 'TagsTabSidebar',
 	components: {
 		ColorPicker,
 		'compact-picker': Compact
diff --git a/src/components/board/TimelineTabSidebard.vue b/src/components/board/TimelineTabSidebar.vue
similarity index 97%
rename from src/components/board/TimelineTabSidebard.vue
rename to src/components/board/TimelineTabSidebar.vue
index 0b3cae224..76a668c77 100644
--- a/src/components/board/TimelineTabSidebard.vue
+++ b/src/components/board/TimelineTabSidebar.vue
@@ -13,7 +13,7 @@ import { mapState } from 'vuex'
 import ActivityEntry from '../ActivityEntry'
 
 export default {
-	name: 'TimelineTabSidebard',
+	name: 'TimelineTabSidebar',
 	components: {
 		ActivityEntry
 	},
diff --git a/src/store/main.js b/src/store/main.js
index 92d50ff5a..15ad482e9 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -235,6 +235,14 @@ export default new Vuex.Store({
 		}
 	},
 	actions: {
+		loadBoardById({ commit }, boardId) {
+			apiClient.loadById(boardId)
+				.then((board) => {
+					commit('setCurrentBoard', board)
+					commit('setAssignableUsers', board.users)
+				})
+		},
+
 		toggleShowArchived({ commit }) {
 			commit('toggleShowArchived')
 		},
@@ -376,11 +384,12 @@ export default new Vuex.Store({
 		},
 
 		// acl actions
-		addAclToCurrentBoard({ commit }, newAcl) {
+		addAclToCurrentBoard({ dispatch, commit }, newAcl) {
 			newAcl.boardId = this.state.currentBoard.id
 			apiClient.addAcl(newAcl)
 				.then((returnAcl) => {
 					commit('addAclToCurrentBoard', returnAcl)
+					dispatch('loadBoardById', newAcl.boardId)
 				})
 		},
 		updateAclFromCurrentBoard({ commit }, acl) {
@@ -390,11 +399,12 @@ export default new Vuex.Store({
 					commit('updateAclFromCurrentBoard', acl)
 				})
 		},
-		deleteAclFromCurrentBoard({ commit }, acl) {
+		deleteAclFromCurrentBoard({ dispatch, commit }, acl) {
 			acl.boardId = this.state.currentBoard.id
 			apiClient.deleteAcl(acl)
 				.then((acl) => {
 					commit('deleteAclFromCurrentBoard', acl)
+					dispatch('loadBoardById', acl.boardId)
 				})
 		}
 	}
diff --git a/src/store/stack.js b/src/store/stack.js
index 661c20440..2c30ac6dc 100644
--- a/src/store/stack.js
+++ b/src/store/stack.js
@@ -88,13 +88,13 @@ export default {
 					commit('orderStack', { stack, addedIndex, removedIndex })
 				})
 		},
-		loadStacks({ commit }, board) {
+		loadStacks({ commit }, boardId) {
 			commit('clearCards')
 			let call = 'loadStacks'
 			if (this.state.showArchived === true) {
 				call = 'loadArchivedStacks'
 			}
-			apiClient[call](board.id)
+			apiClient[call](boardId)
 				.then((stacks) => {
 					for (let i in stacks) {
 						let stack = stacks[i]