diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
deleted file mode 100644
index 87872bc289..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, html, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { first, map } from 'rxjs';
-import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section.context';
-import type { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent, IRoutingInfo } from '@umbraco-cms/router';
-import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
-import type { ManifestDashboard, ManifestDashboardCollection } from '@umbraco-cms/models';
-
-import { UmbLitElement } from '@umbraco-cms/element';
-
-@customElement('umb-section-dashboards')
-export class UmbSectionDashboardsElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			#tabs {
-				background-color: var(--uui-color-surface);
-				height: 70px;
-				border-bottom: 1px solid var(--uui-color-border);
-				box-sizing: border-box;
-			}
-
-			#scroll-container {
-				flex: 1;
-				position: relative;
-			}
-
-			#router-slot {
-				box-sizing: border-box;
-				display: block;
-				padding: var(--uui-size-5);
-			}
-
-			#header {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				width: 100%;
-				min-height: 60px;
-				box-sizing: border-box;
-				margin: 0;
-				padding: 0 var(--uui-size-5);
-				background-color: var(--uui-color-surface);
-				border-bottom: 1px solid var(--uui-color-border);
-			}
-		`,
-	];
-
-	@state()
-	private _dashboards?: Array<ManifestDashboard | ManifestDashboardCollection>;
-
-	@state()
-	private _routes: Array<any> = [];
-
-	@state()
-	private _routerPath?: string;
-
-	@state()
-	private _activePath?: string;
-
-	private _currentSectionAlias?: string;
-	private _sectionContext?: UmbSectionContext;
-
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (context) => {
-			this._sectionContext = context;
-			this._observeSectionContext();
-		});
-	}
-
-	private _observeSectionContext() {
-		if (!this._sectionContext) return;
-
-		this.observe(this._sectionContext.alias.pipe(first()), (alias) => {
-			this._currentSectionAlias = alias;
-			this._observeDashboards();
-		});
-	}
-
-	private _observeDashboards() {
-		if (!this._currentSectionAlias) return;
-
-		this.observe(
-			umbExtensionsRegistry
-				?.extensionsOfTypes<ManifestDashboard | ManifestDashboardCollection>(['dashboard', 'dashboardCollection'])
-				.pipe(
-					map((extensions) =>
-						extensions.filter((extension) => extension.conditions.sections.includes(this._currentSectionAlias ?? ''))
-					)
-				),
-			(dashboards) => {
-				this._dashboards = dashboards || undefined;
-				this._createRoutes();
-			}
-		);
-	}
-
-	private _createRoutes() {
-		this._routes = [];
-
-		if (this._dashboards) {
-			this._routes = this._dashboards.map((dashboard) => {
-				return {
-					path: `${dashboard.meta.pathname}`,
-					component: () => {
-						if (dashboard.type === 'dashboardCollection') {
-							return import('src/backoffice/shared/collection/dashboards/dashboard-collection.element');
-						}
-						return createExtensionElement(dashboard);
-					},
-					setup: (component: Promise<HTMLElement> | HTMLElement, info: IRoutingInfo) => {
-						// When its using import, we get an element, when using createExtensionElement we get a Promise.
-						// TODO: this is a bit hacky, can we do it in a more appropriate way:
-						if ((component as any).then) {
-							(component as any).then((el: any) => (el.manifest = dashboard));
-						} else {
-							(component as any).manifest = dashboard;
-						}
-					},
-				};
-			});
-
-			this._routes.push({
-				path: '**',
-				redirectTo: this._dashboards?.[0]?.meta.pathname,
-			});
-		}
-	}
-
-	private _renderNavigation() {
-		return html`
-			${this._dashboards && this._dashboards.length > 1
-				? html`
-						<uui-tab-group id="tabs">
-							${this._dashboards.map(
-								(dashboard) => html`
-									<uui-tab
-										href="${this._routerPath}/${dashboard.meta.pathname}"
-										label=${dashboard.meta.label || dashboard.name}
-										?active="${dashboard.meta.pathname === this._activePath}"></uui-tab>
-								`
-							)}
-						</uui-tab-group>
-				  `
-				: this._dashboards?.length === 1
-				? html`<h3 id="header">${this._dashboards[0].meta.label || this._dashboards[0].name}</h3>`
-				: nothing}
-		`;
-	}
-
-	render() {
-		return html`
-			${this._renderNavigation()}
-			<uui-scroll-container id="scroll-container">
-				<umb-router-slot
-					id="router-slot"
-					.routes="${this._routes}"
-					@init=${(event: UmbRouterSlotInitEvent) => {
-						this._routerPath = event.target.absoluteRouterPath;
-					}}
-					@change=${(event: UmbRouterSlotChangeEvent) => {
-						this._activePath = event.target.localActiveViewPath;
-					}}></umb-router-slot>
-			</uui-scroll-container>
-		`;
-	}
-}
-
-export default UmbSectionDashboardsElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-section-dashboards': UmbSectionDashboardsElement;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts
deleted file mode 100644
index 28c3096f16..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.stories.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit-html';
-import { manifests } from '../../../../documents/section.manifests';
-import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section.context';
-import type { UmbSectionDashboardsElement } from './section-dashboards.element';
-import type { ManifestSection } from '@umbraco-cms/models';
-import './section-dashboards.element';
-
-const contentSectionManifest = manifests.find((m) => m.alias === 'Umb.Section.Content') as ManifestSection;
-
-export default {
-	title: 'Sections/Shared/Section Dashboards',
-	component: 'umb-section-dashboards',
-	id: 'umb-section-dashboards',
-	decorators: [
-		(story) =>
-			html` <umb-context-provider
-				key=${UMB_SECTION_CONTEXT_TOKEN.toString()}
-				.value=${new UmbSectionContext(contentSectionManifest)}>
-				${story()}
-			</umb-context-provider>`,
-	],
-} as Meta;
-
-export const AAAOverview: Story<UmbSectionDashboardsElement> = () =>
-	html` <umb-section-dashboards></umb-section-dashboards> `;
-AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
index 4ee4405469..5dba7bfcba 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
@@ -2,13 +2,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map, of } from 'rxjs';
-import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section.context';
-import type { ManifestSectionView } from '@umbraco-cms/models';
+import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
+import type { ManifestDashboard, ManifestSectionView } from '@umbraco-cms/models';
 import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 import { UmbLitElement } from '@umbraco-cms/element';
 import { UmbObserverController } from '@umbraco-cms/observable-api';
 
+// TODO: this might need a new name, since it's both view and dashboard now
 @customElement('umb-section-views')
 export class UmbSectionViewsElement extends UmbLitElement {
 	static styles = [
@@ -17,14 +18,17 @@ export class UmbSectionViewsElement extends UmbLitElement {
 			#header {
 				background-color: var(--uui-color-surface);
 				border-bottom: 1px solid var(--uui-color-divider-standalone);
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
 			}
 
-			uui-tab-group {
+			#views {
 				justify-content: flex-end;
 				--uui-tab-divider: var(--uui-color-divider-standalone);
 			}
 
-			uui-tab-group uui-tab:first-child {
+			#views uui-tab:first-child {
 				border-left: 1px solid var(--uui-color-divider-standalone);
 			}
 		`,
@@ -36,6 +40,9 @@ export class UmbSectionViewsElement extends UmbLitElement {
 	@state()
 	private _views: Array<ManifestSectionView> = [];
 
+	@state()
+	private _dashboards: Array<ManifestDashboard> = [];
+
 	@state()
 	private _routerPath?: string;
 
@@ -47,49 +54,76 @@ export class UmbSectionViewsElement extends UmbLitElement {
 
 	private _sectionContext?: UmbSectionContext;
 	private _extensionsObserver?: UmbObserverController<ManifestSectionView[]>;
+	private _viewsObserver?: UmbObserverController<ManifestSectionView[]>;
+	private _dashboardObserver?: UmbObserverController<ManifestDashboard[]>;
 
 	constructor() {
 		super();
 
 		this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (sectionContext) => {
 			this._sectionContext = sectionContext;
-			this._observeViews();
+			this._observeSectionAlias();
 		});
 	}
 
-	async #createRoutes(viewManifests: Array<ManifestSectionView>) {
-		if (!viewManifests) return;
-		const routes = viewManifests.map((manifest) => {
+	async #createRoutes() {
+		const dashboardRoutes = this._dashboards?.map((manifest) => {
 			return {
-				path: manifest.meta.pathname,
+				path: 'dashboard/' + manifest.meta.pathname,
 				component: () => createExtensionElement(manifest),
 			};
 		});
 
-		this._routes = [...routes, { path: '**', redirectTo: routes[0].path }];
+		const viewRoutes = this._views?.map((manifest) => {
+			return {
+				path: 'view/' + manifest.meta.pathname,
+				component: () => createExtensionElement(manifest),
+			};
+		});
+
+		const routes = [...dashboardRoutes, ...viewRoutes];
+		this._routes = routes?.length > 0 ? [...routes, { path: '**', redirectTo: routes?.[0]?.path }] : [];
 	}
 
-	private _observeViews() {
+	private _observeSectionAlias() {
 		if (!this._sectionContext) return;
 
 		this.observe(
 			this._sectionContext.alias,
 			(sectionAlias) => {
-				this._observeExtensions(sectionAlias);
+				this._observeViews(sectionAlias);
+				this._observeDashboards(sectionAlias);
 			},
 			'viewsObserver'
 		);
 	}
-	private _observeExtensions(sectionAlias?: string) {
-		this._extensionsObserver?.destroy();
+
+	private _observeViews(sectionAlias?: string) {
+		this._viewsObserver?.destroy();
 		if (sectionAlias) {
-			this._extensionsObserver = this.observe(
+			this._viewsObserver = this.observe(
 				umbExtensionsRegistry
 					?.extensionsOfType('sectionView')
 					.pipe(map((views) => views.filter((view) => view.conditions.sections.includes(sectionAlias)))) ?? of([]),
 				(views) => {
 					this._views = views;
-					this.#createRoutes(views);
+					this.#createRoutes();
+				}
+			);
+		}
+	}
+
+	private _observeDashboards(sectionAlias?: string) {
+		this._dashboardObserver?.destroy();
+
+		if (sectionAlias) {
+			this._dashboardObserver = this.observe(
+				umbExtensionsRegistry
+					?.extensionsOfType('dashboard')
+					.pipe(map((views) => views.filter((view) => view.conditions.sections.includes(sectionAlias)))) ?? of([]),
+				(views) => {
+					this._dashboards = views;
+					this.#createRoutes();
 				}
 			);
 		}
@@ -97,9 +131,9 @@ export class UmbSectionViewsElement extends UmbLitElement {
 
 	render() {
 		return html`
-			${this._views.length > 0
+			${this._routes.length > 0
 				? html`
-						<div id="header">${this.#renderTabs()}</div>
+						<div id="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
 						<umb-router-slot
 							.routes=${this._routes}
 							@init=${(event: UmbRouterSlotInitEvent) => {
@@ -114,15 +148,32 @@ export class UmbSectionViewsElement extends UmbLitElement {
 		`;
 	}
 
-	#renderTabs() {
+	#renderDashboards() {
 		return html`
-			<uui-tab-group>
+			<uui-tab-group id="dashboards">
+				${this._dashboards.map(
+					(dashboard) => html`
+						<uui-tab
+							.label="${dashboard.meta.label || dashboard.name}"
+							href="${this._routerPath}/dashboard/${dashboard.meta.pathname}"
+							?active="${this._activePath === 'dashboard/' + dashboard.meta.pathname}">
+							${dashboard.meta.label || dashboard.name}
+						</uui-tab>
+					`
+				)}
+			</uui-tab-group>
+		`;
+	}
+
+	#renderViews() {
+		return html`
+			<uui-tab-group id="views">
 				${this._views.map(
-					(view: ManifestSectionView) => html`
+					(view) => html`
 						<uui-tab
 							.label="${view.meta.label || view.name}"
-							href="${this._routerPath}/${view.meta.pathname}"
-							?active="${this._activePath === view.meta.pathname}">
+							href="${this._routerPath}/view/${view.meta.pathname}"
+							?active="${this._activePath === 'view/' + view.meta.pathname}">
 							<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
 							${view.meta.label || view.name}
 						</uui-tab>
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 ac57c973c1..e45c54f975 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
@@ -2,12 +2,10 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'rxjs';
-
-import type { IRoutingInfo } from '@umbraco-cms/router';
 import type { UmbWorkspaceElement } from '../workspace/workspace.element';
-import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from './section.context';
 import type { UmbSectionViewsElement } from './section-views/section-views.element';
-import type { ManifestSectionView, ManifestMenuSectionSidebarApp, ManifestSection } from '@umbraco-cms/models';
+import type { IRoutingInfo } from '@umbraco-cms/router';
+import type { ManifestMenuSectionSidebarApp, ManifestSection } from '@umbraco-cms/models';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 import { UmbLitElement } from '@umbraco-cms/element';
 
@@ -49,39 +47,16 @@ export class UmbSectionElement extends UmbLitElement {
 	@state()
 	private _menus?: Array<ManifestMenuSectionSidebarApp>;
 
-	@state()
-	private _views?: Array<ManifestSectionView>;
-
-	private _sectionContext?: UmbSectionContext;
-	private _sectionAlias?: string;
-
-	constructor() {
-		super();
-
-		this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (instance) => {
-			this._sectionContext = instance;
-
-			// TODO: currently they don't corporate, as they overwrite each other...
-			this.#observeSectionAlias();
-			this.#createRoutes();
-		});
+	connectedCallback() {
+		super.connectedCallback();
+		this.#observeSectionSidebarApps();
+		this.#createRoutes();
 	}
 
 	#createRoutes() {
 		this._routes = [];
 
 		this._routes = [
-			{
-				path: 'dashboard',
-				component: () => import('./section-dashboards/section-dashboards.element'),
-			},
-			{
-				path: 'view',
-				component: () => import('../section/section-views/section-views.element'),
-				setup: (element: UmbSectionViewsElement) => {
-					element.sectionAlias = this.manifest?.alias;
-				},
-			},
 			{
 				path: 'workspace/:entityType',
 				component: () => import('../workspace/workspace.element'),
@@ -91,35 +66,27 @@ export class UmbSectionElement extends UmbLitElement {
 			},
 			{
 				path: '**',
-				redirectTo: 'view',
+				component: () => import('../section/section-views/section-views.element'),
+				setup: (element: UmbSectionViewsElement) => {
+					element.sectionAlias = this.manifest?.alias;
+				},
 			},
 		];
 	}
 
-	#observeSectionAlias() {
-		if (!this._sectionContext) return;
-
-		this.observe(this._sectionContext.alias, (alias) => {
-			this._sectionAlias = alias;
-			this.#observeSectionSidebarApps(alias);
-		});
-	}
-
-	#observeSectionSidebarApps(sectionAlias?: string) {
-		if (sectionAlias) {
-			this.observe(
-				umbExtensionsRegistry
-					?.extensionsOfType('menuSectionSidebarApp')
-					.pipe(
-						map((manifests) => manifests.filter((manifest) => manifest.conditions.sections.includes(sectionAlias)))
-					),
-				(manifests) => {
-					this._menus = manifests;
-				}
-			);
-		} else {
-			this._menus = [];
-		}
+	#observeSectionSidebarApps() {
+		this.observe(
+			umbExtensionsRegistry
+				?.extensionsOfType('menuSectionSidebarApp')
+				.pipe(
+					map((manifests) =>
+						manifests.filter((manifest) => manifest.conditions.sections.includes(this.manifest?.alias || ''))
+					)
+				),
+			(manifests) => {
+				this._menus = manifests;
+			}
+		);
 	}
 
 	render() {
@@ -131,12 +98,12 @@ export class UmbSectionElement extends UmbLitElement {
 							<umb-extension-slot
 								type="sectionSidebarApp"
 								.filter=${(items: ManifestMenuSectionSidebarApp) =>
-									items.conditions.sections.includes(this._sectionAlias || '')}></umb-extension-slot>
+									items.conditions.sections.includes(this.manifest?.alias || '')}></umb-extension-slot>
 
 							<umb-extension-slot
 								type="menuSectionSidebarApp"
 								.filter=${(items: ManifestMenuSectionSidebarApp) =>
-									items.conditions.sections.includes(this._sectionAlias || '')}
+									items.conditions.sections.includes(this.manifest?.alias || '')}
 								default-element="umb-section-sidebar-menu"></umb-extension-slot>
 						</umb-section-sidebar>
 				  `