diff --git a/src/App.vue b/src/App.vue
index 922357dea..22bbf2b67 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@
 <template>
 
 	<div id="content" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
-		<DeckAppNav />
+		<AppNavigation />
 		<div id="app-content">
 			<router-view />
 		</div>
@@ -36,16 +36,16 @@
 
 import { mapState } from 'vuex'
 import BoardSidebar from './components/board/BoardSidebar'
-import DeckAppNav from './components/DeckAppNav'
 import { BoardApi } from './services/BoardApi'
+import AppNavigation from './components/navigation/AppNavigation';
 
 const boardApi = new BoardApi()
 
 export default {
 	name: 'App',
 	components: {
-		BoardSidebar,
-		DeckAppNav
+		AppNavigation,
+		BoardSidebar
 	},
 	data: function() {
 		return {
diff --git a/src/components/DeckAppNav.vue b/src/components/DeckAppNav.vue
deleted file mode 100644
index fdadf6de5..000000000
--- a/src/components/DeckAppNav.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<!--
-* @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>
-	<AppNavigation :menu="menu" />
-</template>
-
-<script>
-
-import { AppNavigation } from 'nextcloud-vue'
-import { translate as t } from 'nextcloud-server/dist/l10n'
-import { boardToMenuItem } from './../helpers/boardToMenuItem'
-import store from './../store/main'
-
-const addButton = {
-	id: 'add-button',
-	key: 'add-button',
-	icon: 'icon-add',
-	classes: [],
-	text: t('deck', 'Create new board'),
-	edit: {
-		text: t('deck', 'new board'),
-		action: (submitEvent) => {
-			const title = submitEvent.currentTarget.childNodes[0].value
-			store.dispatch('createBoard', {
-				title: title,
-				hashedColor: '#000000',
-				color: '000000'
-			})
-			addButton.classes = []
-		},
-		reset: () => {
-		}
-	},
-	action: () => {
-		addButton.classes.push('editing')
-	}
-}
-
-let allBoardsNavItem = {
-	id: 'deck-boards',
-	key: 'deck-boards',
-	classes: [],
-	icon: 'icon-deck',
-	text: t('deck', 'All boards'),
-	router: {
-		name: 'boards'
-	},
-	collapsible: true,
-	opened: false,
-	children: []
-}
-
-let archivedBoardsNavItem = {
-	id: 'deck-boards-archived',
-	classes: [],
-	icon: 'icon-archive',
-	text: t('deck', 'Archived boards'),
-	router: {
-		name: 'boards.archived'
-	},
-	collapsible: true,
-	opened: false,
-	children: []
-}
-
-let sharedBoardsNavItem = {
-	id: 'deck-boards-shared',
-	classes: [],
-	icon: 'icon-shared',
-	text: t('deck', 'Shared boards'),
-	router: {
-		name: 'boards.shared'
-	},
-	collapsible: false,
-	opened: false,
-	children: []
-}
-
-export default {
-	name: 'DeckAppNav',
-	components: {
-		AppNavigation
-	},
-	data: function() {
-		return {
-			loading: false,
-			addButton: addButton
-		}
-	},
-	computed: {
-		allBoardsNavItem: function() {
-			allBoardsNavItem.children = this.$store.getters.noneArchivedBoards.map(boardToMenuItem)
-			// copy to trigger change detection
-			allBoardsNavItem = Object.assign({}, allBoardsNavItem)
-			return allBoardsNavItem
-		},
-		archivedBoardsNavItem: function() {
-			archivedBoardsNavItem.children = this.$store.getters.archivedBoards.map(boardToMenuItem)
-			// copy to trigger change detection
-			archivedBoardsNavItem = Object.assign({}, archivedBoardsNavItem)
-			return archivedBoardsNavItem
-		},
-		sharedBoardsNavItem: function() {
-			sharedBoardsNavItem.children = this.$store.getters.sharedBoards.map(boardToMenuItem)
-			// copy to trigger change detection
-			sharedBoardsNavItem = Object.assign({}, sharedBoardsNavItem)
-			return sharedBoardsNavItem
-		},
-		menu: function() {
-			return {
-				loading: this.loading,
-				items: [this.allBoardsNavItem, this.archivedBoardsNavItem, this.sharedBoardsNavItem]
-					.concat([this.addButton])
-			}
-		}
-	}
-}
-
-</script>
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
new file mode 100644
index 000000000..bfeb95c51
--- /dev/null
+++ b/src/components/navigation/AppNavigation.vue
@@ -0,0 +1,105 @@
+<!--
+  - @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>
+	<div id="app-navigation" :class="{'icon-loading': loading}">
+		<ul id="deck-navigation">
+			<app-navigation-board-category
+				id="deck-navigation-all"
+				:text="t('deck', 'All boards')"
+				:boards="noneArchivedBoards"
+				:open-on-add-boards="true"
+				icon="icon-deck" />
+			<app-navigation-board-category
+				id="deck-navigation-archived"
+				:text="t('deck', 'Archived boards')"
+				:boards="archivedBoards"
+				icon="icon-archive" />
+			<app-navigation-board-category
+				id="deck-navigation-shared"
+				:text="t('deck', 'Shared boards')"
+				:boards="sharedBoards"
+				icon="icon-shared" />
+			<app-navigation-add-board />
+		</ul>
+		<div v-click-outside="closeMenu" v-if="!!$slots['settings-content']" id="app-settings"
+			:class="{open: opened}">
+			<div id="app-settings-header">
+				<button class="settings-button"
+					data-apps-slide-toggle="#app-settings-content"
+					@click="toggleMenu">
+					{{ t('contacts', 'Settings') }}
+				</button>
+			</div>
+			<div id="app-settings-content">
+				<slot name="settings-content" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ClickOutside from 'vue-click-outside'
+
+import AppNavigationAddBoard from './AppNavigationAddBoard'
+import AppNavigationBoard from './AppNavigationBoard'
+import AppNavigationBoardCategory from './AppNavigationBoardCategory'
+
+export default {
+	name: 'AppNavigation',
+	components: {
+		AppNavigationAddBoard,
+		AppNavigationBoard,
+		AppNavigationBoardCategory
+	},
+	directives: {
+		ClickOutside
+	},
+	props: {
+		loading: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			opened: false
+		}
+	},
+	computed: {
+		...mapGetters([
+			'noneArchivedBoards',
+			'archivedBoards',
+			'sharedBoards'
+		])
+	},
+	methods: {
+		toggleMenu() {
+			this.opened = !this.opened
+		},
+		closeMenu() {
+			this.opened = false
+		}
+	}
+}
+</script>
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
new file mode 100644
index 000000000..765c24346
--- /dev/null
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -0,0 +1,76 @@
+<!--
+  - @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 id="deck-navigation-add"
+		:title="t('deck', 'Create new board')" :class="[{'icon-loading-small': loading, 'editing': editing}, classes]">
+
+		<a class="icon-add" href="#" @click.prevent.stop="startCreateBoard">
+			{{ t('deck', 'Create new board') }}
+		</a>
+
+		<!-- edit entry -->
+		<div v-if="editing" class="app-navigation-entry-edit">
+			<form @submit.prevent.stop="createBoard">
+				<input :placeholder="t('deck', 'New board title')" type="text">
+				<input type="submit" value="" class="icon-confirm">
+				<input type="submit" value="" class="icon-close"
+					@click.stop.prevent="cancelEdit">
+			</form>
+		</div>
+	</li>
+</template>
+
+<script>
+export default {
+	name: 'AppNavigationAddBoard',
+	directives: {},
+	props: {},
+	data() {
+		return {
+			classes: [],
+			editing: false,
+			loading: false
+		}
+	},
+	computed: {},
+	watch: {},
+	mounted() {},
+	methods: {
+		startCreateBoard(e) {
+			this.editing = true
+		},
+		createBoard(e) {
+			const title = e.currentTarget.childNodes[0].value
+			this.$store.dispatch('createBoard', {
+				title: title,
+				hashedColor: '#000000',
+				color: '000000'
+			})
+			this.editing = false
+		},
+		cancelEdit(e) {
+			this.editing = false
+			this.item.edit.reset(e)
+		}
+	}
+}
+</script>
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
new file mode 100644
index 000000000..70ca1efc6
--- /dev/null
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -0,0 +1,174 @@
+<!--
+  - @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>
+	<router-link :id="`board-${board.id}`"
+		:title="board.title" :class="[{'icon-loading-small': loading, deleted: deleted }, classes]"
+		:to="routeTo" tag="li">
+		<div :style="{ backgroundColor: `#${board.color}` }" class="app-navigation-entry-bullet" />
+		<a href="#">
+			{{ board.title }}
+		</a>
+		<div v-if="actions.length > 0" class="app-navigation-entry-utils">
+			<ul>
+				<li class="app-navigation-entry-utils-menu-button">
+					<button v-click-outside="hideMenu" @click="showMenu" />
+				</li>
+			</ul>
+		</div>
+		<div :class="{ 'open': menuOpen }" class="app-navigation-entry-menu">
+			<popover-menu :menu="actions" />
+		</div>
+
+		<!-- undo action -->
+		<div v-if="deleted" class="app-navigation-entry-deleted">
+			<div class="app-navigation-entry-deleted-description">
+				{{ undoText }}
+			</div>
+			<button
+				:title="t('settings', 'Undo')"
+				class="app-navigation-entry-deleted-button icon-history"
+				@click="unDelete" />
+		</div>
+	</router-link>
+</template>
+
+<script>
+import { PopoverMenu } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+
+export default {
+	name: 'AppNavigationBoard',
+	components: {
+		PopoverMenu
+	},
+	directives: {
+		ClickOutside
+	},
+	props: {
+		board: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			classes: [],
+			deleted: false,
+			loading: false,
+			menuOpen: false,
+			undoTimeoutHandle: null
+		}
+	},
+	computed: {
+		undoText: function() {
+			// todo translation
+			return 'deleted ' + this.board.title
+		},
+		routeTo: function() {
+			return {
+				name: 'board',
+				params: { id: this.board.id }
+			}
+		},
+		actions: function() {
+			const actions = []
+
+			// do not show actions while the item is loading
+			if (this.loading === false) {
+
+				actions.push({
+					action: () => {},
+					icon: 'icon-edit',
+					text: t('deck', 'Edit board')
+				})
+
+				if (!this.board.archived) {
+					actions.push({
+						action: () => {
+							this.hideMenu()
+							this.loading = true
+							this.$store.dispatch('archiveBoard', this.board)
+						},
+						icon: 'icon-archive',
+						text: t('deck', 'Archive board')
+					})
+				}
+
+				actions.push({
+					action: () => {
+						this.hideMenu()
+						this.loading = true
+						this.boardApi.deleteBoard(this.board)
+							.then(() => {
+								this.loading = false
+								this.deleted = true
+								this.undoTimeoutHandle = setTimeout(() => {
+									this.$store.dispatch('removeBoard', this.board)
+								}, 7000)
+							})
+					},
+					icon: 'icon-delete',
+					text: t('deck', 'Delete board')
+				})
+
+				actions.push({
+					action: () => {},
+					icon: 'icon-settings',
+					text: t('deck', 'Board details')
+				})
+
+			}
+
+			return actions
+		}
+	},
+	watch: {},
+	mounted() {
+		// prevent click outside event with popupItem.
+		this.popupItem = this.$el
+	},
+	methods: {
+		unDelete() {
+			clearTimeout(this.undoTimeoutHandle)
+			this.boardApi.unDeleteBoard(this.board)
+				.then(() => {
+					this.deleted = false
+				})
+		},
+		showMenu() {
+			this.menuOpen = true
+		},
+		hideMenu() {
+			this.menuOpen = false
+		},
+		cancelEdit(e) {
+			const editingIdx = this.classes.indexOf('editing')
+			if (editingIdx !== -1) {
+				this.classes.splice(editingIdx, 1)
+			}
+		}
+	},
+	inject: [
+		'boardApi'
+	]
+}
+</script>
diff --git a/src/components/navigation/AppNavigationBoardCategory.vue b/src/components/navigation/AppNavigationBoardCategory.vue
new file mode 100644
index 000000000..832506d1e
--- /dev/null
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -0,0 +1,98 @@
+<!--
+  - @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 :id="id" :title="text" :class="{'open': opened, 'collapsible': collapsible }">
+		<button v-if="collapsible" class="collapse" @click.prevent.stop="toggleCollapse" />
+		<a :class="icon" href="#">
+			{{ text }}
+		</a>
+		<ul v-if="boards.length > 0">
+			<app-navigation-board v-for="board in boards" :key="board.id" :board="board" />
+		</ul>
+	</li>
+</template>
+
+<script>
+import { PopoverMenu } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+import AppNavigationBoard from './AppNavigationBoard'
+
+export default {
+	name: 'AppNavigationBoardCategory',
+	components: {
+		AppNavigationBoard,
+		PopoverMenu
+	},
+	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
+		}
+	},
+	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>
diff --git a/src/services/BoardApi.js b/src/services/BoardApi.js
index 5b2785117..56fbbc077 100644
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -76,6 +76,36 @@ export class BoardApi {
 			})
 	}
 
+	deleteBoard(board) {
+		return axios.delete(this.url(`/boards/${board.id}`))
+			.then(
+				() => {
+					return Promise.resolve()
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	unDeleteBoard(board) {
+		return axios.post(this.url(`/boards/${board.id}/deleteUndo`))
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	loadBoards() {
 		return axios.get(this.url('/boards'))
 			.then(
diff --git a/src/store/main.js b/src/store/main.js
index 26f4af848..38798da96 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -52,17 +52,17 @@ export default new Vuex.Store({
 		},
 		noneArchivedBoards: state => {
 			return state.boards.filter(board => {
-				return board.archived === false
+				return board.archived === false && !board.deletedAt
 			})
 		},
 		archivedBoards: state => {
 			return state.boards.filter(board => {
-				return board.archived === true
+				return board.archived === true && !board.deletedAt
 			})
 		},
 		sharedBoards: state => {
 			return state.boards.filter(board => {
-				return board.shared
+				return board.shared && !board.deletedAt
 			})
 		},
 		filteredBoards: state => {
@@ -87,6 +87,17 @@ export default new Vuex.Store({
 				state.boards.push(board)
 			}
 		},
+		/**
+		 * Removes the board from the store.
+		 *
+		 * @param state
+		 * @param board
+		 */
+		removeBoard(state, board) {
+			state.boards = state.boards.filter((b) => {
+				return board.id !== b.id
+			})
+		},
 		toggleNav(state) {
 			state.navShown = !state.navShown
 		},
@@ -123,6 +134,9 @@ export default new Vuex.Store({
 					commit('addBoard', board)
 				})
 		},
+		removeBoard({ commit }, board) {
+			commit('removeBoard', board)
+		},
 		setBoards({ commit }, boards) {
 			commit('setBoards', boards)
 		},