diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/manifests.ts
index ba57460520..5e3df74993 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/manifests.ts
@@ -40,6 +40,8 @@ const treeItem: ManifestTreeItem = {
 	kind: 'default',
 	alias: 'Umb.TreeItem.Media',
 	name: 'Media Tree Item',
+	element: () => import('./tree-item/media-tree-item.element.js'),
+	api: () => import('./tree-item/media-tree-item.context.js'),
 	forEntityTypes: [UMB_MEDIA_ROOT_ENTITY_TYPE, UMB_MEDIA_ENTITY_TYPE],
 };
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.context.ts
new file mode 100644
index 0000000000..8b63e2563f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.context.ts
@@ -0,0 +1,11 @@
+import type { UmbMediaTreeItemModel } from '../types.js';
+import { UmbDefaultTreeItemContext } from '@umbraco-cms/backoffice/tree';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbMediaTreeItemContext extends UmbDefaultTreeItemContext<UmbMediaTreeItemModel> {
+	constructor(host: UmbControllerHost) {
+		super(host);
+	}
+}
+
+export { UmbMediaTreeItemContext as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
new file mode 100644
index 0000000000..5a108a47ab
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
@@ -0,0 +1,43 @@
+import type { UmbMediaTreeItemModel } from '../types.js';
+import { css, html, customElement, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
+
+const elementName = 'umb-media-tree-item';
+@customElement(elementName)
+export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTreeItemModel> {
+	renderIconContainer() {
+		return html`
+			<span id="icon-container" slot="icon">
+				${this.item?.mediaType.icon
+					? html` <umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon> `
+					: nothing}
+			</span>
+		`;
+	}
+
+	renderLabel() {
+		return html`<span id="label" slot="label">${this._item?.variants[0].name}</span> `;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			#icon-container {
+				position: relative;
+			}
+
+			#icon {
+				vertical-align: middle;
+			}
+		`,
+	];
+}
+
+export { UmbMediaTreeItemElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbMediaTreeItemElement;
+	}
+}