diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
index e83f23426c..8d5b26d19f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -33,6 +33,8 @@ import { UmbIconStore } from '../core/stores/icon/icon.store';
 import { UmbUserGroupStore } from '../core/stores/user/user-group.store';
 import { UmbCurrentUserHistoryStore } from '../core/stores/current-user-history/current-user-history.store';
 import { UmbDictionaryStore } from '../core/stores/dictionary/dictionary.store';
+import { UmbDocumentBlueprintStore } from '../core/stores/document-blueprint/document-blueprint.store';
+
 import { manifests as sectionManifests } from './sections/manifests';
 import { manifests as propertyEditorModelManifests } from './property-editors/models/manifests';
 import { manifests as propertyEditorUIManifests } from './property-editors/uis/manifests';
@@ -41,8 +43,10 @@ import { manifests as editorManifests } from './workspaces/manifests';
 import { manifests as propertyActionManifests } from './property-actions/manifests';
 import { manifests as externalLoginProviderManifests } from './external-login-providers/manifests';
 import { manifests as userDashboards } from './user-dashboards/manifests';
+
 import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
+
 import type { ManifestTypes } from '@umbraco-cms/models';
 
 @defineElement('umb-backoffice')
@@ -92,6 +96,7 @@ export class UmbBackofficeElement extends UmbContextConsumerMixin(UmbContextProv
 		this.provideContext('umbSectionStore', new UmbSectionStore());
 		this.provideContext('umbCurrentUserHistoryStore', new UmbCurrentUserHistoryStore());
 		this.provideContext('umbDictionaryStore', new UmbDictionaryStore());
+		this.provideContext('umbDocumentBlueprintStore', new UmbDocumentBlueprintStore());
 	}
 
 	private _registerExtensions(manifests: Array<ManifestTypes> | Array<ManifestTypes>) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/trees/document-blueprints/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/trees/document-blueprints/manifests.ts
new file mode 100644
index 0000000000..1c4248d50f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/trees/document-blueprints/manifests.ts
@@ -0,0 +1,18 @@
+import type { ManifestTree } from '@umbraco-cms/extensions-registry';
+
+const treeAlias = 'Umb.Tree.DocumentBlueprints';
+
+const tree: ManifestTree = {
+	type: 'tree',
+	alias: treeAlias,
+	name: 'Document Blueprints Tree',
+	weight: 400,
+	meta: {
+		label: 'Document Blueprints',
+		icon: 'umb:blueprint',
+		sections: ['Umb.Section.Settings'],
+		rootNodeEntityType: 'document-blueprint-root',
+	},
+};
+
+export const manifests = [tree];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/trees/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/trees/manifests.ts
index f57c2ef846..6739b791a2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/trees/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/trees/manifests.ts
@@ -1,5 +1,6 @@
 import { manifests as dataTypeTreeManifests } from './data-types/manifests';
 import { manifests as dictionaryTreeManifests } from './dictionary/manifests';
+import { manifests as documentBlueprintTreeManifests } from './document-blueprints/manifests';
 import { manifests as documentTypeTreeManifests } from './document-types/manifests';
 import { manifests as documentTreeManifests } from './documents/manifests';
 import { manifests as extensionTreeManifests } from './extensions/manifests';
@@ -14,6 +15,7 @@ import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models';
 export const manifests: Array<ManifestTree | ManifestTreeItemAction> = [
 	...dataTypeTreeManifests,
 	...dictionaryTreeManifests,
+	...documentBlueprintTreeManifests,
 	...documentTypeTreeManifests,
 	...documentTreeManifests,
 	...extensionTreeManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-blueprint/workspace-document-blueprint-root.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-blueprint/workspace-document-blueprint-root.element.ts
new file mode 100644
index 0000000000..daa73ac58a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/document-blueprint/workspace-document-blueprint-root.element.ts
@@ -0,0 +1,17 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-workspace-document-blueprint-root')
+export class UmbWorkspaceDocumentBlueprintRootElement extends LitElement {
+	render() {
+		return html` <div>Document Blueprint Root Workspace</div> `;
+	}
+}
+
+export default UmbWorkspaceDocumentBlueprintRootElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-workspace-document-blueprint-root': UmbWorkspaceDocumentBlueprintRootElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/manifests.ts
index c285135cb4..aca324b52e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/workspaces/manifests.ts
@@ -136,4 +136,13 @@ export const manifests: Array<ManifestWorkspace> = [
 			entityType: 'dictionary',
 		},
 	},
+	{
+		type: 'workspace',
+		alias: 'Umb.Workspace.DocumentBlueprintRoot',
+		name: 'Document Blueprint Root Workspace',
+		loader: () => import('./document-blueprint/workspace-document-blueprint-root.element'),
+		meta: {
+			entityType: 'document-blueprint-root',
+		},
+	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-blueprint.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-blueprint.data.ts
new file mode 100644
index 0000000000..20255ded62
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-blueprint.data.ts
@@ -0,0 +1,35 @@
+import { UmbEntityData } from './entity.data';
+import type { DocumentBlueprintDetails } from '@umbraco-cms/models';
+
+export const data: Array<DocumentBlueprintDetails> = [
+	{
+		name: 'Document Blueprint 1',
+		type: 'document-blueprint',
+		key: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+		icon: 'umb:blueprint',
+		documentTypeKey: 'd81c7957-153c-4b5a-aa6f-b434a4964624',
+		properties: [],
+		data: [],
+	},
+	{
+		name: 'Document Blueprint 2',
+		type: 'document-blueprint',
+		key: '3fa85f64-5717-4562-b3qc-2c963f66afa6',
+		icon: 'umb:blueprint',
+		documentTypeKey: 'a99e4018-3ffc-486b-aa76-eecea9593d17',
+		properties: [],
+		data: [],
+	},
+];
+
+// Temp mocked database
+// TODO: all properties are optional in the server schema. I don't think this is correct.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+class UmbDocumentBlueprintData extends UmbEntityData<DocumentBlueprintDetails> {
+	constructor() {
+		super(data);
+	}
+}
+
+export const umbDocumentBlueprintData = new UmbDocumentBlueprintData();
diff --git a/src/Umbraco.Web.UI.Client/src/core/models/index.ts b/src/Umbraco.Web.UI.Client/src/core/models/index.ts
index acc20d34c3..ce52b3e5c5 100644
--- a/src/Umbraco.Web.UI.Client/src/core/models/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/models/index.ts
@@ -131,3 +131,14 @@ export interface MemberGroupDetails extends EntityTreeItem {
 export interface DictionaryDetails extends EntityTreeItem {
 	key: string; // TODO: Remove this when the backend is fixed
 }
+
+// Document Blueprint
+export interface DocumentBlueprintDetails {
+	key: string;
+	name: string;
+	type: 'document-blueprint';
+	properties: Array<any>;
+	data: Array<any>;
+	icon: string;
+	documentTypeKey: string;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/core/stores/document-blueprint/document-blueprint.store.ts b/src/Umbraco.Web.UI.Client/src/core/stores/document-blueprint/document-blueprint.store.ts
new file mode 100644
index 0000000000..07eedac780
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/core/stores/document-blueprint/document-blueprint.store.ts
@@ -0,0 +1,37 @@
+import { map, Observable } from 'rxjs';
+import { UmbNodeStoreBase } from '../store';
+import type { DocumentBlueprintDetails, DocumentDetails } from '@umbraco-cms/models';
+import { DocumentBlueprintTreeItem } from '@umbraco-cms/backend-api';
+
+export type UmbDocumentStoreItemType = DocumentBlueprintDetails | DocumentBlueprintTreeItem;
+
+const isDocumentBlueprintDetails = (
+	documentBlueprint: DocumentBlueprintDetails | DocumentBlueprintTreeItem
+): documentBlueprint is DocumentBlueprintDetails => {
+	return (documentBlueprint as DocumentBlueprintDetails).data !== undefined;
+};
+
+/**
+ * @export
+ * @class UmbDocumentStore
+ * @extends {UmbDocumentStoreBase<DocumentDetails | DocumentTreeItem>}
+ * @description - Data Store for Documents
+ */
+export class UmbDocumentBlueprintStore extends UmbNodeStoreBase<UmbDocumentStoreItemType> {
+	getByKey(key: string): Observable<DocumentDetails | null> {
+		// TODO: implement call to end point
+		return this.items.pipe(
+			map(
+				(documentBlueprints) =>
+					(documentBlueprints.find(
+						(documentBlueprint) => documentBlueprint.key === key && isDocumentBlueprintDetails(documentBlueprint)
+					) as DocumentDetails) || null
+			)
+		);
+	}
+
+	// TODO: implement call to end point
+	save(): any {
+		return;
+	}
+}