diff --git a/src/App.vue b/src/App.vue
index d36b2616d..7f6aa2e91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,11 +10,8 @@
 			</NcAppNavigationNew>
 
 			<template #list>
-				<NavigationList v-show="!loading.notes"
-					:filtered-notes="filteredNotes"
-					:category="filter.category"
-					@category-selected="onSelectCategory"
-					@note-deleted="onNoteDeleted"
+				<CategoriesList v-show="!loading.notes"
+					v-if="numNotes"
 				/>
 				<NcAppNavigationItem
 					:title="t('notes', 'Help')"
@@ -38,7 +35,7 @@
 				<p>{{ t('notes', 'Please see Nextcloud server log for details.') }}</p>
 			</div>
 		</NcAppContent>
-		<router-view v-else />
+		<router-view v-else @note-deleted="onNoteDeleted" />
 
 		<router-view name="sidebar" />
 	</NcContent>
@@ -59,8 +56,8 @@ import InfoIcon from 'vue-material-design-icons/Information.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import AppSettings from './components/AppSettings.vue'
-import NavigationList from './components/NavigationList.vue'
 import AppHelp from './components/AppHelp.vue'
+import CategoriesList from './components/CategoriesList.vue'
 
 import { config } from './config.js'
 import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService.js'
@@ -73,13 +70,13 @@ export default {
 		AppHelp,
 		AppSettings,
 		InfoIcon,
-		NavigationList,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
 		PlusIcon,
+		CategoriesList,
 	},
 
 	data() {
@@ -101,37 +98,16 @@ export default {
 	},
 
 	computed: {
+		numNotes() {
+			return store.getters.numNotes()
+		},
+
 		notes() {
 			return store.state.notes.notes
 		},
 
 		filteredNotes() {
-			const notes = this.notes.filter(note => {
-				if (this.filter.category !== null
-					&& this.filter.category !== note.category
-					&& !note.category.startsWith(this.filter.category + '/')) {
-					return false
-				}
-				return true
-			})
-
-			function cmpRecent(a, b) {
-				if (a.favorite && !b.favorite) return -1
-				if (!a.favorite && b.favorite) return 1
-				return b.modified - a.modified
-			}
-
-			function cmpCategory(a, b) {
-				const cmpCat = a.category.localeCompare(b.category)
-				if (cmpCat !== 0) return cmpCat
-				if (a.favorite && !b.favorite) return -1
-				if (!a.favorite && b.favorite) return 1
-				return a.title.localeCompare(b.title)
-			}
-
-			notes.sort(this.filter.category === null ? cmpRecent : cmpCategory)
-
-			return notes
+			return store.getters.getFilteredNotes()
 		},
 	},
 
@@ -252,7 +228,7 @@ export default {
 				return
 			}
 			this.loading.create = true
-			createNote(this.filter.category)
+			createNote(store.getters.getSelectedCategory())
 				.then(note => {
 					this.routeToNote(note.id, { new: null })
 				})
@@ -263,15 +239,6 @@ export default {
 				})
 		},
 
-		onSelectCategory(category) {
-			this.filter.category = category
-
-			const appNavigation = document.querySelector('#app-navigation > ul')
-			if (appNavigation) {
-				appNavigation.scrollTop = 0
-			}
-		},
-
 		onNoteDeleted(note) {
 			this.deletedNotes.push(note)
 			this.clearUndoTimer()
diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/CategoriesList.vue
similarity index 65%
rename from src/components/NavigationCategoriesItem.vue
rename to src/components/CategoriesList.vue
index ab324a6a1..831fa5e7f 100644
--- a/src/components/NavigationCategoriesItem.vue
+++ b/src/components/CategoriesList.vue
@@ -1,15 +1,9 @@
 <template>
-	<NcAppNavigationItem
-		:title="title"
-		class="app-navigation-noclose separator-below"
-		:class="{ 'category-header': selectedCategory !== null }"
-		:open.sync="open"
-		:allow-collapse="true"
-		@click.prevent.stop="onToggleCategories"
-	>
-		<FolderIcon slot="icon" :size="20" />
+	<Fragment>
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
+			icon="icon-recent"
+			:class="{ active: null === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
 			<HistoryIcon slot="icon" :size="20" />
@@ -21,6 +15,8 @@
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
+			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
+			:class="{ active: category.name === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
 			<FolderOutlineIcon v-if="category.name === ''" slot="icon" :size="20" />
@@ -29,7 +25,7 @@
 				{{ category.count }}
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
-	</NcAppNavigationItem>
+	</Fragment>
 </template>
 
 <script>
@@ -37,6 +33,7 @@ import {
 	NcAppNavigationItem,
 	NcAppNavigationCounter,
 } from '@nextcloud/vue'
+import { Fragment } from 'vue-fragment'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
@@ -47,27 +44,15 @@ import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
 export default {
-	name: 'NavigationCategoriesItem',
+	name: 'CategoriesList',
 
 	components: {
+		Fragment,
+		NcAppNavigationItem,
+		NcAppNavigationCounter,
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
-		NcAppNavigationItem,
-		NcAppNavigationCounter,
-	},
-
-	props: {
-		selectedCategory: {
-			type: String,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			open: false,
-		}
 	},
 
 	computed: {
@@ -79,8 +64,8 @@ export default {
 			return getCategories(1, true)
 		},
 
-		title() {
-			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
+		selectedCategory() {
+			return store.getters.getSelectedCategory()
 		},
 	},
 
@@ -89,19 +74,9 @@ export default {
 			return categoryLabel(category)
 		},
 
-		onToggleCategories() {
-			this.open = !this.open
-		},
-
 		onSelectCategory(category) {
-			this.open = false
-			this.$emit('category-selected', category)
+			store.commit('setSelectedCategory', category)
 		},
 	},
 }
 </script>
-<style scoped>
-.separator-below {
-	border-bottom: 1px solid var(--color-border);
-}
-</style>
diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 0854a26b1..280c2f2df 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -374,5 +374,6 @@ export default {
 	z-index: 10;
 	height: 40px;
 	margin-right: 5px;
+	top: 65px;
 }
 </style>
diff --git a/src/components/NavigationNoteItem.vue b/src/components/NavigationNoteItem.vue
deleted file mode 100644
index 4ee74b96b..000000000
--- a/src/components/NavigationNoteItem.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-	<NcAppNavigationItem
-		:title="title"
-		:icon="icon"
-		:menu-open.sync="actionsOpen"
-		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
-		:class="{ actionsOpen }"
-		:loading="loading.note"
-		:editable="!note.readonly"
-		:edit-label="t('notes', 'Rename')"
-		:edit-placeholder="t('notes', 'Note\'s title')"
-		@update:title="onRename"
-	>
-		<template #actions>
-			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
-				{{ actionFavoriteText }}
-			</NcActionButton>
-			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
-				{{ t('notes', 'Delete note') }}
-			</NcActionButton>
-			<NcActionSeparator />
-			<NcActionButton icon="icon-files-dark" @click="onCategorySelected">
-				{{ actionCategoryText }}
-			</NcActionButton>
-		</template>
-	</NcAppNavigationItem>
-</template>
-
-<script>
-import {
-	NcActionButton,
-	NcActionSeparator,
-	NcAppNavigationItem,
-} from '@nextcloud/vue'
-import { showError } from '@nextcloud/dialogs'
-
-import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
-import { categoryLabel, routeIsNewNote } from '../Util.js'
-
-export default {
-	name: 'NavigationNoteItem',
-
-	components: {
-		NcActionButton,
-		NcActionSeparator,
-		NcAppNavigationItem,
-	},
-
-	props: {
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			loading: {
-				note: false,
-				favorite: false,
-				delete: false,
-			},
-			actionsOpen: false,
-		}
-	},
-
-	computed: {
-		icon() {
-			let icon = ''
-			if (this.note.error) {
-				icon = 'nav-icon icon-error-color'
-			} else if (this.note.favorite) {
-				icon = 'nav-icon icon-starred'
-			}
-			return icon
-		},
-
-		title() {
-			return this.note.title + (this.note.unsaved ? ' *' : '')
-		},
-
-		actionFavoriteText() {
-			return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
-		},
-
-		actionFavoriteIcon() {
-			let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
-			if (this.loading.favorite) {
-				icon += ' loading'
-			}
-			return icon
-		},
-
-		actionCategoryText() {
-			return categoryLabel(this.note.category)
-		},
-
-		actionDeleteIcon() {
-			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
-		},
-	},
-
-	methods: {
-		onToggleFavorite() {
-			this.loading.favorite = true
-			setFavorite(this.note.id, !this.note.favorite)
-				.catch(() => {
-				})
-				.then(() => {
-					this.loading.favorite = false
-					this.actionsOpen = false
-				})
-		},
-
-		onCategorySelected() {
-			this.actionsOpen = false
-			this.$emit('category-selected', this.note.category)
-		},
-
-		onRename(newTitle) {
-			this.loading.note = true
-			setTitle(this.note.id, newTitle)
-				.catch(() => {
-				})
-				.finally(() => {
-					this.loading.note = false
-				})
-			if (routeIsNewNote(this.$route)) {
-				this.$router.replace({
-					name: 'note',
-					params: { noteId: this.note.id.toString() },
-				})
-			}
-		},
-
-		async onDeleteNote() {
-			this.loading.delete = true
-			try {
-				const note = await fetchNote(this.note.id)
-				if (note.errorType) {
-					throw new Error('Note has errors')
-				}
-				await deleteNote(this.note.id, () => {
-					this.$emit('note-deleted', note)
-					this.loading.delete = false
-					this.actionsOpen = false
-				})
-			} catch (e) {
-				showError(this.t('notes', 'Error during preparing note for deletion.'))
-				this.loading.delete = false
-				this.actionsOpen = false
-			}
-		},
-	},
-}
-</script>
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 28eb36679..d758812b4 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,10 +1,16 @@
 <template>
-	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
-		<div v-if="!loading && note && !note.error && !note.deleting"
+	<NcAppContent :class="{ loading: loading.note || isManualSave, 'icon-error': !loading.note && (!note || note.error), 'sidebar-open': sidebarOpen }">
+		<div v-if="!loading.note && note && !note.error && !note.deleting"
 			id="note-container"
 			class="note-container"
 			:class="{ fullscreen: fullscreen }"
 		>
+			<NcBreadcrumbs v-if="!isMobile" class="breadcrumbs">
+				<NcBreadcrumb title="Home" />
+				<NcBreadcrumb v-for="category of categories" :key="category" :title="category" />
+				<NcBreadcrumb :title="title" />
+			</NcBreadcrumbs>
+
 			<NcModal v-if="note.conflict && showConflict" size="full" @close="showConflict=false">
 				<div class="conflict-modal">
 					<div class="conflict-header">
@@ -28,9 +34,11 @@
 				</div>
 			</NcModal>
 			<div class="note-editor">
-				<div v-show="!note.content" class="placeholder">
-					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
-				</div>
+				<NcEmptyContent v-if="!note.content" icon="icon-edit" :title="preview ? t('notes', 'Empty note') : t('notes', 'Write …')">
+					<template #icon>
+						<EditIcon />
+					</template>
+				</NcEmptyContent>
 				<ThePreview v-if="preview"
 					:value="note.content"
 					:noteid="noteId"
@@ -45,10 +53,18 @@
 					@input="onEdit"
 				/>
 			</div>
-			<span class="action-buttons">
-				<NcActions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
+			<div class="action-buttons">
+				<NcActions :primary="true">
+					<NcActionButton
+						:icon="actionFavoriteIcon"
+						:close-after-click="true"
+						@click="onToggleFavorite"
+					>
+						{{ actionFavoriteText }}
+					</NcActionButton>
 					<NcActionButton v-show="!sidebarOpen && !fullscreen"
 						icon="icon-details"
+						:close-after-click="true"
 						@click="onToggleSidebar"
 					>
 						<SidebarIcon slot="icon" :size="20" />
@@ -56,6 +72,7 @@
 					</NcActionButton>
 					<NcActionButton
 						v-tooltip.left="t('notes', 'CTRL + /')"
+						:close-after-click="true"
 						@click="onTogglePreview"
 					>
 						<EditIcon v-if="preview" slot="icon" :size="20" />
@@ -64,11 +81,20 @@
 					</NcActionButton>
 					<NcActionButton
 						:class="{ active: fullscreen }"
+						:close-after-click="true"
 						@click="onToggleDistractionFree"
 					>
 						<FullscreenIcon slot="icon" :size="20" />
 						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
 					</NcActionButton>
+					<NcActionButton
+						:disabled="note.readonly"
+						:icon="actionDeleteIcon"
+						:close-after-click="true"
+						@click="onDeleteNote"
+					>
+						{{ t('notes', 'Delete note') }}
+					</NcActionButton>
 				</NcActions>
 				<NcActions v-if="note.readonly">
 					<NcActionButton>
@@ -88,7 +114,7 @@
 						{{ t('notes', 'Update conflict. Click for resolving manually.') }}
 					</NcActionButton>
 				</NcActions>
-			</span>
+			</div>
 		</div>
 	</NcAppContent>
 </template>
@@ -101,6 +127,9 @@ import {
 	NcModal,
 	Tooltip,
 	isMobile,
+	NcBreadcrumbs,
+	NcBreadcrumb,
+	NcEmptyContent,
 } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -113,7 +142,7 @@ import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
 
 import { config } from '../config.js'
-import { fetchNote, refreshNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService.js'
+import { fetchNote, refreshNote, deleteNote, setFavorite, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService.js'
 import { routeIsNewNote } from '../Util.js'
 import TheEditor from './EditorEasyMDE.vue'
 import ThePreview from './EditorMarkdownIt.vue'
@@ -137,6 +166,9 @@ export default {
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
+		NcBreadcrumbs,
+		NcBreadcrumb,
+		NcEmptyContent,
 	},
 
 	directives: {
@@ -154,10 +186,13 @@ export default {
 
 	data() {
 		return {
-			loading: false,
+			loading: {
+				note: false,
+				delete: false,
+				favorite: false,
+			},
 			fullscreen: false,
 			preview: false,
-			actionsOpen: false,
 			autosaveTimer: null,
 			autotitleTimer: null,
 			refreshTimer: null,
@@ -171,7 +206,7 @@ export default {
 			return store.getters.getNote(parseInt(this.noteId))
 		},
 		title() {
-			return this.note ? this.note.title : ''
+			return this.note?.title || ''
 		},
 		isNewNote() {
 			return routeIsNewNote(this.$route)
@@ -182,6 +217,22 @@ export default {
 		sidebarOpen() {
 			return store.state.app.sidebarOpen
 		},
+		actionDeleteIcon() {
+			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
+		},
+		categories() {
+			return this.note.category ? this.note.category.split('/') : []
+		},
+		actionFavoriteText() {
+			return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
+		},
+		actionFavoriteIcon() {
+			let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
+			if (this.loading.favorite) {
+				icon += ' loading'
+			}
+			return icon
+		},
 	},
 
 	watch: {
@@ -219,6 +270,8 @@ export default {
 
 	methods: {
 		fetchData() {
+			this.$store.commit('setSelectedNote', parseInt(this.noteId))
+
 			this.etag = null
 			this.stopRefreshTimer()
 
@@ -227,7 +280,7 @@ export default {
 			}
 
 			this.onUpdateTitle(this.title)
-			this.loading = true
+			this.loading.note = true
 			this.preview = store.state.app.settings.noteMode === 'preview' && !this.isNewNote
 			fetchNote(parseInt(this.noteId))
 				.then((note) => {
@@ -240,7 +293,7 @@ export default {
 					// note not found
 				})
 				.then(() => {
-					this.loading = false
+					this.loading.note = false
 				})
 		},
 
@@ -255,7 +308,6 @@ export default {
 
 		onTogglePreview() {
 			this.preview = !this.preview
-			this.actionsOpen = false
 		},
 
 		onDetectFullscreen() {
@@ -290,12 +342,10 @@ export default {
 			} else {
 				launchIntoFullscreen(document.getElementById('note-container'))
 			}
-			this.actionsOpen = false
 		},
 
 		onToggleSidebar() {
 			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
-			this.actionsOpen = false
 		},
 
 		onVisibilityChange() {
@@ -409,6 +459,34 @@ export default {
 			conflictSolutionRemote(this.note)
 			this.showConflict = false
 		},
+
+		async onDeleteNote() {
+			this.loading.delete = true
+			try {
+				const note = await fetchNote(this.note.id)
+				if (note.errorType) {
+					throw new Error('Note has errors')
+				}
+				await deleteNote(this.note.id, () => {
+					this.$emit('note-deleted', note)
+					this.loading.delete = false
+				})
+			} catch (e) {
+				showError(this.t('notes', 'Error during preparing note for deletion.'))
+				this.loading.delete = false
+			}
+		},
+
+		onToggleFavorite() {
+			this.loading.favorite = true
+			setFavorite(this.note.id, !this.note.favorite)
+				.catch(() => {
+				})
+				.then(() => {
+					this.loading.favorite = false
+				})
+		},
+
 	},
 }
 </script>
@@ -424,6 +502,7 @@ export default {
 	font-size: 16px;
 	padding: 1em;
 	padding-bottom: 0;
+	padding-top: 44px;
 }
 
 /* center editor on large screens */
@@ -453,13 +532,6 @@ export default {
 	margin: 0 auto;
 }
 
-/* placeholder */
-.placeholder {
-	position: absolute;
-	padding: 1em;
-	opacity: 0.5;
-}
-
 /* main editor button */
 .action-buttons {
 	position: fixed;
@@ -502,4 +574,18 @@ export default {
 	}
 }
 
+.breadcrumbs {
+	position: fixed;
+	z-index: 1;
+	background-color: var(--color-main-background);
+}
+
+/deep/ .breadcrumbs a:hover {
+	background: none !important;
+}
+
+/deep/ .breadcrumbs *{
+	cursor: default !important;
+}
+
 </style>
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
new file mode 100644
index 000000000..45c144884
--- /dev/null
+++ b/src/components/NoteItem.vue
@@ -0,0 +1,83 @@
+<template>
+	<NcListItem
+		:title="title"
+		:active="isSelected"
+		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
+		@click="onNoteSelected(note.id)"
+	>
+		<template #subtitle>
+			{{ categoryTitle }}
+		</template>
+		<template #icon>
+			<AlertOctagonIcon v-if="note.error"
+				slot="icon"
+				:size="20"
+				fill-color="#E9322D"
+			/>
+			<StarIcon v-else-if="note.favorite"
+				slot="icon"
+				:size="20"
+				fill-color="#FC0"
+			/>
+			<FileDocumentOutlineIcon v-else
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-text-lighter)"
+			/>
+		</template>
+	</NcListItem>
+</template>
+
+<script>
+import { NcListItem } from '@nextcloud/vue'
+import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
+import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import { categoryLabel } from '../Util.js'
+
+export default {
+	name: 'NoteItem',
+
+	components: {
+		NcListItem,
+		AlertOctagonIcon,
+		StarIcon,
+		FileDocumentOutlineIcon,
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loading: {
+				note: false,
+			},
+		}
+	},
+
+	computed: {
+		isSelected() {
+			return this.$store.getters.getSelectedNote() === this.note.id
+		},
+
+		title() {
+			return this.note.title + (this.note.unsaved ? ' *' : '')
+		},
+
+		categoryTitle() {
+			return categoryLabel(this.note.category)
+		},
+	},
+
+	methods: {
+		onNoteSelected(noteId) {
+			this.$emit('note-selected', noteId)
+		},
+	},
+}
+</script>
diff --git a/src/components/NotesCaption.vue b/src/components/NotesCaption.vue
new file mode 100644
index 000000000..85dd3d5b8
--- /dev/null
+++ b/src/components/NotesCaption.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="title">
+		{{ title }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'NotesCaption',
+
+	components: {
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.title {
+		color: var(--color-primary-light-text);
+		font-weight: bold;
+		padding-left: 10px;
+		padding-top: 5px;
+		padding-bottom: 5px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
new file mode 100644
index 000000000..5b7124b5f
--- /dev/null
+++ b/src/components/NotesList.vue
@@ -0,0 +1,34 @@
+<template>
+	<ul>
+		<NoteItem v-for="note in notes"
+			:key="note.id"
+			:note="note"
+			@note-selected="onNoteSelected"
+		/>
+	</ul>
+</template>
+
+<script>
+import NoteItem from './NoteItem.vue'
+
+export default {
+	name: 'NotesList',
+
+	components: {
+		NoteItem,
+	},
+
+	props: {
+		notes: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	methods: {
+		onNoteSelected(noteId) {
+			this.$emit('note-selected', noteId)
+		},
+	},
+}
+</script>
diff --git a/src/components/NavigationList.vue b/src/components/NotesView.vue
similarity index 54%
rename from src/components/NavigationList.vue
rename to src/components/NotesView.vue
index 9862aa984..edbe8fad8 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NotesView.vue
@@ -1,62 +1,68 @@
 <template>
-	<Fragment>
-		<!-- collapsible categories -->
-		<NavigationCategoriesItem
-			v-if="numNotes"
-			:selected-category="category"
-			@category-selected="$emit('category-selected', $event)"
-		/>
-
-		<!-- list of notes -->
-		<template v-for="item in noteItems">
-			<NcAppNavigationCaption v-if="category!==null && category!==item.category"
-				:key="item.category"
-				class="app-navigation-noclose"
-				:title="categoryToLabel(item.category)"
-				@click.native="$emit('category-selected', item.category)"
-			/>
-			<NcAppNavigationCaption v-if="category===null && item.timeslot"
-				:key="item.timeslot"
-				:title="item.timeslot"
-			/>
-			<NavigationNoteItem v-for="note in item.notes"
-				:key="note.id"
-				:note="note"
-				@category-selected="$emit('category-selected', $event)"
-				@note-deleted="$emit('note-deleted', $event)"
-			/>
+	<NcAppContent pane-config-key="note" :show-details="showNote" @update:showDetails="hideNote">
+		<template slot="list">
+			<NcAppContentList>
+				<div class="spacer" />
+				<NotesList v-if="groupedNotes.length === 1"
+					:notes="groupedNotes[0].notes"
+					@note-selected="onNoteSelected"
+				/>
+				<template v-for="(group, idx) in groupedNotes" v-else>
+					<NotesCaption v-if="group.category && category!==group.category"
+						:key="group.category"
+						:title="categoryToLabel(group.category)"
+					/>
+					<NotesCaption v-if="group.timeslot"
+						:key="group.timeslot"
+						:title="group.timeslot"
+					/>
+					<NotesList
+						:key="idx"
+						:notes="group.notes"
+						@note-selected="onNoteSelected"
+					/>
+				</template>
+				<div
+					v-if="displayedNotes.length != filteredNotes.length"
+					v-observe-visibility="onEndOfNotes"
+					class="loading-label"
+				>
+					{{ t('notes', 'Loading …') }}
+				</div>
+			</NcAppContentList>
 		</template>
-		<NcAppNavigationItem
-			v-if="notes.length != filteredNotes.length"
-			v-observe-visibility="onEndOfNotes"
-			:title="t('notes', 'Loading …')"
-			:loading="true"
-		/>
-	</Fragment>
+
+		<NcAppContentDetails>
+			<Note v-if="showNote" :note-id="noteId" @note-deleted="onNoteDeleted" />
+		</NcAppContentDetails>
+	</NcAppContent>
 </template>
 
 <script>
+
 import {
-	NcAppNavigationCaption,
-	NcAppNavigationItem,
+	NcAppContent,
+	NcAppContentList,
+	NcAppContentDetails,
 } from '@nextcloud/vue'
-import { Fragment } from 'vue-fragment'
-import { ObserveVisibility } from 'vue-observe-visibility'
-
 import { categoryLabel } from '../Util.js'
-import NavigationCategoriesItem from './NavigationCategoriesItem.vue'
-import NavigationNoteItem from './NavigationNoteItem.vue'
+import NotesList from './NotesList.vue'
+import NotesCaption from './NotesCaption.vue'
 import store from '../store.js'
+import Note from './Note.vue'
+
+import { ObserveVisibility } from 'vue-observe-visibility'
 
 export default {
-	name: 'NavigationList',
+	name: 'NotesView',
 
 	components: {
-		Fragment,
-		NavigationCategoriesItem,
-		NavigationNoteItem,
-		NcAppNavigationCaption,
-		NcAppNavigationItem,
+		NcAppContent,
+		NcAppContentList,
+		NcAppContentDetails,
+		Note,
+		NotesList,
+		NotesCaption,
 	},
 
 	directives: {
@@ -64,13 +70,9 @@ export default {
 	},
 
 	props: {
-		filteredNotes: {
-			type: Array,
-			required: true,
-		},
-		category: {
+		noteId: {
 			type: String,
-			default: null,
+			required: true,
 		},
 	},
 
@@ -80,15 +82,20 @@ export default {
 			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
 			lastYear: new Date(new Date().getFullYear() - 1, 0),
 			showFirstNotesOnly: true,
+			showNote: true,
 		}
 	},
 
 	computed: {
-		numNotes() {
-			return store.getters.numNotes()
+		category() {
+			return store.getters.getSelectedCategory()
+		},
+
+		filteredNotes() {
+			return store.getters.getFilteredNotes()
 		},
 
-		notes() {
+		displayedNotes() {
 			if (this.filteredNotes.length > 40 && this.showFirstNotesOnly) {
 				return this.filteredNotes.slice(0, 30)
 			} else {
@@ -99,7 +106,7 @@ export default {
 		// group notes by time ("All notes") or by category (if category chosen)
 		groupedNotes() {
 			if (this.category === null) {
-				return this.notes.reduce((g, note) => {
+				return this.displayedNotes.reduce((g, note) => {
 					const timeslot = this.getTimeslotFromNote(note)
 					if (g.length === 0 || g[g.length - 1].timeslot !== timeslot) {
 						g.push({ timeslot, notes: [] })
@@ -108,7 +115,7 @@ export default {
 					return g
 				}, [])
 			} else {
-				return this.notes.reduce((g, note) => {
+				return this.displayedNotes.reduce((g, note) => {
 					if (g.length === 0 || g[g.length - 1].category !== note.category) {
 						g.push({ category: note.category, notes: [] })
 					}
@@ -117,10 +124,6 @@ export default {
 				}, [])
 			}
 		},
-
-		noteItems() {
-			return this.groupedNotes
-		},
 	},
 
 	watch: {
@@ -174,6 +177,49 @@ export default {
 				this.showFirstNotesOnly = false
 			}
 		},
+
+		onCategorySelected(category) {
+			store.commit('setSelectedCategory', category)
+		},
+
+		hideNote() {
+			this.showNote = false
+		},
+
+		onNoteDeleted(note) {
+			this.$emit('note-deleted', note)
+		},
+
+		onNoteSelected(noteId) {
+			this.showNote = true
+		},
 	},
 }
 </script>
+<style scoped>
+.spacer {
+	padding: 16px;
+}
+
+.loading-label {
+	color: var(--color-text-lighter);
+	text-align: center;
+}
+
+.loading-label::before {
+	content: ' ';
+	height: 16px;
+	width: 16px;
+	display: inline-block;
+	border-radius: 100%;
+	-webkit-animation: rotate 0.8s infinite linear;
+	animation: rotate 0.8s infinite linear;
+	-webkit-transform-origin: center;
+	-ms-transform-origin: center;
+	transform-origin: center;
+	border: 2px solid var(--color-loading-light);
+	border-top-color: var(--color-loading-dark);
+	vertical-align: top;
+	margin-right: 5px;
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a894b1493..e160fdece 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -4,7 +4,11 @@
 		:subtitle="subtitle"
 		:star-loading="loading.favorite"
 		:starred="note.favorite"
+		:title-editable.sync="titleEditable"
+		:title-tooltip="titleTooltip"
 		@update:starred="onSetFavorite"
+		@update:title="onUpdateTitle"
+		@submit-title="onRenameTitle"
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
@@ -62,7 +66,7 @@ import moment from '@nextcloud/moment'
 
 import InfoIcon from 'vue-material-design-icons/Information.vue'
 
-import { getCategories, setFavorite, setCategory, saveNoteManually } from '../NotesService.js'
+import { getCategories, setFavorite, setTitle, setCategory, saveNoteManually } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
@@ -98,8 +102,11 @@ export default {
 			loading: {
 				category: false,
 				favorite: false,
+				title: false, // TODO reflect this state in the UI
 			},
 			categoryInput: null,
+			titleEditableInternal: false,
+			newTitle: '',
 		}
 	},
 
@@ -107,11 +114,26 @@ export default {
 		note() {
 			return store.getters.getNote(parseInt(this.noteId))
 		},
+		titleEditable: {
+			get() {
+				return this.titleEditableInternal && !this.note.readonly
+			},
+			set(newValue) {
+				if (newValue) {
+					this.newTitle = this.title
+				}
+				this.titleEditableInternal = newValue
+			},
+		},
 		title() {
-			return this.note ? this.note.title : ''
+			if (!this.titleEditable) {
+				return this.note?.title || ''
+			} else {
+				return this.newTitle || ''
+			}
 		},
 		category() {
-			return this.note ? this.note.category : ''
+			return this.note?.category || ''
 		},
 		formattedDate() {
 			return moment(this.note.modified * 1000).format('LLL')
@@ -143,6 +165,9 @@ export default {
 		sidebarOpen() {
 			return store.state.app.sidebarOpen
 		},
+		titleTooltip() {
+			return t('notes', 'Click to edit title')
+		},
 	},
 
 	methods: {
@@ -170,6 +195,22 @@ export default {
 				})
 		},
 
+		onUpdateTitle(newTitle) {
+			this.newTitle = newTitle
+		},
+
+		onRenameTitle(event) {
+			if (event && this.title !== this.newTitle) {
+				this.loading.title = true
+				setTitle(this.note.id, this.newTitle)
+					.catch(() => {
+					})
+					.finally(() => {
+						this.loading.title = false
+					})
+			}
+		},
+
 		onSaveCategory(category) {
 			this.categoryInput = null
 			if (category !== null && this.note.category !== category) {
diff --git a/src/router.js b/src/router.js
index 1233057da..1e63d22d6 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,7 +4,7 @@ import { generateUrl } from '@nextcloud/router'
 
 import Loading from './components/Loading.vue'
 import Welcome from './components/Welcome.vue'
-import Note from './components/Note.vue'
+import NotesView from './components/NotesView.vue'
 import Sidebar from './components/Sidebar.vue'
 
 Vue.use(Router)
@@ -28,7 +28,7 @@ export default new Router({
 			path: '/note/:noteId',
 			name: 'note',
 			components: {
-				default: Note,
+				default: NotesView,
 				sidebar: Sidebar,
 			},
 			props: {
diff --git a/src/store/notes.js b/src/store/notes.js
index d00581c0b..582c64090 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -5,6 +5,8 @@ const state = {
 	categories: [],
 	notes: [],
 	notesIds: {},
+	selectedCategory: null,
+	selectedNote: null,
 }
 
 const getters = {
@@ -70,6 +72,43 @@ const getters = {
 		}
 		return result
 	},
+
+	getFilteredNotes: (state) => () => {
+		const notes = state.notes.filter(note => {
+			if (state.selectedCategory !== null
+				&& state.selectedCategory !== note.category
+				&& !note.category.startsWith(state.selectedCategory + '/')) {
+				return false
+			}
+			return true
+		})
+
+		function cmpRecent(a, b) {
+			if (a.favorite && !b.favorite) return -1
+			if (!a.favorite && b.favorite) return 1
+			return b.modified - a.modified
+		}
+
+		function cmpCategory(a, b) {
+			const cmpCat = a.category.localeCompare(b.category)
+			if (cmpCat !== 0) return cmpCat
+			if (a.favorite && !b.favorite) return -1
+			if (!a.favorite && b.favorite) return 1
+			return a.title.localeCompare(b.title)
+		}
+
+		notes.sort(state.selectedCategory === null ? cmpRecent : cmpCategory)
+
+		return notes
+	},
+
+	getSelectedCategory: (state) => () => {
+		return state.selectedCategory
+	},
+
+	getSelectedNote: (state) => () => {
+		return state.selectedNote
+	},
 }
 
 const mutations = {
@@ -111,6 +150,14 @@ const mutations = {
 	setCategories(state, categories) {
 		state.categories = categories
 	},
+
+	setSelectedCategory(state, category) {
+		state.selectedCategory = category
+	},
+
+	setSelectedNote(state, note) {
+		state.selectedNote = note
+	},
 }
 
 const actions = {