diff --git a/apps/settings/src/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
similarity index 60%
rename from apps/settings/src/components/AuthToken.spec.ts
rename to apps/settings/src/authtokens/components/AuthToken.spec.ts
index 75b483247f66f..509712d72c4e5 100644
--- a/apps/settings/src/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -6,8 +6,10 @@
 import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { getByRole } from '@testing-library/vue'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 // AuthToken.vue reads window.OC.theme.productName at module evaluation time.
 // vi.hoisted runs before imports, so this guarantees the property is set on
@@ -26,9 +28,12 @@ vi.mock('@nextcloud/dialogs', () => ({
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AuthToken from './AuthToken.vue'
 import AuthTokenDeleteDialog from './AuthTokenDeleteDialog.vue'
+import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 import { detect } from '../utils/userAgentDetect.ts'
 
+enableAutoUnmount(afterEach)
+
 function makeToken(overrides: Partial<IToken> = {}): IToken {
 	return {
 		id: 1,
@@ -42,37 +47,42 @@ function makeToken(overrides: Partial<IToken> = {}): IToken {
 	}
 }
 
-function mountAuthToken(token: IToken) {
+function mountAuthToken(token: IToken, { stubs = {}, attachTo }: { stubs?: Record<string, object | boolean>, attachTo?: HTMLElement } = {}) {
 	return mount(AuthToken, {
-		// Vue Test Utils v1 (legacy pipeline) uses propsData; v2 also accepts it
-		propsData: { token },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcActions: true,
-			NcActionButton: true,
-			NcActionCheckbox: true,
-			NcButton: true,
-			NcDateTime: true,
-			NcIconSvgWrapper: true,
-			NcTextField: true,
+		props: { token },
+		attachTo,
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				NcActions: true,
+				NcActionButton: true,
+				NcActionCheckbox: true,
+				NcButton: true,
+				NcDateTime: true,
+				NcIconSvgWrapper: true,
+				NcTextField: true,
+				...stubs,
+			},
+			plugins: [createTestingPinia({
+				createSpy: vi.fn,
+				initialState: { 'auth-token': { tokens: [token] } },
+			})],
 		},
-		pinia: createTestingPinia({
-			createSpy: vi.fn,
-			initialState: { 'auth-token': { tokens: [token] } },
-		}),
 	})
 }
 
 function mountDeleteDialog(token: IToken, open = true) {
 	return mount(AuthTokenDeleteDialog, {
-		propsData: { token, open },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcDialog: { template: '<div><slot /></div>' },
+		props: { token, open },
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				NcDialog: { template: '<div><slot /></div>' },
+			},
 		},
 	})
 }
@@ -88,7 +98,7 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		expect(dialog.exists()).toBe(true)
@@ -102,12 +112,12 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		dialog.vm.$emit('confirm')
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(store.deleteToken).toHaveBeenCalledTimes(1)
 		expect(store.deleteToken).toHaveBeenCalledWith(token)
@@ -119,11 +129,11 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		// Dialog is v-if'd off the tree once closed
 		expect(wrapper.findComponent(AuthTokenDeleteDialog).exists()).toBe(false)
@@ -135,7 +145,7 @@ describe('AuthToken revoke flow', () => {
 		const wrapper = mountAuthToken(token)
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		expect(dialog.exists()).toBe(true)
@@ -144,6 +154,110 @@ describe('AuthToken revoke flow', () => {
 	})
 })
 
+describe('AuthToken rename focus', () => {
+	function mountRenamable(token: IToken) {
+		return mountAuthToken(token, {
+			attachTo: document.body,
+			stubs: {
+				NcActions: { template: '<div><button>Device settings</button><slot /></div>' },
+				NcTextField: { template: '<input>', methods: { select() {} } },
+			},
+		})
+	}
+
+	function actionsButton(wrapper: ReturnType<typeof mountRenamable>) {
+		return getByRole(wrapper.element, 'button', { name: 'Device settings' })
+	}
+
+	it('returns focus to the actions button after cancelling with Escape', async () => {
+		const wrapper = mountRenamable(makeToken())
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('input').trigger('keyup', { key: 'Escape' })
+		await nextTick()
+
+		expect(wrapper.find('form').exists()).toBe(false)
+		expect(actionsButton(wrapper)).toHaveFocus()
+	})
+
+	it('returns focus to the actions button after saving the new name', async () => {
+		const token = makeToken()
+		const wrapper = mountRenamable(token)
+		const store = useAuthTokenStore()
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('form').trigger('submit')
+		await nextTick()
+
+		expect(store.renameToken).toHaveBeenCalledWith(token, token.name)
+		expect(actionsButton(wrapper)).toHaveFocus()
+	})
+
+	it('returns focus to the actions button once the password confirmation closes', async () => {
+		const token = makeToken()
+		const wrapper = mountRenamable(token)
+		const store = useAuthTokenStore()
+		const dialogField = document.createElement('input')
+		document.body.appendChild(dialogField)
+		const dialog = Promise.withResolvers<void>()
+		vi.mocked(store.renameToken).mockImplementation(async () => {
+			await new Promise((resolve) => setTimeout(resolve))
+			dialogField.focus()
+			await dialog.promise
+			dialogField.remove()
+			return true
+		})
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('form').trigger('submit')
+		await vi.waitFor(() => expect(dialogField).toHaveFocus(), { interval: 1 })
+		dialog.resolve()
+
+		await vi.waitFor(() => expect(actionsButton(wrapper)).toHaveFocus(), { interval: 1 })
+	})
+})
+
+describe('AuthToken action labels', () => {
+	it('labels each action with its own text', () => {
+		const wrapper = mountAuthToken(makeToken(), {
+			stubs: {
+				NcActions: { template: '<ul><slot /></ul>' },
+				NcActionButton: false,
+				NcButton: false,
+			},
+		})
+
+		const labels = wrapper.findAll('button').map((button) => button.text())
+		expect(labels).toEqual(expect.arrayContaining(['Rename', 'Revoke', 'Wipe device']))
+	})
+})
+
+describe('AuthTokenSetupDialog QR code', () => {
+	// The credentials are shown as text, so the QR code is redundant for screen readers
+	it('hides the QR code from assistive technology', async () => {
+		const wrapper = mount(AuthTokenSetupDialog, {
+			props: { token: { token: 'app-password', loginName: 'admin', deviceToken: makeToken() } },
+			global: {
+				mocks: {
+					t: (_: string, text: string) => text,
+				},
+				stubs: {
+					NcDialog: { template: '<div><slot /></div>' },
+					NcIconSvgWrapper: true,
+				},
+			},
+		})
+
+		getByRole(wrapper.element, 'button', { name: 'Show QR code for mobile apps' }).click()
+		await nextTick()
+
+		expect(wrapper.find('canvas').element).toHaveAttribute('aria-hidden', 'true')
+	})
+})
+
 describe('AuthToken wipe flow', () => {
 	beforeEach(() => {
 		vi.clearAllMocks()
diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
similarity index 90%
rename from apps/settings/src/components/AuthToken.vue
rename to apps/settings/src/authtokens/components/AuthToken.vue
index 716ed27edb0a4..d16862370bfc3 100644
--- a/apps/settings/src/components/AuthToken.vue
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -16,9 +16,9 @@
 						ref="input"
 						v-model="newName"
 						:label="t('settings', 'Device name')"
-						:show-trailing-button="true"
-						:trailing-button-label="t('settings', 'Cancel renaming')"
-						@trailing-button-click="cancelRename"
+						:showTrailingButton="true"
+						:trailingButtonLabel="t('settings', 'Cancel renaming')"
+						@trailingButtonClick="cancelRename"
 						@keyup.esc="cancelRename" />
 					<NcButton :aria-label="t('settings', 'Save new name')" variant="tertiary" type="submit">
 						<template #icon>
@@ -33,37 +33,38 @@
 		<td>
 			<NcDateTime
 				class="auth-token__last-activity"
-				:ignore-seconds="true"
+				:ignoreSeconds="true"
 				:timestamp="tokenLastActivity" />
 		</td>
 		<td class="auth-token__actions">
 			<NcActions
 				v-if="!token.current"
+				ref="actions"
+				v-model:open="actionOpen"
 				:title="t('settings', 'Device settings')"
-				:aria-label="t('settings', 'Device settings')"
-				:open.sync="actionOpen">
+				:aria-label="t('settings', 'Device settings')">
+				<!-- TODO: add text/longtext with some description -->
 				<NcActionCheckbox
 					v-if="canChangeScope"
-					:model-value="token.scope.filesystem"
+					:modelValue="token.scope.filesystem"
 					@update:modelValue="updateFileSystemScope">
-					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Allow filesystem access') }}
 				</NcActionCheckbox>
+				<!-- TODO: add text/longtext with some description -->
 				<NcActionButton
 					v-if="token.canRename"
 					icon="icon-rename"
 					@click.stop.prevent="startRename">
-					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Rename') }}
 				</NcActionButton>
 
 				<!-- revoke & wipe -->
 				<template v-if="token.canDelete">
 					<template v-if="token.type !== TokenType.WIPING_TOKEN">
+						<!-- TODO: add text/longtext with some description -->
 						<NcActionButton
 							icon="icon-delete"
 							@click.stop.prevent="revoke">
-							<!-- TODO: add text/longtext with some description -->
 							{{ t('settings', 'Revoke') }}
 						</NcActionButton>
 						<NcActionButton
@@ -84,8 +85,8 @@
 		</td>
 		<AuthTokenDeleteDialog
 			v-if="deleteDialogOpen"
+			v-model:open="deleteDialogOpen"
 			:token="token"
-			:open.sync="deleteDialogOpen"
 			@confirm="confirmDelete" />
 	</tr>
 </template>
@@ -285,6 +286,13 @@ export default defineComponent({
 
 		cancelRename() {
 			this.renaming = false
+			this.focusActions()
+		},
+
+		async focusActions() {
+			await this.$nextTick()
+			const actions = this.$refs.actions as { $el: HTMLElement } | undefined
+			actions?.$el.querySelector('button')?.focus()
 		},
 
 		revoke() {
@@ -296,9 +304,11 @@ export default defineComponent({
 			this.authTokenStore.deleteToken(this.token)
 		},
 
-		rename() {
+		async rename() {
 			this.renaming = false
-			this.authTokenStore.renameToken(this.token, this.newName)
+			// The password confirmation holds focus until it closes, so refocus after it
+			await this.authTokenStore.renameToken(this.token, this.newName)
+			this.focusActions()
 		},
 
 		async wipe() {
diff --git a/apps/settings/src/components/AuthTokenDeleteDialog.vue b/apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenDeleteDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
diff --git a/apps/settings/src/components/AuthTokenList.vue b/apps/settings/src/authtokens/components/AuthTokenList.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenList.vue
rename to apps/settings/src/authtokens/components/AuthTokenList.vue
diff --git a/apps/settings/src/components/AuthTokenRevokeAll.spec.ts b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
similarity index 78%
rename from apps/settings/src/components/AuthTokenRevokeAll.spec.ts
rename to apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
index 29ca848275757..b6cfb70f3cbc9 100644
--- a/apps/settings/src/components/AuthTokenRevokeAll.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
@@ -7,7 +7,8 @@ import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 // AuthToken.vue, pulled in transitively, reads window.OC.theme.productName at module
 // evaluation time. vi.hoisted runs before imports, so it is set before the SFC is parsed.
@@ -15,13 +16,16 @@ vi.hoisted(() => {
 	(window as unknown as { OC: { theme: { productName: string } } }).OC.theme = { productName: 'Nextcloud' }
 })
 
+const defaultLoadState = vi.hoisted(() => (_app: string, key: string) => (key === 'app_tokens' ? [] : true))
 vi.mock('@nextcloud/initial-state', () => ({
-	loadState: vi.fn((_app: string, key: string) => (key === 'app_tokens' ? [] : true)),
+	loadState: vi.fn(defaultLoadState),
 }))
 
+import { loadState } from '@nextcloud/initial-state'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AuthTokenRevokeAllDialog from './AuthTokenRevokeAllDialog.vue'
 import AuthTokenSection from './AuthTokenSection.vue'
+import AuthTokenSetup from './AuthTokenSetup.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 
 function makeToken(overrides: Partial<IToken> = {}): IToken {
@@ -45,36 +49,41 @@ const NcDialogStub = {
 }
 
 const NcButtonStub = {
+	emits: ['click'],
 	template: '<button @click="$emit(\'click\')"><slot /></button>',
 }
 
 function mountSection(tokens: IToken[]) {
 	return mount(AuthTokenSection, {
-		mocks: {
-			t: (_: string, text: string) => text,
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				AuthTokenList: true,
+				AuthTokenSetup: true,
+				NcSettingsSection: { template: '<div><slot /></div>' },
+				NcButton: NcButtonStub,
+				NcDialog: NcDialogStub,
+			},
+			plugins: [createTestingPinia({
+				createSpy: vi.fn,
+				initialState: { 'auth-token': { tokens } },
+			})],
 		},
-		stubs: {
-			AuthTokenList: true,
-			AuthTokenSetup: true,
-			NcSettingsSection: { template: '<div><slot /></div>' },
-			NcButton: NcButtonStub,
-			NcDialog: NcDialogStub,
-		},
-		pinia: createTestingPinia({
-			createSpy: vi.fn,
-			initialState: { 'auth-token': { tokens } },
-		}),
 	})
 }
 
 function mountDialog(props: { count: number, wipePendingCount: number, open?: boolean }) {
 	return mount(AuthTokenRevokeAllDialog, {
-		propsData: { open: true, ...props },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcDialog: NcDialogStub,
+		props: { open: true, ...props },
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				NcDialog: NcDialogStub,
+			},
 		},
 	})
 }
@@ -147,7 +156,7 @@ describe('AuthTokenSection revoke-all button', () => {
 		const dialog = wrapper.findComponent(AuthTokenRevokeAllDialog)
 		dialog.vm.$emit('confirm')
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(store.deleteAllOtherTokens).toHaveBeenCalledTimes(1)
 	})
@@ -163,13 +172,30 @@ describe('AuthTokenSection revoke-all button', () => {
 
 		const dialog = wrapper.findComponent(AuthTokenRevokeAllDialog)
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(wrapper.findComponent(AuthTokenRevokeAllDialog).exists()).toBe(false)
 		expect(store.deleteAllOtherTokens).not.toHaveBeenCalled()
 	})
 })
 
+describe('AuthTokenSection create form', () => {
+	afterEach(() => {
+		vi.mocked(loadState).mockImplementation(defaultLoadState)
+	})
+
+	it('shows the create form when creating app passwords is allowed', () => {
+		const wrapper = mountSection([makeToken({ id: 1, current: true })])
+		expect(wrapper.findComponent(AuthTokenSetup).exists()).toBe(true)
+	})
+
+	it('hides the create form when creating app passwords is disabled', () => {
+		vi.mocked(loadState).mockImplementation((app: string, key: string) => (key === 'can_create_app_token' ? false : defaultLoadState(app, key)))
+		const wrapper = mountSection([makeToken({ id: 1, current: true })])
+		expect(wrapper.findComponent(AuthTokenSetup).exists()).toBe(false)
+	})
+})
+
 describe('AuthTokenRevokeAllDialog', () => {
 	it('omits the wipe note when nothing is pending a wipe', () => {
 		const wrapper = mountDialog({ count: 3, wipePendingCount: 0 })
diff --git a/apps/settings/src/components/AuthTokenRevokeAllDialog.vue b/apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenRevokeAllDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
diff --git a/apps/settings/src/components/AuthTokenSection.vue b/apps/settings/src/authtokens/components/AuthTokenSection.vue
similarity index 95%
rename from apps/settings/src/components/AuthTokenSection.vue
rename to apps/settings/src/authtokens/components/AuthTokenSection.vue
index 5731d1cc66f8b..a4abf0809b650 100644
--- a/apps/settings/src/components/AuthTokenSection.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSection.vue
@@ -19,9 +19,9 @@
 		</div>
 		<AuthTokenRevokeAllDialog
 			v-if="revokeAllDialogOpen"
+			v-model:open="revokeAllDialogOpen"
 			:count="authTokenStore.revocableCount"
-			:wipe-pending-count="authTokenStore.wipePendingCount"
-			:open.sync="revokeAllDialogOpen"
+			:wipePendingCount="authTokenStore.wipePendingCount"
 			@confirm="revokeAllOthers" />
 	</NcSettingsSection>
 </template>
diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/authtokens/components/AuthTokenSetup.vue
similarity index 98%
rename from apps/settings/src/components/AuthTokenSetup.vue
rename to apps/settings/src/authtokens/components/AuthTokenSetup.vue
index 3f50894697b4a..b111d6de6f04a 100644
--- a/apps/settings/src/components/AuthTokenSetup.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetup.vue
@@ -36,7 +36,7 @@ import { defineComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
-import logger from '../logger.ts'
+import logger from '../../logger.ts'
 import { useAuthTokenStore } from '../store/authtoken.ts'
 
 export default defineComponent({
diff --git a/apps/settings/src/components/AuthTokenSetupDialog.vue b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
similarity index 92%
rename from apps/settings/src/components/AuthTokenSetupDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
index 0b85adb0c68dc..6b74163a0eced 100644
--- a/apps/settings/src/components/AuthTokenSetupDialog.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
@@ -4,14 +4,14 @@
 -->
 <template>
 	<NcDialog
-		:open.sync="open"
+		v-model:open="open"
 		:name="t('settings', 'New app password')"
-		content-classes="token-dialog">
+		contentClasses="token-dialog">
 		<p>
 			{{ t('settings', 'Use the credentials below to configure your app or device. For security reasons this password will only be shown once.') }}
 		</p>
 		<div class="token-dialog__name">
-			<NcTextField :label="t('settings', 'Login')" :model-value="loginName" readonly />
+			<NcTextField :label="t('settings', 'Login')" :modelValue="loginName" readonly />
 			<NcButton
 				variant="tertiary"
 				:title="copyLoginNameLabel"
@@ -26,7 +26,7 @@
 			<NcTextField
 				ref="appPassword"
 				:label="t('settings', 'Password')"
-				:model-value="appPassword"
+				:modelValue="appPassword"
 				readonly />
 			<NcButton
 				variant="tertiary"
@@ -42,7 +42,12 @@
 			<NcButton v-if="!showQRCode" @click="showQRCode = true">
 				{{ t('settings', 'Show QR code for mobile apps') }}
 			</NcButton>
-			<QR v-else :value="qrUrl" />
+			<QR
+				v-else
+				:value="qrUrl"
+				:size="196"
+				:margin="4"
+				aria-hidden="true" />
 		</div>
 	</NcDialog>
 </template>
@@ -51,7 +56,6 @@
 import type { PropType } from 'vue'
 import type { ITokenResponse } from '../store/authtoken.ts'
 
-import QR from '@chenfengyuan/vue-qrcode'
 import { mdiCheck, mdiContentCopy } from '@mdi/js'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
@@ -61,7 +65,8 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import logger from '../logger.ts'
+import QR from 'qrcode.vue'
+import logger from '../../logger.ts'
 
 export default defineComponent({
 	name: 'AuthTokenSetupDialog',
@@ -81,6 +86,8 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['close'],
+
 	data() {
 		return {
 			isNameCopied: false,
diff --git a/apps/settings/src/authtokens/main.ts b/apps/settings/src/authtokens/main.ts
new file mode 100644
index 0000000000000..f7c3abbd6b5a6
--- /dev/null
+++ b/apps/settings/src/authtokens/main.ts
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import AuthTokenSection from './components/AuthTokenSection.vue'
+
+const app = createApp(AuthTokenSection)
+app.use(createPinia())
+app.mount('#security-authtokens')
diff --git a/apps/settings/src/store/authtoken.ts b/apps/settings/src/authtokens/store/authtoken.ts
similarity index 99%
rename from apps/settings/src/store/authtoken.ts
rename to apps/settings/src/authtokens/store/authtoken.ts
index 9c3040cff81ba..c90f5fa6b654d 100644
--- a/apps/settings/src/store/authtoken.ts
+++ b/apps/settings/src/authtokens/store/authtoken.ts
@@ -9,7 +9,7 @@ import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { addPasswordConfirmationInterceptors, confirmPassword, PwdConfirmationMode } from '@nextcloud/password-confirmation'
 import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
-import logger from '../logger.ts'
+import logger from '../../logger.ts'
 
 const BASE_URL = generateUrl('/settings/personal/authtokens')
 addPasswordConfirmationInterceptors(axios)
diff --git a/apps/settings/src/utils/userAgentDetect.ts b/apps/settings/src/authtokens/utils/userAgentDetect.ts
similarity index 100%
rename from apps/settings/src/utils/userAgentDetect.ts
rename to apps/settings/src/authtokens/utils/userAgentDetect.ts
diff --git a/apps/settings/src/utils/userAgentMap.ts b/apps/settings/src/authtokens/utils/userAgentMap.ts
similarity index 100%
rename from apps/settings/src/utils/userAgentMap.ts
rename to apps/settings/src/authtokens/utils/userAgentMap.ts
diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js
deleted file mode 100644
index eabad1bca6041..0000000000000
--- a/apps/settings/src/main-personal-security.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import VTooltipPlugin from 'v-tooltip'
-import Vue from 'vue'
-import AuthTokenSection from './components/AuthTokenSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-const pinia = createPinia()
-
-Vue.use(PiniaVuePlugin)
-Vue.use(VTooltipPlugin, { defaultHtml: false })
-Vue.prototype.t = t
-
-const View = Vue.extend(AuthTokenSection)
-new View({ pinia }).$mount('#security-authtokens')
diff --git a/apps/settings/templates/settings/personal/security/authtokens.php b/apps/settings/templates/settings/personal/security/authtokens.php
index e59266695bf7a..dd9b224bfefd5 100644
--- a/apps/settings/templates/settings/personal/security/authtokens.php
+++ b/apps/settings/templates/settings/personal/security/authtokens.php
@@ -5,8 +5,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-personal-security', 'core');
+\OCP\Util::addScript('settings', 'personal-security-authtokens', 'core');
+\OCP\Util::addStyle('settings', 'personal-security-authtokens');
 
 ?>
 
-<div id="security-authtokens" class="section"></div>
+<div id="security-authtokens"></div>
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index 6e696e29f04a7..3efd882d40510 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -61,6 +61,8 @@ export default defineConfig([
 			'**/vendor/', // different vendors
 			// the public share entry point is Vue 3, it is linted by the Vue 3 frontend
 			'**/apps/files_sharing/src/public/',
+			// the app password section is Vue 3, it is linted by the Vue 3 frontend
+			'**/apps/settings/src/authtokens/',
 		],
 	},
 ])
diff --git a/build/frontend-legacy/tsconfig.json b/build/frontend-legacy/tsconfig.json
index c8dcfe86c4679..d27d784380d78 100644
--- a/build/frontend-legacy/tsconfig.json
+++ b/build/frontend-legacy/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "@vue/tsconfig/tsconfig.json",
 	"include": ["./apps/**/*.ts", "./apps/**/*.vue", "./core/**/*.ts", "./core/**/*.vue", "./*.d.ts"],
-	"exclude": ["./**/*.cy.ts"],
+	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens"],
 	"compilerOptions": {
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"types": ["node", "vue", "vue-router"],
diff --git a/build/frontend-legacy/vitest.config.mts b/build/frontend-legacy/vitest.config.mts
index 35f77fb91c725..d93165ca60d90 100644
--- a/build/frontend-legacy/vitest.config.mts
+++ b/build/frontend-legacy/vitest.config.mts
@@ -57,7 +57,7 @@ export default defineConfig({
 		},
 		coverage: {
 			include: ['./apps/*/src/**', 'core/src/**'],
-			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],
+			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**', './apps/settings/src/authtokens/**'],
 			reporter: ['lcov', 'text'],
 			reportsDirectory: resolve(import.meta.dirname, '../../coverage/legacy'),
 		},
@@ -68,6 +68,8 @@ export default defineConfig({
 		exclude: [
 			...defaultExclude,
 			...gitIgnore,
+			// the app password section is Vue 3, it is tested by the Vue 3 frontend
+			'**/apps/settings/src/authtokens/**',
 		],
 		globalSetup: './__tests__/setup-global.js',
 		server: {
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index 31d03e73bc78b..e01a3e0759a31 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -47,7 +47,6 @@ module.exports = {
 		'vue-settings-profile-contact': path.join(__dirname, 'apps/settings/src', 'main-profile-contact.js'),
 		'vue-settings-language-locale': path.join(__dirname, 'apps/settings/src', 'main-language-locale.js'),
 		'vue-settings-personal-password': path.join(__dirname, 'apps/settings/src', 'main-personal-password.js'),
-		'vue-settings-personal-security': path.join(__dirname, 'apps/settings/src', 'main-personal-security.js'),
 		'vue-settings-personal-webauthn': path.join(__dirname, 'apps/settings/src', 'main-personal-webauth.js'),
 		'vue-settings-users-management': path.join(__dirname, 'apps/settings/src', 'main-users-management.ts'),
 		'declarative-settings-forms': path.join(__dirname, 'apps/settings/src', 'main-declarative-settings-forms.ts'),
diff --git a/build/frontend/package.json b/build/frontend/package.json
index 00a19f5607d93..72b06ab69c612 100644
--- a/build/frontend/package.json
+++ b/build/frontend/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "NODE_ENV=development vite build --mode development",
-    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
-    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/",
+    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage --reporter=default",
     "test:update-snapshots": "vitest run --update",
diff --git a/build/frontend/tsconfig.json b/build/frontend/tsconfig.json
index 24655181b3dbf..66b4e722e3e2f 100644
--- a/build/frontend/tsconfig.json
+++ b/build/frontend/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./apps", "./core"]
+	"include": ["./apps", "./core", "../../apps/settings/src/authtokens"]
 }
\ No newline at end of file
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index f62b207c082f3..8408a58217b41 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -78,6 +78,12 @@ const modules = {
 		main: resolve(import.meta.dirname, 'apps/profile/src', 'main.ts'),
 		reference: resolve(import.meta.dirname, 'apps/profile/src', 'reference.js'),
 	},
+	settings: {
+		// Only the app password section is migrated to Vue 3 so far, the rest
+		// of the app is still built by the Vue 2 frontend. It is referenced by path
+		// rather than through `apps/` so it resolves the Vue 3 dependencies.
+		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/authtokens', 'main.ts'),
+	},
 	sharebymail: {
 		'admin-settings': resolve(import.meta.dirname, 'apps/sharebymail/src', 'settings-admin.ts'),
 	},
diff --git a/build/frontend/vitest.config.ts b/build/frontend/vitest.config.ts
index 72e57f3d59c81..a1aee67508781 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -44,7 +44,10 @@ export default defineConfig({
 		},
 	},
 	test: {
-		include: ['apps/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+		include: [
+			'apps/**/*.{test,spec}.?(c|m)[jt]s?(x)',
+			'../../apps/settings/src/authtokens/**/*.spec.ts',
+		],
 		env: {
 			LANG: 'en_US',
 			TZ: 'UTC',
@@ -58,6 +61,7 @@ export default defineConfig({
 		coverage: {
 			include: [
 				'apps/*/src/**',
+				'../../apps/settings/src/authtokens/**',
 				/* 'core/src/**', */
 			],
 			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],
diff --git a/core/src/components/AccountMenu/AccountMenuProfileEntry.vue b/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
index 49aab5483a144..c41166e038951 100644
--- a/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
+++ b/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import type { ITokenResponse } from '../../../../apps/settings/src/store/authtoken.ts'
+import type { ITokenResponse } from '../../../../apps/settings/src/authtokens/store/authtoken.ts'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
diff --git a/package-lock.json b/package-lock.json
index 3375a7434c2d9..67f847e3d7a12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "marked": "^18.0.13",
         "p-queue": "^9.3.3",
         "pinia": "^4.0.3",
+        "qrcode.vue": "^3.11.0",
         "sortablejs": "^1.15.7",
         "vue": "^3.5.43",
         "vue-router": "^5.0.6",
@@ -12252,9 +12253,9 @@
       "license": "MIT"
     },
     "node_modules/qrcode.vue": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.10.0.tgz",
-      "integrity": "sha512-1bjeBds9hRKMszZuBuYQZor9HdJYWtb0S44HG1JofZ9uicpJpdF+TtDvqo3+2ZlH0k80WVIkmiKB4hq0/N6/rA==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.11.0.tgz",
+      "integrity": "sha512-PnaO9yqcEVsH9euUmo4Nn0JZMkNwk4u6fDUosKjDTXv2Cgv7rHZhr2D8Iq54clBvSycOESwgUE/rw/tBRBjIVg==",
       "license": "MIT",
       "peerDependencies": {
         "vue": "^3.0.0"
diff --git a/package.json b/package.json
index d703c7942e603..d0e34b2d37366 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "marked": "^18.0.13",
     "p-queue": "^9.3.3",
     "pinia": "^4.0.3",
+    "qrcode.vue": "^3.11.0",
     "sortablejs": "^1.15.7",
     "vue": "^3.5.43",
     "vue-router": "^5.0.6",