diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
index 398487fc91..7da65e1ecb 100644
--- a/src/assets/NcAppNavigationItem.scss
+++ b/src/assets/NcAppNavigationItem.scss
@@ -28,16 +28,42 @@
 		}
 	}
 
-	// When .active class is applied, change color background of link and utils. The
-	// !important prevents the focus state to override the active state.
-	&.active {
+	// !important so :focus-within does not override the active state.
+	// New design (NC34+): glassy tinted bg + inline-start stripe.
+	&:not(.app-navigation-entry--legacy).active {
+		background-color: var(--color-primary-element-light) !important;
+
+		&:hover {
+			background-color: var(--color-primary-element-light-hover) !important;
+		}
+
+		&:not(.app-navigation-entry--editing) {
+			.app-navigation-entry-link,
+			.app-navigation-entry-button {
+				color: var(--color-main-text) !important;
+			}
+		}
+
+		&:not(.app-navigation-entry--editing)::before {
+			content: '';
+			position: absolute;
+			inset-block: calc(var(--default-grid-baseline, 4px) * 2);
+			inset-inline-start: 0;
+			width: 3px;
+			background-color: var(--color-primary-element);
+			border-radius: 999px;
+			animation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;
+		}
+	}
+
+	// Legacy design (NC < 34): solid primary fill.
+	&.app-navigation-entry--legacy.active {
 		background-color: var(--color-primary-element) !important;
 
 		&:hover {
 			background-color: var(--color-primary-element-hover) !important;
 		}
 
-		// overwrite active text color
 		.app-navigation-entry-link, .app-navigation-entry-button {
 			color: var(--color-primary-element-text) !important;
 		}
@@ -46,6 +72,10 @@
 	&:hover {
 		background-color: var(--color-background-hover);
 	}
+	&:not(.app-navigation-entry--legacy):focus-within,
+	&:not(.app-navigation-entry--legacy):hover {
+		background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
+	}
 	&.active,
 	&:focus-within,
 	&:hover {
@@ -71,7 +101,10 @@
 	.app-navigation-entry__actions:hover :deep(.button-vue) {
 		background-color: var(--color-background-dark) !important;
 	}
-	&.active .app-navigation-entry__actions:hover :deep(.button-vue) {
+	&:not(.app-navigation-entry--legacy).active .app-navigation-entry__actions:hover :deep(.button-vue) {
+		background-color: var(--color-background-dark) !important;
+	}
+	&.app-navigation-entry--legacy.active .app-navigation-entry__actions:hover :deep(.button-vue) {
 		background-color: var(--color-primary-element) !important;
 	}
 
@@ -97,6 +130,7 @@
 		padding: 0;
 		white-space: nowrap;
 		color: var(--color-main-text);
+		font-weight: 500;
 		background-repeat: no-repeat;
 		background-position: $icon-margin center;
 		background-size: $icon-size $icon-size;
@@ -228,3 +262,14 @@
 		}
 	}
 }
+
+@keyframes nc-nav-stripe-in {
+	from {
+		transform: scaleY(0);
+		opacity: 0;
+	}
+	to {
+		transform: scaleY(1);
+		opacity: 1;
+	}
+}
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index e8294d1d4e..272b675b8a 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -145,6 +145,7 @@ import NcAppNavigationList from '../NcAppNavigationList/NcAppNavigationList.vue'
 import NcAppNavigationToggle from './NcAppNavigationToggle.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.ts'
 import { getTrapStack } from '../../utils/focusTrap.ts'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import { HAS_APP_NAVIGATION_KEY } from '../NcContent/constants.ts'
 
 const props = defineProps<{
@@ -296,7 +297,10 @@ function handleEsc(): void {
 	<div
 		ref="appNavigationContainer"
 		class="app-navigation"
-		:class="{ 'app-navigation--closed': !open }">
+		:class="{
+			'app-navigation--closed': !open,
+			'app-navigation--legacy': isLegacy34,
+		}">
 		<nav
 			id="app-navigation-vue"
 			:aria-hidden="open ? 'false' : 'true'"
@@ -354,9 +358,14 @@ function handleEsc(): void {
 	user-select: none;
 	flex-grow: 0;
 	flex-shrink: 0;
-	background-color: var(--color-main-background-blur, var(--color-main-background));
-	-webkit-backdrop-filter: var(--filter-background-blur, none);
-	backdrop-filter: var(--filter-background-blur, none);
+	// New design (NC34+): transparent so the frosted chrome on NcContent shows through.
+	background-color: transparent;
+
+	&--legacy {
+		background-color: var(--color-main-background-blur, var(--color-main-background));
+		-webkit-backdrop-filter: var(--filter-background-blur, none);
+		backdrop-filter: var(--filter-background-blur, none);
+	}
 
 	&--closed {
 		margin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
index 32ec5ffb93..fcdb14e5c3 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -12,7 +12,7 @@
 			'icon-collapse--open': open,
 		}"
 		:aria-label="labelButton"
-		:variant="active ? 'tertiary-on-primary' : 'tertiary'"
+		:variant="(active && isLegacy34) ? 'tertiary-on-primary' : 'tertiary'"
 		@click="onClick">
 		<template #icon>
 			<ChevronUp
@@ -29,6 +29,7 @@
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import { t } from '../../l10n.ts'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcButton from '../NcButton/index.ts'
 
 export default {
@@ -40,6 +41,10 @@ export default {
 		ChevronUp,
 	},
 
+	setup() {
+		return { isLegacy34 }
+	},
+
 	props: {
 		/**
 		 * Is the list currently open (or collapsed)
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index a32296104f..d3f46e6cb2 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -322,6 +322,7 @@ Just set the `pinned` prop.
 				:class="{
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
+					'app-navigation-entry--legacy': isLegacy34,
 					active: (to && isActive) || active,
 				}">
 				<!-- Icon and name -->
@@ -391,7 +392,7 @@ Just set the `pinned` prop.
 						:open="menuOpen"
 						:forceMenu="forceMenu"
 						:defaultIcon="menuIcon"
-						:variant="(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'"
+						variant="tertiary"
 						@update:open="onMenuToggle">
 						<template #icon>
 							<!-- @slot Slot for the custom menu icon -->
@@ -444,6 +445,7 @@ import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { t } from '../../l10n.ts'
 import { createElementId } from '../../utils/createElementId.ts'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcActionButton from '../NcActionButton/index.js'
 import NcActions from '../NcActions/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.ts'
@@ -663,6 +665,7 @@ export default {
 	setup() {
 		return {
 			isMobile: useIsMobile(),
+			isLegacy34,
 		}
 	},
 
diff --git a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
index 5efbdab80c..7649b820fd 100644
--- a/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
+++ b/src/components/NcAppNavigationItem/NcInputConfirmCancel.vue
@@ -12,7 +12,7 @@
 </docs>
 
 <template>
-	<div class="app-navigation-input-confirm">
+	<div class="app-navigation-input-confirm" :class="{ 'app-navigation-input-confirm--legacy': isLegacy34 }">
 		<form
 			@submit.prevent="confirm"
 			@keydown.esc.exact.stop.prevent="cancel"
@@ -51,6 +51,7 @@
 import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import { t } from '../../l10n.ts'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcButton from '../NcButton/index.js'
 
 export default {
@@ -62,6 +63,10 @@ export default {
 		NcButton,
 	},
 
+	setup() {
+		return { isLegacy34 }
+	},
+
 	props: {
 		/**
 		 * If this element is used on a primary element set to true for primary styling.
@@ -156,5 +161,25 @@ $input-margin: 5px;
 			border-color: var(--color-primary-element);
 		}
 	}
+
+	// New design (NC34+): square confirm/cancel buttons with consistent gaps.
+	&:not(&--legacy) {
+		form {
+			align-items: center;
+			gap: $input-margin;
+			padding-inline-end: $input-margin;
+		}
+
+		.app-navigation-input-confirm__input {
+			margin-inline-end: 0 !important;
+		}
+
+		:deep(.button-vue) {
+			width: $input-height !important;
+			min-width: $input-height !important;
+			height: $input-height !important;
+			flex: 0 0 $input-height;
+		}
+	}
 }
 </style>
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index f44f18edfa..c5998496bc 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -440,7 +440,7 @@ import type { RouteLocationRaw } from 'vue-router'
 
 import { computed, inject } from 'vue'
 import { routerKey } from 'vue-router'
-import { isLegacy } from '../../utils/legacy.ts'
+import { isLegacy, isLegacy34 } from '../../utils/legacy.ts'
 import { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'
 
 export type ButtonAlignment = 'start'
@@ -699,6 +699,7 @@ function onClick(event: MouseEvent) {
 				[`button-vue--${flexAlignment}`]: flexAlignment !== 'center',
 				'button-vue--reverse': isReverseAligned,
 				'button-vue--legacy': isLegacy,
+				'button-vue--legacy34': isLegacy34,
 			},
 			formBoxItemClass,
 		]"
@@ -931,6 +932,12 @@ function onClick(event: MouseEvent) {
 		}
 	}
 
+	&--tertiary:not(#{&}--legacy34) {
+		&:hover:not(:disabled) {
+			background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
+		}
+	}
+
 	// Tertiary, no background
 	&--tertiary-no-background {
 		&:hover:not(:disabled) {
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index 5c15fb0943..18ec6e2525 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -71,6 +71,7 @@ import NcButton from '../NcButton/NcButton.vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
 import { t } from '../../l10n.ts'
+import { isLegacy34 } from '../../utils/legacy.ts'
 import { CONTENT_SELECTOR_KEY, HAS_APP_NAVIGATION_KEY } from './constants.ts'
 import contentSvg from './content-selected.svg?raw'
 import navigationSvg from './navigation-selected.svg?raw'
@@ -145,7 +146,10 @@ function setAppNavigation(value: boolean): void {
 </script>
 
 <template>
-	<div id="content-vue" class="content" :class="`app-${appName.toLowerCase()}`">
+	<div
+		id="content-vue"
+		class="content"
+		:class="[`app-${appName.toLowerCase()}`, { 'content--legacy': isLegacy34 }]">
 		<Teleport to="#skip-actions">
 			<div class="vue-skip-actions__container">
 				<div class="vue-skip-actions__headline">
@@ -190,6 +194,15 @@ function setAppNavigation(value: boolean): void {
 	padding: var(--body-container-margin)!important;
 	backdrop-filter: brightness(50%);
 }
+
+// New design (NC34+): divider only when an open navigation is present.
+@media only screen and (min-width: $breakpoint-mobile) {
+	.content:not(.content--legacy) .app-navigation:not(.app-navigation--closed):not(.app-navigation--close) ~ .app-content {
+		border-inline-start: 1px solid var(--color-border);
+		border-start-start-radius: var(--body-container-radius);
+		border-end-start-radius: var(--body-container-radius);
+	}
+}
 </style>
 
 <style lang="scss" scoped>
@@ -236,6 +249,14 @@ function setAppNavigation(value: boolean): void {
 	overflow: hidden;
 	padding: 0;
 
+	// New design (NC34+): wrapper carries the frosted chrome so nav and
+	// AppContent rounded-edge cutouts share one surface.
+	&:not(&--legacy) {
+		background-color: var(--color-main-background-blur, var(--color-main-background));
+		backdrop-filter: var(--filter-background-blur, none);
+		-webkit-backdrop-filter: var(--filter-background-blur, none);
+	}
+
 	&:not(.with-sidebar--full) {
 		position: fixed;
 	}
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 3ef88f1df9..2baea83577 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -448,7 +448,10 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 		v-bind="{ ...to && { custom: true, to } }">
 		<li
 			class="list-item__wrapper"
-			:class="{ 'list-item__wrapper--active': active ?? isActive }"
+			:class="{
+				'list-item__wrapper--active': active ?? isActive,
+				'list-item__wrapper--legacy': isLegacy34,
+			}"
 			v-bind="$attrs">
 			<div
 				ref="list-item"
@@ -502,7 +505,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 								<NcCounterBubble
 									v-if="counterNumber !== 0"
 									:count="counterNumber"
-									:active="active ?? isActive"
+									:active="isLegacy34 ? (active ?? isActive) : false"
 									class="list-item-details__counter"
 									:type="counterType" />
 
@@ -527,7 +530,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 					@focusout="handleBlur">
 					<NcActions
 						ref="actions"
-						:primary="active ?? isActive"
+						:primary="isLegacy34 ? (active ?? isActive) : false"
 						:forceMenu="forceMenu"
 						:aria-label="actionsAriaLabel"
 						@update:open="handleActionsUpdateOpen">
@@ -550,6 +553,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 </template>
 
 <script>
+import { isLegacy34 } from '../../utils/legacy.ts'
 import NcActions from '../NcActions/index.js'
 import NcCounterBubble from '../NcCounterBubble/index.ts'
 import NcVNodes from '../NcVNodes/index.ts'
@@ -565,6 +569,10 @@ export default {
 
 	inheritAttrs: false,
 
+	setup() {
+		return { isLegacy34 }
+	},
+
 	props: {
 		/**
 		 * The details text displayed in the upper right part of the component
@@ -851,8 +859,51 @@ export default {
 		padding-block-end: 4px
 	}
 
-	&--active,
-	&.active {
+	&:not(&--legacy):not(&--active):not(.active) {
+		.list-item:hover,
+		.list-item:focus-within,
+		.list-item:has(:active),
+		.list-item:has(:focus-visible) {
+			background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
+		}
+	}
+
+	&--active:not(&--legacy),
+	&.active:not(&--legacy) {
+		.list-item {
+			background-color: var(--color-primary-element-light);
+			color: var(--color-main-text) !important;
+
+			&:hover,
+			&:focus-within,
+			&:has(:focus-visible),
+			&:has(:active) {
+				background-color: var(--color-primary-element-light-hover);
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset-block: calc(var(--default-grid-baseline, 4px) * 2);
+				inset-inline-start: 0;
+				width: 3px;
+				background-color: var(--color-primary-element);
+				border-radius: 999px;
+				animation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;
+			}
+		}
+
+		.list-item-content__name,
+		.list-item-content__subname,
+		.list-item-content__details,
+		.list-item-details__details {
+			color: var(--color-main-text) !important;
+		}
+	}
+
+	// Legacy design (NC < 34): solid primary fill.
+	&--active.list-item__wrapper--legacy,
+	&.active.list-item__wrapper--legacy {
 		.list-item {
 			background-color: var(--color-primary-element);
 			color: var(--color-primary-element-text) !important;
@@ -872,6 +923,17 @@ export default {
 			color: var(--color-primary-element-text) !important;
 		}
 	}
+
+	@keyframes nc-nav-stripe-in {
+		from {
+			transform: scaleY(0);
+			opacity: 0;
+		}
+		to {
+			transform: scaleY(1);
+			opacity: 1;
+		}
+	}
 	.list-item-content__name,
 	.list-item-content__subname,
 	.list-item-content__details,
diff --git a/src/utils/legacy.ts b/src/utils/legacy.ts
index 6655279220..17f7f22b9c 100644
--- a/src/utils/legacy.ts
+++ b/src/utils/legacy.ts
@@ -4,4 +4,8 @@
  */
 
 const [majorVersion] = window.OC?.config?.version?.split('.') ?? []
-export const isLegacy = Number.parseInt(majorVersion ?? '32') < 32
+// Fallback assumes the current major when no server version is detectable
+// (tests, embedded use). Keeps legacy fallbacks off by default in those cases.
+const major = Number.parseInt(majorVersion ?? '34')
+export const isLegacy = major < 32
+export const isLegacy34 = major < 34
diff --git a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-entry-with-editing-true-1-chromium-linux.png b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-entry-with-editing-true-1-chromium-linux.png
index 48006a41f3..0ef8cfb1e6 100644
Binary files a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-entry-with-editing-true-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-entry-with-editing-true-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-route-with-editing-true-1-chromium-linux.png b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-route-with-editing-true-1-chromium-linux.png
index d5a646f0d9..ceee42a85f 100644
Binary files a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-route-with-editing-true-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-button-styling-on-active-route-with-editing-true-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-chromium-linux.png b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-chromium-linux.png
index 72184e804e..89f8d50e4f 100644
Binary files a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-entry-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-route-1-chromium-linux.png b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-route-1-chromium-linux.png
index ffa5e7699d..ddc4c1e18d 100644
Binary files a/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-route-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppNavigationItem/visual.spec.ts-snapshots/has-primary-styling-on-active-route-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-chromium-linux.png
index 2b49aee416..f244b38224 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-chromium-linux.png
index d2ae4d4ad1..4f5fa47e8b 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-chromium-linux.png
index 2b49aee416..f244b38224 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-chromium-linux.png
index d2ae4d4ad1..4f5fa47e8b 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-chromium-linux.png
index f4f2643599..d7de007da9 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-chromium-linux.png
index b8db71978b..851697ab76 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-chromium-linux.png
index 8ea3cfd6db..31a2db7191 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-actions-1-chromium-linux.png
index 29874ce1da..f40867ad77 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-editable-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-chromium-linux.png
index 8ee09e1079..961e9adee9 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-chromium-linux.png
index 5737b7f106..956f81d69e 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-chromium-linux.png
index 3298e2ae65..77bfddd7fe 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-chromium-linux.png
index feba47f26a..13a300ebde 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-chromium-linux.png
index 8e768e1182..18aeb2a9da 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-actions-1-chromium-linux.png
index 153459a3ba..3cefeae5fc 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-1-chromium-linux.png
index 0b7e6bc2fd..489c6e7c0e 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-actions-1-chromium-linux.png
index a79eca54c4..53351a5f5f 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-editable-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-chromium-linux.png
index c87449f83c..56dbd18d67 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-actions-1-chromium-linux.png
index c45f2e4da6..9a143e2d5f 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-compact-subname-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-chromium-linux.png
index f4f2643599..d7de007da9 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-chromium-linux.png
index b8db71978b..851697ab76 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-chromium-linux.png
index e3467d3851..3a9ece20a1 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-chromium-linux.png
index db2f808345..1f89ebbc72 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-editable-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-chromium-linux.png
index cb46f042dc..2fc2b752e9 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-chromium-linux.png
index 08012b4495..d1937c151a 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-chromium-linux.png
index 3298e2ae65..77bfddd7fe 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-chromium-linux.png
index feba47f26a..13a300ebde 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-chromium-linux.png
index 8e768e1182..18aeb2a9da 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-chromium-linux.png
index 153459a3ba..3cefeae5fc 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-chromium-linux.png
index 0d96552ec3..13bbd6ea42 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-actions-1-chromium-linux.png
index 30b028dd12..0e7b9b6d84 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-editable-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-chromium-linux.png
index 2520651983..ed6f33dc12 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-chromium-linux.png b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-chromium-linux.png
index da102e12b5..610f75bc04 100644
Binary files a/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-chromium-linux.png and b/tests/component/snapshots/components/NcAppSidebar/visual.spec.ts-snapshots/Sidebar-header-subname-header-actions-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-1-chromium-linux.png b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-1-chromium-linux.png
index 75e148f399..c433642f62 100644
Binary files a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-1-chromium-linux.png and b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-1-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-2-chromium-linux.png b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-2-chromium-linux.png
index 75e148f399..c433642f62 100644
Binary files a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-2-chromium-linux.png and b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-2-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-3-chromium-linux.png b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-3-chromium-linux.png
index 859b4eda1f..3dca6df3a2 100644
Binary files a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-3-chromium-linux.png and b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-3-chromium-linux.png differ
diff --git a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-4-chromium-linux.png b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-4-chromium-linux.png
index 8b8e38003b..af501a76d3 100644
Binary files a/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-4-chromium-linux.png and b/tests/component/snapshots/components/NcFilePicker/NcFilePicker.spec.ts-snapshots/setting-the-variant-prop-4-chromium-linux.png differ
diff --git a/tests/unit/components/NcField/legacy.spec.ts b/tests/unit/components/NcField/legacy.spec.ts
index e61b581038..e0b304556c 100644
--- a/tests/unit/components/NcField/legacy.spec.ts
+++ b/tests/unit/components/NcField/legacy.spec.ts
@@ -9,7 +9,7 @@ import NcInputField from '../../../../src/components/NcInputField/NcInputField.v
 import NcPasswordField from '../../../../src/components/NcPasswordField/NcPasswordField.vue'
 import NcTextField from '../../../../src/components/NcTextField/NcTextField.vue'
 
-vi.mock('../../../../src/utils/legacy.ts', () => ({ isLegacy: true }))
+vi.mock('../../../../src/utils/legacy.ts', () => ({ isLegacy: true, isLegacy34: true }))
 
 test.each`
 name                 | component
diff --git a/tests/unit/components/NcTextArea/legacy.spec.ts b/tests/unit/components/NcTextArea/legacy.spec.ts
index a725b0a5f4..8220ed7a27 100644
--- a/tests/unit/components/NcTextArea/legacy.spec.ts
+++ b/tests/unit/components/NcTextArea/legacy.spec.ts
@@ -7,7 +7,7 @@ import { mount } from '@vue/test-utils'
 import { expect, test, vi } from 'vitest'
 import NcTextArea from '../../../../src/components/NcTextArea/NcTextArea.vue'
 
-vi.mock('../../../../src/utils/legacy.ts', () => ({ isLegacy: true }))
+vi.mock('../../../../src/utils/legacy.ts', () => ({ isLegacy: true, isLegacy34: true }))
 
 test('NcTextArea should have the label as the placeholder on Nextcloud 31', () => {
 	const wrapper = mount(NcTextArea, {