diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.repository.ts
index ba84eeedc0..b38b17af75 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/tree/stylesheet-tree.repository.ts
@@ -35,8 +35,25 @@ export class UmbStylesheetTreeRepository
 		return { data };
 	}
 
+	async requestRootTreeItems() {
+		console.log('stylesheet root');
+		await this.#init;
+
+		const { data, error } = await this.#treeDataSource.getRootItems();
+
+		if (data) {
+			this.#treeStore?.appendItems(data.items);
+		}
+
+		return { data, error, asObservable: () => this.#treeStore!.rootItems };
+	}
+
 	async requestTreeItemsOf(path: string | null) {
 		if (path === undefined) throw new Error('Cannot request tree item with missing path');
+		if (path === null || path === '/' || path === '') {
+			return this.requestRootTreeItems();
+		}
+
 		await this.#init;
 
 		const { data, error } = await this.#treeDataSource.getChildrenOf(path);
@@ -48,6 +65,11 @@ export class UmbStylesheetTreeRepository
 		return { data, error, asObservable: () => this.#treeStore!.childrenOf(path) };
 	}
 
+	async rootTreeItems() {
+		await this.#init;
+		return this.#treeStore!.rootItems;
+	}
+
 	async treeItemsOf(parentPath: string | null) {
 		if (!parentPath) throw new Error('Parent Path is missing');
 		await this.#init;
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 e48374460a..aed02ea8a3 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
@@ -21,6 +21,15 @@ export class UmbStylesheetTreeServerDataSource implements UmbTreeDataSource<File
 		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
@@ -30,8 +39,10 @@ export class UmbStylesheetTreeServerDataSource implements UmbTreeDataSource<File
 	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 tryExecuteAndNotify(this.#host, StylesheetResource.getTreeStylesheetRoot({}));
+			return this.getRootItems();
 		} else {
 			return tryExecuteAndNotify(
 				this.#host,