diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.server.data-source.ts
index 7b8c3f199f..29ed640c79 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.server.data-source.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.server.data-source.ts
@@ -1,7 +1,7 @@
+import { UmbStylesheetTreeItemModel } from './types.js';
 import { FileSystemTreeItemPresentationModel, StylesheetResource } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
-import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/tree';
+import { UmbTreeServerDataSourceBase } from '@umbraco-cms/backoffice/tree';
 
 /**
  * A data source for the Stylesheet tree that fetches data from the server
@@ -9,62 +9,40 @@ import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/tree';
  * @class UmbStylesheetTreeServerDataSource
  * @implements {UmbTreeDataSource}
  */
-export class UmbStylesheetTreeServerDataSource implements UmbTreeDataSource<FileSystemTreeItemPresentationModel> {
-	#host: UmbControllerHost;
-
+export class UmbStylesheetTreeServerDataSource extends UmbTreeServerDataSourceBase<
+	FileSystemTreeItemPresentationModel,
+	UmbStylesheetTreeItemModel
+> {
 	/**
 	 * Creates an instance of UmbStylesheetTreeServerDataSource.
 	 * @param {UmbControllerHost} host
 	 * @memberof UmbStylesheetTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHost) {
-		this.#host = host;
-	}
-
-	/**
-	 * Fetches the stylesheet tree root items from the server
-	 * @return {*}
-	 * @memberof UmbStylesheetTreeServerDataSource
-	 */
-	async getRootItems() {
-		return tryExecuteAndNotify(this.#host, StylesheetResource.getTreeStylesheetRoot({}));
-	}
-
-	/**
-	 * Fetches the children of a given stylesheet path from the server
-	 * @param {(string | null)} path
-	 * @return {*}
-	 * @memberof UmbStylesheetTreeServerDataSource
-	 */
-	async getChildrenOf(path: string | null) {
-		if (path === undefined) throw new Error('Path is missing');
-
-		/* TODO: should we make getRootItems() internal 
-		so it only is a server concern that there are two endpoints? */
-		if (path === null) {
-			return this.getRootItems();
-		} else {
-			return tryExecuteAndNotify(
-				this.#host,
-				StylesheetResource.getTreeStylesheetChildren({
-					path,
-				}),
-			);
-		}
-	}
-
-	/**
-	 * Fetches stylesheet items from the server
-	 * @param {(string | undefined)} path
-	 * @return {*}
-	 * @memberof UmbStylesheetTreeServerDataSource
-	 */
-	async getItems(path: Array<string>) {
-		return tryExecuteAndNotify(
-			this.#host,
-			StylesheetResource.getStylesheetItem({
-				path,
-			}),
-		);
+		super(host, {
+			getChildrenOf,
+			mapper,
+		});
 	}
 }
+
+const getChildrenOf = (parentUnique: string | null) => {
+	if (parentUnique === null) {
+		return StylesheetResource.getTreeStylesheetRoot({});
+	} else {
+		return StylesheetResource.getTreeStylesheetChildren({
+			path: parentUnique,
+		});
+	}
+};
+
+const mapper = (item: FileSystemTreeItemPresentationModel): UmbStylesheetTreeItemModel => {
+	return {
+		path: item.path!,
+		name: item.name!,
+		type: 'stylesheet',
+		isFolder: item.isFolder!,
+		hasChildren: item.hasChildren!,
+		isContainer: false,
+	};
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/types.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/types.ts
new file mode 100644
index 0000000000..b0fd9cd505
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/types.ts
@@ -0,0 +1,5 @@
+import type { UmbFileSystemTreeItemModel } from '@umbraco-cms/backoffice/tree';
+
+export interface UmbStylesheetTreeItemModel extends UmbFileSystemTreeItemModel {}
+// TODO: TREE STORE TYPE PROBLEM:
+export interface UmbStylesheetTreeRootModel extends UmbFileSystemTreeItemModel {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/template-tree.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/template-tree.server.data-source.ts
index e578c61e0b..793aab236e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/template-tree.server.data-source.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/tree/template-tree.server.data-source.ts
@@ -1,8 +1,7 @@
 import { UmbTemplateTreeItemModel } from './types.js';
-import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/tree';
-import { TemplateResource } from '@umbraco-cms/backoffice/backend-api';
+import { UmbTreeServerDataSourceBase } from '@umbraco-cms/backoffice/tree';
+import { EntityTreeItemResponseModel, TemplateResource } from '@umbraco-cms/backoffice/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
  * A data source for the Template tree that fetches data from the server
@@ -10,50 +9,42 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
  * @class UmbTemplateTreeServerDataSource
  * @implements {UmbTreeDataSource}
  */
-export class UmbTemplateTreeServerDataSource implements UmbTreeDataSource<UmbTemplateTreeItemModel> {
-	#host: UmbControllerHost;
-
+export class UmbTemplateTreeServerDataSource extends UmbTreeServerDataSourceBase<
+	EntityTreeItemResponseModel,
+	UmbTemplateTreeItemModel
+> {
 	/**
 	 * Creates an instance of UmbTemplateTreeServerDataSource.
 	 * @param {UmbControllerHost} host
 	 * @memberof UmbTemplateTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHost) {
-		this.#host = host;
-	}
-
-	/**
-	 * Fetches the root items for the tree from the server
-	 * @return {*}
-	 * @memberof UmbTemplateTreeServerDataSource
-	 */
-	async getRootItems() {
-		return tryExecuteAndNotify(this.#host, TemplateResource.getTreeTemplateRoot({}));
-	}
-
-	/**
-	 * Fetches the children of a given parent id from the server
-	 * @param {(string)} parentId
-	 * @return {*}
-	 * @memberof UmbTemplateTreeServerDataSource
-	 */
-	async getChildrenOf(parentId: string | null) {
-		/* TODO: should we make getRootItems() internal
-		so it only is a server concern that there are two endpoints? */
-		if (parentId === null) {
-			return this.getRootItems();
-		} else {
-			return tryExecuteAndNotify(
-				this.#host,
-				TemplateResource.getTreeTemplateChildren({
-					parentId,
-				}),
-			);
-		}
-	}
-
-	// TODO: remove when interface is cleaned up
-	async getItems(unique: Array<string>): Promise<any> {
-		throw new Error('Dot not use this method. Use the item source instead');
+		super(host, {
+			getChildrenOf,
+			mapper,
+		});
 	}
 }
+
+const getChildrenOf = (parentUnique: string | null) => {
+	if (parentUnique === null) {
+		// eslint-disable-next-line local-rules/no-direct-api-import
+		return TemplateResource.getTreeTemplateRoot({});
+	} else {
+		// eslint-disable-next-line local-rules/no-direct-api-import
+		return TemplateResource.getTreeTemplateChildren({
+			parentId: parentUnique,
+		});
+	}
+};
+
+const mapper = (item: EntityTreeItemResponseModel): UmbTemplateTreeItemModel => {
+	return {
+		id: item.id!,
+		parentId: item.parentId || null,
+		name: item.name!,
+		type: 'template',
+		isContainer: item.isContainer!,
+		hasChildren: item.hasChildren!,
+	};
+};