diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
index 9f19e4ee06..6c63ea29ae 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
@@ -11,6 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
 
 import './section-sidebar-menu/section-sidebar-menu.element.ts';
 import './section-views/section-views.element.ts';
+import { UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
 
 @customElement('umb-section')
 export class UmbSectionElement extends UmbLitElement {
@@ -173,9 +174,6 @@ export class UmbSectionElement extends UmbLitElement {
 				return {
 					path: 'view/' + view.meta.pathname,
 					component: () => createExtensionElement(view),
-					setup: () => {
-						this._sectionContext?.setActiveView(view);
-					},
 				};
 			}) ?? [];
 
@@ -187,6 +185,13 @@ export class UmbSectionElement extends UmbLitElement {
 		}
 	}
 
+	private _onRouteChange = (event: UmbRouterSlotChangeEvent) => {
+		const currentPath = event.target.localActiveViewPath;
+		const view = this._views?.find((view) => 'view/' + view.meta.pathname === currentPath);
+		if (!view) return;
+		this._sectionContext?.setActiveView(view);
+	}
+
 	render() {
 		return html`
 			${this._menuItems && this._menuItems.length > 0
@@ -199,7 +204,7 @@ export class UmbSectionElement extends UmbLitElement {
 			<umb-section-main>
 				${this._views && this._views.length > 0 ? html`<umb-section-views></umb-section-views>` : nothing}
 				${this._routes && this._routes.length > 0
-					? html`<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>`
+					? html`<umb-router-slot id="router-slot" .routes="${this._routes}" @change=${this._onRouteChange}></umb-router-slot>`
 					: nothing}
 				<slot></slot>
 			</umb-section-main>