diff --git a/apps/files/src/actions/downloadAction.ts b/apps/files/src/actions/downloadAction.ts
index 1b57ddb4c64de..7b54468f3d916 100644
--- a/apps/files/src/actions/downloadAction.ts
+++ b/apps/files/src/actions/downloadAction.ts
@@ -76,5 +76,5 @@ registerFileAction(new FileAction({
 		return new Array(nodes.length).fill(null)
 	},
 
-	order: 20,
+	order: 30,
 }))
diff --git a/apps/files/src/actions/favoriteAction.ts b/apps/files/src/actions/favoriteAction.ts
index 8ad4a36efb8f8..8173dd2bc6f3d 100644
--- a/apps/files/src/actions/favoriteAction.ts
+++ b/apps/files/src/actions/favoriteAction.ts
@@ -91,5 +91,5 @@ registerFileAction(new FileAction({
 		return Promise.all(nodes.map(node => this.exec(node, view)))
 	},
 
-	order: 0,
+	order: -50,
 }))
diff --git a/apps/files/src/actions/renameAction.ts b/apps/files/src/actions/renameAction.ts
new file mode 100644
index 0000000000000..bd139d0e8469f
--- /dev/null
+++ b/apps/files/src/actions/renameAction.ts
@@ -0,0 +1,49 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+import { Permission, type Node } from '@nextcloud/files'
+import { translate as t } from '@nextcloud/l10n'
+import PencilSvg from '@mdi/svg/svg/pencil.svg?raw'
+
+import { emit } from '@nextcloud/event-bus'
+import { registerFileAction, FileAction } from '../services/FileAction'
+
+export const ACTION_DETAILS = 'details'
+
+registerFileAction(new FileAction({
+	id: 'rename',
+	displayName: () => t('files', 'Rename'),
+	iconSvgInline: () => PencilSvg,
+
+	enabled: (nodes: Node[]) => {
+		return nodes.length > 0 && nodes
+			.map(node => node.permissions)
+			.every(permission => (permission & Permission.UPDATE) !== 0)
+	},
+
+	async exec(node: Node) {
+		// Renaming is a built-in feature of the files app
+		emit('files:node:rename', node)
+		return null
+	},
+
+	order: 10,
+}))
diff --git a/apps/files/src/actions/sidebarAction.ts b/apps/files/src/actions/sidebarAction.ts
index 0ef7865259e7b..0cdd74b3523b2 100644
--- a/apps/files/src/actions/sidebarAction.ts
+++ b/apps/files/src/actions/sidebarAction.ts
@@ -50,5 +50,5 @@ registerFileAction(new FileAction({
 	},
 
 	default: true,
-	order: -50,
+	order: 0,
 }))
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 7c38e1f804580..6f4c4535798ce 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -33,38 +33,63 @@
 
 		<!-- Link to file -->
 		<td class="files-list__row-name">
-			<a ref="name" v-bind="linkTo" @click="execDefaultAction">
-				<!-- Icon or preview -->
-				<span class="files-list__row-icon">
-					<FolderIcon v-if="source.type === 'folder'" />
-
-					<!-- Decorative image, should not be aria documented -->
-					<span v-else-if="previewUrl && !backgroundFailed"
-						ref="previewImg"
-						class="files-list__row-icon-preview"
-						:style="{ backgroundImage }" />
-
-					<span v-else-if="mimeIconUrl"
-						class="files-list__row-icon-preview files-list__row-icon-preview--mime"
-						:style="{ backgroundImage: mimeIconUrl }" />
-
-					<FileIcon v-else />
-
-					<!-- Favorite icon -->
-					<span v-if="isFavorite"
-						class="files-list__row-icon-favorite"
-						:aria-label="t('files', 'Favorite')">
-						<StarIcon aria-hidden="true" :size="20" />
-					</span>
+			<!-- Icon or preview -->
+			<span class="files-list__row-icon" @click="execDefaultAction">
+				<FolderIcon v-if="source.type === 'folder'" />
+
+				<!-- Decorative image, should not be aria documented -->
+				<span v-else-if="previewUrl && !backgroundFailed"
+					ref="previewImg"
+					class="files-list__row-icon-preview"
+					:style="{ backgroundImage }" />
+
+				<span v-else-if="mimeIconUrl"
+					class="files-list__row-icon-preview files-list__row-icon-preview--mime"
+					:style="{ backgroundImage: mimeIconUrl }" />
+
+				<FileIcon v-else />
+
+				<!-- Favorite icon -->
+				<span v-if="isFavorite"
+					class="files-list__row-icon-favorite"
+					:aria-label="t('files', 'Favorite')">
+					<StarIcon aria-hidden="true" :size="20" />
 				</span>
-
+			</span>
+
+			<!-- Rename input -->
+			<form v-show="isRenaming"
+				v-on-click-outside="stopRenaming"
+				:aria-hidden="!isRenaming"
+				:aria-label="t('files', 'Rename file')"
+				class="files-list__row-rename"
+				@submit.prevent.stop="onRename">
+				<NcTextField ref="renameInput"
+					:aria-label="t('files', 'File name')"
+					:autofocus="true"
+					:minlength="3"
+					:required="true"
+					:value.sync="newName"
+					enterkeyhint="done"
+					@keyup="checkInputValidity"
+					@keyup.esc="stopRenaming" />
+			</form>
+
+			<a v-show="!isRenaming"
+				ref="basename"
+				:aria-hidden="isRenaming"
+				v-bind="linkTo"
+				@click="execDefaultAction">
 				<!-- File name -->
-				<span class="files-list__row-name-text">{{ displayName }}</span>
+				<span class="files-list__row-name-text">
+					<!-- Keep the displayName stuck to the extension to avoid whitespace rendering issues-->
+					{{ displayName }}<span class="files-list__row-name-ext" v-text="source.extension" />
+				</span>
 			</a>
 		</td>
 
 		<!-- Actions -->
-		<td :class="`files-list__row-actions-${uniqueId}`" class="files-list__row-actions">
+		<td v-show="!isRenamingSmallScreen" :class="`files-list__row-actions-${uniqueId}`" class="files-list__row-actions">
 			<!-- Inline actions -->
 			<!-- TODO: implement CustomElementRender -->
 
@@ -81,6 +106,7 @@
 				<NcActionButton v-for="action in enabledMenuActions"
 					:key="action.id"
 					:class="'files-list__row-action-' + action.id"
+					:close-after-click="true"
 					@click="onActionClick(action)">
 					<template #icon>
 						<NcLoadingIcon v-if="loading === action.id" :size="18" />
@@ -115,11 +141,13 @@
 
 <script lang='ts'>
 import { debounce } from 'debounce'
+import { emit, subscribe } from '@nextcloud/event-bus'
 import { formatFileSize } from '@nextcloud/files'
 import { Fragment } from 'vue-frag'
-import { join } from 'path'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
+import { vOnClickOutside } from '@vueuse/components'
+import axios from '@nextcloud/axios'
 import CancelablePromise from 'cancelable-promise'
 import FileIcon from 'vue-material-design-icons/File.vue'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
@@ -127,6 +155,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import Vue from 'vue'
 
@@ -139,6 +168,7 @@ import { useFilesStore } from '../store/files.ts'
 import { useKeyboardStore } from '../store/keyboard.ts'
 import { useSelectionStore } from '../store/selection.ts'
 import { useUserConfigStore } from '../store/userconfig.ts'
+import { useRenamingStore } from '../store/renaming.ts'
 import CustomElementRender from './CustomElementRender.vue'
 import CustomSvgIconRender from './CustomSvgIconRender.vue'
 import logger from '../logger.js'
@@ -146,6 +176,8 @@ import logger from '../logger.js'
 // The registered actions list
 const actions = getFileActions()
 
+Vue.directive('onClickOutside', vOnClickOutside)
+
 export default Vue.extend({
 	name: 'FileEntry',
 
@@ -159,6 +191,7 @@ export default Vue.extend({
 		NcActions,
 		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
+		NcTextField,
 		StarIcon,
 	},
 
@@ -193,12 +226,14 @@ export default Vue.extend({
 		const actionsMenuStore = useActionsMenuStore()
 		const filesStore = useFilesStore()
 		const keyboardStore = useKeyboardStore()
+		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
 		const userConfigStore = useUserConfigStore()
 		return {
 			actionsMenuStore,
 			filesStore,
 			keyboardStore,
+			renamingStore,
 			selectionStore,
 			userConfigStore,
 		}
@@ -237,8 +272,12 @@ export default Vue.extend({
 			return this.source?.fileid?.toString?.()
 		},
 		displayName() {
-			return this.source.attributes.displayName
-				|| this.source.basename
+			const ext = (this.source.extension || '')
+			const name = (this.source.attributes.displayName
+				|| this.source.basename)
+
+			// Strip extension from name if defined
+			return !ext ? name : name.slice(0, 0 - ext.length)
 		},
 
 		size() {
@@ -363,6 +402,21 @@ export default Vue.extend({
 		isFavorite() {
 			return this.source.attributes.favorite === 1
 		},
+
+		isRenaming() {
+			return this.renamingStore.renamingNode === this.source
+		},
+		isRenamingSmallScreen() {
+			return this.isRenaming && this.filesListWidth < 512
+		},
+		newName: {
+			get() {
+				return this.renamingStore.newName
+			},
+			set(newName) {
+				this.renamingStore.newName = newName
+			},
+		},
 	},
 
 	watch: {
@@ -385,10 +439,28 @@ export default Vue.extend({
 		 * When the source changes, reset the preview
 		 * and fetch the new one.
 		 */
-		previewUrl() {
-			this.clearImg()
+		source() {
+			this.resetState()
 			this.debounceIfNotCached()
 		},
+
+		/**
+		 * If renaming starts, select the file name
+		 * in the input, without the extension.
+		 */
+		isRenaming() {
+			this.$nextTick(() => {
+				const extLength = (this.source.extension || '').length
+				const length = this.source.basename.length - extLength
+				const input = this.$refs.renameInput?.$refs?.inputField?.$refs?.input
+				if (!input) {
+					logger.error('Could not find the rename input')
+					return
+				}
+				input.setSelectionRange(0, length)
+				input.focus()
+			})
+		},
 	},
 
 	/**
@@ -581,6 +653,114 @@ export default Vue.extend({
 			event.stopPropagation()
 		},
 
+		checkInputValidity() {
+			try {
+				const newName = this.newName.trim?.() || ''
+				this.isFileNameValid(newName)
+				this.$refs.renameInput.$refs.input.setCustomValidity('')
+				this.$refs.renameInput.$refs.input.title = ''
+			} catch (e) {
+				this.$refs.renameInput.$refs.input.setCustomValidity(e.message)
+				this.$refs.renameInput.$refs.input.title = e.message
+			} finally {
+				this.$refs.renameInput.$refs.input.reportValidity()
+			}
+		},
+		isFileNameValid(name) {
+			const trimmedName = name.trim()
+			if (trimmedName === '.' || trimmedName === '..') {
+				throw new Error(this.t('files', '"{name}" is an invalid file name.', { name }))
+			} else if (trimmedName.length === 0) {
+				throw new Error(this.t('files', 'File name cannot be empty.'))
+			} else if (trimmedName.indexOf('/') !== -1) {
+				throw new Error(this.t('files', '"/" is not allowed inside a file name.'))
+			} else if (trimmedName.match(OC.config.blacklist_files_regex)) {
+				throw new Error(this.t('files', '"{name}" is not an allowed filetype', { name }))
+			} else if (this.checkIfNodeExists(name)) {
+				throw new Error(this.t('files', '{newName} already exists', { newName: name }))
+			}
+
+			return true
+		},
+		checkIfNodeExists(name) {
+			return this.nodes.find(node => node.basename === name && node !== this.source)
+		},
+
+		stopRenaming(event) {
+			if (!this.isRenaming) {
+				return
+			}
+
+			// Reset the renaming store
+			this.renamingStore.$reset()
+		},
+
+		// Rename and move the file
+		async onRename() {
+			const oldName = this.source.basename
+			const oldSource = this.source.source
+			const newName = this.newName.trim?.() || ''
+			if (newName === '') {
+				showError(this.t('files', 'Name cannot be empty'))
+				return
+			}
+
+			if (oldName === newName) {
+				this.stopRenaming()
+				return
+			}
+
+			// Checking if already exists
+			if (this.checkIfNodeExists(newName)) {
+				showError(this.t('files', 'Another entry with the same name already exists'))
+				return
+			}
+
+			// Set loading state
+			this.loading = 'renaming'
+			Vue.set(this.source, '_loading', true)
+
+			// Update node
+			this.source.rename(newName)
+
+			try {
+				await axios({
+					method: 'MOVE',
+					url: oldSource,
+					headers: {
+						Destination: encodeURI(this.source.source),
+					},
+				})
+
+				// Success 🎉
+				emit('files:node:updated', this.source)
+				showSuccess(this.t('files', 'Renamed "{oldName}" to "{newName}"', { oldName, newName }))
+				this.stopRenaming()
+				this.$nextTick(() => {
+					this.$refs.basename.focus()
+				})
+			} catch (error) {
+				logger.error('Error while renaming file', { error })
+				this.source.rename(oldName)
+				this.$refs.renameInput.focus()
+
+				// TODO: 409 means current folder does not exist, redirect ?
+				if (error?.response?.status === 404) {
+					showError(this.t('files', 'Could not rename "{oldName}", it does not exist any more', { oldName }))
+					return
+				} else if (error?.response?.status === 412) {
+					showError(this.t('files', 'The name "{newName}"" is already used in the folder "{dir}". Please choose a different name.', { newName, dir: this.dir }))
+					return
+				}
+
+				// Unknown error
+				showError(this.t('files', 'Could not rename "{oldName}"', { oldName }))
+			} finally {
+				this.loading = false
+				Vue.set(this.source, '_loading', false)
+			}
+		},
+
 		t: translate,
 		formatFileSize,
 	},
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 866fc6da00dc7..4ab34dba0e2fb 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -232,6 +232,7 @@ export default Vue.extend({
 			}
 		}
 
+		// Entry preview or mime icon
 		.files-list__row-icon {
 			position: relative;
 			display: flex;
@@ -246,13 +247,18 @@ export default Vue.extend({
 			margin-right: var(--checkbox-padding);
 			color: var(--color-primary-element);
 
+			// Icon is also clickable
+			* {
+				cursor: pointer;
+			}
+
 			& > span {
 				justify-content: flex-start;
-			}
 
-			&> span:not(.files-list__row-icon-favorite) svg {
-				width: var(--icon-preview-size);
-				height: var(--icon-preview-size);
+				&:not(.files-list__row-icon-favorite) svg {
+					width: var(--icon-preview-size);
+					height: var(--icon-preview-size);
+				}
 			}
 
 			&-preview {
@@ -274,6 +280,7 @@ export default Vue.extend({
 			}
 		}
 
+		// Entry link
 		.files-list__row-name {
 			// Prevent link from overflowing
 			overflow: hidden;
@@ -286,6 +293,8 @@ export default Vue.extend({
 				// Fill cell height and width
 				width: 100%;
 				height: 100%;
+				// Necessary for flex grow to work
+				min-width: 0;
 
 				// Keyboard indicator a11y
 				&:focus .files-list__row-name-text,
@@ -300,6 +309,29 @@ export default Vue.extend({
 				padding: 5px 10px;
 				margin-left: -10px;
 			}
+
+			.files-list__row-name-ext {
+				color: var(--color-text-maxcontrast);
+			}
+		}
+
+		// Rename form
+		.files-list__row-rename {
+			width: 100%;
+			max-width: 600px;
+			input {
+				width: 100%;
+				// Align with text, 0 - padding - border
+				margin-left: -8px;
+				padding: 2px 6px;
+				border-width: 2px;
+
+				&:invalid {
+					// Show red border on invalid input
+					border-color: var(--color-error);
+					color: red;
+				}
+			}
 		}
 
 		.files-list__row-actions {
diff --git a/apps/files/src/main.ts b/apps/files/src/main.ts
index 7321d80c5fee3..f442c0d775a46 100644
--- a/apps/files/src/main.ts
+++ b/apps/files/src/main.ts
@@ -6,6 +6,7 @@ import './actions/downloadAction'
 import './actions/editLocallyAction'
 import './actions/favoriteAction'
 import './actions/openFolderAction'
+import './actions/renameAction'
 import './actions/sidebarAction'
 
 import Vue from 'vue'
diff --git a/apps/files/src/store/renaming.ts b/apps/files/src/store/renaming.ts
new file mode 100644
index 0000000000000..6754d577607ed
--- /dev/null
+++ b/apps/files/src/store/renaming.ts
@@ -0,0 +1,48 @@
+/**
+ * @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+/* eslint-disable */
+import { defineStore } from 'pinia'
+import { subscribe } from '@nextcloud/event-bus'
+import type { Node } from '@nextcloud/files'
+import type { RenamingStore } from '../types'
+
+export const useRenamingStore = function() {
+	const store = defineStore('renaming', {
+		state: () => ({
+			renamingNode: undefined,
+			newName: '',
+		} as RenamingStore),
+	})
+
+	const renamingStore = store(...arguments)
+
+	// Make sure we only register the listeners once
+	if (!renamingStore._initialized) {
+		subscribe('files:node:rename', function(node: Node) {
+			renamingStore.renamingNode = node
+			renamingStore.newName = node.basename
+		})
+		renamingStore._initialized = true
+	}
+
+	return renamingStore
+}
diff --git a/apps/files/src/types.ts b/apps/files/src/types.ts
index c04a953882769..c4f2afc3a65d2 100644
--- a/apps/files/src/types.ts
+++ b/apps/files/src/types.ts
@@ -96,3 +96,9 @@ export interface ViewConfigs {
 export interface ViewConfigStore {
 	viewConfig: ViewConfigs
 }
+
+// Renaming store
+export interface RenamingStore {
+	renamingNode?: Node
+	newName: string
+}
diff --git a/package-lock.json b/package-lock.json
index 5c65c20392d0f..ad9236fdf95c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@nextcloud/vue": "^7.10.0",
         "@nextcloud/vue-dashboard": "^2.0.1",
         "@skjnldsv/sanitize-svg": "^1.0.2",
+        "@vueuse/components": "^10.1.0",
         "autosize": "^6.0.1",
         "backbone": "^1.4.1",
         "blueimp-md5": "^2.19.0",
@@ -4230,6 +4231,124 @@
         "npm": "^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/components": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
+      "integrity": "sha512-UJ8PjQ4SGb2rsVIy9vhEc6aCu+3+2cc+xEfGNX8/M1NKIuL2Vo6c2Kc2fYFaRzWZkP8HWXu+IcwvnAzL44IEFA==",
+      "dependencies": {
+        "@vueuse/core": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/components/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/vue/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nextcloud/webpack-vue-config": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.5.0.tgz",
@@ -5892,13 +6011,13 @@
       }
     },
     "node_modules/@vueuse/components": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
-      "integrity": "sha512-UJ8PjQ4SGb2rsVIy9vhEc6aCu+3+2cc+xEfGNX8/M1NKIuL2Vo6c2Kc2fYFaRzWZkP8HWXu+IcwvnAzL44IEFA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.1.0.tgz",
+      "integrity": "sha512-U3c5tPUAxfwWoBSpFbCNFMEM8/jSZ0+5M1n9YWcahyb+uRNo4UmsofX/Hzs6K56PSm0g+uuhZVwSnMq8ttD8Lw==",
       "dependencies": {
-        "@vueuse/core": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
+        "@vueuse/core": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
       }
     },
     "node_modules/@vueuse/components/node_modules/vue-demi": {
@@ -5927,14 +6046,14 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
+        "@vueuse/metadata": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -5966,19 +6085,19 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
+      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.0.tgz",
+      "integrity": "sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==",
       "dependencies": {
-        "vue-demi": "*"
+        "vue-demi": ">=0.14.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -29146,6 +29265,64 @@
             "axios": "^0.27.2",
             "tslib": "^2.4.1"
           }
+        },
+        "@vueuse/components": {
+          "version": "9.13.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
+          "integrity": "sha512-UJ8PjQ4SGb2rsVIy9vhEc6aCu+3+2cc+xEfGNX8/M1NKIuL2Vo6c2Kc2fYFaRzWZkP8HWXu+IcwvnAzL44IEFA==",
+          "requires": {
+            "@vueuse/core": "9.13.0",
+            "@vueuse/shared": "9.13.0",
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.0",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+              "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/core": {
+          "version": "9.13.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+          "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.16",
+            "@vueuse/metadata": "9.13.0",
+            "@vueuse/shared": "9.13.0",
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.0",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+              "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "9.13.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+          "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+        },
+        "@vueuse/shared": {
+          "version": "9.13.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+          "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+          "requires": {
+            "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.0",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+              "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+              "requires": {}
+            }
+          }
         }
       }
     },
@@ -30695,13 +30872,13 @@
       }
     },
     "@vueuse/components": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.13.0.tgz",
-      "integrity": "sha512-UJ8PjQ4SGb2rsVIy9vhEc6aCu+3+2cc+xEfGNX8/M1NKIuL2Vo6c2Kc2fYFaRzWZkP8HWXu+IcwvnAzL44IEFA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.1.0.tgz",
+      "integrity": "sha512-U3c5tPUAxfwWoBSpFbCNFMEM8/jSZ0+5M1n9YWcahyb+uRNo4UmsofX/Hzs6K56PSm0g+uuhZVwSnMq8ttD8Lw==",
       "requires": {
-        "@vueuse/core": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
+        "@vueuse/core": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
       },
       "dependencies": {
         "vue-demi": {
@@ -30713,14 +30890,14 @@
       }
     },
     "@vueuse/core": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
       "requires": {
         "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "9.13.0",
-        "@vueuse/shared": "9.13.0",
-        "vue-demi": "*"
+        "@vueuse/metadata": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
       },
       "dependencies": {
         "vue-demi": {
@@ -30732,16 +30909,16 @@
       }
     },
     "@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
+      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg=="
     },
     "@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.0.tgz",
+      "integrity": "sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==",
       "requires": {
-        "vue-demi": "*"
+        "vue-demi": ">=0.14.0"
       },
       "dependencies": {
         "vue-demi": {
diff --git a/package.json b/package.json
index 9f41a5b3d1e10..c38b37237d9ce 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@nextcloud/vue": "^7.10.0",
     "@nextcloud/vue-dashboard": "^2.0.1",
     "@skjnldsv/sanitize-svg": "^1.0.2",
+    "@vueuse/components": "^10.1.0",
     "autosize": "^6.0.1",
     "backbone": "^1.4.1",
     "blueimp-md5": "^2.19.0",