diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
index fb52592c89..70a7960fc0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
@@ -1,11 +1,14 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import '../tooltip-menu.element';
+import { map } from 'rxjs';
 import { TooltipMenuItem } from '../tooltip-menu.element';
+import { UmbObserverMixin } from '@umbraco-cms/observable-api';
+import type { ManifestCollectionLayout } from '@umbraco-cms/models';
+import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 
 @customElement('umb-collection-toolbar')
-export class UmbCollectionToolbarElement extends LitElement {
+export class UmbCollectionToolbarElement extends UmbObserverMixin(LitElement) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -27,31 +30,6 @@ export class UmbCollectionToolbarElement extends LitElement {
 		`,
 	];
 
-	@property()
-	public viewTypes: Array<TooltipMenuItem> = [
-		{
-			label: 'List',
-			icon: 'umb:list',
-			action: () => {
-				this._currentViewType = this.viewTypes[0];
-			},
-		},
-		{
-			label: 'Grid',
-			icon: 'umb:grid',
-			action: () => {
-				console.log('aweawd');
-				this._currentViewType = this.viewTypes[1];
-			},
-		},
-		{
-			label: 'something else',
-			icon: 'umb:folder',
-			action: () => {
-				this._currentViewType = this.viewTypes[2];
-			},
-		},
-	];
 	@property()
 	public actions: Array<TooltipMenuItem> = [
 		{
@@ -70,11 +48,15 @@ export class UmbCollectionToolbarElement extends LitElement {
 		},
 	];
 
+	@state()
+	private _collectionLayouts: Array<ManifestCollectionLayout> = [];
+
 	@property()
 	public useSearch = true;
 
 	@state()
-	private _currentViewType = this.viewTypes[0];
+	private _currentViewType?: ManifestCollectionLayout;
+
 	@state()
 	private _search = '';
 	@state()
@@ -82,9 +64,41 @@ export class UmbCollectionToolbarElement extends LitElement {
 	@state()
 	private _viewTypesOpen = false;
 
+	constructor() {
+		super();
+		this._observeCollectionLayouts();
+	}
+
+	private _observeCollectionLayouts() {
+		this.observe<Array<ManifestCollectionLayout>>(
+			umbExtensionsRegistry?.extensionsOfType('collectionLayout').pipe(
+				map((extensions) => {
+					//TODO: This is working, so why can ts not find the type?
+					return extensions.filter((extension) => extension.meta.entityType === 'media');
+				})
+			),
+			(layouts) => {
+				console.log('layouts', layouts);
+				if (layouts?.length === 0) return;
+				this._collectionLayouts = layouts;
+
+				if (!this._currentViewType) {
+					this._currentViewType = layouts[0];
+				}
+			}
+		);
+	}
+
+	private _changeLayout(path: string) {
+		history.pushState(null, '', 'section/media/dashboard/media-management/' + path);
+	}
+
 	private _toggleViewType() {
-		const index = this.viewTypes.indexOf(this._currentViewType);
-		this._currentViewType = this.viewTypes[(index + 1) % this.viewTypes.length];
+		if (!this._currentViewType) return;
+
+		const index = this._collectionLayouts.indexOf(this._currentViewType);
+		this._currentViewType = this._collectionLayouts[(index + 1) % this._collectionLayouts.length];
+		this._changeLayout(this._currentViewType.meta.pathName);
 	}
 
 	private _updateSearch(e: InputEvent) {
@@ -116,19 +130,28 @@ export class UmbCollectionToolbarElement extends LitElement {
 	}
 
 	private _renderViewTypeButton() {
-		if (this.viewTypes.length < 2 || !this._currentViewType.icon) return nothing;
+		if (!this._currentViewType) return;
 
-		if (this.viewTypes.length === 2) {
+		if (this._collectionLayouts.length < 2 || !this._currentViewType.meta.icon) return nothing;
+
+		if (this._collectionLayouts.length === 2) {
 			return html`<uui-button @click=${this._toggleViewType} look="outline" compact>
-				<uui-icon .name=${this._currentViewType.icon}></uui-icon>
+				<uui-icon .name=${this._currentViewType.meta.icon}></uui-icon>
 			</uui-button>`;
 		}
-		if (this.viewTypes.length > 2) {
+		if (this._collectionLayouts.length > 2) {
 			return html`<uui-popover margin="8" .open=${this._viewTypesOpen} @close=${() => (this._viewTypesOpen = false)}>
 				<uui-button @click=${() => (this._viewTypesOpen = !this._viewTypesOpen)} slot="trigger" look="outline" compact>
-					<uui-icon .name=${this._currentViewType.icon}></uui-icon>
+					<uui-icon .name=${this._currentViewType.meta.icon}></uui-icon>
 				</uui-button>
-				<umb-tooltip-menu icon slot="popover" .items=${this.viewTypes}></umb-tooltip-menu>
+				<umb-tooltip-menu
+					icon
+					slot="popover"
+					.items=${this._collectionLayouts.map((layout) => ({
+						label: layout.meta.label,
+						icon: layout.meta.icon,
+						action: () => console.log('change layout'),
+					}))}></umb-tooltip-menu>
 			</uui-popover>`;
 		}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
index 44d28fcccf..bbdcb1b096 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
@@ -92,7 +92,6 @@ export class UmbCollectionLayoutGridElement extends UmbContextConsumerMixin(UmbO
 
 		this.observe<Array<MediaDetails>>(this._mediaStore?.items, (items) => {
 			this._mediaItems = items;
-			console.log('items', items);
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts
index 24339ba240..5d7861e086 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts
@@ -7,13 +7,15 @@ import '../../components/collection/collection-view.element';
 import { map } from 'rxjs';
 import { IRoutingInfo } from 'router-slot';
 import type { ManifestCollectionLayout } from '@umbraco-cms/models';
-import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
 import { UmbObserverMixin } from '@umbraco-cms/observable-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
 import { createExtensionElement } from '@umbraco-cms/extensions-api';
 
 @customElement('umb-dashboard-media-management')
-export class UmbDashboardMediaManagementElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
+export class UmbDashboardMediaManagementElement extends UmbContextProviderMixin(
+	UmbContextConsumerMixin(UmbObserverMixin(LitElement))
+) {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -39,6 +41,7 @@ export class UmbDashboardMediaManagementElement extends UmbContextConsumerMixin(
 
 	constructor() {
 		super();
+		this.provideContext('umbMediaContext', this);
 		this._observeCollectionLayouts();
 	}
 
@@ -51,7 +54,6 @@ export class UmbDashboardMediaManagementElement extends UmbContextConsumerMixin(
 				})
 			),
 			(layouts) => {
-				console.log('layouts', layouts);
 				if (layouts?.length === 0) return;
 				this._collectionLayouts = layouts;
 				this._createRoutes();