diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
new file mode 100644
index 0000000000..5b97640ba3
--- /dev/null
+++ b/src/assets/NcAppNavigationItem.scss
@@ -0,0 +1,203 @@
+.app-navigation-entry {
+	position: relative;
+	display: flex;
+	flex-shrink: 0;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+	width: 100%;
+	min-height: $clickable-area;
+	transition: background-color var(--animation-quick) ease-in-out;
+	transition: background-color 200ms ease-in-out;
+	border-radius: var(--border-radius-pill);
+
+	&-wrapper {
+		position: relative;
+		display: flex;
+		flex-shrink: 0;
+		flex-wrap: wrap;
+		box-sizing: border-box;
+		width: 100%;
+
+		&.app-navigation-entry--collapsible:not(.app-navigation-entry--opened) > ul {
+			// NO ANIMATE because if not really hidden, we can still tab through it
+			display: none;
+		}
+	}
+
+	// When .active class is applied, change color background of link and utils. The
+	// !important prevents the focus state to override the active state.
+	&.active {
+		background-color: var(--color-primary-element) !important;
+
+		// overwrite active text color
+		.app-navigation-entry-link, .app-navigation-entry-button {
+			color: var(--color-primary-element-text) !important;
+		}
+	}
+	&:focus-within,
+	&:hover {
+		background-color: var(--color-background-hover);
+	}
+	&.active,
+	&:focus-within,
+	&:hover {
+		.app-navigation-entry__children {
+			background-color: var(--color-main-background);
+		}
+	}
+
+	// Show the actions on active
+	&.active,
+	// Always show the undo button
+	&.app-navigation-entry--deleted,
+	&:focus,
+	&:focus-within,
+	&:hover {
+		.app-navigation-entry__utils .app-navigation-entry__actions {
+			display: inline-block;
+		}
+	}
+
+	/* hide deletion/collapse of subitems */
+	&.app-navigation-entry--deleted > ul {
+		// NO ANIMATE because if not really hidden, we can still tab through it
+		display: none;
+	}
+
+	&:not(.app-navigation-entry--editing) {
+		.app-navigation-entry-link, .app-navigation-entry-button {
+			padding-right: $icon-margin;
+		}
+	}
+
+	// Main entry link
+	.app-navigation-entry-link, .app-navigation-entry-button {
+		z-index: 100; /* above the bullet to allow click*/
+		display: flex;
+		overflow: hidden;
+		flex: 1 1 0;
+		box-sizing: border-box;
+		min-height: $clickable-area;
+		padding: 0;
+		white-space: nowrap;
+		color: var(--color-main-text);
+		background-repeat: no-repeat;
+		background-position: $icon-margin center;
+		background-size: $icon-size $icon-size;
+		line-height: $clickable-area;
+
+		.app-navigation-entry-icon {
+			display: flex;
+			align-items: center;
+			flex: 0 0 $clickable-area;
+			justify-content: center;
+			width: $clickable-area;
+			height: $clickable-area;
+			background-size: $icon-size $icon-size;
+			background-repeat: no-repeat;
+			background-position: $icon-margin center;
+		}
+
+		.app-navigation-entry__name {
+			overflow: hidden;
+			max-width: 100%;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		.editingContainer {
+			width: calc(100% - #{$clickable-area});
+			margin: auto;
+		}
+	}
+}
+/* Second level nesting for lists */
+.app-navigation-entry__children {
+	position: relative;
+	display: flex;
+	flex: 0 1 auto;
+	flex-direction: column;
+	width: 100%;
+	gap: var(--default-grid-baseline, 4px);
+
+	.app-navigation-entry {
+		display: inline-flex;
+		flex-wrap: wrap;
+		padding-left: $icon-size;
+	}
+}
+
+/* Deleted entries */
+.app-navigation-entry__deleted {
+	display: inline-flex;
+	flex: 1 1 0;
+	padding-left: $clickable-area - $icon-margin !important;
+	.app-navigation-entry__deleted-description {
+		position: relative;
+		overflow: hidden;
+		flex: 1 1 0;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		line-height: $clickable-area;
+	}
+}
+
+/* counter and actions */
+.app-navigation-entry__utils {
+	display: flex;
+	min-width: $clickable-area;
+	align-items: center;
+	flex: 0 1 auto;
+	justify-content: flex-end;
+	&#{&}--display-actions .action-item.app-navigation-entry__actions {
+		display: inline-block;
+	}
+	/* counter */
+	.app-navigation-entry__counter-wrapper {
+		// Add slightly more space to the right of the counter
+		margin-right: calc(var(--default-grid-baseline) * 3);
+		display: flex;
+		align-items: center;
+		flex: 0 1 auto;
+	}
+	/* actions */
+	.action-item.app-navigation-entry__actions {
+		display: none;
+	}
+}
+
+// STATES
+/* editing state */
+.app-navigation-entry--editing {
+	.app-navigation-entry-edit {
+		z-index: 250;
+		opacity: 1;
+	}
+}
+
+/* deleted state */
+.app-navigation-entry--deleted {
+	.app-navigation-entry-deleted {
+		z-index: 250;
+		transform: translateX(0);
+	}
+}
+
+/* pinned state */
+.app-navigation-entry--pinned {
+	order: 2;
+	margin-top: auto;
+	// only put a marginTop auto to the first one!
+	~ .app-navigation-entry--pinned {
+		margin-top: 0;
+	}
+}
+
+// Add more contrast for active entry
+[data-themes*='highcontrast'] {
+	.app-navigation-entry {
+		&:active {
+			background-color: var(--color-primary-element-light-hover) !important;
+		}
+	}
+}
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 6b50e390f2..db4f1676a0 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -772,207 +772,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.app-navigation-entry {
-	position: relative;
-	display: flex;
-	flex-shrink: 0;
-	flex-wrap: wrap;
-	box-sizing: border-box;
-	width: 100%;
-	min-height: $clickable-area;
-	transition: background-color var(--animation-quick) ease-in-out;
-	transition: background-color 200ms ease-in-out;
-	border-radius: var(--border-radius-pill);
-
-	&-wrapper {
-		position: relative;
-		display: flex;
-		flex-shrink: 0;
-		flex-wrap: wrap;
-		box-sizing: border-box;
-		width: 100%;
-
-		&.app-navigation-entry--collapsible:not(.app-navigation-entry--opened) > ul {
-			// NO ANIMATE because if not really hidden, we can still tab through it
-			display: none;
-		}
-	}
-
-	// When .active class is applied, change color background of link and utils. The
-	// !important prevents the focus state to override the active state.
-	&.active {
-		background-color: var(--color-primary-element) !important;
-
-		// overwrite active text color
-		.app-navigation-entry-link, .app-navigation-entry-button {
-			color: var(--color-primary-element-text) !important;
-		}
-	}
-	&:focus-within,
-	&:hover {
-		background-color: var(--color-background-hover);
-	}
-	&.active,
-	&:focus-within,
-	&:hover {
-		.app-navigation-entry__children {
-			background-color: var(--color-main-background);
-		}
-	}
-
-	// Show the actions on active
-	&.active,
-	// Always show the undo button
-	&.app-navigation-entry--deleted,
-	&:focus,
-	&:focus-within,
-	&:hover {
-		.app-navigation-entry__utils .app-navigation-entry__actions {
-			display: inline-block;
-		}
-	}
-
-	/* hide deletion/collapse of subitems */
-	&.app-navigation-entry--deleted > ul {
-		// NO ANIMATE because if not really hidden, we can still tab through it
-		display: none;
-	}
-
-	&:not(.app-navigation-entry--editing) {
-		.app-navigation-entry-link, .app-navigation-entry-button {
-			padding-right: $icon-margin;
-		}
-	}
-
-	// Main entry link
-	.app-navigation-entry-link, .app-navigation-entry-button {
-		z-index: 100; /* above the bullet to allow click*/
-		display: flex;
-		overflow: hidden;
-		flex: 1 1 0;
-		box-sizing: border-box;
-		min-height: $clickable-area;
-		padding: 0;
-		white-space: nowrap;
-		color: var(--color-main-text);
-		background-repeat: no-repeat;
-		background-position: $icon-margin center;
-		background-size: $icon-size $icon-size;
-		line-height: $clickable-area;
-
-		.app-navigation-entry-icon {
-			display: flex;
-			align-items: center;
-			flex: 0 0 $clickable-area;
-			justify-content: center;
-			width: $clickable-area;
-			height: $clickable-area;
-			background-size: $icon-size $icon-size;
-			background-repeat: no-repeat;
-			background-position: $icon-margin center;
-		}
-
-		.app-navigation-entry__name {
-			overflow: hidden;
-			max-width: 100%;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		.editingContainer {
-			width: calc(100% - #{$clickable-area});
-			margin: auto;
-		}
-	}
-}
-/* Second level nesting for lists */
-.app-navigation-entry__children {
-	position: relative;
-	display: flex;
-	flex: 0 1 auto;
-	flex-direction: column;
-	width: 100%;
-	gap: var(--default-grid-baseline, 4px);
-
-	.app-navigation-entry {
-		display: inline-flex;
-		flex-wrap: wrap;
-		padding-left: $icon-size;
-	}
-}
-
-/* Deleted entries */
-.app-navigation-entry__deleted {
-	display: inline-flex;
-	flex: 1 1 0;
-	padding-left: $clickable-area - $icon-margin !important;
-	.app-navigation-entry__deleted-description {
-		position: relative;
-		overflow: hidden;
-		flex: 1 1 0;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		line-height: $clickable-area;
-	}
-}
-
-/* counter and actions */
-.app-navigation-entry__utils {
-	display: flex;
-	min-width: $clickable-area;
-	align-items: center;
-	flex: 0 1 auto;
-	justify-content: flex-end;
-	&#{&}--display-actions .action-item.app-navigation-entry__actions {
-		display: inline-block;
-	}
-	/* counter */
-	.app-navigation-entry__counter-wrapper {
-		// Add slightly more space to the right of the counter
-		margin-right: calc(var(--default-grid-baseline) * 3);
-		display: flex;
-		align-items: center;
-		flex: 0 1 auto;
-	}
-	/* actions */
-	.action-item.app-navigation-entry__actions {
-		display: none;
-	}
-}
-
-// STATES
-/* editing state */
-.app-navigation-entry--editing {
-	.app-navigation-entry-edit {
-		z-index: 250;
-		opacity: 1;
-	}
-}
-
-/* deleted state */
-.app-navigation-entry--deleted {
-	.app-navigation-entry-deleted {
-		z-index: 250;
-		transform: translateX(0);
-	}
-}
-
-/* pinned state */
-.app-navigation-entry--pinned {
-	order: 2;
-	margin-top: auto;
-	// only put a marginTop auto to the first one!
-	~ .app-navigation-entry--pinned {
-		margin-top: 0;
-	}
-}
-
-// Add more contrast for active entry
-[data-themes*='highcontrast'] {
-	.app-navigation-entry {
-		&:active {
-			background-color: var(--color-primary-element-light-hover) !important;
-		}
-	}
-}
+@import '../../assets/NcAppNavigationItem';
 </style>
diff --git a/src/components/NcAppNavigationNew/NcAppNavigationNew.vue b/src/components/NcAppNavigationNew/NcAppNavigationNew.vue
index 402e57e0a0..78dee03312 100644
--- a/src/components/NcAppNavigationNew/NcAppNavigationNew.vue
+++ b/src/components/NcAppNavigationNew/NcAppNavigationNew.vue
@@ -92,7 +92,7 @@ export default {
 }
 </script>
 
- <style lang="scss" scoped>
+<style lang="scss" scoped>
 /* 'New' button */
 .app-navigation-new {
 	display: block;
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
index 9c69526763..8b68194d06 100644
--- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
+++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -176,6 +176,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '../../assets/NcAppNavigationItem';
+
 .app-navigation-new-item__name {
 	overflow: hidden;
 	max-width: 100%;