diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index 40b3bdde10..5b10b96ef7 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -89,7 +89,10 @@ You can also add icons to the section navigation:
 					Twitch setting
 				</p>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="asci-name-4" name="Twitter">
+			<NcAppSettingsSection id="asci-name-4" name="No icon">
+				No icon settings
+			</NcAppSettingsSection>
+			<NcAppSettingsSection id="asci-name-5" name="Twitter">
 				<template #icon>
 					<Twitter :size="20" />
 				</template>
@@ -123,60 +126,78 @@ export default {
 </docs>
 
 <template>
-	<NcDialog v-if="open"
-		:navigation-aria-label="settingsNavigationAriaLabel"
-		v-bind="dialogProperties"
-		@update:open="handleCloseModal">
-		<template v-if="hasNavigation" #navigation="{ isCollapsed }">
-			<ul v-if="!isCollapsed"
-				class="navigation-list">
-				<li v-for="section in sections" :key="section.id">
-					<a :aria-current="`${section.id === selectedSection}`"
-						:class="{
-							'navigation-list__link': true,
-							'navigation-list__link--active': section.id === selectedSection,
-							'navigation-list__link--icon': hasNavigationIcons,
-						}"
-						:href="`#settings-section_${section.id}`"
-						tabindex="0"
-						@click.prevent="handleSettingsNavigationClick(section.id)"
-						@keydown.enter="handleSettingsNavigationClick(section.id)">
-						<div v-if="hasNavigationIcons" class="navigation-list__link-icon">
-							<NcVNodes v-if="section.icon" :vnodes="section.icon" />
-						</div>
-						<span class="navigation-list__link-text">
+	<NcModal v-if="open"
+		:additional-trap-elements="additionalTrapElements"
+		:close-button-contained="!isMobile"
+		close-on-click-outside
+		class="app-settings"
+		:container="container"
+		size="large"
+		:name="name"
+		@update:show="handleCloseModal">
+		<div class="app-settings__wrapper">
+			<nav v-if="sections.length > 1"
+				class="app-settings__nav"
+				:aria-label="t('Application settings')"
+				tabindex="-1">
+				<ul class="app-settings__nav-list">
+					<li v-for="(section, sectionIndex) in sections" :key="section.id">
+						<NcButton ref="navigationButton"
+							:aria-current="section.id === selectedSection ? 'page' : undefined"
+							:href="`#settings-section_${section.id}`"
+							:variant="section.id === selectedSection ? 'primary' : 'tertiary'"
+							alignment="start"
+							wide
+							@keydown.down="openSection(sectionIndex + 1)"
+							@keydown.up="openSection(sectionIndex - 1)"
+							@keydown.left="openSection(sectionIndex + (isRTL ? 1 : -1))"
+							@keydown.right="openSection(sectionIndex + (isRTL ? -1 : +1))"
+							@keydown.tab.prevent="() => $refs.settingsScroller.focus()"
+							@click.prevent="openSection(sectionIndex)">
+							<template v-if="hasNavigationIcons" #icon>
+								<div class="app-settings__nav-button-icon">
+									<NcVNodes v-if="section.icon" :vnodes="section.icon" />
+								</div>
+							</template>
 							{{ section.name }}
-						</span>
-					</a>
-				</li>
-			</ul>
-		</template>
-		<div ref="settingsScroller">
-			<slot />
+						</NcButton>
+					</li>
+				</ul>
+			</nav>
+			<div ref="settingsScroller"
+				class="app-settings__content"
+				tabindex="-1"
+				@keydown.shift.tab="$refs.navigationButton?.[selectedSectionIndex]?.$el.focus()">
+				<slot />
+			</div>
 		</div>
-	</NcDialog>
+	</NcModal>
 </template>
 
 <script>
-import debounce from 'debounce'
 import { warn } from 'vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.ts'
 import { t } from '../../l10n.js'
+import { isRTL as checkRTL } from '@nextcloud/l10n'
+import NcButton from '../NcButton/index.js'
+import NcModal from '../NcModal/index.js'
+import NcVNodes from '../NcVNodes/index.js'
 
-import NcDialog from '../NcDialog/index.ts'
-import NcVNodes from '../NcVNodes/index.ts'
+const isRTL = checkRTL()
 
 export default {
 
 	name: 'NcAppSettingsDialog',
 
 	components: {
-		NcDialog,
+		NcButton,
+		NcModal,
 		NcVNodes,
 	},
 
 	provide() {
 		return {
+			getSelectedSection: () => this.selectedSection,
 			registerSection: this.registerSection,
 			unregisterSection: this.unregisterSection,
 		}
@@ -228,6 +249,8 @@ export default {
 
 	setup() {
 		return {
+			t,
+			isRTL,
 			isMobile: useIsMobile(),
 		}
 	},
@@ -247,17 +270,8 @@ export default {
 	},
 
 	computed: {
-		dialogProperties() {
-			return {
-				additionalTrapElements: this.additionalTrapElements,
-				closeOnClickOutside: true,
-				class: 'app-settings',
-				container: this.container,
-				contentClasses: 'app-settings__content',
-				size: 'large',
-				name: this.name,
-				navigationClasses: 'app-settings__navigation',
-			}
+		selectedSectionIndex() {
+			return this.sections.findIndex(({ id }) => id === this.selectedSection)
 		},
 
 		/**
@@ -280,19 +294,19 @@ export default {
 		},
 	},
 
-	updated() {
-		// Check that the scroller element has been mounted
-		if (!this.$refs.settingsScroller) {
-			return
-		}
-		// Get the scroller element
-		this.scroller = this.$refs.settingsScroller
-		if (!this.addedScrollListener) {
-			this.scroller.addEventListener('scroll', this.handleScroll)
-			this.addedScrollListener = true
-		}
+	// updated() {
+	// 	// Check that the scroller element has been mounted
+	// 	if (!this.$refs.settingsScroller) {
+	// 		return
+	// 	}
+	// 	// Get the scroller element
+	// 	this.scroller = this.$refs.settingsScroller
+	// 	if (!this.addedScrollListener) {
+	// 		this.scroller.addEventListener('scroll', this.handleScroll)
+	// 		this.addedScrollListener = true
+	// 	}
 
-	},
+	// },
 
 	methods: {
 		/**
@@ -342,15 +356,25 @@ export default {
 		 * @param {string} item the ID of the section
 		 */
 		handleSettingsNavigationClick(item) {
-			this.linkClicked = true
-			document.getElementById('settings-section_' + item).scrollIntoView({
-				behavior: 'smooth',
-				inline: 'nearest',
-			})
 			this.selectedSection = item
-			setTimeout(() => {
-				this.linkClicked = false
-			}, 1000)
+			// --- WIP ---
+			// this.linkClicked = true
+			// document.getElementById('settings-section_' + item).scrollIntoView({
+			// 	behavior: 'smooth',
+			// 	inline: 'nearest',
+			// })
+			// this.selectedSection = item
+			// setTimeout(() => {
+			// 	this.linkClicked = false
+			// }, 1000)
+		},
+
+		openSection(sectionIndex) {
+			if (sectionIndex < 0 || sectionIndex >= this.sections.length) {
+				return
+			}
+			this.selectedSection = this.sections[sectionIndex].id
+			this.$refs.navigationButton[sectionIndex].$el.focus()
 		},
 
 		handleCloseModal(isOpen) {
@@ -360,9 +384,9 @@ export default {
 
 			this.$emit('update:open', false)
 			// Remove scroll listener each time the modal is closed
-			this.scroller.removeEventListener('scroll', this.handleScroll)
-			this.addedScrollListener = false
-			this.scroller.scrollTop = 0
+			// this.scroller.removeEventListener('scroll', this.handleScroll)
+			// this.addedScrollListener = false
+			// this.scroller.scrollTop = 0
 		},
 
 		handleScroll() {
@@ -372,12 +396,12 @@ export default {
 		},
 
 		// Remove selected section once the user starts scrolling
-		unfocusNavigationItem: debounce(function() {
-			this.selectedSection = ''
-			if (document.activeElement.className.includes('navigation-list__link')) {
-				document.activeElement.blur()
-			}
-		}, 300),
+		// unfocusNavigationItem: debounce(function() {
+		// 	this.selectedSection = ''
+		// 	if (document.activeElement.className.includes('navigation-list__link')) {
+		// 		document.activeElement.blur()
+		// 	}
+		// }, 300),
 	},
 }
 
@@ -385,60 +409,56 @@ export default {
 
 <style lang="scss" scoped>
 .app-settings {
-	:deep &__navigation {
-		min-width: 200px;
-		margin-inline-end: calc(4 * var(--default-grid-baseline));
-		overflow-x: hidden;
-		overflow-y: auto;
-		position: relative;
+	* {
+		box-sizing: border-box;
 	}
-	:deep &__content {
-		padding-inline: calc(4 * var(--default-grid-baseline));
+
+	:deep(.modal-wrapper .modal-container) {
+		// Scroll the content and navigation separately instead of an entire modal
+		overflow: hidden;
+		min-height: 70vh;
 	}
 }
 
-.navigation-list {
-	height: 100%;
-	overflow-y: auto;
-	padding: calc(3 * var(--default-grid-baseline));
+.app-settings {
+	&__wrapper {
+		display: flex;
+		flex-direction: row;
+		// gap: calc(4 * var(--default-grid-baseline));
+		height: 100%;
+	}
 
-	&__link {
+	&__nav {
+		background-color: var(--color-background-dark);
+		padding: calc(2 * var(--default-grid-baseline));
+		overflow-y: auto;
+	}
+
+	&__nav-list {
 		display: flex;
-		align-content: center;
-		font-size: 16px;
-		height: var(--default-clickable-area);
-		margin: 4px 0;
-		line-height: var(--default-clickable-area);
-		border-radius: var(--border-radius-element, var(--border-radius-pill));
-		font-weight: bold;
-		padding: 0 calc(4 * var(--default-grid-baseline));
-		cursor: pointer;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		background-color: transparent;
-		border: none;
+		flex-direction: column;
+		align-items: stretch;
+		gap: calc(2 * var(--default-grid-baseline));
+	}
 
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover);
-		}
+	&__nav-button-icon {
+		width: 20px;
+	}
 
-		&--active {
-			background-color: var(--color-primary-element-light) !important;
-		}
+	&__content {
+		overflow-y: auto;
+		flex: 1;
+	}
+}
 
-		&--icon {
-			padding-inline-start: calc(2 * var(--default-grid-baseline));
-			gap: var(--default-grid-baseline);
+@media only screen and (max-width: $breakpoint-mobile) {
+	.app-settings {
+		&__wrapper {
+			flex-direction: column;
 		}
 
-		&-icon {
-			display: flex;
-			justify-content: center;
-			align-content: center;
-			width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
-			max-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
+		.navigation-list {
+			flex-direction: row;
 		}
 	}
 }
diff --git a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue b/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
index 57dbf8c88d..79e9c37b9e 100644
--- a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
+++ b/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
@@ -4,20 +4,23 @@
 -->
 
 <template>
-	<section :id="htmlId" :aria-labelledby="`${htmlId}--label`" class="app-settings-section">
+	<div v-if="isSelected"
+		:id="htmlId"
+		:aria-labelledby="`${htmlId}--label`"
+		class="app-settings-section">
 		<h3 :id="`${htmlId}--label`" class="app-settings-section__name">
 			{{ name }}
 		</h3>
 		<slot />
-		<!-- @slot Optonal icon to for the secion in the navigation -->
+		<!-- @slot Optional icon to for the section in the navigation -->
 		<slot v-if="false" name="icon" />
-	</section>
+	</div>
 </template>
 
 <script>
 export default {
 	name: 'NcAppSettingsSection',
-	inject: ['registerSection', 'unregisterSection'],
+	inject: ['registerSection', 'unregisterSection', 'getSelectedSection'],
 
 	props: {
 		name: {
@@ -39,6 +42,10 @@ export default {
 		htmlId() {
 			return 'settings-section_' + this.id
 		},
+
+		isSelected() {
+			return this.getSelectedSection() === this.id
+		},
 	},
 	// Reactive changes for section navigation
 	watch: {
@@ -64,15 +71,13 @@ export default {
 
 <style lang="scss" scoped>
 .app-settings-section {
-	margin-bottom: 80px;
+	padding: calc(2 * var(--default-grid-baseline));
+
 	&__name {
 		font-size: 1.6em;
 		margin: 0;
-		padding: 20px 0;
+		padding: 0;
 		font-weight: bold;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
 	}
 }
 </style>
diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue
index b4a9f74bb5..0ceb29de1c 100644
--- a/src/components/NcDialog/NcDialog.vue
+++ b/src/components/NcDialog/NcDialog.vue
@@ -560,7 +560,6 @@ const modalProps = computed(() => ({
 	&__modal {
 		:deep(.modal-wrapper .modal-container) {
 			display: flex !important;
-			padding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice
 			padding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline
 		}
 		:deep(.modal-wrapper .modal-container__content) {
@@ -610,13 +609,13 @@ const modalProps = computed(() => ({
 
 	&__name {
 		font-size: 21px;
-
 		text-align: center;
 		height: fit-content;
 		min-height: var(--default-clickable-area);
 		line-height: var(--default-clickable-area);
 		overflow-wrap: break-word;
-		margin-block: 0 12px;
+		// align with close button
+		margin-block: var(--default-grid-baseline) calc(3 * var(--default-grid-baseline));
 	}
 
 	&__content {