diff --git a/package-lock.json b/package-lock.json
index 6211af027..b8536d41e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "markdown-it": "^13.0.2",
         "markdown-it-task-checkbox": "^1.0.6",
         "vue": "^2.7.15",
-        "vue-fragment": "1.6.0",
+        "vue-fragment": "^1.5.1",
         "vue-material-design-icons": "^5.2.0",
         "vue-observe-visibility": "^1.0.0",
         "vue-router": "^3.5.3",
@@ -16962,9 +16962,9 @@
       }
     },
     "node_modules/vue-fragment": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.6.0.tgz",
-      "integrity": "sha512-a5T8ZZZK/EQzgVShEl374HbobUJ0a7v12BzOzS6Z/wd/5EE/5SffcyHC+7bf9hP3L7Yc0hhY/GhMdwFQ25O/8A==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.1.tgz",
+      "integrity": "sha512-ig6eES6TcMBbANW71ylB+AJgRN+Zksb3f50AxjGpAk6hMzqmeuD80qeh4LJP0jVw2dMBMjgRUfIkrvxygoRgtQ==",
       "peerDependencies": {
         "vue": "^2.5.16"
       }
@@ -30317,9 +30317,9 @@
       "requires": {}
     },
     "vue-fragment": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.6.0.tgz",
-      "integrity": "sha512-a5T8ZZZK/EQzgVShEl374HbobUJ0a7v12BzOzS6Z/wd/5EE/5SffcyHC+7bf9hP3L7Yc0hhY/GhMdwFQ25O/8A==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.1.tgz",
+      "integrity": "sha512-ig6eES6TcMBbANW71ylB+AJgRN+Zksb3f50AxjGpAk6hMzqmeuD80qeh4LJP0jVw2dMBMjgRUfIkrvxygoRgtQ==",
       "requires": {}
     },
     "vue-hot-reload-api": {
diff --git a/package.json b/package.json
index 6516d6370..3ebb94023 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "markdown-it": "^13.0.2",
     "markdown-it-task-checkbox": "^1.0.6",
     "vue": "^2.7.15",
-    "vue-fragment": "1.6.0",
+    "vue-fragment": "^1.5.1",
     "vue-material-design-icons": "^5.2.0",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.5.3",
@@ -46,4 +46,4 @@
     "extends @nextcloud/browserslist-config"
   ],
   "version": "4.8.1"
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 4db4bc665..c81128615 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,8 +37,6 @@
 			</div>
 		</NcAppContent>
 		<router-view v-else @note-deleted="onNoteDeleted" />
-
-		<router-view name="sidebar" />
 	</NcContent>
 </template>
 
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 56ab9cb48..dff039458 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -3,6 +3,7 @@
 		:title="title"
 		:active="isSelected"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
+		@update:menuOpen="onMenuChange"
 		@click="onNoteSelected(note.id)"
 	>
 		<template #subtitle>
@@ -29,31 +30,66 @@
 			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
 				{{ actionFavoriteText }}
 			</NcActionButton>
-			<NcActionButton @click="onToggleSidebar">
-				<SidebarIcon slot="icon" :size="20" />
-				{{ t('notes', 'Details') }}
+
+			<NcActionButton v-if="!showCategorySelect" @click="showCategorySelect = true">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+				{{ categoryTitle }}
 			</NcActionButton>
-			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
-				{{ t('notes', 'Delete note') }}
+			<NcActionInput
+				v-else
+				:value="note.category"
+				type="multiselect"
+				label="label"
+				track-by="id"
+				:multiple="false"
+				:options="categories"
+				:disabled="loading.category"
+				:taggable="true"
+				@input="onCategoryChange"
+				@search-change="onCategoryChange"
+			>
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+				{{ t('notes', 'Change category') }}
+			</NcActionInput>
+
+			<NcActionButton v-if="!renaming" @click="startRenaming">
+				<PencilIcon slot="icon" :size="20" />
+				{{ t('notes', 'Rename') }}
 			</NcActionButton>
+			<NcActionInput v-else
+				v-model.trim="newTitle"
+				:disabled="!renaming"
+				:placeholder="t('notes', 'Rename note')"
+				:show-trailing-button="true"
+				@input="onInputChange($event)"
+				@submit="onRename"
+			>
+				<PencilIcon slot="icon" :size="20" />
+			</NcActionInput>
+
 			<NcActionSeparator />
-			<NcActionButton icon="icon-files-dark" @click="onCategorySelected">
-				{{ actionCategoryText }}
+
+			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
+				{{ t('notes', 'Delete note') }}
 			</NcActionButton>
 		</template>
 	</NcListItem>
 </template>
 
 <script>
-import { NcListItem, NcActionButton } from '@nextcloud/vue'
+import { NcListItem, NcActionButton, NcActionSeparator, NcActionInput } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
-import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import { categoryLabel, routeIsNewNote } from '../Util.js'
 import { showError } from '@nextcloud/dialogs'
-import store from '../store.js'
-import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
+import { setFavorite, setTitle, fetchNote, deleteNote, setCategory } from '../NotesService.js'
 
 export default {
 	name: 'NoteItem',
@@ -61,10 +97,13 @@ export default {
 	components: {
 		AlertOctagonIcon,
 		FileDocumentOutlineIcon,
+		FolderIcon,
 		NcActionButton,
 		NcListItem,
-		SidebarIcon,
 		StarIcon,
+		NcActionSeparator,
+		NcActionInput,
+		PencilIcon,
 	},
 
 	props: {
@@ -78,7 +117,11 @@ export default {
 		return {
 			loading: {
 				note: false,
+				category: false,
 			},
+			newTitle: '',
+			renaming: false,
+			showCategorySelect: false,
 		}
 	},
 
@@ -111,9 +154,24 @@ export default {
 		actionDeleteIcon() {
 			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
+		categories() {
+			return [
+				{
+					id: '',
+					label: categoryLabel(''),
+				},
+				...this.$store.getters.getCategories(0, false).map((category) => ({
+					id: category,
+					label: categoryLabel(category),
+				})),
+			]
+		},
 	},
-
 	methods: {
+		onMenuChange(state) {
+			this.actionsOpen = state
+			this.showCategorySelect = false
+		},
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
 		},
@@ -131,24 +189,49 @@ export default {
 			this.actionsOpen = false
 			this.$emit('category-selected', this.note.category)
 		},
-		onToggleSidebar() {
-			this.actionsOpen = false
-			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
+		startRenaming() {
+			this.renaming = true
+			this.newTitle = this.note.title
+			this.$emit('start-renaming', this.note.id)
+		},
+		onInputChange(event) {
+			this.newTitle = event.target.value.toString()
 		},
-		onRename(newTitle) {
+		async onCategoryChange(result) {
+			this.showCategorySelect = false
+			const category = result?.id ?? result?.label ?? null
+			if (category !== null && this.note.category !== category) {
+				this.loading.category = true
+				await setCategory(this.note.id, category)
+				this.loading.category = false
+			}
+		},
+		async onRename() {
+			const newTitle = this.newTitle.toString()
+			if (!newTitle) {
+				return
+			}
 			this.loading.note = true
 			setTitle(this.note.id, newTitle)
-				.catch(() => {
+				.then(() => {
+					this.newTitle = ''
+				})
+				.catch((e) => {
+					console.error('Failed to rename note', e)
+					showError(this.t('notes', 'Error while renaming note.'))
 				})
 				.finally(() => {
 					this.loading.note = false
 				})
+
 			if (routeIsNewNote(this.$route)) {
 				this.$router.replace({
 					name: 'note',
 					params: { noteId: this.note.id.toString() },
 				})
 			}
+			this.renaming = false
+
 		},
 		async onDeleteNote() {
 			this.loading.delete = true
diff --git a/src/components/NotePlain.vue b/src/components/NotePlain.vue
index 5eac70a26..589fc484b 100644
--- a/src/components/NotePlain.vue
+++ b/src/components/NotePlain.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
+	<NcAppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error)}">
 		<div v-if="!loading && note && !note.error && !note.deleting"
 			id="note-container"
 			class="note-container"
@@ -47,13 +47,6 @@
 			</div>
 			<span class="action-buttons">
 				<NcActions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
-					<NcActionButton v-show="!sidebarOpen && !fullscreen"
-						icon="icon-details"
-						@click="onToggleSidebar"
-					>
-						<SidebarIcon slot="icon" :size="20" />
-						{{ t('notes', 'Details') }}
-					</NcActionButton>
 					<NcActionButton
 						v-tooltip.left="t('notes', 'CTRL + /')"
 						@click="onTogglePreview"
@@ -109,7 +102,6 @@ import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
 import EyeIcon from 'vue-material-design-icons/Eye.vue'
 import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
 import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
-import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
 
 import { config } from '../config.js'
@@ -133,7 +125,6 @@ export default {
 		NcAppContent,
 		NcModal,
 		NoEditIcon,
-		SidebarIcon,
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
@@ -179,9 +170,6 @@ export default {
 		isManualSave() {
 			return store.state.app.isManualSave
 		},
-		sidebarOpen() {
-			return store.state.app.sidebarOpen
-		},
 	},
 
 	watch: {
@@ -293,11 +281,6 @@ export default {
 			this.actionsOpen = false
 		},
 
-		onToggleSidebar() {
-			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
-			this.actionsOpen = false
-		},
-
 		onVisibilityChange() {
 			if (document.visibilityState === 'visible') {
 				this.stopRefreshTimer()
@@ -436,9 +419,6 @@ export default {
 		transition-duration: var(--animation-quick);
 		transition-property: padding-right;
 	}
-	.sidebar-open .note-container {
-		padding-right: 0px;
-	}
 }
 
 /* distraction free styles */
diff --git a/src/components/NoteRich.vue b/src/components/NoteRich.vue
index 1d1d9b581..7adc01cae 100644
--- a/src/components/NoteRich.vue
+++ b/src/components/NoteRich.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen, 'is-mobile': isMobile }">
+	<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'is-mobile': isMobile }">
 		<div v-show="!loading" ref="editor" class="text-editor" />
 	</div>
 </template>
@@ -41,9 +41,6 @@ export default {
 		isNewNote() {
 			return routeIsNewNote(this.$route)
 		},
-		sidebarOpen() {
-			return store.state.app.sidebarOpen
-		},
 	},
 
 	watch: {
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 5b7124b5f..5b318725a 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -3,7 +3,9 @@
 		<NoteItem v-for="note in notes"
 			:key="note.id"
 			:note="note"
+			:renaming="isRenaming(note.id)"
 			@note-selected="onNoteSelected"
+			@start-renaming="onStartRenaming"
 		/>
 	</ul>
 </template>
@@ -24,11 +26,22 @@ export default {
 			required: true,
 		},
 	},
-
+	data() {
+		return {
+			renamingNotes: [],
+		}
+	},
 	methods: {
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
 		},
+		onStartRenaming(noteId) {
+			this.renamingNotes.push(noteId)
+		},
+		isRenaming(noteId) {
+			return this.renamingNotes.includes(noteId)
+		},
+
 	},
 }
 </script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
deleted file mode 100644
index 7c65daeee..000000000
--- a/src/components/Sidebar.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<template>
-	<NcAppSidebar v-if="sidebarOpen"
-		:title="title"
-		: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">
-			<div v-if="!note.readonly" class="note-category">
-				<h4>
-					{{ t('notes', 'Category') }}
-					<InfoIcon v-tooltip="categoriesInfo"
-						:size="20"
-						fill-color="var(--color-main-text)"
-						style="display: inline-block; margin-left: 1ex;"
-					/>
-				</h4>
-				<form class="category" @submit.prevent.stop="">
-					<NcMultiselect id="category"
-						:value="category"
-						:options="categories"
-						:placeholder="t('notes', 'Uncategorized')"
-						:disabled="loading.category"
-						:class="['category-select', {'icon-loading-small': loading.category}]"
-						:show-no-results="false"
-						:taggable="true"
-						:preserve-search="true"
-						:title="t('notes', 'Set category')"
-						@input="onSaveCategory"
-						@close="onFinishEditCategory"
-						@search-change="onEditCategory"
-					>
-						<template #option="{ option }">
-							<span :class="{ gray: option==='' }">{{ option | categoryOptionLabel }}</span>
-						</template>
-					</NcMultiselect>
-				</form>
-			</div>
-			<div class="modified"
-				:title="t('notes', 'Click here to save manually')"
-				@click="onManualSave"
-			>
-				<div v-show="note.error" class="note-error">
-					{{ t('notes', 'Saving failed!') }}
-				</div>
-				{{ t('notes', 'Last modified: {date}', { date: formattedDate }) }}
-				<span v-show="note.unsaved" :title="t('notes', 'Note has unsaved changes')"> * </span>
-			</div>
-		</div>
-	</NcAppSidebar>
-</template>
-<script>
-
-import {
-	NcAppSidebar,
-	NcMultiselect,
-	Tooltip,
-} from '@nextcloud/vue'
-import moment from '@nextcloud/moment'
-
-import InfoIcon from 'vue-material-design-icons/Information.vue'
-
-import { getCategories, setFavorite, setTitle, setCategory, saveNoteManually } from '../NotesService.js'
-import { categoryLabel } from '../Util.js'
-import store from '../store.js'
-
-export default {
-	name: 'Sidebar',
-
-	components: {
-		InfoIcon,
-		NcAppSidebar,
-		NcMultiselect,
-	},
-
-	directives: {
-		tooltip: Tooltip,
-	},
-
-	filters: {
-		categoryOptionLabel(obj) {
-			const category = obj.isTag ? obj.label : obj
-			return categoryLabel(category)
-		},
-	},
-
-	props: {
-		noteId: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			loading: {
-				category: false,
-				favorite: false,
-				title: false, // TODO reflect this state in the UI
-			},
-			categoryInput: null,
-			titleEditableInternal: false,
-			newTitle: '',
-		}
-	},
-
-	computed: {
-		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() {
-			if (!this.titleEditable) {
-				return this.note?.title || ''
-			} else {
-				return this.newTitle || ''
-			}
-		},
-		category() {
-			return this.note?.category || ''
-		},
-		formattedDate() {
-			return moment(this.note.modified * 1000).format('LLL')
-		},
-		wordCount() {
-			const value = this.note?.content
-			if (value && (typeof value === 'string')) {
-				const wordCount = value.split(/\s+/).filter(
-					// only count words containing
-					// at least one alphanumeric character
-					value => value.search(/[A-Za-z0-9]/) !== -1,
-				).length
-				const charCount = Array.from(value).length
-				return n('notes', '%n word', '%n words', wordCount)
-					+ ', ' + n('notes', '%n character', '%n characters', charCount)
-			} else {
-				return ''
-			}
-		},
-		subtitle() {
-			return this.wordCount
-		},
-		categoriesInfo() {
-			return t('notes', 'You can create subcategories by using “/” as delimiter between parent category and subcategory, e.g. “{parent}/{sub}”.', { parent: t('notes', 'Category'), sub: t('notes', 'Subcategory') })
-		},
-		categories() {
-			return ['', ...getCategories(0, false)]
-		},
-		sidebarOpen() {
-			return store.state.app.sidebarOpen
-		},
-		titleTooltip() {
-			return t('notes', 'Click to edit title')
-		},
-	},
-
-	methods: {
-		onCloseSidebar() {
-			store.commit('setSidebarOpen', false)
-		},
-
-		onEditCategory(text) {
-			this.categoryInput = text
-		},
-
-		onFinishEditCategory(str) {
-			if (this.categoryInput) {
-				this.onSaveCategory(this.categoryInput)
-			}
-		},
-
-		onSetFavorite(favorite) {
-			this.loading.favorite = true
-			setFavorite(this.note.id, favorite)
-				.catch(() => {
-				})
-				.then(() => {
-					this.loading.favorite = false
-				})
-		},
-
-		onUpdateTitle(newTitle) {
-			this.newTitle = newTitle
-		},
-
-		onRenameTitle() {
-			if (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) {
-				this.loading.category = true
-				this.note.category = category
-				setCategory(this.note.id, category)
-					.catch(() => {
-					})
-					.then(() => {
-						this.loading.category = false
-					})
-			}
-		},
-
-		onManualSave() {
-			saveNoteManually(this.note.id)
-		},
-
-	},
-}
-</script>
-<style scoped>
-.sidebar-content-wrapper {
-	padding: 0 10px;
-}
-
-.note-error {
-	background-color: var(--color-error);
-	color: var(--color-primary-element-text);
-	border-radius: 0.5ex;
-	padding: 0.5ex 1ex;
-}
-
-.note-category {
-	margin-top: 1ex;
-}
-
-form.category > .multiselect,
-form.category > .icon-confirm {
-	vertical-align: middle;
-}
-
-form.category {
-	display: flex;
-	align-items: center;
-}
-
-.note-category .icon-info {
-	padding: 11px 20px;
-	vertical-align: super;
-}
-
-.category-select {
-	flex-grow: 1;
-}
-
-.gray {
-	opacity: 0.5;
-}
-
-.modified {
-	position: absolute;
-	bottom: 0;
-	padding: 1ex 0;
-	opacity: 0.5;
-}
-</style>
diff --git a/src/router.js b/src/router.js
index 1e63d22d6..1986d935a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -5,7 +5,6 @@ import { generateUrl } from '@nextcloud/router'
 import Loading from './components/Loading.vue'
 import Welcome from './components/Welcome.vue'
 import NotesView from './components/NotesView.vue'
-import Sidebar from './components/Sidebar.vue'
 
 Vue.use(Router)
 
@@ -29,11 +28,9 @@ export default new Router({
 			name: 'note',
 			components: {
 				default: NotesView,
-				sidebar: Sidebar,
 			},
 			props: {
 				default: true,
-				sidebar: true,
 			},
 		},
 	],
diff --git a/src/store/app.js b/src/store/app.js
index f7efb464a..95490d05a 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -5,7 +5,6 @@ const state = {
 	isSaving: false,
 	isManualSave: false,
 	documentTitle: null,
-	sidebarOpen: false,
 	searchText: '',
 }
 
@@ -33,10 +32,6 @@ const mutations = {
 		state.documentTitle = title
 	},
 
-	setSidebarOpen(state, open) {
-		state.sidebarOpen = open
-	},
-
 	updateSearchText(state, searchText) {
 		state.searchText = searchText
 	},