diff --git a/src/components/CardItem.vue b/src/components/CardItem.vue
new file mode 100644
index 000000000..65594602f
--- /dev/null
+++ b/src/components/CardItem.vue
@@ -0,0 +1,198 @@
+<!--
+* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+*
+* @author Michael Weimann <mail@michael-weimann.eu>
+*
+* @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/>.
+*
+-->
+
+<template>
+	<!-- <router-link :id="`board-${board.id}`"
+		:title="board.title"
+		:to="routeTo" class="board-list-row" tag="div">
+		<div class="board-list-bullet-cell">
+			<div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
+		</div>
+		<div class="board-list-title-cell">{{ board.title }}</div>
+		<div class="board-list-avatars-cell">
+			<avatar :user="board.owner.uid" class="board-list-avatar" />
+			<avatar v-for="user in limitedAcl" :key="user.id" :user="user.participant.uid"
+				class="board-list-avatar" />
+			<div v-tooltip="otherAcl" v-if="board.acl.length > 5" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
+		</div>
+		<div class="board-list-actions-cell" />
+	</router-link> -->
+
+	<div class="card-list-row">
+		<div class="card-list-bullet-cell">
+			<input id="card-status" type="checkbox" class="checkbox">
+			<label for="card-status" />
+		</div>
+		<div class="card-list-bullet-cell">
+			<div :style="{ 'background-color': `#990` }" class="card-list-bullet" />
+		</div>
+		<div class="card-list-title-cell">
+			{{ card.title }}
+		</div>
+
+		<div>
+			<ul class="labels card-list-title-cell">
+				<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
+					<span>{{ label.title }}</span>
+				</li>
+			</ul>
+		</div>
+
+		<div>
+			<div v-if="card.attachments" class="card-files icon icon-files-dark" />
+			<div v-if="card.duedate">
+				<span>{{ dueTime(card.duetime) }}</span>
+			</div>
+		</div>
+
+		<AvatarList :users="card.assignedUsers" class="card-list-avatars-cell" />
+		<div class="card-list-actions-cell">
+			<Actions v-if="!editing" @click.stop.prevent>
+				<ActionButton icon="icon-user">
+					{{ t('deck', 'Assign to me') }}
+				</ActionButton>
+
+				<ActionButton icon="icon-delete">
+					{{ t('deck', 'Delete card') }}
+				</ActionButton>
+				<ActionButton icon="icon-external">
+					{{ t('deck', 'Move card') }}
+				</ActionButton>
+				<ActionButton icon="icon-settings-dark">
+					{{ t('deck', 'Card details') }}
+				</ActionButton>
+			</Actions>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Actions, ActionButton } from '@nextcloud/vue'
+import Color from '../mixins/color'
+import AvatarList from './cards/AvatarList'
+
+export default {
+	name: 'CardItem',
+	components: {
+		AvatarList,
+		Actions,
+		ActionButton,
+	},
+	mixins: [Color],
+	props: {
+		card: {
+			type: Object,
+			default: () => { return {} },
+		},
+	},
+	computed: {
+		labelStyle() {
+			return (label) => {
+				return {
+					backgroundColor: '#' + label.color,
+					color: this.textColor(label.color),
+				}
+			}
+		},
+
+	},
+	methods: {
+		dueTime(due) {
+			return OC.Util.relativeModifiedDate(due)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+$card-spacing: 20px;
+	$card-padding: 15px;
+
+	.labels {
+		flex-grow: 1;
+		flex-shrink: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: row;
+		margin-left: $card-padding;
+		margin-right: $card-padding;
+		margin-top: -5px;
+
+		li {
+			flex-grow: 0;
+			flex-shrink: 1;
+			display: flex;
+			flex-direction: row;
+			overflow: hidden;
+			padding: 1px 3px;
+			border-radius: 3px;
+			font-size: 85%;
+			margin-right: 3px;
+			margin-bottom: 3px;
+
+			&:hover {
+				overflow: unset;
+			}
+
+			span {
+				flex-grow: 0;
+				flex-shrink: 1;
+				min-width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+	}
+
+	.card-list-bullet-cell {
+		padding: 6px 15px;
+
+		.card-list-bullet {
+			border-radius: 50%;
+			cursor: pointer;
+			height: 32px;
+			width: 32px;
+		}
+	}
+
+	.card-list-title-cell {
+		padding: 0 15px;
+	}
+
+	.card-list-avatars-cell {
+		display: flex;
+		padding: 6px 15px;
+
+		.card-list-avatar {
+			border-radius: 50%;
+			height: 32px;
+			width: 32px;
+			margin-left: 3px;
+			&.icon-more {
+				background-color:var(--color-background-dark);
+			}
+		}
+	}
+
+</style>
diff --git a/src/components/Collections.vue b/src/components/Collections.vue
new file mode 100644
index 000000000..7e752a4bf
--- /dev/null
+++ b/src/components/Collections.vue
@@ -0,0 +1,159 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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/>.
+  -
+  -->
+
+<template>
+	<div>
+		<Controls />
+		<div class="card-list">
+			<div class="card-list-row card-list-header-row">
+				<div class="card-list-bullet-cell" />
+				<div class="card-list-bullet-cell">
+					<div class="card-list-bullet" />
+				</div>
+				<div class="card-list-title-cell">
+					Title
+				</div>
+				<div class="card-list-title-cell" />
+				<div class="card-list-title-cell">
+					Due
+				</div>
+				<div class="card-list-avatars-cell">
+					Assigned
+				</div>
+				<div class="card-list-actions-cell" />
+			</div>
+			<CardItem v-for="card in filteredCards" :key="card.id" :card="card" />
+		</div>
+	</div>
+</template>
+
+<script>
+
+import CardItem from './CardItem'
+import Controls from './Controls'
+import { mapGetters } from 'vuex'
+
+export default {
+	name: 'Collections',
+	components: {
+		Controls,
+		CardItem,
+	},
+	props: {
+		navFilter: {
+			type: String,
+			default: '',
+		},
+	},
+	data: function() {
+		return {
+			loading: true,
+		}
+	},
+	methods: {
+		fetchData() {
+			this.filteredBoards.forEach(board => {
+				this.$store.dispatch('loadStacks', board.id).then(response => {
+					this.loading = false
+				})
+			})
+		},
+	},
+	computed: {
+		...mapGetters([
+			'filteredBoards',
+
+		]),
+		allStacks() {
+			return this.$store.getters.allStacks
+		},
+		allCards() {
+			return this.$store.getters.allCards
+		},
+		filteredCards() {
+			if (this.navFilter === 'due') {
+				return this.allCards.filter((card) => {
+					return card.duedate !== null
+				})
+			} else if (this.navFilter === 'my') {
+				return this.allCards.filter((card) => {
+					if (card.assignedUsers.length > 0) {
+						return card.assignedUsers.filter((user) => {
+							return user.id === 18
+						})
+					}
+				})
+			} else {
+				return this.allCards
+			}
+		},
+	},
+	watch: {
+		navFilter: function(value) {
+			this.$store.commit('setCollectionFilter', value)
+		},
+		filteredBoards() {
+			this.fetchData()
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+	.card-list {
+
+		.card-list-row {
+			align-items: center;
+			border-bottom: 1px solid #ededed;
+			display: flex;
+		}
+
+		.card-list-header-row {
+			color: var(--color-text-lighter);
+		}
+
+		.card-list-bullet-cell,
+		.card-list-avatars-cell {
+			padding: 6px 15px;
+		}
+
+		.card-list-avatars-cell {
+			flex: 0 0 50px;
+		}
+
+		.card-list-avatar,
+		.card-list-bullet {
+			height: 32px;
+			width: 32px;
+		}
+
+		.card-list-title-cell {
+			flex: 1 0 auto;
+			padding: 15px;
+		}
+
+		.card-list-actions-cell {
+			// placeholder
+			flex: 0 0 50px;
+		}
+	}
+</style>
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index e85de43c2..759e41e0a 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -23,6 +23,12 @@
 <template>
 	<div id="app-navigation" :class="{'icon-loading': loading}">
 		<ul id="deck-navigation">
+			<AppNavigationCollection
+				id="deck-navigation-all"
+				:text="t('deck', 'Overview')"
+				:boards="noneArchivedBoards"
+				:open-on-add-boards="true"
+				icon="icon-desktop" />
 			<AppNavigationBoardCategory
 				id="deck-navigation-all"
 				:text="t('deck', 'All boards')"
@@ -73,6 +79,7 @@ import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
 
 import AppNavigationAddBoard from './AppNavigationAddBoard'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory'
+import AppNavigationCollection from './AppNavigationCollection'
 
 export default {
 	name: 'AppNavigation',
@@ -80,6 +87,7 @@ export default {
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
 		Multiselect,
+		AppNavigationCollection,
 	},
 	directives: {
 		ClickOutside,
diff --git a/src/components/navigation/AppNavigationCollection.vue b/src/components/navigation/AppNavigationCollection.vue
new file mode 100644
index 000000000..0d546c2c4
--- /dev/null
+++ b/src/components/navigation/AppNavigationCollection.vue
@@ -0,0 +1,116 @@
+<!--
+  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @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/>.
+  -
+  -->
+<template>
+	<li v-if="boards.length > 0"
+		:id="id"
+		:class="{'open': opened, 'collapsible': collapsible }">
+		<button v-if="collapsible" class="collapse" @click.prevent.stop="toggleCollapse" />
+		<a :class="icon" href="#">
+			{{ text }}
+		</a>
+		<ul class="list">
+			<router-link v-for="item in items"
+				id="board-1"
+
+				:key="item.title"
+				:title="item.title"
+				:to="{name: item.to}"
+				tag="li"
+				class="list-item">
+				<div :class="item.icon" style="padding: 0 12px 0 44px" />{{ item.title }}
+			</router-link>
+		</ul>
+	</li>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+
+export default {
+	name: 'AppNavigationCollection',
+	directives: {
+		ClickOutside,
+	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+		text: {
+			type: String,
+			required: true,
+		},
+		icon: {
+			type: String,
+			required: true,
+		},
+		boards: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * Control whether the category should be opened when adding boards.
+		 * This is for example used in the case a new board has been added, so the user directly sees it.
+		 */
+		openOnAddBoards: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			opened: false,
+			items: [
+				{ title: t('deck', 'Due soon') + ' (5)', icon: 'icon-calendar-dark', to: 'collections.due' },
+				{ title: t('deck', 'Assigned to me') + ' (9)', icon: 'icon-user', to: 'collections.my' },
+				{ title: t('deck', 'All cards'), icon: 'icon-projects', to: 'collections' },
+			],
+		}
+	},
+	computed: {
+		collapsible() {
+			return this.boards.length > 0
+		},
+	},
+	watch: {
+		boards: function(newVal, prevVal) {
+			if (this.openOnAddBoards === true && prevVal.length < newVal.length) {
+				this.opened = true
+			}
+		},
+	},
+	mounted() {},
+	methods: {
+		toggleCollapse() {
+			this.opened = !this.opened
+		},
+	},
+}
+</script>
+<style>
+	.list {
+		opacity: 0.57;
+	}
+	.list-item {
+		padding: 10px;
+	}
+</style>
diff --git a/src/router.js b/src/router.js
index 285cf93d4..a9c3ea577 100644
--- a/src/router.js
+++ b/src/router.js
@@ -23,12 +23,14 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
-import { BOARD_FILTERS } from './store/main'
+import { BOARD_FILTERS, COLLECTION_FILTERS } from './store/main'
+
 import Boards from './components/boards/Boards'
 import Board from './components/board/Board'
 import Sidebar from './components/Sidebar'
 import BoardSidebar from './components/board/BoardSidebar'
 import CardSidebar from './components/card/CardSidebar'
+import Collections from './components/Collections'
 
 Vue.use(Router)
 
@@ -65,6 +67,30 @@ export default new Router({
 				navFilter: BOARD_FILTERS.SHARED,
 			},
 		},
+		{
+			path: '/collections',
+			name: 'collections',
+			component: Collections,
+			props: {
+				navFilter: COLLECTION_FILTERS.ALL,
+			},
+		},
+		{
+			path: '/collections/due',
+			name: 'collections.due',
+			component: Collections,
+			props: {
+				navFilter: COLLECTION_FILTERS.DUE,
+			},
+		},
+		{
+			path: '/collections/my',
+			name: 'collections.my',
+			component: Collections,
+			props: {
+				navFilter: COLLECTION_FILTERS.MY,
+			},
+		},
 		{
 			path: '/boards/:id',
 			name: 'board',
diff --git a/src/store/card.js b/src/store/card.js
index 512f582a0..66e8893b5 100644
--- a/src/store/card.js
+++ b/src/store/card.js
@@ -36,6 +36,9 @@ export default {
 		cardById: state => (id) => {
 			return state.cards.find((card) => card.id === id)
 		},
+		allCards(state) {
+			return state.cards
+		},
 	},
 	mutations: {
 		clearCards(state) {
diff --git a/src/store/main.js b/src/store/main.js
index fc0f27804..049e93a80 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -41,6 +41,12 @@ export const BOARD_FILTERS = {
 	SHARED: 'shared',
 }
 
+export const COLLECTION_FILTERS = {
+	ALL: 'all',
+	DUE: 'due',
+	MY: 'my',
+}
+
 export default new Vuex.Store({
 	modules: {
 		stack,
@@ -59,6 +65,7 @@ export default new Vuex.Store({
 		sharees: [],
 		assignableUsers: [],
 		boardFilter: BOARD_FILTERS.ALL,
+		collectionFilter: COLLECTION_FILTERS.ALL,
 		activity: [],
 		activityLoadMore: true,
 	},
@@ -189,6 +196,9 @@ export default new Vuex.Store({
 		setBoardFilter(state, filter) {
 			state.boardFilter = filter
 		},
+		setCollectionFilter(state, filter) {
+			state.collectionFilter = filter
+		},
 		setCurrentBoard(state, board) {
 			state.currentBoard = board
 		},
@@ -361,6 +371,9 @@ export default new Vuex.Store({
 		setBoardFilter({ commmit }, filter) {
 			commmit('setBoardFilter', filter)
 		},
+		setCollectionFilter({ commmit }, filter) {
+			commmit('setCollectionFilter', filter)
+		},
 		toggleNav({ commit }) {
 			commit('toggleNav')
 		},
diff --git a/src/store/stack.js b/src/store/stack.js
index 1d4024f82..059ef9c24 100644
--- a/src/store/stack.js
+++ b/src/store/stack.js
@@ -36,6 +36,9 @@ export default {
 		stacksByBoard: state => (id) => {
 			return state.stacks.filter((stack) => stack.boardId === id).sort((a, b) => a.order - b.order)
 		},
+		allStacks(state) {
+			return state.stacks
+		},
 	},
 	mutations: {
 		addStack(state, stack) {