diff --git a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
index acdbc95a01..d6cc08b4c8 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/browser-handlers.ts
@@ -13,7 +13,7 @@ import { handlers as examineManagementHandlers } from './handlers/examine-manage
 import { handlers as modelsBuilderHandlers } from './handlers/modelsbuilder.handlers.js';
 import { handlers as healthCheckHandlers } from './handlers/health-check.handlers.js';
 import { handlers as profilingHandlers } from './handlers/performance-profiling.handlers.js';
-import { handlers as documentHandlers } from './handlers/document/document.handlers.js';
+import { handlers as documentHandlers } from './handlers/document/index.js';
 import { handlers as mediaHandlers } from './handlers/media.handlers.js';
 import { handlers as dictionaryHandlers } from './handlers/dictionary.handlers.js';
 import { handlers as mediaTypeHandlers } from './handlers/media-type.handlers.js';
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
index 6822e966f0..89f48bb69c 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
@@ -7,6 +7,7 @@ import {
 	DocumentTreeItemResponseModel,
 	PagedDocumentTreeItemResponseModel,
 	PagedDocumentTypeResponseModel,
+	PagedRecycleBinItemResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 
 export const data: Array<DocumentResponseModel> = [
@@ -547,6 +548,20 @@ export const treeData: Array<DocumentTreeItemResponseModel> = [
 		isEdited: false,
 		isTrashed: false,
 	},
+	{
+		name: 'Trashed',
+		type: 'document',
+		icon: 'document',
+		hasChildren: false,
+		id: 'trashed-document-id',
+		isContainer: false,
+		parentId: null,
+		noAccess: false,
+		isProtected: false,
+		isPublished: false,
+		isEdited: false,
+		isTrashed: true,
+	},
 ];
 
 // Temp mocked database
@@ -617,6 +632,20 @@ class UmbDocumentData extends UmbEntityData<DocumentResponseModel> {
 		const total = items?.length;
 		return { items, total };
 	}
+
+	getRecycleBinRoot(): PagedRecycleBinItemResponseModel {
+		const items = this.treeData.filter((item) => item.parentId === null && item.isTrashed);
+		const treeItems = items.map((item) => item);
+		const total = items.length;
+		return { items: treeItems, total };
+	}
+
+	getRecycleBinChildren(parentId: string): PagedRecycleBinItemResponseModel {
+		const items = this.treeData.filter((item) => item.parentId === parentId && item.isTrashed);
+		const treeItems = items.map((item) => item);
+		const total = items.length;
+		return { items: treeItems, total };
+	}
 }
 
 export const umbDocumentData = new UmbDocumentData();
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/index.ts
new file mode 100644
index 0000000000..96c7673028
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/index.ts
@@ -0,0 +1,4 @@
+import { handlers as recycleBinHandlers } from './recycle-bin.handlers.js';
+import { handlers as documentHandlers } from './document.handlers.js';
+
+export const handlers = [...recycleBinHandlers, ...documentHandlers];
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/recycle-bin.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/recycle-bin.handlers.ts
new file mode 100644
index 0000000000..564fb0eeff
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/document/recycle-bin.handlers.ts
@@ -0,0 +1,20 @@
+const { rest } = window.MockServiceWorker;
+import { umbDocumentData } from '../../data/document.data.js';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const handlers = [
+	rest.get(umbracoPath(`/recycle-bin/document/root`), (req, res, ctx) => {
+		const response = umbDocumentData.getRecycleBinRoot();
+
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.get(umbracoPath(`/recycle-bin/document/children`), (req, res, ctx) => {
+		const parentId = req.url.searchParams.get('parentId');
+		if (!parentId) return;
+
+		const response = umbDocumentData.getRecycleBinChildren(parentId);
+
+		return res(ctx.status(200), ctx.json(response));
+	}),
+];