diff --git a/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue b/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue
deleted file mode 100644
index bfdea0c6a1f7d..0000000000000
--- a/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--
- - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- - SPDX-License-Identifier: AGPL-3.0-or-later
- -->
-
-<template>
-	<section class="fdow-section">
-		<NcSelect
-			:aria-label-listbox="t('settings', 'Day to use as the first day of week')"
-			class="fdow-section__day-select"
-			:clearable="false"
-			:input-id="inputId"
-			:input-label="t('settings', 'First day of week')"
-			label="label"
-			:options="dayOptions"
-			:model-value="valueOption"
-			@option:selected="updateFirstDayOfWeek" />
-	</section>
-</template>
-
-<script lang="ts">
-import { loadState } from '@nextcloud/initial-state'
-import { getDayNames } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
-import NcSelect from '@nextcloud/vue/components/NcSelect'
-import {
-	ACCOUNT_SETTING_PROPERTY_ENUM,
-} from '../../constants/AccountPropertyConstants.ts'
-import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../utils/handlers.ts'
-
-interface DayOption {
-	value: number
-	label: string
-}
-
-const { firstDayOfWeek } = loadState<{ firstDayOfWeek?: string }>(
-	'settings',
-	'personalInfoParameters',
-	{},
-)
-
-export default {
-	name: 'FirstDayOfWeekSection',
-	components: {
-		NcSelect,
-	},
-
-	data() {
-		let firstDay = -1
-		if (firstDayOfWeek) {
-			firstDay = parseInt(firstDayOfWeek)
-		}
-
-		return {
-			firstDay,
-		}
-	},
-
-	computed: {
-		inputId(): string {
-			return 'account-property-fdow'
-		},
-
-		dayOptions(): DayOption[] {
-			const options = [{
-				value: -1,
-				label: t('settings', 'Derived from your locale ({weekDayName})', {
-					// use the locale's default first day (not the user's saved override)
-					weekDayName: getDayNames()[moment.localeData().firstDayOfWeek()],
-				}),
-			}]
-			for (const [index, dayName] of getDayNames().entries()) {
-				options.push({ value: index, label: dayName })
-			}
-			return options
-		},
-
-		valueOption(): DayOption | undefined {
-			return this.dayOptions.find((option) => option.value === this.firstDay)
-		},
-	},
-
-	methods: {
-		async updateFirstDayOfWeek(option: DayOption): Promise<void> {
-			try {
-				const responseData = await savePrimaryAccountProperty(
-					ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK,
-					option.value.toString(),
-				)
-				this.handleResponse({
-					value: option.value,
-					status: responseData.ocs?.meta?.status,
-				})
-				window.location.reload()
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update first day of week'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ value, status, errorMessage, error }): void {
-			if (status === 'ok') {
-				this.firstDay = value
-			} else {
-				this.$emit('update:value', this.firstDay)
-				handleError(error, errorMessage)
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.fdow-section {
-	padding: 6px 0;
-
-	&__day-select {
-		width: 100%;
-	}
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSectionEntry.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSectionEntry.vue
deleted file mode 100644
index 27a3b370224dc..0000000000000
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSectionEntry.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="language">
-		<NcSelect
-			:aria-label-listbox="t('settings', 'Languages')"
-			class="language__select"
-			:clearable="false"
-			:input-id="inputId"
-			label="name"
-			label-outside
-			:options="allLanguages"
-			:model-value="language"
-			@option:selected="onLanguageChange" />
-
-		<NcFormBoxButton
-			:label="t('settings', 'Help translate')"
-			href="https://explore.transifex.com/nextcloud/"
-			target="_blank">
-			<template #icon>
-				<OpenInNew :size="20" />
-			</template>
-		</NcFormBoxButton>
-	</div>
-</template>
-
-<script>
-import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
-import NcSelect from '@nextcloud/vue/components/NcSelect'
-import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../../utils/handlers.ts'
-import { validateLanguage } from '../../../utils/validate.js'
-
-export default {
-	name: 'LanguageSectionEntry',
-
-	components: {
-		NcFormBoxButton,
-		NcSelect,
-		OpenInNew,
-	},
-
-	props: {
-		inputId: {
-			type: String,
-			default: null,
-		},
-
-		commonLanguages: {
-			type: Array,
-			required: true,
-		},
-
-		otherLanguages: {
-			type: Array,
-			required: true,
-		},
-
-		language: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			initialLanguage: this.language,
-		}
-	},
-
-	computed: {
-		/**
-		 * All available languages, sorted like: current, common, other
-		 */
-		allLanguages() {
-			const common = this.commonLanguages.filter((l) => l.code !== this.language.code)
-			const other = this.otherLanguages.filter((l) => l.code !== this.language.code)
-			return [this.language, ...common, ...other]
-		},
-	},
-
-	methods: {
-		async onLanguageChange(language) {
-			this.$emit('update:language', language)
-
-			if (validateLanguage(language)) {
-				await this.updateLanguage(language)
-			}
-		},
-
-		async updateLanguage(language) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE, language.code)
-				this.handleResponse({
-					language,
-					status: responseData.ocs?.meta?.status,
-				})
-				window.location.reload()
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update language'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ language, status, errorMessage, error }) {
-			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialLanguage = language
-			} else {
-				handleError(error, errorMessage)
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.language {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue b/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
deleted file mode 100644
index 00a6cdec23e2f..0000000000000
--- a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="locale">
-		<p class="locale__example">
-			{{ t('settings', 'Example: {example}', { example: `${example.date} ${example.time}` }) }}
-		</p>
-
-		<NcSelect
-			:aria-label-listbox="t('settings', 'Locales')"
-			class="locale__select"
-			:clearable="false"
-			:input-id="inputId"
-			label="name"
-			label-outside
-			:options="allLocales"
-			:model-value="locale"
-			@option:selected="updateLocale" />
-	</div>
-</template>
-
-<script>
-import moment from '@nextcloud/moment'
-import NcSelect from '@nextcloud/vue/components/NcSelect'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../../utils/handlers.ts'
-
-export default {
-	name: 'LocaleSectionEntry',
-
-	components: {
-		NcSelect,
-	},
-
-	props: {
-		inputId: {
-			type: String,
-			default: null,
-		},
-
-		locale: {
-			type: Object,
-			required: true,
-		},
-
-		localesForLanguage: {
-			type: Array,
-			required: true,
-		},
-
-		otherLocales: {
-			type: Array,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			initialLocale: this.locale,
-			intervalId: 0,
-			example: {
-				date: moment().format('L'),
-				time: moment().format('LTS'),
-			},
-		}
-	},
-
-	computed: {
-		/**
-		 * All available locale, sorted like: current, common, other
-		 */
-		allLocales() {
-			const common = this.localesForLanguage.filter((l) => l.code !== this.locale.code)
-			const other = this.otherLocales.filter((l) => l.code !== this.locale.code)
-			return [this.locale, ...common, ...other]
-		},
-	},
-
-	mounted() {
-		this.intervalId = window.setInterval(this.refreshExample, 1000)
-	},
-
-	beforeDestroy() {
-		window.clearInterval(this.intervalId)
-	},
-
-	methods: {
-		async updateLocale(locale) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, locale.code)
-				this.handleResponse({
-					locale,
-					status: responseData.ocs?.meta?.status,
-				})
-				window.location.reload()
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update locale'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ locale, status, errorMessage, error }) {
-			if (status === 'ok') {
-				this.initialLocale = locale
-			} else {
-				this.$emit('update:locale', this.initialLocale)
-				handleError(error, errorMessage)
-			}
-		},
-
-		refreshExample() {
-			this.example = {
-				date: moment().format('L'),
-				time: moment().format('LTS'),
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.locale {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-
-	&__example {
-		margin: 0;
-		color: var(--color-text-maxcontrast);
-	}
-}
-</style>
diff --git a/apps/settings/src/components/WebAuthn/WebAuthnAddDevice.vue b/apps/settings/src/components/WebAuthn/WebAuthnAddDevice.vue
deleted file mode 100644
index 4d22d1d6cc44e..0000000000000
--- a/apps/settings/src/components/WebAuthn/WebAuthnAddDevice.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div v-if="!isHttps && !isLocalhost">
-		{{ t('settings', 'Passwordless authentication requires a secure connection.') }}
-	</div>
-	<div v-else>
-		<NcButton
-			v-if="step === RegistrationSteps.READY"
-			variant="primary"
-			@click="start">
-			{{ t('settings', 'Add WebAuthn device') }}
-		</NcButton>
-
-		<div
-			v-else-if="step === RegistrationSteps.REGISTRATION"
-			class="new-webauthn-device">
-			<span class="icon-loading-small webauthn-loading" />
-			{{ t('settings', 'Please authorize your WebAuthn device.') }}
-		</div>
-
-		<div
-			v-else-if="step === RegistrationSteps.NAMING"
-			class="new-webauthn-device">
-			<span class="icon-loading-small webauthn-loading" />
-			<form @submit.prevent="submit">
-				<NcTextField
-					ref="nameInput"
-					v-model="name"
-					class="new-webauthn-device__name"
-					:label="t('settings', 'Device name')"
-					show-trailing-button
-					:trailing-button-label="t('settings', 'Add')"
-					trailing-button-icon="arrowEnd"
-					@trailing-button-click="submit" />
-			</form>
-		</div>
-
-		<div
-			v-else-if="step === RegistrationSteps.PERSIST"
-			class="new-webauthn-device">
-			<span class="icon-loading-small webauthn-loading" />
-			{{ t('settings', 'Adding your device …') }}
-		</div>
-
-		<div v-else>
-			Invalid registration step. This should not have happened.
-		</div>
-	</div>
-</template>
-
-<script>
-import { showError } from '@nextcloud/dialogs'
-import { confirmPassword } from '@nextcloud/password-confirmation'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
-import logger from '../../logger.ts'
-import {
-	finishRegistration,
-	startRegistration,
-} from '../../service/WebAuthnRegistrationSerice.ts'
-
-/**
- * @param {string} text The text to log
- */
-function logAndPass(text) {
-	return (data) => {
-		logger.debug(text)
-		return data
-	}
-}
-
-const RegistrationSteps = Object.freeze({
-	READY: 1,
-	REGISTRATION: 2,
-	NAMING: 3,
-	PERSIST: 4,
-})
-
-export default {
-	name: 'WebAuthnAddDevice',
-
-	components: {
-		NcButton,
-		NcTextField,
-	},
-
-	props: {
-		httpWarning: Boolean,
-		isHttps: {
-			type: Boolean,
-			default: false,
-		},
-
-		isLocalhost: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	setup() {
-		// non reactive props
-		return {
-			RegistrationSteps,
-		}
-	},
-
-	data() {
-		return {
-			name: '',
-			credential: {},
-			step: RegistrationSteps.READY,
-		}
-	},
-
-	watch: {
-		/**
-		 * Auto focus the name input when naming a device
-		 */
-		step() {
-			if (this.step === RegistrationSteps.NAMING) {
-				this.$nextTick(() => this.$refs.nameInput?.focus())
-			}
-		},
-	},
-
-	methods: {
-		/**
-		 * Start the registration process by loading the authenticator parameters
-		 * The next step is the naming of the device
-		 */
-		async start() {
-			this.step = RegistrationSteps.REGISTRATION
-			logger.debug('Starting WebAuthn registration')
-
-			try {
-				await confirmPassword()
-				this.credential = await startRegistration()
-				this.step = RegistrationSteps.NAMING
-			} catch (err) {
-				showError(err)
-				this.step = RegistrationSteps.READY
-			}
-		},
-
-		/**
-		 * Save the new device with the given name on the server
-		 */
-		submit() {
-			this.step = RegistrationSteps.PERSIST
-
-			return confirmPassword()
-				.then(logAndPass('confirmed password'))
-				.then(this.saveRegistrationData)
-				.then(logAndPass('registration data saved'))
-				.then(() => this.reset())
-				.then(logAndPass('app reset'))
-				.catch(logger.error)
-		},
-
-		async saveRegistrationData() {
-			try {
-				const device = await finishRegistration(this.name, this.credential)
-
-				logger.info('new device added', { device })
-
-				this.$emit('added', device)
-			} catch (err) {
-				logger.error('Error persisting webauthn registration', { error: err })
-				throw new Error(t('settings', 'Server error while trying to complete WebAuthn device registration'), { cause: err })
-			}
-		},
-
-		reset() {
-			this.name = ''
-			this.registrationData = {}
-			this.step = RegistrationSteps.READY
-		},
-	},
-}
-</script>
-
-<style scoped lang="scss">
-.webauthn-loading {
-	display: inline-block;
-	vertical-align: sub;
-	margin-inline: 2px;
-}
-
-.new-webauthn-device {
-	display: flex;
-	gap: 22px;
-	align-items: center;
-
-	&__name {
-		max-width: min(100vw, 400px);
-	}
-}
-</style>
diff --git a/apps/settings/src/main-language-locale.js b/apps/settings/src/main-language-locale.js
deleted file mode 100644
index 0a377d5a7d3f7..0000000000000
--- a/apps/settings/src/main-language-locale.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import LanguageLocaleSettings from './views/LanguageLocaleSettings.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.mixin({
-	methods: {
-		t,
-	},
-})
-
-const app = new Vue(LanguageLocaleSettings)
-app.$mount('#language-locale-settings')
diff --git a/apps/settings/src/main-personal-password.js b/apps/settings/src/main-personal-password.js
deleted file mode 100644
index 1c835cac6b6ce..0000000000000
--- a/apps/settings/src/main-personal-password.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import { getCSPNonce } from '@nextcloud/auth'
-import { n, t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import PasswordSection from './components/PasswordSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.prototype.t = t
-Vue.prototype.n = n
-
-export default new Vue({
-	el: '#security-password',
-	name: 'main-personal-password',
-	render: (h) => h(PasswordSection),
-})
diff --git a/apps/settings/src/main-personal-webauth.js b/apps/settings/src/main-personal-webauth.js
deleted file mode 100644
index d659e188fb4d9..0000000000000
--- a/apps/settings/src/main-personal-webauth.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { loadState } from '@nextcloud/initial-state'
-import Vue from 'vue'
-import WebAuthnSection from './components/WebAuthn/WebAuthnSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.prototype.t = t
-
-const View = Vue.extend(WebAuthnSection)
-const devices = loadState('settings', 'webauthn-devices')
-new View({
-	propsData: {
-		initialDevices: devices,
-		isHttps: window.location.protocol === 'https:',
-		isLocalhost: window.location.hostname === 'localhost',
-	},
-}).$mount('#security-webauthn')
diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/sections/authtokens/components/AuthToken.spec.ts
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthToken.spec.ts
rename to apps/settings/src/sections/authtokens/components/AuthToken.spec.ts
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/sections/authtokens/components/AuthToken.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthToken.vue
rename to apps/settings/src/sections/authtokens/components/AuthToken.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue b/apps/settings/src/sections/authtokens/components/AuthTokenDeleteDialog.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenDeleteDialog.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenList.vue b/apps/settings/src/sections/authtokens/components/AuthTokenList.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenList.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenList.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts b/apps/settings/src/sections/authtokens/components/AuthTokenRevokeAll.spec.ts
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
rename to apps/settings/src/sections/authtokens/components/AuthTokenRevokeAll.spec.ts
diff --git a/apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue b/apps/settings/src/sections/authtokens/components/AuthTokenRevokeAllDialog.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenRevokeAllDialog.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenSection.vue b/apps/settings/src/sections/authtokens/components/AuthTokenSection.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenSection.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenSection.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetup.vue b/apps/settings/src/sections/authtokens/components/AuthTokenSetup.vue
similarity index 98%
rename from apps/settings/src/authtokens/components/AuthTokenSetup.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenSetup.vue
index d31775fe1c570..803cc95bcdac1 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSetup.vue
+++ b/apps/settings/src/sections/authtokens/components/AuthTokenSetup.vue
@@ -12,7 +12,7 @@ import { ref } 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'
 
 const authTokenStore = useAuthTokenStore()
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue b/apps/settings/src/sections/authtokens/components/AuthTokenSetupDialog.vue
similarity index 99%
rename from apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenSetupDialog.vue
index cf94dd46c3224..382ac3451cde2 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
+++ b/apps/settings/src/sections/authtokens/components/AuthTokenSetupDialog.vue
@@ -16,7 +16,7 @@ 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 logger from '../../../logger.ts'
 
 const props = withDefaults(defineProps<{
 	/** The newly created token, `null` while the dialog is closed */
diff --git a/apps/settings/src/authtokens/main.ts b/apps/settings/src/sections/authtokens/main.ts
similarity index 100%
rename from apps/settings/src/authtokens/main.ts
rename to apps/settings/src/sections/authtokens/main.ts
diff --git a/apps/settings/src/authtokens/store/authtoken.spec.ts b/apps/settings/src/sections/authtokens/store/authtoken.spec.ts
similarity index 100%
rename from apps/settings/src/authtokens/store/authtoken.spec.ts
rename to apps/settings/src/sections/authtokens/store/authtoken.spec.ts
diff --git a/apps/settings/src/authtokens/store/authtoken.ts b/apps/settings/src/sections/authtokens/store/authtoken.ts
similarity index 99%
rename from apps/settings/src/authtokens/store/authtoken.ts
rename to apps/settings/src/sections/authtokens/store/authtoken.ts
index 131cb60afb7e1..3afee09550db0 100644
--- a/apps/settings/src/authtokens/store/authtoken.ts
+++ b/apps/settings/src/sections/authtokens/store/authtoken.ts
@@ -9,7 +9,7 @@ import { n, 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/authtokens/utils/userAgentDetect.ts b/apps/settings/src/sections/authtokens/utils/userAgentDetect.ts
similarity index 100%
rename from apps/settings/src/authtokens/utils/userAgentDetect.ts
rename to apps/settings/src/sections/authtokens/utils/userAgentDetect.ts
diff --git a/apps/settings/src/authtokens/utils/userAgentMap.ts b/apps/settings/src/sections/authtokens/utils/userAgentMap.ts
similarity index 100%
rename from apps/settings/src/authtokens/utils/userAgentMap.ts
rename to apps/settings/src/sections/authtokens/utils/userAgentMap.ts
diff --git a/apps/settings/src/views/LanguageLocaleSettings.vue b/apps/settings/src/sections/language-locale/LanguageLocaleSettings.vue
similarity index 58%
rename from apps/settings/src/views/LanguageLocaleSettings.vue
rename to apps/settings/src/sections/language-locale/LanguageLocaleSettings.vue
index 27cee8021ecd0..e1aa6655a7d6c 100644
--- a/apps/settings/src/views/LanguageLocaleSettings.vue
+++ b/apps/settings/src/sections/language-locale/LanguageLocaleSettings.vue
@@ -6,11 +6,11 @@
 <script setup lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import FirstDayOfWeekSection from '../components/PersonalInfo/FirstDayOfWeekSection.vue'
-import LanguageSection from '../components/PersonalInfo/LanguageSection/LanguageSection.vue'
-import LocaleSection from '../components/PersonalInfo/LocaleSection/LocaleSection.vue'
-import TimezoneSection from '../components/PersonalInfo/TimezoneSection.vue'
-import SettingsColumn from '../components/SettingsColumn.vue'
+import SettingsColumn from '../../components/SettingsColumn.vue'
+import FirstDayOfWeekSection from './components/FirstDayOfWeekSection.vue'
+import LanguageSection from './components/LanguageSection.vue'
+import LocaleSection from './components/LocaleSection.vue'
+import TimezoneSection from './components/TimezoneSection.vue'
 </script>
 
 <template>
diff --git a/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.spec.ts b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.spec.ts
new file mode 100644
index 0000000000000..afd2136bfccdb
--- /dev/null
+++ b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.spec.ts
@@ -0,0 +1,74 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type * as L10n from '@nextcloud/l10n'
+
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const l10n = vi.hoisted(() => ({
+	getCanonicalLocale: vi.fn(() => 'en-US'),
+	getFirstDay: vi.fn(() => 0),
+}))
+vi.mock('@nextcloud/l10n', async (importOriginal) => ({
+	...await importOriginal<typeof L10n>(),
+	...l10n,
+}))
+
+import { t } from '@nextcloud/l10n'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import FirstDayOfWeekSection from './FirstDayOfWeekSection.vue'
+
+function localeOptionLabel(): string {
+	const wrapper = mount(FirstDayOfWeekSection, { global: { mocks: { t } } })
+	return wrapper.findComponent(NcSelect).props('options')[0].label
+}
+
+describe('FirstDayOfWeekSection', () => {
+	afterEach(() => {
+		vi.resetAllMocks()
+	})
+
+	it.each([
+		['en-US', 'Sunday'],
+		['de-DE', 'Monday'],
+		['ar-EG', 'Saturday'],
+	])('names the first day of the %s locale', (locale, day) => {
+		l10n.getCanonicalLocale.mockReturnValue(locale)
+
+		expect(localeOptionLabel()).toBe(`Derived from your locale (${day})`)
+	})
+
+	it('reads the older weekInfo getter without getWeekInfo', () => {
+		const prototype = Intl.Locale.prototype as Intl.Locale & { getWeekInfo?: unknown }
+		const getWeekInfo = Object.getOwnPropertyDescriptor(prototype, 'getWeekInfo')!
+		delete prototype.getWeekInfo
+		l10n.getCanonicalLocale.mockReturnValue('de-DE')
+		l10n.getFirstDay.mockReturnValue(3)
+
+		try {
+			expect(localeOptionLabel()).toBe('Derived from your locale (Monday)')
+		} finally {
+			Object.defineProperty(prototype, 'getWeekInfo', getWeekInfo)
+		}
+	})
+
+	it('falls back to the first day in use without Intl week info', () => {
+		const prototype = Intl.Locale.prototype as Intl.Locale & { getWeekInfo?: unknown, weekInfo?: unknown }
+		const getWeekInfo = Object.getOwnPropertyDescriptor(prototype, 'getWeekInfo')!
+		const weekInfo = Object.getOwnPropertyDescriptor(prototype, 'weekInfo')!
+		delete prototype.getWeekInfo
+		delete prototype.weekInfo
+		l10n.getCanonicalLocale.mockReturnValue('de-DE')
+		l10n.getFirstDay.mockReturnValue(3)
+
+		try {
+			expect(localeOptionLabel()).toBe('Derived from your locale (Wednesday)')
+		} finally {
+			Object.defineProperty(prototype, 'getWeekInfo', getWeekInfo)
+			Object.defineProperty(prototype, 'weekInfo', weekInfo)
+		}
+	})
+})
diff --git a/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.vue b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.vue
new file mode 100644
index 0000000000000..8e1a1b2aa8041
--- /dev/null
+++ b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.vue
@@ -0,0 +1,96 @@
+<!--
+ - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+ -->
+
+<script setup lang="ts">
+import type { AxiosError } from '@nextcloud/axios'
+
+import { loadState } from '@nextcloud/initial-state'
+import { getCanonicalLocale, getDayNames, getFirstDay, t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import {
+	ACCOUNT_SETTING_PROPERTY_ENUM,
+} from '../../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
+
+interface WeekInfo {
+	firstDay: number
+}
+
+interface DayOption {
+	value: number
+	label: string
+}
+
+const { firstDayOfWeek } = loadState<{ firstDayOfWeek?: string }>(
+	'settings',
+	'personalInfoParameters',
+	{},
+)
+
+/**
+ * The locale's first day of week, 0 being Sunday.
+ * Without Intl week info (Firefox < 153) this is the day in use, which is wrong if the user
+ * picked another one.
+ */
+function getLocaleFirstDay(): number {
+	const locale = new Intl.Locale(getCanonicalLocale()) as Intl.Locale & { getWeekInfo?: () => WeekInfo, weekInfo?: WeekInfo }
+	// Intl counts the days from 1 (Monday) to 7 (Sunday)
+	return ((locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay ?? getFirstDay()) % 7
+}
+
+const inputId = 'account-property-fdow'
+
+const firstDay = ref(firstDayOfWeek ? parseInt(firstDayOfWeek) : -1)
+
+const dayOptions: DayOption[] = [{
+	value: -1,
+	label: t('settings', 'Derived from your locale ({weekDayName})', {
+		// use the locale's default first day (not the user's saved override)
+		weekDayName: getDayNames()[getLocaleFirstDay()],
+	}),
+}, ...getDayNames().map((dayName, index) => ({ value: index, label: dayName }))]
+
+const valueOption = computed(() => dayOptions.find((option) => option.value === firstDay.value))
+
+/**
+ * @param option The day picked in the select, the page reloads with it
+ */
+async function updateFirstDayOfWeek(option: DayOption): Promise<void> {
+	try {
+		await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK, option.value.toString())
+		firstDay.value = option.value
+		window.location.reload()
+	} catch (error) {
+		handleError(error as AxiosError, t('settings', 'Unable to update first day of week'))
+	}
+}
+</script>
+
+<template>
+	<section class="fdow-section">
+		<NcSelect
+			:aria-label-listbox="t('settings', 'Day to use as the first day of week')"
+			class="fdow-section__day-select"
+			:clearable="false"
+			:inputId="inputId"
+			:inputLabel="t('settings', 'First day of week')"
+			label="label"
+			:options="dayOptions"
+			:modelValue="valueOption"
+			@option:selected="updateFirstDayOfWeek" />
+	</section>
+</template>
+
+<style lang="scss" scoped>
+.fdow-section {
+	padding: 6px 0;
+
+	&__day-select {
+		width: 100%;
+	}
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue b/apps/settings/src/sections/language-locale/components/LanguageSection.vue
similarity index 54%
rename from apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
rename to apps/settings/src/sections/language-locale/components/LanguageSection.vue
index 1f855c99a04c4..242877ed69674 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
+++ b/apps/settings/src/sections/language-locale/components/LanguageSection.vue
@@ -3,6 +3,25 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
+
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+import LanguageSectionEntry from './LanguageSectionEntry.vue'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+
+const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState<{
+	languageMap: { activeLanguage: LanguageOption, commonLanguages: LanguageOption[], otherLanguages: LanguageOption[] }
+}>('settings', 'personalInfoParameters')
+
+const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
+
+const language = ref(activeLanguage)
+const isEditable = computed(() => Boolean(language.value))
+</script>
+
 <template>
 	<section class="language-section">
 		<h3 class="language-section__heading">
@@ -11,10 +30,10 @@
 
 		<LanguageSectionEntry
 			v-if="isEditable"
-			:input-id="inputId"
-			:common-languages="commonLanguages"
-			:other-languages="otherLanguages"
-			:language.sync="language" />
+			v-model:language="language"
+			:inputId="inputId"
+			:commonLanguages="commonLanguages"
+			:otherLanguages="otherLanguages" />
 
 		<span v-else>
 			{{ t('settings', 'No language set') }}
@@ -22,46 +41,6 @@
 	</section>
 </template>
 
-<script>
-import { loadState } from '@nextcloud/initial-state'
-import LanguageSectionEntry from './LanguageSectionEntry.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
-
-const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState('settings', 'personalInfoParameters', {})
-
-export default {
-	name: 'LanguageSection',
-
-	components: {
-		LanguageSectionEntry,
-	},
-
-	setup() {
-		// Non reactive instance properties
-		return {
-			commonLanguages,
-			otherLanguages,
-		}
-	},
-
-	data() {
-		return {
-			language: activeLanguage,
-		}
-	},
-
-	computed: {
-		inputId() {
-			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
-		},
-
-		isEditable() {
-			return Boolean(this.language)
-		},
-	},
-}
-</script>
-
 <style lang="scss" scoped>
 .language-section {
 	padding: 6px 0;
diff --git a/apps/settings/src/sections/language-locale/components/LanguageSectionEntry.vue b/apps/settings/src/sections/language-locale/components/LanguageSectionEntry.vue
new file mode 100644
index 0000000000000..7771e97f87613
--- /dev/null
+++ b/apps/settings/src/sections/language-locale/components/LanguageSectionEntry.vue
@@ -0,0 +1,90 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { AxiosError } from '@nextcloud/axios'
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
+
+import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
+import { validateLanguage } from '../../../utils/validate.js'
+
+/** The user's current language */
+const language = defineModel<LanguageOption>('language', { required: true })
+
+const props = defineProps<{
+	/** Id of the select input, for the section's label */
+	inputId?: string
+	/** Most used languages, listed first */
+	commonLanguages: LanguageOption[]
+	/** All other languages */
+	otherLanguages: LanguageOption[]
+}>()
+
+/**
+ * All available languages, sorted like: current, common, other
+ */
+const allLanguages = computed(() => {
+	const common = props.commonLanguages.filter((l) => l.code !== language.value.code)
+	const other = props.otherLanguages.filter((l) => l.code !== language.value.code)
+	return [language.value, ...common, ...other]
+})
+
+/**
+ * @param newLanguage The language picked in the select, the page reloads in it
+ */
+async function onLanguageChange(newLanguage: LanguageOption) {
+	language.value = newLanguage
+
+	if (!validateLanguage(newLanguage)) {
+		return
+	}
+
+	try {
+		await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE, newLanguage.code)
+		window.location.reload()
+	} catch (error) {
+		handleError(error as AxiosError, t('settings', 'Unable to update language'))
+	}
+}
+</script>
+
+<template>
+	<div class="language">
+		<NcSelect
+			:aria-label-listbox="t('settings', 'Languages')"
+			class="language__select"
+			:clearable="false"
+			:inputId="inputId"
+			label="name"
+			labelOutside
+			:options="allLanguages"
+			:modelValue="language"
+			@option:selected="onLanguageChange" />
+
+		<NcFormBoxButton
+			:label="t('settings', 'Help translate')"
+			href="https://explore.transifex.com/nextcloud/"
+			target="_blank">
+			<template #icon>
+				<OpenInNew :size="20" />
+			</template>
+		</NcFormBoxButton>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.language {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue b/apps/settings/src/sections/language-locale/components/LocaleSection.vue
similarity index 58%
rename from apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
rename to apps/settings/src/sections/language-locale/components/LocaleSection.vue
index af9caab1b1200..d9cbecf2a27bd 100644
--- a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
+++ b/apps/settings/src/sections/language-locale/components/LocaleSection.vue
@@ -3,6 +3,23 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
+
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import LocaleSectionEntry from './LocaleSectionEntry.vue'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+
+const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState<{
+	localeMap: { activeLocale: LanguageOption, localesForLanguage: LanguageOption[], otherLocales: LanguageOption[] }
+}>('settings', 'personalInfoParameters')
+
+const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
+
+const isEditable = Boolean(activeLocale)
+</script>
+
 <template>
 	<section class="locale-section">
 		<h3 class="locale-section__heading">
@@ -11,10 +28,10 @@
 
 		<LocaleSectionEntry
 			v-if="isEditable"
-			:input-id="inputId"
-			:locales-for-language="localesForLanguage"
-			:other-locales="otherLocales"
-			:locale.sync="locale" />
+			:locale="activeLocale"
+			:inputId="inputId"
+			:localesForLanguage="localesForLanguage"
+			:otherLocales="otherLocales" />
 
 		<span v-else>
 			{{ t('settings', 'No locale set') }}
@@ -22,40 +39,6 @@
 	</section>
 </template>
 
-<script>
-import { loadState } from '@nextcloud/initial-state'
-import LocaleSectionEntry from './LocaleSectionEntry.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
-
-const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState('settings', 'personalInfoParameters', {})
-
-export default {
-	name: 'LocaleSection',
-
-	components: {
-		LocaleSectionEntry,
-	},
-
-	data() {
-		return {
-			localesForLanguage,
-			otherLocales,
-			locale: activeLocale,
-		}
-	},
-
-	computed: {
-		inputId() {
-			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
-		},
-
-		isEditable() {
-			return Boolean(this.locale)
-		},
-	},
-}
-</script>
-
 <style lang="scss" scoped>
 .locale-section {
 	padding: 6px 0;
diff --git a/apps/settings/src/sections/language-locale/components/LocaleSectionEntry.vue b/apps/settings/src/sections/language-locale/components/LocaleSectionEntry.vue
new file mode 100644
index 0000000000000..c498033a85e06
--- /dev/null
+++ b/apps/settings/src/sections/language-locale/components/LocaleSectionEntry.vue
@@ -0,0 +1,100 @@
+<!--
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { AxiosError } from '@nextcloud/axios'
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
+
+import { getCanonicalLocale, t } from '@nextcloud/l10n'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
+
+const props = defineProps<{
+	/** Id of the select input, for the section's label */
+	inputId?: string
+	/** The user's current locale */
+	locale: LanguageOption
+	/** Locales matching the user's language, listed first */
+	localesForLanguage: LanguageOption[]
+	/** All other locales */
+	otherLocales: LanguageOption[]
+}>()
+
+const dateFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit', day: '2-digit' })
+const timeFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { hour: 'numeric', minute: '2-digit', second: '2-digit' })
+
+/**
+ * Now, in the user's locale
+ */
+function formatExample() {
+	const now = new Date()
+	return {
+		date: dateFormat.format(now),
+		time: timeFormat.format(now),
+	}
+}
+
+const example = ref(formatExample())
+useIntervalFn(() => {
+	example.value = formatExample()
+}, 1000)
+
+/**
+ * All available locale, sorted like: current, common, other
+ */
+const allLocales = computed(() => {
+	const common = props.localesForLanguage.filter((l) => l.code !== props.locale.code)
+	const other = props.otherLocales.filter((l) => l.code !== props.locale.code)
+	return [props.locale, ...common, ...other]
+})
+
+/**
+ * @param newLocale The locale to save, the page reloads with it
+ */
+async function updateLocale(newLocale: LanguageOption) {
+	try {
+		await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, newLocale.code)
+		window.location.reload()
+	} catch (error) {
+		handleError(error as AxiosError, t('settings', 'Unable to update locale'))
+	}
+}
+</script>
+
+<template>
+	<div class="locale">
+		<p class="locale__example">
+			{{ t('settings', 'Example: {example}', { example: `${example.date} ${example.time}` }) }}
+		</p>
+
+		<NcSelect
+			:aria-label-listbox="t('settings', 'Locales')"
+			class="locale__select"
+			:clearable="false"
+			:inputId="inputId"
+			label="name"
+			labelOutside
+			:options="allLocales"
+			:modelValue="locale"
+			@option:selected="updateLocale" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.locale {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+
+	&__example {
+		margin: 0;
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/TimezoneSection.vue b/apps/settings/src/sections/language-locale/components/TimezoneSection.vue
similarity index 73%
rename from apps/settings/src/components/PersonalInfo/TimezoneSection.vue
rename to apps/settings/src/sections/language-locale/components/TimezoneSection.vue
index ed1c85dcd3d17..eea0660712a71 100644
--- a/apps/settings/src/components/PersonalInfo/TimezoneSection.vue
+++ b/apps/settings/src/sections/language-locale/components/TimezoneSection.vue
@@ -5,14 +5,12 @@
 
 <script setup lang="ts">
 import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
 import { ref, watch } from 'vue'
 import NcTimezonePicker from '@nextcloud/vue/components/NcTimezonePicker'
-import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
 
 const { timezone: currentTimezone } = loadState<{ timezone: string }>('settings', 'personalInfoParameters')
 
-const inputId = 'account-property-timezone'
 const timezone = ref(currentTimezone)
 watch(timezone, () => {
 	savePrimaryAccountProperty('timezone', timezone.value)
@@ -23,9 +21,7 @@ watch(timezone, () => {
 	<section class="timezone-section">
 		<NcTimezonePicker
 			v-model="timezone"
-			class="timezone-section__picker"
-			:label="t('settings', 'Time zone')"
-			:input-id="inputId" />
+			class="timezone-section__picker" />
 	</section>
 </template>
 
diff --git a/apps/settings/src/sections/language-locale/main.ts b/apps/settings/src/sections/language-locale/main.ts
new file mode 100644
index 0000000000000..b9cff9e2f1b7e
--- /dev/null
+++ b/apps/settings/src/sections/language-locale/main.ts
@@ -0,0 +1,9 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import LanguageLocaleSettings from './LanguageLocaleSettings.vue'
+
+createApp(LanguageLocaleSettings).mount('#language-locale-settings')
diff --git a/apps/settings/src/components/PasswordSection.vue b/apps/settings/src/sections/password/PasswordSection.vue
similarity index 95%
rename from apps/settings/src/components/PasswordSection.vue
rename to apps/settings/src/sections/password/PasswordSection.vue
index 8ff9d28783cbf..466c8afb2c9ac 100644
--- a/apps/settings/src/components/PasswordSection.vue
+++ b/apps/settings/src/sections/password/PasswordSection.vue
@@ -8,9 +8,9 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcFormBox } from '@nextcloud/vue'
 import { ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
 import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 
@@ -56,7 +56,7 @@ async function changePassword() {
 
 				<NcPasswordField
 					v-model="newPass"
-					check-password-strength
+					checkPasswordStrength
 					:label="t('settings', 'New password')"
 					:maxlength="469"
 					name="newpassword"
diff --git a/apps/settings/src/sections/password/main.ts b/apps/settings/src/sections/password/main.ts
new file mode 100644
index 0000000000000..00b0cd8e2bcc2
--- /dev/null
+++ b/apps/settings/src/sections/password/main.ts
@@ -0,0 +1,9 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import PasswordSection from './PasswordSection.vue'
+
+createApp(PasswordSection).mount('#security-password')
diff --git a/apps/settings/src/sections/webauthn/components/WebAuthnAddDevice.vue b/apps/settings/src/sections/webauthn/components/WebAuthnAddDevice.vue
new file mode 100644
index 0000000000000..efeaf91651473
--- /dev/null
+++ b/apps/settings/src/sections/webauthn/components/WebAuthnAddDevice.vue
@@ -0,0 +1,175 @@
+<!--
+  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { RegistrationResponseJSON } from '@simplewebauthn/browser'
+import type { WebAuthnDevice } from '../../../service/WebAuthnRegistrationSerice.ts'
+
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { confirmPassword } from '@nextcloud/password-confirmation'
+import { nextTick, ref, useTemplateRef } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import logger from '../../../logger.ts'
+import {
+	finishRegistration,
+	startRegistration,
+} from '../../../service/WebAuthnRegistrationSerice.ts'
+
+defineProps<{
+	/** Whether the page is served over HTTPS */
+	isHttps?: boolean
+	/** Whether the page is served from localhost */
+	isLocalhost?: boolean
+}>()
+
+const emit = defineEmits<{
+	/** A device was registered on the server */
+	added: [device: WebAuthnDevice]
+}>()
+
+const RegistrationSteps = Object.freeze({
+	READY: 1,
+	REGISTRATION: 2,
+	NAMING: 3,
+	PERSIST: 4,
+})
+
+const name = ref('')
+const credential = ref<RegistrationResponseJSON>()
+const step = ref<number>(RegistrationSteps.READY)
+
+const nameInput = useTemplateRef('nameInput')
+
+/**
+ * Start the registration process by loading the authenticator parameters
+ * The next step is the naming of the device
+ */
+async function start() {
+	step.value = RegistrationSteps.REGISTRATION
+	logger.debug('Starting WebAuthn registration')
+
+	try {
+		await confirmPassword()
+		credential.value = await startRegistration()
+		step.value = RegistrationSteps.NAMING
+		await nextTick()
+		nameInput.value?.focus()
+	} catch (err) {
+		showError(String(err))
+		step.value = RegistrationSteps.READY
+	}
+}
+
+/**
+ * Save the new device with the given name on the server
+ */
+async function submit() {
+	step.value = RegistrationSteps.PERSIST
+
+	try {
+		await confirmPassword()
+		logger.debug('confirmed password')
+		await saveRegistrationData()
+		logger.debug('registration data saved')
+		reset()
+		logger.debug('app reset')
+	} catch (error) {
+		logger.error(String(error), { error })
+	}
+}
+
+/**
+ * Finish the registration on the server and add the new device to the list
+ */
+async function saveRegistrationData() {
+	try {
+		const device = await finishRegistration(name.value, credential.value!)
+
+		logger.info('new device added', { device })
+
+		emit('added', device)
+	} catch (err) {
+		logger.error('Error persisting webauthn registration', { error: err })
+		throw new Error(t('settings', 'Server error while trying to complete WebAuthn device registration'), { cause: err })
+	}
+}
+
+/**
+ * Back to the start, ready for the next device
+ */
+function reset() {
+	name.value = ''
+	step.value = RegistrationSteps.READY
+}
+</script>
+
+<template>
+	<div v-if="!isHttps && !isLocalhost">
+		{{ t('settings', 'Passwordless authentication requires a secure connection.') }}
+	</div>
+	<div v-else>
+		<NcButton
+			v-if="step === RegistrationSteps.READY"
+			variant="primary"
+			@click="start">
+			{{ t('settings', 'Add WebAuthn device') }}
+		</NcButton>
+
+		<div
+			v-else-if="step === RegistrationSteps.REGISTRATION"
+			class="new-webauthn-device">
+			<span class="icon-loading-small webauthn-loading" />
+			{{ t('settings', 'Please authorize your WebAuthn device.') }}
+		</div>
+
+		<div
+			v-else-if="step === RegistrationSteps.NAMING"
+			class="new-webauthn-device">
+			<span class="icon-loading-small webauthn-loading" />
+			<form @submit.prevent="submit">
+				<NcTextField
+					ref="nameInput"
+					v-model="name"
+					class="new-webauthn-device__name"
+					:label="t('settings', 'Device name')"
+					showTrailingButton
+					:trailingButtonLabel="t('settings', 'Add')"
+					trailingButtonIcon="arrowEnd"
+					@trailingButtonClick="submit" />
+			</form>
+		</div>
+
+		<div
+			v-else-if="step === RegistrationSteps.PERSIST"
+			class="new-webauthn-device">
+			<span class="icon-loading-small webauthn-loading" />
+			{{ t('settings', 'Adding your device …') }}
+		</div>
+
+		<div v-else>
+			Invalid registration step. This should not have happened.
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.webauthn-loading {
+	display: inline-block;
+	vertical-align: sub;
+	margin-inline: 2px;
+}
+
+.new-webauthn-device {
+	display: flex;
+	gap: 22px;
+	align-items: center;
+
+	&__name {
+		max-width: min(100vw, 400px);
+	}
+}
+</style>
diff --git a/apps/settings/src/components/WebAuthn/WebAuthnDevice.vue b/apps/settings/src/sections/webauthn/components/WebAuthnDevice.vue
similarity index 74%
rename from apps/settings/src/components/WebAuthn/WebAuthnDevice.vue
rename to apps/settings/src/sections/webauthn/components/WebAuthnDevice.vue
index 2c138ee38af82..32dbdba8fafed 100644
--- a/apps/settings/src/components/WebAuthn/WebAuthnDevice.vue
+++ b/apps/settings/src/sections/webauthn/components/WebAuthnDevice.vue
@@ -3,11 +3,27 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+
+defineProps<{
+	/** Name the user gave the device, if any */
+	name: string | null
+}>()
+
+defineEmits<{
+	/** The user asked to delete the device */
+	delete: []
+}>()
+</script>
+
 <template>
 	<li class="webauthn-device">
 		<span class="icon-webauthn-device" />
 		{{ name || t('settings', 'Unnamed device') }}
-		<NcActions :force-menu="true">
+		<NcActions :forceMenu="true">
 			<NcActionButton icon="icon-delete" @click="$emit('delete')">
 				{{ t('settings', 'Delete') }}
 			</NcActionButton>
@@ -15,27 +31,6 @@
 	</li>
 </template>
 
-<script>
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
-import NcActions from '@nextcloud/vue/components/NcActions'
-
-export default {
-	name: 'WebAuthnDevice',
-
-	components: {
-		NcActionButton,
-		NcActions,
-	},
-
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-	},
-}
-</script>
-
 <style scoped>
 	.webauthn-device {
 		line-height: 300%;
diff --git a/apps/settings/src/components/WebAuthn/WebAuthnSection.vue b/apps/settings/src/sections/webauthn/components/WebAuthnSection.vue
similarity index 52%
rename from apps/settings/src/components/WebAuthn/WebAuthnSection.vue
rename to apps/settings/src/sections/webauthn/components/WebAuthnSection.vue
index 1d8acc400fdf9..e876433284ce9 100644
--- a/apps/settings/src/components/WebAuthn/WebAuthnSection.vue
+++ b/apps/settings/src/sections/webauthn/components/WebAuthnSection.vue
@@ -3,8 +3,64 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+/* eslint vue/multi-word-component-names: "warn" */
+
+import type { WebAuthnDevice as Device } from '../../../service/WebAuthnRegistrationSerice.ts'
+
+import { t } from '@nextcloud/l10n'
+import { confirmPassword } from '@nextcloud/password-confirmation'
+import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
+import { computed, ref } from 'vue'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
+import WebAuthnDevice from './WebAuthnDevice.vue'
+import logger from '../../../logger.ts'
+import { removeRegistration } from '../../../service/WebAuthnRegistrationSerice.ts'
+import { naturalCollator } from '../../../utils/sorting.ts'
+
+const props = defineProps<{
+	/** Devices registered when the page loaded */
+	initialDevices: Device[]
+	/** Whether the page is served over HTTPS */
+	isHttps?: boolean
+	/** Whether the page is served from localhost */
+	isLocalhost?: boolean
+}>()
+
+// Non reactive properties
+const supportsWebauthn = browserSupportsWebAuthn()
+
+const devices = ref(props.initialDevices)
+
+const sortedDevices = computed(() => [...devices.value].sort((a, b) => naturalCollator.compare(a.name ?? '', b.name ?? '')))
+
+/**
+ * @param device The device the server just registered
+ */
+function deviceAdded(device: Device) {
+	logger.debug(`adding new device to the list ${device.id}`)
+
+	devices.value.push(device)
+}
+
+/**
+ * @param id The device to delete
+ */
+async function deleteDevice(id: number) {
+	logger.info(`deleting webauthn device ${id}`)
+
+	await confirmPassword()
+	await removeRegistration(id)
+
+	devices.value = devices.value.filter((d) => d.id !== id)
+
+	logger.info(`webauthn device ${id} removed successfully`)
+}
+</script>
+
 <template>
-	<div id="security-webauthn" class="section">
+	<div class="section">
 		<h2>{{ t('settings', 'Passwordless Authentication') }}</h2>
 		<p class="settings-hint hidden-when-empty">
 			{{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }}
@@ -32,92 +88,12 @@
 
 		<WebAuthnAddDevice
 			v-if="supportsWebauthn"
-			:is-https="isHttps"
-			:is-localhost="isLocalhost"
+			:isHttps="isHttps"
+			:isLocalhost="isLocalhost"
 			@added="deviceAdded" />
 	</div>
 </template>
 
-<script>
-/* eslint vue/multi-word-component-names: "warn" */
-
-import { confirmPassword } from '@nextcloud/password-confirmation'
-import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
-import sortBy from 'lodash/fp/sortBy.js'
-import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
-import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
-import WebAuthnDevice from './WebAuthnDevice.vue'
-import logger from '../../logger.ts'
-import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js'
-
-const sortByName = sortBy('name')
-
-export default {
-	name: 'WebAuthnSection',
-
-	components: {
-		WebAuthnAddDevice,
-		WebAuthnDevice,
-		NcNoteCard,
-	},
-
-	props: {
-		initialDevices: {
-			type: Array,
-			required: true,
-		},
-
-		isHttps: {
-			type: Boolean,
-			default: false,
-		},
-
-		isLocalhost: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	setup() {
-		// Non reactive properties
-		return {
-			supportsWebauthn: browserSupportsWebAuthn(),
-		}
-	},
-
-	data() {
-		return {
-			devices: this.initialDevices,
-		}
-	},
-
-	computed: {
-		sortedDevices() {
-			return sortByName(this.devices)
-		},
-	},
-
-	methods: {
-		deviceAdded(device) {
-			logger.debug(`adding new device to the list ${device.id}`)
-
-			this.devices.push(device)
-		},
-
-		async deleteDevice(id) {
-			logger.info(`deleting webauthn device ${id}`)
-
-			await confirmPassword()
-			await removeRegistration(id)
-
-			this.devices = this.devices.filter((d) => d.id !== id)
-
-			logger.info(`webauthn device ${id} removed successfully`)
-		},
-	},
-}
-</script>
-
 <style scoped>
 .security-webauthn__device-list {
 	margin-block: 12px 18px;
diff --git a/apps/settings/src/sections/webauthn/main.ts b/apps/settings/src/sections/webauthn/main.ts
new file mode 100644
index 0000000000000..b1117c1497482
--- /dev/null
+++ b/apps/settings/src/sections/webauthn/main.ts
@@ -0,0 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+import { createApp } from 'vue'
+import WebAuthnSection from './components/WebAuthnSection.vue'
+
+createApp(WebAuthnSection, {
+	initialDevices: loadState('settings', 'webauthn-devices'),
+	isHttps: window.location.protocol === 'https:',
+	isLocalhost: window.location.hostname === 'localhost',
+}).mount('#security-webauthn')
diff --git a/apps/settings/src/service/WebAuthnRegistrationSerice.ts b/apps/settings/src/service/WebAuthnRegistrationSerice.ts
index 6e4c0c6b9393d..a462c6243cd6b 100644
--- a/apps/settings/src/service/WebAuthnRegistrationSerice.ts
+++ b/apps/settings/src/service/WebAuthnRegistrationSerice.ts
@@ -11,6 +11,11 @@ import { generateUrl } from '@nextcloud/router'
 import { startRegistration as registerWebAuthn } from '@simplewebauthn/browser'
 import logger from '../logger.ts'
 
+export interface WebAuthnDevice {
+	id: number
+	name: string | null
+}
+
 /**
  * Start registering a new device
  *
@@ -43,7 +48,7 @@ export async function startRegistration() {
 export async function finishRegistration(name: string, data: RegistrationResponseJSON) {
 	const url = generateUrl('/settings/api/personal/webauthn/registration')
 
-	const resp = await axios.post(url, { name, data: JSON.stringify(data) })
+	const resp = await axios.post<WebAuthnDevice>(url, { name, data: JSON.stringify(data) })
 	return resp.data
 }
 
diff --git a/apps/settings/templates/settings/personal/language.locale.php b/apps/settings/templates/settings/personal/language.locale.php
index 38e3201015c50..174edaaebe328 100644
--- a/apps/settings/templates/settings/personal/language.locale.php
+++ b/apps/settings/templates/settings/personal/language.locale.php
@@ -5,6 +5,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-language-locale');
+\OCP\Util::addScript('settings', 'personal-language-locale');
+\OCP\Util::addStyle('settings', 'personal-language-locale');
 ?>
 <div id="language-locale-settings"></div>
diff --git a/apps/settings/templates/settings/personal/security/password.php b/apps/settings/templates/settings/personal/security/password.php
index 0531468913a69..96951271e1a55 100644
--- a/apps/settings/templates/settings/personal/security/password.php
+++ b/apps/settings/templates/settings/personal/security/password.php
@@ -5,7 +5,8 @@
  */
 
 if ($_['passwordChangeSupported']) {
-	\OCP\Util::addScript('settings', 'vue-settings-personal-password');
+	\OCP\Util::addScript('settings', 'personal-password');
+	\OCP\Util::addStyle('settings', 'personal-password');
 }
 ?>
 <div id="security-password"></div>
diff --git a/apps/settings/templates/settings/personal/security/webauthn.php b/apps/settings/templates/settings/personal/security/webauthn.php
index 33611b5399c25..2156af1639e68 100644
--- a/apps/settings/templates/settings/personal/security/webauthn.php
+++ b/apps/settings/templates/settings/personal/security/webauthn.php
@@ -5,8 +5,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-personal-webauthn', 'core');
+\OCP\Util::addScript('settings', 'personal-webauthn', 'core');
+\OCP\Util::addStyle('settings', 'personal-webauthn');
 
 ?>
 
-<div id="security-webauthn" class="section"></div>
+<div id="security-webauthn"></div>
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index 254f6e4c5cc0c..b9191edce234f 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -61,8 +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 and admin sharing sections are Vue 3, they are linted by the Vue 3 frontend
-			'**/apps/settings/src/authtokens/',
+			// these sections are Vue 3, they are linted by the Vue 3 frontend
+			'**/apps/settings/src/sections/',
 			'**/apps/settings/src/sharing/',
 		],
 	},
diff --git a/build/frontend-legacy/tsconfig.json b/build/frontend-legacy/tsconfig.json
index 559f5dd537ea2..5d59e20e6a56a 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", "./*.d.ts"],
-	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens", "./apps/settings/src/sharing"],
+	"exclude": ["./**/*.cy.ts", "./apps/settings/src/sections", "./apps/settings/src/sharing"],
 	"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 638f916a9ecd7..b35e1e2359fb9 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/**'],
-			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/authtokens/**', './apps/settings/src/sharing/**'],
+			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/sections/**', './apps/settings/src/sharing/**'],
 			reporter: ['lcov', 'text'],
 			reportsDirectory: resolve(import.meta.dirname, '../../coverage/legacy'),
 		},
@@ -68,8 +68,8 @@ export default defineConfig({
 		exclude: [
 			...defaultExclude,
 			...gitIgnore,
-			// the app password and admin sharing sections are Vue 3, they are tested by the Vue 3 frontend
-			'**/apps/settings/src/authtokens/**',
+			// these sections are Vue 3, they are tested by the Vue 3 frontend
+			'**/apps/settings/src/sections/**',
 			'**/apps/settings/src/sharing/**',
 		],
 		globalSetup: './__tests__/setup-global.js',
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index 2ff8c0e08226b..8978aefd7af37 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -25,9 +25,6 @@ module.exports = {
 		'vue-settings-admin-settings-presets': path.join(__dirname, 'apps/settings/src', 'main-admin-settings-presets.js'),
 		'vue-settings-nextcloud-pdf': path.join(__dirname, 'apps/settings/src', 'main-nextcloud-pdf.js'),
 		'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-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 9d2007988ece3..d5d1e6df0e916 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/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/",
-    "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/ ../../apps/settings/src/sharing/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/sections/ ../../apps/settings/src/sharing/",
+    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/sections/ ../../apps/settings/src/sharing/",
     "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 79d104f42a576..3dff94be0b598 100644
--- a/build/frontend/tsconfig.json
+++ b/build/frontend/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./apps", "./core", "../../apps/settings/src/authtokens", "../../apps/settings/src/sharing"]
+	"include": ["./apps", "./core", "../../apps/settings/src/sections", "../../apps/settings/src/sharing"]
 }
\ No newline at end of file
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index 3b00d66c763ba..8ca6403adcaa5 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -96,11 +96,14 @@ const modules = {
 		reference: resolve(import.meta.dirname, 'apps/profile/src', 'reference.js'),
 	},
 	settings: {
-		// Only the app password and the admin sharing sections are migrated to Vue 3
-		// so far, the rest of the app is still built by the Vue 2 frontend. They are
-		// referenced by path rather than through `apps/` so they resolve the Vue 3 dependencies.
+		// Only some sections are migrated to Vue 3 so far, the rest of the app
+		// is still built by the Vue 2 frontend. They are referenced by path
+		// rather than through `apps/` so they resolve the Vue 3 dependencies.
 		'admin-sharing': resolve(import.meta.dirname, '../..', 'apps/settings/src/sharing', 'main.ts'),
-		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/authtokens', 'main.ts'),
+		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/authtokens', 'main.ts'),
+		'personal-password': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/password', 'main.ts'),
+		'personal-webauthn': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/webauthn', 'main.ts'),
+		'personal-language-locale': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/language-locale', '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 3bca323f4902f..353b3b25e234c 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -46,7 +46,7 @@ export default defineConfig({
 	test: {
 		include: [
 			'{apps,core}/**/*.{test,spec}.?(c|m)[jt]s?(x)',
-			'../../apps/settings/src/authtokens/**/*.spec.ts',
+			'../../apps/settings/src/sections/**/*.spec.ts',
 			'../../apps/settings/src/sharing/**/*.spec.ts',
 		],
 		env: {
@@ -62,7 +62,7 @@ export default defineConfig({
 		coverage: {
 			include: [
 				'apps/*/src/**',
-				'../../apps/settings/src/authtokens/**',
+				'../../apps/settings/src/sections/**',
 				'../../apps/settings/src/sharing/**',
 				'core/src/**',
 			],
diff --git a/tests/playwright/e2e/settings/password.spec.ts b/tests/playwright/e2e/settings/password.spec.ts
new file mode 100644
index 0000000000000..e6ccedb7f7afa
--- /dev/null
+++ b/tests/playwright/e2e/settings/password.spec.ts
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { login } from '@nextcloud/e2e-test-server/playwright'
+import { expect, request } from '@playwright/test'
+import { test } from '../../support/fixtures/personal-settings-page.ts'
+import { getToast } from '../../support/utils/toast.ts'
+
+const newPassword = 'Another-Passw0rd-for-e2e!'
+
+test.describe('Settings: Change password', () => {
+	test.beforeEach(async ({ passwordPage }) => {
+		await passwordPage.open()
+	})
+
+	test('changes the password', async ({ page, passwordPage, user, baseURL }) => {
+		await passwordPage.changePassword(user.password, newPassword)
+
+		await expect(getToast(page, 'Saved')).toBeVisible()
+		await expect(passwordPage.currentPasswordInput()).toHaveValue('')
+		await expect(passwordPage.newPasswordInput()).toHaveValue('')
+
+		const context = await request.newContext({ baseURL })
+		await expect(login(context, user)).rejects.toThrow()
+		await login(context, { ...user, password: newPassword })
+		await context.dispose()
+	})
+
+	test('rejects a wrong current password', async ({ page, passwordPage }) => {
+		await passwordPage.changePassword('not-my-password', newPassword)
+
+		await expect(getToast(page, 'Wrong password')).toBeVisible()
+	})
+})
diff --git a/tests/playwright/support/fixtures/personal-settings-page.ts b/tests/playwright/support/fixtures/personal-settings-page.ts
index 7e8ae2509e7f1..1378b03574a19 100644
--- a/tests/playwright/support/fixtures/personal-settings-page.ts
+++ b/tests/playwright/support/fixtures/personal-settings-page.ts
@@ -6,6 +6,7 @@
 import { runOcc } from '@nextcloud/e2e-test-server/docker'
 import { DevicesSessionsSettingsPage } from '../sections/DevicesSessionsSettingsPage.ts'
 import { LanguageLocaleSettingsPage } from '../sections/LanguageLocaleSettingsPage.ts'
+import { PasswordSettingsPage } from '../sections/PasswordSettingsPage.ts'
 import { ProfileContactSettingsPage } from '../sections/ProfileContactSettingsPage.ts'
 import { test as userSessionTest } from './random-user-session.ts'
 
@@ -18,6 +19,7 @@ export const test = userSessionTest.extend<{
 	profileContactPage: ProfileContactSettingsPage
 	languageLocalePage: LanguageLocaleSettingsPage
 	devicesSessionsPage: DevicesSessionsSettingsPage
+	passwordPage: PasswordSettingsPage
 }>({
 	user: async ({ user: baseUser }, use) => {
 		await runOcc(['user:setting', baseUser.userId, 'core', 'lang', 'en'])
@@ -36,4 +38,8 @@ export const test = userSessionTest.extend<{
 	devicesSessionsPage: async ({ page }, use) => {
 		await use(new DevicesSessionsSettingsPage(page))
 	},
+
+	passwordPage: async ({ page }, use) => {
+		await use(new PasswordSettingsPage(page))
+	},
 })
diff --git a/tests/playwright/support/sections/PasswordSettingsPage.ts b/tests/playwright/support/sections/PasswordSettingsPage.ts
new file mode 100644
index 0000000000000..f119126e7e1f8
--- /dev/null
+++ b/tests/playwright/support/sections/PasswordSettingsPage.ts
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Locator, Page } from '@playwright/test'
+
+import { expect } from '@playwright/test'
+
+export class PasswordSettingsPage {
+	constructor(private readonly page: Page) {}
+
+	heading(): Locator {
+		// "Passwordless Authentication" is on the same page
+		return this.page.getByRole('heading', { name: 'Password', level: 2, exact: true })
+	}
+
+	async open(): Promise<void> {
+		await this.page.goto('settings/user/security')
+		await expect(this.heading()).toBeVisible()
+	}
+
+	currentPasswordInput(): Locator {
+		return this.page.getByLabel('Current password')
+	}
+
+	newPasswordInput(): Locator {
+		return this.page.getByLabel('New password')
+	}
+
+	async changePassword(currentPassword: string, newPassword: string): Promise<void> {
+		await this.currentPasswordInput().fill(currentPassword)
+		await this.newPasswordInput().fill(newPassword)
+		await this.page.getByRole('button', { name: 'Change password' }).click()
+	}
+}