diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts
index 56fbe793be..106f5b391a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts
@@ -15,7 +15,62 @@ const workspace: ManifestWorkspace = {
 	},
 };
 
-const workspaceViews: Array<ManifestWorkspaceEditorView> = [];
+const workspaceViews: Array<ManifestWorkspaceEditorView> = [
+	{
+		type: 'workspaceEditorView',
+		alias: 'Umb.WorkspaceView.MediaType.Design',
+		name: 'Media Type Workspace Design View',
+		loader: () => import('./views/details/media-type-design-workspace-view.element.js'),
+		weight: 90,
+		meta: {
+			label: 'Details',
+			pathname: 'details',
+			icon: 'document',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: workspace.alias,
+			},
+		],
+	},
+	{
+		type: 'workspaceEditorView',
+		alias: 'Umb.WorkspaceView.MediaType.ListView',
+		name: 'Media Type Workspace ListView View',
+		loader: () => import('./views/details/media-type-list-view-workspace-view.element.js'),
+		weight: 90,
+		meta: {
+			label: 'List View',
+			pathname: 'list-view',
+			icon: 'bug',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: workspace.alias,
+			},
+		],
+	},
+	{
+		type: 'workspaceEditorView',
+		alias: 'Umb.WorkspaceView.MediaType.Permissions',
+		name: 'Media Type Workspace Permissions View',
+		loader: () => import('./views/details/media-type-permissions-workspace-view.element.js'),
+		weight: 90,
+		meta: {
+			label: 'Permissions',
+			pathname: 'permissions',
+			icon: 'bug',
+		},
+		conditions: [
+			{
+				alias: 'Umb.Condition.WorkspaceAlias',
+				match: workspace.alias,
+			},
+		],
+	},
+];
 const workspaceViewCollections: Array<ManifestWorkspaceViewCollection> = [];
 const workspaceActions: Array<ManifestWorkspaceAction> = [];
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts
new file mode 100644
index 0000000000..77b9b97f99
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts
@@ -0,0 +1,68 @@
+import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	UmbModalManagerContext,
+	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
+	UMB_PROPERTY_EDITOR_UI_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MediaTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-media-type-design-workspace-view')
+export class UmbMediaTypeDesignWorkspaceViewEditElement
+	extends UmbLitElement
+	implements UmbWorkspaceEditorViewExtensionElement
+{
+	@state()
+	_mediaType?: MediaTypeResponseModel;
+
+	private _workspaceContext?: typeof UMB_MEDIA_TYPE_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (_instance) => {
+			this._workspaceContext = _instance;
+			this._observeMediaType();
+		});
+	}
+
+	private _observeMediaType() {
+		if (!this._workspaceContext) {
+			return;
+		}
+
+		this.observe(this._workspaceContext.data, (mediaType) => {
+			this._mediaType = mediaType;
+		});
+	}
+
+	render() {
+		return html`<uui-box> ${this._mediaType?.alias}</uui-box>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+				padding-bottom: var(--uui-size-layout-1);
+			}
+
+			uui-box {
+				margin-top: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export default UmbMediaTypeDesignWorkspaceViewEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-type-design-workspace-view': UmbMediaTypeDesignWorkspaceViewEditElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts
new file mode 100644
index 0000000000..46a63c562c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts
@@ -0,0 +1,68 @@
+import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	UmbModalManagerContext,
+	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
+	UMB_PROPERTY_EDITOR_UI_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MediaTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-media-type-list-view-workspace-view')
+export class UmbMediaTypeListViewWorkspaceViewEditElement
+	extends UmbLitElement
+	implements UmbWorkspaceEditorViewExtensionElement
+{
+	@state()
+	_mediaType?: MediaTypeResponseModel;
+
+	private _workspaceContext?: typeof UMB_MEDIA_TYPE_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (_instance) => {
+			this._workspaceContext = _instance;
+			this._observeMediaType();
+		});
+	}
+
+	private _observeMediaType() {
+		if (!this._workspaceContext) {
+			return;
+		}
+
+		this.observe(this._workspaceContext.data, (mediaType) => {
+			this._mediaType = mediaType;
+		});
+	}
+
+	render() {
+		return html`<uui-box> List View view for ${this._mediaType?.alias}</uui-box>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+				padding-bottom: var(--uui-size-layout-1);
+			}
+
+			uui-box {
+				margin-top: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export default UmbMediaTypeListViewWorkspaceViewEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-type-list-view-workspace-view': UmbMediaTypeListViewWorkspaceViewEditElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts
new file mode 100644
index 0000000000..5dc1a4eab3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts
@@ -0,0 +1,68 @@
+import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context.js';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	UmbModalManagerContext,
+	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
+	UMB_PROPERTY_EDITOR_UI_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { MediaTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('umb-media-type-permissions-workspace-view')
+export class UmbMediaTypePermissionsWorkspaceViewEditElement
+	extends UmbLitElement
+	implements UmbWorkspaceEditorViewExtensionElement
+{
+	@state()
+	_mediaType?: MediaTypeResponseModel;
+
+	private _workspaceContext?: typeof UMB_MEDIA_TYPE_WORKSPACE_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (_instance) => {
+			this._workspaceContext = _instance;
+			this._observeMediaType();
+		});
+	}
+
+	private _observeMediaType() {
+		if (!this._workspaceContext) {
+			return;
+		}
+
+		this.observe(this._workspaceContext.data, (mediaType) => {
+			this._mediaType = mediaType;
+		});
+	}
+
+	render() {
+		return html`<uui-box>Permissions View for ${this._mediaType?.alias}</uui-box>`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+				padding-bottom: var(--uui-size-layout-1);
+			}
+
+			uui-box {
+				margin-top: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export default UmbMediaTypePermissionsWorkspaceViewEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-type-permissions-workspace-view': UmbMediaTypePermissionsWorkspaceViewEditElement;
+	}
+}