diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 1c2bc7c06..cf0b3bf9c 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -21,13 +21,7 @@
   -->
 
 <template>
-	<div id="app-sidebar">
-		<span class="icon-close" title="Close" @click="closeSidebar">
-			<span class="hidden-visually">Close</span>
-		</span>
 		<router-view name="sidebar" />
-	</div>
-
 </template>
 
 <script>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index f75d8dfcc..326ad75c9 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -21,21 +21,43 @@
   -->
 
 <template>
-	<div class="sidebar">
-		<div class="sidebar-header">
-			<h3>Card sidebar</h3>
-		</div>
-	</div>
+	<app-sidebar
+				 title="andy-yeo-1387151-unsplash.jpg"
+				 subtitle="4,3 MB, last edited 19 days ago"
+				 :actions="[]"
+				 @close="closeSidebar">
+		<template #action>
+
+		</template>
+		<AppSidebarTab name="Description" icon="icon-description">
+			this is the description tab
+		</AppSidebarTab>
+		<AppSidebarTab name="Timeline" icon="icon-activity">
+			this is the activity tab
+		</AppSidebarTab>
+		<AppSidebarTab name="Attachments" icon="icon-files-dark">
+			this is the files tab
+		</AppSidebarTab>
+	</app-sidebar>
 </template>
 
 <script>
+import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
+
 export default {
 	name: 'CardSidebar',
+	components: {
+		AppSidebar,
+		AppSidebarTab
+	},
 	data() {
 		return {
 		}
 	},
 	methods: {
+		closeSidebar() {
+			this.$router.push({ name: 'board' })
+		}
 	}
 }
 </script>