diff --git a/css/src/Calendars/CalendarSharee.scss b/css/src/Calendars/CalendarSharee.scss
deleted file mode 100644
index 68fd914ed..000000000
--- a/css/src/Calendars/CalendarSharee.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- * @author Team Popcorn <teampopcornberlin@gmail.com>
- * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-.calendar-sharee {
-	padding: 0 5px;
-	display: inline-flex;
-	align-items: center;
-	width: 100%;
-	
-	.icon {
-		margin-right: 5px;
-		opacity: 0.2;
-		width: 16px;
-		height: 16px;
-		display: inline-block;
-		margin-bottom: 2px;
-		&.icon-loading-small {
-			opacity: 1;
-		}
-	}
-
-	&__identifier {
-		width: 100%;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		display: inline-block;
-		vertical-align: top;
-		opacity: 0.7;
-	}
-
-	&__utils {
-		padding: 0 !important;
-		float: right;
-		position: relative !important;
-		display: inline-flex;
-		align-items: center;
-		flex-shrink: 0;
-		height: 20px;
-		
-		.icon-delete {
-			display: inline-block;
-			width: 20px;
-			height: 20px;
-			opacity: 0.4;
-			margin-bottom: 2px;
-			margin-left: 4px;
-			&:hover {
-				box-shadow: unset !important;
-			}
-		}
-		
-		// loading state
-		&--disabled {
-			opacity: .2 !important;
-		}
-		.checkbox + label {
-			padding: 0 !important;
-		}
-		label {
-			opacity: 0.7;
-		}
-	}
-}
diff --git a/css/src/Calendars/CalendarShares.scss b/css/src/Calendars/CalendarShares.scss
index 425c0fed1..387be4343 100644
--- a/css/src/Calendars/CalendarShares.scss
+++ b/css/src/Calendars/CalendarShares.scss
@@ -23,40 +23,49 @@
  */
 
 .calendar-shares {
-	width: calc(100% - 6px);
-	margin: 6px;
-	&__list {
-		margin-top: 8px;
-		margin-bottom: 12px;
-		display: flex;
-		flex-direction: column;
-	}
-
 	&__shareematch--bold {
 		font-weight: bold;
 	}
-	
-	.icon-loading::after {
-		top: 70%;
-		left: 95%;
-		height: 14px;
-		width: 14px;
-	}
 
-	.multiselect {
-		width: inherit;
-		margin: 0;
-		.multiselect__tags:focus-within, 
-		.multiselect__tags:hover {
-			border-color: var(--color-primary-element);
+	.app-navigation-entry {
+		padding-left: 0 !important;
+
+		.avatar {
+			width: 32px;
+			height: 32px;
+			background-color: var(--color-border-dark);
+			background-size: 16px;
 		}
 
-		&:not(.showContent) .multiselect__content-wrapper {
-			display: none;
+		&__utils {
+			.action-checkbox__label {
+				padding-right: 0 !important;
+			}
+	
+			.action-checkbox__label::before {
+				margin: 4px 4px 0 !important;
+			}
 		}
+		
+		&__multiselect {
+			padding-left: 6px !important;
+
+			.multiselect {
+				width: calc(100% - 14px);
+				margin: 0;
+				.multiselect__tags:focus-within, 
+				.multiselect__tags:hover {
+					border-color: var(--color-primary-element);
+				}
+
+				&:not(.showContent) .multiselect__content-wrapper {
+					display: none;
+				}
 
-		.multiselect__content-wrapper {
-			z-index: 101 !important;
+				.multiselect__content-wrapper {
+					z-index: 101 !important;
+				}
+			}
 		}
 	}
 }
diff --git a/css/tasks.scss b/css/tasks.scss
index 1814a8627..1f0af6659 100644
--- a/css/tasks.scss
+++ b/css/tasks.scss
@@ -27,4 +27,3 @@
 
 @import './src/Calendars/Calendar.scss';
 @import './src/Calendars/CalendarShares.scss';
-@import './src/Calendars/CalendarSharee.scss';
diff --git a/src/components/AppNavigation/CalendarShare.vue b/src/components/AppNavigation/CalendarShare.vue
index 6ca4b77b5..707b30e67 100644
--- a/src/components/AppNavigation/CalendarShare.vue
+++ b/src/components/AppNavigation/CalendarShare.vue
@@ -23,23 +23,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div class="calendar-shares">
-		<Multiselect
-			id="users-groups-search"
-			:options="usersOrGroups"
-			:searchable="true"
-			:internal-search="false"
-			:max-height="600"
-			:show-no-results="true"
-			:placeholder="placeholder"
-			:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
-			:user-select="true"
-			open-direction="bottom"
-			track-by="user"
-			label="user"
-			@search-change="findSharee"
-			@input="shareCalendar" />
-		<!-- list of user or groups calendar is shared with -->
-		<ul v-if="calendar.shares.length > 0" class="calendar-shares__list">
+		<ul>
+			<li class="app-navigation-entry__multiselect">
+				<Multiselect
+					id="users-groups-search"
+					:options="usersOrGroups"
+					:searchable="true"
+					:internal-search="false"
+					:max-height="600"
+					:show-no-results="true"
+					:placeholder="placeholder"
+					:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
+					:user-select="true"
+					open-direction="bottom"
+					track-by="user"
+					label="user"
+					@search-change="findSharee"
+					@input="shareCalendar" />
+			</li>
+			<!-- list of user or groups calendar is shared with -->
 			<CalendarSharee v-for="sharee in calendar.shares"
 				:key="sharee.uri"
 				:sharee="sharee"
diff --git a/src/components/AppNavigation/CalendarSharee.vue b/src/components/AppNavigation/CalendarSharee.vue
index 1d02bf27c..6ff519b09 100644
--- a/src/components/AppNavigation/CalendarSharee.vue
+++ b/src/components/AppNavigation/CalendarSharee.vue
@@ -4,6 +4,9 @@
 @author Team Popcorn <teampopcornberlin@gmail.com>
 @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
 
+@copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>
+@author Georg Ehrke <oc.list@georgehrke.com>
+
 @license GNU AGPL version 3 or any later version
 
 This program is free software: you can redistribute it and/or modify
@@ -22,40 +25,51 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<li class="calendar-sharee">
-		<span :class="{
-				'icon-loading-small': loading,
-				'icon-group': sharee.isGroup && !loading,
-				'icon-user': !sharee.isGroup && !loading
-			}"
-			class="icon" />
-		<span class="calendar-sharee__identifier">
-			{{ sharee.displayName }}
-		</span>
-		<span class="calendar-sharee__utils">
-			<input
-				:id="uid"
-				:checked="writeable"
+	<AppNavigationItem
+		:title="sharee.displayName">
+		<template slot="icon">
+			<div v-if="sharee.isGroup" class="avatar icon-group" />
+			<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
+			<Avatar v-else
+				:user="sharee.id"
+				:display-name="sharee.displayName"
+				:disable-menu="true" />
+		</template>
+
+		<template slot="counter">
+			<ActionCheckbox
 				:disabled="loading"
-				class="checkbox"
-				name="editable"
-				type="checkbox"
-				@change="editSharee">
-			<label :for="uid">
+				:checked="writeable"
+				@update:checked="editSharee">
 				{{ $t('tasks', 'can edit') }}
-			</label>
-			<a :class="{'calendar-sharee__utils--disabled': loading}"
-				href="#"
-				title="Delete"
-				class="icon-delete"
-				@click="deleteSharee" />
-		</span>
-	</li>
+			</ActionCheckbox>
+		</template>
+
+		<template slot="actions">
+			<ActionButton
+				icon="icon-delete"
+				:disabled="loading"
+				@click.prevent.stop="deleteSharee">
+				{{ $t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
+			</ActionButton>
+		</template>
+	</AppNavigationItem>
 </template>
 
 <script>
+import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
+import { ActionCheckbox } from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import { AppNavigationItem } from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
+
 export default {
 	name: 'CalendarSharee',
+	components: {
+		ActionButton,
+		ActionCheckbox,
+		AppNavigationItem,
+		Avatar,
+	},
 	props: {
 		calendar: {
 			type: Object,