diff --git a/src/App.vue b/src/App.vue
index a5bc04645..aaaaaaebe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,18 +8,7 @@
 	<NcContent v-else appName="notes" :contentClass="{loading: loading.notes}">
 		<NcAppNavigation :class="{loading: loading.notes, 'icon-error': error}">
 			<template #list>
-				<NcAppNavigationNew
-					v-show="!loading.notes && !error"
-					:text="t('notes', 'New category')"
-					@click="onNewCategory"
-					@dragover="onNewCategoryDragOver"
-					@drop="onNewCategoryDrop"
-				>
-					<template #icon>
-						<FolderPlusIcon :size="20" />
-					</template>
-				</NcAppNavigationNew>
-				<CategoriesList :loading="loading.notes" />
+				<CategoriesList :loading="loading.notes" :disabled="!!error" />
 			</template>
 
 			<template #footer>
@@ -51,15 +40,12 @@
 
 <script>
 import { showSuccess, TOAST_PERMANENT_TIMEOUT, TOAST_UNDO_TIMEOUT } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
 import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
-import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew'
 import NcContent from '@nextcloud/vue/components/NcContent'
 import CogIcon from 'vue-material-design-icons/CogOutline.vue'
-import FolderPlusIcon from 'vue-material-design-icons/FolderPlusOutline.vue'
 import AppSettings from './components/AppSettings.vue'
 import CategoriesList from './components/CategoriesList.vue'
 import EditorHint from './components/Modal/EditorHint.vue'
@@ -68,7 +54,6 @@ import { config } from './config.js'
 import logger from './Logger.js'
 import { fetchNotes, noteExists, undoDeleteNote } from './NotesService.js'
 import store from './store.js'
-import { getDraggedNoteId, isNoteDrag } from './Util.js'
 
 import '@nextcloud/dialogs/style.css'
 
@@ -82,11 +67,9 @@ export default {
 		EditorHint,
 		NcAppContent,
 		NcAppNavigation,
-		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
 		NoteShareSidebar,
-		FolderPlusIcon,
 	},
 
 	data() {
@@ -235,30 +218,6 @@ export default {
 			this.settingsVisible = true
 		},
 
-		onNewCategory() {
-			emit('notes:category:new')
-		},
-
-		onNewCategoryDragOver(event) {
-			if (!isNoteDrag(event)) {
-				return
-			}
-			event.preventDefault()
-			if (event.dataTransfer) {
-				event.dataTransfer.dropEffect = 'move'
-			}
-		},
-
-		onNewCategoryDrop(event) {
-			const noteId = getDraggedNoteId(event, (noteId) => store.notes.getNote(noteId))
-			if (noteId === null) {
-				return
-			}
-			event.preventDefault()
-			event.stopPropagation()
-			emit('notes:category:new', { noteId })
-		},
-
 		onNoteDeleted(note) {
 			this.deletedNotes.push(note)
 			this.clearUndoTimer()
diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index a315646d8..0a65b0fcf 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -27,7 +27,35 @@
 		</template>
 	</NcAppNavigationItem>
 
-	<NcAppNavigationCaption v-show="!loading" :name="t('notes', 'Categories')" />
+	<!--
+		The "New category" action sits inline next to the caption. Dropping a
+		note anywhere on the caption row also starts a new category with that
+		note in it, which is what the former full-width button offered — the
+		row is a far easier drop target than the icon alone.
+	-->
+	<NcAppNavigationCaption v-if="!disabled"
+		v-show="!loading"
+		:name="t('notes', 'Categories')"
+		:inline="1"
+		:class="{ 'drop-over-caption': dragOverNewCategory }"
+		@dragover="onNewCategoryDragOver($event)"
+		@dragleave="onNewCategoryDragLeave($event)"
+		@drop="onNewCategoryDrop($event)"
+	>
+		<template #actions>
+			<!--
+				Rendered inline by NcActions, so it becomes a single icon button
+				whose accessible name and tooltip are the action text.
+			-->
+			<NcActionButton @click="startNewCategory()">
+				<template #icon>
+					<FolderPlusIcon :size="20" />
+				</template>
+				{{ t('notes', 'New category') }}
+			</NcActionButton>
+		</template>
+	</NcAppNavigationCaption>
+	<NcAppNavigationCaption v-else v-show="!loading" :name="t('notes', 'Categories')" />
 
 	<NcAppNavigationItem
 		v-if="newCategoryDraft"
@@ -106,6 +134,7 @@ import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
+import FolderPlusIcon from 'vue-material-design-icons/FolderPlusOutline.vue'
 import HistoryIcon from 'vue-material-design-icons/History.vue'
 import { deleteCategory as deleteCategoryRequest, getCategories, renameCategory as renameCategoryRequest, setCategory } from '../NotesService.js'
 import store from '../store.js'
@@ -122,16 +151,20 @@ export default {
 		NcCounterBubble,
 		FolderIcon,
 		FolderOutlineIcon,
+		FolderPlusIcon,
 		HistoryIcon,
 	},
 
 	props: {
 		loading: Boolean,
+		/** Hides the "New category" action, e.g. while the note list failed to load */
+		disabled: Boolean,
 	},
 
 	data() {
 		return {
 			dragOverCategory: null,
+			dragOverNewCategory: false,
 			dragOverAllNotes: false,
 			newCategoryDraft: false,
 			newCategoryMonitor: null,
@@ -179,6 +212,37 @@ export default {
 			})
 		},
 
+		onNewCategoryDragOver(event) {
+			if (!isNoteDrag(event)) {
+				return
+			}
+			event.preventDefault()
+			if (event.dataTransfer) {
+				event.dataTransfer.dropEffect = 'move'
+			}
+			this.dragOverNewCategory = true
+		},
+
+		onNewCategoryDragLeave(event) {
+			// dragleave also fires when moving onto a child element, so ignore
+			// events that are still inside the caption row
+			if (event.currentTarget?.contains(event.relatedTarget)) {
+				return
+			}
+			this.dragOverNewCategory = false
+		},
+
+		onNewCategoryDrop(event) {
+			this.dragOverNewCategory = false
+			const noteId = getDraggedNoteId(event, (noteId) => store.notes.getNote(noteId))
+			if (noteId === null) {
+				return
+			}
+			event.preventDefault()
+			event.stopPropagation()
+			this.startNewCategory({ noteId })
+		},
+
 		stopNewCategoryMonitor() {
 			if (this.newCategoryMonitor) {
 				cancelAnimationFrame(this.newCategoryMonitor)
@@ -459,6 +523,14 @@ export default {
 	outline-offset: -2px;
 }
 
+/* The caption is not an .app-navigation-entry, so it needs its own drop hint. */
+.app-navigation-caption.drop-over-caption {
+	background-color: var(--color-primary-element-light);
+	outline: 2px dashed var(--color-primary-element);
+	outline-offset: -2px;
+	border-radius: var(--border-radius-element, var(--border-radius-large));
+}
+
 .app-navigation-entry-wrapper.category-no-actions:deep(.app-navigation-entry__counter-wrapper) {
 	margin-inline-end: calc(var(--default-grid-baseline) * 2 + var(--default-clickable-area));
 }