diff --git a/package-lock.json b/package-lock.json
index b4ffe915b..b3798c7e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "@nextcloud/moment": "^1.3.5",
         "@nextcloud/notify_push": "^1.3.0",
         "@nextcloud/router": "^3.0.1",
-        "@nextcloud/vue": "^8.31.0",
+        "@nextcloud/vue": "^8.34.0",
         "blueimp-md5": "^2.19.0",
         "chroma-js": "^3.1.2",
         "dompurify": "^3.2.5",
@@ -65,8 +65,8 @@
         "vue-template-compiler": "^2.7.16"
       },
       "engines": {
-        "node": "^22.0.0",
-        "npm": "^10.5.0"
+        "node": "^24.0.0",
+        "npm": "^11.3.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4529,9 +4529,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.33.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.33.0.tgz",
-      "integrity": "sha512-OtRWrWbiR66zmBUYL89I6hB+E4OmUShwkT2Fd6wcRpbuywLtrmWxayribsmwZs75ZtaPekZij2UVzXF87qCrhQ==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.34.0.tgz",
+      "integrity": "sha512-zUmInTvT4NgbRjWJZbw8nA+h4EqitYKfoCTj3h3Xr930sQZcczQatPtSo5Sps8RAh+JJz3iiAqAawYqS9jvBdA==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@floating-ui/dom": "^1.7.4",
@@ -4557,7 +4557,7 @@
         "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^1.0.0-beta.19",
-        "focus-trap": "^7.4.3",
+        "focus-trap": "^7.6.6",
         "linkify-string": "^4.3.2",
         "md5": "^2.3.0",
         "p-queue": "^8.1.1",
@@ -4571,7 +4571,7 @@
         "splitpanes": "^2.4.1",
         "string-length": "^5.0.1",
         "striptags": "^3.2.0",
-        "tabbable": "^6.2.0",
+        "tabbable": "^6.3.0",
         "tributejs": "^5.1.3",
         "unified": "^11.0.1",
         "unist-builder": "^4.0.0",
@@ -12240,11 +12240,12 @@
       }
     },
     "node_modules/focus-trap": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
-      "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
+      "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
+      "license": "MIT",
       "dependencies": {
-        "tabbable": "^6.2.0"
+        "tabbable": "^6.3.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -21605,9 +21606,10 @@
       "peer": true
     },
     "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
     },
     "node_modules/table": {
       "version": "6.8.2",
diff --git a/package.json b/package.json
index 0eb9612a3..132483d9c 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@nextcloud/moment": "^1.3.5",
     "@nextcloud/notify_push": "^1.3.0",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/vue": "^8.31.0",
+    "@nextcloud/vue": "^8.34.0",
     "blueimp-md5": "^2.19.0",
     "chroma-js": "^3.1.2",
     "dompurify": "^3.2.5",
diff --git a/src/components/DeckAppSettings.vue b/src/components/DeckAppSettings.vue
new file mode 100644
index 000000000..fca5aacd9
--- /dev/null
+++ b/src/components/DeckAppSettings.vue
@@ -0,0 +1,187 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcAppSettingsDialog :open="open"
+		:name="t('deck', 'Deck settings')"
+		:legacy="false"
+		show-navigation
+		@update:open="onClose">
+		<NcAppSettingsSection id="general-settings" :name="t('deck', 'General')">
+			<NcFormBox>
+				<NcFormBoxSwitch v-model="cardDetailsInModal"
+					:label="t('deck', 'Use bigger card view')" />
+			</NcFormBox>
+		</NcAppSettingsSection>
+
+		<NcAppSettingsSection id="appearance-settings" :name="t('deck', 'Appearance')">
+			<NcFormBox>
+				<NcFormBoxSwitch v-model="cardIdBadge"
+					:label="t('deck', 'Show card ID badge')" />
+				<NcFormBoxSwitch v-model="configCalendar"
+					:label="t('deck', 'Show boards in calendar/tasks')" />
+			</NcFormBox>
+		</NcAppSettingsSection>
+
+		<NcAppSettingsSection v-if="isAdmin" id="admin-settings" :name="t('deck', 'Admin settings')">
+			<NcSelect v-model="groupLimit"
+				open-direction="bottom"
+				:options="groups"
+				:multiple="true"
+				:input-label="t('deck', 'Limit board creation to some groups')"
+				label="displayname"
+				track-by="id"
+				@input="updateConfig" />
+			<p>
+				{{ t('deck', 'Users outside of those groups will not be able to create their own boards, but will still be able to work on boards that have been shared with them.') }}
+			</p>
+		</NcAppSettingsSection>
+
+		<NcAppSettingsShortcutsSection>
+			<NcHotkeyList :label="t('deck', 'Board actions')">
+				<NcHotkey :label="t('deck', 'Scroll sideways')" hotkey="Shift Scroll" />
+				<NcHotkey :label="t('deck', 'Navigate between cards')" hotkey="ArrowUp ArrowDown ArrowLeft ArrowRight" />
+				<NcHotkey :label="t('deck', 'Close card details')" hotkey="Escape" />
+				<NcHotkey :label="t('deck', 'Search')" hotkey="Control F" />
+				<NcHotkey :label="t('deck', 'Show card filters')" hotkey="F" />
+				<NcHotkey :label="t('deck', 'Clear card filters')" hotkey="X" />
+				<NcHotkey :label="t('deck', 'Show those shortcuts')" hotkey="?" />
+			</NcHotkeyList>
+			<NcHotkeyList :label="t('deck', 'Card actions')">
+				<NcHotkey :label="t('deck', 'Open card details')" hotkey="Enter Space" />
+				<NcHotkey :label="t('deck', 'Edit the card title')" hotkey="E" />
+				<NcHotkey :label="t('deck', 'Assign yourself to the current card')" hotkey="S" />
+				<NcHotkey :label="t('deck', 'Archive/unarchive the current card')" hotkey="A" />
+				<NcHotkey :label="t('deck', 'Mark card as completed/not completed')" hotkey="O" />
+				<NcHotkey :label="t('deck', 'Open card menu')" hotkey="M" />
+			</NcHotkeyList>
+		</NcAppSettingsShortcutsSection>
+	</NcAppSettingsDialog>
+</template>
+
+<script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import { NcSelect } from '@nextcloud/vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+export default {
+	name: 'DeckAppSettings',
+	components: {
+		NcSelect,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
+		NcAppSettingsShortcutsSection,
+		NcFormBox,
+		NcFormBoxSwitch,
+		NcHotkeyList,
+		NcHotkey,
+	},
+
+	props: {
+		open: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			groups: [],
+			groupLimit: [],
+		}
+	},
+
+	computed: {
+		isAdmin() {
+			return !!getCurrentUser()?.isAdmin
+		},
+		cardDetailsInModal: {
+			get() {
+				return this.$store.getters.config('cardDetailsInModal')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
+			},
+		},
+		cardIdBadge: {
+			get() {
+				return this.$store.getters.config('cardIdBadge')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { cardIdBadge: newValue })
+			},
+		},
+		configCalendar: {
+			get() {
+				return this.$store.getters.config('calendar')
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { calendar: newValue })
+			},
+		},
+	},
+
+	beforeMount() {
+		if (this.isAdmin) {
+			this.groupLimit = this.$store.getters.config('groupLimit')
+			axios.get(generateOcsUrl('cloud/groups')).then((response) => {
+				this.groups = response.data.ocs.data.groups.reduce((obj, item) => {
+					obj.push({
+						id: item,
+						displayname: item,
+					})
+					return obj
+				}, [])
+			}, (error) => {
+				console.error('Error while loading group list', error.response)
+			})
+		}
+	},
+
+	created() {
+		// ? opens the settings dialog on the keyboard shortcuts section
+		useHotKey('?', this.showKeyboardShortcuts, {
+			stop: true,
+			prevent: true,
+		})
+	},
+
+	methods: {
+		onClose() {
+			this.$emit('close')
+		},
+
+		async updateConfig() {
+			await this.$store.dispatch('setConfig', { groupLimit: this.groupLimit })
+		},
+
+		async showKeyboardShortcuts() {
+			this.$emit('update:open', true)
+
+			await this.$nextTick()
+			document.getElementById('settings-section_keyboard-shortcuts').scrollIntoView({
+				behavior: 'smooth',
+				inline: 'nearest',
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.app-settings-section {
+	&#settings-section_admin-settings p {
+		margin-bottom: 20px;
+	}
+}
+</style>
diff --git a/src/components/modals/HelpModal.vue b/src/components/modals/HelpModal.vue
deleted file mode 100644
index cb2a4c2fa..000000000
--- a/src/components/modals/HelpModal.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<NcModal size="normal"
-		data-text-el="formatting-help"
-		:name="t('deck', 'Keyboard shortcuts')"
-		@close="$emit('close')">
-		<div class="help-modal">
-			<h2>{{ t('deck', 'Keyboard shortcuts') }}</h2>
-			<p>{{ t('deck', 'Boost your productivity using Deck with keyboard shortcuts.') }}</p>
-
-			<h3>{{ t('deck', 'Board actions') }}</h3>
-			<table>
-				<thead>
-					<tr>
-						<th>{{ t('deck', 'Keyboard shortcut') }}</th>
-						<th>{{ t('deck', 'Action') }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>
-							<kbd>{{ t('deck', 'Shift') }}</kbd>
-							+
-							<kbd>{{ t('deck', 'Scroll') }}</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Scroll sideways') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>←</kbd>
-							<kbd>→</kbd>
-							<kbd>↑</kbd>
-							<kbd>↓</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Navigate between cards') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>{{ t('deck', 'Esc') }}</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Close card details') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>{{ t('deck', 'Ctrl') }}</kbd>
-							<kbd>F</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Search') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>F</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Show card filters') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>X</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Clear card filters') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>?</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Show help dialog') }}
-						</td>
-					</tr>
-				</tbody>
-			</table>
-
-			<h3>{{ t('deck', 'Card actions') }}</h3>
-			<p>{{ t('deck', 'The following actions can be triggered on the currently highlighted card') }}</p>
-			<table>
-				<thead>
-					<tr>
-						<th>{{ t('deck', 'Keyboard shortcut') }}</th>
-						<th>{{ t('deck', 'Action') }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>
-							<kbd>{{ t('deck', 'Enter') }}</kbd>
-							<kbd>{{ t('deck', 'Space') }}</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Open card details') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>E</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Edit the card title') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>S</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Assign yourself to the current card') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>A</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Archive/unarchive the current card') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>O</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Mark card as completed/not completed') }}
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<kbd>M</kbd>
-						</td>
-						<td>
-							{{ t('deck', 'Open card menu') }}
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-	</NcModal>
-</template>
-
-<script>
-import { NcModal, Tooltip } from '@nextcloud/vue'
-
-export default {
-	name: 'HelpModal',
-	components: {
-		NcModal,
-	},
-	directives: {
-		Tooltip,
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-	.help-modal {
-		width: max-content;
-		padding: 30px 40px 20px;
-		user-select: text;
-
-		h2, h3 {
-			font-weight: bold;
-		}
-	}
-
-	table {
-		margin-top: 24px;
-		border-collapse: collapse;
-
-		tbody tr {
-			&:hover, &:focus, &:active {
-				background-color: transparent !important;
-			}
-		}
-
-		thead tr {
-			border: none;
-		}
-
-		th {
-			font-weight: bold;
-			padding: .75rem 1rem .75rem 0;
-			border-bottom: 2px solid var(--color-background-darker);
-		}
-
-		td {
-			padding: .75rem 1rem .75rem 0;
-			border-top: 1px solid var(--color-background-dark);
-			border-bottom: unset;
-
-			&.noborder {
-				border-top: unset;
-			}
-
-			&.ellipsis_top {
-				padding-bottom: 0;
-			}
-
-			&.ellipsis {
-				padding-top: 0;
-				padding-bottom: 0;
-			}
-
-			&.ellipsis_bottom {
-				padding-top: 0;
-			}
-		}
-
-		kbd {
-			font-size: smaller;
-		}
-
-		code {
-			padding: .2em .4em;
-			font-size: 90%;
-			background-color: var(--color-background-dark);
-			border-radius: 6px;
-		}
-	}
-</style>
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index d6f028c9e..9999e6bdb 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -46,82 +46,40 @@
 			<AppNavigationAddBoard v-if="canCreate" />
 			<AppNavigationImportBoard v-if="canCreate" />
 		</template>
+		<template #default>
+			<DeckAppSettings :open.sync="settingsOpened"
+				@close="onSettingsClose" />
+		</template>
 		<template #footer>
-			<NcAppNavigationSettings :name="t('deck', 'Deck settings')">
-				<NcButton @click="showHelp = true">
-					{{ t('deck', 'Keyboard shortcuts') }}
-				</NcButton>
-				<HelpModal v-if="showHelp" @close="showHelp=false" />
-				<div>
-					<div>
-						<input id="toggle-modal"
-							v-model="cardDetailsInModal"
-							type="checkbox"
-							class="checkbox">
-						<label for="toggle-modal">
-							{{ t('deck', 'Use bigger card view') }}
-						</label>
-					</div>
-
-					<div>
-						<input id="toggle-idbadge"
-							v-model="cardIdBadge"
-							type="checkbox"
-							class="checkbox">
-						<label for="toggle-idbadge">
-							{{ t('deck', 'Show card ID badge') }}
-						</label>
-					</div>
-
-					<div>
-						<input id="toggle-calendar"
-							v-model="configCalendar"
-							type="checkbox"
-							class="checkbox">
-						<label for="toggle-calendar">
-							{{ t('deck', 'Show boards in calendar/tasks') }}
-						</label>
-					</div>
-
-					<NcSelect v-if="isAdmin"
-						v-model="groupLimit"
-						:class="{'icon-loading-small': groupLimitDisabled}"
-						open-direction="bottom"
-						:options="groups"
-						:multiple="true"
-						:disabled="groupLimitDisabled"
-						:input-label="t('deck', 'Limit board creation to some groups')"
-						label="displayname"
-						track-by="id"
-						@input="updateConfig" />
-					<p v-if="isAdmin">
-						{{ t('deck', 'Users outside of those groups will not be able to create their own boards, but will still be able to work on boards that have been shared with them.') }}
-					</p>
-				</div>
-			</NcAppNavigationSettings>
+			<ul class="app-navigation-entry__settings">
+				<NcAppNavigationItem :name="t('deck', 'Deck settings')"
+					@click.prevent.stop="openSettings">
+					<template #icon>
+						<IconCog :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</ul>
 		</template>
 	</NcAppNavigation>
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
-import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcSelect, NcButton } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
 import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
 import AppNavigationBoardCategory from './AppNavigationBoardCategory.vue'
 import { loadState } from '@nextcloud/initial-state'
-import { generateOcsUrl } from '@nextcloud/router'
-import { getCurrentUser } from '@nextcloud/auth'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import ArchiveOutlineIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CalendarIcon from 'vue-material-design-icons/Calendar.vue'
 import CalendarOutlineIcon from 'vue-material-design-icons/CalendarOutline.vue'
 import DeckIcon from './../icons/DeckIcon.vue'
 import ShareVariantIcon from 'vue-material-design-icons/ShareOutline.vue'
-import HelpModal from './../modals/HelpModal.vue'
 import { subscribe } from '@nextcloud/event-bus'
 import AppNavigationImportBoard from './AppNavigationImportBoard.vue'
+import DeckAppSettings from '../DeckAppSettings.vue'
+import IconCog from 'vue-material-design-icons/CogOutline.vue'
 
 const canCreateState = loadState('deck', 'canCreate')
 
@@ -129,12 +87,9 @@ export default {
 	name: 'AppNavigation',
 	components: {
 		NcAppNavigation,
-		NcAppNavigationSettings,
-		NcButton,
 		AppNavigationAddBoard,
 		AppNavigationBoardCategory,
 		AppNavigationImportBoard,
-		NcSelect,
 		NcAppNavigationItem,
 		ArchiveIcon,
 		ArchiveOutlineIcon,
@@ -142,7 +97,8 @@ export default {
 		CalendarOutlineIcon,
 		DeckIcon,
 		ShareVariantIcon,
-		HelpModal,
+		DeckAppSettings,
+		IconCog,
 	},
 	directives: {
 		ClickOutside,
@@ -161,6 +117,7 @@ export default {
 			groupLimitDisabled: true,
 			canCreate: canCreateState,
 			showHelp: false,
+			settingsOpened: false,
 		}
 	},
 	computed: {
@@ -169,60 +126,18 @@ export default {
 			'archivedBoards',
 			'sharedBoards',
 		]),
-		isAdmin() {
-			return !!getCurrentUser()?.isAdmin
-		},
-		cardDetailsInModal: {
-			get() {
-				return this.$store.getters.config('cardDetailsInModal')
-			},
-			set(newValue) {
-				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
-			},
-		},
-		cardIdBadge: {
-			get() {
-				return this.$store.getters.config('cardIdBadge')
-			},
-			set(newValue) {
-				this.$store.dispatch('setConfig', { cardIdBadge: newValue })
-			},
-		},
-		configCalendar: {
-			get() {
-				return this.$store.getters.config('calendar')
-			},
-			set(newValue) {
-				this.$store.dispatch('setConfig', { calendar: newValue })
-			},
-		},
 	},
 	mounted() {
 		subscribe('deck:global:toggle-help-dialog', () => {
 			this.showHelp = !this.showHelp
 		})
 	},
-	beforeMount() {
-		if (this.isAdmin) {
-			this.groupLimit = this.$store.getters.config('groupLimit')
-			this.groupLimitDisabled = false
-			axios.get(generateOcsUrl('cloud/groups')).then((response) => {
-				this.groups = response.data.ocs.data.groups.reduce((obj, item) => {
-					obj.push({
-						id: item,
-						displayname: item,
-					})
-					return obj
-				}, [])
-			}, (error) => {
-				console.error('Error while loading group list', error.response)
-			})
-		}
-	},
 	methods: {
-		async updateConfig() {
-			await this.$store.dispatch('setConfig', { groupLimit: this.groupLimit })
-			this.groupLimitDisabled = false
+		openSettings() {
+			this.settingsOpened = true
+		},
+		onSettingsClose() {
+			this.settingsOpened = false
 		},
 	},
 }
@@ -235,4 +150,12 @@ export default {
 			color: var(--color-text-light);
 		}
 	}
+
+	.app-navigation-entry__settings {
+		height: auto !important;
+		overflow: hidden !important;
+		padding-top: 0 !important;
+		// Prevent shrinking or growing
+		flex: 0 0 auto;
+	}
 </style>