diff --git a/css/app-settings.scss b/css/app-settings.scss
index 1ace6ae945..c0026ecd0a 100644
--- a/css/app-settings.scss
+++ b/css/app-settings.scss
@@ -5,9 +5,7 @@
 
 #app-settings-modal {
 	.settings-fieldset-interior-item {
-		max-width: calc(var(--default-grid-baseline) * 68);
 		align-items: stretch;
-		padding: 5px 0;
 	}
 
 	.button-content-with-icon {
diff --git a/package.json b/package.json
index b7693ad4e2..23a626754c 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@nextcloud/notify_push": "^1.3.1",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/timezones": "^1.0.2",
-    "@nextcloud/vue": "^8.33.0",
+    "@nextcloud/vue": "^8.34.0",
     "autosize": "^6.0.1",
     "color-convert": "^3.1.2",
     "color-string": "^2.1.2",
diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index 7fdf005c56..1ee1342d4a 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -17,92 +17,71 @@
 				id="app-settings-modal"
 				class="app-settings-modal"
 				:name="t('mail', 'Calendar settings')"
+				:legacy="false"
 				:show-navigation="true"
 				:additional-trap-elements="[]"
 				:open="showSettingsModal"
 				@update:open="(val) => showSettingsModal = val">
 				<NcAppSettingsSection
 					id="settings-modal-general"
-					class="calendar-settings-modal-section"
 					:name="t('calendar', 'General')">
-					<SettingsImportSection
-						class="settings-fieldset-interior-item"
+					<SettingsTimezoneSelect
 						:is-disabled="loadingCalendars" />
-					<NcButton
-						variant="tertiary"
-						target="_blank"
-						:href="availabilitySettingsUrl">
-						<template #icon>
-							<CalendarClockIcon :size="20" decorative />
-						</template>
-						<span class="button-content-with-icon">
+					<NcFormBox>
+						<NcFormBoxButton
+							target="_blank"
+							:href="availabilitySettingsUrl">
 							{{ $t('calendar', 'Availability settings') }}
-							<OpenInNewIcon :size="20" decorative />
-						</span>
-					</NcButton>
-					<h4>{{ t('calendar', 'CalDAV') }}</h4>
-					<span>{{ t('calendar', 'Access Nextcloud calendars from other apps and devices') }}</span>
-					<NcButton
-						variant="tertiary"
-						@click.prevent.stop="copyPrimaryCalDAV">
-						<template #icon>
-							<ContentCopy :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'CalDAV URL') }}
-					</NcButton>
-					<NcButton
-						variant="tertiary"
-						@click.prevent.stop="copyAppleCalDAV">
-						<template #icon>
-							<ContentCopy :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Copy iOS/macOS CalDAV address') }}
-					</NcButton>
+						</NcFormBoxButton>
+					</NcFormBox>
+					<SettingsImportSection
+						:is-disabled="loadingCalendars" />
+					<NcFormGroup :label="t('calendar', 'CalDAV')" :description="t('calendar', 'Access Nextcloud calendars from other apps and devices')">
+						<NcFormBox>
+							<NcFormBoxCopyButton :label="t('calendar', 'CalDAV URL')" :value="primaryCalDAV" />
+							<NcFormBoxCopyButton :label="t('calendar', 'Server Address for iOS and macOS')" :value="appleCalDAV" />
+						</NcFormBox>
+					</NcFormGroup>
 				</NcAppSettingsSection>
 				<NcAppSettingsSection
-					id="app-settings-modal-view"
-					class="calendar-settings-modal-section"
+					id="settings-modal-appearance"
 					:name="t('calendar', 'Appearance')">
-					<SettingsTimezoneSelect
-						class="settings-fieldset-interior-item"
-						:is-disabled="loadingCalendars" />
-					<NcCheckboxRadioSwitch
-						class="settings-fieldset-interior-item"
-						:model-value="hasBirthdayCalendar"
-						:disabled="isBirthdayCalendarDisabled"
-						@update:model-value="toggleBirthdayEnabled">
-						{{ $t('calendar', 'Birthday calendar') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						class="settings-fieldset-interior-item"
-						:model-value="showTasks"
-						:disabled="savingTasks"
-						@update:model-value="toggleTasksEnabled">
-						{{ $t('calendar', 'Tasks in calendar') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						class="settings-fieldset-interior-item"
-						:model-value="showWeekends"
-						:disabled="savingWeekend"
-						@update:model-value="toggleWeekendsEnabled">
-						{{ $t('calendar', 'Weekends') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						class="settings-fieldset-interior-item"
-						:model-value="showWeekNumbers"
-						:disabled="savingWeekNumber"
-						@update:model-value="toggleWeekNumberEnabled">
-						{{ $t('calendar', 'Week numbers') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch
-						class="settings-fieldset-interior-item"
-						:model-value="eventLimit"
-						:disabled="savingEventLimit"
-						@update:model-value="toggleEventLimitEnabled">
-						<span class="no-wrap-label">
+					<NcFormBox>
+						<NcFormBoxSwitch
+							v-model="hasBirthdayCalendarBinding"
+							:disabled="isBirthdayCalendarDisabled"
+							@update:modelValue="toggleBirthdayEnabled">
+							{{ $t('calendar', 'Birthday calendar') }}
+						</NcFormBoxSwitch>
+						<NcFormBoxSwitch
+							v-model="showTasksBinding"
+							:disabled="savingTasks"
+							@update:modelValue="toggleTasksEnabled">
+							{{ $t('calendar', 'Tasks in calendar') }}
+						</NcFormBoxSwitch>
+						<NcFormBoxSwitch
+							v-model="showWeekendsBinding"
+							:disabled="savingWeekend"
+							@update:modelValue="toggleWeekendsEnabled">
+							{{ $t('calendar', 'Weekends') }}
+						</NcFormBoxSwitch>
+						<NcFormBoxSwitch
+							v-model="showWeekNumbersBinding"
+							:disabled="savingWeekNumber"
+							@update:modelValue="toggleWeekNumberEnabled">
+							{{ $t('calendar', 'Week numbers') }}
+						</NcFormBoxSwitch>
+					</NcFormBox>
+
+					<NcFormBox>
+						<NcFormBoxSwitch
+							v-model="eventLimitBinding"
+							:disabled="savingEventLimit"
+							@update:modelValue="toggleEventLimitEnabled">
 							{{ $t('calendar', 'Limit number of events shown in Month view') }}
-						</span>
-					</NcCheckboxRadioSwitch>
+						</NcFormBoxSwitch>
+					</NcFormBox>
+
 					<NcSelect
 						:id="slotDuration"
 						:options="slotDurationOptions"
@@ -116,47 +95,32 @@
 				</NcAppSettingsSection>
 				<NcAppSettingsSection
 					id="app-settings-modal-editing"
-					class="calendar-settings-modal-section"
 					:name="t('calendar', 'Editing')">
-					<NcCheckboxRadioSwitch
-						class="settings-fieldset-interior-item"
-						:model-value="!skipPopover"
-						:disabled="savingPopover"
-						@update:model-value="togglePopoverEnabled">
-						{{ $t('calendar', 'Simple event editor') }}<br>
-						{{ $t('calendar', '"More details" opens the detailed editor') }}
-					</NcCheckboxRadioSwitch>
-					<!-- Hidden: default calendar picker -->
-					<div v-if="false" class="settings-fieldset-interior-item">
-						<CalendarPicker
-							:value="defaultCalendar"
-							:calendars="defaultCalendarOptions"
-							:disabled="savingDefaultCalendarId"
-							:input-label="$t('calendar', 'Default calendar for incoming invitations')"
-							:clearable="false"
-							@select-calendar="changeDefaultCalendar" />
-					</div>
-					<div class="settings-fieldset-interior-item">
-						<NcSelect
-							:options="defaultReminderOptions"
-							:value="selectedDefaultReminderOption"
-							:disabled="savingDefaultReminder"
-							:clearable="false"
-							:input-label="$t('calendar', 'Default reminder')"
-							input-id="value"
-							label="label"
-							@option:selected="changeDefaultReminder" />
-					</div>
-					<div class="settings-fieldset-interior-item">
+					<NcSelect
+						:options="defaultReminderOptions"
+						:value="selectedDefaultReminderOption"
+						:disabled="savingDefaultReminder"
+						:clearable="false"
+						:input-label="$t('calendar', 'Default reminder')"
+						input-id="value"
+						label="label"
+						@option:selected="changeDefaultReminder" />
+					<NcFormBox>
+						<NcFormBoxSwitch
+							v-model="simpleEventEditorBinding"
+							:disabled="savingPopover"
+							:label="t('calendar', 'Simple event editor')"
+							@update:modelValue="togglePopoverEnabled">
+							<template #description>
+								{{ $t('calendar', '"More details" opens the detailed editor') }}
+							</template>
+						</NcFormBoxSwitch>
+					</NcFormBox>
+					<NcFormGroup :label="t('calendar', 'Files')">
 						<SettingsAttachmentsFolder />
-					</div>
-				</NcAppSettingsSection>
-				<NcAppSettingsSection
-					id="app-settings-modal-keyboard"
-					class="calendar-settings-modal-section"
-					:name="t('calendar', 'Keyboard shortcuts')">
-					<ShortcutOverview />
+					</NcFormGroup>
 				</NcAppSettingsSection>
+				<ShortcutOverview />
 			</NcAppSettingsDialog>
 		</template>
 	</NcAppNavigationItem>
@@ -165,7 +129,6 @@
 <script>
 import {
 	showError,
-	showSuccess,
 } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import {
@@ -176,16 +139,15 @@ import {
 	NcAppNavigationItem,
 	NcAppSettingsDialog,
 	NcAppSettingsSection,
-	NcButton,
-	NcCheckboxRadioSwitch,
+	NcFormBox,
+	NcFormBoxButton,
+	NcFormBoxCopyButton,
+	NcFormBoxSwitch,
+	NcFormGroup,
 	NcSelect,
 } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
-import CalendarClockIcon from 'vue-material-design-icons/CalendarClock.vue'
 import CogIcon from 'vue-material-design-icons/CogOutline.vue'
-import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
-import CalendarPicker from '../Shared/CalendarPicker.vue'
 import SettingsAttachmentsFolder from './Settings/SettingsAttachmentsFolder.vue'
 import SettingsImportSection from './Settings/SettingsImportSection.vue'
 import SettingsTimezoneSelect from './Settings/SettingsTimezoneSelect.vue'
@@ -206,8 +168,6 @@ import logger from '../../utils/logger.js'
 export default {
 	name: 'Settings',
 	components: {
-		NcButton,
-		NcCheckboxRadioSwitch,
 		NcAppNavigationItem,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
@@ -215,12 +175,13 @@ export default {
 		SettingsImportSection,
 		SettingsTimezoneSelect,
 		SettingsAttachmentsFolder,
-		ContentCopy,
-		CalendarPicker,
 		ShortcutOverview,
 		CogIcon,
-		OpenInNewIcon,
-		CalendarClockIcon,
+		NcFormBox,
+		NcFormBoxButton,
+		NcFormGroup,
+		NcFormBoxCopyButton,
+		NcFormBoxSwitch,
 	},
 
 	props: {
@@ -243,6 +204,12 @@ export default {
 			savingWeekend: false,
 			savingWeekNumber: false,
 			savingDefaultCalendar: false,
+			hasBirthdayCalendarBinding: false,
+			showTasksBinding: false,
+			showWeekendsBinding: false,
+			showWeekNumbersBinding: false,
+			eventLimitBinding: false,
+			simpleEventEditorBinding: false,
 		}
 	},
 
@@ -355,7 +322,7 @@ export default {
 		},
 
 		/**
-		 * The default calendar for incoming inivitations
+		 * The default calendarci for incoming inivitations
 		 *
 		 * @return {object|undefined} The default calendar or undefined if none is available
 		 */
@@ -372,6 +339,23 @@ export default {
 
 			return calendar
 		},
+
+		primaryCalDAV() {
+			return generateRemoteUrl('dav')
+		},
+
+		appleCalDAV() {
+			return new URL(getCurrentUserPrincipal().principalUrl, this.primaryCalDAV)
+		},
+	},
+
+	async created() {
+		this.hasBirthdayCalendarBinding = this.hasBirthdayCalendar
+		this.showTasksBinding = this.showTasks
+		this.showWeekendsBinding = this.showWeekends
+		this.showWeekNumbersBinding = this.showWeekNumbers
+		this.eventLimitBinding = this.eventLimit
+		this.simpleEventEditorBinding = !this.skipPopover
 	},
 
 	methods: {
@@ -536,41 +520,12 @@ export default {
 				this.savingDefaultCalendar = false
 			}
 		},
-
-		/**
-		 * Copies the primary CalDAV url to the user's clipboard.
-		 */
-		async copyPrimaryCalDAV() {
-			try {
-				await navigator.clipboard.writeText(generateRemoteUrl('dav'))
-				showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
-			} catch (error) {
-				console.debug(error)
-				showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
-			}
-		},
-
-		/**
-		 * Copies the macOS / iOS specific CalDAV url to the user's clipboard.
-		 * This url is user-specific.
-		 */
-		async copyAppleCalDAV() {
-			const rootURL = generateRemoteUrl('dav')
-			const url = new URL(getCurrentUserPrincipal().principalUrl, rootURL)
-
-			try {
-				await navigator.clipboard.writeText(url)
-				showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
-			} catch (error) {
-				console.debug(error)
-				showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
-			}
-		},
 	},
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+// Needed for the cog icon the navigation sidebar to be aligned
 .navigation-calendar-settings {
 	padding-inline-start: calc(var(--default-grid-baseline) * 2);
 	padding-bottom: calc(var(--default-grid-baseline) * 2);
diff --git a/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue b/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue
index 3dfbc5b135..2c5f3746a5 100644
--- a/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue
+++ b/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue
@@ -4,37 +4,32 @@
 -->
 
 <template>
-	<div class="settings-fieldset-interior-item settings-fieldset-interior-item--folder">
-		<label :for="inputId">
-			{{ $t('calendar', 'Attachments folder') }}
-		</label>
-		<div class="form-group">
-			<NcInputField
-				:id="inputId"
-				v-model="attachmentsFolder"
-				type="text"
-				:label-outside="true"
-				@input="debounceSaveAttachmentsFolder(attachmentsFolder)"
-				@change="debounceSaveAttachmentsFolder(attachmentsFolder)"
-				@click="selectCalendarFolder"
-				@keyboard.enter="selectCalendarFolder" />
-		</div>
-	</div>
+	<NcFormBoxButton
+		:label="$t('calendar', 'Attachments folder')"
+		:description="attachmentsFolder"
+		inverted-accent
+		@click="selectCalendarFolder">
+		<template #icon>
+			<IconFolderOpen :size="20" />
+		</template>
+	</NcFormBoxButton>
 </template>
 
 <script>
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
+import { NcFormBoxButton } from '@nextcloud/vue'
 import debounce from 'debounce'
 import { mapState, mapStores } from 'pinia'
-import NcInputField from '@nextcloud/vue/components/NcInputField'
+import IconFolderOpen from 'vue-material-design-icons/FolderOpenOutline.vue'
 import useSettingsStore from '../../../store/settings.js'
 import logger from '../../../utils/logger.js'
-import { randomId } from '../../../utils/randomId.js'
 
 export default {
 	name: 'SettingsAttachmentsFolder',
+
 	components: {
-		NcInputField,
+		NcFormBoxButton,
+		IconFolderOpen,
 	},
 
 	computed: {
@@ -42,10 +37,6 @@ export default {
 		...mapState(useSettingsStore, {
 			attachmentsFolder: (store) => store.attachmentsFolder || '/',
 		}),
-
-		inputId() {
-			return `input-${randomId()}`
-		},
 	},
 
 	methods: {
diff --git a/src/components/AppNavigation/Settings/ShortcutOverview.vue b/src/components/AppNavigation/Settings/ShortcutOverview.vue
index f1500fd950..bc2e4b7900 100644
--- a/src/components/AppNavigation/Settings/ShortcutOverview.vue
+++ b/src/components/AppNavigation/Settings/ShortcutOverview.vue
@@ -3,105 +3,113 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="shortcut-overview-modal">
-		<section
+	<NcAppSettingsShortcutsSection>
+		<NcHotkeyList
 			v-for="category in shortcuts"
 			:key="category.categoryId"
-			class="shortcut-section">
-			<h3 class="shortcut-section__header">
-				{{ category.categoryLabel }}
-			</h3>
-			<div
+			:label="category.categoryLabel">
+			<NcHotkey
 				v-for="(shortcut, index) in category.shortcuts"
 				:key="`${category.categoryId}-${index}`"
-				class="shortcut-section-item">
-				<span class="shortcut-section-item__keys">
-					<template v-for="(keyCombination, index2) of shortcut.keys">
-						<template v-for="(key, index3) in keyCombination">
-							<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
+				:hotkey="shortcut.or ? null : shortcut.keys[0]"
+				:label="shortcut.label">
+				<template v-if="shortcut.or" #hotkey>
+					<div class="shortcut-section-item__keys">
+						<div v-for="(key, keyIndex) in shortcut.keys" :key="keyIndex">
+							<NcKbd :symbol="key" />
 							<span
-								v-if="index3 !== (keyCombination.length - 1)"
-								:key="`${category.categoryId}-${index}-${index2}-${index3}`"
-								class="shortcut-section-item__spacer">
-								+
+								v-if="keyIndex !== (shortcut.keys.length - 1)">
+								{{ $t('calendar', 'or') }}
 							</span>
-						</template>
-						<span
-							v-if="index2 !== (shortcut.keys.length - 1)"
-							:key="`${category.categoryId}-${index}-${index2}`"
-							class="shortcut-section-item__spacer">
-							{{ $t('calendar', 'or') }}
-						</span>
-					</template>
-				</span>
-				<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
-			</div>
-		</section>
-	</div>
+						</div>
+					</div>
+				</template>
+			</NcHotkey>
+		</NcHotkeyList>
+	</NcAppSettingsShortcutsSection>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { NcAppSettingsShortcutsSection, NcHotkey, NcHotkeyList } from '@nextcloud/vue'
+import NcKbd from '@nextcloud/vue/components/NcKbd'
 
 export default {
+	name: 'ShortcutOverview',
+
+	components: {
+		NcAppSettingsShortcutsSection,
+		NcHotkeyList,
+		NcHotkey,
+		NcKbd,
+	},
+
 	computed: {
 		shortcuts() {
 			return [{
 				categoryId: 'navigation',
 				categoryLabel: t('calendar', 'Navigation'),
 				shortcuts: [{
-					keys: [['p'], ['k']],
+					keys: ['P', 'K'],
 					label: t('calendar', 'Previous period'),
+					or: true,
 				}, {
-					keys: [['n'], ['j']],
+					keys: ['N', 'J'],
 					label: t('calendar', 'Next period'),
+					or: true,
 				}, {
-					keys: [['t']],
+					keys: ['T'],
 					label: t('calendar', 'Today'),
+					or: true,
 				}],
 			}, {
 				categoryId: 'views',
 				categoryLabel: t('calendar', 'Views'),
 				shortcuts: [{
-					keys: [['1'], ['d']],
+					keys: ['1', 'D'],
 					label: t('calendar', 'Day view'),
+					or: true,
 				}, {
-					keys: [['2'], ['w']],
+					keys: ['2', 'W'],
 					label: t('calendar', 'Week view'),
+					or: true,
 				}, {
-					keys: [['3'], ['m']],
+					keys: ['3', 'M'],
 					label: t('calendar', 'Month view'),
+					or: true,
 				}, {
-					keys: [['4'], ['y']],
+					keys: ['4', 'Y'],
 					label: t('calendar', 'Year view'),
+					or: true,
 				}, {
-					keys: [['5'], ['l']],
+					keys: ['5', 'L'],
 					label: t('calendar', 'List view'),
+					or: true,
 				}],
 			}, {
 				categoryId: 'actions',
 				categoryLabel: t('calendar', 'Actions'),
 				shortcuts: [{
-					keys: [['c']],
+					keys: ['C'],
 					label: t('calendar', 'Create event'),
 				}, {
-					keys: [['h']],
+					keys: ['H'],
 					label: t('calendar', 'Show shortcuts'),
 				}],
 			}, {
 				categoryId: 'editor',
 				categoryLabel: t('calendar', 'Editor'),
 				shortcuts: [{
-					keys: [['Escape']],
+					keys: ['Escape'],
 					label: t('calendar', 'Close editor'),
 				}, {
-					keys: [['Ctrl+Enter']],
+					keys: ['Control Enter'],
 					label: t('calendar', 'Save edited event'),
 				}, {
-					keys: [['Ctrl+Delete']],
+					keys: ['Control Delete'],
 					label: t('calendar', 'Delete edited event'),
 				}, {
-					keys: [['Ctrl+d']],
+					keys: ['Control D'],
 					label: t('calendar', 'Duplicate event'),
 				}],
 			}]
@@ -111,40 +119,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-.shortcut-section {
-	width: 50%;
-	min-width: 425px;
-	flex-grow: 0;
-	flex-shrink: 0;
-	padding: 10px;
-	box-sizing: border-box;
-
-	.shortcut-section-item {
-		width: 100%;
-		display: grid;
-		grid-template-columns: 33% 67%;
-		column-gap: 10px;
-
-		&:not(:first-child) {
-			margin-top: 10px;
-		}
-
-		&__keys {
-			display: block;
-			text-align: end;
-		}
-
-		&__label {
-			display: block;
-			text-align: start;
-			padding-top: 5px;
-		}
-
-		&__spacer {
-			margin: 0 3px;
-		}
-	}
+.shortcut-section-item__keys {
+	display: flex;
+	gap: var(--default-grid-baseline);
 }
-
 </style>