diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 625fee610..3a5234a00 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -21,9 +21,7 @@
   -->
 
 <template>
-	<div id="app-sidebar">
-		<router-view name="sidebar" />
-	</div>
+	<router-view name="sidebar" />
 </template>
 
 <script>
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 9744131fa..f95d4512d 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -21,88 +21,48 @@
   -->
 
 <template>
-	<div class="sidebar">
-		<div v-if="board">
-			<div class="sidebar-header">
-				<h3>{{ board.title }}</h3>
-			</div>
+	<app-sidebar
+		:actions="[]"
+		:title="board.title"
+		@close="closeSidebar">
 
-			<ul class="tab-headers">
-				<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name">
-					<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a>
-				</li>
-			</ul>
+		<AppSidebarTab name="Sharing" icon="icon-shared">
+			<SharingTabSidebard :board="board" />
+		</AppSidebarTab>
 
-			<div class="tabsContainer">
-				<div class="tab">
-					<div v-if="activeTab === 'Sharing'">
-						<SharingTabSidebard :board="board" />
-					</div>
+		<AppSidebarTab name="Tags" icon="icon-tag">
+			<TagsTabSidebard :board="board" />
+		</AppSidebarTab>
 
-					<div
-						v-if="activeTab === 'Tags'"
-						id="board-detail-labels">
-						<TagsTabSidebard :board="board" />
-					</div>
+		<AppSidebarTab name="Deleted items" icon="icon-delete">
+			<DeletedTabSidebard :board="board" />
+		</AppSidebarTab>
 
-					<div
-						v-if="activeTab === 'Deleted items'">
-						<DeletedTabSidebard :board="board" />
-					</div>
+		<AppSidebarTab name="Timeline" icon="icon-activity">
+			<TimelineTabSidebard :board="board" />
+		</AppSidebarTab>
 
-					<div
-						v-if="activeTab === 'Timeline'">
-						<TimelineTabSidebard :board="board" />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+	</app-sidebar>
 </template>
 
 <script>
-import { Avatar, Multiselect } from 'nextcloud-vue'
 import { mapState } from 'vuex'
 import SharingTabSidebard from './SharingTabSidebard'
 import TagsTabSidebard from './TagsTabSidebard'
 import DeletedTabSidebard from './DeletedTabSidebard'
 import TimelineTabSidebard from './TimelineTabSidebard'
+import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
 
 export default {
 	name: 'BoardSidebar',
 	components: {
-		Avatar,
-		Multiselect,
+		AppSidebar,
+		AppSidebarTab,
 		SharingTabSidebard,
 		TagsTabSidebard,
 		DeletedTabSidebard,
 		TimelineTabSidebard
 	},
-	props: {
-	},
-	data() {
-		return {
-			activeTab: 'Sharing',
-			tabs: [
-				{
-					name: 'Sharing',
-					isSelected: true
-				},
-				{
-					name: 'Tags',
-					isSelected: false
-				},
-				{
-					name: 'Deleted items',
-					isSelected: false
-				},
-				{
-					name: 'Timeline',
-					isSelected: false
-				}
-			]
-		}
-	},
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,
@@ -111,50 +71,8 @@ export default {
 	},
 	methods: {
 		closeSidebar() {
-			this.$store.dispatch('toggleSidebar')
-		},
-		setSelectedHeader(tabName) {
-			this.activeTab = tabName
-			this.tabs.forEach(tab => {
-				tab.isSelected = (tab.name === tabName)
-			})
+			this.$router.push({ name: 'board' })
 		}
 	}
 }
 </script>
-
-<style lang="scss" scoped>
-  .sidebar-header {
-    h3 {
-      font-size: 14pt;
-      padding: 15px 15px 3px;
-      margin: 0;
-      overflow: hidden;
-    }
-  }
-  .icon-close {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    padding: 14px;
-    height: 24px;
-    width: 24px;
-  }
-  ul.tab-headers {
-	margin: 15px 15px 0 15px;
-		li {
-			display: inline-block;
-			padding: 12px;
-			&.selected {
-				color: #000;
-				border-bottom: 1px solid #4d4d4d;
-				font-weight: 600;
-			}
-		}
-  }
-	.tabsContainer {
-		.tab {
-			padding: 0 15px 15px;
-		}
-	}
-</style>